refactor(node-dimensions): use store domNode for calculation #2316

example/package-lock.json

@@ -15,7 +15,7 @@
         "react-flow-renderer": "file:../",
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
-        "typescript": "^4.6.4"
+        "typescript": "^4.7.4"
       },
       "devDependencies": {
         "@types/dagre": "^0.7.47",
@@ -27,10 +27,10 @@
     },
     "..": {
       "name": "react-flow-renderer",
-      "version": "10.2.4-next.3",
+      "version": "10.3.11",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.18.0",
+        "@babel/runtime": "^7.18.9",
         "classcat": "^5.0.3",
         "d3-drag": "^3.0.0",
         "d3-selection": "^3.0.0",
@@ -38,40 +38,40 @@
         "zustand": "^3.7.2"
       },
       "devDependencies": {
-        "@babel/core": "^7.18.0",
+        "@babel/core": "^7.18.9",
-        "@babel/plugin-transform-runtime": "^7.18.0",
+        "@babel/plugin-transform-runtime": "^7.18.9",
-        "@babel/preset-env": "^7.18.0",
+        "@babel/preset-env": "^7.18.9",
-        "@babel/preset-react": "^7.17.12",
+        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.17.12",
+        "@babel/preset-typescript": "^7.18.6",
         "@rollup/plugin-babel": "^5.3.1",
-        "@rollup/plugin-commonjs": "^22.0.0",
+        "@rollup/plugin-commonjs": "^22.0.1",
         "@rollup/plugin-node-resolve": "^13.3.0",
         "@rollup/plugin-replace": "^4.0.0",
         "@types/d3": "^7.4.0",
-        "@types/react": "^18.0.9",
+        "@types/react": "^18.0.15",
-        "@types/react-dom": "^18.0.4",
+        "@types/react-dom": "^18.0.6",
         "@types/resize-observer-browser": "^0.1.7",
         "autoprefixer": "^10.4.7",
         "babel-preset-react-app": "^10.0.1",
         "cross-env": "^7.0.3",
         "cypress": "^9.6.1",
         "postcss": "^8.4.14",
-        "postcss-cli": "^9.1.0",
+        "postcss-cli": "^10.0.0",
         "postcss-nested": "^5.0.6",
-        "prettier": "^2.6.2",
+        "prettier": "^2.7.1",
-        "react": "^18.1.0",
+        "react": "^18.2.0",
-        "react-dom": "^18.1.0",
+        "react-dom": "^18.2.0",
-        "release-it": "^15.0.0",
+        "release-it": "^15.1.2",
         "rimraf": "^3.0.2",
-        "rollup": "^2.74.1",
+        "rollup": "^2.77.0",
         "rollup-plugin-livereload": "^2.0.5",
         "rollup-plugin-postcss": "^4.0.2",
-        "rollup-plugin-serve": "^1.1.0",
+        "rollup-plugin-serve": "^2.0.0",
         "rollup-plugin-terser": "^7.0.2",
-        "rollup-plugin-typescript2": "^0.31.2",
+        "rollup-plugin-typescript2": "^0.32.1",
-        "rollup-plugin-visualizer": "^5.6.0",
+        "rollup-plugin-visualizer": "^5.7.1",
         "start-server-and-test": "^1.14.0",
-        "typescript": "^4.6.4"
+        "typescript": "^4.7.4"
       },
       "engines": {
         "node": ">=14"
@@ -22887,8 +22887,9 @@
       }
     },
     "node_modules/stackframe": {
-      "version": "1.2.0",
+      "version": "1.3.4",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
     },
     "node_modules/statuses": {
       "version": "1.5.0",
@@ -23559,8 +23560,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.6.4",
+      "version": "4.7.4",
-      "license": "Apache-2.0",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -31519,19 +31521,19 @@
     "react-flow-renderer": {
       "version": "file:..",
       "requires": {
-        "@babel/core": "^7.18.0",
+        "@babel/core": "^7.18.9",
-        "@babel/plugin-transform-runtime": "^7.18.0",
+        "@babel/plugin-transform-runtime": "^7.18.9",
-        "@babel/preset-env": "^7.18.0",
+        "@babel/preset-env": "^7.18.9",
-        "@babel/preset-react": "^7.17.12",
+        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.17.12",
+        "@babel/preset-typescript": "^7.18.6",
-        "@babel/runtime": "^7.18.0",
+        "@babel/runtime": "^7.18.9",
         "@rollup/plugin-babel": "^5.3.1",
-        "@rollup/plugin-commonjs": "^22.0.0",
+        "@rollup/plugin-commonjs": "^22.0.1",
         "@rollup/plugin-node-resolve": "^13.3.0",
         "@rollup/plugin-replace": "^4.0.0",
         "@types/d3": "^7.4.0",
-        "@types/react": "^18.0.9",
+        "@types/react": "^18.0.15",
-        "@types/react-dom": "^18.0.4",
+        "@types/react-dom": "^18.0.6",
         "@types/resize-observer-browser": "^0.1.7",
         "autoprefixer": "^10.4.7",
         "babel-preset-react-app": "^10.0.1",
@@ -31542,22 +31544,22 @@
         "d3-selection": "^3.0.0",
         "d3-zoom": "^3.0.0",
         "postcss": "^8.4.14",
-        "postcss-cli": "^9.1.0",
+        "postcss-cli": "^10.0.0",
         "postcss-nested": "^5.0.6",
-        "prettier": "^2.6.2",
+        "prettier": "^2.7.1",
-        "react": "^18.1.0",
+        "react": "^18.2.0",
-        "react-dom": "^18.1.0",
+        "react-dom": "^18.2.0",
-        "release-it": "^15.0.0",
+        "release-it": "^15.1.2",
         "rimraf": "^3.0.2",
-        "rollup": "^2.74.1",
+        "rollup": "^2.77.0",
         "rollup-plugin-livereload": "^2.0.5",
         "rollup-plugin-postcss": "^4.0.2",
-        "rollup-plugin-serve": "^1.1.0",
+        "rollup-plugin-serve": "^2.0.0",
         "rollup-plugin-terser": "^7.0.2",
-        "rollup-plugin-typescript2": "^0.31.2",
+        "rollup-plugin-typescript2": "^0.32.1",
-        "rollup-plugin-visualizer": "^5.6.0",
+        "rollup-plugin-visualizer": "^5.7.1",
         "start-server-and-test": "^1.14.0",
-        "typescript": "^4.6.4",
+        "typescript": "^4.7.4",
         "zustand": "^3.7.2"
       },
       "dependencies": {
@@ -38410,7 +38412,9 @@
       }
     },
     "stackframe": {
-      "version": "1.2.0"
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
     },
     "statuses": {
       "version": "1.5.0"
@@ -38797,7 +38801,9 @@
       }
     },
     "typescript": {
-      "version": "4.6.4"
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ=="
     },
     "unbox-primitive": {
       "version": "1.0.1",

src/container/ReactFlow/index.tsx

@@ -1,5 +1,6 @@
-import cc from 'classcat';
 import React, { forwardRef } from 'react';
+import cc from 'classcat';
+
 import Attribution from '../../components/Attribution';
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
 import DefaultNode from '../../components/Nodes/DefaultNode';
@@ -148,10 +149,9 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
   ) => {
     const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped;
     const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped;
-    const reactFlowClasses = cc(['react-flow', className]);
 
     return (
-      <div {...rest} ref={ref} className={reactFlowClasses}>
+      <div {...rest} ref={ref} className={cc(['react-flow', className])}>
         <Wrapper>
           <GraphView
             onInit={onInit}

src/container/ZoomPane/index.tsx

@@ -81,6 +81,7 @@ const ZoomPane = ({
         d3ZoomHandler: selection.on('wheel.zoom'),
         // we need to pass transform because zoom handler is not registered when we set the initial transform
         transform: [clampedX, clampedY, clampedZoom],
+        domNode: selection.node()?.closest('.react-flow') as HTMLElement,
       });
     }
   }, []);

