JointJS: make link label movable over the link itself

Question

For the links - in a JointJS diagram - I tried to implement this tutorial (http://jointjs.com/tutorial/constraint-move-to-circle) to move the labels on the link, but I don't understand where to put the ConstraintElementView.

1. I would like to make the label of a link moveable over the link. So how can I define the link as the 'path' for the moveable label?

ConstraintElementView

var constraint = label; // ???

var ConstraintElementView = joint.dia.ElementView.extend({

    pointerdown: function(evt, x, y) {
        var position = this.model.get('position');
        var size = this.model.get('size');
        var center = g.rect(position.x, position.y, size.width, size.height).center();
        var intersection = constraint.intersectionWithLineFromCenterToPoint(center);
        joint.dia.ElementView.prototype.pointerdown.apply(this, [evt, intersection.x, intersection.y]);
    },
    pointermove: function(evt, x, y) {
        var intersection = constraint.intersectionWithLineFromCenterToPoint(g.point(x, y));
        joint.dia.ElementView.prototype.pointermove.apply(this, [evt, intersection.x, intersection.y]);
    }
});

link label

paper.on({
    /**
    *   Doubleclick on link: Add label for link
    */
    'cell:pointerdblclick': function(cellView, event, x, y){            
        if (cellView.model.isLink()) {
            cellView.model.label(0, {
                position: .5,
                attrs: {
                    rect: { fill: '#eeeeee' },
                    text: { text: 'text', 'font-size': 12, ref: 'rect' }
                }
            });
        }
    }
});

paper

var paper = new joint.dia.Paper({
    el: $('#canvas'),
    width: 801,
    height: 496,
    model: graph,
    gridSize: 10,
    elementView: ConstraintElementView,
    defaultLink: new joint.dia.Link({
        router: { name: 'manhattan' },
        connector: { name: 'rounded' },
        attrs: {
            '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z', fill: '#6a6c8a', stroke: '#6a6c8a' },
            '.connection': { stroke: '#6a6c8a', 'stroke-width': 2 }
        }
    })
});

2. As it is moveable over the link, it should be snap to the center of each segment of the manhattan-style link. But I don't see any chance to get the value of the center of each segment.

Nalda

Answer 1

You do not need to create any path. Just change the position of label by calculating its relative value - of course can also use absolute values.

'cell:pointermove': function(event, x, y) {
    if (event.model.isLink()) {
            var clickPoint  = { x: event._dx, y: event._dy },
                lengthTotal = event.sourcePoint.manhattanDistance(event.targetPoint),
                length      = event.sourcePoint.manhattanDistance(clickPoint),
                position    = round(length / lengthTotal, 2);

            event.model.label(0, { position: position });

    }
}

Affairs

But this calculate the direct distance. I need the manhattan line. – Nalda

Is it possible to get the size of each segment of a manhattan distance? – Nalda

Just two notes: 1. in IE11 round is not defined and Math.round is not a suitible substitution. However removing round altogether works just as well. 2. I had to use this code with paper.on(), which is not clear in the answer. Hope that helps someone else. – Walt

Answer 2

Enabling labels to be movable along links can be done via the labelMove option of the interactive object on the paper:

var paper = new joint.dia.Paper({ // ... interactive: { labelMove: true } // ... })

This flag defaults to false.

Schoolboy

Oh, I didn't see that in the docs. But I want to snap the label to the center of a segment. Don't know if it is possible to get the size of each segment. So for that I think I have to use something similar to the solution given by 'user3848987'. – Nalda

By the way: The arrow and remove icon are disturbing the moving of labels. Is it possible to show these by click and not by hovering the link? – Nalda

interactive: function(cellView) { return { labelMove: true, vertexAdd: false } } doesn't have an effect: The vertex won't be added, but the label still isn't moveable... – Nalda

I have the same interactive options (though I've set it as an object rather than a function) and it works but you have to grab the edge of the label, not the text inside. – Hogg