fix(onNodeDrag): show correct position closes #2246

example/src/Subflow/DebugNode.tsx

@@ -11,7 +11,7 @@ const idStyle: CSSProperties = {
   left: 2,
 };
 
-const ColorSelectorNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
+const DebugNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
   return (
     <>
       <Handle type="target" position={Position.Top} />
@@ -24,4 +24,4 @@ const ColorSelectorNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
   );
 };
 
-export default memo(ColorSelectorNode);
+export default memo(DebugNode);

example/src/Subflow/index.tsx

@@ -15,6 +15,7 @@ import ReactFlow, {
 } from 'react-flow-renderer';
 import DebugNode from './DebugNode';
 
+const onNodeDrag = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
 const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
@@ -82,6 +83,7 @@ const initialNodes: Node[] = [
     position: { x: 25, y: 50 },
     className: 'light',
     parentNode: '5',
+    extent: 'parent',
   },
   {
     id: '5b',
@@ -167,6 +169,7 @@ const Subflow = () => {
       onNodeClick={onNodeClick}
       onEdgeClick={onEdgeClick}
       onConnect={onConnect}
+      onNodeDrag={onNodeDrag}
       onNodeDragStop={onNodeDragStop}
       className="react-flow-basic-example"
       defaultZoom={1.5}