Для тех, кто хочет получить «простой» ответ на этот вопрос. Работать не так-то просто, но вы можете переопределить два указанных c метода для достижения результатов. Сначала переместите расчет конечных точек при перетаскивании, это делается в updateEdge. Затем переопределите метод dr aws линий на графике и добавьте только разные значения в позицию, если она не была перемещена (начальная отрисовка). После этого начального рисования вы вычисляете свое движение в методе updateEdge и пропускаете дополнительные значения в методе generateLine, поскольку вы уже вычислили правильные начальные / конечные точки (больше ничего не нужно делать). Мы должны сделать это в методе generateLine, поскольку вычисление начального положения ребер не выполняется авторами lib, а выполняется библиотекой с именем "dagre" (для этого ищите npm). Таким образом, мы можем изменять только начальные конечные точки рисования, пока рисуем первый раз (метод generateLine). Если у вас есть какая-либо другая возможность без переопределения всей части Layout и GraphComponent, поделитесь своим решением здесь, пожалуйста. :)
@ViewChild(GraphComponent) child: GraphComponent;
ngAfterViewInit(): void {
/* Recalculate Positions of endpoints while moving / dragging, added i as an identifier that it was moved */
// tslint:disable-next-line:only-arrow-functions
(this.child.layout as Layout).updateEdge = function(graph: Graph, edge: Edge): Graph {
const sourceNode = graph.nodes.find(n => n.id === edge.source);
const targetNode = graph.nodes.find(n => n.id === edge.target);
// centered so i do not bother if its up oder downwards bot -1
const dir = sourceNode.position.y <= targetNode.position.y ? -1 : -1;
// Compute positions while dragging here
const startingPoint = {
x: sourceNode.position.x - dir * (sourceNode.dimension.height / 2),
i: true,
y: sourceNode.position.y,
};
const endingPoint = {
x: targetNode.position.x - dir * (targetNode.dimension.height / 2),
i: true,
y: targetNode.position.y,
};
// generate new points
edge.points = [startingPoint, endingPoint ];
return graph;
};
/* Calculate Initial position of the Arrows, on first draw and add only amount of x if not modified or not dragged*/
this.child.generateLine = function(points: any): any {
const lineFunction = shape
.line<any>()
.x(d => {
let addVal = 0;
if (d.i === undefined){
addVal = 60;
}
const xval = d.x + addVal;
return xval;
})
.y(d => d.y)
.curve(this.curve);
return lineFunction(points);
};
}