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

refactor(store): use getNodes function

Browse Source
This commit is contained in:
moklick
2022-12-08 18:13:35 +01:00
parent 7c51a61f10
commit c51ae89eeb
18 changed files with 61 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/NodesSelection/index.tsx
+5 -2
View File
@@ -27,7 +27,7 @@ const selector = (s: ReactFlowState) => ({
});
const bboxSelector = (s: ReactFlowState) => {
const selectedNodes = Array.from(s.nodeInternals.values()).filter((n) => n.selected);
const selectedNodes = s.getNodes().filter((n) => n.selected);
return getRectOfNodes(selectedNodes, s.nodeOrigin);
};
@@ -55,7 +55,10 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
const onContextMenu = onSelectionContextMenu
? (event: MouseEvent) => {
const selectedNodes = Array.from(store.getState().nodeInternals.values()).filter((n) => n.selected);
const selectedNodes = store
.getState()
.getNodes()
.filter((n) => n.selected);
onSelectionContextMenu(event, selectedNodes);
}
: undefined;
packages/core/src/components/SelectionListener/index.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ type SelectionListenerProps = {
};
const selector = (s: ReactFlowState) => ({
selectedNodes: Array.from(s.nodeInternals.values()).filter((n) => n.selected),
selectedNodes: s.getNodes().filter((n) => n.selected),
selectedEdges: s.edges.filter((e) => e.selected),
});
packages/core/src/components/UserSelection/index.tsx
+2 -2
View File
@@ -101,13 +101,13 @@ const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => {
height: Math.abs(mousePos.y - startY),
};
const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState();
const nodes = Array.from(nodeInternals.values());
const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin, getNodes } = store.getState();
const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, false, true, nodeOrigin);
const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id);
const selectedNodeIds = selectedNodes.map((n) => n.id);
if (prevSelectedNodesCount.current !== selectedNodeIds.length) {
const nodes = getNodes();
prevSelectedNodesCount.current = selectedNodeIds.length;
const changes = getSelectionChanges(nodes, selectedNodeIds) as NodeChange[];
if (changes.length) {
packages/core/src/hooks/useGlobalKeyHandler.ts
+3 -4
View File
@@ -18,11 +18,10 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
useEffect(() => {
if (deleteKeyPressed) {
const { nodeInternals, edges } = store.getState();
const nodes = Array.from(nodeInternals.values());
const selectedNodes = nodes.filter((node) => node.selected);
const { edges, getNodes } = store.getState();
const selectedNodes = getNodes().filter((node) => node.selected);
const selectedEdges = edges.filter((edge) => edge.selected);
deleteElements({nodes: selectedNodes, edges: selectedEdges});
deleteElements({ nodes: selectedNodes, edges: selectedEdges });
store.setState({ nodesSelectionActive: false });
}
}, [deleteKeyPressed]);
packages/core/src/hooks/useNodes.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { useStore } from '../hooks/useStore';
import type { Node, ReactFlowState } from '../types';
const nodesSelector = (state: ReactFlowState) => Array.from(state.nodeInternals.values());
const nodesSelector = (state: ReactFlowState) => state.getNodes();
function useNodes<NodeData>(): Node<NodeData>[] {
const nodes = useStore(nodesSelector);
packages/core/src/hooks/useNodesInitialized.ts
+1 -1
View File
@@ -7,7 +7,7 @@ const selector = (s: ReactFlowState) => {
return false;
}
return Array.from(s.nodeInternals.values()).every((n) => n[internalsSymbol]?.handleBounds !== undefined);
return s.getNodes().every((n) => n[internalsSymbol]?.handleBounds !== undefined);
};
function useNodesInitialized(): boolean {
packages/core/src/hooks/useReactFlow.ts
+14 -15
View File
@@ -24,14 +24,14 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
const store = useStoreApi();
const getNodes = useCallback<Instance.GetNodes<NodeData>>(() => {
const { nodeInternals } = store.getState();
const nodes = Array.from(nodeInternals.values());
return nodes.map((n) => ({ ...n }));
return store
.getState()
.getNodes()
.map((n) => ({ ...n }));
}, []);
const getNode = useCallback<Instance.GetNode<NodeData>>((id) => {
const { nodeInternals } = store.getState();
return nodeInternals.get(id);
return store.getState().nodeInternals.get(id);
}, []);
const getEdges = useCallback<Instance.GetEdges<EdgeData>>(() => {
@@ -45,8 +45,8 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
}, []);
const setNodes = useCallback<Instance.SetNodes<NodeData>>((payload) => {
const { nodeInternals, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
const nodes = Array.from(nodeInternals.values());
const { getNodes, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
const nodes = getNodes();
const nextNodes = typeof payload === 'function' ? payload(nodes) : payload;
if (hasDefaultNodes) {
@@ -77,10 +77,10 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
const addNodes = useCallback<Instance.AddNodes<NodeData>>((payload) => {
const nodes = Array.isArray(payload) ? payload : [payload];
const { nodeInternals, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
const { getNodes, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
if (hasDefaultNodes) {
const currentNodes = Array.from(nodeInternals.values());
const currentNodes = getNodes();
const nextNodes = [...currentNodes, ...nodes];
setNodes(nextNodes);
} else if (onNodesChange) {
@@ -102,11 +102,10 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
}, []);
const toObject = useCallback<Instance.ToObject<NodeData, EdgeData>>(() => {
const { nodeInternals, edges = [], transform } = store.getState();
const nodes = Array.from(nodeInternals.values());
const { getNodes, edges = [], transform } = store.getState();
const [x, y, zoom] = transform;
return {
nodes: nodes.map((n) => ({ ...n })),
nodes: getNodes().map((n) => ({ ...n })),
edges: edges.map((e) => ({ ...e })),
viewport: {
x,
@@ -119,6 +118,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
const deleteElements = useCallback<Instance.DeleteElements>(({ nodes: nodesDeleted, edges: edgesDeleted }) => {
const {
nodeInternals,
getNodes,
edges,
hasDefaultNodes,
hasDefaultEdges,
@@ -127,10 +127,9 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
onNodesChange,
onEdgesChange,
} = store.getState();
const nodes = Array.from(nodeInternals.values());
const nodeIds = (nodesDeleted || []).map((node) => node.id);
const edgeIds = (edgesDeleted || []).map((edge) => edge.id);
const nodesToRemove = nodes.reduce<Node[]>((res, node) => {
const nodesToRemove = getNodes().reduce<Node[]>((res, node) => {
const parentHit = !nodeIds.includes(node.id) && node.parentNode && res.find((n) => n.id === node.parentNode);
const deletable = typeof node.deletable === 'boolean' ? node.deletable : true;
if (deletable && (nodeIds.includes(node.id) || parentHit)) {
@@ -219,7 +218,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
return [];
}
return (nodes || Array.from(store.getState().nodeInternals.values())).filter((n) => {
return (nodes || store.getState().getNodes()).filter((n) => {
if (!isRect && (n.id === node!.id || !n.positionAbsolute)) {
return false;
}
packages/core/src/hooks/useUpdateNodePositions.ts
+2 -2
View File
@@ -8,8 +8,8 @@ function useUpdateNodePositions() {
const store = useStoreApi();
const updatePositions = useCallback((positionDiff: XYPosition) => {
const { nodeInternals, nodeExtent, updateNodePositions, snapToGrid, snapGrid } = store.getState();
const selectedNodes = Array.from(nodeInternals.values()).filter((n) => n.selected);
const { nodeInternals, nodeExtent, updateNodePositions, getNodes, snapToGrid, snapGrid } = store.getState();
const selectedNodes = getNodes().filter((n) => n.selected);
const nodeUpdates = selectedNodes.map((n) => {
if (n.positionAbsolute) {
packages/core/src/hooks/useVisibleNodes.ts
+1 -1
View File
@@ -10,7 +10,7 @@ function useVisibleNodes(onlyRenderVisible: boolean) {
(s: ReactFlowState) =>
onlyRenderVisible
? getNodesInside(s.nodeInternals, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
: Array.from(s.nodeInternals.values()),
: s.getNodes(),
[onlyRenderVisible]
)
);
packages/core/src/store/index.ts
+13 -10
View File
@@ -27,6 +27,9 @@ const createRFStore = () =>
const { nodeInternals, nodeOrigin } = get();
set({ nodeInternals: createNodeInternals(nodes, nodeInternals, nodeOrigin) });
},
getNodes: () => {
return Array.from(get().nodeInternals.values());
},
setEdges: (edges: Edge[]) => {
const { defaultEdgeOptions = {} } = get();
set({ edges: edges.map((e) => ({ ...defaultEdgeOptions, ...e })) });
@@ -125,11 +128,11 @@ const createRFStore = () =>
},
triggerNodeChanges: (changes: NodeChange[]) => {
const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin } = get();
const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin, getNodes } = get();
if (changes?.length) {
if (hasDefaultNodes) {
const nodes = applyNodeChanges(changes, Array.from(nodeInternals.values()));
const nodes = applyNodeChanges(changes, getNodes());
const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin);
set({ nodeInternals: nextNodeInternals });
}
@@ -139,14 +142,14 @@ const createRFStore = () =>
},
addSelectedNodes: (selectedNodeIds: string[]) => {
const { multiSelectionActive, nodeInternals, edges } = get();
const { multiSelectionActive, edges, getNodes } = get();
let changedNodes: NodeSelectionChange[];
let changedEdges: EdgeSelectionChange[] | null = null;
if (multiSelectionActive) {
changedNodes = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true)) as NodeSelectionChange[];
} else {
changedNodes = getSelectionChanges(Array.from(nodeInternals.values()), selectedNodeIds);
changedNodes = getSelectionChanges(getNodes(), selectedNodeIds);
changedEdges = getSelectionChanges(edges, []);
}
@@ -158,7 +161,7 @@ const createRFStore = () =>
});
},
addSelectedEdges: (selectedEdgeIds: string[]) => {
const { multiSelectionActive, edges, nodeInternals } = get();
const { multiSelectionActive, edges, getNodes } = get();
let changedEdges: EdgeSelectionChange[];
let changedNodes: NodeSelectionChange[] | null = null;
@@ -166,7 +169,7 @@ const createRFStore = () =>
changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true)) as EdgeSelectionChange[];
} else {
changedEdges = getSelectionChanges(edges, selectedEdgeIds);
changedNodes = getSelectionChanges(Array.from(nodeInternals.values()), []);
changedNodes = getSelectionChanges(getNodes(), []);
}
updateNodesAndEdgesSelections({
@@ -177,8 +180,8 @@ const createRFStore = () =>
});
},
unselectNodesAndEdges: ({ nodes, edges }: UnselectNodesAndEdgesParams = {}) => {
const { nodeInternals, edges: storeEdges } = get();
const nodesToUnselect = nodes ? nodes : Array.from(nodeInternals.values());
const { edges: storeEdges, getNodes } = get();
const nodesToUnselect = nodes ? nodes : getNodes();
const edgesToUnselect = edges ? edges : storeEdges;
const changedNodes = nodesToUnselect.map((n) => {
@@ -215,8 +218,8 @@ const createRFStore = () =>
set({ translateExtent });
},
resetSelectedElements: () => {
const { nodeInternals, edges } = get();
const nodes = Array.from(nodeInternals.values());
const { edges, getNodes } = get();
const nodes = getNodes();
const nodesToUnselect = nodes
.filter((e) => e.selected)
packages/core/src/store/utils.ts
+2 -4
View File
@@ -120,7 +120,7 @@ type InternalFitViewOptions = {
export function fitView(get: StoreApi<ReactFlowState>['getState'], options: InternalFitViewOptions = {}) {
const {
nodeInternals,
getNodes,
width,
height,
minZoom,
@@ -134,9 +134,7 @@ export function fitView(get: StoreApi<ReactFlowState>['getState'], options: Inte
if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) {
if (d3Zoom && d3Selection) {
const nodes = Array.from(nodeInternals.values()).filter((n) =>
options.includeHiddenNodes ? n.width && n.height : !n.hidden
);
const nodes = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden));
const nodesInitialized = nodes.every((n) => n.width && n.height);
packages/core/src/types/general.ts
+1
View File
@@ -212,6 +212,7 @@ export type ReactFlowStore = {
export type ReactFlowActions = {
setNodes: (nodes: Node[]) => void;
getNodes: () => Node[];
setEdges: (edges: Edge[]) => void;
setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => void;
updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;