JointJS: сделать метку метки подвижной по самой ссылке
Для ссылок - на диаграмме JointJS - я попытался реализовать этот учебник (http://jointjs.com/tutorial/constraint-move-to-circle), чтобы переместить ярлыки по ссылке, но я не понять, куда положить ConstraintElementView
.
- Я хотел бы сделать метку ссылки подвижной по ссылке. Итак, как я могу определить ссылку как "путь" для подвижной метки?
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 }
}
})
});
- Поскольку он перемещается по ссылке, он должен быть привязан к центру каждого сегмента манхэттен-стиля. Но я не вижу никакого шанса получить значение центра каждого сегмента.
Ответы
Ответ 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 });
}
}
Ответ 2
Включение меток, которые можно перемещать по ссылкам, можно выполнить с помощью опции labelMove
объекта interactive
на бумаге:
var paper = new joint.dia.Paper({
// ...
interactive: { labelMove: true }
// ...
})
Этот флаг по умолчанию равен false
.