I am currently in research for a suitable library for my upcoming project, where I have to create an application with which one can create data-flow-diagrams. In my research I have come in touch with JointJs, which I also already have created some prototypes with. It looks good so far, but there is one thing where I need some help with.
So the app will be running on mobile devices, thats why I do not want to use ports, but rather the ability to use the entire shape as a magnet and draw links to other shapes on the paper. This causes the links to behave in this weird way when connecting them to a circular shape (see this picture).
This is the function I used in the pictured example to add the circle shape to the paper:
function addProcess() {
var c = new joint.shapes.standard.Circle({
position: { x: 80, y: 80 },
size: { width: 100, height: 100 }
});
graph.addCells([c]);
}
Does anyone have an idea how to solve or circumvent this problem? I have also thought about maybe when the link is created, guiding it to a predefined place on the shape it is connecting to (top, bottom, left, right).
Any help is greatly appreciated.
EDIT:
I found a workaround with the jointJs anchor funtionality (as described in the documentation -> https://resources.jointjs.com/docs/jointjs/v3.2/joint.html). So i just added
paper.options.defaultAnchor = {
name: 'midSide',
args: {
rotate: true
}
};
and now it automatically sets the anchors for the link to the middle of the side of each element. While this is in my opinion not the perfect solution, it definitely gets the job done. I am still leaving this question open, in case somebody finds a better solution.
Okay, so turns out the perfect solution is to simply change the defaultConnectionPoint in the paper options:
defaultConnectionPoint: {
name: 'boundary'
},
That way all the links start/end on the shape itself, not the surrounding bbox. Again, all in the documentation under: https://resources.jointjs.com/docs/jointjs/v3.2/joint.html#connectionPoints.intro