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 57426982ef..a0260c7301 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 @@ -1,14 +1,15 @@ import type { ChakraProps } from '@invoke-ai/ui-library'; import { Box, useGlobalMenuClose, useToken } from '@invoke-ai/ui-library'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks'; import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay'; import { useExecutionState } from 'features/nodes/hooks/useExecutionState'; import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode'; -import { nodeExclusivelySelected } from 'features/nodes/store/nodesSlice'; +import { nodesChanged } from 'features/nodes/store/nodesSlice'; import { DRAG_HANDLE_CLASSNAME, NODE_WIDTH } from 'features/nodes/types/constants'; import { zNodeStatus } from 'features/nodes/types/invocation'; import type { MouseEvent, PropsWithChildren } from 'react'; import { memo, useCallback } from 'react'; +import type { NodeChange } from 'reactflow'; type NodeWrapperProps = PropsWithChildren & { nodeId: string; @@ -18,6 +19,7 @@ type NodeWrapperProps = PropsWithChildren & { const NodeWrapper = (props: NodeWrapperProps) => { const { nodeId, width, children, selected } = props; + const store = useAppStore(); const { isMouseOverNode, handleMouseOut, handleMouseOver } = useMouseOverNode(nodeId); const executionState = useExecutionState(nodeId); @@ -37,11 +39,13 @@ const NodeWrapper = (props: NodeWrapperProps) => { const handleClick = useCallback( (e: MouseEvent) => { if (!e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey) { - dispatch(nodeExclusivelySelected(nodeId)); + const { nodes } = store.getState().nodes.present; + const nodeChanges: NodeChange[] = nodes.map(({ id }) => ({ type: 'select', id, selected: id === nodeId })); + dispatch(nodesChanged(nodeChanges)); } onCloseGlobal(); }, - [dispatch, onCloseGlobal, nodeId] + [onCloseGlobal, store, dispatch, nodeId] ); return ( diff --git a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts index 3f8e76825c..9cc641769c 100644 --- a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts +++ b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts @@ -272,17 +272,6 @@ export const nodesSlice = createSlice({ } node.data.notes = notes; }, - nodeExclusivelySelected: (state, action: PayloadAction) => { - const nodeId = action.payload; - state.nodes = applyNodeChanges( - state.nodes.map(({ id }) => ({ - type: 'select', - id, - selected: id === nodeId ? true : false, - })), - state.nodes - ); - }, fieldValueReset: (state, action: FieldValueAction) => { fieldValueReducer(state, action, zStatefulFieldValue); }, @@ -389,7 +378,6 @@ export const { fieldStringValueChanged, fieldVaeModelValueChanged, nodeEditorReset, - nodeExclusivelySelected, nodeIsIntermediateChanged, nodeIsOpenChanged, nodeLabelChanged, @@ -438,12 +426,7 @@ export const nodesPersistConfig: PersistConfig = { persistDenylist: [], }; -const selectionMatcher = isAnyOf(nodeExclusivelySelected); - const isSelectionAction = (action: UnknownAction) => { - if (selectionMatcher(action)) { - return true; - } if (nodesChanged.match(action)) { if (action.payload.every((change) => change.type === 'select')) { return true;