CODEWITHSUNDEEP
jointjs
Kaluva Sireesha
Kaluva Sireesha

Reputation: 43

Not able to create a link between output port of first node and input port of second node in JointJs

I am not able to create a link between two nodes with ports using JointJS. I wanted to avoid dangling links, so included linkPinning: false property. With the below given code, I am not able to create a link between out1 port and in1 port.

Here is the code I tried:

var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 600,
  height: 400,
  gridSize: 1,
  model: graph,
  defaultLink: new joint.dia.Link({
        attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' } }
    }),
  validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView)       {
        // Prevent linking from output ports to input ports within one element.
        if (cellViewS === cellViewT) return false;
    },
    linkPinning: false,
    // Enable link snapping within 75px lookup radius
    snapLinks: { radius: 75 }
});
var a1 = new joint.shapes.devs.Model({
  id: 'master1',
  position: {
    x: 150,
    y: 150
  },
  inPorts: ['in1'],
  outPorts: ['out'],
  size: {
    width: 100,
    height: 60
  },
  prop: {
    data: {
      'name1': 'val1',
      'name 2': 'val 2'
    }

  },
  attrs: {

    '.label': {
      'ref-x': .4,
      'ref-y': .2
    },
    rect: {
      fill: '#2ECC71'
    },
    '.inPorts circle': {
      type: 'input',
    },
     '.outPorts circle': {
      type: 'output'
    },
  }
});

var a2 = new joint.shapes.devs.Model({
  id: 'master2',
  position: {
    x: 50,
    y: 50
  },
  outPorts: ['out1'],
  size: {
    width: 100,
    height: 60
  },
  prop: {
    data: {
      'name1': 'val1',
      'name 2': 'val 2'
    }

  },
  attrs: {

    '.label': {
      'ref-x': .4,
      'ref-y': .2
    },
    rect: {
      fill: '#2ECC71'
    },
    '.outPorts circle': {
      type: 'output'
    },

  }
});

paper.model.addCells([a1, a2]);

As it didn't work, I tried using pointer up event to avoid dangling links in blank space instead of linkPinning property.

paper.on('cell:pointerup', function (cellView, evt) {
    var elem = cellView.model
    var source = elem.get('source')
    var target = elem.get('target')
    if (elem instanceof joint.dia.Link && (!source.id || !target.id)) {
        elem.remove()
    }
})

For more detail, please refer the fiddle link given below. https://jsfiddle.net/g82y3Lu9/

Upvotes: 0

Views: 92

Answers (1)

Sajith Edirisinghe
Sajith Edirisinghe

Reputation: 1727

The problem is within the return statement of the validateConnection function. Instead of if (cellViewS === cellViewT) return false;, change it to return (cellViewS === cellViewT) ? false : true; so that the function will always return a boolean.

Here is the modified fiddle

Upvotes: 1

Related Questions