@erclx/canon 5.27.0 → 5.29.0

package/src/canvas/client/state.ts

@@ -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,26 @@ 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[]
+  /** Whether the server holds an edit to undo or redo, absent before undo shipped. */
+  readonly history?: HistoryFlags
+}
+
+export interface HistoryFlags {
+  readonly canUndo: boolean
+  readonly canRedo: boolean
 }
 
 export interface ChangeEvent {
@@ -101,6 +121,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 +135,70 @@ export const writeError = signal<string | undefined>(undefined)
 
 export const leftTab = signal<LeftTab>('pages')
 
+/** Whether the operator hid both side panels to see the whole surface. */
+export const panelsHidden = signal(false)
+
+export function togglePanels(): void {
+  panelsHidden.value = !panelsHidden.value
+}
+
+export type PanelSide = 'left' | 'right'
+
+export interface PanelWidths {
+  readonly left: number
+  readonly right: number
+}
+
+/** The 15rem and 16rem columns the shell opened at before panels resized. */
+export const DEFAULT_PANEL_WIDTHS: PanelWidths = { left: 240, right: 256 }
+export const MIN_PANEL_WIDTH = 180
+export const MAX_PANEL_WIDTH = 480
+/** What a panel never squeezes the surface below, the reflow floor. */
+export const MIN_SURFACE_WIDTH = 320
+
+export const panelWidths = signal<PanelWidths>(DEFAULT_PANEL_WIDTHS)
+
+/**
+ * Holds one panel between the floor and the ceiling, and under whatever keeps
+ * the surface at its own floor beside the other panel. The floor wins on a
+ * window too narrow for both.
+ */
+export function clampPanelWidth(
+  side: PanelSide,
+  width: number,
+  windowWidth: number,
+  widths: PanelWidths = panelWidths.value,
+): number {
+  const other = side === 'left' ? widths.right : widths.left
+  const ceiling = Math.min(
+    MAX_PANEL_WIDTH,
+    windowWidth - other - MIN_SURFACE_WIDTH,
+  )
+  const fallback = DEFAULT_PANEL_WIDTHS[side]
+  const wanted = Number.isFinite(width) ? width : fallback
+  return Math.round(Math.max(MIN_PANEL_WIDTH, Math.min(ceiling, wanted)))
+}
+
+export function setPanelWidth(
+  side: PanelSide,
+  width: number,
+  windowWidth: number,
+): void {
+  const next = clampPanelWidth(side, width, windowWidth)
+  if (panelWidths.value[side] === next) return
+  panelWidths.value = { ...panelWidths.value, [side]: next }
+}
+
+/** 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)
 
@@ -123,6 +210,14 @@ const SAVED_MS = 2500
 /** Why the last edit wrote nothing, until the next one lands. */
 export const editRefusal = signal<string | undefined>(undefined)
 
+const NO_HISTORY: HistoryFlags = { canUndo: false, canRedo: false }
+
+/** What the server's history holds, as the last page record reported it. */
+export const history = signal<HistoryFlags>(NO_HISTORY)
+
+/** Why the last undo or redo wrote nothing, until the next one runs. */
+export const historyNotice = signal<string | undefined>(undefined)
+
 /**
  * The hash an edit answered by frame key, until that frame reloads. A second
  * edit sent before the reload is made from the file the first one wrote, not
@@ -193,10 +288,63 @@ 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 ?? [])
+  history.value = record.history ?? NO_HISTORY
   loadError.value = undefined
   isLoaded.value = true
 }
@@ -317,11 +465,22 @@ const EDIT_NOTICES: Readonly<Record<string, string | undefined>> = {
     'Could not save the text, since this element holds other elements.',
 }
 
+let stepCount = 0
+
+/**
+ * A token the edits of one gesture share, so the server merges them into one
+ * undo. The time keeps it apart from a token an earlier shell load sent.
+ */
+export function newStep(): string {
+  stepCount += 1
+  return `${Date.now().toString(36)}-${stepCount}`
+}
+
 /**
  * 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. Resolves to what the write answered, or undefined when
- * nothing was written.
+ * nothing was written. Edits carrying one step undo as one.
  */
 export async function editElement(
   ref: FrameRef,
@@ -329,6 +488,7 @@ export async function editElement(
   address: ElementAddress,
   property: string,
   value: string,
+  step?: string,
   fetchImpl: typeof fetch = fetch,
 ): Promise<{ readonly hash?: string } | undefined> {
   const hash = editedHashes.value.get(key) ?? address.hash
@@ -342,6 +502,7 @@ export async function editElement(
         element: { ...address, hash },
         property,
         value,
+        ...(step !== undefined && { step }),
       }),
     })
     const body: unknown = await response.json().catch(() => undefined)
