CODEWITHSUNDEEP
jointjs
digout
digout

Reputation: 4252

JointJS: How can you create a oneSide link with 2 different sides

I am trying to create a link that links from one shape with a fixed side to another with a different fixed side. Is this possible?

link.router('oneSide', {
    side: 'top',
    padding: 30
});

https://resources.jointjs.com/docs/jointjs/v3.1/joint.html#routers.oneSide

Upvotes: 0

Views: 427

Answers (1)

Keyvan Khademi
Keyvan Khademi

Reputation: 116

I'm not sure 'oneSide' should even be in the routers because in the documentation the router only defines the middle points of the path not the start and end.

In either case, the router function must return an array of route points that the link should go through (not including the start/end connection points). The function is expected to have the form function(vertices, args, linkView)

I found out that in defining the links you can specify the anchor which is basically the start and end point. For the shapes there some built-in anchors. We have to use 'left' and 'right' for this case.

Here is my code. It's in TypeScript but I'm sure you can convert it to JS easily if you need to.

makeLink(parentElementLabel, childElementLabel) {
return new joint.shapes.standard.Link({
  source: {
    id: parentElementLabel,
    anchor: {
      name: 'right'
    }
  },
  target: {
    id: childElementLabel,
    anchor: {
      name: 'left'
    }
  },
  router: {
    name: 'normal'
  },
  attrs: {
    line: {
      stroke: 'black',
      cursor: 'default',
    },
    wrapper: {
      cursor: 'default'
    }
  },
  // smooth: true,
});
}

Upvotes: 1

Related Questions