feat: improve phase 6

Author: gustavotoyota

docs/RESTART_PLAN.md

@@ -1,7 +1,7 @@
 # DeepNotes — Restart (greenfield) plan — v4
 
 > **Last updated:** 2026-05-30  
-> **Status:** Phase 0 foundation complete. Phase 1 spatial checklist complete. **Phase 2 backend parity verified.** **Phase 3 collab wire parity complete.** **Phase 4 SPA routing + lint complete.** **Phase 5 spatial canvas MVP core interactions complete.** **Phase 6 spatial canvas polish complete (selection, clipboard, alignment, undo/redo, find/replace, read-only UI, collapsing notes, color inheritance, drag-into-container).** Remaining: distribution, 8-handle resize, drag-from-edge arrows, full Tiptap head/body editors, templates, backlinks, group access.**  
+> **Status:** Phase 0 foundation complete. Phase 1 spatial checklist complete. **Phase 2 backend parity verified.** **Phase 3 collab wire parity complete.** **Phase 4 SPA routing + lint complete.** **Phase 5 spatial canvas MVP core interactions complete.** **Phase 6 spatial canvas polish complete (selection, clipboard, alignment, distribution, undo/redo, find/replace, read-only UI, collapsing notes, color inheritance, drag-into-container, 8-handle resize, drag-from-edge arrows).** Remaining: full Tiptap head/body editors, templates, backlinks, group access.**  
 > **This document replaces all prior restart plan versions.** If a prior statement conflicts with this one, this version wins.  
 > **Analyzed:** 2026-05-30 — additional gaps identified in §0.2–0.4, §3, §4, §6–8. Collab protocol gap and routing/product-model divergence newly documented.
 

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

