refactor(actions): combine batch update and update node dimension actions

example/src/CustomNode/index.js

@@ -65,8 +65,6 @@ const CustomNodeFlow = () => {
   const onConnect = (params) =>
     setElements((els) => addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, els));
 
-  console.log('example', elements);
-
   return (
     <ReactFlow
       elements={elements}

src/components/Nodes/wrapNode.tsx

@@ -170,7 +170,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
     useEffect(() => {
       if (nodeElement.current && !isHidden) {
-        updateNodeDimensions({ id, nodeElement: nodeElement.current });
+        updateNodeDimensions([{ id, nodeElement: nodeElement.current }]);
       }
     }, [id, isHidden, sourcePosition, targetPosition]);
 

src/container/NodeRenderer/index.tsx

@@ -28,7 +28,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
   const width = useStoreState((state) => state.width);
   const height = useStoreState((state) => state.height);
   const nodes = useStoreState((state) => state.nodes);
-  const batchUpdateNodeDimensions = useStoreActions((actions) => actions.batchUpdateNodeDimensions);
+  const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
 
   const viewportBox = useMemo(() => ({ x: 0, y: 0, width, height }), [width, height]);
   const visibleNodes = props.onlyRenderVisibleElements ? getNodesInside(nodes, viewportBox, transform, true) : nodes;
@@ -51,7 +51,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
         nodeElement: entry.target as HTMLDivElement,
       }));
 
-      batchUpdateNodeDimensions(updates);
+      updateNodeDimensions(updates);
     });
   }, []);
 

src/store/actions.ts

@@ -44,11 +44,8 @@ export const setOnConnectEnd = (onConnectEnd: OnConnectEndFunc) =>
 
 export const setElements = (elements: Elements) => createAction(constants.SET_ELEMENTS, elements);
 
-export const batchUpdateNodeDimensions = (updates: NodeDimensionUpdate[]) =>
-  createAction(constants.BATCH_UPDATE_NODE_DIMENSIONS, updates);
-
-export const updateNodeDimensions = (payload: NodeDimensionUpdate) =>
-  createAction(constants.UPDATE_NODE_DIMENSIONS, payload);
+export const updateNodeDimensions = (updates: NodeDimensionUpdate[]) =>
+  createAction(constants.UPDATE_NODE_DIMENSIONS, updates);
 
 export const updateNodePos = (payload: NodePosUpdate) => createAction(constants.UPDATE_NODE_POS, payload);
 
@@ -135,7 +132,6 @@ export type ReactFlowAction = ReturnType<
   | typeof setOnConnectStop
   | typeof setOnConnectEnd
   | typeof setElements
-  | typeof batchUpdateNodeDimensions
   | typeof updateNodeDimensions
   | typeof updateNodePos
   | typeof updateNodePosDiff

src/store/contants.ts

@@ -3,7 +3,6 @@ export const SET_ON_CONNECT_START = 'SET_ON_CONNECT_START';
 export const SET_ON_CONNECT_STOP = 'SET_ON_CONNECT_STOP';
 export const SET_ON_CONNECT_END = 'SET_ON_CONNECT_END';
 export const SET_ELEMENTS = 'SET_ELEMENTS';
-export const BATCH_UPDATE_NODE_DIMENSIONS = 'BATCH_UPDATE_NODE_DIMENSIONS';
 export const UPDATE_NODE_DIMENSIONS = 'UPDATE_NODE_DIMENSIONS';
 export const UPDATE_NODE_POS = 'UPDATE_NODE_POS';
 export const UPDATE_NODE_POS_DIFF = 'UPDATE_NODE_POS_DIFF';

src/store/reducer.ts

@@ -87,7 +87,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
 
       return { ...state, nodes: nextNodes, edges: nextEdges };
     }
-    case constants.BATCH_UPDATE_NODE_DIMENSIONS: {
+    case constants.UPDATE_NODE_DIMENSIONS: {
       const updatedNodes = state.nodes.map((node) => {
         const update = action.payload.find((u) => u.id === node.id);
         if (update) {
@@ -119,34 +119,6 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
         nodes: updatedNodes,
       };
     }
-    case constants.UPDATE_NODE_DIMENSIONS: {
-      const { nodeElement, id } = action.payload;
-      const dimensions = getDimensions(nodeElement);
-
-      if (!dimensions.width || !dimensions.height) {
-        return state;
-      }
-
-      const nextNodes = state.nodes.map((node) => {
-        if (node.id === id) {
-          const handleBounds = getHandleBounds(nodeElement, state.transform[2]);
-
-          return {
-            ...node,
-            __rf: {
-              ...node.__rf,
-              width: dimensions.width,
-              height: dimensions.height,
-              handleBounds,
-            },
-          };
-        }
-
-        return node;
-      });
-
-      return { ...state, nodes: nextNodes };
-    }
     case constants.UPDATE_NODE_POS: {
       const { id, pos } = action.payload;