Projected position is wrong

Describe the Bug

After making use of react-dnd and adding simple drag and drop support, i found that the projected position I am getting is completely off. What makes it even more irregular is that it doesnt always happen. So when not moving the camera/view at all, sometimes it would project correctly sometimes not. But as soon as you move around and the transform changes form [0,0,1], the projected position starts to jump around.

I’ve included a sandbox, just open it up and try dropping. If it doesnt happen, try refreshing once or twice and try again. Its very irregular and doesnt always happen.

Your Example Website or App

https://codesandbox.io/s/sandpack-project-forked-2pwdnu?file=/App.js

Steps to Reproduce the Bug or Issue

1. Open sandbox
2. Try dropping once
3. If it doesnt project wrong, refresh
4. Try again
5. Repeat from steps 2-4 with diferent usecases, such as first panning or zooming then dropping.

Expected behavior

It should calculate the correct position

Screenshots or Videos

https://user-images.githubusercontent.com/45233935/184307094-06069039-1a75-4b60-ab43-cb83bf5509ff.mov

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[Wiz1991]

The issue here is that reactflow.project gets updated after the first render but not the reactflow object itself.

Easiest way to fix this:

const { project } = useReactFlow();

pass that project function to the onDrop deps array => everything works as expected.

Yeah, was about to update the issue with this. Did not notice the react-dnd hook was memoized. Works as expected.

[bcakmakoglu]

Seems like your position calculation is not correct.

This works completely fine for me in the sandbox you linked:

const offset = monitor.getClientOffset();

const position = {
        x: offset.x,
        y: offset.y
	};