@@ -362,6 +523,7 @@ export async function editElement(
       return undefined
     }
     editRefusal.value = undefined
+    historyNotice.value = undefined
     const saved = pendingEdit.value
     savedEdit.value = saved
     setTimeout(() => {
@@ -381,10 +543,11 @@ export async function editElement(
 }
 
 /**
- * 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.
+ * Writes an element's new size as one edit per changed axis, width first,
+ * sharing one step so a single undo restores both. 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,
@@ -394,6 +557,7 @@ export async function resizeElement(
   height: number | undefined,
   fetchImpl: typeof fetch = fetch,
 ): Promise<void> {
+  const step = newStep()
   let current = address
   if (width !== undefined) {
     const written = await editElement(
@@ -402,16 +566,79 @@ export async function resizeElement(
       current,
       'width',
       `${width}px`,
+      step,
       fetchImpl,
     )
     if (!written) return
     if (written.hash) current = { ...current, hash: written.hash }
   }
   if (height !== undefined) {
-    await editElement(ref, key, current, 'height', `${height}px`, fetchImpl)
+    await editElement(
+      ref,
+      key,
+      current,
+      'height',
+      `${height}px`,
+      step,
+      fetchImpl,
+    )
   }
 }
 
+const HISTORY_NOTICES = {
+  undo: 'Could not undo, since that element or frame changed after your edit. Nothing was written.',
+  redo: 'Could not redo, since that element or frame changed after the undo. Nothing was written.',
+} as const
+
+/**
+ * Asks the server to step its history and rereads the page list for the new
+ * flags. A written step clears every hash an edit answered, since the frame
+ * it named was just rewritten under it. The frame itself reloads on the
+ * change event the write raises.
+ */
+async function stepHistory(
+  direction: 'undo' | 'redo',
+  fetchImpl: typeof fetch,
+): Promise<void> {
+  try {
+    const response = await fetchImpl(`/api/history/${direction}`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: '{}',
+    })
+    const body: unknown = await response.json().catch(() => undefined)
+    const outcome =
+      typeof body === 'object' && body !== null && 'outcome' in body
+        ? body.outcome
+        : undefined
+    if (!response.ok) {
+      historyNotice.value = `Could not ${direction} (status ${response.status}). Try again.`
+    } else if (outcome === 'dropped') {
+      historyNotice.value = HISTORY_NOTICES[direction]
+    } else if (outcome === 'applied') {
+      const done = direction === 'undo' ? 'Undone' : 'Redone'
+      historyNotice.value = done
+      setTimeout(() => {
+        if (historyNotice.value === done) historyNotice.value = undefined
+      }, SAVED_MS)
+    } else {
+      historyNotice.value = undefined
+    }
+    if (outcome === 'applied') editedHashes.value = new Map()
+  } catch (error) {
+    historyNotice.value = `Could not ${direction} (${error instanceof Error ? error.message : 'unknown'}). Check canon canvas serve is still running.`
+  }
+  await loadPages(fetchImpl)
+}
+
+export function undo(fetchImpl: typeof fetch = fetch): Promise<void> {
+  return stepHistory('undo', fetchImpl)
+}
+
+export function redo(fetchImpl: typeof fetch = fetch): Promise<void> {
+  return stepHistory('redo', 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.
@@ -487,11 +714,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))
@@ -500,14 +735,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,
   }
 }
@@ -537,12 +772,21 @@ 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
   editedHashes.value = new Map()
+  history.value = NO_HISTORY
+  historyNotice.value = undefined
+  panelsHidden.value = false
+  panelWidths.value = DEFAULT_PANEL_WIDTHS
 }