#Node not being added at the right position

1 messages · Page 1 of 1 (latest)

long leaf
#

Onpane double click I call my setnodes function, but it adds in the wrong place. Doing console log position on node mount shows the right position is being added, but it visually shows as somewhere completely different

you clicked at x: 862 y: 389
MapContext.tsx:207 adding node at x: 862 y: 389  direction:  null  parentNode:  undefined //correct
terse sand
#

You need to add node not based on the clientX, clientY but relative to the viewport. Try the screenToFlowPosition function from useReactFlow instead of directly passing clientX, clientY which is I think what you are doing

const { screenToFlowPosition } = useReactFlow();

const position = screenToFlowPosition({
    x: event.clientX,
    y: event.clientY,
 });

const newNode = {
    id: getId(),
    type,
    position,
    data: { label: `${type} node` },
 };