@erclx/canon 5.26.0 → 5.27.0

package/src/canvas/client/inspector/size-field.tsx

@@ -0,0 +1,69 @@
+/** @jsxImportSource preact */
+import type { JSX } from 'preact'
+import { Field, type Scrub } from '@/canvas/client/inspector/field'
+
+/** The modes a size takes besides a number, by the name the field shows. */
+const MODES = ['Fill', 'Fit'] as const
+
+interface SizeFieldProps {
+  readonly label: string
+  readonly glyph: string
+  /** The value as the panel shows it, a mode name or a number. */
+  readonly initial: string
+  readonly isBusy: boolean
+  /** Takes a typed number or a picked mode name, each as shown. */
+  readonly onCommit: (value: string) => void
+  readonly scrub?: Scrub
+}
+
+/**
+ * A size that takes a number or a mode. The chevron is a native select, so
+ * its list opens above the panel's clipping and answers the keyboard as the
+ * platform does, and typing a number replaces the mode.
+ */
+export function SizeField({
+  label,
+  glyph,
+  initial,
+  isBusy,
+  onCommit,
+  scrub,
+}: SizeFieldProps): JSX.Element {
+  const mode = (MODES as readonly string[]).includes(initial) ? initial : ''
+  return (
+    <Field
+      label={label}
+      glyph={glyph}
+      initial={initial}
+      isBusy={isBusy}
+      onCommit={onCommit}
+      scrub={scrub}
+      trailing={
+        <span class="size-mode">
+          <select
+            class="size-mode-select"
+            aria-label={`${label} mode`}
+            value={mode}
+            disabled={isBusy}
+            onChange={(event) => {
+              const picked = event.currentTarget.value
+              if (picked && picked !== mode) onCommit(picked)
+            }}
+          >
+            <option value="" disabled hidden>
+              Fixed
+            </option>
+            {MODES.map((name) => (
+              <option key={name} value={name}>
+                {name}
+              </option>
+            ))}
+          </select>
+          <svg class="size-mode-chevron" viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M4.5 6.5 8 10l3.5-3.5" />
+          </svg>
+        </span>
+      }
+    />
+  )
+}

package/src/canvas/client/inspector/values.ts

@@ -5,7 +5,25 @@
  */
 
 /** Properties whose bare numbers are pixel lengths. */
-const LENGTHS = new Set(['width', 'height', 'padding', 'gap', 'font-size'])
+const LENGTHS = new Set([
+  'width',
+  'height',
+  'padding',
+  'gap',
+  'font-size',
+  'border-radius',
+  'border-top-left-radius',
+  'border-top-right-radius',
+  'border-bottom-right-radius',
+  'border-bottom-left-radius',
+])
+
+/** Properties a size mode writes, each mode by the name the field shows. */
+const SIZES = new Set(['width', 'height'])
+const SIZE_MODES: Readonly<Record<string, string>> = {
+  Fill: '100%',
+  Fit: 'fit-content',
+}
 
 const PX = /^(-?\d*\.?\d+)px$/
 
