diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte index c141101c0c..d0b3647598 100644 --- a/frontend/src/lib/components/graph/FlowGraphV2.svelte +++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte @@ -424,6 +424,14 @@ updateStores() } + function updateNotePosition(noteId: string, position: { x: number; y: number }) { + notes = notes.map((note) => (note.id === noteId ? { ...note, position } : note)) + } + + function updateNoteSize(noteId: string, size: { width: number; height: number }) { + notes = notes.map((note) => (note.id === noteId ? { ...note, size } : note)) + } + function convertNotesToNodes(): Node[] { return notes.map((note) => ({ id: note.id, @@ -433,12 +441,13 @@ text: note.text, color: note.color, onUpdate: (text: string) => updateNoteText(note.id, text), - onDelete: () => deleteNote(note.id) + onDelete: () => deleteNote(note.id), + onSizeChange: (size: { width: number; height: number }) => updateNoteSize(note.id, size) }, style: `width: ${note.size.width}px; height: ${note.size.height}px;`, width: note.size.width, height: note.size.height, - zIndex: 1, + zIndex: -2000, draggable: true, selectable: true })) @@ -635,6 +644,12 @@ onpaneclick={() => { document.dispatchEvent(new Event('focus')) }} + onnodedragstop={(event) => { + const node = event.targetNode + if (node && node.type === 'note') { + updateNotePosition(node.id, node.position) + } + }} {nodes} {edges} {edgeTypes} diff --git a/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte index d0e4e5c537..e77a9bd6f4 100644 --- a/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte +++ b/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte @@ -9,6 +9,7 @@ color: string onUpdate?: (text: string) => void onDelete?: () => void + onSizeChange?: (size: { width: number; height: number }) => void } selected?: boolean dragging?: boolean @@ -90,6 +91,12 @@ minHeight={100} lineClass="!border-4 !border-transparent !rounded-md" handleClass="!bg-transparent !w-4 !h-4 !border-none !rounded-md" + onResizeEnd={(_, params) => { + // Update note size when resizing ends + if (data.onSizeChange && params.width !== undefined && params.height !== undefined) { + data.onSizeChange({ width: params.width, height: params.height }) + } + }} />