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
packages/react/src/hooks/useDrag.ts
+1 -8
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({
packages/react/src/hooks/useGlobalKeyHandler.ts
+5 -4
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]);
packages/react/src/hooks/useNodes.ts
+1 -1
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);
packages/react/src/hooks/useNodesInitialized.ts
+2 -3
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);
};
packages/react/src/hooks/useReactFlow.ts
+11 -21
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;
}
packages/react/src/hooks/useUpdateNodePositions.ts
+1 -3
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'))
);
packages/react/src/hooks/useViewportHelper.ts
+2 -2
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,
packages/react/src/hooks/useVisibleEdges.ts
+3 -3
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]
),
packages/react/src/hooks/useVisibleNodes.ts
+2 -2
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]
)
);