From 1e616b8258d8594e9cd2e814d498b99cdf955e58 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 11 Nov 2025 14:06:15 +0100 Subject: [PATCH] render note node from context --- .../components/FlowStatusViewerInner.svelte | 1 + .../lib/components/graph/FlowGraphV2.svelte | 42 ++++++----- .../components/graph/noteManager.svelte.ts | 9 ++- .../graph/renderers/nodes/NoteNode.svelte | 69 +++++++++---------- 4 files changed, 62 insertions(+), 59 deletions(-) diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte index 0f71308322..120c7cb9a1 100644 --- a/frontend/src/lib/components/FlowStatusViewerInner.svelte +++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte @@ -1773,6 +1773,7 @@ earlyStop={job.raw_flow?.skip_expr !== undefined} cache={job.raw_flow?.cache_ttl !== undefined} modules={job.raw_flow?.modules ?? []} + notes={job.raw_flow?.notes ?? []} failureModule={job.raw_flow?.failure_module} preprocessorModule={job.raw_flow?.preprocessor_module} allowSimplifiedPoll={false} diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte index 69840f4a03..91d97ecca5 100644 --- a/frontend/src/lib/components/graph/FlowGraphV2.svelte +++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte @@ -496,7 +496,8 @@ noteTextHeights, (noteId: string, height: number) => { noteTextHeights[noteId] = height - } + }, + editMode ) ] edges = [ @@ -745,25 +746,28 @@ {#if noteMode} {/if} - - !id.startsWith('Settings') && !id.startsWith('Trigger') && !id.startsWith('Result') - )} - > - - actualSelectionManager.selectedIds.includes(node.id) - )} - /> - - - actualSelectionManager.selectNodes(nodeIds, addToExisting, modules, nodes)} - {nodes} - /> + {#if multiSelectEnabled} + + !id.startsWith('Settings') && !id.startsWith('Trigger') && !id.startsWith('Result') + )} + > + + actualSelectionManager.selectedIds.includes(node.id) + )} + /> + + + + actualSelectionManager.selectNodes(nodeIds, addToExisting, modules, nodes)} + {nodes} + /> + {/if} {#if leftHeader}
diff --git a/frontend/src/lib/components/graph/noteManager.svelte.ts b/frontend/src/lib/components/graph/noteManager.svelte.ts index 6b63c771c7..9de349bb4c 100644 --- a/frontend/src/lib/components/graph/noteManager.svelte.ts +++ b/frontend/src/lib/components/graph/noteManager.svelte.ts @@ -162,7 +162,8 @@ export class NoteManager { private createNoteData( note: FlowNote, onTextHeightChange: (noteId: string, height: number) => void, - isGroupNote: boolean + isGroupNote: boolean, + editMode: boolean ) { return { noteId: note.id, @@ -170,6 +171,7 @@ export class NoteManager { color: note.color, locked: note.locked || false, isGroupNote, + editMode, ...(isGroupNote && { containedNodeIds: note.contained_node_ids || [] }), // Note: Edit callbacks will be added by NoteNode when NoteEditor context is available onTextHeightChange: (textHeight: number) => { @@ -187,7 +189,8 @@ export class NoteManager { notes: FlowNote[], currentNodes: Node[], textHeights: Record, - onTextHeightChange: (noteId: string, height: number) => void + onTextHeightChange: (noteId: string, height: number) => void, + editMode: boolean = false ): Node[] { return notes.map((note) => { const isGroupNote = note.type === 'group' @@ -201,7 +204,7 @@ export class NoteManager { id: note.id, type: 'note', position, - data: this.createNoteData(note, onTextHeightChange, isGroupNote), + data: this.createNoteData(note, onTextHeightChange, isGroupNote, editMode), style: `width: ${size.width}px; height: ${size.height}px;`, width: size.width, height: size.height, diff --git a/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte index 43c3a6eb54..968aa3e86a 100644 --- a/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte +++ b/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte @@ -8,6 +8,8 @@ import { NoteColor, NOTE_COLORS, DEFAULT_NOTE_COLOR } from '../../noteColors' import { Button } from '$lib/components/common' import { getNoteEditorContext } from '../../noteEditor.svelte' + import { getContext } from 'svelte' + import type { FlowEditorContext } from '$lib/components/flows/types' interface Props { data: { @@ -16,12 +18,8 @@ color: NoteColor locked?: boolean isGroupNote?: boolean - // Callback props for view mode (when no NoteEditor context) - onUpdate?: (text: string) => void - onDelete?: () => void - onColorChange?: (color: NoteColor) => void - onSizeChange?: (size: { width: number; height: number }) => void - onLockToggle?: (locked: boolean) => void + editMode?: boolean + // Callback for layout calculations (needed in both edit and view modes) onTextHeightChange?: (height: number) => void } selected?: boolean @@ -32,22 +30,28 @@ // Get NoteEditor context for edit mode const noteEditorContext = getNoteEditorContext() - const isEditModeAvailable = $derived(!!noteEditorContext?.noteEditor) + const isEditModeAvailable = $derived(!!noteEditorContext?.noteEditor && data.editMode) + + const { flowStore } = getContext('FlowEditorContext') || {} + const note = $derived( + flowStore?.val.value?.notes?.find((note) => note.id === data.noteId) ?? undefined + ) let textareaElement: HTMLTextAreaElement | undefined = $state(undefined) let editMode = $state(false) let hovering = $state(false) - let textContent = $state(data.text ?? '') let containerHeight = $state(0) + // Derived values. If in edit mode, use the note text from the flow store. If not, use the data text. + let textContent = $derived(note?.text ?? data.text ?? '') + const color = $derived((note?.color as NoteColor) ?? data.color ?? DEFAULT_NOTE_COLOR) + const locked = $derived(note?.locked ?? data.locked ?? false) + function handleTextSave() { // Only update parent when done editing if (isEditModeAvailable && noteEditorContext?.noteEditor) { // Use NoteEditor context in edit mode noteEditorContext.noteEditor.updateText(data.noteId, textContent) - } else { - // Fallback to callback in view mode - data.onUpdate?.(textContent) } } @@ -57,9 +61,6 @@ if (isEditModeAvailable && noteEditorContext?.noteEditor) { // Use NoteEditor context in edit mode noteEditorContext.noteEditor.deleteNote(data.noteId) - } else { - // Fallback to callback in view mode - data.onDelete?.() } } @@ -67,9 +68,6 @@ if (isEditModeAvailable && noteEditorContext?.noteEditor) { // Use NoteEditor context in edit mode noteEditorContext.noteEditor.updateColor(data.noteId, color) - } else { - // Fallback to callback in view mode - data.onColorChange?.(color) } } @@ -78,22 +76,19 @@ event?.stopPropagation?.() if (isEditModeAvailable && noteEditorContext?.noteEditor) { // Use NoteEditor context in edit mode - noteEditorContext.noteEditor.updateLock(data.noteId, !data.locked) - } else { - // Fallback to callback in view mode - data.onLockToggle?.(!data.locked) + noteEditorContext.noteEditor.updateLock(data.noteId, !locked) } } // Get color configuration for current color - const colorConfig = $derived(NOTE_COLORS[data.color] || NOTE_COLORS[DEFAULT_NOTE_COLOR]) + const colorConfig = $derived(NOTE_COLORS[color]) function handleDoubleClick(event: Event) { event.preventDefault() event.stopPropagation() // Don't allow editing if note is locked or edit mode is not available - if (data.locked || !isEditModeAvailable) { + if (locked || !isEditModeAvailable) { return } @@ -132,6 +127,9 @@ }) let colorPickerIsOpen = $state(false) + + $inspect('dbg note', note) + $inspect('dbg textContent', textContent)
- {#if !data.locked} + {#if !locked} {/if} - {#if !data.locked} + {#if !locked}
- {:else if !data.locked && isEditModeAvailable} + {:else if !locked && isEditModeAvailable}
- {#if data.text} + {#if textContent}
- +
{:else}
@@ -275,7 +273,7 @@
- {#if !data.locked && isEditModeAvailable} + {#if !locked && isEditModeAvailable}