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

Merge pull request #4168 from xyflow/refactor/node-selection

Browse Source 
fix(react/selection): return user nodes, cleanup
This commit is contained in:
Moritz Klack
2024-04-17 13:52:22 +02:00
committed by GitHub
parent 6181c2d472 93736c1c31
commit c798d654c0
12 changed files with 324 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/package.json
+3
View File
@@ -14,13 +14,16 @@
"test-e2e": "start-server-and-test 'pnpm serve' http-get://localhost:3000 'pnpm test-e2e-cypress'"
},
"dependencies": {
"@reduxjs/toolkit": "^2.2.3",
"@xyflow/react": "workspace:*",
"classcat": "^5.0.4",
"dagre": "^0.8.5",
"localforage": "^1.10.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^9.1.1",
"react-router-dom": "^6.18.0",
"redux": "^5.0.1",
"zustand": "^4.4.6"
},
"devDependencies": {
examples/react/src/App/routes.ts
+6
View File
@@ -51,6 +51,7 @@ import UseNodesData from '../examples/UseNodesData';
import UseHandleConnections from '../examples/UseHandleConnections';
import AddNodeOnEdgeDrop from '../examples/AddNodeOnEdgeDrop';
import DevTools from '../examples/DevTools';
import Redux from '../examples/Redux';
export interface IRoute {
name: string;
@@ -314,6 +315,11 @@ const routes: IRoute[] = [
path: 'useupdatenodeinternals',
component: UseUpdateNodeInternals,
},
{
name: 'redux',
path: 'redux',
component: Redux,
},
{
name: 'Validation',
path: 'validation',
examples/react/src/examples/Redux/index.tsx
+30
View File
@@ -0,0 +1,30 @@
import { ReactFlow } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { useDispatch, useSelector, Provider } from 'react-redux';
import { onNodesChange, onEdgesChange, setSelectedNodesAndEdges, store } from './state';
const OverviewFlow = () => {
const dispatch = useDispatch();
const nodes = useSelector((state) => state.myApplication.nodes);
const edges = useSelector((state) => state.myApplication.edges);
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={(e) => dispatch(onNodesChange(e))}
onEdgesChange={(e) => dispatch(onEdgesChange(e))}
onSelectionChange={(e) => dispatch(setSelectedNodesAndEdges(e))}
fitView
attributionPosition="top-right"
/>
);
};
export default () => (
<Provider store={store}>
<OverviewFlow />
</Provider>
);
examples/react/src/examples/Redux/initial-elements.tsx
+98
View File
@@ -0,0 +1,98 @@
import { MarkerType, type Node, type Edge } from '@xyflow/react';
export const nodes: Node[] = [
{
id: '1',
type: 'input',
data: {
label: 'hey',
},
position: { x: 250, y: 0 },
},
{
id: '2',
data: {
label: 'default node',
},
position: { x: 100, y: 100 },
},
{
id: '3',
data: {
label: 'custom style',
},
position: { x: 400, y: 100 },
style: {
background: '#D6D5E6',
color: '#333',
border: '1px solid #222138',
width: 180,
},
},
{
id: '4',
position: { x: 250, y: 200 },
data: {
label: 'Another default node',
},
},
{
id: '5',
data: {
label: 'Node id: 5',
},
position: { x: 250, y: 325 },
},
{
id: '6',
type: 'output',
data: {
label: 'output',
},
position: { x: 100, y: 480 },
},
{
id: '7',
type: 'output',
data: { label: 'Another output node' },
position: { x: 400, y: 450 },
},
];
export const edges: Edge[] = [
{ id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
{ id: 'e1-3', source: '1', target: '3' },
{
id: 'e3-4',
source: '3',
target: '4',
animated: true,
label: 'animated edge',
},
{
id: 'e4-5',
source: '4',
target: '5',
label: 'edge with arrow head',
markerEnd: {
type: MarkerType.ArrowClosed,
},
},
{
id: 'e5-6',
source: '5',
target: '6',
type: 'smoothstep',
label: 'smooth step edge',
},
{
id: 'e5-7',
source: '5',
target: '7',
type: 'step',
style: { stroke: '#f6ab6c' },
label: 'a step edge',
animated: true,
labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
},
];
examples/react/src/examples/Redux/state.ts
+59
View File
@@ -0,0 +1,59 @@
import { createSlice, configureStore } from '@reduxjs/toolkit';
import { applyNodeChanges, applyEdgeChanges } from '@xyflow/react';
import { nodes, edges } from './initial-elements';
const initialState = {
nodes,
edges,
selectedNodes: [],
selectedEdges: [],
};
const setNodesReducer = (state, action) => {
state.nodes = action.payload;
};
const setEdgesReducer = (state, action) => {
state.edges = action.payload;
};
const onNodesChangeReducer = (state, action) => {
const a = applyNodeChanges(action.payload, state.nodes);
state.nodes = a;
};
const onEdgesChangeReducer = (state, action) => {
const a = applyEdgeChanges(action.payload, state.edges);
state.edges = a;
};
const setSelectedNodesAndEdgesReducer = (state, action) => {
state.selectedNodes = action.payload.nodes;
state.selectedEdges = action.payload.edges;
};
const setSelectedNodesReducer = (state, action) => {
state.selectedNodes = action.payload;
};
const MyApplicationSlice = createSlice({
name: 'MyApplication',
initialState,
reducers: {
setNodes: setNodesReducer,
setEdges: setEdgesReducer,
onNodesChange: onNodesChangeReducer,
onEdgesChange: onEdgesChangeReducer,
setSelectedNodesAndEdges: setSelectedNodesAndEdgesReducer,
setSelectedNodes: setSelectedNodesReducer,
},
});
export const { setNodes, setEdges, onNodesChange, onEdgesChange, setSelectedNodesAndEdges, setSelectedNodes } =
MyApplicationSlice.actions;
export const store = configureStore({
reducer: {
myApplication: MyApplicationSlice.reducer,
},
});
packages/react/CHANGELOG.md
+1
View File
@@ -6,6 +6,7 @@
- use correct positions for intersection helpers
- fix minimap interaction for touch devices
- pass user nodes to `onSelectionChange` instead of internal ones
## 12.0.0-next.14
packages/react/src/components/SelectionListener/index.tsx
+18 -4
View File
@@ -14,10 +14,24 @@ type SelectionListenerProps = {
onSelectionChange?: OnSelectionChangeFunc;
};
const selector = (s: ReactFlowState) => ({
selectedNodes: Array.from(s.nodeLookup.values()).filter((n) => n.selected),
selectedEdges: s.edges.filter((e) => e.selected),
});
const selector = (s: ReactFlowState) => {
const selectedNodes = [];
const selectedEdges = [];
for (const [, node] of s.nodeLookup) {
if (node.selected) {
selectedNodes.push(node.internals.userNode);
}
}
for (const [, edge] of s.edgeLookup) {
if (edge.selected) {
selectedEdges.push(edge);
}
}
return { selectedNodes, selectedEdges };
};
type SelectorSlice = ReturnType<typeof selector>;
packages/react/src/container/Pane/index.tsx
+25 -13
View File
@@ -69,6 +69,8 @@ export function Pane({
const prevSelectedNodesCount = useRef<number>(0);
const prevSelectedEdgesCount = useRef<number>(0);
const containerBounds = useRef<DOMRect>();
const edgeIdLookup = useRef<Map<string, Set<string>>>(new Map());
const { userSelectionActive, elementsSelectable, dragging } = useStore(selector, shallow);
const resetUserSelection = () => {
@@ -96,7 +98,7 @@ export function Pane({
const onWheel = onPaneScroll ? (event: React.WheelEvent) => onPaneScroll(event) : undefined;
const onMouseDown = (event: ReactMouseEvent): void => {
const { resetSelectedElements, domNode } = store.getState();
const { resetSelectedElements, domNode, edgeLookup } = store.getState();
containerBounds.current = domNode?.getBoundingClientRect();
if (
@@ -109,6 +111,13 @@ export function Pane({
return;
}
edgeIdLookup.current = new Map();
for (const [id, edge] of edgeLookup) {
edgeIdLookup.current.set(edge.source, edgeIdLookup.current.get(edge.source)?.add(id) || new Set([id]));
edgeIdLookup.current.set(edge.target, edgeIdLookup.current.get(edge.target)?.add(id) || new Set([id]));
}
const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
resetSelectedElements();
@@ -130,22 +139,21 @@ export function Pane({
const onMouseMove = (event: ReactMouseEvent): void => {
const { userSelectionRect, edgeLookup, transform, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } =
store.getState();
if (!isSelecting || !containerBounds.current || !userSelectionRect) {
return;
}
store.setState({ userSelectionActive: true, nodesSelectionActive: false });
const mousePos = getEventPosition(event.nativeEvent, containerBounds.current);
const startX = userSelectionRect.startX ?? 0;
const startY = userSelectionRect.startY ?? 0;
const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
const { startX, startY } = userSelectionRect;
const nextUserSelectRect = {
...userSelectionRect,
x: mousePos.x < startX ? mousePos.x : startX,
y: mousePos.y < startY ? mousePos.y : startY,
width: Math.abs(mousePos.x - startX),
height: Math.abs(mousePos.y - startY),
startX,
startY,
x: mouseX < startX ? mouseX : startX,
y: mouseY < startY ? mouseY : startY,
width: Math.abs(mouseX - startX),
height: Math.abs(mouseY - startY),
};
const selectedNodes = getNodesInside(
@@ -163,8 +171,10 @@ export function Pane({
for (const selectedNode of selectedNodes) {
selectedNodeIds.add(selectedNode.id);
for (const [edgeId, edge] of edgeLookup) {
if (edge.source === selectedNode.id || edge.target === selectedNode.id) {
const edgeIds = edgeIdLookup.current.get(selectedNode.id);
if (edgeIds) {
for (const edgeId of edgeIds) {
selectedEdgeIds.add(edgeId);
}
}
@@ -184,6 +194,8 @@ export function Pane({
store.setState({
userSelectionRect: nextUserSelectRect,
userSelectionActive: true,
nodesSelectionActive: false,
});
};
packages/react/src/hooks/useReactFlow.ts
+1 -4
View File
@@ -47,10 +47,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
return edges.map((e) => ({ ...e })) as EdgeType[];
}, []);
const getEdge = useCallback<Instance.GetEdge<EdgeType>>((id) => {
const { edges = [] } = store.getState();
return edges.find((e) => e.id === id) as EdgeType;
}, []);
const getEdge = useCallback<Instance.GetEdge<EdgeType>>((id) => store.getState().edgeLookup.get(id) as EdgeType, []);
type SetElementsQueue = {
nodes: (NodeType[] | ((nodes: NodeType[]) => NodeType[]))[];
packages/react/src/utils/changes.ts
+2 -2
View File
@@ -184,8 +184,8 @@ export function getSelectionChanges(
): NodeSelectionChange[] | EdgeSelectionChange[] {
const changes: NodeSelectionChange[] | EdgeSelectionChange[] = [];
for (const [, item] of items) {
const willBeSelected = selectedIds.has(item.id);
for (const [id, item] of items) {
const willBeSelected = selectedIds.has(id);
// we don't want to set all items to selected=false on the first selection
if (!(item.selected === undefined && !willBeSelected) && item.selected !== willBeSelected) {
packages/system/src/utils/store.ts
+7 -7
View File
@@ -92,11 +92,10 @@ export function adoptUserNodes<NodeType extends NodeBase>(
const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
nodes.forEach((userNode) => {
const currentStoreNode = tmpLookup.get(userNode.id);
let internalNode = tmpLookup.get(userNode.id);
let internalNode = currentStoreNode!;
if (options.checkEquality && userNode === currentStoreNode?.internals.userNode) {
nodeLookup.set(userNode.id, currentStoreNode);
if (options.checkEquality && userNode === internalNode?.internals.userNode) {
nodeLookup.set(userNode.id, internalNode);
} else {
internalNode = {
...options.defaults,
@@ -107,7 +106,7 @@ export function adoptUserNodes<NodeType extends NodeBase>(
},
internals: {
positionAbsolute: userNode.position,
handleBounds: currentStoreNode?.internals.handleBounds,
handleBounds: internalNode?.internals.handleBounds,
z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0),
userNode,
},
@@ -184,8 +183,9 @@ export function handleExpandParent(
const dimensions = getNodeDimensions(parent);
// determine how much the parent expands by moving the position
let xChange = expandedRect.x < position.x ? Math.round(Math.abs(position.x - expandedRect.x)) : 0;
let yChange = expandedRect.y < position.y ? Math.round(Math.abs(position.y - expandedRect.y)) : 0;
const xChange = expandedRect.x < position.x ? Math.round(Math.abs(position.x - expandedRect.x)) : 0;
const yChange = expandedRect.y < position.y ? Math.round(Math.abs(position.y - expandedRect.y)) : 0;
if (xChange > 0 || yChange > 0) {
changes.push({
id: parentId,
pnpm-lock.yaml
Generated
+74
View File
@@ -92,6 +92,9 @@ importers:
examples/react:
dependencies:
'@reduxjs/toolkit':
specifier: ^2.2.3
version: 2.2.3(react-redux@9.1.1)(react@18.2.0)
'@xyflow/react':
specifier: workspace:*
version: link:../../packages/react
@@ -110,9 +113,15 @@ importers:
react-dom:
specifier: ^18.2.0
version: 18.2.0(react@18.2.0)
react-redux:
specifier: ^9.1.1
version: 9.1.1(@types/react@18.2.36)(react@18.2.0)(redux@5.0.1)
react-router-dom:
specifier: ^6.18.0
version: 6.18.0(react-dom@18.2.0)(react@18.2.0)
redux:
specifier: ^5.0.1
version: 5.0.1
zustand:
specifier: ^4.4.6
version: 4.4.6(@types/react@18.2.36)(react@18.2.0)
@@ -2120,6 +2129,25 @@ packages:
resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
dev: true
/@reduxjs/toolkit@2.2.3(react-redux@9.1.1)(react@18.2.0):
resolution: {integrity: sha512-76dll9EnJXg4EVcI5YNxZA/9hSAmZsFqzMmNRHvIlzw2WS/twfcVX3ysYrWGJMClwEmChQFC4yRq74tn6fdzRA==}
peerDependencies:
react: ^16.9.0 || ^17.0.0 || ^18
react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
peerDependenciesMeta:
react:
optional: true
react-redux:
optional: true
dependencies:
immer: 10.0.4
react: 18.2.0
react-redux: 9.1.1(@types/react@18.2.36)(react@18.2.0)(redux@5.0.1)
redux: 5.0.1
redux-thunk: 3.1.0(redux@5.0.1)
reselect: 5.1.0
dev: false
/@remix-run/router@1.11.0:
resolution: {integrity: sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==}
engines: {node: '>=14.0.0'}
@@ -3067,6 +3095,10 @@ packages:
resolution: {integrity: sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==}
dev: false
/@types/use-sync-external-store@0.0.3:
resolution: {integrity: sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==}
dev: false
/@types/yauzl@2.10.3:
resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
requiresBuild: true
@@ -6373,6 +6405,10 @@ packages:
resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
dev: false
/immer@10.0.4:
resolution: {integrity: sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==}
dev: false
/import-fresh@3.3.0:
resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
engines: {node: '>=6'}
@@ -9057,6 +9093,28 @@ packages:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
dev: true
/react-redux@9.1.1(@types/react@18.2.36)(react@18.2.0)(redux@5.0.1):
resolution: {integrity: sha512-5ynfGDzxxsoV73+4czQM56qF43vsmgJsO22rmAvU5tZT2z5Xow/A2uhhxwXuGTxgdReF3zcp7A80gma2onRs1A==}
peerDependencies:
'@types/react': ^18.2.25
react: ^18.0
react-native: '>=0.69'
redux: ^5.0.0
peerDependenciesMeta:
'@types/react':
optional: true
react-native:
optional: true
redux:
optional: true
dependencies:
'@types/react': 18.2.36
'@types/use-sync-external-store': 0.0.3
react: 18.2.0
redux: 5.0.1
use-sync-external-store: 1.2.0(react@18.2.0)
dev: false
/react-refresh@0.14.0:
resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
engines: {node: '>=0.10.0'}
@@ -9148,6 +9206,18 @@ packages:
strip-indent: 3.0.0
dev: true
/redux-thunk@3.1.0(redux@5.0.1):
resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
peerDependencies:
redux: ^5.0.0
dependencies:
redux: 5.0.1
dev: false
/redux@5.0.1:
resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
dev: false
/reflect.getprototypeof@1.0.4:
resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
engines: {node: '>= 0.4'}
@@ -9265,6 +9335,10 @@ packages:
resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
dev: true
/reselect@5.1.0:
resolution: {integrity: sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg==}
dev: false
/resolve-from@4.0.0:
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
engines: {node: '>=4'}