JOINTJS: Самостоятельная ссылка на фигуру по ссылке

Question

Я хотел бы самостоятельно ссылаться на фигуру в ссылке. В основном источник и цель ссылки одинаковы.

Это работает, но ссылка скрыта по форме: https://imageshack.com/i/f2mu7jp

Вот что я хотел бы сделать: https://imageshack.com/i/mujp9lp

Я знаю, что я могу использовать «вершину» в определении ссылку, но я не знаю, положение XY в начальной и конечной точки

var connect = function(source, sourcePort, target, targetPort) { 
    var link = new joint.shapes.devs.Link({ 
     source: { id: source.id, selector: source.getPortSelector(sourcePort) }, 
     target: { id: target.id, selector: target.getPortSelector(targetPort) } 
    }); 
    if(source == target){ 
     console.log(link); 
     console.log(source); 
    } 

    graph.addCell(link); 
}; 

Как я могу получить положение начальной и конечной точки?

Спасибо

Answer 1

Это не в официальном API, но есть getConnectionPoint() метод на представлениях ссылок. Зная точки подключения, вы можете вычислить 2 вершины, необходимые для самосвязи:

... после graph.addCell (link) ... - на этом этапе в документе создается вид ссылки. .

var linkView = paper.findViewByModel(link); 
var sourcePoint = linkView.getConnectionPoint(
    'source', 
    link.get('source'), 
    _.first(link.get('vertices')) || link.get('target')); 
var targetPoint = linkView.getConnectionPoint(
    'target', 
    link.get('target'), 
    _.last(link.get('vertices')) || sourcePoint); 

... Теперь вы можете вычислить 2 другие вершины (для ортогональной самостоятельной ссылке) и сделать:

link.set('vertices', myTwoVertexArray); 

сигнатура метода getConnectionPoint() является:

getConnectionPoint(end, sourceOrTargetOrPoint, referenceSourceOrTargetOrPoint); 

Где end либо 'source' или 'target', sourceOrTargetOrPoint либо link.get('source') или link.get('target') и referenceSourceOrTargetOrPoint является точкой отсчета необходимо вычислить «липкий» точку (обычно на другой стороне линии или ближайшей вершины).