src/hooks/useUpdateNodeInternals.ts

@@ -1,15 +1,21 @@
 import { useCallback } from 'react';
 
-import { useStore } from '../store';
+import { useStore, useStoreApi } from '../store';
 import { UpdateNodeInternals, ReactFlowState } from '../types';
 
 const selector = (state: ReactFlowState) => state.updateNodeDimensions;
 
 function useUpdateNodeInternals(): UpdateNodeInternals {
+  const store = useStoreApi();
   const updateNodeDimensions = useStore(selector);
 
   return useCallback<UpdateNodeInternals>((id: string) => {
-    const nodeElement = document.querySelector(`.react-flow__node[data-id="${id}"]`) as HTMLDivElement;
+    const { domNode } = store.getState();
+    if (!domNode) {
+      return;
+    }
+
+    const nodeElement = domNode.querySelector(`.react-flow__node[data-id="${id}"]`) as HTMLDivElement;
 
     if (nodeElement) {
       updateNodeDimensions([{ id, nodeElement, forceUpdate: true }]);

src/store/index.ts

@@ -43,9 +43,14 @@ const createStore = () =>
       set({ nodeInternals, edges: nextEdges, hasDefaultNodes, hasDefaultEdges });
     },
     updateNodeDimensions: (updates: NodeDimensionUpdate[]) => {
-      const { onNodesChange, nodeInternals, fitViewOnInit, fitViewOnInitDone, fitViewOnInitOptions } = get();
+      const { onNodesChange, nodeInternals, fitViewOnInit, fitViewOnInitDone, fitViewOnInitOptions, domNode } = get();
+      const viewportNode = domNode?.querySelector('.react-flow__viewport');
 
-      const style = window.getComputedStyle(document.querySelector('.react-flow__viewport')!);
+      if (!viewportNode) {
+        return;
+      }
+
+      const style = window.getComputedStyle(viewportNode);
       const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
 
       const changes: NodeDimensionChange[] = updates.reduce<NodeDimensionChange[]>((res, update) => {

src/store/initialState.ts

@@ -29,6 +29,7 @@ const initialState: ReactFlowStore = {
   connectionHandleType: 'source',
   connectionPosition: { x: 0, y: 0 },
   connectionMode: ConnectionMode.Strict,
+  domNode: null,
 
   snapGrid: [15, 15],
   snapToGrid: false,

src/types/general.ts

@@ -143,6 +143,7 @@ export type ReactFlowStore = {
   onEdgesChange: OnEdgesChange | null;
   hasDefaultNodes: boolean;
   hasDefaultEdges: boolean;
+  domNode: HTMLElement | null;
 
   d3Zoom: ZoomBehavior<Element, unknown> | null;
   d3Selection: D3Selection<Element, unknown, null, undefined> | null;