@solidrt/2d 0.0.56 → 0.0.58

package/src/tiles.ts

@@ -3,7 +3,7 @@
 // never a quad per tile. On tiled GPUs the budget is primitive count, so a
 // 100x100 world must not be 10,000 quads per frame; baked, it is a few
 // chunk textures, and scrolling is a transform on the composited world
-// (see <TileLayer> in components.tsx), never a repaint.
+// (see <TileLayer> in components/tile-layer.tsx), never a repaint.
 //
 // Each chunk is a small copy of the sprite pipeline (shaders.ts) with fixed
 // record slots - record localRow * chunkTiles + localCol IS that tile, an
@@ -15,11 +15,11 @@
 // Chunks allocate lazily on the first setTile that gives them content: an
 // empty chunk costs nothing - no records, no buffer, no texture - so a
 // sparse world is bounded by its content, and world size is bounded by
-// memory, not maxTextureSize. setTile batches to a microtask; the flush
-// publishes and re-bakes ONLY dirty chunks. A layer nobody edits publishes
-// nothing, renders nothing, and costs nothing per frame. Camera-driven
-// residency (bake far chunks on approach, evict them) is deliberately not
-// here yet - see okf/backlog/2d-baked-layers.md.
+// memory, not maxTextureSize. setTile and setTiles batch to a microtask;
+// the flush publishes and re-bakes ONLY dirty chunks. A layer nobody edits
+// publishes nothing, renders nothing, and costs nothing per frame.
+// Camera-driven residency (bake far chunks on approach, evict them) is
+// deliberately not here yet - see okf/backlog/2d-baked-layers.md.
 import { getOwner, onCleanup } from "@solidrt/core"
 import {
   beginBufferWrite,
@@ -44,6 +44,19 @@ const RESOLVED = Promise.resolve()
 
 // Default chunk edge in pixels; the tile count per chunk derives from it.
 const CHUNK_TARGET_PX = 512
+// The index that clears a cell in setTiles' index form: -1, which a
+// Uint16Array holds as 0xffff (the same bits), so both spellings mean it
+// and a frames table stops one short of it.
+const CLEAR_INDEX = 0xffff
+
+export type Tint = [number, number, number, number]
+
+// Whether a value is a frame: four numeric UVs (the validation both write
+// paths run before touching a record).
+let isFrame = (f: unknown): f is Frame => {
+  let o = f as Frame | null
+  return typeof o === "object" && o !== null && typeof o.u0 === "number" && typeof o.v0 === "number" && typeof o.u1 === "number" && typeof o.v1 === "number"
+}
 
 export type TileLayerOptions = {
   /** Per-chunk clear color (the name says the scope: chunks that never
@@ -71,6 +84,13 @@ export type TileLayerOptions = {
   chunkTiles?: number
   /** Layer tint, [r, g, b, a] in 0..1; see TileLayer.setTint. */
   tint?: [number, number, number, number]
+  /**
+   * The frames table setTiles' index cells name - a tileset: `grid()`'s
+   * array, or any Frame[] (up to 65535 entries), so a generated world is
+   * a Uint16Array of indices and never an array of frame objects. Fixed
+   * at creation; setTile takes frames directly either way.
+   */
+  frames?: Frame[]
   label?: string
   /** Skip the owner-scoped auto-dispose (see createTileLayer). */
   autoFree?: boolean
@@ -126,9 +146,25 @@ export type TileLayer = {
    * Batched; the microtask flush publishes and re-bakes ONLY the chunks
    * that changed, however many tiles did.
    */
-  setTile(col: number, row: number, frame: Frame | null, opts?: { tint?: [number, number, number, number] }): void
+  setTile(col: number, row: number, frame: Frame | null, opts?: { tint?: Tint }): void
+  /**
+   * Set a rect of cells at once: `cols` x `rows` cells from `col`, `row`,
+   * `cells` in row-major order (`cols * rows` long) - frames (null clears)
+   * or, with a `frames` table on the layer, indices into it (-1 clears; a
+   * Uint16Array holds -1 as 0xffff, the same bits). Unity's SetTilesBlock,
+   * Phaser's putTilesAt: one locate and one dirty mark per chunk the rect
+   * touches, the per-cell loop inside the layer over its own records, the
+   * same batching and flush. A chunk the rect only clears never allocates,
+   * so a whole-world write of a sparse world stays sparse. `tint` applies
+   * to every cell set, as setTile's; absent, each cell keeps its own. A
+   * bad entry throws before any cell changes.
+   */
+  setTiles(col: number, row: number, cols: number, rows: number, cells: ArrayLike<Frame | null> | ArrayLike<number>, opts?: { tint?: Tint }): void
   /** The frame at a cell, or null when empty. */
   getTile(col: number, row: number): Frame | null
+  /** The frames table given at creation (what setTiles' indices name), or
+   * null. */
+  readonly frames: readonly Frame[] | null
   /**
    * Tint the whole layer, [r, g, b, a] in 0..1: a uniform multiplied over
    * every cell's own tint (day/night, a dimmed parallax plane). Not a
@@ -186,8 +222,27 @@ export function createTileLayer(
     )
   }
   let label = opts?.label ?? "tiles"
-  let tint: [number, number, number, number] = opts?.tint ?? [1, 1, 1, 1]
+  let tint: Tint = opts?.tint ?? [1, 1, 1, 1]
   checkTint("createTileLayer", tint)
+  // The frames table, copied (the caller's array may move on) and checked
+  // once, plus its UVs as four floats per entry: an index write copies by
+  // offset instead of reading a frame object per cell.
+  let frames: Frame[] | null = opts?.frames ? opts.frames.slice() : null
+  let tableUv: Float32Array | null = null
+  if (frames !== null) {
+    if (frames.length >= CLEAR_INDEX) {
+      throw new Error(`createTileLayer: a frames table holds at most ${CLEAR_INDEX - 1} frames, got ${frames.length}`)
+    }
+    tableUv = new Float32Array(frames.length * 4)
+    for (let i = 0; i < frames.length; i++) {
+      let f = frames[i]!
+      if (!isFrame(f)) throw new Error(`createTileLayer: frames[${i}] is not a frame, got ${JSON.stringify(f)}`)
+      tableUv[i * 4] = f.u0
+      tableUv[i * 4 + 1] = f.v0
+      tableUv[i * 4 + 2] = f.u1
+      tableUv[i * 4 + 3] = f.v1
+    }
+  }
   let oversample = opts?.oversample ?? 1
   checkOversample("createTileLayer", oversample, chunkW, chunkH)
   let thrash = thrashSentinel(`tile layer "${label}"`)
@@ -269,13 +324,45 @@ export function createTileLayer(
     return chunk
   }
 
-  let locate = (col: number, row: number, verb: string): [number, number] => {
+  let checkCell = (col: number, row: number, verb: string): void => {
     if (!(Number.isInteger(col) && Number.isInteger(row) && col >= 0 && col < cols && row >= 0 && row < rows)) {
       throw new Error(`${verb}: cell ${col}, ${row} outside the ${cols} x ${rows} grid`)
     }
-    let index = Math.floor(row / chunkTiles) * chunkCols + Math.floor(col / chunkTiles)
-    let at = ((row % chunkTiles) * chunkTiles + (col % chunkTiles)) * FLOATS_PER_SPRITE
-    return [index, at]
+  }
+  // A cell's chunk index, and its record offset inside that chunk.
+  let chunkOf = (col: number, row: number): number => Math.floor(row / chunkTiles) * chunkCols + Math.floor(col / chunkTiles)
+  let slot = (col: number, row: number): number => ((row % chunkTiles) * chunkTiles + (col % chunkTiles)) * FLOATS_PER_SPRITE
+  // Write one cell's record: the quad at the cell, the frame's UVs, and
+  // the tint - the one given, else the default when the cell comes up from
+  // empty (a re-set keeps its tint: absent keys keep their values, like
+  // every options object here).
+  let writeCell = (r: Float32Array, at: number, col: number, row: number, u0: number, v0: number, u1: number, v1: number, cellTint: Tint | undefined): void => {
+    let fresh = r[at + 2] === 0
+    r[at] = (col + 0.5) * tileW
+    r[at + 1] = (row + 0.5) * tileH
+    r[at + 2] = tileW
+    r[at + 3] = tileH
+    r[at + 4] = u0
+    r[at + 5] = v0
+    r[at + 6] = u1
+    r[at + 7] = v1
+    if (cellTint !== undefined) {
+      r[at + 9] = cellTint[0]
+      r[at + 10] = cellTint[1]
+      r[at + 11] = cellTint[2]
+      r[at + 12] = cellTint[3]
+    } else if (fresh) {
+      r[at + 9] = 1
+      r[at + 10] = 1
+      r[at + 11] = 1
+      r[at + 12] = 1
+    }
+  }
+  // Clear one cell: a zero-size quad draws nothing (the tint stays, and
+  // a later set from empty resets it).
+  let clearCell = (r: Float32Array, at: number): void => {
+    r[at + 2] = 0
+    r[at + 3] = 0
   }
 
   let layer: TileLayer = {
@@ -306,50 +393,116 @@ export function createTileLayer(
     },
     setTile(col, row, frame, opts) {
       if (disposed) return
-      let [index, at] = locate(col, row, "setTile")
+      checkCell(col, row, "setTile")
+      let index = chunkOf(col, row)
+      let at = slot(col, row)
       let chunk = resident.get(index)
       if (frame === null) {
         // Clearing a cell no chunk holds is a no-op, not an allocation.
         if (!chunk) return
-        chunk.records[at + 2] = 0
-        chunk.records[at + 3] = 0
+        clearCell(chunk.records, at)
       } else {
+        if (!isFrame(frame)) throw new Error(`setTile: not a frame, got ${JSON.stringify(frame)}`)
+        if (opts?.tint !== undefined) checkTint("setTile", opts.tint)
         chunk ??= allocate(index)
-        let r = chunk.records
-        // A cell coming up from empty starts at the default tint; a
-        // re-set keeps its tint unless opts carries one (absent keys keep
-        // their values, like every options object here).
-        let fresh = r[at + 2] === 0
-        r[at] = (col + 0.5) * tileW
-        r[at + 1] = (row + 0.5) * tileH
-        r[at + 2] = tileW
-        r[at + 3] = tileH
-        r[at + 4] = frame.u0
-        r[at + 5] = frame.v0
-        r[at + 6] = frame.u1
-        r[at + 7] = frame.v1
-        if (opts?.tint !== undefined) {
-          checkTint("setTile", opts.tint)
-          r[at + 9] = opts.tint[0]
-          r[at + 10] = opts.tint[1]
-          r[at + 11] = opts.tint[2]
-          r[at + 12] = opts.tint[3]
-        } else if (fresh) {
-          r[at + 9] = 1
-          r[at + 10] = 1
-          r[at + 11] = 1
-          r[at + 12] = 1
-        }
+        writeCell(chunk.records, at, col, row, frame.u0, frame.v0, frame.u1, frame.v1, opts?.tint)
       }
       touch(chunk)
     },
+    setTiles(col, row, w, h, cells, opts) {
+      if (disposed) return
+      if (!(Number.isInteger(col) && Number.isInteger(row) && Number.isInteger(w) && Number.isInteger(h) && w > 0 && h > 0 && col >= 0 && row >= 0 && col + w <= cols && row + h <= rows)) {
+        throw new Error(`setTiles: rect ${col}, ${row} of ${w} x ${h} outside the ${cols} x ${rows} grid`)
+      }
+      if (cells.length !== w * h) throw new Error(`setTiles: a ${w} x ${h} rect takes ${w * h} cells, got ${cells.length}`)
+      if (opts?.tint !== undefined) checkTint("setTiles", opts.tint)
+      let cellTint = opts?.tint
+      // The two forms: indices into the table, or frames. Every entry is
+      // checked before the first write, so a bad one changes nothing.
+      let idx = typeof cells[0] === "number" ? (cells as ArrayLike<number>) : null
+      let objs = idx === null ? (cells as ArrayLike<Frame | null>) : null
+      if (idx !== null) {
+        if (frames === null) throw new Error("setTiles: index cells need a frames table (createTileLayer's frames option)")
+        let count = frames.length
+        for (let i = 0; i < idx.length; i++) {
+          let k = idx[i]!
+          if (k === -1 || k === CLEAR_INDEX) continue
+          if (!(Number.isInteger(k) && k >= 0 && k < count)) throw new Error(`setTiles: index ${k} at cell ${i} outside the ${count}-frame table`)
+        }
+      } else {
+        for (let i = 0; i < objs!.length; i++) {
+          let f = objs![i]
+          if (f !== null && f !== undefined && !isFrame(f)) throw new Error(`setTiles: cell ${i} is neither a frame nor null, got ${JSON.stringify(f)}`)
+        }
+      }
+      let uv = tableUv
+      // Chunk by chunk over the rect: each chunk's slice of the rect is a
+      // sub-rect walked row by row with the record offset advancing, one
+      // dirty mark at the end. A chunk the slice only clears is never
+      // allocated.
+      let cr0 = Math.floor(row / chunkTiles)
+      let cr1 = Math.floor((row + h - 1) / chunkTiles)
+      let cc0 = Math.floor(col / chunkTiles)
+      let cc1 = Math.floor((col + w - 1) / chunkTiles)
+      for (let cr = cr0; cr <= cr1; cr++) {
+        let rowA = Math.max(row, cr * chunkTiles)
+        let rowB = Math.min(row + h, (cr + 1) * chunkTiles)
+        for (let cc = cc0; cc <= cc1; cc++) {
+          let colA = Math.max(col, cc * chunkTiles)
+          let colB = Math.min(col + w, (cc + 1) * chunkTiles)
+          let index = cr * chunkCols + cc
+          let chunk = resident.get(index)
+          let r = chunk ? chunk.records : null
+          for (let y = rowA; y < rowB; y++) {
+            let at = slot(colA, y)
+            let i = (y - row) * w + (colA - col)
+            for (let x = colA; x < colB; x++, at += FLOATS_PER_SPRITE, i++) {
+              let u0: number
+              let v0: number
+              let u1: number
+              let v1: number
+              if (idx !== null) {
+                let k = idx[i]!
+                if (k === -1 || k === CLEAR_INDEX) {
+                  if (r !== null) clearCell(r, at)
+                  continue
+                }
+                let b = k * 4
+                u0 = uv![b]!
+                v0 = uv![b + 1]!
+                u1 = uv![b + 2]!
+                v1 = uv![b + 3]!
+              } else {
+                let f = objs![i]
+                if (f === null || f === undefined) {
+                  if (r !== null) clearCell(r, at)
+                  continue
+                }
+                u0 = f.u0
+                v0 = f.v0
+                u1 = f.u1
+                v1 = f.v1
+              }
+              if (r === null) {
+                chunk = allocate(index)
+                r = chunk.records
+              }
+              writeCell(r, at, x, y, u0, v0, u1, v1, cellTint)
+            }
+          }
+          if (chunk) touch(chunk)
+        }
+      }
+    },
     getTile(col, row) {
-      let [index, at] = locate(col, row, "getTile")
-      let chunk = resident.get(index)
+      checkCell(col, row, "getTile")
+      let chunk = resident.get(chunkOf(col, row))
+      let at = slot(col, row)
       if (!chunk || chunk.records[at + 2] === 0) return null
       let r = chunk.records
       return { u0: r[at + 4]!, v0: r[at + 5]!, u1: r[at + 6]!, v1: r[at + 7]! }
     },
+    frames,
     setTint(next) {
       if (disposed) return
       checkTint("setTint", next)

package/src/views.ts

@@ -0,0 +1,294 @@
+// A layer's views: every rendering of a layer's world is a view - one
+// draw target holding ONE entry over the layer's pipeline and instance
+// buffers, with a camera and a viewport of its own - and a layer has no
+// output but its views (Unity's scene renders only through Cameras,
+// Godot's World2D only through Viewports; @solidrt/3d's scene.createView
+// one dimension down). The window-filling main view, the minimap, the
+// radar strip, the zoomed inset, two split-screen panes: all the same
+// object. No sprite is mirrored, no record is written twice, and the
+// core's key-order gather (the entry's instanceOrder) happens in the
+// buffers at publish: ONE entry per buffer declares the order - the first
+// live view's, re-homed to the next when that view goes - and every other
+// entry reads the buffers already sorted. The layer fans buffer swaps
+// (growth), the instance count and the tint out to every view through
+// the registry below; the camera and the viewport are each view's own
+// params, so a view costs no per-frame JS beyond its camera writes.
+// Pointer events run the layer's dispatch (dispatch.ts) with the view's
+// camera undone over the layer's pick, the view as the root of the walk:
+// a sprite under a minimap gets its ordinary handlers, and the view's
+// listeners are the last stop.
+import { addDraw, createDrawTarget, destroyTexture, removeDraw, setDrawBuffers, setDrawRange, setTargetParams, setTargetSize } from "@solidrt/core/gpu"
+import type { BufferId, BufferUpdate, DrawId, InstanceOrder, RenderPipelineId, TextureId } from "@solidrt/core/gpu"
+import { applyCamera, cameraParams, checkCamera, defaultCamera, projectCamera, unprojectCamera } from "./camera.ts"
+import type { CameraState, CameraUpdate } from "./camera.ts"
+import { spriteDispatch } from "./dispatch.ts"
+import type { PointerFeed } from "@solidrt/core"
+import type { LayerPointerListener, Sprite, SpriteHandlers } from "./layer.ts"
+import { checkOversample, thrashSentinel } from "./oversample.ts"
+
+export type ViewOptions = {
+  /** View pixels: the viewport its camera maps the world onto. */
+  width: number
+  height: number
+  /** The camera to start from (a setCamera update); default the identity. */
+  camera?: CameraUpdate
+  /** Target texels per view pixel (see ViewHandle.setOversample); default 1. */
+  oversample?: number
+  clearColor?: [number, number, number, number]
+  label?: string
+}
+
+/**
+ * A view of a layer (LayerBase.createView): the viewport contract -
+ * texture, size, oversample, camera and pointer dispatch - over the
+ * layer's sprites, with a camera of its own. The sprites are the layer's:
+ * add, write and pick through the layer, tint through the layer (every
+ * view follows it). `dispose` is idempotent; views also die with their
+ * layer.
+ */
+export type ViewHandle = {
+  /** The view's output: an ordinary texture id (`<texture src>`). */
+  texture: TextureId
+  /** Element handlers wiring the view's pointer events (sprites, groups
+   * and the root listeners); see handlersFor. */
+  handlers: SpriteHandlers
+  /** View pixels, as created or last set by setSize. */
+  readonly width: number
+  readonly height: number
+  setSize(width: number, height: number): void
+  /**
+   * Listen at the root of the event walk. Every down, move, up, wheel and
+   * tap arrives here after the hit sprite and its enclosing groups
+   * (`sprite` set) or as the walk's only stop over empty space (`sprite`
+   * null), unless a handler stopped it on the way. Listeners run in
+   * registration order and all of them run - the root is the last stop,
+   * there is nothing left to claim. Returns the remover. The app's own
+   * root handling (deselect on a miss, a marquee) and controls
+   * (createCamera2d's attach) meet here, which is why the root is a list
+   * where a sprite has plain fields.
+   */
+  listen(listener: LayerPointerListener): () => void
+  /** Target texels per view pixel; see setOversample. */
+  readonly oversample: number
+  /**
+   * Re-render at `n` target texels per view pixel (positive integer): the
+   * target resizes in place at its stable id; view pixels, records, camera
+   * and picking are untouched. Pick `n` as the ceiling of the device pixels
+   * one view pixel covers on screen (display scale times any designSize
+   * fit or layout scaling), which the components do in onLayout.
+   */
+  setOversample(n: number): void
+  setCamera(update: CameraUpdate): void
+  /** The camera as last set (a fresh object per call, every field
+   * present): the argument for projectCamera/unprojectCamera -
+   * @solidrt/3d's scene.camera(). */
+  camera(): CameraState
+  /** World (layer) pixels -> view pixels under the current camera:
+   * projectCamera over camera(). */
+  project(x: number, y: number): [number, number]
+  /** View pixels -> world (layer) pixels, the inverse: what pointer
+   * dispatch applies to every event. */
+  unproject(x: number, y: number): [number, number]
+  /**
+   * handlers for a leaf whose LAYOUT size differs from the view size
+   * (events scale by view/layout; a leaf laid out AT view size just uses
+   * `handlers`). `layout` is read per event, so a resize-reactive layout
+   * just works - @solidrt/3d's handlersFor, one dimension down.
+   */
+  handlersFor(layout: () => { width: number; height: number }): SpriteHandlers
+  dispose(): void
+}
+
+// What a layer hands its views: the pipeline and quad every entry draws
+// with, the atlas, the key order one entry declares, and live reads of
+// the state the layer fans out.
+export type ViewDeps = {
+  label: string
+  pipeline: RenderPipelineId
+  quad: BufferId
+  atlas: TextureId
+  /** The layer's current instance binding, in the entry's own spelling
+   * (`instanceBuffers` on the node layer, `instanceBuffer` on records). */
+  buffers: () => BufferUpdate
+  /** The instance count as last published. */
+  count: () => number
+  tint: () => [number, number, number, number]
+  pick: (x: number, y: number) => Sprite[]
+  /** The layer's key order (`orderBy`), declared by ONE live entry. */
+  order?: InstanceOrder
+}
+
+/** The layer side of its views: create, and fan out what changes. */
+export type Views = {
+  create(opts: ViewOptions): ViewHandle
+  /** The layer swapped its instance buffers (growth): every entry
+   * follows. */
+  setBuffers(update: BufferUpdate): void
+  setCount(count: number): void
+  setTint(tint: [number, number, number, number]): void
+  dispose(): void
+}
+
+type ViewRecord = { texture: TextureId; entry: DrawId; dispose(): void }
+
+export function createViews(deps: ViewDeps): Views {
+  let views = new Set<ViewRecord>()
+  // The one entry declaring the key order (null until a view exists, or
+  // while the layer has no order).
+  let ordered: ViewRecord | null = null
+  let entryFor = (texture: TextureId, order: InstanceOrder | undefined): DrawId =>
+    addDraw(texture, deps.pipeline, null, {
+      buffer: deps.quad,
+      vertexCount: 4,
+      ...deps.buffers(),
+      instanceOrder: order,
+      instanceCount: deps.count(),
+    })
+  // The ordered view went: the next live view re-adds its entry with the
+  // order, so key order survives any one view's lifetime.
+  let rehome = () => {
+    if (deps.order === undefined) return
+    let next = views.values().next().value
+    if (!next) return
+    removeDraw(next.texture, next.entry)
+    next.entry = entryFor(next.texture, deps.order)
+    ordered = next
+  }
+  return {
+    create(opts) {
+      let width = opts.width
+      let height = opts.height
+      if (!(Number.isInteger(width) && width > 0 && Number.isInteger(height) && height > 0)) {
+        throw new Error(`createView: width and height must be positive integers, got ${width} x ${height}`)
+      }
+      let oversample = opts.oversample ?? 1
+      checkOversample("createView", oversample, width, height)
+      let label = opts.label ?? `${deps.label}-view`
+      let cam = defaultCamera()
+      if (opts.camera) {
+        checkCamera(opts.camera)
+        applyCamera(cam, opts.camera)
+      }
+      let texture = createDrawTarget(
+        width * oversample,
+        height * oversample,
+        { uViewport: [width, height], ...cameraParams(cam), uTint: deps.tint() },
+        { textures: { uAtlas: deps.atlas }, clearColor: opts.clearColor ?? [0, 0, 0, 0], label, autoFree: false },
+      )
+      let order = ordered === null ? deps.order : undefined
+      let entry = entryFor(texture, order)
+      let thrash = thrashSentinel(`view "${label}"`)
+      let disposed = false
+      let listeners = new Set<LayerPointerListener>()
+      let record: ViewRecord = {
+        texture,
+        entry,
+        dispose() {
+          if (disposed) return
+          disposed = true
+          listeners.clear()
+          views.delete(record)
+          // The entry dies with its target, releasing the buffers' order.
+          destroyTexture(texture)
+          if (ordered === record) {
+            ordered = null
+            rehome()
+          }
+        },
+      }
+      if (order !== undefined) ordered = record
+      let view: ViewHandle = {
+        texture,
+        handlers: undefined as unknown as SpriteHandlers,
+        get width() {
+          return width
+        },
+        get height() {
+          return height
+        },
+        setSize(w, h) {
+          if (disposed || (w === width && h === height)) return
+          checkOversample("setSize", oversample, w, h)
+          width = w
+          height = h
+          setTargetSize(texture, w * oversample, h * oversample)
+          setTargetParams(texture, { uViewport: [w, h] })
+        },
+        listen(listener) {
+          listeners.add(listener)
+          return () => {
+            listeners.delete(listener)
+          }
+        },
+        get oversample() {
+          return oversample
+        },
+        setOversample(n) {
+          if (disposed || n === oversample) return
+          checkOversample("setOversample", n, width, height)
+          thrash()
+          oversample = n
+          setTargetSize(texture, width * n, height * n)
+        },
+        setCamera(update) {
+          if (disposed) return
+          checkCamera(update)
+          applyCamera(cam, update)
+          setTargetParams(texture, cameraParams(cam))
+        },
+        camera() {
+          return { ...cam }
+        },
+        project(x, y) {
+          return projectCamera(cam, x, y)
+        },
+        unproject(x, y) {
+          return unprojectCamera(cam, x, y)
+        },
+        handlersFor(layout) {
+          return dispatch(layout)
+        },
+        dispose: record.dispose,
+      }
+      let dispatch = spriteDispatch({
+        size: () => [width, height],
+        camera: () => cam,
+        pick: deps.pick,
+        root: view,
+        listeners,
+      })
+      view.handlers = dispatch(null)
+      views.add(record)
+      return view
+    },
+    setBuffers(update) {
+      for (let v of views) setDrawBuffers(v.texture, v.entry, update)
+    },
+    setCount(count) {
+      for (let v of views) setDrawRange(v.texture, v.entry, { instanceCount: count })
+    },
+    setTint(tint) {
+      for (let v of views) setTargetParams(v.texture, { uTint: tint })
+    },
+    dispose() {
+      for (let v of [...views]) v.dispose()
+    },
+  }
+}
+
+/**
+ * Feed a pointer feed (createPointerFeed) from a view's root: the events
+ * the sprites let through - a sprite that claims its press
+ * (stopPropagation on its down) keeps a camera bound to the feed out of
+ * that drag, a drag on empty space or an unclaimed sprite pans, a wheel
+ * anywhere zooms. Returns the detach. The components do this for their
+ * `pointer` prop; an imperative view calls it directly.
+ */
+export function feedPointer(view: ViewHandle, feed: PointerFeed): () => void {
+  return view.listen({
+    onPointerDown: e => feed.handlers.onPointerDown(e.native),
+    onPointerMove: e => feed.handlers.onPointerMove(e.native),
+    onPointerUp: e => feed.handlers.onPointerUp(e.native),
+    onWheel: e => feed.handlers.onWheel(e.native),
+  })
+}