diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte index 7f80abcdc7..f6f1999311 100644 --- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte +++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte @@ -281,7 +281,7 @@ style="width: 275px; height: 34px;" onmouseenter={() => (hover = true)} onmouseleave={() => (hover = false)} - onpointerdown={stopPropagation(preventDefault(() => dispatch('pointerdown')))} + onpointerdown={stopPropagation(preventDefault((e) => dispatch('pointerdown', e)))} > {#if deletable} diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte index 71616f373e..01a0ae4a4c 100644 --- a/frontend/src/lib/components/graph/FlowGraphV2.svelte +++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte @@ -395,11 +395,8 @@ insert: (detail) => { onInsert?.(detail) }, - select: (mod: string | FlowModule) => { + select: (modId) => { if (!notSelectable) { - // TODO: Handle Ctrl/Cmd and Shift modifiers when node-level click events are available - // For now, normal click behavior - const modId = typeof mod === 'string' ? mod : mod.id selectionManager.selectId(modId) onSelect?.(modId) } @@ -478,10 +475,24 @@ return false } + // Clear SvelteFlow's internal selection by creating new nodes array + function clearFlowSelection() { + nodes = nodes.map((node) => { + if (node.selected) { + return { ...node, selected: false } + } + return node + }) + } + // Keyboard event handling function handleKeyDown(event: KeyboardEvent) { selectionManager.handleKeyDown(event, nodes) noteManager.handleKeyDown(event) + if (event.key === 'Escape') { + // Clear SvelteFlow's internal selection state + clearFlowSelection() + } if (noteMode) { exitNoteMode?.() } @@ -786,12 +797,13 @@ selectionOnDrag={selectionManager.mode === 'rect-select'} elementsSelectable={true} selectionMode={SelectionMode.Partial} - selectionKey={selectionManager.mode === 'rect-select' ? null : 'Meta'} + selectionKey={selectionManager.mode === 'rect-select' || !editMode ? null : 'Meta'} panActivationKey={selectionManager.mode === 'rect-select' ? 'Meta' : null} panOnDrag={selectionManager.mode === 'rect-select' ? [1] : true} zoomOnDoubleClick={false} elevateNodesOnSelect={false} {proOptions} + multiSelectionKey={'Meta'} nodesDraggable={false} --background-color={false} > @@ -815,7 +827,7 @@ {/if} - + {#if leftHeader}
diff --git a/frontend/src/lib/components/graph/SelectionTool.svelte b/frontend/src/lib/components/graph/SelectionTool.svelte index 4e7a7bebde..5768188b1a 100644 --- a/frontend/src/lib/components/graph/SelectionTool.svelte +++ b/frontend/src/lib/components/graph/SelectionTool.svelte @@ -1,13 +1,11 @@ -{#if selectionBoxBounds()} - {@const bounds = selectionBoxBounds()!} +{#if store.selectionRect} + {@const bounds = store.selectionRect!}