@@ -28,6 +46,14 @@ export function displayValue(property: string, raw: string): string {
   const value = raw.trim()
   if (property === 'gap' && (value === '' || value === 'normal')) return ''
   if (property === 'background-color' && isNoFill(value)) return ''
+  if (property === 'opacity' && value !== '')
+    return `${Math.round(Number(value) * 100)}%`
+  if (SIZES.has(property)) {
+    const mode = Object.keys(SIZE_MODES).find(
+      (name) => SIZE_MODES[name] === value,
+    )
+    if (mode) return mode
+  }
   if (value === 'auto') return 'Auto'
   if (value === 'normal') return 'Normal'
   return value.split(/\s+/).map(formatPx).join(' ')
@@ -36,6 +62,7 @@ export function displayValue(property: string, raw: string): string {
 export function toCssValue(property: string, typed: string): string {
   const value = typed.trim()
   if (value === 'Auto' || value === 'Normal') return value.toLowerCase()
+  if (SIZES.has(property) && SIZE_MODES[value]) return SIZE_MODES[value]
   if (!LENGTHS.has(property)) return value
   return value
     .split(/\s+/)
@@ -43,6 +70,21 @@ export function toCssValue(property: string, typed: string): string {
     .join(' ')
 }
 
+/** A typed opacity percent as the fraction CSS takes, refused outside 0 to 100. */
+export function opacityToCss(typed: string): string | undefined {
+  const percent = readOpacity(typed)
+  return percent === undefined ? undefined : String(percent / 100)
+}
+
+/**
+ * The radius all four corners share, read in the order the longhands run,
+ * or undefined where any corner differs and the panel shows each one.
+ */
+export function sharedRadius(corners: readonly string[]): string | undefined {
+  const [first] = corners
+  return corners.every((corner) => corner === first) ? first : undefined
+}
+
 /**
  * Holds a scrubbed number inside what the property accepts. The writer takes
  * any declaration that does not break the rule, so a negative length or a

package/src/canvas/client/inspector.tsx

@@ -1,6 +1,8 @@
 /** @jsxImportSource preact */
 import type { JSX } from 'preact'
+import { useState } from 'preact/hooks'
 import { addressOf, elementAt, excerpt, isRawText } from '@/canvas/address'
+import { AlignGrid } from '@/canvas/client/inspector/align-grid'
 import { ColorField } from '@/canvas/client/inspector/color-field'
 import {
   Field,
@@ -8,10 +10,13 @@ import {
   type Scrub,
 } from '@/canvas/client/inspector/field'
 import { Section } from '@/canvas/client/inspector/section'
+import { SizeField } from '@/canvas/client/inspector/size-field'
 import {
   clampScrub,
   displayValue,
+  opacityToCss,
   parseColor,
+  sharedRadius,
   toCssValue,
 } from '@/canvas/client/inspector/values'
 import {
@@ -66,12 +71,47 @@ const SIZE_FIELDS: readonly StyleField[] = [
   { label: 'height', glyph: 'H', property: 'height' },
 ]
 
+const DIRECTION_FIELD: StyleField = {
+  label: 'direction',
+  glyph: 'Dir',
+  property: 'flex-direction',
+}
+
 const FLEX_FIELDS: readonly StyleField[] = [
-  { label: 'direction', glyph: 'Dir', property: 'flex-direction' },
   { label: 'gap', glyph: 'Gap', property: 'gap', placeholder: '0' },
-  { label: 'padding', glyph: 'Pad', property: 'padding', isWide: true },
 ]
 
+/** Padding applies to any box, so it sits in Layout rather than Flex. */
+const PADDING_FIELD: StyleField = {
+  label: 'padding',
+  glyph: 'Pad',
+  property: 'padding',
+  isWide: true,
+}
+
+/** The corners in the order the radius shorthand lists them. */
+const CORNER_FIELDS: readonly StyleField[] = [
+  { label: 'top left radius', glyph: 'TL', property: 'border-top-left-radius' },
+  {
+    label: 'top right radius',
+    glyph: 'TR',
+    property: 'border-top-right-radius',
+  },
+  {
+    label: 'bottom right radius',
+    glyph: 'BR',
+    property: 'border-bottom-right-radius',
+  },
+  {
+    label: 'bottom left radius',
+    glyph: 'BL',
+    property: 'border-bottom-left-radius',
+  },
+]
+
+const FLEX_DISPLAYS = new Set(['flex', 'inline-flex'])
+const GRID_DISPLAYS = new Set(['grid', 'inline-grid'])
+
 const TYPE_FIELDS: readonly StyleField[] = [
   { label: 'size', glyph: 'Size', property: 'font-size' },
   { label: 'weight', glyph: 'Wt', property: 'font-weight' },
@@ -175,6 +215,31 @@ function ElementFields({
   const commit = (property: string) => (value: string) => {
     if (address) void editElement(frameRef, key, address, property, value)
   }
+  /*
+   * The writer takes one property an edit, so a control setting two posts
+   * them in turn and stops at the first refusal. Each carries the hash the
+   * last answered with in its own address, since a frame reloading between
+   * the two clears the stored one.
+   */
+  const commitAll = async (
+    changes: readonly (readonly [string, string])[],
+  ): Promise<void> => {
+    let current = address
+    for (const [property, value] of changes) {
+      if (!current) return
+      const written = await editElement(frameRef, key, current, property, value)
+      if (!written) return
+      if (written.hash) current = { ...current, hash: written.hash }
+    }
+  }
+  const corners = CORNER_FIELDS.map((field) =>
+    currentValue(node, field.property).trim(),
+  )
+  const radius = sharedRadius(corners)
+  const [isPerCorner, setPerCorner] = useState(radius === undefined)
+  const display = computedValue(node, 'display').trim()
+  const isFlex = FLEX_DISPLAYS.has(display)
+  const isWrapped = computedValue(node, 'flex-wrap').trim() === 'wrap'
   const rect = node.getBoundingClientRect()
   const font = currentValue(node, 'font-family')
   const text = node.textContent ?? ''
@@ -237,9 +302,125 @@ function ElementFields({
           glyph="Y"
           value={String(Math.round(rect.top))}
         />
-        {SIZE_FIELDS.map(styleField)}
+        {SIZE_FIELDS.map((field) => (
+          <SizeField
+            key={field.property}
+            label={field.label}
+            glyph={field.glyph}
+            initial={displayValue(
+              field.property,
+              currentValue(node, field.property),
+            )}
+            isBusy={isBusy}
+            onCommit={(typed) =>
+              commit(field.property)(toCssValue(field.property, typed))
+            }
+            scrub={'style' in node ? scrubOf(field.property) : undefined}
+          />
+        ))}
+        {styleField(PADDING_FIELD)}
+      </Section>
+      <Section
+        title="Flex"
+        action={
+          isFlex || GRID_DISPLAYS.has(display) ? null : (
+            <button
+              type="button"
+              class="section-icon"
+              aria-label="Add flex layout"
+              title="Add flex layout"
+              disabled={isBusy}
+              onClick={() => commit('display')('flex')}
+            >
+              <svg viewBox="0 0 16 16" aria-hidden="true">
+                <path d="M8 3.5v9M3.5 8h9" />
+              </svg>
+            </button>
+          )
+        }
+      >
+        {isFlex ? (
+          <>
+            <div class="flex-layout is-wide">
+              <AlignGrid
+                direction={computedValue(node, 'flex-direction').trim()}
+                justifyContent={computedValue(node, 'justify-content')}
+                alignItems={computedValue(node, 'align-items')}
+                isBusy={isBusy}
+                onPick={(alignment) =>
+                  void commitAll([
+                    ['justify-content', alignment.justifyContent],
+                    ['align-items', alignment.alignItems],
+                  ])
+                }
+              />
+              <div class="flex-layout-side">
+                {styleField(DIRECTION_FIELD)}
+                <button
+                  type="button"
+                  class="section-icon"
+                  aria-label="Wrap"
+                  title="Wrap"
+                  aria-pressed={isWrapped}
+                  disabled={isBusy}
+                  onClick={() =>
+                    commit('flex-wrap')(isWrapped ? 'nowrap' : 'wrap')
+                  }
+                >
+                  <svg viewBox="0 0 16 16" aria-hidden="true">
+                    <path d="M2.5 4.5h9a2.5 2.5 0 0 1 0 5h-6M7.5 7.5l-2 2 2 2M2.5 12.5h1" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+            {FLEX_FIELDS.map(styleField)}
+          </>
+        ) : null}
+      </Section>
+      <Section
+        title="Appearance"
+        action={
+          <button
+            type="button"
+            class="section-icon"
+            aria-label="Per-corner radius"
+            title="Per-corner radius"
+            aria-pressed={isPerCorner}
+            onClick={() => setPerCorner(!isPerCorner)}
+          >
+            <svg viewBox="0 0 16 16" aria-hidden="true">
+              <path d="M3 6.5V5a2 2 0 0 1 2-2h1.5M9.5 3H11a2 2 0 0 1 2 2v1.5M13 9.5V11a2 2 0 0 1-2 2H9.5M6.5 13H5a2 2 0 0 1-2-2V9.5" />
+            </svg>
+          </button>
+        }
+      >
+        <Field
+          label="opacity"
+          glyph="Op"
+          initial={displayValue('opacity', computedValue(node, 'opacity'))}
+          isBusy={isBusy}
+          isWide={isPerCorner}
+          onCommit={(typed) => {
+            const value = opacityToCss(typed)
+            if (value !== undefined) commit('opacity')(value)
+          }}
+        />
+        {isPerCorner ? (
+          CORNER_FIELDS.map(styleField)
+        ) : (
+          <Field
+            label="radius"
+            glyph="R"
+            initial={displayValue('border-radius', radius ?? '')}
+            isBusy={isBusy}
+            placeholder="0"
+            onCommit={(typed) =>
+              commit('border-radius')(toCssValue('border-radius', typed))
+            }
+            scrub={'style' in node ? scrubOf('border-radius') : undefined}
+          />
+        )}
       </Section>
-      <Section title="Flex">{FLEX_FIELDS.map(styleField)}</Section>
       <Section title="Typography">
         {TYPE_FIELDS.map(styleField)}
         {font ? (
@@ -261,11 +442,16 @@ function ElementFields({
               label={field.label}
               color={parseColor(inline || painted)}
               text={inline || painted}
+              inline={inline}
               painted={painted}
+              owner={`${key}:${address?.index ?? -1}:${field.property}`}
               tokens={colorTokens}
               paint={(name) => tokenPaint(doc, name)}
               isRaw={isRawInline(node, field.property)}
               isBusy={isBusy}
+              preview={
+                'style' in node ? scrubOf(field.property).begin : undefined
+              }
               onCommit={commit(field.property)}
             />
           )

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`,
+      }}
+    />
+  )
+}