I'm trying to figure out how to lock individual elements so they can't be moved by the user. I don't want to prevent all elements to be moved just individual ones.
In my case I want to prevent user from moving elements that are inside another element (embedded).
Say for example on the pointer down event. The following code does not work but is there a "locked" attribute or something similar to use?
this.paper.on(
"element:pointerdown",
function(elementView) {
elementView.model.set("locked", "true");
}.bind(this)
);
I have tried using the following code to make a "child" element non interactive but this prevents the user from creating for example a link from that element.
this.paper = new joint.dia.Paper({
interactive: function(cellView) {
if (cellView.model.isElement()) {
if (cellView.model.parent()) {
return false;
}
}
return true;
},
Found a solution which will make the element not movable but still allow the user to create a link from the element.
this.paper = new joint.dia.Paper({
interactive: function(cellView) {
if (cellView.model.isElement()) {
if (cellView.model.parent()) {
return { elementMove: false };
}
}
return true;
},