How to create a node exactly where mouse pointer is ?

[gitHoussem]

Hello,

I'm struggling to create a node where my mouse pointer is inside the vueflow viewport.

The mouse positions I get from the onPaneClick are not the same as the positions of the nodes inside the viewport.

I found that the created of reactflow answered this question here xyflow/xyflow#3112

I am wondering if vueflow has something equivalent to it ?

Thanks

[bcakmakoglu]

Check out the DnD example: https://vueflow.dev/examples/dnd.html

That should make it clear how to add a node at mouse position (using screenToFlowCoordinate)

[bcakmakoglu]

TL;DR:

const { screenToFlowCoordinate } = useVueFlow()

function onSomeEvent(event) {
	const position = screenToFlowCoordinate({
		x: event.clientX,
		y: event.clientY,
	})
}

[gitHoussem]

Thanks man ! This is exactly it

[AkariMarisa]

I have a dump question. How can I achieve the same result using @vue-flow/[email protected]? There's no screenToFlowCoordinate function in useVueFlow.