JointJS: Link-Label über den Link selbst beweglich machen

Question

Für die Links - in einem JointJS-Diagramm - habe ich versucht, dieses Tutorial (http://jointjs.com/tutorial/constraint-move-to-circle) zu implementieren, um die Etiketten auf den Link zu verschieben, aber ich verstehe nicht, wo die ConstraintElementView setzen .

1. Ich möchte das Etikett eines Links über den Link beweglich machen. Wie kann ich den Link als "Pfad" für das bewegliche Etikett definieren?

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-Kennung

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

Papier

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. Da es über den Link verschoben werden kann, sollte es in der Mitte jedes Segments der Manhattan-Style-Verknüpfung einrasten. Aber ich sehe keine Chance, den Wert der Mitte jedes Segments zu erhalten.

Answer 1

Sie müssen keinen Pfad erstellen. Ändern Sie einfach die Position der Beschriftung, indem Sie ihren relativen Wert berechnen - natürlich können Sie auch absolute Werte verwenden.

'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

Aktivieren Etiketten beweglich ist entlang Links können über die labelMove Option des interactive Objekt auf dem Papier erfolgen:

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

Dieses Flag standardmäßig false.