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

refactor(packages) support react 17 and 18

Browse Source
This commit is contained in:
moklick
2022-09-19 16:07:30 +02:00
parent ed9e3701af
commit fad6cf706e
17 changed files with 86 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
-1
View File
@@ -10,6 +10,5 @@ stats.html
.eslintcache
.idea
.log
.turbo
.rollup.cache
.npmrc
+2 -2
View File
@@ -1,3 +1,3 @@
registry = "https://registry.npmjs.com/"
legacy-peer-deps = true
registry="https://registry.npmjs.com/"
legacy-peer-deps=true
strict-peer-dependencies=false
package.json
-1
View File
@@ -37,7 +37,6 @@
"react-dom": "^18.2.0",
"rimraf": "^3.0.2",
"rollup": "^2.79.0",
"start-server-and-test": "^1.14.0",
"turbo": "^1.4.6",
"typescript": "^4.7.4"
}
packages/background/package.json
+12 -4
View File
@@ -37,20 +37,28 @@
"dependencies": {
"@babel/runtime": "^7.18.9",
"@reactflow/core": "workspace:*",
"classcat": "^5.0.3"
"classcat": "^5.0.3",
"zustand": "^4.0.0"
},
"devDependencies": {
"@reactflow/eslint-config": "workspace:^0.0.0",
"@reactflow/rollup-config": "workspace:*",
"@reactflow/tsconfig": "workspace:*",
"@types/node": "^18.7.16",
"@types/react": "^18.0.19"
"@types/react": "^18.0.19",
"react": "^18.2.0",
"typescript": "^4.7.4"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
"react": ">=17",
"react-dom": ">=17"
},
"rollup": {
"globals": {
"zustand": "Zustand",
"zustand/shallow": "zustandShallow",
"classcat": "cc"
},
"name": "ReactFlowBackground"
}
}
packages/background/src/Background.tsx
+10 -11
View File
@@ -1,6 +1,7 @@
import { memo, useRef, useId } from 'react';
import { memo, useRef } from 'react';
import cc from 'classcat';
import { useStore, ReactFlowState } from '@reactflow/core';
import shallow from 'zustand/shallow';
import { BackgroundProps, BackgroundVariant } from './types';
import { DotPattern, LinePattern } from './Patterns';
@@ -17,7 +18,7 @@ const defaultSize = {
[BackgroundVariant.Cross]: 6,
};
const transformSelector = (s: ReactFlowState) => s.transform;
const selector = (s: ReactFlowState) => ({ transform: s.transform, rfId: s.rfId });
function Background({
variant = BackgroundVariant.Dots,
@@ -31,16 +32,14 @@ function Background({
className,
}: BackgroundProps) {
const ref = useRef<SVGSVGElement>(null);
const patternId = useId();
const [tX, tY, tScale] = useStore(transformSelector);
const { transform, rfId } = useStore(selector, shallow);
const patternColor = color || defaultColor[variant];
const patternSize = size || defaultSize[variant];
const isDots = variant === BackgroundVariant.Dots;
const isCross = variant === BackgroundVariant.Cross;
const gapXY: [number, number] = Array.isArray(gap) ? gap : [gap, gap];
const scaledGap: [number, number] = [gapXY[0] * tScale || 1, gapXY[1] * tScale || 1];
const scaledSize = patternSize * tScale;
const scaledGap: [number, number] = [gapXY[0] * transform[2] || 1, gapXY[1] * transform[2] || 1];
const scaledSize = patternSize * transform[2];
const patternDimensions: [number, number] = isCross ? [scaledSize, scaledSize] : scaledGap;
@@ -62,9 +61,9 @@ function Background({
ref={ref}
>
<pattern
id={patternId}
x={tX % scaledGap[0]}
y={tY % scaledGap[1]}
id={rfId}
x={transform[0] % scaledGap[0]}
y={transform[1] % scaledGap[1]}
width={scaledGap[0]}
height={scaledGap[1]}
patternUnits="userSpaceOnUse"
@@ -76,7 +75,7 @@ function Background({
<LinePattern dimensions={patternDimensions} color={patternColor} lineWidth={lineWidth} />
)}
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
<rect x="0" y="0" width="100%" height="100%" fill={`url(#${rfId})`} />
</svg>
);
}
packages/controls/package.json
+4 -3
View File
@@ -41,15 +41,16 @@
"classcat": "^5.0.3"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
"react": ">=17",
"react-dom": ">=17"
},
"devDependencies": {
"@reactflow/eslint-config": "workspace:^0.0.0",
"@reactflow/rollup-config": "workspace:*",
"@reactflow/tsconfig": "workspace:*",
"@types/node": "^18.7.16",
"@types/react": "^18.0.19"
"@types/react": "^18.0.19",
"typescript": "^4.7.4"
},
"rollup": {
"globals": {
packages/core/package.json
+5 -6
View File
@@ -36,7 +36,9 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@types/d3": "^7.4.0",
"@types/d3-drag": "^3.0.1",
"@types/d3-selection": "^3.0.3",
"@types/d3-zoom": "^3.0.1",
"classcat": "^5.0.3",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
@@ -44,16 +46,13 @@
"zustand": "^4.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
"react": ">=17",
"react-dom": ">=17"
},
"devDependencies": {
"@reactflow/eslint-config": "workspace:^0.0.0",
"@reactflow/rollup-config": "workspace:*",
"@reactflow/tsconfig": "workspace:*",
"@types/d3-drag": "^3.0.1",
"@types/d3-selection": "^3.0.3",
"@types/d3-zoom": "^3.0.1",
"@types/node": "^18.7.16",
"@types/react": "^18.0.17",
"react": "^18.2.0",
packages/core/src/components/StoreUpdater/index.tsx
+3
View File
@@ -42,6 +42,7 @@ type StoreUpdaterProps = Pick<
| 'onSelectionDragStop'
| 'noPanClassName'
| 'nodeOrigin'
| 'id'
>;
const selector = (s: ReactFlowState) => ({
@@ -112,6 +113,7 @@ const StoreUpdater = ({
onSelectionDragStop,
noPanClassName,
nodeOrigin,
id,
}: StoreUpdaterProps) => {
const {
setNodes,
@@ -161,6 +163,7 @@ const StoreUpdater = ({
useDirectStoreUpdater('onSelectionDragStop', onSelectionDragStop, store.setState);
useDirectStoreUpdater('noPanClassName', noPanClassName, store.setState);
useDirectStoreUpdater('nodeOrigin', nodeOrigin, store.setState);
useDirectStoreUpdater('rfId', id, store.setState);
useStoreUpdater<Node[]>(nodes, setNodes);
useStoreUpdater<Edge[]>(edges, setEdges);
packages/core/src/container/ReactFlow/index.tsx
+5 -4
View File
@@ -1,4 +1,4 @@
import { CSSProperties, forwardRef, useId } from 'react';
import { CSSProperties, forwardRef } from 'react';
import cc from 'classcat';
import Attribution from '../../components/Attribution';
@@ -154,13 +154,13 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
elevateEdgesOnSelect = false,
disableKeyboardA11y = false,
style,
id = '1',
...rest
},
ref
) => {
const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped;
const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped;
const rfId = useId();
return (
<div
@@ -228,7 +228,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
noWheelClassName={noWheelClassName}
noPanClassName={noPanClassName}
elevateEdgesOnSelect={elevateEdgesOnSelect}
rfId={rfId}
rfId={id}
disableKeyboardA11y={disableKeyboardA11y}
nodeOrigin={nodeOrigin}
nodeExtent={nodeExtent}
@@ -269,11 +269,12 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
onSelectionDragStop={onSelectionDragStop}
noPanClassName={noPanClassName}
nodeOrigin={nodeOrigin}
id={id}
/>
{onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
{children}
<Attribution proOptions={proOptions} position={attributionPosition} />
{!disableKeyboardA11y && <A11yDescriptions rfId={rfId} />}
{!disableKeyboardA11y && <A11yDescriptions rfId={id} />}
</Wrapper>
</div>
);
packages/core/src/store/initialState.ts
+1
View File
@@ -6,6 +6,7 @@ export const infiniteExtent: CoordinateExtent = [
];
const initialState: ReactFlowStore = {
rfId: '1',
width: 0,
height: 0,
transform: [0, 0, 1],
packages/core/src/types/general.ts
+3 -1
View File
@@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
import { Selection as D3Selection, ZoomBehavior } from 'd3';
import { Selection as D3Selection } from 'd3-selection';
import { ZoomBehavior } from 'd3-zoom';
import { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
import { NodeChange, EdgeChange } from './changes';
@@ -130,6 +131,7 @@ export interface ViewportHelperFunctions {
}
export type ReactFlowStore = {
rfId: string;
width: number;
height: number;
transform: Transform;
packages/core/src/utils/graph.ts
+1 -1
View File
@@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Selection as D3Selection } from 'd3';
import { Selection as D3Selection } from 'd3-selection';
import { boxToRect, clamp, devWarn, getBoundsOfBoxes, rectToBox } from '../utils';
import { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types';
packages/minimap/package.json
+4 -3
View File
@@ -42,8 +42,8 @@
"zustand": "^4.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
"react": ">=17",
"react-dom": ">=17"
},
"devDependencies": {
"@reactflow/eslint-config": "workspace:^0.0.0",
@@ -51,7 +51,8 @@
"@reactflow/tsconfig": "workspace:*",
"@types/node": "^18.7.16",
"@types/react": "^18.0.19",
"react": "^18.2.0"
"react": "^18.2.0",
"typescript": "^4.7.4"
},
"rollup": {
"globals": {
packages/minimap/src/MiniMap.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { memo, useId } from 'react';
import { memo } from 'react';
import cc from 'classcat';
import shallow from 'zustand/shallow';
import { useStore, getRectOfNodes, ReactFlowState, Rect, Panel, getBoundsOfRects } from '@reactflow/core';
@@ -25,6 +25,7 @@ const selector = (s: ReactFlowState) => {
nodes: nodes.filter((node) => !node.hidden && node.width && node.height),
viewBB,
boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes), viewBB) : viewBB,
rfId: s.rfId,
};
};
@@ -43,8 +44,7 @@ function MiniMap({
maskColor = 'rgb(240, 242, 243, 0.7)',
position = 'bottom-right',
}: MiniMapProps) {
const minimapId = useId();
const { boundingRect, viewBB, nodes } = useStore(selector, shallow);
const { boundingRect, viewBB, nodes, rfId } = useStore(selector, shallow);
const elementWidth = (style?.width as number) ?? defaultWidth;
const elementHeight = (style?.height as number) ?? defaultHeight;
const nodeColorFunc = getAttrFunction(nodeColor);
@@ -61,7 +61,7 @@ function MiniMap({
const width = viewWidth + offset * 2;
const height = viewHeight + offset * 2;
const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
const labelledBy = `${ARIA_LABEL_KEY}-${minimapId}`;
const labelledBy = `${ARIA_LABEL_KEY}-${rfId}`;
return (
<Panel position={position} style={style} className={cc(['react-flow__minimap', className])}>
packages/reactflow/package.json
+5 -3
View File
@@ -39,15 +39,17 @@
"@reactflow/minimap": "workspace:*"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
"react": ">=17",
"react-dom": ">=17"
},
"devDependencies": {
"@reactflow/eslint-config": "workspace:^0.0.0",
"@reactflow/rollup-config": "workspace:*",
"@reactflow/tsconfig": "workspace:*",
"@types/node": "^18.7.16",
"@types/react": "^18.0.19"
"@types/react": "^18.0.19",
"react": "^18.2.0",
"typescript": "^4.7.4"
},
"rollup": {
"globals": {
pnpm-lock.yaml
Generated
+27 -2
View File
@@ -26,7 +26,6 @@ importers:
react-dom: ^18.2.0
rimraf: ^3.0.2
rollup: ^2.79.0
start-server-and-test: ^1.14.0
turbo: ^1.4.6
typescript: ^4.7.4
devDependencies:
@@ -52,7 +51,6 @@ importers:
react-dom: registry.npmjs.org/react-dom/18.2.0_react@18.2.0
rimraf: registry.npmjs.org/rimraf/3.0.2
rollup: registry.npmjs.org/rollup/2.79.0
start-server-and-test: registry.npmjs.org/start-server-and-test/1.14.0
turbo: registry.npmjs.org/turbo/1.4.6
typescript: registry.npmjs.org/typescript/4.8.3
@@ -101,10 +99,12 @@ importers:
'@types/node': ^18.7.16
'@types/react': ^18.0.19
classcat: ^5.0.3
zustand: ^4.0.0
dependencies:
'@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0
'@reactflow/core': link:../core
classcat: registry.npmjs.org/classcat/5.0.4
zustand: registry.npmjs.org/zustand/4.1.1
devDependencies:
'@reactflow/eslint-config': link:../../tooling/eslint-config
'@reactflow/rollup-config': link:../../tooling/rollup-config
@@ -6984,6 +6984,14 @@ packages:
punycode: registry.npmjs.org/punycode/2.1.1
dev: true
registry.npmjs.org/use-sync-external-store/1.2.0:
resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz}
name: use-sync-external-store
version: 1.2.0
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
dev: false
registry.npmjs.org/use-sync-external-store/1.2.0_react@18.2.0:
resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz}
id: registry.npmjs.org/use-sync-external-store/1.2.0
@@ -7284,6 +7292,23 @@ packages:
engines: {node: '>=10'}
dev: true
registry.npmjs.org/zustand/4.1.1:
resolution: {integrity: sha512-h4F3WMqsZgvvaE0n3lThx4MM81Ls9xebjvrABNzf5+jb3/03YjNTSgZXeyrvXDArMeV9untvWXRw1tY+ntPYbA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/zustand/-/zustand-4.1.1.tgz}
name: zustand
version: 4.1.1
engines: {node: '>=12.7.0'}
peerDependencies:
immer: '>=9.0'
react: '>=16.8'
peerDependenciesMeta:
immer:
optional: true
react:
optional: true
dependencies:
use-sync-external-store: registry.npmjs.org/use-sync-external-store/1.2.0
dev: false
registry.npmjs.org/zustand/4.1.1_react@18.2.0:
resolution: {integrity: sha512-h4F3WMqsZgvvaE0n3lThx4MM81Ls9xebjvrABNzf5+jb3/03YjNTSgZXeyrvXDArMeV9untvWXRw1tY+ntPYbA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/zustand/-/zustand-4.1.1.tgz}
id: registry.npmjs.org/zustand/4.1.1
turbo.json
-1
View File
@@ -13,7 +13,6 @@
"outputs": []
},
"typecheck": {
"dependsOn": ["^build"],
"outputs": []
},
"test": {