Enhance sticky note height calculation for note itself and contents (#487)

Author: stijnpotters1

src/main/frontend/app/routes/studio/canvas/flow.config.ts

@@ -5,6 +5,7 @@ export const FlowConfig = {
   EXIT_DEFAULT_HEIGHT: 100,
   STICKY_NOTE_DEFAULT_WIDTH: 200,
   STICKY_NOTE_DEFAULT_HEIGHT: 200,
+  STICKY_NOTE_MAX_HEIGHT: 500,
   STICKY_NOTE_BALLOON_WIDTH: 160,
   STICKY_NOTE_BALLOON_HEIGHT: 58,
   COPY_PASTE_OFFSET: 40,

src/main/frontend/app/routes/studio/canvas/flow.tsx

@@ -1147,6 +1147,10 @@ function FlowCanvas({ onOpenInEditor }: { onOpenInEditor: () => void }) {
         data: { content: '' },
         type: 'stickyNote',
         selected: true,
+        style: {
+          width: FlowConfig.STICKY_NOTE_DEFAULT_WIDTH,
+          height: FlowConfig.STICKY_NOTE_DEFAULT_HEIGHT,
+        },
       }
 
       flowStore.setNodes([...deselectedNodes, stickyNote])

src/main/frontend/app/routes/studio/canvas/nodetypes/sticky-note.tsx

@@ -1,7 +1,7 @@
-import { type Node, type NodeProps, NodeResizeControl } from '@xyflow/react'
+import { type Node, type NodeProps, NodeResizeControl, useUpdateNodeInternals } from '@xyflow/react'
 import { FlowConfig } from '~/routes/studio/canvas/flow.config'
 import { ResizeIcon } from '~/routes/studio/canvas/nodetypes/frank-node'
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import useFlowStore from '~/stores/flow-store'
 import { useNodeContextMenu } from '~/routes/studio/canvas/node-context-menu-context'
 import useNodeContextStore from '~/stores/node-context-store'
@@ -33,37 +33,42 @@ export default function StickyNoteComponent(properties: NodeProps<StickyNote>) {
   const minHeight = FlowConfig.STICKY_NOTE_DEFAULT_HEIGHT
   const minWidth = FlowConfig.STICKY_NOTE_DEFAULT_WIDTH
   const showNodeContextMenu = useNodeContextMenu()
-
-  const [localContent, setLocalContent] = useState(properties.data.content)
+  const updateNodeInternals = useUpdateNodeInternals()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
   const [isOverflowing, setIsOverflowing] = useState(false)
 
-  const textareaReference = useRef<HTMLTextAreaElement>(null)
-  const containerReference = useRef<HTMLDivElement>(null)
-
   const color = properties.data.color ?? 'var(--sticky-color-yellow)'
+  const content = properties.data.content
+
+  const CONTENT_PADDING_Y = 24
+
+  useLayoutEffect(() => {
+    if (properties.data.collapsed || !contentRef.current) return
+
+    const naturalHeight = contentRef.current.scrollHeight + CONTENT_PADDING_Y
+    const clamped = Math.min(
+      FlowConfig.STICKY_NOTE_MAX_HEIGHT,
+      Math.max(FlowConfig.STICKY_NOTE_DEFAULT_HEIGHT, naturalHeight),
+    )
+
+    useFlowStore.getState().setStickyHeight(properties.id, clamped)
+  }, [content, properties.data.collapsed, properties.id])
 
   useEffect(() => {
-    setLocalContent(properties.data.content)
-  }, [properties.data.content])
+    updateNodeInternals(properties.id)
+  }, [properties.data.collapsed, properties.id, updateNodeInternals])
 
   useEffect(() => {
     if (properties.data.collapsed) return
-    const textarea = textareaReference.current
-    const container = containerReference.current
-    if (!textarea || !container) return
-
-    const check = () => setIsOverflowing(textarea.scrollHeight > textarea.clientHeight)
+    const container = containerRef.current
+    if (!container) return
+    const check = () => setIsOverflowing(container.scrollHeight > container.clientHeight)
     check()
-
     const observer = new ResizeObserver(check)
     observer.observe(container)
     return () => observer.disconnect()
-  }, [localContent, properties.data.collapsed])
-
-  const updateContent = (changeEvent: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setLocalContent(changeEvent.target.value)
-    useFlowStore.getState().setStickyText(properties.id, changeEvent.target.value)
-  }
+  }, [content, properties.data.collapsed])
 
   const handleDelete = () => {
     useNodeContextStore.getState().setSelectedStickyId(null)
@@ -81,7 +86,9 @@ export default function StickyNoteComponent(properties: NodeProps<StickyNote>) {
           className="flex items-center overflow-hidden rounded-lg px-2"
           style={{ width: `${FlowConfig.STICKY_NOTE_BALLOON_WIDTH}px`, height: '46px', background: color }}
         >
-          <span className="flex-1 truncate text-xs">{localContent}</span>
+          <span className="line-clamp-2 flex-1 overflow-hidden text-xs leading-snug whitespace-pre-wrap">
+            {content}
+          </span>
           <button
             className="nodrag ml-1 shrink-0 text-xs hover:cursor-pointer hover:opacity-70"
             onClick={(e) => {
@@ -127,7 +134,7 @@ export default function StickyNoteComponent(properties: NodeProps<StickyNote>) {
         <ResizeIcon />
       </NodeResizeControl>
       <div
-        ref={containerReference}
+        ref={containerRef}
         className={`relative h-full w-full overflow-hidden p-3 text-xs ${properties.selected ? 'ring-1 ring-black/40' : ''}`}
         style={{
           minHeight: `${minHeight}px`,
@@ -138,19 +145,14 @@ export default function StickyNoteComponent(properties: NodeProps<StickyNote>) {
           `,
         }}
       >
-        <textarea
-          ref={textareaReference}
-          value={localContent}
-          onChange={updateContent}
-          className="nodrag h-full w-full resize-none overflow-hidden bg-transparent text-xs leading-snug outline-none"
-        />
+        <div ref={contentRef} className="w-full text-xs leading-snug break-words whitespace-pre-wrap">
+          {content}
+        </div>
         {isOverflowing && (
           <div
-            className="pointer-events-none absolute right-0 bottom-0 left-0 flex justify-end pr-3 pb-1 text-xs opacity-60"
+            className="pointer-events-none absolute right-0 bottom-0 left-0 h-8"
             style={{ background: `linear-gradient(transparent, ${color})` }}
-          >
-            ···
-          </div>
+          />
         )}
         <div className="nodrag absolute top-0 right-5 flex items-center">
           <div

src/main/frontend/app/routes/studio/flow-to-xml-parser.ts

@@ -326,7 +326,7 @@ function generateFlowElementsXml(nodes: FlowNode[]): string {
       }
     }
 
-    return `    <flow:StickyNote flow:text="${escapeXml(text)}"${colorAttr} flow:x="${roundedX}" flow:y="${roundedY}" flow:width="${width}" flow:height="${height}"${collapsedAttr}${attachedToAttr} />`
+    return `    <flow:StickyNote${colorAttr} flow:x="${roundedX}" flow:y="${roundedY}" flow:width="${width}" flow:height="${height}"${collapsedAttr}${attachedToAttr}><![CDATA[${text.replaceAll(']]>', ']]]]><![CDATA[>')}]]></flow:StickyNote>`
   })
 
   const groupNodesXml = generateGroupNodeXml(groupNodes, groupChildrenMap)

src/main/frontend/app/routes/studio/studio.tsx

@@ -104,7 +104,7 @@ function AttachedNotesPanel({ nodeId }: { nodeId: number }) {
         {attachedNotes.map((note) => (
           <div
             key={note.id}
-            className="rounded-lg p-2 text-xs leading-snug"
+            className="rounded-lg p-2 text-xs leading-snug break-words whitespace-pre-wrap"
             style={{ background: note.data.color ?? '#fef08a' }}
           >
             {note.data.content || <span className="opacity-40">Empty note</span>}

src/main/frontend/app/routes/studio/xml-to-json-parser.ts

@@ -616,7 +616,8 @@ function extractStickyNotesFromAdapter(adapter: Element, idCounter: IdCounter, f
   )
 
   for (const note of notes) {
-    const text = note.getAttribute('flow:text') ?? ''
+    const attrText = note.getAttribute('flow:text')
+    const text = attrText === null ? (note.textContent ?? '') : attrText
     const color = note.getAttribute('flow:color') ?? undefined
 
     const x = parseNumericAttribute(note.getAttribute('flow:x'), 0)

src/main/frontend/app/stores/flow-store.ts

@@ -55,6 +55,7 @@ export interface FlowState {
   getAttributes: (nodeId: string) => Record<string, string> | null
   addChild: (nodeId: string, child: ChildNode) => void
   setStickyText: (nodeId: string, text: string) => void
+  setStickyHeight: (nodeId: string, height: number) => void
   setStickyColor: (nodeId: string, color: string) => void
   setStickyCollapsed: (nodeId: string, collapsed: boolean) => void
   setStickyAttachment: (nodeId: string, attachedToNodeId: string | null) => void
@@ -342,15 +343,24 @@ const useFlowStore = create<FlowState>()(
     },
     setStickyText: (nodeId, text) => {
       get().saveToHistory()
+      set({
+        nodes: get().nodes.map((node) => {
+          if (node.id === nodeId && isStickyNote(node)) {
+            return { ...node, data: { ...node.data, content: text } }
+          }
+          return node
+        }),
+      })
+    },
+    setStickyHeight: (nodeId, height) => {
       set({
         nodes: get().nodes.map((node) => {
           if (node.id === nodeId && isStickyNote(node)) {
             return {
               ...node,
-              data: {
-                ...node.data,
-                content: text,
-              },
+              height,
+              measured: { ...node.measured, height },
+              style: { ...node.style, height },
             }
           }
           return node
@@ -378,6 +388,9 @@ const useFlowStore = create<FlowState>()(
             const height = node.measured?.height ?? node.height ?? FlowConfig.STICKY_NOTE_DEFAULT_HEIGHT
             return {
               ...node,
+              width: FlowConfig.STICKY_NOTE_BALLOON_WIDTH,
+              height: FlowConfig.STICKY_NOTE_BALLOON_HEIGHT,
+              measured: { width: FlowConfig.STICKY_NOTE_BALLOON_WIDTH, height: FlowConfig.STICKY_NOTE_BALLOON_HEIGHT },
               style: {
                 ...node.style,
                 width: FlowConfig.STICKY_NOTE_BALLOON_WIDTH,
@@ -391,12 +404,17 @@ const useFlowStore = create<FlowState>()(
               },
             }
           } else {
+            const expandWidth = node.data.preCollapseWidth ?? FlowConfig.STICKY_NOTE_DEFAULT_WIDTH
+            const expandHeight = node.data.preCollapseHeight ?? FlowConfig.STICKY_NOTE_DEFAULT_HEIGHT
             return {
               ...node,
+              width: expandWidth,
+              height: expandHeight,
+              measured: { width: expandWidth, height: expandHeight },
               style: {
                 ...node.style,
-                width: node.data.preCollapseWidth ?? FlowConfig.STICKY_NOTE_DEFAULT_WIDTH,
-                height: node.data.preCollapseHeight ?? FlowConfig.STICKY_NOTE_DEFAULT_HEIGHT,
+                width: expandWidth,
+                height: expandHeight,
               },
               data: {
                 ...node.data,

src/main/frontend/src/assets/xsd/FlowConfig.xsd

@@ -15,12 +15,12 @@
 
   <!-- StickyNote -->
   <xs:element name="StickyNote">
-    <xs:complexType>
+    <xs:complexType mixed="true">
       <xs:attribute name="x" type="xs:int" use="required"/>
       <xs:attribute name="y" type="xs:int" use="required"/>
       <xs:attribute name="width" type="xs:int" use="required"/>
       <xs:attribute name="height" type="xs:int" use="required"/>
-      <xs:attribute name="text" type="xs:string" use="required"/>
+      <xs:attribute name="text" type="xs:string"/>
       <xs:attribute name="color" type="xs:string"/>
       <xs:attribute name="collapsed" type="xs:boolean"/>
       <xs:attribute name="attachedTo" type="xs:string"/>