@erclx/canon 5.25.0 → 5.27.0

package/src/canvas/client/selection.tsx

@@ -0,0 +1,197 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { useRef, useState } from 'preact/hooks'
+import { view } from '@/canvas/client/state'
+
+/** Screen pixels a press travels before it reads as a drag and not a click. */
+export const DRAG_THRESHOLD = 3
+
+/** The smallest box a handle drag leaves, in surface units. */
+const MIN_SIZE = 1
+
+export type Corner = 'nw' | 'ne' | 'sw' | 'se'
+
+const CORNERS: readonly Corner[] = ['nw', 'ne', 'sw', 'se']
+
+export interface OverlayBox {
+  readonly x: number
+  readonly y: number
+  readonly width: number
+  readonly height: number
+}
+
+/**
+ * The box a corner drag leaves, with the delta already in surface units. The
+ * corner opposite the one dragged stays put, so a west or north handle moves
+ * the box as it resizes it.
+ */
+export function resizedBox(
+  origin: OverlayBox,
+  corner: Corner,
+  dx: number,
+  dy: number,
+): OverlayBox {
+  const isWest = corner === 'nw' || corner === 'sw'
+  const isNorth = corner === 'nw' || corner === 'ne'
+  const width = Math.max(MIN_SIZE, origin.width + (isWest ? -dx : dx))
+  const height = Math.max(MIN_SIZE, origin.height + (isNorth ? -dy : dy))
+  return {
+    x: isWest ? origin.x + origin.width - width : origin.x,
+    y: isNorth ? origin.y + origin.height - height : origin.y,
+    width,
+    height,
+  }
+}
+
+export function sizeLabel(box: Pick<OverlayBox, 'width' | 'height'>): string {
+  return `${Math.round(box.width)} × ${Math.round(box.height)}`
+}
+
+interface HandleGesture {
+  readonly corner: Corner
+  readonly startX: number
+  readonly startY: number
+  readonly origin: OverlayBox
+  box: OverlayBox
+  moved: boolean
+}
+
+export interface SelectionOverlayProps {
+  readonly kind: 'frame' | 'element'
+  /** Read on every render, so a box the drag previewed is what shows after. */
+  readonly measure: () => OverlayBox
+  /** Subtracted from the box to place the overlay inside its container. */
+  readonly offset?: { readonly x: number; readonly y: number }
+  readonly hasChip?: boolean
+  /**
+   * Draws the target's own measured box during a drag rather than the dragged
+   * one. An element in normal flow grows from its own top left whichever corner
+   * is dragged, so only its measured box shows where it actually sits.
+   */
+  readonly isMeasuredWhileDragging?: boolean
+  readonly onStart?: () => void
+  readonly onPreview?: (box: OverlayBox, origin: OverlayBox) => void
+  readonly onCommit: (box: OverlayBox, origin: OverlayBox) => void
+  readonly onCancel?: (origin: OverlayBox) => void
+}
+
+/**
+ * The selected frame's or element's outline, its four corner handles, and an
+ * element's size chip. Every part sizes against `--outline-scale`, so it keeps
+ * one screen weight at any zoom.
+ */
+export function SelectionOverlay({
+  kind,
+  measure,
+  offset = { x: 0, y: 0 },
+  hasChip = false,
+  isMeasuredWhileDragging = false,
+  onStart,
+  onPreview,
+  onCommit,
+  onCancel,
+}: SelectionOverlayProps): JSX.Element {
+  const gesture = useRef<HandleGesture | undefined>(undefined)
+  const [dragged, setDragged] = useState<OverlayBox | undefined>(undefined)
+  const box = dragged ?? measure()
+
+  const handlePointerDown = (corner: Corner) => (event: PointerEvent) => {
+    if (event.button !== 0) return
+    event.preventDefault()
+    event.stopPropagation()
+    const origin = measure()
+    gesture.current = {
+      corner,
+      startX: event.clientX,
+      startY: event.clientY,
+      origin,
+      box: origin,
+      moved: false,
+    }
+    ;(event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId)
+  }
+
+  const handlePointerMove = (event: PointerEvent) => {
+    const current = gesture.current
+    if (!current) return
+    const dx = event.clientX - current.startX
+    const dy = event.clientY - current.startY
+    if (!current.moved && Math.hypot(dx, dy) < DRAG_THRESHOLD) return
+    if (!current.moved) onStart?.()
+    current.moved = true
+    /* The delta is in screen pixels and the box in surface units. */
+    const { zoom } = view.value
+    current.box = resizedBox(
+      current.origin,
+      current.corner,
+      Math.round(dx / zoom),
+      Math.round(dy / zoom),
+    )
+    onPreview?.(current.box, current.origin)
+    setDragged(isMeasuredWhileDragging ? measure() : current.box)
+  }
+
+  const handlePointerUp = () => {
+    const current = gesture.current
+    gesture.current = undefined
+    if (current?.moved) onCommit(current.box, current.origin)
+    setDragged(undefined)
+  }
+
+  const handlePointerCancel = () => {
+    const current = gesture.current
+    gesture.current = undefined
+    if (current?.moved) onCancel?.(current.origin)
+    setDragged(undefined)
+  }
+
+  return (
+    <div
+      class="selection"
+      data-selection={kind}
+      data-resizing={dragged ? 'true' : undefined}
+      style={{
+        left: `${box.x - offset.x}px`,
+        top: `${box.y - offset.y}px`,
+        width: `${box.width}px`,
+        height: `${box.height}px`,
+      }}
+    >
+      {CORNERS.map((corner) => (
+        <span
+          key={corner}
+          class="selection-handle"
+          data-handle={corner}
+          aria-hidden="true"
+          onPointerDown={handlePointerDown(corner)}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerCancel}
+        />
+      ))}
+      {hasChip ? (
+        <span class="selection-chip" aria-hidden="true">
+          {sizeLabel(box)}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+/** The element under the pointer, drawn without handles. */
+export function HoverOutline({ element }: { readonly element: Element }) {
+  const rect = element.getBoundingClientRect()
+  return (
+    <div
+      class="element-outline"
+      data-outline="hover"
+      aria-hidden="true"
+      style={{
+        left: `${rect.left}px`,
+        top: `${rect.top}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+      }}
+    />
+  )
+}

package/src/canvas/client/shell.css

@@ -237,14 +237,32 @@ code {
   right: 0;
   display: flex;
   align-items: center;
-  gap: var(--space-sm);
-  padding-bottom: var(--space-sm);
-  font-size: 1.5rem;
+  /*
+   * Sized against the zoom, so the label reads at one screen size at any zoom.
+   * A row too short for all three parts wraps the theme switch and then the
+   * size onto lines the clip hides, so the name keeps the row longest.
+   */
+  flex-wrap: wrap;
+  align-content: flex-start;
+  column-gap: calc(6px * var(--outline-scale, 1));
+  row-gap: calc(40px * var(--outline-scale, 1));
+  height: calc(25px * var(--outline-scale, 1));
+  overflow: clip;
+  overflow-clip-margin: calc(4px * var(--outline-scale, 1));
+  padding-bottom: calc(6px * var(--outline-scale, 1));
+  font-size: calc(11px * var(--outline-scale, 1));
+  line-height: 1.3;
   color: var(--color-text-secondary);
   white-space: nowrap;
 }
 
+/* A theme switch focused on a hidden line shows rather than staying hidden. */
+.frame-label:focus-within {
+  overflow: visible;
+}
+
 .frame-name {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--color-text);
@@ -257,8 +275,9 @@ code {
 
 .frame-theme {
   margin-left: auto;
-  padding: 2px var(--space-sm);
-  border: 1px solid var(--color-border);
+  padding: calc(1px * var(--outline-scale, 1))
+    calc(6px * var(--outline-scale, 1));
+  border: calc(1px * var(--outline-scale, 1)) solid var(--color-border);
   border-radius: var(--radius-pill);
   background: var(--color-surface);
   color: var(--color-text-secondary);
@@ -301,18 +320,91 @@ code {
   outline: calc(1px * var(--outline-scale, 1)) dashed var(--color-accent);
 }
 
-.element-outline[data-outline='selected'] {
-  outline: calc(2px * var(--outline-scale, 1)) solid var(--color-accent);
-}
-
 /* Above its neighbors, so a frame dragged over another stays whole. */
 .frame[data-selected='true'] {
   z-index: 1;
 }
 
-.frame[data-selected='true'] iframe {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
+/* A selected frame names itself in the accent, and a picked element does not. */
+.frame[data-selected='true']:not([data-picked]) .frame-name {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+/*
+ * The selected frame's or element's outline, handles, and size chip. Every
+ * length multiplies by the outline scale, so each holds one screen size.
+ */
+.selection {
+  --handle: calc(8px * var(--outline-scale, 1));
+  --handle-hit: calc(24px * var(--outline-scale, 1));
+  position: absolute;
+  pointer-events: none;
+  outline: calc(1px * var(--outline-scale, 1)) solid var(--color-accent);
+}
+
+/* Inset by the iframe border, so the box lines up with the element it marks. */
+.selection[data-selection='element'] {
+  translate: 1px 1px;
+}
+
+/* A 24 pixel hit area around an 8 pixel square, per the target size minimum. */
+.selection-handle {
+  position: absolute;
+  width: var(--handle-hit);
+  height: var(--handle-hit);
+  margin: calc(var(--handle-hit) / -2);
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.selection-handle::after {
+  content: '';
+  position: absolute;
+  inset: calc((var(--handle-hit) - var(--handle)) / 2);
+  border: calc(1px * var(--outline-scale, 1)) solid var(--color-accent);
+  background: var(--color-background);
+}
+
+.selection-handle[data-handle='nw'] {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+}
+
+.selection-handle[data-handle='ne'] {
+  top: 0;
+  left: 100%;
+  cursor: nesw-resize;
+}
+
+.selection-handle[data-handle='sw'] {
+  top: 100%;
+  left: 0;
+  cursor: nesw-resize;
+}
+
+.selection-handle[data-handle='se'] {
+  top: 100%;
+  left: 100%;
+  cursor: nwse-resize;
+}
+
+.selection-chip {
+  position: absolute;
+  top: calc(100% + 8px * var(--outline-scale, 1));
+  left: 50%;
+  translate: -50% 0;
+  padding: calc(2px * var(--outline-scale, 1))
+    calc(5px * var(--outline-scale, 1));
+  border-radius: calc(3px * var(--outline-scale, 1));
+  background: var(--color-accent);
+  color: var(--color-background);
+  font-family: var(--type-code-family);
+  font-size: calc(11px * var(--outline-scale, 1));
+  line-height: 1.3;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
 .frame:focus-visible {

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'
 
 /**
@@ -320,7 +320,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 +330,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 +359,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 +367,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 +440,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))
 }

package/src/canvas/client/surface.tsx

@@ -16,7 +16,10 @@ import {
   moveFrameTo,
   panBy,
   previewMove,
+  previewResize,
   registerFrameDocument,
+  resizeElement,
+  resizeFrameTo,
   selectElement,
   selectFrame,
   selection,
@@ -25,13 +28,16 @@ import {
   view,
   zoomAt,
 } from '@/canvas/client/state'
+import {
+  DRAG_THRESHOLD,
+  HoverOutline,
+  type OverlayBox,
+  SelectionOverlay,
+} from '@/canvas/client/selection'
 
 /** One wheel notch or one button press. */
 const ZOOM_STEP = 1.2
 
-/** Screen pixels a press travels before it reads as a drag and not a click. */
-const DRAG_THRESHOLD = 3
-
 /** Surface units one arrow press moves a frame, and one with Shift held. */
 const NUDGE = 10
 const NUDGE_LARGE = 50
@@ -76,25 +82,111 @@ function asElement(target: EventTarget | null): Element | undefined {
   return node?.nodeType === 1 ? (node as Element) : undefined
 }
 
-function ElementOutline({
-  element,
-  kind,
+/** A computed length in pixels, or the fallback for one that is not. */
+function pixels(value: string, fallback: number): number {
+  const parsed = Number.parseFloat(value)
+  return value.endsWith('px') && Number.isFinite(parsed) ? parsed : fallback
+}
+
+/**
+ * The selected element's overlay. A handle drag previews the size as inline
+ * style on the element and writes it once on release, the way the inspector's
+ * scrub does. The drag measures the border box while `width` and `height` set
+ * whatever box the element sizes by, so the delta is added to the computed
+ * value rather than written as the box itself.
+ */
+function ElementSelection({
+  node,
+  doc,
+  frameRef,
+  docKey,
 }: {
-  readonly element: Element
-  readonly kind: 'hover' | 'selected'
+  readonly node: Element
+  readonly doc: Document
+  readonly frameRef: FrameRef
+  readonly docKey: string
 }): JSX.Element {
-  const rect = element.getBoundingClientRect()
+  const start = useRef<
+    | {
+        readonly width: number
+        readonly height: number
+        readonly inlineWidth: string
+        readonly inlineHeight: string
+      }
+    | undefined
+  >(undefined)
+  const style = (node as HTMLElement).style
+
+  const measure = () => {
+    const rect = node.getBoundingClientRect()
+    return { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
+  }
+
+  const cssSize = (box: OverlayBox, origin: OverlayBox) => {
+    const from = start.current
+    return {
+      width: Math.round(
+        (from?.width ?? origin.width) + box.width - origin.width,
+      ),
+      height: Math.round(
+        (from?.height ?? origin.height) + box.height - origin.height,
+      ),
+    }
+  }
+
+  const handleStart = () => {
+    const computed = doc.defaultView?.getComputedStyle(node)
+    const rect = node.getBoundingClientRect()
+    start.current = {
+      width: pixels(computed?.width ?? '', rect.width),
+      height: pixels(computed?.height ?? '', rect.height),
+      inlineWidth: style.getPropertyValue('width'),
+      inlineHeight: style.getPropertyValue('height'),
+    }
+  }
+
+  const handlePreview = (box: OverlayBox, from: OverlayBox) => {
+    const size = cssSize(box, from)
+    style.setProperty('width', `${size.width}px`)
+    style.setProperty('height', `${size.height}px`)
+  }
+
+  const restore = () => {
+    const from = start.current
+    if (!from) return
+    style.setProperty('width', from.inlineWidth)
+    style.setProperty('height', from.inlineHeight)
+  }
+
+  const handleCommit = (box: OverlayBox, from: OverlayBox) => {
+    const size = cssSize(box, from)
+    const address = addressOf(doc, node)
+    const isUnchanged = box.width === from.width && box.height === from.height
+    if (!address || isUnchanged) {
+      restore()
+      return
+    }
+    void resizeElement(
+      frameRef,
+      docKey,
+      address,
+      box.width === from.width ? undefined : size.width,
+      box.height === from.height ? undefined : size.height,
+    )
+  }
+
+  const handleCancel = restore
+
   return (
-    <div
-      class="element-outline"
-      data-outline={kind}
-      aria-hidden="true"
-      style={{
-        left: `${rect.left}px`,
-        top: `${rect.top}px`,
-        width: `${rect.width}px`,
-        height: `${rect.height}px`,
-      }}
+    <SelectionOverlay
+      kind="element"
+      measure={measure}
+      hasChip
+      isMeasuredWhileDragging
+      onStart={handleStart}
+      onPreview={handlePreview}
+      onCommit={handleCommit}
+      onCancel={handleCancel}
     />
   )
 }
@@ -263,15 +355,33 @@ function FrameView({
     const delta = ARROWS[event.key]
     if (!delta || !isSelected) return
     event.preventDefault()
+    /* The keyboard path for a handle drag: right and down grow the frame. */
+    if (event.ctrlKey || event.metaKey) {
+      void resizeFrameTo(ref, {
+        x: frame.x,
+        y: frame.y,
+        width: Math.max(1, frame.width + delta.x * step),
+        height: Math.max(1, frame.height + delta.y * step),
+      })
+      return
+    }
     void moveFrameTo(ref, frame.x + delta.x * step, frame.y + delta.y * step)
   }
 
+  const frameBox = (): OverlayBox => ({
+    x: frame.x,
+    y: frame.y,
+    width: frame.width,
+    height: frame.height,
+  })
+
   const next = value === 'dark' ? 'light' : 'dark'
   return (
     <figure
       class="frame"
       data-frame={frame.name}
       data-selected={isSelected ? 'true' : undefined}
+      data-picked={picked ? 'true' : undefined}
       data-dragging={draggingFrame.value === frame.name ? 'true' : undefined}
       tabIndex={0}
       aria-label={`${frame.name}, ${frame.width} by ${frame.height}`}
@@ -318,10 +428,25 @@ function FrameView({
           onLoad={handleLoad}
         />
         {hoveredNode && hoveredNode !== selectedNode ? (
-          <ElementOutline element={hoveredNode} kind="hover" />
+          <HoverOutline element={hoveredNode} />
+        ) : null}
+        {isSelected && !picked ? (
+          <SelectionOverlay
+            kind="frame"
+            measure={frameBox}
+            offset={{ x: frame.x, y: frame.y }}
+            onPreview={(box) => previewResize(ref, box)}
+            onCommit={(box) => void resizeFrameTo(ref, box)}
+            onCancel={(origin) => previewResize(ref, origin)}
+          />
         ) : null}
-        {selectedNode ? (
-          <ElementOutline element={selectedNode} kind="selected" />
+        {doc && selectedNode ? (
+          <ElementSelection
+            node={selectedNode}
+            doc={doc}
+            frameRef={ref}
+            docKey={key}
+          />
         ) : null}
       </div>
     </figure>