JointJs creating custom shapes and specifying their default link - jointjs

I'm trying to implement my own shape class with ports. However I want the links that these shapes generate to be smooth. Right now, the only way i know to make smooth links is
link.set('smooth', true).
But how do i do that not through code? How do i get smooth links by just dragging?
I extended Link class (MyLink) but how do i tell JointJS which Link class to use when i drag on the port?
joint.shapes.myclass.Link = joint.dia.Link.extend({
defaults: {
type: 'myclass.Link',
attrs: { '.connection' : { 'stroke-width' : 5 }},
smooth:true
}
});

Links created via the UI by dragging ports are defined in the defaultLink property of the paper. It can either be an object in which case it is a link model or a function that returns a link model:
var paper = new joint.dia.Paper({
defaultLink: new joint.shapes.myclass.Link,
...
})
or:
var paper = new joint.dia.Paper({
defaultLink: function(elementView, magnet) {
if (aCondition) return new joint.dia.Link;
else return joint.shapes.myclass.Link;
}
})
The function gives you flexibility in creating different links on the fly depending on what element is underneath or what magnet (SVG element for port) is being dragged.

Related

How to access Object3D material after adding the GLTF

I want to duplicate my GLTF models with different positions/colors dynamically, to do so I have done:
const L_4_G = new Object3D();
...
const multiLoad_4 = (result, position) => {
const model = result.scene.children[0];
model.position.copy(position);
model.scale.set(0.05, 0.05, 0.05);
//
L_4_G.add(model.clone())
scene.add(model);
};
...
function duplicateModel4() {
L_4_G.translateX(-1.2)
L_4_G.translateY(0.0)//0.48
L_4_G.translateZ(1.2)
L_4_G.rotateY(Math.PI / 2);
scene.add(L_4_G);
}
I didn't find out how can I change the Object3D color from the documentation, can you please tell me how can I do that? thanks in advance.
Here is the full code that I'm using, and here are the models
Update
I have seen this solution, to store a set of colors in the object's userData and choose the color later:
L_2_G.userData.colors = {green : #00FF00, red : ..., ...}
L_2_G.children[0].material.color(userData.colors["green"])
But I'm getting an error that children[0] undefined, but I can see that this object has a child and a material, and color via the console: console.log(L_2_G.children), console.log(L_2_G.children.length)--> 0
Also I have tried getObjectByName as explained here:
scene.getObjectByName(name).children[0].material.color.set(color);
which also reslts: children[0] is undefined, scene.getObjectByName(name).children.length is 0.
THREE.Object3D is a base class for anything that can go in a scene graph, including lights, cameras, and empty objects. Not all Object3D instances have geometry or materials. You may be looking for the THREE.Mesh subclass which does have materials and colors.
In general, code like getObjectByName(...) and model = result.scene.children[0] is very content-specific. The file might contain many nested objects, and .children[0] just grabs the first part. It's usually best to traverse the scene graph instead, looking for the objects you want to modify (e.g. looking for all Meshes, or Meshes with a particular name).
const model = result.scene;
model.traverse((object) => {
if (object.isMesh) {
object.material.color.setHex( 0x404040 );
}
});
Then you can either add the entire group to your scene (scene.add(model)), or just add parts of it. Keep in mind that adding meshes to a new parent removes them from their previous parent, and you shouldn't do that while traversing the previous parent. Instead you can make a list of meshes, and add them in a second step:
const meshes = [];
result.scene.traverse((object) => {
if (object.isMesh) {
meshes.push(object);
}
});
for (const mesh of meshes) {
scene.add(mesh);
}
Finally, the position of an object is inherited from its parents. By removing the object from its original parents you might change its position in the scene. If you are planing to assign a new position to the object anyway, that is fine.

Changing color of specific elements of 3D model using ifcLoader of three.js

I have an ifc file for a 3D model, and I'm trying to make different elements of the model different colors. I'm using the IFC.js web-ifc-three IFCLoader for three.js. There are multiple examples of how to use the library but when I try to change colors for the elements based on a list of expressIDs there aren't any changes. I've tried making a subset with a specific material after the model is loaded, but that doesn't work either.
I use:
//Sets up the IFC loading
var ifcModels = [];
var ifcLoader = new IFCLoader();
ifcLoader.ifcManager.setWasmPath("./three/examples/jsm/loaders/ifc/");
ifcLoader.load("./models/rac_advanced_sample_project.ifc", (ifcModel) => {
ifcModels.push(ifcModel);
console.log(ifcModels[0]);
scene.add(ifcModel)
});
const initMaterial = new THREE.MeshLambertMaterial({
transparent: true,
opacity: 0.6,
color: 0x008000,
depthTest: false
});
console.log(ifcModels);
console.log(ifcModels[0]);
ifcLoader.ifcManager.createSubset({
modelID: ifcModels[0].modelID,
ids: [281144],
material: initMaterial,
scene: scene,
removePrevious: true
});
to try to change the color of an element where its expressID is 281144, for example.
This is the code from one of their examples that I base the rest of my code off of:
highlighting-single example
Does anyone know how to do this/has been able to do this?

Select and manipulate particular paths within a path group fabric.js

I am making an app that involves shapes like cylinders and boxes, and need to be able to do this with fabric.js. I know about three.js but for my purposes, it must be in 2D.
Initially I thought I would just create them in 3D software and render images which can then be added to the canvas, which I did successfully...
However, I have run into a hurdle where fabric only allows patterns to be filled onto paths or objects (rect, circle etc.)....not images (png).
Since I absolutely need patterns, I now need to create these cylinders in SVG. I have gotten as far as making the cylinders in Illustrator, saving them as SVG's and then using them on the canvas, then adding fill patterns on them. So far so good.
Now I want to be able to fill a different pattern for the top of the cylinder, and a different pattern to the side BUT still have it as one object.
So...How can I select and manipulate particular paths within a path group? Is there anyway to give each path within the group a custom attribute (eg. name) which I can then target? Do I need to create two seperate SVG files and then add them seperately, and if so, how can I do this and still have it as one object?
Here's how I am adding the svg to the canvas...
fabric.loadSVGFromURL("/shapes/50-250R.png", function(objects) {
var oImg = fabric.util.groupSVGElements(objects);
oImg.perPixelTargetFind = true;
oImg.targetFindTolerance = 4;
oImg.componentType = "Shape";
oImg.lockUniScaling = true;
oImg.lockScalingX = true;
oImg.lockScalingY = true;
oImg.setControlsVisibility({'tl': false, 'tr': false, 'bl': false, 'br': false});
canvas.add(oImg);
canvas.renderAll();
});
Here is how I am adding the pattern...
var textureIMG = new Image;
textureIMG.crossOrigin = "anonymous";
textureIMG.src = texture.image;
obj.setFill(); //For some reason, the fill doesn't happen without this line.
var pattern = new fabric.Pattern({
source: textureIMG,
repeat: 'repeat'
});
if (obj instanceof fabric.PathGroup) {
obj.getObjects().forEach(function(o) {
o.setFill(pattern);
});
} else {
obj.setFill(pattern);
}
canvas.renderAll();
Thanks in advance.
So I managed to figure this out. Each path within the path group is stored in the 'paths' array of the object.
I can now add a pattern to the top of the cylinder using...
var obj = canvas.getActiveObject();
obj.paths[0].fill = patternOne;
and to the sides using...
obj.paths[1].fill = patternTwo;

Jointjs When dragging a link target, have it call a custom function

I would like to override the default link behaviour. I have a function that deals with connecting a link to a target following a certain set of rules. For example, LinkTypeA will can only connect to ObjectType1 and ObjectType2, and LinkTypeB will only connect with ObjectType3.
In the case that the user is creating LinkTypeA, and terminates when clicking on ObjectType3, a point (x, y) is created for the links target.
This is because ObjectType1 and ObjectType2 are often embedded above a ObjectType3.
I have that behaviour working correctly, but when you grab a links end and drag it, when letting go, it runs an internal function instead, which allows it to connect to ObjectType3.
I would like to override this and have it call my custom function. How can I do this?
linkValidation function should handle it even if the link is being dragged. In the example below only shapes with a same type can be linked (rect with rect, circle with circle).
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 650,
height: 400,
model: graph,
linkPinning: false,
validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
var source = cellViewS.model.get('type');
var target = cellViewT.model.get('type');
return source && source === target;
}
});
https://jsfiddle.net/vtalas/65uteht9/

