From f106feb9a931fe27e1c7c64f516474a9ac799882 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 1 Dec 2022 15:10:15 +0100
Subject: [PATCH] refactor(node-resizer): check change events

---
 .../src/examples/NodeResizer/index.tsx        | 20 ++++++++++++++++---
 packages/node-resizer/src/NodeResizer.tsx     |  6 +++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/examples/vite-app/src/examples/NodeResizer/index.tsx b/examples/vite-app/src/examples/NodeResizer/index.tsx
index c6a4bcbc..3b176e39 100644
--- a/examples/vite-app/src/examples/NodeResizer/index.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/index.tsx
@@ -1,5 +1,13 @@
 import { useCallback } from 'react';
-import ReactFlow, { Controls, addEdge, Position, Connection, useNodesState, useEdgesState } from 'reactflow';
+import ReactFlow, {
+  Controls,
+  addEdge,
+  Position,
+  Connection,
+  useNodesState,
+  useEdgesState,
+  NodeChange,
+} from 'reactflow';
 
 import CustomNode from './CustomNode';
 
@@ -33,7 +41,7 @@ const initialNodes = [
 ];
 
 const CustomNodeFlow = () => {
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [nodes, setNodes, _onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
   const onConnect = useCallback(
@@ -41,6 +49,13 @@ const CustomNodeFlow = () => {
     [setEdges]
   );
 
+  const onNodesChange = useCallback(
+    (changes: NodeChange[]) => {
+      _onNodesChange(changes);
+    },
+    [_onNodesChange]
+  );
+
   return (
     <ReactFlow
       nodes={nodes}
@@ -49,7 +64,6 @@ const CustomNodeFlow = () => {
       onEdgesChange={onEdgesChange}
       onConnect={onConnect}
       nodeTypes={nodeTypes}
-      snapToGrid={true}
       fitView
       minZoom={0.3}
       maxZoom={2}
diff --git a/packages/node-resizer/src/NodeResizer.tsx b/packages/node-resizer/src/NodeResizer.tsx
index 7a938682..9e6764bf 100644
--- a/packages/node-resizer/src/NodeResizer.tsx
+++ b/packages/node-resizer/src/NodeResizer.tsx
@@ -1,9 +1,9 @@
 import { useRef, useEffect } from 'react';
 import { drag } from 'd3-drag';
 import { select } from 'd3-selection';
-import type { D3DragEvent, SubjectPosition } from 'd3';
 import { useStoreApi, useGetPointerPosition } from '@reactflow/core';
 import type { Dimensions, Node, XYPosition } from '@reactflow/core';
+import type { D3DragEvent, SubjectPosition } from 'd3';
 
 type NodeResizerProps = {
   nodeId: string;
@@ -77,8 +77,8 @@ function ResizeHandle({
           const height = initialDimensionsRef.current.height + (invertY ? -distY : distY);
 
           if (invertX || invertY) {
-            const x = invertX ? initialDimensionsRef.current.nodeX + distX : node.position.x;
-            const y = invertY ? initialDimensionsRef.current.nodeY + distY : node.position.y;
+            const x = invertX ? initialDimensionsRef.current.nodeX + distX : initialDimensionsRef.current.nodeX;
+            const y = invertY ? initialDimensionsRef.current.nodeY + distY : initialDimensionsRef.current.nodeY;
 
             if (x !== node.position.x || y !== node.position.y) {
               updateNodePositions(