diff --git a/src/store/index.ts b/src/store/index.ts index d0b0840e..a4f08ab5 100644 --- a/src/store/index.ts +++ b/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) { diff --git a/src/store/utils.ts b/src/store/utils.ts index f0138a9a..b25be0cd 100644 --- a/src/store/utils.ts +++ b/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 { - const change: NodeDimensionChange = { +}: CreatePostionChangeParams): NodePositionChange { + const change: NodePositionChange = { id: node.id, - type: 'dimensions', + type: 'position', dragging: !!dragging, }; diff --git a/src/types/changes.ts b/src/types/changes.ts index fd29a477..a071f463 100644 --- a/src/types/changes.ts +++ b/src/types/changes.ts @@ -4,9 +4,14 @@ import { NodeHandleBounds } from './nodes'; export type NodeDimensionChange = { id: string; type: 'dimensions'; - dimensions?: Dimensions; - position?: XYPosition; + dimensions: Dimensions; 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; diff --git a/src/utils/changes.ts b/src/utils/changes.ts index 2ab40c59..792dbbc3 100644 --- a/src/utils/changes.ts +++ b/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; }