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

Merge branch 'main' into v11

Browse Source
This commit is contained in:
moklick
2022-07-25 15:49:48 +02:00
parent ec2dff24a3 a9f22d8a1b
commit 0054dd3d61
9 changed files with 39511 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -3,13 +3,11 @@
<div align="center">
![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23FF0072)
![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23ff0072)
![npm downloads](https://img.shields.io/npm/dt/react-flow-renderer?color=%23FF0072&label=downloads)
![GitHub Repo stars](https://img.shields.io/github/stars/wbkd/react-flow?color=%23FF0072)
![GitHub release (latest by date)](https://img.shields.io/github/v/release/wbkd/react-flow?color=%23FF0072)
### Wire Your Ideas With React Flow!
A highly customizable React component for building interactive graphs and node-based editors.
[🚀 Getting Started](https://reactflow.dev/docs/getting-started/installation) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing)

39423
example/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

127
packages/core/package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "react-flow-renderer",
"version": "10.3.11",
"version": "10.3.12",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "react-flow-renderer",
"version": "10.3.11",
"version": "10.3.12",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.18.9",
@@ -1967,6 +1967,16 @@
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/source-map": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
"integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
"dev": true,
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.0",
"@jridgewell/trace-mapping": "^0.3.9"
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.11",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
@@ -3706,9 +3716,9 @@
}
},
"node_modules/cli-spinners": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.1.tgz",
"integrity": "sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==",
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.7.0.tgz",
"integrity": "sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw==",
"dev": true,
"engines": {
"node": ">=6"
@@ -6064,9 +6074,9 @@
}
},
"node_modules/inquirer": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.0.1.tgz",
"integrity": "sha512-NO601wvGO4Zm25ctJUhuglRBShQKJSGKGQlgbeyjs3cvXqq4Ud1jhwR36zf3pTC9mmfH3uHJHb/sL3/YJPqMzw==",
"version": "9.0.2",
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.0.2.tgz",
"integrity": "sha512-AqmDHmz3bIe573OiM4svTZzajBzff1xpuzYAimW8gjzW5ncuPllWB8t/GKl+NSuKRJaKyIF2bU2RCx8H1dwqyQ==",
"dev": true,
"dependencies": {
"ansi-escapes": "^5.0.0",
@@ -7567,9 +7577,9 @@
}
},
"node_modules/node-fetch": {
"version": "3.2.8",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.2.8.tgz",
"integrity": "sha512-KtpD1YhGszhntMpBDyp5lyagk8KIMopC1LEb7cQUAh7zcosaX5uK8HnbNb2i3NTQK3sIawCItS0uFC3QzcLHdg==",
"version": "3.2.9",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.2.9.tgz",
"integrity": "sha512-/2lI+DBecVvVm9tDhjziTVjo2wmTsSxSk58saUYP0P/fRJ3xxtfMDY24+CKTkfm0Dlhyn3CSXNL0SoRiCZ8Rzg==",
"dev": true,
"dependencies": {
"data-uri-to-buffer": "^4.0.0",
@@ -8109,14 +8119,14 @@
}
},
"node_modules/parse-url": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/parse-url/-/parse-url-6.0.2.tgz",
"integrity": "sha512-uCSjOvD3T+6B/sPWhR+QowAZcU/o4bjPrVBQBGFxcDF6J6FraCGIaDBsdoQawiaaAVdHvtqBe3w3vKlfBKySOQ==",
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/parse-url/-/parse-url-6.0.3.tgz",
"integrity": "sha512-gxeYC5LVOWg1po3HjHF1JHyyI+kDp/ziEGWUv+smkonT//KRI8TM0zi+yj4e2EZWZ+WGiTPIG1WJSkWZE7isWg==",
"dev": true,
"dependencies": {
"is-ssh": "^1.3.0",
"normalize-url": "^6.1.0",
"parse-path": "^4.0.4",
"parse-path": "^4.0.0",
"protocols": "^1.4.0"
}
},
@@ -9358,9 +9368,9 @@
}
},
"node_modules/release-it": {
"version": "15.1.2",
"resolved": "https://registry.npmjs.org/release-it/-/release-it-15.1.2.tgz",
"integrity": "sha512-GLNFI4oDpxSCAOJyzmaWyel8JwZTr2eD276TivTHaUaUvP0wer2qtUYzF+Ot1V+rLGM25bE+AZwR0UFzQNgC1A==",
"version": "15.1.3",
"resolved": "https://registry.npmjs.org/release-it/-/release-it-15.1.3.tgz",
"integrity": "sha512-pdW9Ua59S3upm2wwzrWiQK8N5vXazNBBYk/UhpVf0faHV6mmY8GunS1ZzawSNi4fOOx55zSQFj2IHkOgfBxNUg==",
"dev": true,
"dependencies": {
"@iarna/toml": "2.2.5",
@@ -9373,12 +9383,12 @@
"git-url-parse": "11.6.0",
"globby": "13.1.2",
"got": "12.1.0",
"inquirer": "9.0.1",
"inquirer": "9.0.2",
"is-ci": "3.0.1",
"lodash": "4.17.21",
"mime-types": "2.1.35",
"new-github-release-url": "2.0.0",
"node-fetch": "3.2.8",
"node-fetch": "3.2.9",
"open": "8.4.0",
"ora": "6.1.2",
"os-name": "5.0.1",
@@ -10564,14 +10574,14 @@
}
},
"node_modules/terser": {
"version": "5.12.1",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.12.1.tgz",
"integrity": "sha512-NXbs+7nisos5E+yXwAD+y7zrcTkMqb0dEJxIGtSKPdCBzopf7ni4odPul2aechpV7EXNvOudYOX2bb5tln1jbQ==",
"version": "5.14.2",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
"integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
"dev": true,
"dependencies": {
"@jridgewell/source-map": "^0.3.2",
"acorn": "^8.5.0",
"commander": "^2.20.0",
"source-map": "~0.7.2",
"source-map-support": "~0.5.20"
},
"bin": {
@@ -10587,15 +10597,6 @@
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true
},
"node_modules/terser/node_modules/source-map": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
"dev": true,
"engines": {
"node": ">= 8"
}
},
"node_modules/throttleit": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz",
@@ -12723,6 +12724,16 @@
"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
"dev": true
},
"@jridgewell/source-map": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
"integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
"dev": true,
"requires": {
"@jridgewell/gen-mapping": "^0.3.0",
"@jridgewell/trace-mapping": "^0.3.9"
}
},
"@jridgewell/sourcemap-codec": {
"version": "1.4.11",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
@@ -14077,9 +14088,9 @@
}
},
"cli-spinners": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.1.tgz",
"integrity": "sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==",
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.7.0.tgz",
"integrity": "sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw==",
"dev": true
},
"cli-table3": {
@@ -15821,9 +15832,9 @@
"dev": true
},
"inquirer": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.0.1.tgz",
"integrity": "sha512-NO601wvGO4Zm25ctJUhuglRBShQKJSGKGQlgbeyjs3cvXqq4Ud1jhwR36zf3pTC9mmfH3uHJHb/sL3/YJPqMzw==",
"version": "9.0.2",
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.0.2.tgz",
"integrity": "sha512-AqmDHmz3bIe573OiM4svTZzajBzff1xpuzYAimW8gjzW5ncuPllWB8t/GKl+NSuKRJaKyIF2bU2RCx8H1dwqyQ==",
"dev": true,
"requires": {
"ansi-escapes": "^5.0.0",
@@ -16901,9 +16912,9 @@
"dev": true
},
"node-fetch": {
"version": "3.2.8",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.2.8.tgz",
"integrity": "sha512-KtpD1YhGszhntMpBDyp5lyagk8KIMopC1LEb7cQUAh7zcosaX5uK8HnbNb2i3NTQK3sIawCItS0uFC3QzcLHdg==",
"version": "3.2.9",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.2.9.tgz",
"integrity": "sha512-/2lI+DBecVvVm9tDhjziTVjo2wmTsSxSk58saUYP0P/fRJ3xxtfMDY24+CKTkfm0Dlhyn3CSXNL0SoRiCZ8Rzg==",
"dev": true,
"requires": {
"data-uri-to-buffer": "^4.0.0",
@@ -17279,14 +17290,14 @@
}
},
"parse-url": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/parse-url/-/parse-url-6.0.2.tgz",
"integrity": "sha512-uCSjOvD3T+6B/sPWhR+QowAZcU/o4bjPrVBQBGFxcDF6J6FraCGIaDBsdoQawiaaAVdHvtqBe3w3vKlfBKySOQ==",
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/parse-url/-/parse-url-6.0.3.tgz",
"integrity": "sha512-gxeYC5LVOWg1po3HjHF1JHyyI+kDp/ziEGWUv+smkonT//KRI8TM0zi+yj4e2EZWZ+WGiTPIG1WJSkWZE7isWg==",
"dev": true,
"requires": {
"is-ssh": "^1.3.0",
"normalize-url": "^6.1.0",
"parse-path": "^4.0.4",
"parse-path": "^4.0.0",
"protocols": "^1.4.0"
}
},
@@ -18125,9 +18136,9 @@
}
},
"release-it": {
"version": "15.1.2",
"resolved": "https://registry.npmjs.org/release-it/-/release-it-15.1.2.tgz",
"integrity": "sha512-GLNFI4oDpxSCAOJyzmaWyel8JwZTr2eD276TivTHaUaUvP0wer2qtUYzF+Ot1V+rLGM25bE+AZwR0UFzQNgC1A==",
"version": "15.1.3",
"resolved": "https://registry.npmjs.org/release-it/-/release-it-15.1.3.tgz",
"integrity": "sha512-pdW9Ua59S3upm2wwzrWiQK8N5vXazNBBYk/UhpVf0faHV6mmY8GunS1ZzawSNi4fOOx55zSQFj2IHkOgfBxNUg==",
"dev": true,
"requires": {
"@iarna/toml": "2.2.5",
@@ -18140,12 +18151,12 @@
"git-url-parse": "11.6.0",
"globby": "13.1.2",
"got": "12.1.0",
"inquirer": "9.0.1",
"inquirer": "9.0.2",
"is-ci": "3.0.1",
"lodash": "4.17.21",
"mime-types": "2.1.35",
"new-github-release-url": "2.0.0",
"node-fetch": "3.2.8",
"node-fetch": "3.2.9",
"open": "8.4.0",
"ora": "6.1.2",
"os-name": "5.0.1",
@@ -19010,14 +19021,14 @@
}
},
"terser": {
"version": "5.12.1",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.12.1.tgz",
"integrity": "sha512-NXbs+7nisos5E+yXwAD+y7zrcTkMqb0dEJxIGtSKPdCBzopf7ni4odPul2aechpV7EXNvOudYOX2bb5tln1jbQ==",
"version": "5.14.2",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
"integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
"dev": true,
"requires": {
"@jridgewell/source-map": "^0.3.2",
"acorn": "^8.5.0",
"commander": "^2.20.0",
"source-map": "~0.7.2",
"source-map-support": "~0.5.20"
},
"dependencies": {
@@ -19026,12 +19037,6 @@
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true
},
"source-map": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
"dev": true
}
}
},

6
packages/core/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
packages/core/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
packages/core/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
packages/core/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
packages/core/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
packages/core/src/types/general.ts
View File

@@ -138,6 +138,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;