lecodes-web-canvas 2.0.0

package/src/web/BrowserUI.ts

@@ -0,0 +1,312 @@
+// The TreeUI of a browser page: the painted picture, and the few things a browser shows better than
+// a painter — the way a native host keeps a platform view for them:
+//
+//   under the picture   a native view (a plugin's web half: a map, a camera) and a video. The
+//                       painter leaves a window where the node is (`clearRoundRect`), so what the
+//                       app paints AFTER the node — a button over the map — is over it.
+//   over the picture    the field being edited: a live <input> / <textarea> in the place of its
+//                       node, for as long as it has the focus — the caret, the selection, the
+//                       clipboard and the input method are the browser's. The painter leaves the
+//                       field's text out meanwhile.
+//
+// Both are placed from the render tree every time it changes: the box of the node, moved by the
+// transforms above it (a screen in a transition carries its field along), cut by the clips above it.
+import type { WasmModule } from "lecodes-web-runtime/src/gen/wasm"
+import type { WebViewFactory, WebViewInstanceHandle } from "lecodes-web-shared/src/ui/nativeView"
+import { getPlayer } from "lecodes-web-shared/src/utils/mediaplayer"
+import { TREE_DEST_NATIVE } from "lecodes-sdk/ui/tree"
+import { hitTest } from "../core/hitTest"
+import type { Host } from "../host/Host"
+import type { PaintOptions } from "../paint/paintTree"
+import { TreeUI, type TreeUIOptions } from "../runtime/TreeUI"
+import type { Rect, RenderNode } from "../types"
+
+const FIELD_STYLE = `
+.lc-field { position: absolute; left: 0; top: 0; margin: 0; border: none; outline: none; background: none; resize: none; box-sizing: border-box; transform-origin: 0 0; pointer-events: auto; overflow: hidden; -webkit-appearance: none; appearance: none; }
+.lc-field::placeholder { color: var(--lc-placeholder, #999); opacity: 1; }
+`
+
+const hex = (v: number | undefined, fallback: string) => (v === undefined ? fallback : "#" + (v >>> 0).toString(16).padStart(8, "0"))
+const isSurface = (n: { type: string }) => n.type === "native" || n.type === "video"
+
+type Matrix = [number, number, number, number, number, number]
+const IDENTITY: Matrix = [1, 0, 0, 1, 0, 0]
+/** `m` then `n` in the coordinate system `m` made (the painter's `transform`). */
+const multiply = (m: Matrix, n: Matrix): Matrix => [
+  m[0] * n[0] + m[2] * n[1], m[1] * n[0] + m[3] * n[1],
+  m[0] * n[2] + m[2] * n[3], m[1] * n[2] + m[3] * n[3],
+  m[0] * n[4] + m[2] * n[5] + m[4], m[1] * n[4] + m[3] * n[5] + m[5],
+]
+const intersect = (a: Rect | null, b: Rect): Rect => {
+  if (!a) return b
+  const x = Math.max(a.x, b.x), y = Math.max(a.y, b.y)
+  return { x, y, width: Math.max(0, Math.min(a.x + a.width, b.x + b.width) - x), height: Math.max(0, Math.min(a.y + a.height, b.y + b.height) - y) }
+}
+
+/** Where a node is: its box, the transform of everything above it, the clip of everything above it. */
+type Place = { node: RenderNode, matrix: Matrix, clip: Rect | null }
+
+export class BrowserUI extends TreeUI {
+  private readonly doc: Document
+  private readonly factories = new Map<string, WebViewFactory>()
+  private readonly versions = new Map<string, number>()
+  private readonly views = new Map<number, { name: string, params: string, handle: WebViewInstanceHandle }>()
+  /** The wrapper of a native node's view, by node id. */
+  private readonly wrappers = new Map<number, HTMLElement>()
+  /** What is under the picture now, by node id (a wrapper, or a video's own element). */
+  private readonly shown = new Map<number, HTMLElement>()
+  /** The fullscreen native destination (openView kind 3), null when none. */
+  private destination: { viewId: number, el: HTMLElement } | null = null
+  private field: { id: number, el: HTMLInputElement | HTMLTextAreaElement } | null = null
+  private placedFor: unknown = null
+
+  /** `under` and `over` are the host's layers below and above the painted canvas. */
+  constructor(M: WasmModule, host: Host, private readonly under: HTMLElement, private readonly over: HTMLElement, options: TreeUIOptions = {}) {
+    super(M, host, options)
+    this.doc = under.ownerDocument
+    const style = this.doc.createElement("style")
+    style.textContent = FIELD_STYLE
+    over.appendChild(style)
+  }
+
+  /** What the page shows itself: the painter leaves it out. */
+  paintOptions(): PaintOptions { return { surfaces: true, editing: this.field?.id } }
+
+  // ---- native views: the plugins' web halves -----------------------------------------------------------
+  /** `version` = the contract version the half was generated from (1 for one written by hand). */
+  registerView(name: string, factory: WebViewFactory, version = 1): void { this.factories.set(name, factory); this.versions.set(name, version) }
+  /** A view the next bundle does not have (its plugin is not among the app's): unsupported again. */
+  unregisterView(name: string): void { this.factories.delete(name); this.versions.delete(name) }
+  isViewSupported(name: string): boolean { return this.factories.has(name) }
+  viewVersion(name: string): number { return this.versions.get(name) ?? 0 }
+
+  private ensureView(viewId: number, name: string, params: string): WebViewInstanceHandle | null {
+    const live = this.views.get(viewId)
+    // A new project world restarts the SDK's view ids from 1: another name or other params under a
+    // live id is an instance of the world that left.
+    if (live && (live.name !== name || live.params !== params)) this.destroyView(viewId)
+    else if (live) return live.handle
+    const factory = this.factories.get(name)
+    if (!factory) return null
+    let parsed: unknown = {}
+    try { parsed = params ? JSON.parse(params) : {} } catch { /* the runtime's JSON */ }
+    // An event's payload crosses as the value it is: the app and this host are the same JavaScript.
+    const handle = factory(parsed, { emit: (event, data) => this.M.jsb.viewEvent(viewId, event, data) }, this.doc)
+    handle.el.style.cssText += ";position:absolute;inset:0;width:100%;height:100%;"
+    this.views.set(viewId, { name, params, handle })
+    return handle
+  }
+  private destroyView(viewId: number): void {
+    const live = this.views.get(viewId)
+    if (!live) return
+    this.views.delete(viewId)
+    live.handle.destroy?.()
+    live.handle.el.remove()
+  }
+  /** `args` is the app's own array: a half reads it, never keeps or changes it. */
+  viewCall(viewId: number, method: string, args: unknown, onComplete: (result?: unknown) => void, onReject: (message: string) => void): void {
+    const live = this.views.get(viewId)
+    if (!live?.handle.call) { onReject(`NativeView call "${method}": no live instance or no call handler (viewId ${viewId})`); return }
+    try {
+      Promise.resolve(live.handle.call(method, Array.isArray(args) ? args : [])).then(
+        (result) => { if (result === undefined) onComplete(); else onComplete(result) },
+        (e) => onReject(e instanceof Error ? e.message : String(e)),
+      )
+    } catch (e) { onReject(e instanceof Error ? e.message : String(e)) }
+  }
+
+  // A native destination is a surface: it stays where it is until the runtime drops it (a screen
+  // may still be coming in over it), under every screen.
+  override openView(kind: number, node: number, id: number, viewName: string, paramsJson: string, above: boolean): void {
+    super.openView(kind, node, id, viewName, paramsJson, above)
+    if (kind !== TREE_DEST_NATIVE) return
+    this.dropDestination()
+    const handle = this.ensureView(id, viewName, paramsJson)
+    if (!handle) return
+    const el = this.doc.createElement("div")
+    el.style.cssText = "position:absolute;inset:0;pointer-events:auto;"
+    el.appendChild(handle.el)
+    this.under.prepend(el)
+    this.destination = { viewId: id, el }
+  }
+  override dropView(kind: number, node: number, id: number): void {
+    super.dropView(kind, node, id)
+    // …unless the one on screen now is that very view, presented again
+    if (kind === TREE_DEST_NATIVE && this.destination?.viewId === id && this.destKind !== TREE_DEST_NATIVE) this.dropDestination()
+  }
+  private dropDestination(): void {
+    this.destination?.el.remove()
+    this.destination = null
+  }
+
+  override releaseNode(id: number): void {
+    const n = this.get(id)
+    if (this.field?.id === id) this.unmountField()
+    super.releaseNode(id)
+    this.shown.get(id)?.remove()
+    this.shown.delete(id)
+    this.wrappers.delete(id)
+    if (n?.type === "native" && n.viewId) this.destroyView(n.viewId)
+  }
+
+  // ---- the field being edited ---------------------------------------------------------------------------
+  override focusInput(id: number): void {
+    super.focusInput(id)
+    if (this.focusedId() !== id || this.field?.id === id) return
+    this.unmountField()
+    const node = this.get(id)
+    if (!node) return
+    const el = this.doc.createElement(node.type === "textarea" ? "textarea" : "input")
+    el.className = "lc-field"
+    el.setAttribute("autocomplete", "off")
+    el.value = node.value
+    el.addEventListener("input", () => { if (this.focusedId() === id) this.setInputValue(id, el.value) })
+    el.addEventListener("keydown", (e) => { if ((e as KeyboardEvent).key === "Enter" && el.tagName === "INPUT") { e.preventDefault(); this.submitInput() } })
+    // the browser took the focus away (another window, a tab key): the app's field lost it too
+    el.addEventListener("blur", () => { if (this.field?.el === el && this.focusedId() === id) this.blurInput() })
+    this.over.appendChild(el)
+    this.field = { id, el }
+    this.placedFor = null   // placed with the next frame; focused now, inside the gesture that asked
+    this.place()
+    el.focus({ preventScroll: true })
+  }
+  override blurInput(): void {
+    super.blurInput()
+    this.unmountField()
+  }
+  private unmountField(): void {
+    const field = this.field
+    if (!field) return
+    this.field = null
+    field.el.remove()
+    this.placedFor = null
+  }
+  override setPropertyString(id: number, prop: string, value: string | null): void {
+    super.setPropertyString(id, prop, value)
+    // a value the CODE set while the field is edited
+    if (prop === "value" && this.field?.id === id) { const v = this.get(id)?.value ?? ""; if (this.field.el.value !== v) this.field.el.value = v }
+  }
+
+  // ---- placing ------------------------------------------------------------------------------------------
+  /** The nodes the page shows itself, where the frame has them. */
+  private find(): Place[] {
+    const found: Place[] = []
+    const editing = this.field?.id
+    const walk = (node: RenderNode, above: Matrix, clip: Rect | null) => {
+      let matrix = above
+      const t = node.style.transform
+      if (t) {
+        // the painter's: the node's matrix about its transform origin (its centre by default)
+        const o = node.style.transformOrigin
+        const cx = node.rect.x + (o ? (o.xPercent ? node.rect.width * o.x / 100 : o.x) : node.rect.width / 2)
+        const cy = node.rect.y + (o ? (o.yPercent ? node.rect.height * o.y / 100 : o.y) : node.rect.height / 2)
+        matrix = multiply(multiply(multiply(above, [1, 0, 0, 1, cx, cy]), t as unknown as Matrix), [1, 0, 0, 1, -cx, -cy])
+      }
+      if (isSurface(node) || node.id === editing) found.push({ node, matrix, clip })
+      const inner = node.clip ? intersect(clip, node.rect) : clip
+      for (const child of node.children) walk(child, matrix, inner)
+    }
+    for (const layer of this.frame()) walk(layer.tree, IDENTITY, null)
+    return found
+  }
+  private static put(el: HTMLElement, place: Place): void {
+    const { rect } = place.node
+    const s = el.style
+    s.position = "absolute"
+    s.left = "0"
+    s.top = "0"
+    s.width = rect.width + "px"
+    s.height = rect.height + "px"
+    s.transformOrigin = "0 0"
+    s.transform = `matrix(${place.matrix.join(",")}) translate(${rect.x}px,${rect.y}px)`
+    const c = place.clip
+    // the clip is in the frame's coordinates, the element's clip-path in its own box
+    s.clipPath = c ? `inset(${Math.max(0, c.y - rect.y)}px ${Math.max(0, rect.x + rect.width - (c.x + c.width))}px ${Math.max(0, rect.y + rect.height - (c.y + c.height))}px ${Math.max(0, c.x - rect.x)}px)` : ""
+  }
+  private surfaceElement(node: RenderNode): HTMLElement | null {
+    const n = this.get(node.id)
+    if (!n) return null
+    if (n.type === "video") {
+      const player = getPlayer(n.playerId)
+      return player instanceof HTMLVideoElement ? player : null
+    }
+    if (!n.viewId) return null
+    const handle = this.ensureView(n.viewId, n.viewName ?? "", n.viewParams ?? "")
+    if (!handle) return null
+    let wrapper = this.wrappers.get(n.id)
+    if (!wrapper) { wrapper = this.doc.createElement("div"); this.wrappers.set(n.id, wrapper) }
+    if (handle.el.parentElement !== wrapper) wrapper.replaceChildren(handle.el)
+    return wrapper
+  }
+  private styleField(el: HTMLInputElement | HTMLTextAreaElement, node: RenderNode): void {
+    const s = node.style
+    const st = el.style
+    const [pl, pt, pr, pb] = node.padding ?? [0, 0, 0, 0]
+    st.padding = `${pt}px ${pr}px ${pb}px ${pl}px`
+    st.color = hex(s.color, "#000000ff")
+    st.caretColor = st.color
+    const family = s.fontFamily ?? "Roboto"
+    st.fontFamily = this.host.resolveFontFamily?.(family) ?? family
+    st.fontSize = (s.fontSize ?? 14) + "px"
+    st.fontWeight = String(s.fontWeight ?? 400)
+    st.fontStyle = s.fontStyle ?? "normal"
+    st.letterSpacing = (s.letterSpacing ?? 0) + "px"
+    // a textarea's lines are the node's; an input is one line, centred in the field by the browser
+    st.lineHeight = el.tagName === "TEXTAREA" && s.lineHeight !== undefined ? s.lineHeight + "px" : "normal"
+    st.textAlign = s.textAlign === "center" ? "center" : s.textAlign === "end" ? "right" : "left"
+    st.borderRadius = "0"
+    el.placeholder = s.placeholder ?? ""
+    st.setProperty("--lc-placeholder", hex(s.placeholderColor, "#999999ff"))
+    if (el instanceof HTMLInputElement) { const type = s.inputType ?? "text"; if (el.type !== type) el.type = type }
+  }
+  /** After the paint: what the page shows itself goes where the frame has it. */
+  place(): void {
+    const frame = this.frame()
+    if (frame === this.placedFor) return
+    this.placedFor = frame
+    const seen = new Set<number>()
+    for (const place of this.find()) {
+      const { node } = place
+      if (node.id === this.field?.id) {
+        this.styleField(this.field.el, node)
+        BrowserUI.put(this.field.el, place)
+        continue
+      }
+      const el = this.surfaceElement(node)
+      if (!el) continue
+      seen.add(node.id)
+      if (el.parentElement !== this.under) this.under.appendChild(el)
+      el.style.display = "block"
+      el.style.opacity = ""
+      el.style.pointerEvents = "auto"   // where the picture has a window onto it
+      if (el instanceof HTMLVideoElement) el.style.objectFit = node.style.objectFit ?? "contain"
+      BrowserUI.put(el, place)
+      this.shown.set(node.id, el)
+    }
+    // what the frame no longer shows (a page that left, a node taken out): kept, not seen
+    for (const [id, el] of this.shown) if (!seen.has(id)) { el.style.display = "none"; this.shown.delete(id) }
+  }
+
+  // ---- whose the pointer is --------------------------------------------------------------------------------
+  /** Whether the point is a surface's: the topmost thing there that takes input is a native view
+   *  (or the native destination, with nothing of the UI over it) — the event is that view's. */
+  surfaceAt(x: number, y: number): boolean {
+    const layers = this.frame()
+    for (let i = layers.length - 1; i >= 0; i--) {
+      const layer = layers[i]!
+      if (layer.leaving) continue
+      const hit = hitTest(layer.tree, x, y, (n) => n.type === "native" || (this.get(n.id)?.interactive ?? false) || (this.get(n.id)?.editable ?? false) || !!n.scroll)
+      if (hit) return hit.type === "native"
+      if (layer.backdrop) return false
+    }
+    return this.destination !== null
+  }
+
+  dispose(): void {
+    this.unmountField()
+    for (const id of [...this.views.keys()]) this.destroyView(id)
+    this.dropDestination()
+    for (const el of this.shown.values()) if (!(el instanceof HTMLVideoElement)) el.remove()
+    this.shown.clear()
+  }
+}

