MoveTo node

[skadefro]

I feel stupid, but i cannot for the life of me figure out how to move the viewport to a specific node ?
If i have an instance declared with

const instance = useVueFlow({})

and i get a node with

const node = instance.findNode(id)

How do i move the viewport so the node is in the center of the view ?

Example: I zoom in on a node, and i can see
instance.viewport.value.x is 536
instance.viewport.value.y is198
but the node's x is -240 and y is 60
so if i use

instance.setViewport({ x: node.position.x, y: node.position.y, zoom: 1 });

I land somewhere completely different.

I tried to see if adding/removing instance.dimensions / instance.vueFlowRef.value.getBoundingClientRect and others in, but i simply cannot "get" the logic, on how to map back and forth from x,y on a node to what setViewport want's

[bcakmakoglu]

The simplest way to do this is to use fitView

const { fitView } = useVueFlow();

function zoomToNode(nodeId: string) {
	fitView({
		nodes: [nodeId],
		duration: 1000, // use this if you want a smooth transition to the node
		padding: 1 // use this for some padding around the node
	})
}

[skadefro]

that looks awesome ...
Thank you :-)

[0xAnon0602]

@skadefro
This doesn't work for me
It tries to focus only on specific nodes and not on all the nodes I've provided

[bcakmakoglu]

Can you provide some code / a repro for the issue?
Are you sure you're not limiting fit-view by some max. zoom that is present (either the default or a value you have set yourself)?