refactor(types): add NodePositionChange type

src/store/index.ts

@@ -13,6 +13,7 @@ import {
   NodeDimensionChange,
   EdgeSelectionChange,
   NodeSelectionChange,
+  NodePositionChange,
 } from '../types';
 import { getHandleBounds } from '../components/Nodes/utils';
 import { createSelectionChange, getSelectionChanges } from '../utils/changes';
@@ -96,7 +97,7 @@ const createStore = () =>
       const { onNodesChange, nodeExtent, nodeInternals, hasDefaultNodes } = get();
 
       if (hasDefaultNodes || onNodesChange) {
-        const changes: NodeDimensionChange[] = [];
+        const changes: NodePositionChange[] = [];
 
         nodeInternals.forEach((node) => {
           if (node.selected) {

src/store/utils.ts

@@ -8,8 +8,8 @@ import {
   Edge,
   EdgeSelectionChange,
   Node,
-  NodeDimensionChange,
   NodeInternals,
+  NodePositionChange,
   NodeSelectionChange,
   ReactFlowState,
   XYPosition,
@@ -103,7 +103,7 @@ export function isParentSelected(node: Node, nodeInternals: NodeInternals): bool
   return isParentSelected(parentNode, nodeInternals);
 }
 
-type CreatePostiionChangeParams = {
+type CreatePostionChangeParams = {
   node: Node;
   nodeExtent: CoordinateExtent;
   nodeInternals: NodeInternals;
@@ -117,10 +117,10 @@ export function createPositionChange({
   dragging,
   nodeExtent,
   nodeInternals,
-}: CreatePostiionChangeParams): NodeDimensionChange {
+}: CreatePostionChangeParams): NodePositionChange {
-  const change: NodeDimensionChange = {
+  const change: NodePositionChange = {
     id: node.id,
-    type: 'dimensions',
+    type: 'position',
     dragging: !!dragging,
   };
 

src/types/changes.ts

@@ -4,9 +4,14 @@ import { NodeHandleBounds } from './nodes';
 export type NodeDimensionChange = {
   id: string;
   type: 'dimensions';
-  dimensions?: Dimensions;
+  dimensions: Dimensions;
-  position?: XYPosition;
   handleBounds?: NodeHandleBounds;
+};
+
+export type NodePositionChange = {
+  id: string;
+  type: 'position';
+  position?: XYPosition;
   dragging?: boolean;
 };
 
@@ -21,7 +26,7 @@ export type NodeRemoveChange = {
   type: 'remove';
 };
 
-export type NodeChange = NodeDimensionChange | NodeSelectionChange | NodeRemoveChange;
+export type NodeChange = NodeDimensionChange | NodePositionChange | NodeSelectionChange | NodeRemoveChange;
 
 export type EdgeSelectionChange = NodeSelectionChange;
 export type EdgeRemoveChange = NodeRemoveChange;

src/utils/changes.ts

@@ -12,14 +12,9 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an
           res.push({ ...item, selected: currentChange.selected });
           return res;
         }
-        case 'dimensions': {
+        case 'position': {
           const updateItem = { ...item };
 
-          if (typeof currentChange.dimensions !== 'undefined') {
-            updateItem.width = currentChange.dimensions.width;
-            updateItem.height = currentChange.dimensions.height;
-          }
-
           if (typeof currentChange.position !== 'undefined') {
             updateItem.position = currentChange.position;
           }
@@ -69,6 +64,17 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an
           res.push(updateItem);
           return res;
         }
+        case 'dimensions': {
+          const updateItem = { ...item };
+
+          if (typeof currentChange.dimensions !== 'undefined') {
+            updateItem.width = currentChange.dimensions.width;
+            updateItem.height = currentChange.dimensions.height;
+          }
+
+          res.push(updateItem);
+          return res;
+        }
         case 'remove': {
           return res;
         }