package/src/web/chrome.ts

@@ -0,0 +1,12 @@
+// What the browser renderer shows of the host's own: the toast strip.
+
+/** A transient toast strip at the bottom of the root (duration in ms; ≤ 0 = 2 s). */
+export function showToast(doc: Document, root: HTMLElement, message: string, duration: number) {
+  const el = doc.createElement("div")
+  el.textContent = message
+  el.style.cssText =
+    "position:absolute;left:50%;bottom:48px;transform:translateX(-50%);max-width:80%;padding:10px 16px;border-radius:8px;" +
+    "background:rgba(30,30,30,0.92);color:#fff;font:13px/1.4 system-ui,sans-serif;z-index:30;pointer-events:none;"
+  root.appendChild(el)
+  setTimeout(() => el.remove(), duration > 0 ? duration : 2000)
+}

package/src/web/renderer.ts

@@ -0,0 +1,192 @@
+// The canvas renderer in the browser: the TreeUI (the runtime's HostUI table) painted to a 2D canvas
+// that lies over the scene canvases, with a layer under it for the native views and the videos and
+// a layer over it for the field being edited (./BrowserUI.ts). The host calls `render()` after each
+// layout pass.
+//
+// The canvas is the host's: it sizes the backing store (device px, the host's page), the renderer
+// only paints. Nothing here draws a keyboard or a device — the page is the app's window.
+//
+// POINTERS. The painted canvas takes no pointer itself (`pointer-events: none`): an event lands on
+// what is under the pointer in the page — a native view, a scene canvas, the container — and the
+// renderer meets it on its way down, at the container, in the capture phase. There the render tree
+// says whose the point is. The UI's: the event goes to the TreeUI's routing (logical px), and
+// stops before a view under the picture hears of it. A native view's: it goes on to the view.
+import type { WasmModule } from "lecodes-web-runtime/src/gen/wasm"
+import type { CanvasHost } from "lecodes-web-shared/src/canvas/createCanvasHost"
+import { getUrl } from "lecodes-web-shared/src/utils/fetch"
+import { viewScale } from "lecodes-web-shared/src/ui/viewScale"
+import { BrowserHost } from "../host/BrowserHost"
+import { Canvas2DPainter } from "../paint/Canvas2DPainter"
+import { BrowserUI } from "./BrowserUI"
+import { showToast } from "./chrome"
+
+/** Hold this long before a press counts as a long press (the runtime asks the node's listener). */
+const LONG_PRESS_MS = 500
+
+export type SafeAreaEdge = "top" | "right" | "bottom" | "left"
+/** Insets in logical px; `bars` = the edges that are exact-height system bars (`comfort-*` adds its
+ *  knob past a bar instead of flooring against it). */
+export type SafeArea = { top: number, right: number, bottom: number, left: number, bars?: readonly SafeAreaEdge[] }
+
+export type CanvasRendererOptions = {
+  M: WasmModule
+  /** The canvas to paint on, over the scene canvases. */
+  canvas: HTMLCanvasElement
+  canvasHost?: CanvasHost
+  /** What the window loses to the on-screen keyboard, in logical px. */
+  keyboardHeight?: () => number
+}
+
+/** What a page fires for one press besides its pointer events: stopped with them on the way to a
+ *  view under the picture. */
+const FOLLOWERS = ["mousedown", "mouseup", "click", "dblclick", "contextmenu", "touchstart", "touchmove", "touchend"] as const
+
+export const createCanvasRenderer = (root: HTMLElement, options: CanvasRendererOptions) => {
+  const doc = root.ownerDocument
+  const { canvas } = options
+  canvas.style.display = "block"
+  canvas.style.pointerEvents = "none"
+  root.style.touchAction = "none"
+  const context = canvas.getContext("2d")!
+
+  const layer = () => {
+    const el = doc.createElement("div")
+    el.style.cssText = "position:absolute;inset:0;overflow:hidden;pointer-events:none;"
+    return el
+  }
+  const under = layer()
+  const over = layer()
+  root.insertBefore(under, canvas)
+  canvas.after(over)
+
+  // Uploaded-asset image srcs ({ _id }) resolve to blob urls through the fetch store; UIImage(canvas)
+  // surfaces through the canvas host.
+  const host = new BrowserHost({ resolveAssetUrl: (id) => getUrl(id), canvasSurfaces: options.canvasHost })
+  const ui = new BrowserUI(options.M, host, under, over, {
+    keyboardHeight: options.keyboardHeight ?? (() => 0),
+    onToast: (message, duration) => showToast(doc, root, message, duration),
+  })
+
+  // The painter bakes the resolution factor into its transform: a new one when the factor moves.
+  let factor = 1
+  let painter = new Canvas2DPainter(context, factor)
+  // A canvas that took a new size was WIPED: paint once even if nothing changed.
+  let wiped = true
+  const render = () => {
+    if (wiped || ui.needsPaint()) {
+      wiped = false
+      ui.paint(painter, ui.paintOptions())
+    }
+    ui.place()
+  }
+
+  /** The viewport in logical px and the device px per logical px; the canvas already has the size. */
+  const resize = (width: number, height: number, nextFactor: number) => {
+    if (width <= 0 || height <= 0) return
+    if (nextFactor !== factor) { factor = nextFactor; painter = new Canvas2DPainter(context, factor) }
+    wiped = true
+    ui.resize(width, height)
+  }
+  const setSafeArea = (area: SafeArea) => {
+    ui.setSafeArea([area.top, area.right, area.bottom, area.left], area.bars ?? [])
+  }
+
+  // ---- pointers (logical px: clientX and the rect are VISUAL px under a CSS zoom) ----
+  const local = (e: { clientX: number, clientY: number }): [number, number] => {
+    const rect = root.getBoundingClientRect()
+    const scale = viewScale(root)
+    return [(e.clientX - rect.left) / scale, (e.clientY - rect.top) / scale]
+  }
+  const inField = (e: Event) => e.target instanceof Node && over.contains(e.target)
+  const toView = (e: Event) => e.target instanceof Node && under.contains(e.target)
+  /** The event is the UI's: a view under the picture does not hear of it. */
+  const keep = (e: Event) => { if (toView(e)) e.stopPropagation() }
+
+  /** The pointers the UI has (down on it, until they are up): theirs is every event that follows. */
+  const held = new Set<number>()
+  const longPress = new Map<number, number>()
+  const clearLongPress = (id: number) => { const t = longPress.get(id); if (t !== undefined) { clearTimeout(t); longPress.delete(id) } }
+
+  const onDown = (e: PointerEvent) => {
+    if (inField(e)) return   // the field being edited: the browser's own caret and selection
+    const [x, y] = local(e)
+    if (ui.surfaceAt(x, y)) return
+    keep(e)
+    held.add(e.pointerId)
+    try { root.setPointerCapture(e.pointerId) } catch { /* detached */ }
+    ui.pointerDown(e.pointerId, x, y)
+    clearLongPress(e.pointerId)
+    longPress.set(e.pointerId, window.setTimeout(() => { longPress.delete(e.pointerId); ui.longPress(e.pointerId, x, y) }, LONG_PRESS_MS))
+  }
+  // A mouse move is also the cursor's hover (button or not): stored here, resolved once per frame
+  // (TreeUI.tickHover). A finger hovers nothing.
+  const onMove = (e: PointerEvent) => {
+    const [x, y] = local(e)
+    if (held.has(e.pointerId)) { keep(e); ui.pointerMove(e.pointerId, x, y) }
+    if (e.pointerType !== "mouse") return
+    if (inField(e) || (!held.has(e.pointerId) && ui.surfaceAt(x, y))) ui.pointerLeave()
+    else ui.pointerHover(x, y)
+  }
+  const onLeave = (e: PointerEvent) => { if (e.pointerType === "mouse") ui.pointerLeave() }
+  const onUp = (e: PointerEvent) => {
+    if (!held.delete(e.pointerId)) return
+    keep(e)
+    clearLongPress(e.pointerId)
+    const [x, y] = local(e)
+    ui.pointerUp(e.pointerId, x, y)
+  }
+  const onCancel = (e: PointerEvent) => {
+    if (!held.delete(e.pointerId)) return
+    clearLongPress(e.pointerId)
+    ui.pointerCancel(e.pointerId)
+  }
+  const onWheel = (e: WheelEvent) => {
+    if (inField(e)) return
+    const [x, y] = local(e)
+    if (ui.surfaceAt(x, y)) return
+    keep(e)
+    const k = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? ui.height : 1
+    if (ui.wheel(x, y, e.deltaX * k, e.deltaY * k)) e.preventDefault()
+  }
+  // What follows a press the UI took: not the view's either. A mouse press on the UI moves no
+  // focus and selects nothing (the field being edited keeps its caret while a button is pressed).
+  const onFollower = (e: Event) => {
+    if (inField(e)) return
+    const point = "clientX" in e ? (e as MouseEvent) : (e as TouchEvent).changedTouches?.[0]
+    if (!point) return
+    const [x, y] = local(point)
+    if (ui.surfaceAt(x, y)) return
+    keep(e)
+    if (e.type === "mousedown") e.preventDefault()
+  }
+
+  root.addEventListener("pointerdown", onDown, true)
+  root.addEventListener("pointermove", onMove, true)
+  root.addEventListener("pointerleave", onLeave)
+  root.addEventListener("pointerup", onUp, true)
+  root.addEventListener("pointercancel", onCancel, true)
+  root.addEventListener("wheel", onWheel, { passive: false, capture: true })
+  for (const type of FOLLOWERS) root.addEventListener(type, onFollower, true)
+
+  return {
+    ui,
+    render,
+    resize,
+    setSafeArea,
+    destroy() {
+      for (const id of longPress.keys()) clearLongPress(id)
+      root.removeEventListener("pointerdown", onDown, true)
+      root.removeEventListener("pointermove", onMove, true)
+      root.removeEventListener("pointerleave", onLeave)
+      root.removeEventListener("pointerup", onUp, true)
+      root.removeEventListener("pointercancel", onCancel, true)
+      root.removeEventListener("wheel", onWheel, true)
+      for (const type of FOLLOWERS) root.removeEventListener(type, onFollower, true)
+      ui.dispose()
+      under.remove()
+      over.remove()
+    },
+  }
+}
+
+export type CanvasRenderer = ReturnType<typeof createCanvasRenderer>