CODEWITHSUNDEEP
javascriptjointjs
user3749851
user3749851

Reputation: 61

How to create links programmatically in JointJs to ports

I am trying to create links programmatically in JointJs to devs.Model objects that have ports.

I've tried to use the addCell for graph from the api (http://jointjs.com/api#joint.dia.Graph:addCell), but for some reason the links created are not pointing to the correct port circles on the source and target devs.Model objects, but rather the entire element themselves.

Here is the code I'm attempting to use:

var link = new joint.dia.Link({
      source: {
        id: srcModel.id,
        port: 'out'
      },
      target: {
        id: dstModel.id,
        port: 'in'
      }
    });
// Assume graph has the srcModel and dstModel with in and out ports.
graph.addCell(link)

The links are created, but not pointing to any ports, so I feel like there is just one little tweak I need to get these links to work.

Upvotes: 6

Views: 4406

Answers (2)

Aung Myat Hein
Aung Myat Hein

Reputation: 4188

Add connector and router. Example:

var link = new joint.shapes.devs.Link({
   source: {
     id: srcModel.id,
     port: 'out'
   },
   target: {
     id: dstModel.id,
     port: 'in'
   },
  connector: { name: 'rounded' },
  router: { name: 'metro' }
});
graph.addCell(link);

Upvotes: 1

Shadow
Shadow

Reputation: 61

Just Change joint.dia.Link for joint.shapes.devs.Link : 

  var link = new joint.shapes.devs.Link({
     source: {
       id: srcModel.id,
       port: 'out'
     },
     target: {
       id: dstModel.id,
       port: 'in'
     }
   });
  // Assume graph has the srcModel and dstModel with in and out ports.
  graph.addCell(link)

Upvotes: 3

Related Questions