46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import { useEffect } from 'react';
|
|
|
|
import { useStoreState, useStoreActions } from '../store/hooks';
|
|
import useKeyPress from './useKeyPress';
|
|
import { isNode, getConnectedEdges } from '../utils/graph';
|
|
import { Elements } from '../types';
|
|
|
|
interface HookParams {
|
|
deleteKeyCode: number;
|
|
multiSelectionKeyCode: number;
|
|
onElementsRemove?: (elements: Elements) => void;
|
|
}
|
|
|
|
export default ({ deleteKeyCode, multiSelectionKeyCode, onElementsRemove }: HookParams): void => {
|
|
const selectedElements = useStoreState((state) => state.selectedElements);
|
|
const edges = useStoreState((state) => state.edges);
|
|
|
|
const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection);
|
|
const setMultiSelectionActive = useStoreActions((actions) => actions.setMultiSelectionActive);
|
|
const resetSelectedElements = useStoreActions((actions) => actions.resetSelectedElements);
|
|
|
|
const deleteKeyPressed = useKeyPress(deleteKeyCode);
|
|
const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
|
|
|
|
useEffect(() => {
|
|
if (onElementsRemove && deleteKeyPressed && selectedElements) {
|
|
let elementsToRemove = selectedElements;
|
|
|
|
// we also want to remove the edges if only one node is selected
|
|
if (selectedElements.length === 1 && isNode(selectedElements[0])) {
|
|
const node = selectedElements[0];
|
|
const connectedEdges = getConnectedEdges([node], edges);
|
|
elementsToRemove = [...selectedElements, ...connectedEdges];
|
|
}
|
|
|
|
onElementsRemove(elementsToRemove);
|
|
unsetNodesSelection();
|
|
resetSelectedElements();
|
|
}
|
|
}, [deleteKeyPressed]);
|
|
|
|
useEffect(() => {
|
|
setMultiSelectionActive(multiSelectionKeyPressed);
|
|
}, [multiSelectionKeyPressed])
|
|
};
|