kieler / elkjs

ELK's layout algorithms for JavaScript
Other
1.76k stars 97 forks source link

Question: Long edge is not going around nodes #263

Closed kandji-lilie closed 7 months ago

kandji-lilie commented 7 months ago

(Cross-posting from Elk #1002). I have a graph that is using React Flow for display and Elk for layouting.

image

I would like for the graph to look like this, where:

  1. The bottom long edge (A --> E) does not go behind nodes and instead goes around them
  2. Nodes are left-aligned instead of right-aligned in a layer (a nice-to-have)

Note: nodes have been manually moved to achieve desired layout in screenshot below.

image

I am attempting to use DUMMY_NODE_UNDER, but it does not seem to have any affect on this graph.

const layoutOptions = {
  "elk.algorithm": "layered",
  "elk.direction": "RIGHT",
  "elk.spacing.nodeNode": "40",
  "elk.layered.nodePlacement.strategy": "SIMPLE",
  "elk.layered.spacing.edgeNodeBetweenLayers": "50",
  "elk.spacing.edgeNode": "75",

  // Does not seem to have any affect on graph
  "considerModelOrder.strategy": "NODES_AND_EDGES",
  "considerModelOrder.longEdgeStrategy": "DUMMY_NODE_UNDER",
};

Here is a sandbox with the implementation.

Any help or guidance is appreciated!

kandji-lilie commented 7 months ago

Closing as I realized my example was not actually taking the Elk edge routing into account and was continuing to use the default React Flow edges.