संयुक्तजेएस: लिंक पर अपने आप को लिंक लेबल चलाना

Question

लिंक के लिए - एक संयुक्त जेएस आरेख में - मैंने लिंक पर लेबल को स्थानांतरित करने के लिए इस ट्यूटोरियल (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

को सक्षम करने से लेबल चल होने की स्थित लिंक का कागज पर interactive वस्तु की labelMove विकल्प के माध्यम से किया जा सकता है:

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

इस ध्वज false करने के लिए डिफ़ॉल्ट।