got a problem with ngx-graph. Is it possible to point the beginning and the end of the connecting path to the center of a node? My svg nodes are bigger than the sub-element e.g:
I tried to implement a custom curve, implement a custom layout and tried to override the child (GraphComponent) method "generateLine()". Nothing leads to success, everytime i got artefacts and new problems. Do you have a simple solution for this problem?
For anyone, who wants a "simple" answer to this question. It is not that easy to get things working, but you can override the two specific methods to achieve the results. First override the calculation of the endpoints while dragging, this is done in updateEdge. Next, override the method that draws the lines within the graph and add only different values to position if it was not moved (initial draw). After that initial draw you calculate your movement in updateEdge method und you skip the extra values in the generateLine-method because you already have computed the right start/endpoints (nothing to do anymore). We have to do this in the generateLine method because the initial position calculation of the edges is not done by the lib-authors, it is done by the library called "dagre" (search npm for this). So, we can only modify the initial draw endpoints, while drawing the first time (generateLine-method). If you have any other possiblity without reimplementing the whole Layout and GraphComponent part, share your solution here please. :)
@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);
};
}