JointJS: bağlantı etiketini kendisinin üzerinde hareket ettirilebilir hale getirin

Question

Bağlantılar için - bir JointJS şemasında - bu öğreticiyi (http://jointjs.com/tutorial/constraint-move-to-circle) bağlantıya taşımak için kullanmaya çalıştım, ancak ConstraintElementView'u nereye koyacağımı anlamıyorum .

1. Bağlantı üzerinden hareketli bir bağlantının etiketini yapmak istiyorum. Bağlantıyı hareketli etiket için 'yol' olarak nasıl tanımlayabilirim?

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

bağlantı etiketi

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

kağıt

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. Bağlantı üzerinden hareket ettirilebildiği için, manhattan tarzı bağlantının her bölümünün ortasına takılmalıdır. Ancak, her segmentin merkezinin değerini elde etme şansım yok.

Answer 1

Herhangi bir yol oluşturmanız gerekmez. Sadece göreceli değerini hesaplayarak etiketin konumunu değiştirin - elbette mutlak değerler de kullanabilir. bağlantılar kağıda interactive nesnenin labelMove seçeneği ile yapılabilir boyunca

'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

etkinleştirme etiket hareket edebilir şekilde: false için

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

Bu bayrak varsayılan.