JointJS drawing multiple custom connectors to an element

Question

I'm using my own custom connector implementation and i want to be able to consider other connectors to the same elements in order to calculate the source and target points better.

joint.connectors.custom = function (sourcePoint, targetPoint, vertices) {

    // I want to calculate the "middle" point while considering other links that might interrupt
    var sourceMiddleX = this.sourceBBox.x + this.sourceBBox.width / 2;

    var d = ['M', sourcePoint.x, sourcePoint.y, targetPoint.x, targetPoint.y];

    return d.join(' ');
};

So far i couldn't find anything helpful under the function context nor under the VElement..

Unless anyone has a better idea, i'll pass the total links per element in each model which doesn't feels right.

Thanks in advance!

Answer 1

Connector functions in JointJS are called with a value of this equal to a joint.dia.LinkView instance. Each linkView has access to the paper it's rendered in.

var paper = this.paper; // an instance of `joint.dia.Paper`
var graph = this.paper.model; // an instance of `joint.dia.Graph`
var link = this.model; // an instance of `joint.dia.Link`

// an instance of `joint.dia.Element` or `null`
var sourceElement = link.getSourceElement();
var sourceElementLinks = sourceElement
    // an array of `joint.dia.Link` including the link
    // these are connecting the same source element as the link
    ? graph.getConnectedLinks(sourceElement, { outbound: true })
    // the link is not connected to a source element
    : [];

// an instance of `joint.dia.Element` or `null`
var targetElement = link.getTargetElement();
var targetElementLinks = targetElement
    // an array of `joint.dia.Link` including the link
    // these are connecting the same target element as the link
    ? graph.getConnectedLinks(targetElement, { inbound: true })
     // the link is not connected to a target element
    : [];

You can also check the jumpOver connector, that implements a similar logic.