I want to interactively add links to my JointJS based graph.
My idea is to create a small temporary node on pointerdown with a link from the original node to this temporary node, drag it on top of another node and on pointerup create the real link removing the temporary link and node.
Unfortunately I don't know how to convince the pointer to move the temporary element and not the node on which the pointerdown event happened. Any idea?
Thanks!
var tmp_obj;
paper.on('cell:pointerdown', function(cellView, evt, x, y) {
if(evt.button == 1) {
// Freeze the selected node so it does not move
paper.findViewByModel(cellView.model).options.interactive = false;
// Create a small temporary node on top of the selected node
tmp_obj = new joint.shapes.basic.Rect({
position: { x: x, y: y },
size: { width: 5, height: 5 }
}
// Create the link between the original node and the small temporary node
// And now?
}
}
paper.on('cell:pointerup', function(cellView, evt, x, y) {
if(evt.button == 1) {
// Unfreeze the origin node
paper.findViewByModel(cellView.model).options.interactive = true;
// Delete the temporary object (and temporary link)
tmp_obj.remove()
// Find the first element below that is not a link nor the dragged element itself.
var elementBelow = graph.get('cells').find(function(cell) {
if (cell instanceof joint.dia.Link) return false; // Not interested in links.
if (cell.id === cellView.model.id) return false; // The same element as the dropped one.
if (cell.getBBox().containsPoint(g.point(x, y))) {
return true;
}
return false;
});
// create the link from cellView to elementBelow
}
});
I want to interactively add links to my JointJS based graph.
My idea is to create a small temporary node on pointerdown with a link from the original node to this temporary node, drag it on top of another node and on pointerup create the real link removing the temporary link and node.
Unfortunately I don't know how to convince the pointer to move the temporary element and not the node on which the pointerdown event happened. Any idea?
Thanks!
var tmp_obj;
paper.on('cell:pointerdown', function(cellView, evt, x, y) {
if(evt.button == 1) {
// Freeze the selected node so it does not move
paper.findViewByModel(cellView.model).options.interactive = false;
// Create a small temporary node on top of the selected node
tmp_obj = new joint.shapes.basic.Rect({
position: { x: x, y: y },
size: { width: 5, height: 5 }
}
// Create the link between the original node and the small temporary node
// And now?
}
}
paper.on('cell:pointerup', function(cellView, evt, x, y) {
if(evt.button == 1) {
// Unfreeze the origin node
paper.findViewByModel(cellView.model).options.interactive = true;
// Delete the temporary object (and temporary link)
tmp_obj.remove()
// Find the first element below that is not a link nor the dragged element itself.
var elementBelow = graph.get('cells').find(function(cell) {
if (cell instanceof joint.dia.Link) return false; // Not interested in links.
if (cell.id === cellView.model.id) return false; // The same element as the dropped one.
if (cell.getBBox().containsPoint(g.point(x, y))) {
return true;
}
return false;
});
// create the link from cellView to elementBelow
}
});
3 Answers
Reset to default 10Maybe you can use the magnet feature of JointJS? If you set magnet: true on an SVG subelement of a JointJS element, that element bees active and will allow the user to create a link starting from that element. For example:
var r = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: 100, height: 40 },
attrs: { text: { text: 'basic.Rect', magnet: true } }
});
This will make the element behave like a port.
To prevent the dangling links:
joint.dia.Paper({ linkPinning: false })
Here is a nice solution.
You can bine
linkView.startArrowheadMove('target');
and
evt.data.view.pointermove(evt, p.x, p.y);