fix(userselection): dont render user selection when its not active

src/components/NodesSelection/index.tsx

@@ -38,9 +38,14 @@ export default memo(() => {
   const nodes = useStoreState((s) => s.nodes);
 
   const updateNodePos = useStoreActions((a) => a.updateNodePos);
+
   const position = selectedNodesBbox;
   const grid = (snapToGrid ? snapGrid : [1, 1])! as [number, number];
 
+  if (!selectedElements) {
+    return null;
+  }
+
   const onStart = (evt: MouseEvent) => {
     const scaledClient: XYPosition = {
       x: evt.clientX / tScale,

src/components/UserSelection/index.tsx

@@ -2,13 +2,14 @@
  * The user selection rectangle gets displayed when a user drags the mouse while pressing shift
  */
 
-import React, { memo } from 'react';
+import React, { memo, useEffect } from 'react';
 
 import { useStoreActions, useStoreState } from '../../store/hooks';
 import { XYPosition } from '../../types';
 
 type UserSelectionProps = {
   isInteractive: boolean;
+  selectionKeyPressed: boolean;
 };
 
 function getMousePosition(evt: React.MouseEvent): XYPosition | void {
@@ -44,12 +45,21 @@ const SelectionRect = () => {
   );
 };
 
-export default memo(({ isInteractive }: UserSelectionProps) => {
+export default memo(({ isInteractive, selectionKeyPressed }: UserSelectionProps) => {
+  const selectionActive = useStoreState((s) => s.selectionActive);
+
   const setUserSelection = useStoreActions((a) => a.setUserSelection);
   const updateUserSelection = useStoreActions((a) => a.updateUserSelection);
   const unsetUserSelection = useStoreActions((a) => a.unsetUserSelection);
+  const renderUserSelectionPane = selectionActive || selectionKeyPressed;
 
-  if (!isInteractive) {
+  useEffect(() => {
+    if (!selectionKeyPressed) {
+      unsetUserSelection();
+    }
+  }, [selectionKeyPressed]);
+
+  if (!isInteractive || !renderUserSelectionPane) {
     return null;
   }
 
@@ -63,6 +73,9 @@ export default memo(({ isInteractive }: UserSelectionProps) => {
   };
 
   const onMouseMove = (evt: React.MouseEvent): void => {
+    if (!selectionKeyPressed || !selectionActive) {
+      return;
+    }
     const mousePos = getMousePosition(evt);
 
     if (!mousePos) {

src/container/GraphView/index.tsx

@@ -12,7 +12,7 @@ import useD3Zoom from '../../hooks/useD3Zoom';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
 import useElementUpdater from '../../hooks/useElementUpdater';
 import { getDimensions } from '../../utils';
-import { fitView, zoomIn, zoomOut, project, getElements } from '../../utils/graph';
+import { project, getElements } from '../../utils/graph';
 import {
   Elements,
   NodeTypesType,
@@ -80,7 +80,6 @@ const GraphView = memo(
     const height = useStoreState((s) => 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);
@@ -88,10 +87,11 @@ const GraphView = memo(
     const setInteractive = useStoreActions((actions) => actions.setInteractive);
     const updateTransform = useStoreActions((actions) => actions.updateTransform);
     const setMinMaxZoom = useStoreActions((actions) => actions.setMinMaxZoom);
+    const fitView = useStoreActions((actions) => actions.fitView);
+    const zoom = useStoreActions((actions) => actions.zoom);
 
     const selectionKeyPressed = useKeyPress(selectionKeyCode);
     const rendererClasses = classnames('react-flow__renderer', { 'is-interactive': isInteractive });
-    const userSelectionActive = selectionKeyPressed || selectionActive;
 
     const onZoomPaneClick = () => setNodesSelection({ isActive: false });
 
@@ -147,9 +147,9 @@ const GraphView = memo(
     useEffect(() => {
       if (d3Initialised && onLoad) {
         onLoad({
-          fitView,
-          zoomIn,
-          zoomOut,
+          fitView: (params = { padding: 0.1 }) => fitView(params),
+          zoomIn: () => zoom(0.2),
+          zoomOut: () => zoom(-0.2),
           project,
           getElements,
         });
@@ -189,7 +189,7 @@ const GraphView = memo(
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
         />
-        {userSelectionActive && <UserSelection isInteractive={isInteractive} />}
+        <UserSelection selectionKeyPressed={selectionKeyPressed} isInteractive={isInteractive} />
         {nodesSelectionActive && <NodesSelection />}
         <div className="react-flow__zoompane" onClick={onZoomPaneClick} ref={zoomPane} />
       </div>

src/style.css

@@ -69,6 +69,7 @@
 .react-flow__edge-text {
   font-size: 12px;
   pointer-events: none;
+  user-select: none;
 }
 
 .react-flow__edge-textbg {
@@ -132,7 +133,6 @@
 
 .react-flow__node-output {
   background: #55dd99;
-
 }
 
 .react-flow__nodesselection {
@@ -184,4 +184,4 @@
   right: 0;
   top: 50%;
   transform: translate(0, -50%);
-}
+}