refactor(nodes): use one resize observer for all nodes #723

src/components/Nodes/utils.ts

@@ -1,7 +1,16 @@
 import { HandleElement, Position } from '../../types';
 import { getDimensions } from '../../utils';
 
-export const getHandleBounds = (
+export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
+  const bounds = nodeElement.getBoundingClientRect();
+
+  return {
+    source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale),
+    target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale),
+  };
+};
+
+export const getHandleBoundsByHandleType = (
   selector: string,
   nodeElement: HTMLDivElement,
   parentBounds: ClientRect | DOMRect,

src/components/Nodes/wrapNode.tsx

@@ -35,6 +35,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     snapToGrid,
     snapGrid,
     isDragging,
+    resizeObserver,
   }: WrapNodeProps) => {
     const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
     const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
@@ -160,24 +161,19 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     useEffect(() => {
       if (nodeElement.current && !isHidden) {
         updateNodeDimensions({ id, nodeElement: nodeElement.current });
+      }
+    }, [id, isHidden]);
 
-        const resizeObserver = new ResizeObserver(() => {
-          if (nodeElement.current) {
-            updateNodeDimensions({ id, nodeElement: nodeElement.current });
-          }
-        });
+    useEffect(() => {
+      if (nodeElement.current) {
+        const currNode = nodeElement.current;
+        resizeObserver.observe(currNode);
 
-        resizeObserver.observe(nodeElement.current);
-
-        return () => {
-          if (resizeObserver && nodeElement.current) {
-            resizeObserver.unobserve(nodeElement.current);
-          }
-        };
+        return () => resizeObserver.unobserve(currNode);
       }
 
       return;
-    }, [id, isHidden]);
+    }, []);
 
     if (isHidden) {
       return null;
@@ -213,6 +209,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
           onMouseLeave={onMouseLeaveHandler}
           onContextMenu={onContextMenuHandler}
           onClick={onSelectNodeHandler}
+          data-id={id}
         >
           <Provider value={id}>
             <NodeComponent

src/container/NodeRenderer/index.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useMemo, ComponentType, MouseEvent } from 'react';
 
 import { getNodesInside } from '../../utils/graph';
-import { useStoreState } from '../../store/hooks';
+import { useStoreState, useStoreActions } from '../../store/hooks';
 import { Node, NodeTypesType, WrapNodeProps, Edge } from '../../types';
 
 interface NodeRendererProps {
@@ -27,6 +27,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
   const elementsSelectable = useStoreState((state) => state.elementsSelectable);
   const viewportBox = useStoreState((state) => state.viewportBox);
   const nodes = useStoreState((state) => state.nodes);
+  const batchUpdateNodeDimensions = useStoreActions((actions) => actions.batchUpdateNodeDimensions);
 
   const visibleNodes = props.onlyRenderVisibleElements ? getNodesInside(nodes, viewportBox, transform, true) : nodes;
 
@@ -37,6 +38,19 @@ const NodeRenderer = (props: NodeRendererProps) => {
     [transform[0], transform[1], transform[2]]
   );
 
+  const resizeObserver = useMemo(
+    () =>
+      new ResizeObserver((entries) => {
+        const updates = entries.map((entry) => ({
+          id: entry.target.getAttribute('data-id') as string,
+          nodeElement: entry.target as HTMLDivElement,
+        }));
+
+        batchUpdateNodeDimensions({ updates });
+      }),
+    []
+  );
+
   return (
     <div className="react-flow__nodes" style={transformStyle}>
       {visibleNodes.map((node) => {
@@ -81,6 +95,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
             isDraggable={isDraggable}
             isSelectable={isSelectable}
             isConnectable={isConnectable}
+            resizeObserver={resizeObserver}
           />
         );
       })}

src/store/index.ts

@@ -1,4 +1,4 @@
-import { createStore, Action, action, ActionOn, actionOn, Thunk, thunk, computed, Computed } from 'easy-peasy';
+import { createStore, Action, action, Thunk, thunk, computed, Computed } from 'easy-peasy';
 import isEqual from 'fast-deep-equal';
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
 
@@ -33,6 +33,10 @@ type NodeDimensionUpdate = {
   nodeElement: HTMLDivElement;
 };
 
+type NodeDimensionUpdates = {
+  updates: NodeDimensionUpdate[];
+};
+
 type InitD3Zoom = {
   d3Zoom: ZoomBehavior<Element, unknown>;
   d3Selection: D3Selection<Element, unknown, null, undefined>;
@@ -90,8 +94,8 @@ export interface StoreModel {
 
   setElements: Action<StoreModel, Elements>;
 
+  batchUpdateNodeDimensions: Action<StoreModel, NodeDimensionUpdates>;
   updateNodeDimensions: Action<StoreModel, NodeDimensionUpdate>;
-  updateNodeHandlePositions: ActionOn<StoreModel>;
 
   updateNodePos: Action<StoreModel, NodePosUpdate>;
   updateNodePosDiff: Action<StoreModel, NodeDiffUpdate>;
@@ -248,50 +252,39 @@ export const storeModel: StoreModel = {
     });
   }),
 
