diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx index 05e8abe7e3..d18abc1bf4 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx +++ b/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) => { + if (!e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey) { + dispatch(nodeExclusivelySelected(nodeId)); + } + dispatch(contextMenusClosed()); + }, + [dispatch, nodeId] + ); return ( ) => { + 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) => { state.selectedNodes = action.payload; }, @@ -892,6 +903,7 @@ export const { nodeEmbedWorkflowChanged, nodeIsIntermediateChanged, mouseOverNodeChanged, + nodeExclusivelySelected, } = nodesSlice.actions; export default nodesSlice.reducer;