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 &&
}