Curved edges changes to line after dragging a node

[dev8934]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior curve set to shape.curveLinear from d3-shape. For the first render the edges have curveLinear shape. After drag and move a node the connected edges will be simple lines and not curveLinears.

Expected behavior Edges should keep curveLinear shape when the nodes are dragged around.

Reproduction of the problem See the demo: https://swimlane.github.io/ngx-graph/

import {Component, OnInit} from '@angular/core';

import * as shape from 'd3-shape';

@Component({ selector: 'app-xxxx', templateUrl: './xxxx.component.html', styleUrls: ['./xxxx.component.scss'] }) export class XxxxComponent implements OnInit {

constructor() { }

curve = (points) => shape.curveLinear(points); // or some other function from d3-shape // curve : any = shape.curveLinear;

nodes = [ { id: 'start', label: 'start' }, { id: '1', label: 'Query ThreatConnect', }, { id: '2', label: 'Query XForce', }, { id: '3', label: 'Format Results' }, { id: '4', label: 'Search Splunk' }, { id: '5', label: 'Block LDAP' }, { id: '6', label: 'Email Results' } ]; links = [ { source: 'start', target: '1', label: 'links to' }, { source: 'start', target: '2' }, { source: '1', target: '3', label: 'related to' }, { source: '2', target: '4' }, { source: '2', target: '6' }, { source: '3', target: '5' } ];

ngOnInit() {

}

}

<ngx-graph #graph [view]="view" [links]="links" [nodes]="nodes" [curve]="curve" [scheme]="{ name: 'vivid', selectable: true, group: 'Ordinal', domain: [ '#647c8a', '#3f51b5', '#2196f3', '#00b862', '#afdf0a', '#a7b61a', '#f3e562', '#ff9800', '#ff5722', '#ff4514' ] }" [orientation]="LR"

<ng-template #defsTemplate> <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto"> <svg:path d="M0,-5L10,0L0,5" class="arrow-head" /> </svg:marker>

<ng-template #nodeTemplate let-node> <svg:g class="node" ngx-tooltip [tooltipPlacement]="'top'" [tooltipType]="'tooltip'" [tooltipTitle]="node.label"> <svg:rect [attr.width]="node.width" [attr.height]="node.height" [attr.fill]="node.options.color" /> <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.height / 2">{{node.label}}</svg:text> </svg:g>

<ng-template #linkTemplate let-link> <svg:g class="edge"> <svg:path class="line" stroke-width="2" marker-end="url(#arrow)" > </svg:path> <svg:text class="edge-label" text-anchor="middle"> <textPath class="text-path" [attr.href]="'#' + link.id" [style.dominant-baseline]="link.dominantBaseline" startOffset="50%"> {{link.label}} </textPath> </svg:text> </svg:g>

Angular CLI: 1.7.4 Node: 7.10.1 OS: linux x64 Chromium Version 65.0.3325.181 (Official Build) Built on Ubuntu , running on Ubuntu 16.04 (64-bit)

[med-doulfakar]

Hey, Any updates about this bug ?

[isaacplmann]

This is fixed in 6.x (not released yet). You can use the existing dagre layout that exhibits this same behavior, but does a better job of keeping space between links or use the dagreNodesOnly layout that uses a simple link layout that will keep the same curve when dragging the node around. (or you can insert your own layout engine)

[assafsun]

Any information when version 6 will be release with this fix and additional content? Thanks for the help.

[alindberg]

Bump - Same question - when will v6 be released? There has been no changes in the repo for several months.

[alindberg]

Just an FYI, v6.0.0.rc3 still hast this same behavior.

[assafsun]

You will need to create a custom llne curve and maintain it the line structure your self for version 5. For version 6, I noticed that the referenced is closed

As a result, I'm closing it for now.

[luc-chevaux]

This is fixed in 6.x (not released yet). You can use the existing dagre layout that exhibits this same behavior, but does a better job of keeping space between links or use the dagreNodesOnly layout that uses a simple link layout that will keep the same curve when dragging the node around. (or you can insert your own layout engine)

Hi Isaac, I'm using 6.2.0 but I cannot achieve the desired result. When dragging nodes edge becomes line and does not move in a continuos manner around my circle. What am I missing?

Any help is really appreciated. Thanks.

[aszorenyi]

I have the same issue, even in the current version (7.0). Any help is appreciated. Thanks.

[sweeneki]

Same here using 7.0.0

[jurvi]

This is fixed in 6.x (not released yet). You can use the existing dagre layout that exhibits this same behavior, but does a better job of keeping space between links or use the dagreNodesOnly layout that uses a simple link layout that will keep the same curve when dragging the node around. (or you can insert your own layout engine)

This still 100% reproduces in 7.0.1 with dagreNodesOnly layout.

@isaacplmann @assafsun should this be reopened?

[sascha1337]

Any news? Pretty annoying behaviour...

[Davies1212]

Still experiencing this unexpected behavior here unfortunately. Or at least similar behavior Node v12.18.1, Angular CLI 8.0.0. Ngx-graph version 7.1.1.

Before I drag one of the nodes:

After I drag one of the nodes:

The curves aren't becoming straight lines, but they are being moved to a different location after I drag one. It's almost as if the graph is detecting the outside edge of the node to be in the center of the node when the graph is initialised.

[uklimaschewski]

I also would like to upvote on this. Even a workaround would be helpful.

[raman-nbg]

Can we reopen this issue please? It is clear that this bug is not fixed, yet.

[marjan-georgiev]

Reopening

[anvial]

Hi everyone

Any updates about this issue?

[pzatschl]

What I have found out is that this won't happen when you set the layout of your graph to 'dagreNodesOnly'. It seems that the curve is drawn as intended but it defaults to a straight line whenever there are too few points present.

[Saibot27]

Any news regarding this issue? Is there a working workaround instead? Regards