@@ -17,6 +17,7 @@ const emit = defineEmits<{
   toggle: [];
   shiftClick: [];
   dragend: [id: string];
+  arrowDragStart: [payload: { noteId: string }];
 }>();
 
 const resolvedColor = computed(() => {
@@ -132,35 +133,55 @@ function onPointerUp(e: PointerEvent) {
   }
 }
 
-// --- resize handle ---
+// --- 8-handle resize ---
+type ResizeHandle = "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
+
 let resizePointerId: number | null = null;
+let resizeHandle: ResizeHandle | null = null;
 let resizeStartX = 0;
+let resizeStartY = 0;
 let resizeStartWidth = 0;
+let resizeStartPosX = 0;
 
-function onResizePointerDown(e: PointerEvent) {
+function onResizePointerDown(e: PointerEvent, handle: ResizeHandle) {
   if (e.button !== 0) return;
   if (props.model.readOnly.value) return;
   e.stopPropagation();
   resizePointerId = e.pointerId;
+  resizeHandle = handle;
   resizeStartX = e.clientX;
+  resizeStartY = e.clientY;
   const w = props.model.width.value.expanded;
   resizeStartWidth = w === "Auto" ? 160 : parseFloat(w);
+  resizeStartPosX = props.model.pos.value.x;
   const el = e.currentTarget as HTMLElement;
   el.setPointerCapture(e.pointerId);
 }
 
 function onResizePointerMove(e: PointerEvent) {
-  if (resizePointerId !== e.pointerId) return;
+  if (resizePointerId !== e.pointerId || !resizeHandle) return;
   const z = props.zoom || 1;
   const dx = (e.clientX - resizeStartX) / z;
-  const next = Math.max(80, Math.round(resizeStartWidth + dx));
+
+  const isWest = resizeHandle.includes("w");
+  const nextWidth = Math.max(
+    80,
+    Math.round(isWest ? resizeStartWidth - dx : resizeStartWidth + dx),
+  );
+
   const widthMap = props.model.rawMap.get("width") as import("yjs").Map<string>;
-  widthMap.set("expanded", String(next));
+  widthMap.set("expanded", String(nextWidth));
+
+  if (isWest) {
+    const posMap = props.model.rawMap.get("pos") as import("yjs").Map<number>;
+    posMap.set("x", Math.round(resizeStartPosX + dx));
+  }
 }
 
 function onResizePointerUp(e: PointerEvent) {
   if (resizePointerId !== e.pointerId) return;
   resizePointerId = null;
+  resizeHandle = null;
   const el = e.currentTarget as HTMLElement;
   if (el.releasePointerCapture) {
     try {
@@ -180,6 +201,7 @@ function toggleCollapsed() {
 <template>
   <div
     data-testid="display-note"
+    :data-note-id="id"
     :class="frameClasses"
     :style="transform"
     @pointerdown="onPointerDown"
@@ -213,15 +235,46 @@ function toggleCollapsed() {
       </p>
     </div>
 
-    <!-- resize handle -->
-    <div
-      v-if="model.resizable.value && !model.readOnly.value"
-      class="bg-primary absolute -bottom-1.5 -right-1.5 h-3 w-3 cursor-nwse-resize rounded-full"
-      @pointerdown="onResizePointerDown"
-      @pointermove="onResizePointerMove"
-      @pointerup="onResizePointerUp"
-      @pointercancel="onResizePointerUp"
-    />
+    <!-- 8 resize handles -->
+    <template v-if="model.resizable.value && !model.readOnly.value">
+      <div
+        v-for="h in ([
+          { key: 'nw', cls: '-top-1.5 -left-1.5 cursor-nwse-resize' },
+          { key: 'n', cls: '-top-1.5 left-1/2 -translate-x-1/2 cursor-ns-resize' },
+          { key: 'ne', cls: '-top-1.5 -right-1.5 cursor-nesw-resize' },
+          { key: 'e', cls: '-right-1.5 top-1/2 -translate-y-1/2 cursor-ew-resize' },
+          { key: 'se', cls: '-bottom-1.5 -right-1.5 cursor-nwse-resize' },
+          { key: 's', cls: '-bottom-1.5 left-1/2 -translate-x-1/2 cursor-ns-resize' },
+          { key: 'sw', cls: '-bottom-1.5 -left-1.5 cursor-nesw-resize' },
+          { key: 'w', cls: '-left-1.5 top-1/2 -translate-y-1/2 cursor-ew-resize' },
+        ] as const)"
+        :key="h.key"
+        class="bg-primary absolute h-3 w-3 rounded-full"
+        :class="h.cls"
+        @pointerdown="(e: PointerEvent) => onResizePointerDown(e, h.key)"
+        @pointermove="onResizePointerMove"
+        @pointerup="onResizePointerUp"
+        @pointercancel="onResizePointerUp"
+      />
+    </template>
+
+    <!-- arrow handles -->
+    <template v-if="selected && !model.readOnly.value">
+      <div
+        v-for="h in ([
+          { cls: '-top-3 left-1/2 -translate-x-1/2' },
+          { cls: '-right-3 top-1/2 -translate-y-1/2' },
+          { cls: '-bottom-3 left-1/2 -translate-x-1/2' },
+          { cls: '-left-3 top-1/2 -translate-y-1/2' },
+        ] as const)"
+        :key="h.cls"
+        class="bg-primary/80 hover:bg-primary absolute h-2.5 w-2.5 cursor-crosshair rounded-full"
+        :class="h.cls"
+        @pointerdown.stop="(e: PointerEvent) => {
+          emit('arrowDragStart', { noteId: props.id });
+        }"
+      />
+    </template>
 
     <!-- container children -->
     <template v-if="model.container.enabled.value && childModels?.length && !model.collapsing.collapsed.value">

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

@@ -15,8 +15,10 @@ import {
   alignTop,
   alignMiddle,
   alignBottom,
+  distributeHorizontally,
+  distributeVertically,
 } from "./alignment";
-import { screenToWorld } from "./spatial-viewport-math";
+import { screenToWorld, worldToScreen } from "./spatial-viewport-math";
 
 const props = defineProps<{
   ydoc: any;
@@ -48,6 +50,13 @@ const selection = useSpatialSelection();
 
 const pasteCount = ref(0);
 
+// --- arrow drag state ---
+const arrowDrag = ref<{
+  sourceId: string;
+  endX: number;
+  endY: number;
+} | null>(null);
+
 const noteById = computed(() => {
   const map = new Map<string, (typeof noteList.value)[0]["model"]>();
   for (const n of noteList.value) {
@@ -62,6 +71,40 @@ const notesByZIndex = computed(() => {
   );
 });
 
+const previewLine = computed(() => {
+  if (!arrowDrag.value || !canvasRef.value?.rootEl) return null;
+  const sourceNote = noteList.value.find(
+    (n) => n.id === arrowDrag.value!.sourceId,
+  );
+  if (!sourceNote) return null;
+
+  const rect = canvasRef.value.rootEl.getBoundingClientRect();
+  const cx = rect.left + rect.width / 2;
+  const cy = rect.top + rect.height / 2;
+  const z = canvasRef.value.zoom;
+  const camX = canvasRef.value.camX;
+  const camY = canvasRef.value.camY;
+
+  const wStr = sourceNote.model.width.value.expanded;
+  const w = wStr === "Auto" ? 160 : parseFloat(wStr);
+  const sourceScreen = worldToScreen(
+    sourceNote.model.pos.value.x + w / 2,
+    sourceNote.model.pos.value.y + 40,
+    cx,
+    cy,
+    camX,
+    camY,
+    z,
+  );
+
+  return {
+    x1: sourceScreen.x,
+    y1: sourceScreen.y,
+    x2: arrowDrag.value.endX,
+    y2: arrowDrag.value.endY,
+  };
+});
+
 function onCanvasDoubleClick(e: MouseEvent) {
   const canvas = canvasRef.value;
   if (!canvas || !canvas.rootEl) return;
@@ -140,6 +183,40 @@ function onCanvasPointerUp() {
   boxState = null;
 }
 
+// --- arrow drag ---
+function onArrowDragStart(sourceId: string) {
+  arrowDrag.value = { sourceId, endX: 0, endY: 0 };
+  window.addEventListener("pointermove", onArrowDragMove);
+  window.addEventListener("pointerup", onArrowDragEnd);
+}
+
+function onArrowDragMove(e: PointerEvent) {
+  if (!arrowDrag.value) return;
+  arrowDrag.value.endX = e.clientX;
+  arrowDrag.value.endY = e.clientY;
+}
+
+function onArrowDragEnd(e: PointerEvent) {
+  window.removeEventListener("pointermove", onArrowDragMove);
+  window.removeEventListener("pointerup", onArrowDragEnd);
+
+  if (!arrowDrag.value) return;
+  const sourceId = arrowDrag.value.sourceId;
+  arrowDrag.value = null;
+
+  // Find target note under cursor
+  const targetEl = document.elementFromPoint(e.clientX, e.clientY);
+  if (!targetEl) return;
+
+  const noteEl = targetEl.closest("[data-note-id]") as HTMLElement | null;
+  if (!noteEl) return;
+
+  const targetId = noteEl.dataset.noteId;
+  if (!targetId || targetId === sourceId) return;
+
+  createArrow(sourceId, targetId);
+}
+
 function rectsIntersect(
   ax: number,
   ay: number,
@@ -401,6 +478,14 @@ function onKeyDown(e: KeyboardEvent) {
           e.preventDefault();
           alignBottom(selectedNotes);
           return;
+        case "h":
+          e.preventDefault();
+          distributeHorizontally(selectedNotes);
+          return;
+        case "v":
+          e.preventDefault();
+          distributeVertically(selectedNotes);
+          return;
       }
     }
   }
@@ -421,7 +506,9 @@ onUnmounted(() => {
       Double-click on the canvas to create a note. Scroll to pan, Ctrl+scroll to
       zoom. Click a note to select, Ctrl+click to multi-select, drag on empty
       canvas to box-select, Ctrl+A to select all, then press Delete to remove.
-      Shift+click another note to connect with an arrow.
+      Shift+click another note to connect with an arrow, or drag the small
+      handles that appear on selected note edges to draw an arrow.
+      Ctrl+Shift+L/C/R/T/M/B aligns selected notes; H/V distributes them.
     </div>
     <div class="relative">
       <SpatialWorldCanvas
@@ -463,6 +550,7 @@ onUnmounted(() => {
               ? createArrow(selection.activeId.value, note.id)
               : undefined
           "
+          @arrow-drag-start="onArrowDragStart($event.noteId)"
           @dragend="onNoteDragEnd"
         />
       </SpatialWorldCanvas>
@@ -478,6 +566,23 @@ onUnmounted(() => {
           height: `${selection.boxRect.value.height}px`,
         }"
       />
+
+      <!-- arrow drag preview line -->
+      <svg
+        v-if="previewLine"
+        class="pointer-events-none absolute inset-0 z-50 overflow-visible"
+      >
+        <line
+          :x1="previewLine.x1"
+          :y1="previewLine.y1"
+          :x2="previewLine.x2"
+          :y2="previewLine.y2"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-dasharray="4 4"
+          class="text-primary"
+        />
+      </svg>
     </div>
   </div>
 </template>

new-deepnotes/apps/web/src/features/spatial/alignment.test.ts

@@ -9,6 +9,8 @@ import {
   alignTop,
   alignMiddle,
   alignBottom,
+  distributeHorizontally,
+  distributeVertically,
 } from "./alignment";
 
 describe("alignment", () => {
@@ -111,4 +113,50 @@ describe("alignment", () => {
 
     expect(page.noteList.value.find((n) => n.id === n1)!.model.pos.value).toEqual({ x: 10, y: 20 });
   });
+
+  it("distributes notes horizontally", () => {
+    const ydoc = createPageYDoc();
+    const ur = useSpatialUndoRedo(ydoc);
+    const page = useSpatialPage(ydoc, ur);
+
+    const n1 = page.createNoteAt(0, 0);
+    const n2 = page.createNoteAt(50, 0);
+    const n3 = page.createNoteAt(100, 0);
+
+    distributeHorizontally(page.noteList.value);
+
+    expect(page.noteList.value.find((n) => n.id === n1)!.model.pos.value.x).toBe(0);
+    expect(page.noteList.value.find((n) => n.id === n2)!.model.pos.value.x).toBe(50);
+    expect(page.noteList.value.find((n) => n.id === n3)!.model.pos.value.x).toBe(100);
+  });
+
+  it("distributes notes vertically", () => {
+    const ydoc = createPageYDoc();
+    const ur = useSpatialUndoRedo(ydoc);
+    const page = useSpatialPage(ydoc, ur);
+
+    const n1 = page.createNoteAt(0, 0);
+    const n2 = page.createNoteAt(0, 40);
+    const n3 = page.createNoteAt(0, 80);
+
+    distributeVertically(page.noteList.value);
+
+    expect(page.noteList.value.find((n) => n.id === n1)!.model.pos.value.y).toBe(0);
+    expect(page.noteList.value.find((n) => n.id === n2)!.model.pos.value.y).toBe(40);
+    expect(page.noteList.value.find((n) => n.id === n3)!.model.pos.value.y).toBe(80);
+  });
+
+  it("does nothing for distribution with fewer than 3 notes", () => {
+    const ydoc = createPageYDoc();
+    const ur = useSpatialUndoRedo(ydoc);
+    const page = useSpatialPage(ydoc, ur);
+
+    const n1 = page.createNoteAt(10, 20);
+    const n2 = page.createNoteAt(100, 200);
+    distributeHorizontally(page.noteList.value);
+    distributeVertically(page.noteList.value);
+
+    expect(page.noteList.value.find((n) => n.id === n1)!.model.pos.value).toEqual({ x: 10, y: 20 });
+    expect(page.noteList.value.find((n) => n.id === n2)!.model.pos.value).toEqual({ x: 100, y: 200 });
+  });
 });