Adjust graph edges and nodes by changing one node height or width dynamically about xyflow

[moklick]

You could use onNodesChange for this. Whenever nodes change their dimensions, a change of type "dimensions" gets fired:

const onNodesChange = useCallback((changes) => {
  setNodes((nds) => {
    const nextNodes = applyNodeChanges(changes, nds);
    
    if (changes.some((change) => change.type === 'dimension')) {
      // layout nodes
    }

    return nextNodes;
  });
}, []);

[LiorLivyatan]

Thank you for the super fast answer!

Unfortunately the div inside the node is being changed, but I do not get any changes (except for selected change).
I also do not understand how to trigger the layout change.

Thanks again!

[moklick]

You don't have to do anything. React Flow adds a resize observer to every node and should send the changes automatically. It's fine to resize an inner div, but it's important that the outer node doesn't have a fixed width or height and also changes it's size based on the content.

Are you using v11 or v12? Could you send a codesandbox or repo we could check out?

[LiorLivyatan]

Thank you, I think I understand what is happening.

I am using dagre to position the nodes and edges, and this indeed has a fixed height and width as per the example from the docs:

const dagreGraph = new dagre.graphlib.Graph()
dagreGraph.setDefaultEdgeLabel(() => ({}))

const nodeWidth = 250
const nodeHeight = 60

const getLayoutedElements = (nodes: any, edges: any, direction = 'TB') => {
  dagreGraph.setGraph({ rankdir: direction })

  nodes.forEach((node: any) => {
    dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight })
  })

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

  dagre.layout(dagreGraph)

  nodes.forEach((node: any) => {
    const nodeWithPosition = dagreGraph.node(node.id)
    node.targetPosition = 'top'
    node.sourcePosition = 'bottom'

    node.position = {
      x: nodeWithPosition.x - nodeWidth / 2,
      y: nodeWithPosition.y - nodeHeight / 2,
    }

    return node
  })

  return { nodes, edges }
}

Is it possible to let dagre "decide" about the height and width of the nodes instead of hardcoding them?

Thanks! :)