Search code examples
jointjs

How to lock individual elements in JointJS?


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;
  },

Solution

  • 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;
      },