JointJS: rendere mobile l'etichetta di collegamento sul collegamento stesso

Question

Per i collegamenti - in un diagramma JointJS - Ho provato a implementare questo tutorial (http://jointjs.com/tutorial/constraint-move-to-circle) per spostare le etichette sul collegamento, ma non capisco dove mettere il ConstraintElementView .

1. Vorrei rendere l'etichetta di un collegamento mobile sul collegamento. Quindi, come posso definire il collegamento come "percorso" per l'etichetta mobile?

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

etichetta collegamento

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

carta

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. Poiché è mobile sul collegamento, dovrebbe essere allineato al centro di ogni segmento del collegamento in stile manhattan. Ma non vedo alcuna possibilità di ottenere il valore del centro di ogni segmento.

Answer 1

Non è necessario creare alcun percorso. Basta cambiare la posizione dell'etichetta calcolando il suo valore relativo - ovviamente può anche usare valori assoluti.

'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

Abilitazione etichette siano mobile lungo pubblicitari possono essere effettuate tramite l'opzione labelMove dell'oggetto interactive sulla carta:

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

Questo flag default false.