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

Merge pull request #4193 from xyflow/next

Browse Source 
React Flow 12.0.0-next.15
This commit is contained in:
Moritz Klack
2024-04-22 15:13:23 +02:00
committed by GitHub
parent 3f4cd6d1fb 40937c38ae
commit a6c0bdc863
49 changed files with 1073 additions and 632 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/NodeResizer/index.tsx
+1
View File
@@ -185,6 +185,7 @@ const CustomNodeFlow = () => {
maxZoom={5}
snapToGrid={snapToGrid}
fitView
onlyRenderVisibleElements
>
<Controls />
<Panel position="bottom-right">
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,
},
});
examples/svelte/src/routes/examples/reset/+page.svelte
+1 -9
View File
@@ -1,14 +1,6 @@
<script lang="ts">
import { writable } from 'svelte/store';
import {
SvelteFlow,
Controls,
Background,
MiniMap,
type Node,
type Edge,
type NodeTypes
} from '@xyflow/svelte';
import { SvelteFlow, Controls, Background, MiniMap, type Node, type Edge } from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
packages/react/CHANGELOG.md
+13
View File
@@ -1,5 +1,18 @@
# @xyflow/react
## 12.0.0-next.15
## Patch changes
- re-observe nodes when using `onlyRenderVisibleElements={true}`
- use correct positions for intersection helpers
- fix minimap interaction for touch devices
- pass user nodes to `onSelectionChange` instead of internal ones to work with Redux
- call `onEnd` in XYResizer thanks @tonyf
- cleanup `getPositionWithOrigin` usage
- use `setAttributes` flag for dimension change when `width`/`height` should be set
- use `replace: false` as the default for `updateNode` function
## 12.0.0-next.14
## Patch changes
packages/react/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@xyflow/react",
"version": "12.0.0-next.14",
"version": "12.0.0-next.15",
"description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
"keywords": [
"react",
packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
+1 -1
View File
@@ -86,7 +86,7 @@ function NodeComponentWrapperInner<NodeType extends Node>({
}) {
const { node, x, y } = useStore((s) => {
const node = s.nodeLookup.get(id) as InternalNode<NodeType>;
const { x, y } = getNodePositionWithOrigin(node, node?.origin || nodeOrigin).positionAbsolute;
const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
return {
node,
packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx
+39 -9
View File
@@ -9,6 +9,10 @@ import {
type NodeChange,
type NodeDimensionChange,
type NodePositionChange,
handleExpandParent,
evaluateAbsolutePosition,
ParentExpandChild,
XYPosition,
} from '@xyflow/system';
import { useStoreApi } from '../../hooks/useStore';
@@ -62,28 +66,54 @@ function ResizeControl({
};
},
onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
const { triggerNodeChanges } = store.getState();
const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState();
const changes: NodeChange[] = [];
const nextPosition = { x: change.x, y: change.y };
if (change.isXPosChange || change.isYPosChange) {
const positionChange: NodePositionChange = {
id,
type: 'position',
position: {
x: change.x,
y: change.y,
const node = nodeLookup.get(id);
if (node && node.expandParent && node.parentId) {
const child: ParentExpandChild = {
id: node.id,
parentId: node.parentId,
rect: {
width: change.width ?? node.measured.width!,
height: change.height ?? node.measured.height!,
...evaluateAbsolutePosition(
{
x: change.x ?? node.position.x,
y: change.y ?? node.position.y,
},
node.parentId,
nodeLookup,
node.origin ?? nodeOrigin
),
},
};
const parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
changes.push(...parentExpandChanges);
// when the parent was expanded by the child node, its position will be clamped at 0,0
nextPosition.x = change.x ? Math.max(0, change.x) : undefined;
nextPosition.y = change.y ? Math.max(0, change.y) : undefined;
}
if (nextPosition.x !== undefined && nextPosition.y !== undefined) {
const positionChange: NodePositionChange = {
id,
type: 'position',
position: { ...(nextPosition as XYPosition) },
};
changes.push(positionChange);
}
if (change.isWidthChange || change.isHeightChange) {
if (change.width !== undefined && change.height !== undefined) {
const dimensionChange: NodeDimensionChange = {
id,
type: 'dimensions',
resizing: true,
setAttributes: true,
dimensions: {
width: change.width,
height: change.height,
packages/react/src/components/NodeWrapper/index.tsx
+24 -74
View File
@@ -1,4 +1,4 @@
import { useEffect, useRef, type MouseEvent, type KeyboardEvent } from 'react';
import { type MouseEvent, type KeyboardEvent } from 'react';
import cc from 'classcat';
import { shallow } from 'zustand/shallow';
import {
@@ -18,6 +18,7 @@ import { useDrag } from '../../hooks/useDrag';
import { useMoveSelectedNodes } from '../../hooks/useMoveSelectedNodes';
import { handleNodeClick } from '../Nodes/utils';
import { arrowKeyDiffs, builtinNodeTypes, getNodeInlineStyleDimensions } from './utils';
import { useNodeObserver } from './useNodeObserver';
import type { InternalNode, Node, NodeWrapperProps } from '../../types';
export function NodeWrapper<NodeType extends Node>({
@@ -42,21 +43,14 @@ export function NodeWrapper<NodeType extends Node>({
nodeOrigin,
onError,
}: NodeWrapperProps<NodeType>) {
const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
const { node, internals, isParent } = useStore((s) => {
const node = s.nodeLookup.get(id)! as InternalNode<NodeType>;
const positionAbsolute = nodeExtent
? clampPosition(node.internals.positionAbsolute, nodeExtent)
: node.internals.positionAbsolute || { x: 0, y: 0 };
const isParent = s.parentLookup.has(id);
return {
node,
// we are mutating positionAbsolute, z and isParent attributes for sub flows
// so we we need to force a re-render when some change
positionAbsoluteX: positionAbsolute.x,
positionAbsoluteY: positionAbsolute.y,
zIndex: node.internals.z,
isParent: node.internals.isParent,
internals: node.internals,
isParent,
};
}, shallow);
@@ -75,58 +69,8 @@ export function NodeWrapper<NodeType extends Node>({
const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined'));
const store = useStoreApi();
const nodeRef = useRef<HTMLDivElement>(null);
const prevSourcePosition = useRef(node.sourcePosition);
const prevTargetPosition = useRef(node.targetPosition);
const prevType = useRef(nodeType);
const nodeDimensions = getNodeDimensions(node);
const inlineDimensions = getNodeInlineStyleDimensions(node);
const initialized = nodeHasDimensions(node);
const hasHandleBounds = !!node.internals.handleBounds;
const moveSelectedNodes = useMoveSelectedNodes();
useEffect(() => {
const currNode = nodeRef.current;
return () => {
if (currNode) {
resizeObserver?.unobserve(currNode);
}
};
}, []);
useEffect(() => {
if (nodeRef.current && !node.hidden) {
const currNode = nodeRef.current;
if (!initialized || !hasHandleBounds) {
resizeObserver?.unobserve(currNode);
resizeObserver?.observe(currNode);
}
}
}, [node.hidden, initialized, hasHandleBounds]);
useEffect(() => {
// when the user programmatically changes the source or handle position, we re-initialize the node
const typeChanged = prevType.current !== nodeType;
const sourcePosChanged = prevSourcePosition.current !== node.sourcePosition;
const targetPosChanged = prevTargetPosition.current !== node.targetPosition;
if (nodeRef.current && (typeChanged || sourcePosChanged || targetPosChanged)) {
if (typeChanged) {
prevType.current = nodeType;
}
if (sourcePosChanged) {
prevSourcePosition.current = node.sourcePosition;
}
if (targetPosChanged) {
prevTargetPosition.current = node.targetPosition;
}
store.getState().updateNodeInternals(new Map([[id, { id, nodeElement: nodeRef.current, force: true }]]));
}
}, [id, nodeType, node.sourcePosition, node.targetPosition]);
const hasDimensions = nodeHasDimensions(node);
const nodeRef = useNodeObserver({ node, nodeType, hasDimensions, resizeObserver });
const dragging = useDrag({
nodeRef,
disabled: node.hidden || !isDraggable,
@@ -135,14 +79,20 @@ export function NodeWrapper<NodeType extends Node>({
nodeId: id,
isSelectable,
});
const moveSelectedNodes = useMoveSelectedNodes();
if (node.hidden) {
return null;
}
const positionAbsoluteOrigin = getPositionWithOrigin({
x: positionAbsoluteX,
y: positionAbsoluteY,
const nodeDimensions = getNodeDimensions(node);
const inlineDimensions = getNodeInlineStyleDimensions(node);
const clampedPosition = nodeExtent
? clampPosition(internals.positionAbsolute, nodeExtent)
: internals.positionAbsolute;
const positionWithOrigin = getPositionWithOrigin({
...clampedPosition,
...nodeDimensions,
origin: node.origin || nodeOrigin,
});
@@ -190,7 +140,7 @@ export function NodeWrapper<NodeType extends Node>({
store.setState({
ariaLiveMessage: `Moved selected node ${event.key
.replace('Arrow', '')
.toLowerCase()}. New position, x: ${~~positionAbsoluteX}, y: ${~~positionAbsoluteY}`,
.toLowerCase()}. New position, x: ${~~clampedPosition.x}, y: ${~~clampedPosition.y}`,
});
moveSelectedNodes({
@@ -220,10 +170,10 @@ export function NodeWrapper<NodeType extends Node>({
])}
ref={nodeRef}
style={{
zIndex,
transform: `translate(${positionAbsoluteOrigin.x}px,${positionAbsoluteOrigin.y}px)`,
zIndex: internals.z,
transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
pointerEvents: hasPointerEvents ? 'all' : 'none',
visibility: initialized ? 'visible' : 'hidden',
visibility: hasDimensions ? 'visible' : 'hidden',
...node.style,
...inlineDimensions,
}}
@@ -246,15 +196,15 @@ export function NodeWrapper<NodeType extends Node>({
id={id}
data={node.data}
type={nodeType}
positionAbsoluteX={positionAbsoluteX}
positionAbsoluteY={positionAbsoluteY}
positionAbsoluteX={clampedPosition.x}
positionAbsoluteY={clampedPosition.y}
selected={node.selected}
isConnectable={isConnectable}
sourcePosition={node.sourcePosition}
targetPosition={node.targetPosition}
dragging={dragging}
dragHandle={node.dragHandle}
zIndex={zIndex}
zIndex={internals.z}
{...nodeDimensions}
/>
</Provider>
packages/react/src/components/NodeWrapper/useNodeObserver.ts
+71
View File
@@ -0,0 +1,71 @@
import { useEffect, useRef } from 'react';
import type { InternalNode } from '../../types';
import { useStoreApi } from '../../hooks/useStore';
/**
* Hook to handle the resize observation + internal updates for the passed node.
*
* @internal
* @returns nodeRef - reference to the node element
*/
export function useNodeObserver({
node,
nodeType,
hasDimensions,
resizeObserver,
}: {
node: InternalNode;
nodeType: string;
hasDimensions: boolean;
resizeObserver: ResizeObserver | null;
}) {
const store = useStoreApi();
const nodeRef = useRef<HTMLDivElement | null>(null);
const observedNode = useRef<HTMLDivElement | null>(null);
const prevSourcePosition = useRef(node.sourcePosition);
const prevTargetPosition = useRef(node.targetPosition);
const prevType = useRef(nodeType);
const isInitialized = hasDimensions && !!node.internals.handleBounds && !node.hidden;
useEffect(() => {
if (nodeRef.current && (!isInitialized || observedNode.current !== nodeRef.current)) {
if (observedNode.current) {
resizeObserver?.unobserve(observedNode.current);
}
resizeObserver?.observe(nodeRef.current);
observedNode.current = nodeRef.current;
}
}, [isInitialized]);
useEffect(() => {
return () => {
if (observedNode.current) {
resizeObserver?.unobserve(observedNode.current);
observedNode.current = null;
}
};
}, []);
useEffect(() => {
if (nodeRef.current) {
// when the user programmatically changes the source or handle position, we need to update the internals
// to make sure the edges are updated correctly
const typeChanged = prevType.current !== nodeType;
const sourcePosChanged = prevSourcePosition.current !== node.sourcePosition;
const targetPosChanged = prevTargetPosition.current !== node.targetPosition;
if (typeChanged || sourcePosChanged || targetPosChanged) {
prevType.current = nodeType;
prevSourcePosition.current = node.sourcePosition;
prevTargetPosition.current = node.targetPosition;
store
.getState()
.updateNodeInternals(new Map([[node.id, { id: node.id, nodeElement: nodeRef.current, force: true }]]));
}
}
}, [node.id, nodeType, node.sourcePosition, node.targetPosition]);
return nodeRef;
}
packages/react/src/components/NodesSelection/index.tsx
+6 -10
View File
@@ -5,13 +5,13 @@
import { useRef, useEffect, type MouseEvent, type KeyboardEvent } from 'react';
import cc from 'classcat';
import { shallow } from 'zustand/shallow';
import { getNodesBounds } from '@xyflow/system';
import { getInternalNodesBounds } from '@xyflow/system';
import { useStore, useStoreApi } from '../../hooks/useStore';
import { useDrag } from '../../hooks/useDrag';
import { useMoveSelectedNodes } from '../../hooks/useMoveSelectedNodes';
import { arrowKeyDiffs } from '../NodeWrapper/utils';
import type { InternalNode, Node, ReactFlowState } from '../../types';
import type { Node, ReactFlowState } from '../../types';
export type NodesSelectionProps<NodeType> = {
onSelectionContextMenu?: (event: MouseEvent, nodes: NodeType[]) => void;
@@ -20,14 +20,10 @@ export type NodesSelectionProps<NodeType> = {
};
const selector = (s: ReactFlowState) => {
const selectedNodes: InternalNode[] = [];
for (const [, node] of s.nodeLookup) {
if (node.selected) {
selectedNodes.push(node);
}
}
const { width, height, x, y } = getNodesBounds(selectedNodes, { nodeOrigin: s.nodeOrigin });
const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
nodeOrigin: s.nodeOrigin,
filter: (node) => !!node.selected,
});
return {
width,
packages/react/src/components/ReactFlowProvider/index.tsx
+27 -28
View File
@@ -1,22 +1,10 @@
import { useRef, type ReactNode } from 'react';
import { type StoreApi } from 'zustand';
import { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
import { useState, type ReactNode } from 'react';
import { Provider } from '../../contexts/RFStoreContext';
import { createRFStore } from '../../store';
import type { ReactFlowState, Node, Edge } from '../../types';
import { Provider } from '../../contexts/StoreContext';
import { createStore } from '../../store';
import type { Node, Edge } from '../../types';
export function ReactFlowProvider({
children,
initialNodes,
initialEdges,
defaultNodes,
defaultEdges,
initialWidth,
initialHeight,
fitView,
}: {
children: ReactNode;
export type ReactFlowProviderProps = {
initialNodes?: Node[];
initialEdges?: Edge[];
defaultNodes?: Node[];
@@ -24,19 +12,30 @@ export function ReactFlowProvider({
initialWidth?: number;
initialHeight?: number;
fitView?: boolean;
}) {
const storeRef = useRef<UseBoundStoreWithEqualityFn<StoreApi<ReactFlowState>> | null>(null);
if (!storeRef.current) {
storeRef.current = createRFStore({
nodes: initialNodes,
edges: initialEdges,
children: ReactNode;
};
export function ReactFlowProvider({
initialNodes: nodes,
initialEdges: edges,
defaultNodes,
defaultEdges,
initialWidth: width,
initialHeight: height,
fitView,
children,
}: ReactFlowProviderProps) {
const [store] = useState(() =>
createStore({
nodes,
edges,
defaultNodes,
defaultEdges,
width: initialWidth,
height: initialHeight,
width,
height,
fitView,
});
}
})
);
return <Provider value={storeRef.current}>{children}</Provider>;
return <Provider value={store}>{children}</Provider>;
}
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/NodeRenderer/useResizeObserver.ts
+6 -13
View File
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useRef } from 'react';
import { useEffect, useState } from 'react';
import { ReactFlowState } from '../../types';
import { useStore } from '../../hooks/useStore';
@@ -8,16 +8,13 @@ const selector = (s: ReactFlowState) => s.updateNodeInternals;
export function useResizeObserver() {
const updateNodeInternals = useStore(selector);
const resizeObserverRef = useRef<ResizeObserver>();
const resizeObserver = useMemo(() => {
const [resizeObserver] = useState(() => {
if (typeof ResizeObserver === 'undefined') {
return null;
}
const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
return new ResizeObserver((entries: ResizeObserverEntry[]) => {
const updates = new Map<string, InternalNodeUpdate>();
entries.forEach((entry: ResizeObserverEntry) => {
const id = entry.target.getAttribute('data-id') as string;
updates.set(id, {
@@ -28,17 +25,13 @@ export function useResizeObserver() {
updateNodeInternals(updates);
});
resizeObserverRef.current = observer;
return observer;
}, []);
});
useEffect(() => {
return () => {
resizeObserverRef?.current?.disconnect();
resizeObserver?.disconnect();
};
}, []);
}, [resizeObserver]);
return resizeObserver;
}
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/container/ReactFlow/Wrapper.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { useContext, type ReactNode } from 'react';
import StoreContext from '../../contexts/RFStoreContext';
import StoreContext from '../../contexts/StoreContext';
import { ReactFlowProvider } from '../../components/ReactFlowProvider';
import type { Node, Edge } from '../../types';
packages/react/src/contexts/RFStoreContext.ts
-8
View File
@@ -1,8 +0,0 @@
import { createContext } from 'react';
import { createRFStore } from '../store';
const StoreContext = createContext<ReturnType<typeof createRFStore> | null>(null);
export const Provider = StoreContext.Provider;
export default StoreContext;
packages/react/src/contexts/StoreContext.ts
+8
View File
@@ -0,0 +1,8 @@
import { createContext } from 'react';
import { createStore } from '../store';
const StoreContext = createContext<ReturnType<typeof createStore> | null>(null);
export const Provider = StoreContext.Provider;
export default StoreContext;
packages/react/src/hooks/useMoveSelectedNodes.ts
+2 -2
View File
@@ -19,7 +19,7 @@ export function useMoveSelectedNodes() {
const moveSelectedNodes = useCallback((params: { direction: XYPosition; factor: number }) => {
const { nodeExtent, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin } =
store.getState();
const nodeUpdates = [];
const nodeUpdates = new Map();
const isSelected = selectedAndDraggable(nodesDraggable);
// by default a node moves 5px on each key press
@@ -56,7 +56,7 @@ export function useMoveSelectedNodes() {
node.position = position;
node.internals.positionAbsolute = positionAbsolute;
nodeUpdates.push(node);
nodeUpdates.set(node.id, node);
}
updateNodePositions(nodeUpdates);
packages/react/src/hooks/useReactFlow.ts
+29 -10
View File
@@ -1,5 +1,12 @@
import { useCallback, useMemo, useRef, useState } from 'react';
import { getElementsToRemove, getOverlappingArea, isRectObject, nodeToRect, type Rect } from '@xyflow/system';
import {
evaluateAbsolutePosition,
getElementsToRemove,
getOverlappingArea,
isRectObject,
nodeToRect,
type Rect,
} from '@xyflow/system';
import useViewportHelper from './useViewportHelper';
import { useStoreApi } from './useStore';
@@ -40,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[]))[];
@@ -223,15 +227,30 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
[]
);
const getNodeRect = useCallback(({ id }: { id: string }): Rect | null => {
const internalNode = store.getState().nodeLookup.get(id);
return internalNode ? nodeToRect(internalNode) : null;
const getNodeRect = useCallback((node: NodeType | { id: string }): Rect | null => {
const { nodeLookup, nodeOrigin } = store.getState();
const nodeToUse = isNode<NodeType>(node) ? node : nodeLookup.get(node.id)!;
const position = nodeToUse.parentId
? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.parentId, nodeLookup, nodeOrigin)
: nodeToUse.position;
const nodeWithPosition = {
id: nodeToUse.id,
position,
width: nodeToUse.measured?.width ?? nodeToUse.width,
height: nodeToUse.measured?.height ?? nodeToUse.height,
data: nodeToUse.data,
};
return nodeToRect(nodeWithPosition);
}, []);
const getIntersectingNodes = useCallback<Instance.GetIntersectingNodes<NodeType>>(
(nodeOrRect, partially = true, nodes) => {
const isRect = isRectObject(nodeOrRect);
const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
const hasNodesOption = nodes !== undefined;
if (!nodeRect) {
return [];
@@ -244,7 +263,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
return false;
}
const currNodeRect = nodeToRect(n);
const currNodeRect = nodeToRect(hasNodesOption ? n : internalNode!);
const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
const partiallyVisible = partially && overlappingArea > 0;
@@ -272,7 +291,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
);
const updateNode = useCallback<Instance.UpdateNode<NodeType>>(
(id, nodeUpdate, options = { replace: true }) => {
(id, nodeUpdate, options = { replace: false }) => {
setNodes((prevNodes) =>
prevNodes.map((node) => {
if (node.id === id) {
packages/react/src/hooks/useStore.ts
+2 -3
View File
@@ -1,10 +1,10 @@
import { useContext, useMemo } from 'react';
import { UseBoundStoreWithEqualityFn, useStoreWithEqualityFn as useZustandStore } from 'zustand/traditional';
import { StoreApi } from 'zustand';
import { errorMessages } from '@xyflow/system';
import StoreContext from '../contexts/RFStoreContext';
import StoreContext from '../contexts/StoreContext';
import type { Edge, Node, ReactFlowState } from '../types';
import { StoreApi } from 'zustand';
const zustandErrorMessage = errorMessages['error001']();
@@ -47,7 +47,6 @@ function useStoreApi<NodeType extends Node = Node, EdgeType extends Edge = Edge>
getState: store.getState,
setState: store.setState,
subscribe: store.subscribe,
destroy: store.destroy,
}),
[store]
);
packages/react/src/store/index.ts
+33 -24
View File
@@ -7,17 +7,18 @@ import {
panBy as panBySystem,
updateNodeInternals as updateNodeInternalsSystem,
updateConnectionLookup,
handleParentExpand,
handleExpandParent,
NodeChange,
EdgeSelectionChange,
NodeSelectionChange,
ParentExpandChild,
} from '@xyflow/system';
import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
import getInitialState from './initialState';
import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams, FitViewOptions, InternalNode } from '../types';
import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams, FitViewOptions } from '../types';
const createRFStore = ({
const createStore = ({
nodes,
edges,
defaultNodes,
@@ -38,14 +39,14 @@ const createRFStore = ({
(set, get) => ({
...getInitialState({ nodes, edges, width, height, fitView, defaultNodes, defaultEdges }),
setNodes: (nodes: Node[]) => {
const { nodeLookup, nodeOrigin, elevateNodesOnSelect } = get();
const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
// setNodes() is called exclusively in response to user actions:
// - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
// - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.
//
// When this happens, we take the note objects passed by the user and extend them with fields
// relevant for internal React Flow operations.
adoptUserNodes(nodes, nodeLookup, { nodeOrigin, elevateNodesOnSelect });
adoptUserNodes(nodes, nodeLookup, parentLookup, { nodeOrigin, elevateNodesOnSelect, checkEquality: true });
set({ nodes });
},
@@ -76,6 +77,7 @@ const createRFStore = ({
onNodesChange,
fitView,
nodeLookup,
parentLookup,
fitViewOnInit,
fitViewDone,
fitViewOnInitOptions,
@@ -84,7 +86,13 @@ const createRFStore = ({
debug,
} = get();
const { changes, updatedInternals } = updateNodeInternalsSystem(updates, nodeLookup, domNode, nodeOrigin);
const { changes, updatedInternals } = updateNodeInternalsSystem(
updates,
nodeLookup,
parentLookup,
domNode,
nodeOrigin
);
if (!updatedInternals) {
return;
@@ -116,26 +124,26 @@ const createRFStore = ({
}
},
updateNodePositions: (nodeDragItems, dragging = false) => {
const { nodeLookup } = get();
const triggerChangeNodes: InternalNode[] = [];
const parentExpandChildren: ParentExpandChild[] = [];
const changes = [];
const changes: NodeChange[] = nodeDragItems.map((node) => {
for (const [id, dragItem] of nodeDragItems) {
// @todo add expandParent to drag item so that we can get rid of the look up here
const internalNode = nodeLookup.get(node.id);
const change: NodeChange = {
id: node.id,
id,
type: 'position',
position: node.position,
position: dragItem.position,
dragging,
};
if (internalNode?.expandParent && change.position) {
triggerChangeNodes.push({
...internalNode,
position: change.position,
internals: {
...internalNode.internals,
positionAbsolute: node.internals.positionAbsolute,
if (dragItem?.expandParent && dragItem?.parentId && change.position) {
parentExpandChildren.push({
id,
parentId: dragItem.parentId,
rect: {
...dragItem.internals.positionAbsolute,
width: dragItem.measured.width!,
height: dragItem.measured.height!,
},
});
@@ -143,11 +151,12 @@ const createRFStore = ({
change.position.y = Math.max(0, change.position.y);
}
return change;
});
changes.push(change);
}
if (triggerChangeNodes.length > 0) {
const parentExpandChanges = handleParentExpand(triggerChangeNodes, nodeLookup);
if (parentExpandChildren.length > 0) {
const { nodeLookup, parentLookup } = get();
const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
changes.push(...parentExpandChanges);
}
@@ -320,4 +329,4 @@ const createRFStore = ({
Object.is
);
export { createRFStore };
export { createStore };
packages/react/src/store/initialState.ts
+10 -8
View File
@@ -2,14 +2,14 @@ import {
infiniteExtent,
ConnectionMode,
adoptUserNodes,
getNodesBounds,
getViewportForBounds,
Transform,
updateConnectionLookup,
devWarn,
getInternalNodesBounds,
} from '@xyflow/system';
import type { Edge, Node, ReactFlowStore } from '../types';
import type { Edge, InternalNode, Node, ReactFlowStore } from '../types';
const getInitialState = ({
nodes,
@@ -28,14 +28,15 @@ const getInitialState = ({
height?: number;
fitView?: boolean;
} = {}): ReactFlowStore => {
const nodeLookup = new Map();
const nodeLookup = new Map<string, InternalNode>();
const parentLookup = new Map();
const connectionLookup = new Map();
const edgeLookup = new Map();
const storeEdges = defaultEdges ?? edges ?? [];
const storeNodes = defaultNodes ?? nodes ?? [];
updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
adoptUserNodes(storeNodes, nodeLookup, {
adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
nodeOrigin: [0, 0],
elevateNodesOnSelect: false,
});
@@ -43,11 +44,11 @@ const getInitialState = ({
let transform: Transform = [0, 0, 1];
if (fitView && width && height) {
const nodesWithDimensions = storeNodes.filter(
(node) => (node.width || node.initialWidth) && (node.height || node.initialHeight)
);
// @todo users nodeOrigin should be used here
const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
const bounds = getInternalNodesBounds(nodeLookup, {
nodeOrigin: [0, 0],
filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),
});
const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
transform = [x, y, zoom];
}
@@ -59,6 +60,7 @@ const getInitialState = ({
transform,
nodes: storeNodes,
nodeLookup,
parentLookup,
edges: storeEdges,
edgeLookup,
connectionLookup,
packages/react/src/types/store.ts
+1
View File
@@ -54,6 +54,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
transform: Transform;
nodes: NodeType[];
nodeLookup: NodeLookup<InternalNode<NodeType>>;
parentLookup: Map<string, InternalNode<NodeType>[]>;
edges: Edge[];
edgeLookup: EdgeLookup<EdgeType>;
connectionLookup: ConnectionLookup;
packages/react/src/utils/changes.ts
+3 -3
View File
@@ -100,7 +100,7 @@ function applyChange(change: any, element: any): any {
element.measured.width = change.dimensions.width;
element.measured.height = change.dimensions.height;
if (change.resizing) {
if (change.setAttributes) {
element.width = change.dimensions.width;
element.height = change.dimensions.height;
}
@@ -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/svelte/CHANGELOG.md
+4
View File
@@ -1,5 +1,9 @@
# @xyflow/svelte
## 0.0.41
- fix: re-observe nodes when not initialized
## 0.0.40
- add `orientation` ('horizontal' or 'vertical'), `style` and `class` prop for `Controls` component
packages/svelte/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@xyflow/svelte",
"version": "0.0.40",
"version": "0.0.41",
"description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
"keywords": [
"svelte",
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+1 -1
View File
@@ -121,7 +121,7 @@
setContext('svelteflow__node_connectable', connectableStore);
$: {
if (resizeObserver && nodeRef !== prevNodeRef) {
if (resizeObserver && (nodeRef !== prevNodeRef || !initialized)) {
prevNodeRef && resizeObserver.unobserve(prevNodeRef);
nodeRef && resizeObserver.observe(nodeRef);
prevNodeRef = nodeRef;
packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+3 -2
View File
@@ -10,7 +10,8 @@
nodesDraggable,
nodesConnectable,
elementsSelectable,
updateNodeInternals
updateNodeInternals,
parentLookup
} = useStore();
const resizeObserver: ResizeObserver | null =
@@ -65,7 +66,7 @@
positionY={node.internals.positionAbsolute.y}
positionOriginX={posOrigin.x ?? 0}
positionOriginY={posOrigin.y ?? 0}
isParent={!!node.internals.isParent}
isParent={$parentLookup.has(node.id)}
style={node.style}
class={node.class}
type={node.type ?? 'default'}
packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
+20 -16
View File
@@ -70,23 +70,27 @@
},
onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
const node = $nodeLookup.get(id)?.internals.userNode;
if (node) {
node.height = change.isHeightChange ? change.height : node.height;
node.width = change.isWidthChange ? change.width : node.width;
node.position =
change.isXPosChange || change.isYPosChange
? { x: change.x, y: change.y }
: node.position;
for (const childChange of childChanges) {
const childNode = $nodeLookup.get(childChange.id)?.internals.userNode;
if (childNode) {
childNode.position = childChange.position;
}
}
$nodes = $nodes;
if (!node) {
return;
}
if (change.x !== undefined && change.y !== undefined) {
node.position = { x: change.x, y: change.y };
}
if (change.width !== undefined && change.height !== undefined) {
node.width = change.width;
node.height = change.height;
}
for (const childChange of childChanges) {
const childNode = $nodeLookup.get(childChange.id)?.internals.userNode;
if (childNode) {
childNode.position = childChange.position;
}
}
$nodes = $nodes;
}
});
}
packages/svelte/src/lib/store/index.ts
+4 -3
View File
@@ -64,14 +64,14 @@ export function createStore({
const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => {
const nodeLookup = get(store.nodeLookup);
for (const nodeDragItem of nodeDragItems) {
const node = nodeLookup.get(nodeDragItem.id)?.internals.userNode;
for (const [id, dragItem] of nodeDragItems) {
const node = nodeLookup.get(id)?.internals.userNode;
if (!node) {
continue;
}
node.position = nodeDragItem.position;
node.position = dragItem.position;
node.dragging = dragging;
}
@@ -83,6 +83,7 @@ export function createStore({
const { changes, updatedInternals } = updateNodeInternalsSystem(
updates,
nodeLookup,
get(store.parentLookup),
get(store.domNode),
get(store.nodeOrigin)
);
packages/svelte/src/lib/store/initial-store.ts
+4 -2
View File
@@ -81,7 +81,8 @@ export const getInitialStore = ({
fitView?: boolean;
}) => {
const nodeLookup: NodeLookup = new Map();
adoptUserNodes(nodes, nodeLookup, {
const parentLookup = new Map();
adoptUserNodes(nodes, nodeLookup, parentLookup, {
nodeOrigin: [0, 0],
elevateNodesOnSelect: false,
checkEquality: false
@@ -104,8 +105,9 @@ export const getInitialStore = ({
return {
flowId: writable<string | null>(null),
nodes: createNodesStore(nodes, nodeLookup),
nodes: createNodesStore(nodes, nodeLookup, parentLookup),
nodeLookup: readable<NodeLookup<InternalNode>>(nodeLookup),
parentLookup: readable<Map<string, InternalNode[]>>(parentLookup),
edgeLookup: readable<EdgeLookup<Edge>>(edgeLookup),
visibleNodes: readable<InternalNode[]>([]),
edges: createEdgesStore(edges, connectionLookup, edgeLookup),
packages/svelte/src/lib/store/utils.ts
+3 -2
View File
@@ -127,7 +127,8 @@ export type NodeStoreOptions = {
// The user only passes in relative positions, so we need to calculate the absolute positions based on the parent nodes.
export const createNodesStore = (
nodes: Node[],
nodeLookup: NodeLookup<InternalNode>
nodeLookup: NodeLookup<InternalNode>,
parentLookup: Map<string, InternalNode[]>
): {
subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
update: (this: void, updater: Updater<Node[]>) => void;
@@ -141,7 +142,7 @@ export const createNodesStore = (
let elevateNodesOnSelect = true;
const _set = (nds: Node[]): Node[] => {
adoptUserNodes(nds, nodeLookup, {
adoptUserNodes(nds, nodeLookup, parentLookup, {
elevateNodesOnSelect,
defaults,
checkEquality: false
packages/system/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@xyflow/system",
"version": "0.0.23",
"version": "0.0.24",
"description": "xyflow core system that powers React Flow and Svelte Flow.",
"keywords": [
"node-based UI",
packages/system/src/types/changes.ts
+3
View File
@@ -4,7 +4,10 @@ export type NodeDimensionChange = {
id: string;
type: 'dimensions';
dimensions?: Dimensions;
/* if this is true, the node is currently being resized via the NodeResizer */
resizing?: boolean;
/* if this is true, we will set width and height of the node and not just the measured dimensions */
setAttributes?: boolean;
};
export type NodePositionChange = {
packages/system/src/types/general.ts
+1 -1
View File
@@ -127,7 +127,7 @@ export type SelectionRect = Rect & {
export type OnError = (id: string, message: string) => void;
export type UpdateNodePositions = (dragItems: NodeDragItem[] | InternalNodeBase[], dragging?: boolean) => void;
export type UpdateNodePositions = (dragItems: Map<string, NodeDragItem | InternalNodeBase>, dragging?: boolean) => void;
export type PanBy = (delta: XYPosition) => boolean;
export type UpdateConnection = (params: {
packages/system/src/types/nodes.ts
+3 -4
View File
@@ -73,8 +73,6 @@ export type InternalNodeBase<NodeType extends NodeBase = NodeBase> = NodeType &
internals: {
positionAbsolute: XYPosition;
z: number;
// @todo should we rename this to "handles" and use same type as node.handles?
isParent: boolean;
/** Holds a reference to the original node object provided by the user.
* Used as an optimization to avoid certain operations. */
userNode: NodeType;
@@ -122,8 +120,8 @@ export type NodeDragItem = {
// distance from the mouse cursor to the node when start dragging
distance: XYPosition;
measured: {
width: number | null;
height: number | null;
width: number;
height: number;
};
internals: {
positionAbsolute: XYPosition;
@@ -144,3 +142,4 @@ export type NodeHandle = Optional<HandleElement, 'width' | 'height'>;
export type Align = 'center' | 'start' | 'end';
export type NodeLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, NodeType>;
export type ParentLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, NodeType[]>;
packages/system/src/utils/general.ts
+51 -9
View File
@@ -9,6 +9,7 @@ import type {
SnapGrid,
Transform,
InternalNodeBase,
NodeLookup,
} from '../types';
import { type Viewport } from '../types';
import { getNodePositionWithOrigin } from './graph';
@@ -67,22 +68,24 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
});
export const nodeToRect = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Rect => {
const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
return {
...positionAbsolute,
x,
y,
width: node.measured?.width ?? node.width ?? 0,
height: node.measured?.height ?? node.height ?? 0,
};
};
export const nodeToBox = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Box => {
const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
return {
...positionAbsolute,
x2: positionAbsolute.x + (node.measured?.width ?? node.width ?? 0),
y2: positionAbsolute.y + (node.measured?.height ?? node.height ?? 0),
x,
y,
x2: x + (node.measured?.width ?? node.width ?? 0),
y2: y + (node.measured?.height ?? node.height ?? 0),
};
};
@@ -204,9 +207,13 @@ export function isCoordinateExtent(extent?: CoordinateExtent | 'parent'): extent
return extent !== undefined && extent !== 'parent';
}
export function getNodeDimensions<NodeType extends NodeBase = NodeBase>(
node: NodeType
): { width: number; height: number } {
export function getNodeDimensions(node: {
measured?: { width?: number; height?: number };
width?: number;
height?: number;
initialWidth?: number;
initialHeight?: number;
}): { width: number; height: number } {
return {
width: node.measured?.width ?? node.width ?? node.initialWidth ?? 0,
height: node.measured?.height ?? node.height ?? node.initialHeight ?? 0,
@@ -219,3 +226,38 @@ export function nodeHasDimensions<NodeType extends NodeBase = NodeBase>(node: No
(node.measured?.height ?? node.height ?? node.initialHeight) !== undefined
);
}
/**
* Convert child position to aboslute position
*
* @internal
* @param position
* @param parentId
* @param nodeLookup
* @param nodeOrigin
* @returns an internal node with an absolute position
*/
export function evaluateAbsolutePosition(
position: XYPosition,
parentId: string,
nodeLookup: NodeLookup,
nodeOrigin: NodeOrigin = [0, 0]
): XYPosition {
let nextParentId: string | undefined = parentId;
const positionAbsolute = { ...position };
while (nextParentId) {
const parent = nodeLookup.get(parentId);
nextParentId = parent?.parentId;
if (parent) {
const origin = parent.origin || nodeOrigin;
const xOffset = (parent.measured.width ?? 0) * origin[0];
const yOffset = (parent.measured.height ?? 0) * origin[1];
positionAbsolute.x += parent.position.x - xOffset;
positionAbsolute.y += parent.position.y - yOffset;
}
}
return positionAbsolute;
}
packages/system/src/utils/graph.ts
+29 -66
View File
@@ -4,12 +4,12 @@ import {
clampPosition,
getBoundsOfBoxes,
getOverlappingArea,
rectToBox,
nodeToRect,
pointToRendererPoint,
getViewportForBounds,
isCoordinateExtent,
getNodeDimensions,
nodeToBox,
} from './general';
import {
type Transform,
@@ -25,6 +25,7 @@ import {
OnBeforeDeleteBase,
NodeLookup,
InternalNodeBase,
NodeDragItem,
} from '../types';
import { errorMessages } from '../constants';
@@ -106,46 +107,29 @@ export const getIncomers = <NodeType extends NodeBase = NodeBase, EdgeType exten
};
export const getNodePositionWithOrigin = (
node: InternalNodeBase | NodeBase | undefined,
node: InternalNodeBase | NodeBase,
nodeOrigin: NodeOrigin = [0, 0]
): { position: XYPosition; positionAbsolute: XYPosition } => {
if (!node) {
return {
position: {
x: 0,
y: 0,
},
positionAbsolute: {
x: 0,
y: 0,
},
};
}
const { width, height } = getNodeDimensions(node);
const offsetX = width * nodeOrigin[0];
const offsetY = height * nodeOrigin[1];
const position: XYPosition = {
x: node.position.x - offsetX,
y: node.position.y - offsetY,
};
const positionAbsolute = 'internals' in node ? node.internals.positionAbsolute : node.position;
const origin = node.origin || nodeOrigin;
const offsetX = width * origin[0];
const offsetY = height * origin[1];
return {
position,
positionAbsolute:
'internals' in node
? {
x: node.internals.positionAbsolute.x - offsetX,
y: node.internals.positionAbsolute.y - offsetY,
}
: position,
position: {
x: node.position.x - offsetX,
y: node.position.y - offsetY,
},
positionAbsolute: {
x: positionAbsolute.x - offsetX,
y: positionAbsolute.y - offsetY,
},
};
};
export type GetNodesBoundsParams = {
nodeOrigin?: NodeOrigin;
useRelativePosition?: boolean;
};
/**
@@ -154,28 +138,17 @@ export type GetNodesBoundsParams = {
* @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport.
* @param nodes - Nodes to calculate the bounds for
* @param params.nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center
* @param params.useRelativePosition - Whether to use the relative or absolute node positions
* @returns Bounding box enclosing all nodes
*/
// @todo how to handle this if users do not have absolute positions?
export const getNodesBounds = (
nodes: NodeBase[],
params: GetNodesBoundsParams = { nodeOrigin: [0, 0], useRelativePosition: false }
): Rect => {
export const getNodesBounds = (nodes: NodeBase[], params: GetNodesBoundsParams = { nodeOrigin: [0, 0] }): Rect => {
if (nodes.length === 0) {
return { x: 0, y: 0, width: 0, height: 0 };
}
const box = nodes.reduce(
(currBox, node) => {
const nodePos = getNodePositionWithOrigin(node, node.origin || params.nodeOrigin);
return getBoundsOfBoxes(
currBox,
rectToBox({
...nodePos[params.useRelativePosition ? 'position' : 'positionAbsolute'],
...getNodeDimensions(node),
})
);
const nodeBox = nodeToBox(node, params.nodeOrigin);
return getBoundsOfBoxes(currBox, nodeBox);
},
{ x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
);
@@ -183,21 +156,20 @@ export const getNodesBounds = (
return boxToRect(box);
};
export type GetInternalNodesBoundsParams = {
export type GetInternalNodesBoundsParams<NodeType> = {
nodeOrigin?: NodeOrigin;
useRelativePosition?: boolean;
filter?: (node: NodeBase) => boolean;
filter?: (node: NodeType) => boolean;
};
/**
* Determines a bounding box that contains all given nodes in an array
* @internal
*/
export const getInternalNodesBounds = (
nodeLookup: NodeLookup,
params: GetInternalNodesBoundsParams = {
export const getInternalNodesBounds = <NodeType extends InternalNodeBase | NodeDragItem>(
nodeLookup: Map<string, NodeType>,
params: GetInternalNodesBoundsParams<NodeType> = {
nodeOrigin: [0, 0],
useRelativePosition: false,
}
): Rect => {
if (nodeLookup.size === 0) {
@@ -208,14 +180,8 @@ export const getInternalNodesBounds = (
nodeLookup.forEach((node) => {
if (params.filter == undefined || params.filter(node)) {
const nodePos = getNodePositionWithOrigin(node, node.origin || params.nodeOrigin);
box = getBoundsOfBoxes(
box,
rectToBox({
...nodePos[params.useRelativePosition ? 'position' : 'positionAbsolute'],
...getNodeDimensions(node),
})
);
const nodeBox = nodeToBox(node as InternalNodeBase, params.nodeOrigin);
box = getBoundsOfBoxes(box, nodeBox);
}
});
@@ -223,7 +189,7 @@ export const getInternalNodesBounds = (
};
export const getNodesInside = <NodeType extends NodeBase = NodeBase>(
nodeLookup: Map<string, InternalNodeBase<NodeType>>,
nodes: Map<string, InternalNodeBase<NodeType>>,
rect: Rect,
[tx, ty, tScale]: Transform = [0, 0, 1],
partially = false,
@@ -239,7 +205,7 @@ export const getNodesInside = <NodeType extends NodeBase = NodeBase>(
const visibleNodes: InternalNodeBase<NodeType>[] = [];
for (const [, node] of nodeLookup) {
for (const [, node] of nodes) {
const { measured, selectable = true, hidden = false } = node;
const width = measured.width ?? node.width ?? node.initialWidth ?? null;
const height = measured.height ?? node.height ?? node.initialHeight ?? null;
@@ -286,15 +252,12 @@ export function fitView<Params extends FitViewParamsBase<NodeBase>, Options exte
options?: Options
) {
const filteredNodes: InternalNodeBase[] = [];
const optionNodeIds = options?.nodes ? new Set(options.nodes.map((node) => node.id)) : null;
nodeLookup.forEach((n) => {
const isVisible = n.measured.width && n.measured.height && (options?.includeHiddenNodes || !n.hidden);
// TODO: this remove options.nodes.some with a Set
if (
isVisible &&
(!options?.nodes || (options?.nodes.length && options?.nodes.some((optionNode) => optionNode.id === n.id)))
) {
if (isVisible && (!optionNodeIds || optionNodeIds.has(n.id))) {
filteredNodes.push(n);
}
});
packages/system/src/utils/store.ts
+113 -90
View File
@@ -15,10 +15,12 @@ import {
Rect,
NodeDimensionChange,
NodePositionChange,
ParentLookup,
} from '../types';
import { getDimensions, getHandleBounds } from './dom';
import { getBoundsOfRects, getNodeDimensions, isNumeric, nodeToRect } from './general';
import { getNodePositionWithOrigin } from './graph';
import { ParentExpandChild } from './types';
export function updateAbsolutePositions<NodeType extends NodeBase>(
nodeLookup: Map<string, InternalNodeBase<NodeType>>,
@@ -26,41 +28,41 @@ export function updateAbsolutePositions<NodeType extends NodeBase>(
nodeOrigin: [0, 0] as NodeOrigin,
elevateNodesOnSelect: true,
defaults: {},
},
parentNodeIds?: Set<string>
}
) {
const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
for (const [id, node] of nodeLookup) {
for (const [, node] of nodeLookup) {
const parentId = node.parentId;
if (parentId && !nodeLookup.has(parentId)) {
if (!parentId) {
continue;
}
if (!nodeLookup.has(parentId)) {
throw new Error(`Parent node ${parentId} not found`);
}
if (parentId || node.internals.isParent || parentNodeIds?.has(id)) {
const parentNode = parentId ? nodeLookup.get(parentId) : null;
const { x, y, z } = calculateXYZPosition(
node,
nodeLookup,
{
...node.position,
z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0),
},
parentNode?.origin || options.nodeOrigin
);
const parentNode = nodeLookup.get(parentId);
const { x, y, z } = calculateXYZPosition(
node,
nodeLookup,
{
...node.position,
z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0),
},
parentNode?.origin ?? options.nodeOrigin
);
const currPosition = node.internals.positionAbsolute;
const positionChanged = x !== currPosition.x || y !== currPosition.y;
const currPosition = node.internals.positionAbsolute;
const positionChanged = x !== currPosition.x || y !== currPosition.y;
node.internals.positionAbsolute = positionChanged ? { x, y } : currPosition;
node.internals.z = z;
if (parentNodeIds !== undefined) {
node.internals.isParent = !!parentNodeIds?.has(id);
}
nodeLookup.set(id, node);
if (positionChanged || z !== node.internals.z) {
node.internals = {
...node.internals,
positionAbsolute: positionChanged ? { x, y } : currPosition,
z,
};
}
}
}
@@ -75,6 +77,7 @@ type UpdateNodesOptions<NodeType extends NodeBase> = {
export function adoptUserNodes<NodeType extends NodeBase>(
nodes: NodeType[],
nodeLookup: Map<string, InternalNodeBase<NodeType>>,
parentLookup: Map<string, InternalNodeBase<NodeType>[]>,
options: UpdateNodesOptions<NodeType> = {
nodeOrigin: [0, 0] as NodeOrigin,
elevateNodesOnSelect: true,
@@ -84,20 +87,17 @@ export function adoptUserNodes<NodeType extends NodeBase>(
) {
const tmpLookup = new Map(nodeLookup);
nodeLookup.clear();
parentLookup.clear();
const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
const parentNodeIds = new Set<string>();
nodes.forEach((userNode) => {
const currentStoreNode = tmpLookup.get(userNode.id);
let internalNode = tmpLookup.get(userNode.id);
if (userNode.parentId) {
parentNodeIds.add(userNode.parentId);
}
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 {
nodeLookup.set(userNode.id, {
internalNode = {
...options.defaults,
...userNode,
measured: {
@@ -106,17 +106,26 @@ 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,
isParent: false,
},
});
};
nodeLookup.set(userNode.id, internalNode);
}
if (userNode.parentId) {
const childNodes = parentLookup.get(userNode.parentId);
if (childNodes) {
childNodes.push(internalNode);
} else {
parentLookup.set(userNode.parentId, [internalNode]);
}
}
});
if (parentNodeIds.size > 0) {
updateAbsolutePositions(nodeLookup, options, parentNodeIds);
if (parentLookup.size > 0) {
updateAbsolutePositions(nodeLookup, options);
}
}
@@ -130,53 +139,56 @@ function calculateXYZPosition<NodeType extends NodeBase>(
return result;
}
const parentNode = nodeLookup.get(node.parentId)!;
const { position: parentNodePosition } = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
const parent = nodeLookup.get(node.parentId)!;
const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin).position;
return calculateXYZPosition(
parentNode,
parent,
nodeLookup,
{
x: (result.x ?? 0) + parentNodePosition.x,
y: (result.y ?? 0) + parentNodePosition.y,
z: (parentNode.internals.z ?? 0) > (result.z ?? 0) ? parentNode.internals.z ?? 0 : result.z ?? 0,
x: (result.x ?? 0) + parentPosition.x,
y: (result.y ?? 0) + parentPosition.y,
z: (parent.internals.z ?? 0) > (result.z ?? 0) ? parent.internals.z ?? 0 : result.z ?? 0,
},
parentNode.origin || nodeOrigin
parent.origin || nodeOrigin
);
}
export function handleParentExpand(
nodes: InternalNodeBase[],
nodeLookup: NodeLookup
export function handleExpandParent(
children: ParentExpandChild[],
nodeLookup: NodeLookup,
parentLookup: ParentLookup,
nodeOrigin?: NodeOrigin
): (NodeDimensionChange | NodePositionChange)[] {
const changes: (NodeDimensionChange | NodePositionChange)[] = [];
const chilNodeRects = new Map<string, Rect>();
const parentExpansions = new Map<string, { expandedRect: Rect; parent: InternalNodeBase }>();
nodes.forEach((node) => {
const parentId = node.parentId;
if (node.expandParent && parentId) {
const parentNode = nodeLookup.get(parentId);
if (parentNode) {
const parentRect = chilNodeRects.get(parentId) || nodeToRect(parentNode, node.origin);
const expandedRect = getBoundsOfRects(parentRect, nodeToRect(node, node.origin));
chilNodeRects.set(parentId, expandedRect);
}
// determine the expanded rectangle the child nodes would take for each parent
for (const child of children) {
const parent = nodeLookup.get(child.parentId);
if (!parent) {
continue;
}
});
if (chilNodeRects.size > 0) {
chilNodeRects.forEach((rect, id) => {
const origParent = nodeLookup.get(id)!;
const { position } = getNodePositionWithOrigin(origParent, origParent.origin);
const dimensions = getNodeDimensions(origParent);
const parentRect =
parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent, parent.origin ?? nodeOrigin);
const expandedRect = getBoundsOfRects(parentRect, child.rect);
parentExpansions.set(child.parentId, { expandedRect, parent });
}
if (rect.x < position.x || rect.y < position.y) {
const xChange = Math.round(Math.abs(position.x - rect.x));
const yChange = Math.round(Math.abs(position.y - rect.y));
if (parentExpansions.size > 0) {
parentExpansions.forEach(({ expandedRect, parent }, parentId) => {
// determine the position & dimensions of the parent
const { position } = getNodePositionWithOrigin(parent, parent.origin);
const dimensions = getNodeDimensions(parent);
// determine how much the parent expands by moving the position
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,
id: parentId,
type: 'position',
position: {
x: position.x - xChange,
@@ -184,25 +196,31 @@ export function handleParentExpand(
},
});
changes.push({
id,
type: 'dimensions',
resizing: true,
dimensions: {
width: dimensions.width + xChange,
height: dimensions.height + yChange,
},
// We move all child nodes in the oppsite direction
// so the x,y changes of the parent do not move the children
const childNodes = parentLookup.get(parentId);
childNodes?.forEach((childNode) => {
if (!children.some((child) => child.id === childNode.id)) {
changes.push({
id: childNode.id,
type: 'position',
position: {
x: childNode.position.x + xChange,
y: childNode.position.y + yChange,
},
});
}
});
}
// @todo we need to reset child node positions if < 0
} else if (dimensions.width < rect.width || dimensions.height < rect.height) {
if (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height) {
changes.push({
id,
id: parentId,
type: 'dimensions',
resizing: true,
setAttributes: true,
dimensions: {
width: Math.max(dimensions.width, rect.width),
height: Math.max(dimensions.height, rect.height),
width: Math.max(dimensions.width, Math.round(expandedRect.width)),
height: Math.max(dimensions.height, Math.round(expandedRect.height)),
},
});
}
@@ -214,7 +232,8 @@ export function handleParentExpand(
export function updateNodeInternals<NodeType extends InternalNodeBase>(
updates: Map<string, InternalNodeUpdate>,
nodeLookup: Map<string, NodeType>,
nodeLookup: NodeLookup<NodeType>,
parentLookup: ParentLookup<NodeType>,
domNode: HTMLElement | null,
nodeOrigin?: NodeOrigin
): { changes: (NodeDimensionChange | NodePositionChange)[]; updatedInternals: boolean } {
@@ -229,7 +248,7 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
const style = window.getComputedStyle(viewportNode);
const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
// in this array we collect nodes, that might trigger changes (like expanding parent)
const triggerChangeNodes: NodeType[] = [];
const parentExpandChildren: ParentExpandChild[] = [];
updates.forEach((update) => {
const node = nodeLookup.get(update.id);
@@ -275,16 +294,20 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
dimensions,
});
if (newNode.expandParent) {
triggerChangeNodes.push(newNode);
if (newNode.expandParent && newNode.parentId) {
parentExpandChildren.push({
id: newNode.id,
parentId: newNode.parentId,
rect: nodeToRect(newNode, newNode.origin || nodeOrigin),
});
}
}
}
}
});
if (triggerChangeNodes.length > 0) {
const parentExpandChanges = handleParentExpand(triggerChangeNodes, nodeLookup);
if (parentExpandChildren.length > 0) {
const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
changes.push(...parentExpandChanges);
}
packages/system/src/utils/types.ts
+4
View File
@@ -1 +1,5 @@
import { Rect } from '../types';
export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
export type ParentExpandChild = { id: string; parentId: string; rect: Rect };
packages/system/src/xydrag/XYDrag.ts
+27 -27
View File
@@ -7,10 +7,10 @@ import {
getPointerPosition,
calculateNodePosition,
snapPosition,
getNodesBounds,
getInternalNodesBounds,
rectToBox,
} from '../utils';
import { getDragItems, getEventHandlerParams, hasSelector, wrapSelectionDragFunc } from './utils';
import { getDragItems, getEventHandlerParams, hasSelector } from './utils';
import type {
NodeBase,
NodeDragItem,
@@ -29,7 +29,12 @@ import type {
InternalNodeBase,
} from '../types';
export type OnDrag = (event: MouseEvent, dragItems: NodeDragItem[], node: NodeBase, nodes: NodeBase[]) => void;
export type OnDrag = (
event: MouseEvent,
dragItems: Map<string, NodeDragItem>,
node: NodeBase,
nodes: NodeBase[]
) => void;
type StoreItems<OnNodeDrag> = {
nodes: NodeBase[];
@@ -89,7 +94,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
}: XYDragParams<OnNodeDrag>): XYDragInstance {
let lastPos: { x: number | null; y: number | null } = { x: null, y: null };
let autoPanId = 0;
let dragItems: NodeDragItem[] = [];
let dragItems = new Map<string, NodeDragItem>();
let autoPanStarted = false;
let mousePosition: XYPosition = { x: 0, y: 0 };
let containerBounds: DOMRect | null = null;
@@ -117,13 +122,13 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
let hasChange = false;
let nodesBox: Box = { x: 0, y: 0, x2: 0, y2: 0 };
if (dragItems.length > 1 && nodeExtent) {
const rect = getNodesBounds(dragItems as unknown as NodeBase[], { nodeOrigin });
if (dragItems.size > 1 && nodeExtent) {
const rect = getInternalNodesBounds(dragItems, { nodeOrigin });
nodesBox = rectToBox(rect);
}
dragItems = dragItems.map((n) => {
let nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
for (const [id, dragItem] of dragItems) {
let nextPosition = { x: x - dragItem.distance.x, y: y - dragItem.distance.y };
if (snapToGrid) {
nextPosition = snapPosition(nextPosition, snapGrid);
@@ -136,13 +141,13 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
[nodeExtent[1][0], nodeExtent[1][1]],
];
if (dragItems.length > 1 && nodeExtent && !n.extent) {
const { positionAbsolute } = n.internals;
if (dragItems.size > 1 && nodeExtent && !dragItem.extent) {
const { positionAbsolute } = dragItem.internals;
const x1 = positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
const x2 = positionAbsolute.x + (n.measured?.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
const x2 = positionAbsolute.x + dragItem.measured.width - nodesBox.x2 + nodeExtent[1][0];
const y1 = positionAbsolute.y - nodesBox.y + nodeExtent[0][1];
const y2 = positionAbsolute.y + (n.measured?.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
const y2 = positionAbsolute.y + dragItem.measured.height - nodesBox.y2 + nodeExtent[1][1];
adjustedNodeExtent = [
[x1, y1],
@@ -151,7 +156,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
}
const { position, positionAbsolute } = calculateNodePosition({
nodeId: n.id,
nodeId: id,
nextPosition,
nodeLookup,
nodeExtent: adjustedNodeExtent,
@@ -160,13 +165,11 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
});
// we want to make sure that we only fire a change event when there is a change
hasChange = hasChange || n.position.x !== position.x || n.position.y !== position.y;
hasChange = hasChange || dragItem.position.x !== position.x || dragItem.position.y !== position.y;
n.position = position;
n.internals.positionAbsolute = positionAbsolute;
return n;
});
dragItem.position = position;
dragItem.internals.positionAbsolute = positionAbsolute;
}
if (!hasChange) {
return;
@@ -185,8 +188,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
onNodeDrag?.(dragEvent, currentNode, currentNodes);
if (!nodeId) {
const _onSelectionDrag = wrapSelectionDragFunc(onSelectionDrag);
_onSelectionDrag(dragEvent, currentNode, currentNodes);
onSelectionDrag?.(dragEvent, currentNodes);
}
}
}
@@ -242,7 +244,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
lastPos = pointerPos;
dragItems = getDragItems(nodeLookup, nodesDraggable, pointerPos, nodeId);
if (dragItems.length > 0 && (onDragStart || onNodeDragStart || (!nodeId && onSelectionDragStart))) {
if (dragItems.size > 0 && (onDragStart || onNodeDragStart || (!nodeId && onSelectionDragStart))) {
const [currentNode, currentNodes] = getEventHandlerParams({
nodeId,
dragItems,
@@ -253,8 +255,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
onNodeDragStart?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
if (!nodeId) {
const _onSelectionDragStart = wrapSelectionDragFunc(onSelectionDragStart);
_onSelectionDragStart(event.sourceEvent as MouseEvent, currentNode, currentNodes);
onSelectionDragStart?.(event.sourceEvent as MouseEvent, currentNodes);
}
}
}
@@ -308,7 +309,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
dragStarted = false;
cancelAnimationFrame(autoPanId);
if (dragItems.length > 0) {
if (dragItems.size > 0) {
const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
updateNodePositions(dragItems, false);
@@ -324,8 +325,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
onNodeDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
if (!nodeId) {
const _onSelectionDragStop = wrapSelectionDragFunc(onSelectionDragStop);
_onSelectionDragStop(event.sourceEvent as MouseEvent, currentNode, currentNodes);
onSelectionDragStop?.(event.sourceEvent as MouseEvent, currentNodes);
}
}
}
packages/system/src/xydrag/utils.ts
+49 -38
View File
@@ -1,9 +1,5 @@
import { type NodeDragItem, type XYPosition, InternalNodeBase, NodeBase, NodeLookup } from '../types';
export function wrapSelectionDragFunc(selectionFunc?: (event: MouseEvent, nodes: NodeBase[]) => void) {
return (event: MouseEvent, _: NodeBase, nodes: NodeBase[]) => selectionFunc?.(event, nodes);
}
export function isParentSelected<NodeType extends NodeBase>(node: NodeType, nodeLookup: NodeLookup): boolean {
if (!node.parentId) {
return false;
@@ -40,8 +36,8 @@ export function getDragItems<NodeType extends NodeBase>(
nodesDraggable: boolean,
mousePos: XYPosition,
nodeId?: string
): NodeDragItem[] {
const dragItems: NodeDragItem[] = [];
): Map<string, NodeDragItem> {
const dragItems = new Map<string, NodeDragItem>();
for (const [id, node] of nodeLookup) {
if (
@@ -49,29 +45,32 @@ export function getDragItems<NodeType extends NodeBase>(
(!node.parentId || !isParentSelected(node, nodeLookup)) &&
(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'))
) {
const internalNode = nodeLookup.get(id)!;
const internalNode = nodeLookup.get(id);
dragItems.push({
id: internalNode.id,
position: internalNode.position || { x: 0, y: 0 },
distance: {
x: mousePos.x - internalNode.internals.positionAbsolute.x,
y: mousePos.y - internalNode.internals.positionAbsolute.y,
},
extent: internalNode.extent,
parentId: internalNode.parentId,
origin: internalNode.origin,
expandParent: internalNode.expandParent,
internals: {
positionAbsolute: internalNode.internals.positionAbsolute || { x: 0, y: 0 },
},
measured: {
width: internalNode.measured.width || 0,
height: internalNode.measured.height || 0,
},
});
if (internalNode) {
dragItems.set(id, {
id,
position: internalNode.position || { x: 0, y: 0 },
distance: {
x: mousePos.x - internalNode.internals.positionAbsolute.x,
y: mousePos.y - internalNode.internals.positionAbsolute.y,
},
extent: internalNode.extent,
parentId: internalNode.parentId,
origin: internalNode.origin,
expandParent: internalNode.expandParent,
internals: {
positionAbsolute: internalNode.internals.positionAbsolute || { x: 0, y: 0 },
},
measured: {
width: internalNode.measured.width ?? 0,
height: internalNode.measured.height ?? 0,
},
});
}
}
}
return dragItems;
}
@@ -84,20 +83,32 @@ export function getEventHandlerParams<NodeType extends NodeBase>({
nodeLookup,
}: {
nodeId?: string;
dragItems: NodeDragItem[];
dragItems: Map<string, NodeDragItem>;
nodeLookup: Map<string, NodeType>;
}): [NodeType, NodeType[]] {
const nodesFromDragItems: NodeType[] = dragItems.map((n) => {
const node = nodeLookup.get(n.id)!;
const nodesFromDragItems: NodeType[] = [];
return {
for (const [id, dragItem] of dragItems) {
const node = nodeLookup.get(id);
if (node) {
nodesFromDragItems.push({
...node,
position: dragItem.position,
});
}
}
if (!nodeId) {
return [nodesFromDragItems[0], nodesFromDragItems];
}
const node = nodeLookup.get(nodeId)!;
return [
{
...node,
position: n.position,
measured: {
...n.measured,
},
};
});
return [nodeId ? nodesFromDragItems.find((n) => n.id === nodeId)! : nodesFromDragItems[0], nodesFromDragItems];
position: dragItems.get(nodeId)?.position || node.position,
},
nodesFromDragItems,
];
}
packages/system/src/xyminimap/index.ts
+21 -3
View File
@@ -54,17 +54,34 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi
panZoom.scaleTo(nextZoom);
};
let panStart = [0, 0];
const panStartHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
if (event.sourceEvent.type === 'mousedown' || event.sourceEvent.type === 'touchstart') {
panStart = [
event.sourceEvent.clientX ?? event.sourceEvent.touches[0].clientX,
event.sourceEvent.clientY ?? event.sourceEvent.touches[0].clientY,
];
}
};
const panHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
const transform = getTransform();
if (event.sourceEvent.type !== 'mousemove' || !panZoom) {
if ((event.sourceEvent.type !== 'mousemove' && event.sourceEvent.type !== 'touchmove') || !panZoom) {
return;
}
const panCurrent = [
event.sourceEvent.clientX ?? event.sourceEvent.touches[0].clientX,
event.sourceEvent.clientY ?? event.sourceEvent.touches[0].clientY,
];
const panDelta = [panCurrent[0] - panStart[0], panCurrent[1] - panStart[1]];
panStart = panCurrent;
const moveScale = getViewScale() * Math.max(transform[2], Math.log(transform[2])) * (inversePan ? -1 : 1);
const position = {
x: transform[0] - event.sourceEvent.movementX * moveScale,
y: transform[1] - event.sourceEvent.movementY * moveScale,
x: transform[0] - panDelta[0] * moveScale,
y: transform[1] - panDelta[1] * moveScale,
};
const extent: CoordinateExtent = [
[0, 0],
@@ -83,6 +100,7 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi
};
const zoomAndPanHandler = zoom()
.on('start', panStartHandler)
// @ts-ignore
.on('zoom', pannable ? panHandler : null)
// @ts-ignore
packages/system/src/xyresizer/XYResizer.ts
+139 -145
View File
@@ -15,19 +15,13 @@ const initStartValues = {
aspectRatio: 1,
};
const initChange = {
x: 0,
y: 0,
width: 0,
height: 0,
isXPosChange: false,
isYPosChange: false,
isWidthChange: false,
isHeightChange: false,
export type XYResizerChange = {
x?: number;
y?: number;
width?: number;
height?: number;
};
export type XYResizerChange = typeof initChange;
export type XYResizerChildChange = {
id: string;
position: XYPosition;
@@ -89,7 +83,7 @@ function nodeToChildExtent(child: NodeBase, parent: NodeBase, nodeOrigin: NodeOr
];
}
export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResizerParams): XYResizerInstance {
export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: XYResizerParams): XYResizerInstance {
const selection = select(domNode);
function update({
@@ -117,161 +111,161 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = getStoreItems();
node = nodeLookup.get(nodeId);
if (node) {
const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
if (!node) {
return;
}
prevValues = {
width: node.measured?.width ?? 0,
height: node.measured?.height ?? 0,
x: node.position.x ?? 0,
y: node.position.y ?? 0,
};
const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
startValues = {
...prevValues,
pointerX: xSnapped,
pointerY: ySnapped,
aspectRatio: prevValues.width / prevValues.height,
};
prevValues = {
width: node.measured?.width ?? 0,
height: node.measured?.height ?? 0,
x: node.position.x ?? 0,
y: node.position.y ?? 0,
};
parentNode = undefined;
if (node.extent === 'parent' || node.expandParent) {
parentNode = nodeLookup.get(node.parentId!);
if (parentNode && node.extent === 'parent') {
parentExtent = nodeToParentExtent(parentNode);
}
startValues = {
...prevValues,
pointerX: xSnapped,
pointerY: ySnapped,
aspectRatio: prevValues.width / prevValues.height,
};
parentNode = undefined;
if (node.extent === 'parent' || node.expandParent) {
parentNode = nodeLookup.get(node.parentId!);
if (parentNode && node.extent === 'parent') {
parentExtent = nodeToParentExtent(parentNode);
}
}
// Collect all child nodes to correct their relative positions when top/left changes
// Determine largest minimal extent the parent node is allowed to resize to
childNodes = [];
childExtent = undefined;
// Collect all child nodes to correct their relative positions when top/left changes
// Determine largest minimal extent the parent node is allowed to resize to
childNodes = [];
childExtent = undefined;
for (const [childId, child] of nodeLookup) {
if (child.parentId === nodeId) {
childNodes.push({
id: childId,
position: { ...child.position },
extent: child.extent,
});
for (const [childId, child] of nodeLookup) {
if (child.parentId === nodeId) {
childNodes.push({
id: childId,
position: { ...child.position },
extent: child.extent,
});
if (child.extent === 'parent' || child.expandParent) {
const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin);
if (child.extent === 'parent' || child.expandParent) {
const extent = nodeToChildExtent(child, node!, child.origin ?? nodeOrigin);
if (childExtent) {
childExtent = [
[Math.min(extent[0][0], childExtent[0][0]), Math.min(extent[0][1], childExtent[0][1])],
[Math.max(extent[1][0], childExtent[1][0]), Math.max(extent[1][1], childExtent[1][1])],
];
} else {
childExtent = extent;
}
if (childExtent) {
childExtent = [
[Math.min(extent[0][0], childExtent[0][0]), Math.min(extent[0][1], childExtent[0][1])],
[Math.max(extent[1][0], childExtent[1][0]), Math.max(extent[1][1], childExtent[1][1])],
];
} else {
childExtent = extent;
}
}
}
onResizeStart?.(event, { ...prevValues });
}
onResizeStart?.(event, { ...prevValues });
})
.on('drag', (event: ResizeDragEvent) => {
const { transform, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems();
const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
const childChanges: XYResizerChildChange[] = [];
if (node) {
const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
const change = { ...initChange };
const nodeOrigin = node.origin ?? storeNodeOrigin;
const { width, height, x, y } = getDimensionsAfterResize(
startValues,
controlDirection,
pointerPosition,
boundaries,
keepAspectRatio,
nodeOrigin,
parentExtent,
childExtent
);
const isWidthChange = width !== prevWidth;
const isHeightChange = height !== prevHeight;
const isXPosChange = x !== prevX && isWidthChange;
const isYPosChange = y !== prevY && isHeightChange;
if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) {
change.isXPosChange = isXPosChange;
change.isYPosChange = isYPosChange;
change.x = isXPosChange ? x : prevX;
change.y = isYPosChange ? y : prevY;
prevValues.x = change.x;
prevValues.y = change.y;
// Fix expandParent when resizing from top/left
if (parentNode && node.expandParent) {
if (change.x < 0) {
prevValues.x = 0;
startValues.x = startValues.x - change.x;
}
if (change.y < 0) {
prevValues.y = 0;
startValues.y = startValues.y - change.y;
}
}
if (childNodes.length > 0) {
const xChange = x - prevX;
const yChange = y - prevY;
for (const childNode of childNodes) {
childNode.position = {
x: childNode.position.x - xChange + nodeOrigin[0] * (width - prevWidth),
y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight),
};
childChanges.push(childNode);
}
}
}
if (isWidthChange || isHeightChange) {
change.isWidthChange = isWidthChange;
change.isHeightChange = isHeightChange;
change.width = width;
change.height = height;
prevValues.width = change.width;
prevValues.height = change.height;
}
if (!change.isXPosChange && !change.isYPosChange && !isWidthChange && !isHeightChange) {
return;
}
const direction = getResizeDirection({
width: prevValues.width,
prevWidth,
height: prevValues.height,
prevHeight,
affectsX: controlDirection.affectsX,
affectsY: controlDirection.affectsY,
});
const nextValues = { ...prevValues, direction };
const callResize = shouldResize?.(event, nextValues);
if (callResize === false) {
return;
}
onResize?.(event, nextValues);
onChange(change, childChanges);
if (!node) {
return;
}
const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
const change: XYResizerChange = {};
const nodeOrigin = node.origin ?? storeNodeOrigin;
const { width, height, x, y } = getDimensionsAfterResize(
startValues,
controlDirection,
pointerPosition,
boundaries,
keepAspectRatio,
nodeOrigin,
parentExtent,
childExtent
);
const isWidthChange = width !== prevWidth;
const isHeightChange = height !== prevHeight;
const isXPosChange = x !== prevX && isWidthChange;
const isYPosChange = y !== prevY && isHeightChange;
if (!isXPosChange && !isYPosChange && !isWidthChange && !isHeightChange) {
return;
}
if (isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) {
change.x = isXPosChange ? x : prevValues.x;
change.y = isYPosChange ? y : prevValues.y;
prevValues.x = change.x;
prevValues.y = change.y;
// Fix expandParent when resizing from top/left
if (parentNode && node.expandParent) {
if (change.x && change.x < 0) {
prevValues.x = 0;
startValues.x = startValues.x - change.x;
}
if (change.y && change.y < 0) {
prevValues.y = 0;
startValues.y = startValues.y - change.y;
}
}
if (childNodes.length > 0) {
const xChange = x - prevX;
const yChange = y - prevY;
for (const childNode of childNodes) {
childNode.position = {
x: childNode.position.x - xChange + nodeOrigin[0] * (width - prevWidth),
y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight),
};
childChanges.push(childNode);
}
}
}
if (isWidthChange || isHeightChange) {
change.width = isWidthChange ? width : prevValues.width;
change.height = isHeightChange ? height : prevValues.height;
prevValues.width = change.width;
prevValues.height = change.height;
}
const direction = getResizeDirection({
width: prevValues.width,
prevWidth,
height: prevValues.height,
prevHeight,
affectsX: controlDirection.affectsX,
affectsY: controlDirection.affectsY,
});
const nextValues = { ...prevValues, direction };
const callResize = shouldResize?.(event, nextValues);
if (callResize === false) {
return;
}
onResize?.(event, nextValues);
onChange(change, childChanges);
})
.on('end', (event: ResizeDragEvent) => {
onResizeEnd?.(event, { ...prevValues });
onEnd?.();
});
selection.call(dragHandler);
}
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'}