@erclx/canon 5.26.0 → 5.28.0

package/src/canvas/client/selection.tsx

@@ -0,0 +1,199 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { useRef, useState } from 'preact/hooks'
+import { shownTool, 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
+    /* A pan drag starting on a handle belongs to the surface behind it. */
+    if (shownTool.value === 'pan') 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

@@ -217,6 +217,27 @@ code {
   cursor: grabbing;
 }
 
+/* Inset, so the panels on either side never clip the ring. */
+.surface:focus-visible {
+  outline-offset: -2px;
+}
+
+/*
+ * While panning, a frame takes no pointer, so a drag over one moves the view
+ * rather than picking an element, and the cursor reads the viewport's grab.
+ * The descendants are named too, since a selection handle sets its own
+ * pointer events and would otherwise take the drag as a resize. Nothing in
+ * the viewport starts a text selection while a pan drags across it.
+ */
+.surface[data-tool='pan'] .viewport {
+  user-select: none;
+}
+
+.surface[data-tool='pan'] .frame,
+.surface[data-tool='pan'] .frame * {
+  pointer-events: none;
+}
+
 .plane {
   position: absolute;
   top: 0;
@@ -237,14 +258,33 @@ 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 every part wraps the theme switch, then the editing
+   * badge, 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);
@@ -255,10 +295,45 @@ code {
   font-variant-numeric: tabular-nums;
 }
 
+/*
+ * Ahead of the theme switch, so a row too short for both wraps the switch
+ * first. The editing outline still marks the frame when the badge wraps too.
+ */
+.frame-editing {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(4px * var(--outline-scale, 1));
+  padding: calc(1px * var(--outline-scale, 1))
+    calc(6px * var(--outline-scale, 1));
+  border-radius: var(--radius-pill);
+  background: color-mix(in srgb, var(--color-success) 16%, transparent);
+  color: var(--color-success);
+  font-weight: 600;
+}
+
+.frame-editing:empty {
+  display: none;
+}
+
+.frame-editing::before {
+  content: '';
+  width: calc(6px * var(--outline-scale, 1));
+  height: calc(6px * var(--outline-scale, 1));
+  border-radius: 50%;
+  background: currentColor;
+}
+
+/* Dashed, so it reads apart from the solid accent of a selection. */
+.frame[data-editing='true'] iframe {
+  outline: calc(2px * var(--outline-scale, 1)) dashed var(--color-success);
+  outline-offset: calc(2px * var(--outline-scale, 1));
+}
+
 .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 +376,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 {
@@ -333,6 +481,56 @@ code {
   background: var(--color-chrome);
 }
 
+.tools {
+  position: absolute;
+  top: var(--space-md);
+  left: var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--space-xs);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-panel);
+  background: var(--color-chrome);
+}
+
+.tool-button {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-action);
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+.tool-button svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.3;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.tool-button[data-tool='move'] svg {
+  fill: currentColor;
+}
+
+.tool-button:hover {
+  color: var(--color-text);
+  background: var(--color-surface);
+}
+
+.tool-button[aria-pressed='true'] {
+  color: var(--color-text);
+  background: var(--color-border);
+}
+
 .zoom {
   min-width: 3.5rem;
   text-align: center;