JointJS: tạo liên kết nhãn di chuyển qua liên kết

Question

Đối với các liên kết - trong biểu đồ JointJS - Tôi đã cố gắng triển khai hướng dẫn này (http://jointjs.com/tutorial/constraint-move-to-circle) để di chuyển nhãn trên liên kết, nhưng tôi không hiểu vị trí đặt ConstraintElementView .

1. Tôi muốn tạo nhãn của liên kết có thể di chuyển qua liên kết. Vậy làm cách nào để xác định liên kết là 'đường dẫn' cho nhãn có thể di chuyển?

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

nhãn liên

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

giấy

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. Vì nó có thể di chuyển qua liên kết, nên được chụp vào giữa mỗi đoạn của liên kết kiểu manhattan. Nhưng tôi không thấy bất kỳ cơ hội nào để có được giá trị của trung tâm của từng phân đoạn.

Answer 1

Bạn không cần tạo bất kỳ đường dẫn nào. Chỉ cần thay đổi vị trí của nhãn bằng cách tính toán giá trị tương đối của nó - tất nhiên cũng có thể sử dụng các giá trị tuyệt đối.

'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

nhãn Cho phép được di chuyển dọc theo các liên kết có thể được thực hiện thông qua labelMove lựa chọn của đối tượng interactive trên giấy:

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

Cờ này mặc định là false.