JointJS: сделать ссылку ярлыка подвижной по самой ссылке

Question

Для ссылок - в схеме JointJS - я попытался реализовать этот учебник (http://jointjs.com/tutorial/constraint-move-to-circle), чтобы переместить ярлыки по ссылке, но я не понимаю, куда положить ConstraintElementView ,

1. Я хотел бы сделать метку ссылки подвижной по ссылке. Итак, как я могу определить ссылку как «путь» для подвижной метки?

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]); 
    } 
}); 

ссылка этикетки

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' } 
       } 
      }); 
     } 
    } 
}); 

бумага

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. Поскольку он перемещается по ссылке, он должен быть привязан к центру каждого сегмента манхэттенского стиля. Но я не вижу никакого шанса получить значение центра каждого сегмента.

Answer 1

Вам не нужно создавать какой-либо путь. Просто измените положение метки, вычислив ее относительное значение - конечно, также можно использовать абсолютные значения.

'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 }); 

    } 
} 

Answer 2

Стимулирующие этикетки с возможностью перемещения вдоль ссылки может быть сделано с помощью labelMove выбору interactive объекта на бумаге:

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

Этот флаг по умолчанию false.