@erclx/canon 5.15.0 → 5.17.0

package/src/canvas/client/surface.tsx

@@ -1,14 +1,25 @@
 /** @jsxImportSource preact */
 import type { JSX, RefObject } from 'preact'
-import { useEffect, useRef } from 'preact/hooks'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { addressOf, documentElements, elementAt } from '@/canvas/address'
 import type { Frame } from '@/canvas/content'
 import {
   currentPage,
+  draggingFrame,
   fitView,
+  type FrameRef,
+  frameDocuments,
   frameKey,
   frameTheme,
   frameVersions,
+  hoveredElement,
+  moveFrameTo,
   panBy,
+  previewMove,
+  registerFrameDocument,
+  selectElement,
+  selectFrame,
+  selection,
   type Theme,
   toggleFrameTheme,
   view,
@@ -18,10 +29,76 @@ import {
 /** 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
+
+const ARROWS: Readonly<Record<string, { x: number; y: number } | undefined>> = {
+  ArrowLeft: { x: -1, y: 0 },
+  ArrowRight: { x: 1, y: 0 },
+  ArrowUp: { x: 0, y: -1 },
+  ArrowDown: { x: 0, y: 1 },
+}
+
+interface Gesture {
+  readonly startX: number
+  readonly startY: number
+  readonly originX: number
+  readonly originY: number
+  x: number
+  y: number
+  moved: boolean
+}
+
 export interface SurfaceProps {
   readonly viewportRef: RefObject<HTMLDivElement | null>
 }
 
+/** A wheel turn in shell coordinates, wherever the pointer sat. */
+interface WheelTurn {
+  readonly deltaX: number
+  readonly deltaY: number
+  readonly isZoom: boolean
+  readonly clientX: number
+  readonly clientY: number
+}
+
+/**
+ * The frame's own document is a separate window, so an element in it fails an
+ * `instanceof Element` against the shell's window. The node type is the test
+ * that holds across both.
+ */
+function asElement(target: EventTarget | null): Element | undefined {
+  const node = target as Node | null
+  return node?.nodeType === 1 ? (node as Element) : undefined
+}
+
+function ElementOutline({
+  element,
+  kind,
+}: {
+  readonly element: Element
+  readonly kind: 'hover' | 'selected'
+}): JSX.Element {
+  const rect = element.getBoundingClientRect()
+  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`,
+      }}
+    />
+  )
+}
+
 export function frameSrc(page: string, frame: Frame, version: number): string {
   const path = `/frames/${encodeURIComponent(page)}/${encodeURIComponent(frame.file)}`
   return version === 0 ? path : `${path}?v=${version}`
@@ -41,31 +118,179 @@ function applyFrameTheme(iframe: HTMLIFrameElement | null, value: Theme): void {
 function FrameView({
   page,
   frame,
+  onWheelTurn,
 }: {
   readonly page: string
   readonly frame: Frame
+  readonly onWheelTurn: (turn: WheelTurn) => void
 }): JSX.Element {
   const key = frameKey(page, frame)
   const version = frameVersions.value.get(key) ?? 0
   const value = frameTheme(key)
   const iframe = useRef<HTMLIFrameElement>(null)
+  const gesture = useRef<Gesture | undefined>(undefined)
+  const ref: FrameRef = { page, frame: frame.name }
+  const isSelected =
+    selection.value?.page === page && selection.value.frame === frame.name
+  /* Bumped when the frame document scrolls, so the outlines follow it. */
+  const [, setScrolled] = useState(0)
+  const doc = frameDocuments.value.get(key)
 
   useEffect(() => {
     applyFrameTheme(iframe.current, value)
   }, [value])
 
+  /*
+   * The frame shares the shell's origin, so its document takes listeners
+   * directly. A click selects the element under it and goes no further, so a
+   * link or a submit button in a draft never navigates the frame away.
+   */
+  const handleLoad = () => {
+    const element = iframe.current
+    const loaded = element?.contentDocument
+    applyFrameTheme(element, frameTheme(key))
+    if (!element || !loaded) return
+    registerFrameDocument(key, loaded)
+
+    loaded.addEventListener('click', (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      const target = asElement(event.target)
+      const address = target && addressOf(loaded, target)
+      if (address) void selectElement(ref, key, address)
+    })
+    loaded.addEventListener('submit', (event) => event.preventDefault())
+    loaded.addEventListener('mouseover', (event) => {
+      const target = asElement(event.target)
+      const index = target ? documentElements(loaded).indexOf(target) : -1
+      hoveredElement.value = index === -1 ? undefined : { key, index }
+    })
+    loaded.addEventListener('mouseleave', () => {
+      if (hoveredElement.value?.key === key) hoveredElement.value = undefined
+    })
+    loaded.addEventListener('scroll', () => setScrolled((n) => n + 1))
+    loaded.addEventListener(
+      'wheel',
+      (event) => {
+        event.preventDefault()
+        const rect = element.getBoundingClientRect()
+        const { zoom } = view.value
+        onWheelTurn({
+          deltaX: event.deltaX,
+          deltaY: event.deltaY,
+          isZoom: event.ctrlKey || event.metaKey,
+          clientX: rect.left + event.clientX * zoom,
+          clientY: rect.top + event.clientY * zoom,
+        })
+      },
+      { passive: false },
+    )
+  }
+
+  const picked =
+    isSelected && doc && selection.value?.element
+      ? selection.value.element
+      : undefined
+  const selectedNode =
+    doc && picked && !picked.stale ? elementAt(doc, picked) : undefined
+  const hovered = hoveredElement.value
+  const hoveredNode =
+    doc && hovered?.key === key
+      ? documentElements(doc)[hovered.index]
+      : undefined
+
+  /* The label means the frame itself, so it also drops a picked element. */
+  const select = () => {
+    if (!isSelected || selection.value?.element) void selectFrame(ref)
+  }
+
+  const handlePointerDown = (event: PointerEvent) => {
+    if (event.button !== 0) return
+    if ((event.target as HTMLElement | null)?.closest('.frame-theme')) return
+    gesture.current = {
+      startX: event.clientX,
+      startY: event.clientY,
+      originX: frame.x,
+      originY: frame.y,
+      x: frame.x,
+      y: frame.y,
+      moved: false,
+    }
+    ;(event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId)
+    select()
+  }
+
+  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
+    const { zoom } = view.value
+    current.moved = true
+    current.x = Math.round(current.originX + dx / zoom)
+    current.y = Math.round(current.originY + dy / zoom)
+    draggingFrame.value = frame.name
+    previewMove(ref, current.x, current.y)
+  }
+
+  const handlePointerUp = () => {
+    const current = gesture.current
+    gesture.current = undefined
+    draggingFrame.value = undefined
+    if (current?.moved) void moveFrameTo(ref, current.x, current.y)
+  }
+
+  const handlePointerCancel = () => {
+    const current = gesture.current
+    gesture.current = undefined
+    draggingFrame.value = undefined
+    if (current?.moved) previewMove(ref, current.originX, current.originY)
+  }
+
+  /*
+   * The keyboard path for a drag, since a pointer gesture alone leaves a
+   * frame unmovable without a mouse.
+   */
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.target !== event.currentTarget) return
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      select()
+      return
+    }
+    const step = event.shiftKey ? NUDGE_LARGE : NUDGE
+    const delta = ARROWS[event.key]
+    if (!delta || !isSelected) return
+    event.preventDefault()
+    void moveFrameTo(ref, frame.x + delta.x * step, frame.y + delta.y * step)
+  }
+
   const next = value === 'dark' ? 'light' : 'dark'
   return (
     <figure
       class="frame"
       data-frame={frame.name}
+      data-selected={isSelected ? 'true' : undefined}
+      data-dragging={draggingFrame.value === frame.name ? 'true' : undefined}
+      tabIndex={0}
+      aria-label={`${frame.name}, ${frame.width} by ${frame.height}`}
+      aria-current={isSelected ? 'true' : undefined}
+      onKeyDown={handleKeyDown}
       style={{
         left: `${frame.x}px`,
         top: `${frame.y}px`,
         width: `${frame.width}px`,
       }}
     >
-      <figcaption class="frame-label">
+      {/* The frame's handle, since a press inside the frame picks an element. */}
+      <figcaption
+        class="frame-label"
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerCancel}
+      >
         <span class="frame-name" title={frame.name}>
           {frame.name}
         </span>
@@ -82,15 +307,23 @@ function FrameView({
           {value === 'dark' ? 'Dark' : 'Light'}
         </button>
       </figcaption>
-      <iframe
-        ref={iframe}
-        title={frame.name}
-        src={frameSrc(page, frame, version)}
-        width={frame.width}
-        height={frame.height}
-        style={{ height: `${frame.height}px` }}
-        onLoad={() => applyFrameTheme(iframe.current, frameTheme(key))}
-      />
+      <div class="frame-body">
+        <iframe
+          ref={iframe}
+          title={frame.name}
+          src={frameSrc(page, frame, version)}
+          width={frame.width}
+          height={frame.height}
+          style={{ height: `${frame.height}px` }}
+          onLoad={handleLoad}
+        />
+        {hoveredNode && hoveredNode !== selectedNode ? (
+          <ElementOutline element={hoveredNode} kind="hover" />
+        ) : null}
+        {selectedNode ? (
+          <ElementOutline element={selectedNode} kind="selected" />
+        ) : null}
+      </div>
     </figure>
   )
 }
@@ -153,19 +386,29 @@ export function Surface({ viewportRef }: SurfaceProps): JSX.Element {
     fitView(width, height)
   }, [page?.name])
 
-  const handleWheel = (event: WheelEvent) => {
-    event.preventDefault()
-    if (event.ctrlKey || event.metaKey) {
+  const handleWheelTurn = (turn: WheelTurn) => {
+    if (turn.isZoom) {
       const rect = viewportRef.current?.getBoundingClientRect()
-      const factor = event.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP
+      const factor = turn.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP
       zoomAt(
         factor,
-        event.clientX - (rect?.left ?? 0),
-        event.clientY - (rect?.top ?? 0),
+        turn.clientX - (rect?.left ?? 0),
+        turn.clientY - (rect?.top ?? 0),
       )
       return
     }
-    panBy(-event.deltaX, -event.deltaY)
+    panBy(-turn.deltaX, -turn.deltaY)
+  }
+
+  const handleWheel = (event: WheelEvent) => {
+    event.preventDefault()
+    handleWheelTurn({
+      deltaX: event.deltaX,
+      deltaY: event.deltaY,
+      isZoom: event.ctrlKey || event.metaKey,
+      clientX: event.clientX,
+      clientY: event.clientY,
+    })
   }
 
   const handlePointerDown = (event: PointerEvent) => {
@@ -200,10 +443,19 @@ export function Surface({ viewportRef }: SurfaceProps): JSX.Element {
       >
         <div
           class="plane"
-          style={{ transform: `translate(${x}px, ${y}px) scale(${zoom})` }}
+          style={{
+            transform: `translate(${x}px, ${y}px) scale(${zoom})`,
+            /* Lets an outline inside the plane hold its screen weight at any zoom. */
+            '--outline-scale': String(1 / zoom),
+          }}
         >
           {page?.frames.map((frame) => (
-            <FrameView key={frame.name} page={page.name} frame={frame} />
+            <FrameView
+              key={frame.name}
+              page={page.name}
+              frame={frame}
+              onWheelTurn={handleWheelTurn}
+            />
           ))}
         </div>
       </div>