kieler / elkjs

ELK's layout algorithms for JavaScript

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Question: How to force centering of the graph?

V3RON opened this issue · comments

Hi, thanks for your work on this great library!

I'm working on a graph editor and stumbled upon a problem. There is a business requirement saying that a graph must always be centred. I'm trying to somehow impose this restriction on the Elk, but without success so far.

This is what I want to achieve. The graph is centred and if there are multiple edges coming out from a node they are symmetric. Nodes can have between 1-3 outputs. Edges coming from them are always visible and connected to placeholder/virtual nodes. If a user drags a node from a toolbar over a placeholder, it becomes a drop indicator.

Zrzut ekranu 2023-05-31 o 10 48 07

However, it falls apart in more complex scenarios like this:
Zrzut ekranu 2023-05-31 o 10 48 50

The graph is no longer centred, it's visually shifted to the right. Also, if you look at the edges on the left side of the graph, you will see they aren't symmetric anymore.

This is my configuration:

export const elkConfig = {
  'elk.nodeLabels.placement': 'INSIDE V_CENTER H_RIGHT',
  'elk.algorithm': 'org.eclipse.elk.layered',
  'elk.direction': 'DOWN',
  'org.eclipse.elk.layered.layering.strategy': 'INTERACTIVE',
  'org.eclipse.elk.edgeRouting': 'ORTHOGONAL',
  'elk.layered.unnecessaryBendpoints': 'true',
  'elk.layered.spacing.edgeNodeBetweenLayers': '30',
  'org.eclipse.elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
  'org.eclipse.elk.layered.nodePlacement.bk.edgeStraightening': 'IMPROVE_STRAIGHTNESS',
  'org.eclipse.elk.layered.cycleBreaking.strategy': 'DEPTH_FIRST',
  'org.eclipse.elk.insideSelfLoops.activate': 'true',
  separateConnectedComponents: 'false',
  'spacing.componentComponent': '70',
  spacing: '75',
  'spacing.nodeNodeBetweenLayers': '70',
  'org.eclipse.elk.layered.nodePlacement.favorStraightEdges': 'true',
  'org.eclipse.elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES',
  'org.eclipse.elk.layered.considerModelOrder.crossingCounterNodeInfluence': '0.001',
  'nodePlacement.strategy': 'BRANDES_KOEPF',
  'org.eclipse.elk.spacing.edgeLabel': '0',
  'org.eclipse.elk.spacing.edgeNode': '24',
  'org.eclipse.elk.layered.edgeLabels.sideSelection': 'ALWAYS_UP',
  'org.eclipse.elk.spacing.portPort': '10',
};

I would love to provide a reproduction using Elk-live editor, but the page it's hosted on is not responding.

Please let me know if you need to know more in order to help me. I will provide the required details as soon as possible.
Thanks for your help!

Elk-live is online again. By just quickly looking at your layout options, I would try removing 'org.eclipse.elk.layered.nodePlacement.bk.edgeStraightening': 'IMPROVE_STRAIGHTNESS',.

ELK Layered cannot do this, but MrTree seems to be able to create such drawings as seen here.

Yup, it seems to always produce a balanced tree. However, there is one drawback involved. MrTree doesn't support orthogonal edge routing, does it?

Correct, MrTree does not support different edge routing styles and generally supports fewer features. Since it seems fairly trivial, we could also try adding a balanced node placement algorithm for ELK Layered.
This would of course take some time and would be available in the next 0.9.0 release.
Moreover, I am unsure, whether such a balanced node placement works for general graphs.

In the meantime, you could also use MrTree and calculate the edge routes yourself since they seem to be rather trivial.

I'm aware it's not trivial to implement such a feature in a short time. I'll have to dig deeper into this and, as you said, try to implement edge routing by myself.

Thanks for your time and help!