@erclx/canon 5.26.0 → 5.28.0

package/src/canvas/client/state.ts

@@ -1,6 +1,6 @@
 import { computed, signal } from '@preact/signals'
 import type { ElementAddress } from '@/canvas/address'
-import type { Frame, Page } from '@/canvas/content'
+import type { Box, Frame, Page } from '@/canvas/content'
 import type { TokenGroup } from '@/canvas/tokens'
 
 /**
@@ -22,6 +22,11 @@ export interface TokenSource {
 
 export type LeftTab = 'pages' | 'theme'
 
+export type Tool = 'move' | 'pan'
+
+/** A Space pan held, and whether a drag has moved the view while it was. */
+export type SpacePan = 'held' | 'dragged'
+
 /** One property change to the selected element, as the inspector posts it. */
 export interface PendingEdit {
   readonly key: string
@@ -45,11 +50,19 @@ export interface SelectionRef extends FrameRef {
   readonly element?: ElementRef
 }
 
+/** A frame a session says it is editing, until the stamp it expires at. */
+export interface EditingRef extends FrameRef {
+  readonly by: string
+  readonly until: string
+}
+
 export interface PagesRecord {
   readonly pages: readonly Page[]
   readonly tokens: TokenSource
   /** Absent when nothing is selected or the selected frame is gone. */
   readonly selection?: SelectionRef | null
+  /** The live marks, which a server older than the mark leaves out. */
+  readonly editing?: readonly EditingRef[]
 }
 
 export interface ChangeEvent {
@@ -101,6 +114,9 @@ export const hoveredElement = signal<
   { readonly key: string; readonly index: number } | undefined
 >(undefined)
 
+/** Each marked frame's mark by frame key, dropped at its `until`. */
+export const editingFrames = signal<ReadonlyMap<string, EditingRef>>(new Map())
+
 /** Frame keys whose layers are open in the pages panel. */
 export const expandedFrames = signal<ReadonlySet<string>>(new Set())
 
@@ -112,6 +128,16 @@ export const writeError = signal<string | undefined>(undefined)
 
 export const leftTab = signal<LeftTab>('pages')
 
+/** The tool the strip has lit, which a Space pan overrides while held. */
+export const activeTool = signal<Tool>('move')
+
+export const spacePan = signal<SpacePan | undefined>(undefined)
+
+/** The tool in effect, so Space shows Pan lit and releasing it restores it. */
+export const shownTool = computed<Tool>(() =>
+  spacePan.value ? 'pan' : activeTool.value,
+)
+
 /** The edit in flight, which holds its field until the server answers. */
 export const pendingEdit = signal<PendingEdit | undefined>(undefined)
 
@@ -193,10 +219,62 @@ export function toggleLayers(key: string): void {
   expandedFrames.value = next
 }
 
+/*
+ * An expiry writes no file and raises no change event, so nothing rereads the
+ * page list when a mark lapses. One timer, set for the earliest `until`, drops
+ * it instead, and every record resets it.
+ */
+let editingTimer: ReturnType<typeof setTimeout> | undefined
+
+/*
+ * The longest delay a timer holds. A longer one fires at once, so an `until`
+ * far out would reschedule on every tick rather than wait.
+ */
+const MAX_TIMER_MS = 2 ** 31 - 1
+
+function liveMarks(
+  marks: Iterable<readonly [string, EditingRef]>,
+  now: number,
+): ReadonlyMap<string, EditingRef> {
+  return new Map([...marks].filter(([, mark]) => Date.parse(mark.until) > now))
+}
+
+function scheduleExpiry(): void {
+  clearTimeout(editingTimer)
+  editingTimer = undefined
+  const next = Math.min(
+    ...[...editingFrames.value.values()].map((mark) => Date.parse(mark.until)),
+  )
+  if (!Number.isFinite(next)) return
+  editingTimer = setTimeout(
+    () => {
+      editingFrames.value = liveMarks(editingFrames.value, Date.now())
+      scheduleExpiry()
+    },
+    Math.min(MAX_TIMER_MS, Math.max(0, next - Date.now())),
+  )
+}
+
+/** Keys each mark by the file of the frame it names, as the surface reads. */
+function applyEditing(
+  all: readonly Page[],
+  marks: readonly EditingRef[],
+): void {
+  const keyed = marks.flatMap((mark) => {
+    const frame = all
+      .find((candidate) => candidate.name === mark.page)
+      ?.frames.find((candidate) => candidate.name === mark.frame)
+    return frame ? [[frameKey(mark.page, frame), mark] as const] : []
+  })
+  editingFrames.value = liveMarks(keyed, Date.now())
+  scheduleExpiry()
+}
+
 export function applyRecord(record: PagesRecord): void {
   pages.value = record.pages
   tokens.value = record.tokens
   selection.value = record.selection ?? undefined
+  applyEditing(record.pages, record.editing ?? [])
   loadError.value = undefined
   isLoaded.value = true
 }
@@ -320,7 +398,8 @@ const EDIT_NOTICES: Readonly<Record<string, string | undefined>> = {
 /**
  * Posts one property change to the element the address names. A refusal
  * says why and reloads the frame, so a pending value never sits over a file
- * that moved under it.
+ * that moved under it. Resolves to what the write answered, or undefined when
+ * nothing was written.
  */
 export async function editElement(
   ref: FrameRef,
@@ -329,7 +408,7 @@ export async function editElement(
   property: string,
   value: string,
   fetchImpl: typeof fetch = fetch,
-): Promise<void> {
+): Promise<{ readonly hash?: string } | undefined> {
   const hash = editedHashes.value.get(key) ?? address.hash
   pendingEdit.value = { key, index: address.index, property }
   try {
@@ -358,7 +437,7 @@ export async function editElement(
           : `Could not save (status ${response.status}). Check canon canvas serve is still running.`)
       reloadFrame(key)
       await loadPages(fetchImpl)
-      return
+      return undefined
     }
     editRefusal.value = undefined
     const saved = pendingEdit.value
@@ -366,18 +445,51 @@ export async function editElement(
     setTimeout(() => {
       if (savedEdit.value === saved) savedEdit.value = undefined
     }, SAVED_MS)
-    if (typeof record.hash === 'string') {
-      const hashes = new Map(editedHashes.value)
-      hashes.set(key, record.hash)
-      editedHashes.value = hashes
-    }
+    if (typeof record.hash !== 'string') return {}
+    const hashes = new Map(editedHashes.value)
+    hashes.set(key, record.hash)
+    editedHashes.value = hashes
+    return { hash: record.hash }
   } catch (error) {
     editRefusal.value = `Could not save (${error instanceof Error ? error.message : 'unknown'}). Check canon canvas serve is still running.`
+    return undefined
   } finally {
     pendingEdit.value = undefined
   }
 }
 
+/**
+ * Writes an element's new size as one edit per changed axis, width first. The
+ * second carries the hash the first answered, so a frame reloading between the
+ * two cannot leave it holding the hash of a file already rewritten. A refused
+ * first edit sends no second.
+ */
+export async function resizeElement(
+  ref: FrameRef,
+  key: string,
+  address: ElementAddress,
+  width: number | undefined,
+  height: number | undefined,
+  fetchImpl: typeof fetch = fetch,
+): Promise<void> {
+  let current = address
+  if (width !== undefined) {
+    const written = await editElement(
+      ref,
+      key,
+      current,
+      'width',
+      `${width}px`,
+      fetchImpl,
+    )
+    if (!written) return
+    if (written.hash) current = { ...current, hash: written.hash }
+  }
+  if (height !== undefined) {
+    await editElement(ref, key, current, 'height', `${height}px`, fetchImpl)
+  }
+}
+
 /**
  * Moves a frame on the surface without writing, which a drag calls on every
  * pointer move. The next reread replaces it with what the layout holds.
@@ -406,6 +518,32 @@ export async function moveFrameTo(
   await write('/api/frames/move', { ...ref, x, y }, fetchImpl)
 }
 
+/** Resizes a frame on the surface without writing, as a handle drag does. */
+export function previewResize(ref: FrameRef, box: Box): void {
+  pages.value = pages.value.map((candidate) =>
+    candidate.name === ref.page
+      ? {
+          ...candidate,
+          frames: candidate.frames.map((frame) =>
+            frame.name === ref.frame
+              ? { ...frame, ...box, placed: true }
+              : frame,
+          ),
+        }
+      : candidate,
+  )
+}
+
+/** Shows the new box and writes it through the server's shared layout writer. */
+export async function resizeFrameTo(
+  ref: FrameRef,
+  box: Box,
+  fetchImpl: typeof fetch = fetch,
+): Promise<void> {
+  previewResize(ref, box)
+  await write('/api/frames/resize', { ...ref, ...box }, fetchImpl)
+}
+
 export function clampZoom(zoom: number): number {
   return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom))
 }
@@ -427,11 +565,19 @@ export function panBy(dx: number, dy: number): void {
   view.value = { ...current, x: current.x + dx, y: current.y + dy }
 }
 
-/** Fits every frame on the current page into a viewport of the given size. */
-export function fitView(width: number, height: number, padding = 48): void {
+/**
+ * Fits every frame on the current page into a viewport of the given size,
+ * clear of `insetLeft` pixels of chrome floating over its left edge.
+ */
+export function fitView(
+  width: number,
+  height: number,
+  padding = 48,
+  insetLeft = 0,
+): void {
   const frames = currentPage.value?.frames ?? []
   if (frames.length === 0 || width <= 0 || height <= 0) {
-    view.value = { x: padding, y: padding, zoom: 0.5 }
+    view.value = { x: insetLeft + padding, y: padding, zoom: 0.5 }
     return
   }
   const left = Math.min(...frames.map((frame) => frame.x))
@@ -440,14 +586,14 @@ export function fitView(width: number, height: number, padding = 48): void {
   const bottom = Math.max(...frames.map((frame) => frame.y + frame.height))
   const zoom = clampZoom(
     Math.min(
-      (width - padding * 2) / (right - left),
+      (width - insetLeft - padding * 2) / (right - left),
       (height - padding * 2) / (bottom - top),
       1,
     ),
   )
   view.value = {
     zoom,
-    x: padding - left * zoom,
+    x: insetLeft + padding - left * zoom,
     y: padding - top * zoom,
   }
 }
@@ -477,10 +623,15 @@ export function resetState(): void {
   selection.value = undefined
   frameDocuments.value = new Map()
   hoveredElement.value = undefined
+  editingFrames.value = new Map()
+  clearTimeout(editingTimer)
+  editingTimer = undefined
   expandedFrames.value = new Set()
   draggingFrame.value = undefined
   writeError.value = undefined
   leftTab.value = 'pages'
+  activeTool.value = 'move'
+  spacePan.value = undefined
   pendingEdit.value = undefined
   savedEdit.value = undefined
   editRefusal.value = undefined