Skip to content

Support for fixed edge direction and stable edge positions when node height changes #482

@roger067

Description

@roger067
Image

Hi there! I'm currently using Dagre to lay out a graph with conditional logic nodes and I've run into a couple of issues that I'd like to clarify or possibly suggest as feature improvements:

  1. Fixed edge direction based on edge type
    In my graph, I have nodes with conditional logic (e.g., decision nodes).

I'd like to always position the condition_yes edge to the right of the source node and the condition_no edge to the left.

I understand that Dagre automatically computes the layout, but is there a recommended way (or future plan) to support custom edge positioning based on edge data?

  1. Edge stability when node height changes
    I'm dynamically calculating the height of some nodes based on their content (e.g., varying amounts of text).
    When this happens, the edges connected to these nodes sometimes shift their attachment points, which visually breaks the expected flow.

Here is my following code:

export const getLayoutedElements = (nodes, edges) => {
  dagreGraph.setGraph({ rankdir: 'TB', nodesep: 330, ranksep: 165 });

  nodes.forEach(node => {
    dagreGraph.setNode(node.id, { width: node.measured?.width || 300, height: node.measured?.height || 200 });
  });

  edges.forEach(edge => {
    dagreGraph.setEdge(edge.source, edge.target);
  });

  dagre.layout(dagreGraph);

  const newNodes = nodes.map(node => {
    const nodeWidth = node.measured?.width || 300;
    const nodeWithPosition = dagreGraph.node(node.id);
    const newNode = {
      ...node,
      targetPosition: 'top',
      sourcePosition: 'bottom',
      position: {
        x: nodeWithPosition.x - nodeWidth / 2,
        y: nodeWithPosition.y - node.measured?.height / 2
      }
    };

    return newNode;
  });

  return { nodes: newNodes, edges };
};

I understand that if i changed y: nodeWithPosition.y - node.measured?.height / 2 to y: nodeWithPosition.y, my nodes at the same rank will always be at the same y position, but nodes with large heights will overlap next nodes.

Is there a way to preserve the edge anchor points or direction even if the node height changes after layout calculation?

Let me know if this is already supported or if it would make sense to explore as a potential enhancement.

Thanks in advance!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions