@erclx/canon 5.27.0 → 5.29.0

package/src/canvas/client/panel-handle.tsx

@@ -0,0 +1,90 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { useRef } from 'preact/hooks'
+import {
+  clampPanelWidth,
+  MAX_PANEL_WIDTH,
+  MIN_PANEL_WIDTH,
+  type PanelSide,
+  panelWidths,
+  setPanelWidth,
+} from '@/canvas/client/state'
+
+const KEY_STEP = 16
+const SHIFT_STEP = 64
+
+const NAMES: Readonly<Record<PanelSide, string>> = {
+  left: 'Resize pages panel',
+  right: 'Resize details panel',
+}
+
+/**
+ * The drag handle on a panel's inner edge, a focusable separator the arrow
+ * keys move as well. It sits outside the surface, so a drag on it never pans,
+ * moves a frame, or reaches the undo history.
+ */
+export function PanelHandle({
+  side,
+  controls,
+}: {
+  readonly side: PanelSide
+  readonly controls: string
+}): JSX.Element {
+  const drag = useRef<{ x: number; width: number } | undefined>(undefined)
+  const width = panelWidths.value[side]
+  /* Dragging right widens the left panel and narrows the right one. */
+  const sign = side === 'left' ? 1 : -1
+
+  const handlePointerDown = (event: PointerEvent) => {
+    event.preventDefault()
+    drag.current = { x: event.clientX, width }
+    ;(event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId)
+  }
+
+  const handlePointerMove = (event: PointerEvent) => {
+    const start = drag.current
+    if (!start) return
+    setPanelWidth(
+      side,
+      start.width + sign * (event.clientX - start.x),
+      window.innerWidth,
+    )
+  }
+
+  const handlePointerUp = () => {
+    drag.current = undefined
+  }
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    const step = event.shiftKey ? SHIFT_STEP : KEY_STEP
+    const next: Record<string, number | undefined> = {
+      ArrowRight: width + sign * step,
+      ArrowLeft: width - sign * step,
+      Home: MIN_PANEL_WIDTH,
+      End: MAX_PANEL_WIDTH,
+    }
+    const wanted = next[event.key]
+    if (wanted === undefined) return
+    event.preventDefault()
+    setPanelWidth(side, wanted, window.innerWidth)
+  }
+
+  return (
+    <div
+      class={`panel-handle panel-handle-${side}`}
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={NAMES[side]}
+      aria-controls={controls}
+      aria-valuenow={width}
+      aria-valuemin={MIN_PANEL_WIDTH}
+      aria-valuemax={clampPanelWidth(side, MAX_PANEL_WIDTH, window.innerWidth)}
+      tabIndex={0}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={handlePointerUp}
+      onKeyDown={handleKeyDown}
+    />
+  )
+}

package/src/canvas/client/selection.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource preact */
 import type { JSX } from 'preact'
 import { useRef, useState } from 'preact/hooks'
-import { view } from '@/canvas/client/state'
+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
@@ -97,6 +97,8 @@ export function SelectionOverlay({
 
   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()

package/src/canvas/client/shell.css

@@ -38,11 +38,58 @@ code {
 }
 
 .shell {
+  position: relative;
   display: grid;
-  grid-template-columns: 15rem minmax(0, 1fr) 16rem;
+  grid-template-columns: var(--panel-left, 15rem) minmax(0, 1fr) var(
+      --panel-right,
+      16rem
+    );
   height: 100%;
 }
 
+/*
+ * Centered on the edge, so a 24 pixel circle around it stays inside the
+ * panel's padding on one side and short of the tool strip on the other, with
+ * a line drawn at the edge itself.
+ */
+.panel-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 12px;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.panel-handle-left {
+  left: calc(var(--panel-left, 15rem) - 6px);
+}
+
+.panel-handle-right {
+  right: calc(var(--panel-right, 16rem) - 6px);
+}
+
+.panel-handle::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 5px;
+  width: 2px;
+  background: transparent;
+}
+
+.panel-handle:hover::after,
+.panel-handle:active::after,
+.panel-handle:focus-visible::after {
+  background: var(--color-accent);
+}
+
+.shell.panels-hidden > .panel-handle {
+  display: none;
+}
+
 .panel {
   overflow-y: auto;
   padding: var(--space-md);
@@ -217,6 +264,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;
@@ -239,8 +307,9 @@ code {
   align-items: center;
   /*
    * 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.
+   * 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;
@@ -273,6 +342,40 @@ 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: calc(1px * var(--outline-scale, 1))
@@ -425,6 +528,82 @@ 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);
+}
+
+.tool-button:disabled {
+  opacity: 0.4;
+  background: transparent;
+  cursor: not-allowed;
+}
+
+.tools-divider {
+  height: 1px;
+  margin: 2px var(--space-xs);
+  background: var(--color-border);
+}
+
+.history-notice {
+  position: absolute;
+  top: var(--space-md);
+  left: 50%;
+  max-width: min(28rem, calc(100% - 8rem));
+  margin: 0;
+  padding: var(--space-xs) var(--space-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-panel);
+  background: var(--color-chrome);
+  color: var(--color-text);
+  transform: translateX(-50%);
+}
+
 .zoom {
   min-width: 3.5rem;
   text-align: center;
@@ -437,7 +616,8 @@ code {
     grid-template-columns: 12rem minmax(0, 1fr);
   }
 
-  .panel-right {
+  .panel-right,
+  .panel-handle {
     display: none;
   }
 }
@@ -455,6 +635,16 @@ code {
   }
 }
 
+/* Two classes outrank every width's own columns, so hiding holds at each. */
+.shell.panels-hidden {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.shell.panels-hidden > .panel {
+  display: none;
+}
+
 .frame-row {
   display: flex;
   align-items: center;