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

fix(sub-flows): delete child nodes when parent gets deleted

Browse Source
This commit is contained in:
moklick
2022-03-22 12:07:24 +01:00
parent aeb85c6b1c
commit d6f3a24051
1 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/useGlobalKeyHandler.ts
+16 -9
View File
@@ -4,7 +4,7 @@ import shallow from 'zustand/shallow';
import { useStore, useStoreApi } from '../store'; import { useStore, useStoreApi } from '../store';
import useKeyPress from './useKeyPress'; import useKeyPress from './useKeyPress';
import { getConnectedEdges } from '../utils/graph'; import { getConnectedEdges } from '../utils/graph';
import { EdgeChange, KeyCode, NodeChange, ReactFlowState } from '../types'; import { EdgeChange, KeyCode, NodeChange, Node, ReactFlowState } from '../types';
interface HookParams { interface HookParams {
deleteKeyCode: KeyCode | null; deleteKeyCode: KeyCode | null;
@@ -26,18 +26,25 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
useEffect(() => { useEffect(() => {
const { nodeInternals, edges, hasDefaultNodes, hasDefaultEdges, onNodesDelete, onEdgesDelete } = store.getState(); const { nodeInternals, edges, hasDefaultNodes, hasDefaultEdges, onNodesDelete, onEdgesDelete } = store.getState();
// @TODO: work with nodeInternals instead of converting it to an array const nodes = Array.from(nodeInternals.values());
const nodes = Array.from(nodeInternals).map(([_, node]) => node); const nodesToRemove = nodes.reduce<Node[]>((res, node) => {
const selectedNodes = nodes.filter((n) => n.selected); if (!node.selected && node.parentNode && res.find((n) => n.id === node.parentNode)) {
res.push(node);
} else if (node.selected) {
res.push(node);
}
return res;
}, []);
const selectedEdges = edges.filter((e) => e.selected); const selectedEdges = edges.filter((e) => e.selected);
if (deleteKeyPressed && (selectedNodes || selectedEdges)) { if (deleteKeyPressed && (nodesToRemove || selectedEdges)) {
const connectedEdges = getConnectedEdges(selectedNodes, edges); const connectedEdges = getConnectedEdges(nodesToRemove, edges);
const edgesToRemove = [...selectedEdges, ...connectedEdges]; const edgesToRemove = [...selectedEdges, ...connectedEdges];
const edgeIdsToRemove = edgesToRemove.map((e) => e.id); const edgeIdsToRemove = edgesToRemove.map((e) => e.id);
if (hasDefaultNodes) { if (hasDefaultNodes) {
selectedNodes.forEach((node) => { nodesToRemove.forEach((node) => {
nodeInternals.delete(node.id); nodeInternals.delete(node.id);
}); });
} }
@@ -49,11 +56,11 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
}); });
} }
onNodesDelete?.(selectedNodes); onNodesDelete?.(nodesToRemove);
onEdgesDelete?.(edgesToRemove); onEdgesDelete?.(edgesToRemove);
if (onNodesChange) { if (onNodesChange) {
const nodeChanges: NodeChange[] = selectedNodes.map((n) => ({ id: n.id, type: 'remove' })); const nodeChanges: NodeChange[] = nodesToRemove.map((n) => ({ id: n.id, type: 'remove' }));
onNodesChange(nodeChanges); onNodesChange(nodeChanges);
} }