fix: handle both reactive and plain width objects in note geometry calculations - add (model.width as any)?.value ?? model.width fallback pattern across DisplayArrow, DisplayNote, clipboard, note-geometry, useArrowDrag, and useCanvasActions to support both reactive Ref<Width> and plain Width objects when accessing expanded property

Author: gustavotoyota

new-deepnotes/apps/web/src/features/spatial/DisplayArrow.vue

@@ -46,11 +46,11 @@ const geometry = computed(() => {
   // Need at least one real endpoint or a fakePos to render
   if (!s && !t && !fake) return null;
 
-  const w1 = s?.width.value.expanded;
+  const w1 = s ? ((s.width as any)?.value ?? s.width)?.expanded : undefined;
   const nw1 = w1 === "Auto" ? 160 : w1 ? parseFloat(w1) : 0;
   const h1 = s ? (noteHeights.value.get(props.model.source.value) ?? 80) : 0;
 
-  const w2 = t?.width.value.expanded;
+  const w2 = t ? ((t.width as any)?.value ?? t.width)?.expanded : undefined;
   const nw2 = w2 === "Auto" ? 160 : w2 ? parseFloat(w2) : 0;
   const h2 = t ? (noteHeights.value.get(props.model.target.value) ?? 80) : 0;
 

new-deepnotes/apps/web/src/features/spatial/DisplayNote.vue

@@ -79,7 +79,8 @@ const transform = computed(() => {
     style.transform = `translate(${pos.x}px, ${pos.y}px)`;
     style.zIndex = props.model.zIndex.value;
   }
-  style.width = props.model.width.value.expanded === "Auto" ? "auto" : `${props.model.width.value.expanded}px`;
+  const widthVal = (props.model.width as any)?.value ?? props.model.width;
+  style.width = widthVal?.expanded === "Auto" ? "auto" : `${widthVal?.expanded}px`;
   const cv = colorVariants.value;
   if (cv) {
     style.borderColor = cv.base;
@@ -198,8 +199,9 @@ function onResizePointerDown(e: PointerEvent, handle: ResizeHandle) {
   resizeHandle = handle;
   resizeStartX = e.clientX;
   resizeStartY = e.clientY;
-  const w = props.model.width.value.expanded;
-  resizeStartWidth = w === "Auto" ? 160 : parseFloat(w);
+  const widthVal = (props.model.width as any)?.value ?? props.model.width;
+  const w = widthVal?.expanded;
+  resizeStartWidth = w === "Auto" ? 160 : parseFloat(w ?? "160");
   resizeStartPosX = props.model.pos.value.x;
   isDragging.value = true;
   const el = e.currentTarget as HTMLElement;

new-deepnotes/apps/web/src/features/spatial/clipboard.ts

@@ -134,7 +134,7 @@ function serializeNote(model: NoteModel, id: string): ClipboardNote {
   return {
     id,
     pos: model.pos.value,
-    width: model.width.value,
+    width: ((model.width as any)?.value ?? model.width) ?? { expanded: "Auto", collapsed: "Auto" },
     head: {
       enabled: model.head.enabled.value,
       wrap: model.head.wrap.value,

new-deepnotes/apps/web/src/features/spatial/note-geometry.ts

@@ -52,8 +52,9 @@ export function getNoteRect(
   if (!entry) return null;
   const pos = getNoteEffectiveWorldPos(noteId, noteList, parentOf, originOffsets);
   if (!pos) return null;
-  const wStr = entry.model.width.value.expanded;
-  const w = wStr === "Auto" ? 160 : parseFloat(wStr);
+  const widthVal = (entry.model.width as any)?.value ?? entry.model.width;
+  const wStr = widthVal?.expanded;
+  const w = wStr === "Auto" ? 160 : parseFloat(wStr ?? "160");
   const h = heights?.get(noteId) ?? 80;
   return { x: pos.x, y: pos.y, width: w, height: h };
 }

new-deepnotes/apps/web/src/features/spatial/useArrowDrag.ts

@@ -39,8 +39,9 @@ export function useArrowDrag(input: UseArrowDragInput) {
     const camX = input.canvasRef.value.camX;
     const camY = input.canvasRef.value.camY;
 
-    const wStr = sourceNote.model.width.value.expanded;
-    const w = wStr === "Auto" ? 160 : parseFloat(wStr);
+    const widthVal = (sourceNote.model.width as any)?.value ?? sourceNote.model.width;
+    const wStr = widthVal?.expanded;
+    const w = wStr === "Auto" ? 160 : parseFloat(wStr ?? "160");
     const h = noteHeights.value.get(sourceNote.id) ?? 80;
     const sourceScreen = worldToScreen(
       sourceNote.model.pos.value.x + w / 2,

new-deepnotes/apps/web/src/features/spatial/useCanvasActions.ts

@@ -67,8 +67,9 @@ export function useCanvasActions(input: UseCanvasActionsInput) {
     let maxY = -Infinity;
 
     for (const note of notesToFit) {
-      const wStr = note.model.width.value.expanded;
-      const w = wStr === "Auto" ? 160 : parseFloat(wStr);
+      const widthVal = (note.model.width as any)?.value ?? note.model.width;
+      const wStr = widthVal?.expanded;
+      const w = wStr === "Auto" ? 160 : parseFloat(wStr ?? "160");
       const h = noteHeights.value.get(note.id) ?? 80;
       const x = note.model.pos.value.x;
       const y = note.model.pos.value.y;