Is there a way to pan and set focus to a node by their id?

[sagunji]

I have a dynamic canvas which is updated with new nodes by user actions. I have positioned my nodes with auto-layout with dagre.
When a new node is added, I want the canvas to focus on that node i.e set it as center.
I tried using fitView({ nodes: [...] }) and looking at the implementation, its enough to pass arrays of node ids.

const JourneysCanvas = ({
  nodes,
  edges,
  children,
  focusNodeId,
  onNodesChange,
  onNodesPositionChanged,
}: JourneysCanvasProps) => {
  const { getNodes, fitView } = useReactFlow();
  const dragged = useRef(false);
  
  useEffect(() => {
    if (focusNodeId) {
      fitView({ nodes: [{ id: focusNodeId }]});
    }
  }, [fitView, focusNodeId])
....
  return (
<ReactFlow
        proOptions={PRO_OPTIONS}
        onNodesChange={onNodesChange}
        nodes={nodes}
        edges={edges}
        nodeTypes={NODE_TYPES}
        edgeTypes={EDGE_TYPES}
        onNodeDrag={handleNodeDrag}
        onNodeDragStop={handleNodeDragStop}
        onlyRenderVisibleElements
        fitView
        multiSelectionKeyCode={null}
      >
....
  )
}

b7012c09-a412-4106-b0ed-966fc7547230.1.webm

But it doesn't seem to work.
Initially, I passed the whole node object as focusNode as props but useEffect is called when any property of the node changes.

Any suggestion or help?

[hayleigh-dot-dev]

What happens if you wrap the fitView call in an animation frame request like:

  useEffect(() => {
    if (focusNodeId) {
      window.requestAnimationFrame(() => {
        fitView({ nodes: [{ id: focusNodeId }]});
      })
    }
  }, [fitView, focusNodeId])

[bcakmakoglu]

You're calling fitView to early from what I can tell in your code.

I assume you are rendering the graph, passing a "focus node id" to it and trying to call fitView.

What is most likely happening is, you call fitView before the viewport helpers are actually ready and thus it will just run a noop function, doing nothing.

Either run your fitView call in onInit={() => { ... }} or check if the nodes have been initialised const nodesInitialized = useNodesInitialized(options) before calling fitView.

[bcakmakoglu]

Here's a basic example using a button to focus specific nodes.

[sagunji]

I believe so, fitView is being called before the canvas is fully ready. Thank you for sharing the example, though the action is event driven where the instance is fully initialized. I have updated the example to show that if nodes are dynamically added, it doesn't seem to pan towards the node. Explicitly setting a timeout is a hack that I could think of.

I tried to work with useNodesInitialized but same result.
Similarly, about checking whether nodes are initialized, does useNodesInitialized work similar to

const nodesInitializedSelector = (state: ReactFlowState) =>
   [...state.nodeInternals.values()].every((node: Node) => node.width && node.height);

If that is so, nodes are updated with a width and height prior to being passed on reactflow as I am apply auto-layout from parent component.

[bcakmakoglu]

I see.
There is a way of doing this, it might seem a bit un-intuitive and there's probably different ways of going about this (for example by checking if a specific node is initialized yet and then triggering fitView) but imo this is the "easiest" way of doing this.

In your onNodesChange handler you can check for changes of type dimensions.
When a node is initialized this change will be fired with the actual dimensions of the node, which should be anything but 0,0.

So you can basically listen for that event and call fit view when it happens.

onNodesChange={(changes) => {
	// call the actual change handler to apply the node changes to your nodes
  onNodesChange(changes);

	// loop through the changes and check for a dimensions change that relates to the node we want to focus
  changes.forEach((change) => {
    if (
      change.type === "dimensions" &&
      focusId === change.id &&
      change.dimensions &&
      change.dimensions.height > 0 &&
      change.dimensions.width > 0
    ) {
      fitView({
        nodes: [{ id: focusId }],
        duration: 500
      });

		// reset the focus id so we don't retrigger fit view when the dimensions of this node happen to change
      setFocusId(null);
    }
  });
}}

A working example can be found here.

[sagunji]

This worked perfectly. I see the reasoning behind it. It seems to be a forceful but right now it behaves as expected. Thank you!

[amitguptagwl]

I've achieved this by creating a tag under SvelteFlowProvider. Now I can use useSvelteFlow and change view by calling fitView method. You can see demo at Text2Chart. And code here