-  updateNodeDimensions: action((state, { id, nodeElement }) => {
-    const dimensions = getDimensions(nodeElement);
-    const matchingNode = state.nodes.find((n) => n.id === id);
+  batchUpdateNodeDimensions: action((state, { updates }) => {
+    updates.forEach((update) => {
+      const dimensions = getDimensions(update.nodeElement);
+      const matchingIndex = state.elements.findIndex((n) => n.id === update.id);
+      const matchingNode = state.elements[matchingIndex] as Node;
 
-    // only update when size change
-    if (
-      !matchingNode ||
-      (matchingNode.__rf.width === dimensions.width && matchingNode.__rf.height === dimensions.height)
-    ) {
-      return;
-    }
+      if (
+        matchingIndex !== -1 &&
+        dimensions.width &&
+        dimensions.height &&
+        (matchingNode.__rf.width !== dimensions.width || matchingNode.__rf.height !== dimensions.height)
+      ) {
+        const handleBounds = getHandleBounds(update.nodeElement, state.transform[2]);
 
-    state.elements.forEach((n) => {
-      if (n.id === id && isNode(n)) {
-        n.__rf.width = dimensions.width;
-        n.__rf.height = dimensions.height;
+        (state.elements[matchingIndex] as Node).__rf.width = dimensions.width;
+        (state.elements[matchingIndex] as Node).__rf.height = dimensions.height;
+        (state.elements[matchingIndex] as Node).__rf.handleBounds = handleBounds;
       }
     });
   }),
 
-  updateNodeHandlePositions: actionOn(
-    (actions) => actions.updateNodeDimensions,
-    (state, target) => {
-      const { nodeElement, id } = target.payload;
-      const matchingNode = state.nodes.find((n) => n.id === id);
+  updateNodeDimensions: action((state, { id, nodeElement }) => {
+    const dimensions = getDimensions(nodeElement);
+    const matchingIndex = state.elements.findIndex((n) => n.id === id);
 
-      if (!matchingNode) {
-        return;
-      }
+    if (matchingIndex !== -1 && dimensions.width && dimensions.height) {
+      const handleBounds = getHandleBounds(nodeElement, state.transform[2]);
 
-      const bounds = nodeElement.getBoundingClientRect();
-
-      const handleBounds = {
-        source: getHandleBounds('.source', nodeElement, bounds, state.transform[2]),
-        target: getHandleBounds('.target', nodeElement, bounds, state.transform[2]),
-      };
-
-      state.elements.forEach((n) => {
-        if (n.id === id && isNode(n)) {
-          n.__rf.handleBounds = handleBounds;
-        }
-      });
+      (state.elements[matchingIndex] as Node).__rf.width = dimensions.width;
+      (state.elements[matchingIndex] as Node).__rf.height = dimensions.height;
+      (state.elements[matchingIndex] as Node).__rf.handleBounds = handleBounds;
     }
-  ),
+  }),
 
   updateNodePos: action((state, { id, pos }) => {
     let position: XYPosition = pos;

src/types/index.ts

@@ -224,6 +224,7 @@ export interface WrapNodeProps {
   snapToGrid?: boolean;
   snapGrid?: SnapGrid;
   isDragging?: boolean;
+  resizeObserver: ResizeObserver;
 }
 
 export type FitViewParams = {

src/utils/index.ts

@@ -1,6 +1,8 @@
 import { DraggableEvent } from 'react-draggable';
 import { MouseEvent as ReactMouseEvent } from 'react';
 
+import { Dimensions } from '../types';
+
 export const isInputDOMNode = (e: ReactMouseEvent | DraggableEvent | KeyboardEvent) => {
   const target = e?.target as HTMLElement;
 
@@ -9,7 +11,7 @@ export const isInputDOMNode = (e: ReactMouseEvent | DraggableEvent | KeyboardEve
   );
 };
 
-export const getDimensions = (node: HTMLDivElement) => ({
+export const getDimensions = (node: HTMLDivElement): Dimensions => ({
   width: node.offsetWidth,
   height: node.offsetHeight,
 });