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

Merge branch 'main' into feat/packages

Browse Source
This commit is contained in:
moklick
2023-05-17 11:44:39 +02:00
parent 56bcf2f652 2e1f360817
commit 35095236ff
19 changed files with 126 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/vite-app/src/examples/UseUpdateNodeInternals/CustomNode.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, memo, FC, useMemo, CSSProperties } from 'react';
import { useState, memo, FC, useMemo, CSSProperties } from 'react';
import { Handle, Position, NodeProps, useUpdateNodeInternals } from 'reactflow';
const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
@@ -23,7 +23,7 @@ const CustomNode: FC<NodeProps> = ({ id }) => {
<button
onClick={() => {
setHandleCount((c) => c + 1);
updateNodeInternals(id);
updateNodeInternals([id]);
}}
>
add handle

7
packages/background/CHANGELOG.md
View File

@@ -1,5 +1,12 @@
# @reactflow/background
## 11.2.2
### Patch Changes
- Updated dependencies [[`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba), [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48), [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b)]:
- @reactflow/core@11.7.2
## 11.2.1
### Patch Changes

2
packages/background/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@reactflow/background",
"version": "11.2.1",
"version": "11.2.2",
"description": "Background component with different variants for React Flow",
"keywords": [
"react",

10
packages/controls/CHANGELOG.md
View File

@@ -1,5 +1,14 @@
# @reactflow/controls
## 11.1.13
### Patch Changes
- [#3063](https://github.com/wbkd/react-flow/pull/3063) [`33915b88`](https://github.com/wbkd/react-flow/commit/33915b88c2ae701847870346b381f9cfa86c6459) - disable zoom buttons when min/max is reached
- Updated dependencies [[`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba), [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48), [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b)]:
- @reactflow/core@11.7.2
## 11.1.12
### Patch Changes
@@ -27,7 +36,6 @@
### Patch Changes
- [#2895](https://github.com/wbkd/react-flow/pull/2895) [`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425) Thanks [@moklick](https://github.com/moklick)! - add data-testid for controls, minimap and background
- Updated dependencies [[`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425), [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b), [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798), [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf), [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861), [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7), [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533)]:
- @reactflow/core@11.6.0

9
packages/controls/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@reactflow/controls",
"version": "11.1.12",
"version": "11.1.13",
"description": "Component to control the viewport of a React Flow instance",
"keywords": [
"react",
@@ -39,7 +39,8 @@
},
"dependencies": {
"@reactflow/core": "workspace:*",
"classcat": "^5.0.3"
"classcat": "^5.0.3",
"zustand": "^4.3.1"
},
"peerDependencies": {
"react": ">=17",
@@ -55,7 +56,9 @@
},
"rollup": {
"globals": {
"classcat": "cc"
"classcat": "cc",
"zustand": "Zustand",
"zustand/shallow": "zustandShallow"
},
"name": "ReactFlowControls"
}

11
packages/controls/src/Controls.tsx
View File

@@ -1,5 +1,6 @@
import { memo, useEffect, useState, type FC, type PropsWithChildren } from 'react';
import cc from 'classcat';
import { shallow } from 'zustand/shallow';
import { useStore, useStoreApi, useReactFlow, Panel, type ReactFlowState } from '@reactflow/core';
import PlusIcon from './Icons/Plus';
@@ -11,7 +12,11 @@ import ControlButton from './ControlButton';
import type { ControlProps } from './types';
const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable || s.nodesConnectable || s.elementsSelectable;
const selector = (s: ReactFlowState) => ({
isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
minZoomReached: s.transform[2] <= s.minZoom,
maxZoomReached: s.transform[2] >= s.maxZoom,
});
const Controls: FC<PropsWithChildren<ControlProps>> = ({
style,
@@ -29,7 +34,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
}) => {
const store = useStoreApi();
const [isVisible, setIsVisible] = useState<boolean>(false);
const isInteractive = useStore(isInteractiveSelector);
const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector, shallow);
const { zoomIn, zoomOut, fitView } = useReactFlow();
useEffect(() => {
@@ -79,6 +84,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
className="react-flow__controls-zoomin"
title="zoom in"
aria-label="zoom in"
disabled={maxZoomReached}
>
<PlusIcon />
</ControlButton>
@@ -87,6 +93,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
className="react-flow__controls-zoomout"
title="zoom out"
aria-label="zoom out"
disabled={minZoomReached}
>
<MinusIcon />
</ControlButton>

8
packages/controls/src/style.css
View File

@@ -24,5 +24,13 @@
max-width: 12px;
max-height: 12px;
}
&:disabled {
pointer-events: none;
svg {
fill-opacity: 0.4;
}
}
}
}

8
packages/core/CHANGELOG.md
View File

@@ -1,5 +1,13 @@
# @reactflow/core
## 11.7.2
### Patch Changes
- [#3060](https://github.com/wbkd/react-flow/pull/3060) [`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba) - fix useNodes and useEdges bug with infinite re-renderings
- [#3064](https://github.com/wbkd/react-flow/pull/3064) [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48) - refactor(useUpdateNodeInternals): only call updateNodeDimensions once
- [#3059](https://github.com/wbkd/react-flow/pull/3059) [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b) - fix useUpdateNodeInternals type
## 11.7.1
### Patch Changes

2
packages/core/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@reactflow/core",
"version": "11.7.1",
"version": "11.7.2",
"description": "Core components and util functions of React Flow.",
"keywords": [
"react",

4
packages/core/src/hooks/useEdges.ts
View File

@@ -1,10 +1,12 @@
import { shallow } from 'zustand/shallow';
import { useStore } from '../hooks/useStore';
import type { Edge, ReactFlowState } from '../types';
const edgesSelector = (state: ReactFlowState) => state.edges;
function useEdges<EdgeData>(): Edge<EdgeData>[] {
const edges = useStore(edgesSelector);
const edges = useStore(edgesSelector, shallow);
return edges;
}

4
packages/core/src/hooks/useNodes.ts
View File

@@ -1,3 +1,5 @@
import { shallow } from 'zustand/shallow';
import { useStore } from '../hooks/useStore';
import type { Node, ReactFlowState } from '../types';
@@ -5,7 +7,7 @@ import type { Node, ReactFlowState } from '../types';
const nodesSelector = (state: ReactFlowState) => state.getNodes();
function useNodes<NodeData>(): Node<NodeData>[] {
const nodes = useStore(nodesSelector);
const nodes = useStore(nodesSelector, shallow);
return nodes;
}

19
packages/core/src/hooks/useUpdateNodeInternals.ts
View File

@@ -1,5 +1,5 @@
import { useCallback } from 'react';
import type { UpdateNodeInternals } from '@reactflow/system';
import type { UpdateNodeInternals, NodeDimensionUpdate } from '@reactflow/system';
import { useStoreApi } from '../hooks/useStore';
@@ -10,16 +10,17 @@ function useUpdateNodeInternals(): UpdateNodeInternals {
const { domNode, updateNodeDimensions } = store.getState();
const updateIds = Array.isArray(id) ? id : [id];
const updates = updateIds.reduce<NodeDimensionUpdate[]>((res, updateId) => {
const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${updateId}"]`) as HTMLDivElement;
requestAnimationFrame(() => {
updateIds.forEach((updateId) => {
const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${updateId}"]`) as HTMLDivElement;
if (nodeElement) {
res.push({ id: updateId, nodeElement, forceUpdate: true });
}
if (nodeElement) {
updateNodeDimensions([{ id: updateId, nodeElement, forceUpdate: true }]);
}
});
});
return res;
}, []);
requestAnimationFrame(() => updateNodeDimensions(updates));
}, []);
}

7
packages/minimap/CHANGELOG.md
View File

@@ -1,5 +1,12 @@
# @reactflow/minimap
## 11.5.2
### Patch Changes
- Updated dependencies [[`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba), [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48), [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b)]:
- @reactflow/core@11.7.2
## 11.5.1
### Patch Changes

2
packages/minimap/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@reactflow/minimap",
"version": "11.5.1",
"version": "11.5.2",
"description": "Minimap component for React Flow.",
"keywords": [
"react",

7
packages/node-toolbar/CHANGELOG.md
View File

@@ -1,5 +1,12 @@
# @reactflow/node-toolbar
## 1.2.1
### Patch Changes
- Updated dependencies [[`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba), [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48), [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b)]:
- @reactflow/core@11.7.2
## 1.2.0
### Minor Changes

2
packages/node-toolbar/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@reactflow/node-toolbar",
"version": "1.2.0",
"version": "1.2.1",
"description": "A toolbar component for React Flow that can be attached to a node.",
"keywords": [
"react",

15
packages/reactflow/CHANGELOG.md
View File

@@ -1,5 +1,20 @@
# reactflow
## 11.7.2
### Patch Changes
- [#3063](https://github.com/wbkd/react-flow/pull/3063) [`33915b88`](https://github.com/wbkd/react-flow/commit/33915b88c2ae701847870346b381f9cfa86c6459) - controls: disable zoom buttons when min/max is reached
- [#3060](https://github.com/wbkd/react-flow/pull/3060) [`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba) - fix useNodes and useEdges bug with infinite re-renderings
- [#3064](https://github.com/wbkd/react-flow/pull/3064) [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48) - refactor useUpdateNodeInternals: only call updateNodeDimensions once
- [#3059](https://github.com/wbkd/react-flow/pull/3059) [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b) - fix useUpdateNodeInternals: update type
- Updated dependencies [[`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba), [`33915b88`](https://github.com/wbkd/react-flow/commit/33915b88c2ae701847870346b381f9cfa86c6459), [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48), [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b)]:
- @reactflow/core@11.7.2
- @reactflow/controls@11.1.13
- @reactflow/background@11.2.2
- @reactflow/minimap@11.5.2
- @reactflow/node-toolbar@1.2.1
## 11.7.1
### Patch Changes

2
packages/reactflow/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "reactflow",
"version": "11.7.1",
"version": "11.7.2",
"description": "A highly customizable React library for building node-based editors and interactive flow charts",
"keywords": [
"react",

27
pnpm-lock.yaml generated
View File

@@ -132,9 +132,11 @@ importers:
'@types/react': '>=17'
classcat: ^5.0.3
typescript: ^4.9.4
zustand: ^4.3.1
dependencies:
'@reactflow/core': link:../core
classcat: registry.npmjs.org/classcat/5.0.4
zustand: registry.npmjs.org/zustand/4.3.1
devDependencies:
'@reactflow/eslint-config': link:../../tooling/eslint-config
'@reactflow/rollup-config': link:../../tooling/rollup-config
@@ -8589,6 +8591,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
@@ -8979,6 +8989,23 @@ packages:
engines: {node: '>=10'}
dev: true
registry.npmjs.org/zustand/4.3.1:
resolution: {integrity: sha512-EVyo/eLlOTcJm/X5M00rwtbYFXwRVTaRteSvhtbTZUCQFJkNfIyHPiJ6Ke68MSWzcKHpPzvqNH4gC2ZS/sbNqw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/zustand/-/zustand-4.3.1.tgz}
name: zustand
version: 4.3.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.3.1_react@18.2.0:
resolution: {integrity: sha512-EVyo/eLlOTcJm/X5M00rwtbYFXwRVTaRteSvhtbTZUCQFJkNfIyHPiJ6Ke68MSWzcKHpPzvqNH4gC2ZS/sbNqw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/zustand/-/zustand-4.3.1.tgz}
id: registry.npmjs.org/zustand/4.3.1