From 257588ce30892b8e947bd31cdd2ca67df72034c3 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 25 Jul 2022 12:25:14 +0200 Subject: [PATCH] refactor(node-dimensions): use store domNode for calculation #2316 --- example/package-lock.json | 98 +++++++++++++++-------------- src/container/ReactFlow/index.tsx | 6 +- src/container/ZoomPane/index.tsx | 1 + src/hooks/useUpdateNodeInternals.ts | 10 ++- src/store/index.ts | 9 ++- src/store/initialState.ts | 1 + src/types/general.ts | 1 + 7 files changed, 73 insertions(+), 53 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index a1283866..c4ed3488 100644 --- a/example/package-lock.json +++ b/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/plugin-transform-runtime": "^7.18.0", - "@babel/preset-env": "^7.18.0", - "@babel/preset-react": "^7.17.12", - "@babel/preset-typescript": "^7.17.12", + "@babel/core": "^7.18.9", + "@babel/plugin-transform-runtime": "^7.18.9", + "@babel/preset-env": "^7.18.9", + "@babel/preset-react": "^7.18.6", + "@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-dom": "^18.0.4", + "@types/react": "^18.0.15", + "@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", - "react": "^18.1.0", - "react-dom": "^18.1.0", - "release-it": "^15.0.0", + "prettier": "^2.7.1", + "react": "^18.2.0", + "react-dom": "^18.2.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-visualizer": "^5.6.0", + "rollup-plugin-typescript2": "^0.32.1", + "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", - "license": "MIT" + "version": "1.3.4", + "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", - "license": "Apache-2.0", + "version": "4.7.4", + "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/plugin-transform-runtime": "^7.18.0", - "@babel/preset-env": "^7.18.0", - "@babel/preset-react": "^7.17.12", - "@babel/preset-typescript": "^7.17.12", - "@babel/runtime": "^7.18.0", + "@babel/core": "^7.18.9", + "@babel/plugin-transform-runtime": "^7.18.9", + "@babel/preset-env": "^7.18.9", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.18.6", + "@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-dom": "^18.0.4", + "@types/react": "^18.0.15", + "@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", - "react": "^18.1.0", - "react-dom": "^18.1.0", - "release-it": "^15.0.0", + "prettier": "^2.7.1", + "react": "^18.2.0", + "react-dom": "^18.2.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-visualizer": "^5.6.0", + "rollup-plugin-typescript2": "^0.32.1", + "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", diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index e5fc446b..257d37f4 100644 --- a/src/container/ReactFlow/index.tsx +++ b/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( ) => { const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped; const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped; - const reactFlowClasses = cc(['react-flow', className]); return ( -
+
state.updateNodeDimensions; function useUpdateNodeInternals(): UpdateNodeInternals { + const store = useStoreApi(); const updateNodeDimensions = useStore(selector); return useCallback((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 }]); diff --git a/src/store/index.ts b/src/store/index.ts index 5608760f..cb8b9502 100644 --- a/src/store/index.ts +++ b/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((res, update) => { diff --git a/src/store/initialState.ts b/src/store/initialState.ts index 1ad29aed..151c8475 100644 --- a/src/store/initialState.ts +++ b/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, diff --git a/src/types/general.ts b/src/types/general.ts index a1708cb9..ac0814f8 100644 --- a/src/types/general.ts +++ b/src/types/general.ts @@ -143,6 +143,7 @@ export type ReactFlowStore = { onEdgesChange: OnEdgesChange | null; hasDefaultNodes: boolean; hasDefaultEdges: boolean; + domNode: HTMLElement | null; d3Zoom: ZoomBehavior | null; d3Selection: D3Selection | null;