Skip to content

dagre placing wrong position when node has parentId #479

@mabis-dev

Description

@mabis-dev

I'm using xyflow/react and some nodes has parentId property.

dagre keeps wrong placing nodes when has parentId.

How can i solve this problem

Here is no parentId on left and right node
Image

And here is with parentId on left and right node

Image

HEre is my code


 const getLayoutedElements = (nodes, edges) => {

    const dagreGraph = new dagre.graphlib.Graph();
    dagreGraph.setGraph({ rankdir: direction });
    dagreGraph.setDefaultEdgeLabel(() => ({}));

    nodes.forEach((node) => {
      dagreGraph.setNode(node.id, { width: node.width || defaultNodeWidth, height: node.height || defaultNodeHeight });

    });

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

    dagre.layout(dagreGraph);

    let layoutedNodes = nodes.map((node) => {
      const nodeWithPosition = dagreGraph.node(node.id);

      return {
        ...node, // diğer node bilgileri korunur
        targetPosition: direction === workflowDirectionTypes.LR ? 'left' : 'top',
        sourcePosition: direction === workflowDirectionTypes.TB ? 'right' : 'bottom',
        position: {
          x: nodeWithPosition.x - (node.width || defaultNodeWidth) / 2,
          y: nodeWithPosition.y - (node.height || defaultNodeHeight) / 2
        },
        width: node.width || defaultNodeWidth,
        height: node.height || defaultNodeHeight
      };
    });


    return { nodes: layoutedNodes, edges };
  };

how can i solve this problem. I need parentId when deleting hirearchial with xyflow/react? Expected behaviour is as first image even has parentId

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