fix(ui): node UI elements do not select node on click

Add a click handler for node wrapper component that exclusively selects that node, IF no other modifier keys are held.

Technically I believe this means we are doubling up on the selection logic, as reactflow handles this internally also. But this is by far the most reliable way to fix the UX.

invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx

@@ -9,13 +9,20 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay';
 import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
+import { nodeExclusivelySelected } from 'features/nodes/store/nodesSlice';
 import {
   DRAG_HANDLE_CLASSNAME,
   NODE_WIDTH,
 } from 'features/nodes/types/constants';
 import { NodeStatus } from 'features/nodes/types/types';
 import { contextMenusClosed } from 'features/ui/store/uiSlice';
-import { PropsWithChildren, memo, useCallback, useMemo } from 'react';
+import {
+  MouseEvent,
+  PropsWithChildren,
+  memo,
+  useCallback,
+  useMemo,
+} from 'react';
 
 type NodeWrapperProps = PropsWithChildren & {
   nodeId: string;
@@ -57,9 +64,15 @@ const NodeWrapper = (props: NodeWrapperProps) => {
 
   const opacity = useAppSelector((state) => state.nodes.nodeOpacity);
 
-  const handleClick = useCallback(() => {
-    dispatch(contextMenusClosed());
-  }, [dispatch]);
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      if (!e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey) {
+        dispatch(nodeExclusivelySelected(nodeId));
+      }
+      dispatch(contextMenusClosed());
+    },
+    [dispatch, nodeId]
+  );
 
   return (
     <Box

invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts

@@ -443,6 +443,17 @@ const nodesSlice = createSlice({
       }
       node.data.notes = notes;
     },
+    nodeExclusivelySelected: (state, action: PayloadAction<string>) => {
+      const nodeId = action.payload;
+      state.nodes = applyNodeChanges(
+        state.nodes.map((n) => ({
+          id: n.id,
+          type: 'select',
+          selected: n.id === nodeId ? true : false,
+        })),
+        state.nodes
+      );
+    },
     selectedNodesChanged: (state, action: PayloadAction<string[]>) => {
       state.selectedNodes = action.payload;
     },
@@ -892,6 +903,7 @@ export const {
   nodeEmbedWorkflowChanged,
   nodeIsIntermediateChanged,
   mouseOverNodeChanged,
+  nodeExclusivelySelected,
 } = nodesSlice.actions;
 
 export default nodesSlice.reducer;