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

それがリンクを介して移動可能であるように、それはマンハッタンスタイルのリンクの各セグメントの中心にスナップしなければなりません。しかし、私は各セグメントの中心の価値を得る機会はありません。

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

は紙上interactiveオブジェクトのlabelMoveオプションを介して行うことができる。

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

このフラグのデフォルト値はfalseします。