alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
moklick
2022-07-25 12:25:14 +02:00
parent 7a909e9425
commit 257588ce30
7 changed files with 73 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
example/package-lock.json generated
View File

@@ -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",

6
src/container/ReactFlow/index.tsx
View File

@@ -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}

1
src/container/ZoomPane/index.tsx
View File

@@ -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,
});
}
}, []);

10
src/hooks/useUpdateNodeInternals.ts
View File

@@ -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 }]);

9
src/store/index.ts
View File

@@ -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) => {

1
src/store/initialState.ts
View File

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

1
src/types/general.ts
View File

@@ -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;