diff --git a/src/components/UserSelection/index.tsx b/src/components/UserSelection/index.tsx index 1922e200..4be5cd7e 100644 --- a/src/components/UserSelection/index.tsx +++ b/src/components/UserSelection/index.tsx @@ -53,16 +53,16 @@ export default memo(({ isInteractive }: UserSelectionProps) => { return null; } - function onMouseDown(evt: React.MouseEvent): void { + const onMouseDown = (evt: React.MouseEvent): void => { const mousePos = getMousePosition(evt); if (!mousePos) { return; } setUserSelection(mousePos); - } + }; - function onMouseMove(evt: React.MouseEvent): void { + const onMouseMove = (evt: React.MouseEvent): void => { const mousePos = getMousePosition(evt); if (!mousePos) { @@ -70,11 +70,9 @@ export default memo(({ isInteractive }: UserSelectionProps) => { } updateUserSelection(mousePos); - } + }; - function onMouseUp() { - unsetUserSelection(); - } + const onMouseUp = () => unsetUserSelection(); return (
s.height); const d3Initialised = useStoreState((s) => s.d3Initialised); const nodesSelectionActive = useStoreState((s) => s.nodesSelectionActive); - + const selectionActive = useStoreState((s) => s.selectionActive); const updateSize = useStoreActions((actions) => actions.updateSize); const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection); const setOnConnect = useStoreActions((a) => a.setOnConnect); @@ -91,6 +91,7 @@ const GraphView = memo( const selectionKeyPressed = useKeyPress(selectionKeyCode); const rendererClasses = classnames('react-flow__renderer', { 'is-interactive': isInteractive }); + const userSelectionActive = selectionKeyPressed || selectionActive; const onZoomPaneClick = () => setNodesSelection({ isActive: false }); @@ -188,7 +189,7 @@ const GraphView = memo( connectionLineType={connectionLineType} connectionLineStyle={connectionLineStyle} /> - {selectionKeyPressed && } + {userSelectionActive && } {nodesSelectionActive && }