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

refactor(react): use array for nodeInternals, rename to nodes

Browse Source
This commit is contained in:
moklick
2023-06-12 16:56:02 +02:00
parent cefdfd4e70
commit c6501aff62
33 changed files with 146 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/react/src/additional-components/MiniMap/MiniMap.tsx
View File

@@ -16,7 +16,6 @@ const defaultWidth = 200;
const defaultHeight = 150;
const selector = (s: ReactFlowState) => {
const nodes = s.getNodes();
const viewBB: Rect = {
x: -s.transform[0] / s.transform[2],
y: -s.transform[1] / s.transform[2],
@@ -26,7 +25,7 @@ const selector = (s: ReactFlowState) => {
return {
viewBB,
boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes, s.nodeOrigin), viewBB) : viewBB,
boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(s.nodes, s.nodeOrigin), viewBB) : viewBB,
rfId: s.rfId,
nodeOrigin: s.nodeOrigin,
panZoom: s.panZoom,
@@ -118,7 +117,7 @@ function MiniMap({
const onSvgNodeClick = onNodeClick
? useCallback((event: MouseEvent, nodeId: string) => {
const node = store.getState().nodeInternals.get(nodeId)!;
const node = store.getState().nodes.find((n) => n.id === nodeId)!;
onNodeClick(event, node);
}, [])
: undefined;

2
packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
View File

@@ -12,7 +12,7 @@ import type { MiniMapNodes, GetMiniMapNodeAttribute } from './types';
declare const window: any;
const selector = (s: ReactFlowState) => s.nodeOrigin;
const selectorNodes = (s: ReactFlowState) => s.getNodes().filter((node) => !node.hidden && node.width && node.height);
const selectorNodes = (s: ReactFlowState) => s.nodes.filter((node) => !node.hidden && node.width && node.height);
const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
function MiniMapNodes({

8
packages/react/src/additional-components/NodeResizer/ResizeControl.tsx
View File

@@ -65,8 +65,8 @@ function ResizeControl({
const dragHandler = drag<HTMLDivElement, unknown>()
.on('start', (event: ResizeDragEvent) => {
const { nodeInternals, transform, snapGrid, snapToGrid } = store.getState();
const node = nodeInternals.get(id);
const { nodes, transform, snapGrid, snapToGrid } = store.getState();
const node = nodes.find((n) => n.id === id);
const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
prevValues.current = {
@@ -86,9 +86,9 @@ function ResizeControl({
onResizeStart?.(event, { ...prevValues.current });
})
.on('drag', (event: ResizeDragEvent) => {
const { nodeInternals, transform, snapGrid, snapToGrid, triggerNodeChanges } = store.getState();
const { nodes, transform, snapGrid, snapToGrid, triggerNodeChanges } = store.getState();
const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
const node = nodeInternals.get(id);
const node = nodes.find((n) => n.id === id);
if (node) {
const changes: NodeChange[] = [];

4
packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
View File

@@ -24,7 +24,7 @@ const nodesEqualityFn = (a: Node[], b: Node[]) => {
const storeSelector = (state: ReactFlowState) => ({
transform: state.transform,
nodeOrigin: state.nodeOrigin,
selectedNodesCount: state.getNodes().filter((node) => node.selected).length,
selectedNodesCount: state.nodes.filter((node) => node.selected).length,
});
function getTransform(nodeRect: Rect, transform: Transform, position: Position, offset: number, align: Align): string {
@@ -87,7 +87,7 @@ function NodeToolbar({
const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ''];
return nodeIds.reduce<Node[]>((acc, id) => {
const node = state.nodeInternals.get(id);
const node = state.nodes.find((n) => n.id === id);
if (node) {
acc.push(node);
}

2
packages/react/src/components/ConnectionLine/index.tsx
View File

@@ -43,7 +43,7 @@ const ConnectionLine = ({
const { fromNode, handleId, toX, toY, connectionMode } = useStore(
useCallback(
(s: ReactFlowStore) => ({
fromNode: s.nodeInternals.get(nodeId),
fromNode: s.nodes.find((n) => n.id === nodeId),
handleId: s.connectionStartHandle?.handleId,
toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],

7
packages/react/src/components/Edges/wrapEdge.tsx
View File

@@ -54,8 +54,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
const [updating, setUpdating] = useState<boolean>(false);
const store = useStoreApi();
const edgePosition = useStore((state) => {
const sourceNode = state.nodeInternals.get(source);
const targetNode = state.nodeInternals.get(target);
const sourceNode = state.nodes.find((n) => n.id === source);
const targetNode = state.nodes.find((n) => n.id === target);
if (!sourceNode || !targetNode) {
return null;
@@ -118,7 +118,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
onConnectStart,
onConnectEnd,
cancelConnection,
getNodes,
nodes,
panBy,
updateConnection,
} = store.getState();
@@ -128,7 +128,6 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
const isTarget = isSourceHandle;
const edge = edges.find((e) => e.id === id)!;
const nodes = getNodes();
setUpdating(true);
onEdgeUpdateStart?.(event, edge, handleType);

2
packages/react/src/components/Handle/index.tsx
View File

@@ -106,7 +106,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
connectionMode: currentStore.connectionMode,
connectionRadius: currentStore.connectionRadius,
domNode: currentStore.domNode,
nodes: currentStore.getNodes(),
nodes: currentStore.nodes,
lib: currentStore.lib,
isTarget,
handleId,

6
packages/react/src/components/Nodes/utils.ts
View File

@@ -11,7 +11,7 @@ export function getMouseHandler(
return handler === undefined
? handler
: (event: MouseEvent) => {
const node = getState().nodeInternals.get(id)!;
const node = getState().nodes.find((n) => n.id === id)!;
handler(event, { ...node });
};
}
@@ -34,8 +34,8 @@ export function handleNodeClick({
unselect?: boolean;
nodeRef?: RefObject<HTMLDivElement>;
}) {
const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeInternals } = store.getState();
const node = nodeInternals.get(id)!;
const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodes } = store.getState();
const node = nodes.find((n) => n.id === id)!;
store.setState({ nodesSelectionActive: false });

2
packages/react/src/components/Nodes/wrapNode.tsx
View File

@@ -78,7 +78,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
}
if (onClick) {
const node = store.getState().nodeInternals.get(id)!;
const node = store.getState().nodes.find((n) => n.id === id)!;
onClick(event, { ...node });
}
};

7
packages/react/src/components/NodesSelection/index.tsx
View File

@@ -21,7 +21,7 @@ export type NodesSelectionProps = {
};
const selector = (s: ReactFlowState) => {
const selectedNodes = s.getNodes().filter((n) => n.selected);
const selectedNodes = s.nodes.filter((n) => n.selected);
const { width, height, x, y } = getRectOfNodes(selectedNodes, s.nodeOrigin);
return {
@@ -57,10 +57,7 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
const onContextMenu = onSelectionContextMenu
? (event: MouseEvent) => {
const selectedNodes = store
.getState()
.getNodes()
.filter((n) => n.selected);
const selectedNodes = store.getState().nodes.filter((n) => n.selected);
onSelectionContextMenu(event, selectedNodes);
}
: undefined;

2
packages/react/src/components/SelectionListener/index.tsx
View File

@@ -9,7 +9,7 @@ type SelectionListenerProps = {
};
const selector = (s: ReactFlowState) => ({
selectedNodes: s.getNodes().filter((n) => n.selected),
selectedNodes: s.nodes.filter((n) => n.selected),
selectedEdges: s.edges.filter((e) => e.selected),
});

4
packages/react/src/container/Pane/index.tsx
View File

@@ -129,8 +129,7 @@ const Pane = memo(
};
const onMouseMove = (event: ReactMouseEvent): void => {
const { userSelectionRect, edges, transform, onNodesChange, onEdgesChange, nodeOrigin, getNodes } =
store.getState();
const { userSelectionRect, edges, transform, nodeOrigin, nodes, onNodesChange, onEdgesChange } = store.getState();
if (!isSelecting || !containerBounds.current || !userSelectionRect) {
return;
}
@@ -149,7 +148,6 @@ const Pane = memo(
height: Math.abs(mousePos.y - startY),
};
const nodes = getNodes();
const selectedNodes = getNodesInside<Node>(
nodes,
nextUserSelectRect,

9
packages/react/src/hooks/useDrag.ts
View File

@@ -22,14 +22,7 @@ function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, n
if (nodeRef?.current) {
xyDrag.current = XYDrag({
domNode: nodeRef.current,
getStoreItems: () => {
const currentStore = store.getState();
return {
nodes: currentStore.getNodes(),
...store.getState(),
};
},
getStoreItems: () => store.getState(),
onNodeClick: () => {
if (nodeId) {
handleNodeClick({

9
packages/react/src/hooks/useGlobalKeyHandler.ts
View File

@@ -4,6 +4,9 @@ import type { KeyCode } from '@xyflow/system';
import { useStoreApi } from '../hooks/useStore';
import useKeyPress from './useKeyPress';
import useReactFlow from './useReactFlow';
import { Edge, Node } from '../types';
const getSelected = (item: Node | Edge) => item.selected;
export default ({
deleteKeyCode,
@@ -20,10 +23,8 @@ export default ({
useEffect(() => {
if (deleteKeyPressed) {
const { edges, getNodes } = store.getState();
const selectedNodes = getNodes().filter((node) => node.selected);
const selectedEdges = edges.filter((edge) => edge.selected);
deleteElements({ nodes: selectedNodes, edges: selectedEdges });
const { edges, nodes } = store.getState();
deleteElements({ nodes: nodes.filter(getSelected), edges: edges.filter(getSelected) });
store.setState({ nodesSelectionActive: false });
}
}, [deleteKeyPressed]);

2
packages/react/src/hooks/useNodes.ts
View File

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

5
packages/react/src/hooks/useNodesInitialized.ts
View File

@@ -8,12 +8,11 @@ export type UseNodesInitializedOptions = {
};
const selector = (options: UseNodesInitializedOptions) => (s: ReactFlowState) => {
if (s.nodeInternals.size === 0) {
if (s.nodes.length === 0) {
return false;
}
return s
.getNodes()
return s.nodes
.filter((n) => (options.includeHiddenNodes ? true : !n.hidden))
.every((n) => n[internalsSymbol]?.handleBounds !== undefined);
};

32
packages/react/src/hooks/useReactFlow.ts
View File

@@ -23,14 +23,11 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
const store = useStoreApi();
const getNodes = useCallback<Instance.GetNodes<NodeData>>(() => {
return store
.getState()
.getNodes()
.map((n) => ({ ...n }));
return store.getState().nodes.map((n) => ({ ...n }));
}, []);
const getNode = useCallback<Instance.GetNode<NodeData>>((id) => {
return store.getState().nodeInternals.get(id);
return store.getState().nodes.find((n) => n.id === id);
}, []);
const getEdges = useCallback<Instance.GetEdges<EdgeData>>(() => {
@@ -44,8 +41,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
}, []);
const setNodes = useCallback<Instance.SetNodes<NodeData>>((payload) => {
const { getNodes, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
const nodes = getNodes();
const { nodes, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
const nextNodes = typeof payload === 'function' ? payload(nodes) : payload;
if (hasDefaultNodes) {
@@ -76,10 +72,9 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
const addNodes = useCallback<Instance.AddNodes<NodeData>>((payload) => {
const nodes = Array.isArray(payload) ? payload : [payload];
const { getNodes, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
const { nodes: currentNodes, hasDefaultNodes, onNodesChange, setNodes } = store.getState();
if (hasDefaultNodes) {
const currentNodes = getNodes();
const nextNodes = [...currentNodes, ...nodes];
setNodes(nextNodes);
} else if (onNodesChange) {
@@ -101,10 +96,10 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
}, []);
const toObject = useCallback<Instance.ToObject<NodeData, EdgeData>>(() => {
const { getNodes, edges = [], transform } = store.getState();
const { nodes = [], edges = [], transform } = store.getState();
const [x, y, zoom] = transform;
return {
nodes: getNodes().map((n) => ({ ...n })),
nodes: nodes.map((n) => ({ ...n })),
edges: edges.map((e) => ({ ...e })),
viewport: {
x,
@@ -116,8 +111,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
const deleteElements = useCallback<Instance.DeleteElements>(({ nodes: nodesDeleted, edges: edgesDeleted }) => {
const {
nodeInternals,
getNodes,
nodes,
edges,
hasDefaultNodes,
hasDefaultEdges,
@@ -129,7 +123,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
const { matchingNodes, matchingEdges } = getElementsToRemove<Node, Edge>({
nodesToRemove: nodesDeleted || [],
edgesToRemove: edgesDeleted || [],
nodes: getNodes(),
nodes,
edges,
});
@@ -142,12 +136,8 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
}
if (hasDefaultNodes) {
matchingNodes.forEach((node) => {
nodeInternals.delete(node.id);
});
store.setState({
nodeInternals: new Map(nodeInternals),
nodes: nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id)),
});
}
}
@@ -181,7 +171,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
nodeOrRect: (Partial<Node<NodeData>> & { id: Node['id'] }) | Rect
): [Rect | null, Node<NodeData> | null | undefined, boolean] => {
const isRect = isRectObject(nodeOrRect);
const node = isRect ? null : store.getState().nodeInternals.get(nodeOrRect.id);
const node = isRect ? null : store.getState().nodes.find((n) => n.id === nodeOrRect.id);
if (!isRect && !node) {
[null, null, isRect];
@@ -202,7 +192,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
return [];
}
return (nodes || store.getState().getNodes()).filter((n) => {
return (nodes || store.getState().nodes).filter((n) => {
if (!isRect && (n.id === node!.id || !n.positionAbsolute)) {
return false;
}

4
packages/react/src/hooks/useUpdateNodePositions.ts
View File

@@ -7,9 +7,7 @@ function useUpdateNodePositions() {
const store = useStoreApi();
const updatePositions = useCallback((params: { x: number; y: number; isShiftPressed: boolean }) => {
const { nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid, onError, nodesDraggable } =
store.getState();
const nodes = getNodes();
const { nodeExtent, updateNodePositions, nodes, snapToGrid, snapGrid, onError, nodesDraggable } = store.getState();
const selectedNodes = nodes.filter(
(n) => n.selected && (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'))
);

4
packages/react/src/hooks/useViewportHelper.ts
View File

@@ -36,12 +36,12 @@ const useViewportHelper = (): ViewportHelperFunctions => {
return { x, y, zoom };
},
fitView: (options) => {
const { getNodes, width, height, nodeOrigin, minZoom, maxZoom, panZoom } = store.getState();
const { nodes, width, height, nodeOrigin, minZoom, maxZoom, panZoom } = store.getState();
return panZoom
? fitView(
{
nodes: getNodes(),
nodes,
width,
height,
nodeOrigin,

6
packages/react/src/hooks/useVisibleEdges.ts
View File

@@ -12,8 +12,8 @@ function useVisibleEdges(onlyRenderVisible: boolean, elevateEdgesOnSelect: boole
const visibleEdges =
onlyRenderVisible && s.width && s.height
? s.edges.filter((e) => {
const sourceNode = s.nodeInternals.get(e.source);
const targetNode = s.nodeInternals.get(e.target);
const sourceNode = s.nodes.find((n) => n.id === e.source);
const targetNode = s.nodes.find((n) => n.id === e.target);
return (
sourceNode &&
@@ -29,7 +29,7 @@ function useVisibleEdges(onlyRenderVisible: boolean, elevateEdgesOnSelect: boole
})
: s.edges;
return groupEdgesByZLevel(visibleEdges, s.nodeInternals, elevateEdgesOnSelect);
return groupEdgesByZLevel(visibleEdges, s.nodes, elevateEdgesOnSelect);
},
[onlyRenderVisible, elevateEdgesOnSelect]
),

4
packages/react/src/hooks/useVisibleNodes.ts
View File

@@ -9,8 +9,8 @@ function useVisibleNodes(onlyRenderVisible: boolean) {
useCallback(
(s: ReactFlowState) =>
onlyRenderVisible
? getNodesInside<Node>(s.getNodes(), { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
: s.getNodes(),
? getNodesInside<Node>(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
: s.nodes,
[onlyRenderVisible]
)
);

89
packages/react/src/store/index.ts
View File

@@ -26,11 +26,11 @@ const createRFStore = () =>
createStore<ReactFlowState>((set, get) => ({
...initialState,
setNodes: (nodes: Node[]) => {
const { nodeInternals, nodeOrigin, elevateNodesOnSelect } = get();
set({ nodeInternals: createNodeInternals(nodes, nodeInternals, nodeOrigin, elevateNodesOnSelect) });
const { nodes: storeNodes, nodeOrigin, elevateNodesOnSelect } = get();
set({ nodes: createNodeInternals(nodes, storeNodes, nodeOrigin, elevateNodesOnSelect) });
},
getNodes: () => {
return Array.from(get().nodeInternals.values());
return get().nodes;
},
setEdges: (edges: Edge[]) => {
const { defaultEdgeOptions = {} } = get();
@@ -40,17 +40,17 @@ const createRFStore = () =>
const hasDefaultNodes = typeof nodes !== 'undefined';
const hasDefaultEdges = typeof edges !== 'undefined';
const nodeInternals = hasDefaultNodes
? createNodeInternals(nodes, new Map(), get().nodeOrigin, get().elevateNodesOnSelect)
: new Map();
const nextNodes = hasDefaultNodes
? createNodeInternals(nodes, [], get().nodeOrigin, get().elevateNodesOnSelect)
: [];
const nextEdges = hasDefaultEdges ? edges : [];
set({ nodeInternals, edges: nextEdges, hasDefaultNodes, hasDefaultEdges });
set({ nodes: nextNodes, edges: nextEdges, hasDefaultNodes, hasDefaultEdges });
},
updateNodeDimensions: (updates) => {
const {
onNodesChange,
nodeInternals,
nodes,
fitViewOnInit,
fitViewOnInitDone,
fitViewOnInitOptions,
@@ -70,11 +70,12 @@ const createRFStore = () =>
const style = window.getComputedStyle(viewportNode);
const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
const changes: NodeDimensionChange[] = [];
const changes: NodeDimensionChange[] = updates.reduce<NodeDimensionChange[]>((res, update) => {
const node = nodeInternals.get(update.id);
const nextNodes = nodes.map((node) => {
const update = updates.find((change) => change.id === node.id);
if (node) {
if (update) {
const dimensions = getDimensions(update.nodeElement);
const doUpdate = !!(
dimensions.width &&
@@ -83,8 +84,15 @@ const createRFStore = () =>
);
if (doUpdate) {
nodeInternals.set(node.id, {
changes.push({
id: node.id,
type: 'dimensions',
dimensions,
});
return {
...node,
...dimensions,
[internalsSymbol]: {
...node[internalsSymbol],
handleBounds: {
@@ -92,21 +100,14 @@ const createRFStore = () =>
target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin),
},
},
...dimensions,
});
res.push({
id: node.id,
type: 'dimensions',
dimensions,
});
};
}
}
return res;
}, []);
return node;
});
updateAbsoluteNodePositions(nodeInternals, nodeOrigin);
updateAbsoluteNodePositions(nextNodes, nodeOrigin);
const nextFitViewOnInitDone =
fitViewOnInitDone ||
@@ -115,7 +116,7 @@ const createRFStore = () =>
!!panZoom &&
fitView(
{
nodes: Array.from(nodeInternals.values()),
nodes: nextNodes,
width,
height,
panZoom,
@@ -125,7 +126,7 @@ const createRFStore = () =>
},
fitViewOnInitOptions
));
set({ nodeInternals: new Map(nodeInternals), fitViewOnInitDone: nextFitViewOnInitDone });
set({ nodes: nextNodes, fitViewOnInitDone: nextFitViewOnInitDone });
if (changes?.length > 0) {
onNodesChange?.(changes);
@@ -153,13 +154,13 @@ const createRFStore = () =>
},
triggerNodeChanges: (changes) => {
const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin, getNodes, elevateNodesOnSelect } = get();
const { onNodesChange, nodes, hasDefaultNodes, nodeOrigin, elevateNodesOnSelect } = get();
if (changes?.length) {
if (hasDefaultNodes) {
const nodes = applyNodeChanges(changes, getNodes());
const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin, elevateNodesOnSelect);
set({ nodeInternals: nextNodeInternals });
const updatedNodes = applyNodeChanges(changes, nodes);
const nextNodes = createNodeInternals(updatedNodes, nodes, nodeOrigin, elevateNodesOnSelect);
set({ nodes: nextNodes });
}
onNodesChange?.(changes);
@@ -167,14 +168,14 @@ const createRFStore = () =>
},
addSelectedNodes: (selectedNodeIds) => {
const { multiSelectionActive, edges, getNodes } = get();
const { multiSelectionActive, edges, nodes } = get();
let changedNodes: NodeSelectionChange[];
let changedEdges: EdgeSelectionChange[] | null = null;
if (multiSelectionActive) {
changedNodes = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true)) as NodeSelectionChange[];
} else {
changedNodes = getSelectionChanges(getNodes(), selectedNodeIds);
changedNodes = getSelectionChanges(nodes, selectedNodeIds);
changedEdges = getSelectionChanges(edges, []);
}
@@ -186,7 +187,7 @@ const createRFStore = () =>
});
},
addSelectedEdges: (selectedEdgeIds) => {
const { multiSelectionActive, edges, getNodes } = get();
const { multiSelectionActive, edges, nodes } = get();
let changedEdges: EdgeSelectionChange[];
let changedNodes: NodeSelectionChange[] | null = null;
@@ -194,7 +195,7 @@ const createRFStore = () =>
changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true)) as EdgeSelectionChange[];
} else {
changedEdges = getSelectionChanges(edges, selectedEdgeIds);
changedNodes = getSelectionChanges(getNodes(), []);
changedNodes = getSelectionChanges(nodes, []);
}
updateNodesAndEdgesSelections({
@@ -205,8 +206,8 @@ const createRFStore = () =>
});
},
unselectNodesAndEdges: ({ nodes, edges }: UnselectNodesAndEdgesParams = {}) => {
const { edges: storeEdges, getNodes } = get();
const nodesToUnselect = nodes ? nodes : getNodes();
const { edges: storeEdges, nodes: storeNodes } = get();
const nodesToUnselect = nodes ? nodes : storeNodes;
const edgesToUnselect = edges ? edges : storeEdges;
const changedNodes = nodesToUnselect.map((n) => {
@@ -242,8 +243,7 @@ const createRFStore = () =>
set({ translateExtent });
},
resetSelectedElements: () => {
const { edges, getNodes } = get();
const nodes = getNodes();
const { edges, nodes } = get();
const nodesToUnselect = nodes
.filter((e) => e.selected)
@@ -260,15 +260,18 @@ const createRFStore = () =>
});
},
setNodeExtent: (nodeExtent) => {
const { nodeInternals } = get();
nodeInternals.forEach((node) => {
node.positionAbsolute = clampPosition(node.position, nodeExtent);
});
const { nodes } = get();
set({
nodeExtent,
nodeInternals: new Map(nodeInternals),
nodes: nodes.map((node) => {
const positionAbsolute = clampPosition(node.position, nodeExtent);
return {
...node,
positionAbsolute,
};
}),
});
},
panBy: (delta): boolean => {

2
packages/react/src/store/initialState.ts
View File

@@ -7,7 +7,7 @@ const initialState: ReactFlowStore = {
width: 0,
height: 0,
transform: [0, 0, 1],
nodeInternals: new Map(),
nodes: [],
edges: [],
onNodesChange: null,
onEdgesChange: null,

82
packages/react/src/store/utils.ts
View File

@@ -7,25 +7,21 @@ import {
type NodeOrigin,
} from '@xyflow/system';
import type { Edge, EdgeSelectionChange, Node, NodeInternals, NodeSelectionChange, ReactFlowState } from '../types';
import type { Edge, EdgeSelectionChange, Node, NodeSelectionChange, ReactFlowState } from '../types';
type ParentNodes = Record<string, boolean>;
function calculateXYZPosition(
node: Node,
nodeInternals: NodeInternals,
result: XYZPosition,
nodeOrigin: NodeOrigin
): XYZPosition {
function calculateXYZPosition(node: Node, nodes: Node[], result: XYZPosition, nodeOrigin: NodeOrigin): XYZPosition {
if (!node.parentNode) {
return result;
}
const parentNode = nodeInternals.get(node.parentNode)!;
const parentNode = nodes.find((n) => n.id === node.parentNode)!;
const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
return calculateXYZPosition(
parentNode,
nodeInternals,
nodes,
{
x: (result.x ?? 0) + parentNodePosition.x,
y: (result.y ?? 0) + parentNodePosition.y,
@@ -35,21 +31,17 @@ function calculateXYZPosition(
);
}
export function updateAbsoluteNodePositions(
nodeInternals: NodeInternals,
nodeOrigin: NodeOrigin,
parentNodes?: ParentNodes
) {
nodeInternals.forEach((node) => {
if (node.parentNode && !nodeInternals.has(node.parentNode)) {
export function updateAbsoluteNodePositions(nodes: Node[], nodeOrigin: NodeOrigin, parentNodes?: ParentNodes) {
nodes.forEach((node) => {
if (node.parentNode && !nodes.find((n) => n.id === node.parentNode)) {
throw new Error(`Parent node ${node.parentNode} not found`);
}
if (node.parentNode || parentNodes?.[node.id]) {
const parentNode = node.parentNode ? nodeInternals.get(node.parentNode) : null;
const parentNode = node.parentNode ? nodes.find((n) => n.id === node.parentNode) : null;
const { x, y, z } = calculateXYZPosition(
node,
nodeInternals,
nodes,
{
...node.position,
z: node[internalsSymbol]?.z ?? 0,
@@ -73,19 +65,19 @@ export function updateAbsoluteNodePositions(
export function createNodeInternals(
nodes: Node[],
nodeInternals: NodeInternals,
storeNodes: Node[],
nodeOrigin: NodeOrigin,
elevateNodesOnSelect: boolean
): NodeInternals {
const nextNodeInternals = new Map<string, Node>();
): Node[] {
const nextNodes: Node[] = [];
const parentNodes: ParentNodes = {};
const selectedNodeZ: number = elevateNodesOnSelect ? 1000 : 0;
nodes.forEach((node) => {
const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
const currInternals = nodeInternals.get(node.id);
const currInternals = storeNodes.find((n) => n.id === node.id);
const internals: Node = {
const updatedNode: Node = {
width: currInternals?.width,
height: currInternals?.height,
...node,
@@ -96,11 +88,11 @@ export function createNodeInternals(
};
if (node.parentNode) {
internals.parentNode = node.parentNode;
updatedNode.parentNode = node.parentNode;
parentNodes[node.parentNode] = true;
}
Object.defineProperty(internals, internalsSymbol, {
Object.defineProperty(updatedNode, internalsSymbol, {
enumerable: false,
value: {
handleBounds: currInternals?.[internalsSymbol]?.handleBounds,
@@ -108,36 +100,26 @@ export function createNodeInternals(
},
});
nextNodeInternals.set(node.id, internals);
nextNodes.push(updatedNode);
});
updateAbsoluteNodePositions(nextNodeInternals, nodeOrigin, parentNodes);
updateAbsoluteNodePositions(nodes, nodeOrigin, parentNodes);
return nextNodeInternals;
return nextNodes;
}
export function handleControlledNodeSelectionChange(nodeChanges: NodeSelectionChange[], nodeInternals: NodeInternals) {
nodeChanges.forEach((change) => {
const node = nodeInternals.get(change.id);
if (node) {
nodeInternals.set(node.id, {
...node,
[internalsSymbol]: node[internalsSymbol],
selected: change.selected,
});
}
});
export function handleControlledSelectionChange<NodeOrEdge extends Node | Edge>(
changes: NodeSelectionChange[] | EdgeSelectionChange[],
items: NodeOrEdge[]
): NodeOrEdge[] {
return items.map((item) => {
const change = changes.find((change) => change.id === item.id);
return new Map(nodeInternals);
}
export function handleControlledEdgeSelectionChange(edgeChanges: EdgeSelectionChange[], edges: Edge[]) {
return edges.map((e) => {
const change = edgeChanges.find((change) => change.id === e.id);
if (change) {
e.selected = change.selected;
item.selected = change.selected;
}
return e;
return item;
});
}
@@ -149,11 +131,11 @@ type UpdateNodesAndEdgesParams = {
};
export function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get, set }: UpdateNodesAndEdgesParams) {
const { nodeInternals, edges, onNodesChange, onEdgesChange, hasDefaultNodes, hasDefaultEdges } = get();
const { nodes, edges, onNodesChange, onEdgesChange, hasDefaultNodes, hasDefaultEdges } = get();
if (changedNodes?.length) {
if (hasDefaultNodes) {
set({ nodeInternals: handleControlledNodeSelectionChange(changedNodes, nodeInternals) });
set({ nodes: handleControlledSelectionChange(changedNodes, nodes) });
}
onNodesChange?.(changedNodes);
@@ -161,7 +143,7 @@ export function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get,
if (changedEdges?.length) {
if (hasDefaultEdges) {
set({ edges: handleControlledEdgeSelectionChange(changedEdges, edges) });
set({ edges: handleControlledSelectionChange(changedEdges, edges) });
}
onEdgesChange?.(changedEdges);

2
packages/react/src/types/nodes.ts
View File

@@ -41,5 +41,3 @@ export type WrapNodeProps<NodeData = any> = Pick<
rfId: string;
disableKeyboardA11y: boolean;
};
export type NodeInternals = Map<string, Node>;

3
packages/react/src/types/store.ts
View File

@@ -32,7 +32,6 @@ import type {
NodeChange,
OnNodesChange,
OnEdgesChange,
NodeInternals,
DefaultEdgeOptions,
FitViewOptions,
OnNodesDelete,
@@ -46,7 +45,7 @@ export type ReactFlowStore = {
width: number;
height: number;
transform: Transform;
nodeInternals: NodeInternals;
nodes: Node[];
edges: Edge[];
onNodesChange: OnNodesChange | null;
onEdgesChange: OnEdgesChange | null;