How to customize fabric canvas with customize property

Good morning,everyone ,I have a problem that I want to pass an array of fabric json data to server, and load it back for after a while, since I have to load the details from canvas from multiple page pdf. It has to pass the canvas name as well.
problem here is if I use JSON.stringify(mycanvas);
it doesn't convert my customize attribute into json data. So I have to do something like inherit from the fabric canvas to extend the attribute.
I found some useful like to create custom text, custom image, I tried something similar to them, it just doesn't work. Please help me on this.
my code :
code to create such customize canvas
//////////////////////////////////////////////////////////////
create CustomCanvas class from Text class
fabric.CustomCanvas = fabric.util.createClass(fabric.Canvas, {
type: 'custom-canvas',
initialize: function(element, options) {
this.callSuper('initialize', element, options);
options && this.set('canvasname', options.canvasname);
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'),
{canvasname: this.canvasname});
}
});
fabric.CustomText.fromObject = function(object) {
return new fabric.canvasname(object`enter code here`);
};
fabric.canvasname.async = false;`enter code here`
//////////////////////////////////////////////////////////////
//and to create a new customize canvas
var canvas = new fabric.CustomCanvas();
canvas.setBackgroundImage(src, function() {
canvas.renderAll();
});
canvas.canvasname=1111;
I will so appreciate it, if someone could help me on this.

Resources