CODEWITHSUNDEEP
cssjointjs
jsanchezs
jsanchezs

Reputation: 2070

Make only links interactive in joint js

I got this joint js code with some rects and links :

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: $('#div1'),
    interactive: false,
    width: 1200,
    height: 1200,
    model: graph,
    gridSize: 1
});
    var rect1 = new joint.shapes.basic.Rect({
        position: { x: 80, y: y_value },
        size: { width: 30, height: 55 },
        attrs: { 
            rect: { fill: bgcolor1,'stroke-width': 0 },
            text: {
                text: 'Rect1',
                fill: 'white'
            } 
        }
    });

    var rect2 = new joint.shapes.basic.Rect({
        position: { x: 80, y: y_value + 80 },
        size: { width: 30, height: 55 },
        attrs: { 
            rect: { fill: bgcolor1,'stroke-width': 0 },
            text: {
                text: 'Rect1',
                fill: 'white'
            } 
        }
    });

    var link{{ pre }} = new joint.dia.Link({
        source: { id: rect1.id },
        target: { id: rect2.id },
        vertices: [{ x: initialx, y: syposition.y + 23 }, { x: initialx, y: typosition.y + 23 }],
    });

As you can see i have the paper property interactive in 'false', so user can't drag and drop any element or delete links, buttt actually want that he can drag the link vertices as he wish, how can i do it ?, wich property in joint.min.css ? or from this code is ther a way ??

Thanks in advance !

Upvotes: 0

Views: 1283

Answers (1)

Roman
Roman

Reputation: 1674

First of all you can define interactive as a function, that returns true for links and false for elements. That makes links interactive while elements not.

var paper = new joint.dia.Paper({
  interactive: function(cellView) {
    return cellView.model.isLink();
  }
});

And as per documentation

interactive - if set to false, interaction with elements and links is disabled. If it is a function, it will be called with the cell view in action and the name of the method it is evaluated in ('pointerdown', 'pointermove', ...). If the returned value of such a function is false interaction will be disabled for the action. For links, there are special properties of the interaction object that are useful to disable the default behaviour. These properties are: vertexAdd, vertexMove, vertexRemove and arrowheadMove. By setting any of these properties to false, you can disable the related default action on links.

by doing the following you can enable the vertex movement only.

interactive: function(cellView) {
  if (cellView.model.isLink()) {
    return {
      vertexAdd: false,
      vertexRemove: false,
      arrowheadMove: false,
      // vertexMove: true
    }
  }
  return false;
}

http://jsfiddle.net/kumilingus/03omcuLm/

Upvotes: 1

Related Questions