@solidrt/2d 0.0.71 → 0.0.73

package/src/components/camera2d.tsx

@@ -1,4 +1,4 @@
-import { createEffect, merge, onFrame, untrack } from "@solidrt/core"
+import { callRef, createEffect, merge, onFrame, onLayout, untrack } from "@solidrt/core"
 import type { InputMap, VoidComponent } from "@solidrt/core"
 import { createCamera2d } from "../camera2d.ts"
 import type { Camera2d as Camera2dHandle, Camera2dAxes, Camera2dOptions } from "../camera2d.ts"
@@ -33,9 +33,10 @@ const MAX_CAMERA_DT = 0.1
  * the follow's zones, the offset lane or a rate follows its prop, and a
  * bounds, pivot or offset change re-clamps and pushes the pose at once -
  * the `<OrbitCamera>` rule. The view's `size()` is the viewport (live: a
- * fill layer's box, a setSize, a `<View2d>` resize). Frames run only
- * while the camera moves (`active()`), so a resting camera leaves the
- * app demand-driven idle.
+ * fill layer's box, a setSize, a `<View2d>` resize), re-read after every
+ * layout so a resting camera's pivot follows a resize too. Frames run
+ * only while the camera moves (`active()`), so a resting camera leaves
+ * the app demand-driven idle.
  */
 export let Camera2d: VoidComponent<Camera2dProps> = props => {
   let target = useSpriteLayer().viewport
@@ -61,6 +62,14 @@ export let Camera2d: VoidComponent<Camera2dProps> = props => {
       })
     },
   )
+  // The viewport follows layout: a fill layer's first box replaces its
+  // creation size, a <View2d> or window resize changes it, and a camera at
+  // rest runs no frame to notice, so its pivot (a viewport fraction) would
+  // sit where the old size put it until it next moved. A child mounts after
+  // its layer, so this handler runs after the one that sizes the view;
+  // update(0) re-reads the viewport and pushes only when it changed.
+  // Untracked: the control reads its options through the props getters.
+  onLayout(() => untrack(() => cam.update(0)))
   // A bounds, pivot or offset prop change re-clamps and pushes the pose
   // at once (set({}) applies the clamps and the lanes). Deferred: the
   // creation already clamped and pushed the initial pose. Untracked: the
@@ -72,6 +81,6 @@ export let Camera2d: VoidComponent<Camera2dProps> = props => {
     () => untrack(() => cam.set({})),
     { defer: true },
   )
-  untrack(() => props.ref)?.(cam)
+  callRef(() => props.ref, cam)
   return null
 }

package/src/components/group.tsx

@@ -1,6 +1,6 @@
-import { createEffect, onCleanup, untrack, useContext } from "@solidrt/core"
+import { callRef, createEffect, onCleanup, untrack, useContext } from "@solidrt/core"
 import type { ParentComponent } from "@solidrt/core"
-import { addGroup, destroyGroup, setGroup, setGroupTransition } from "../layer.ts"
+import { addGroup, destroyGroup, setGroup, setGroupTimeScale, setGroupTransition } from "../layer.ts"
 import type { SpriteGroup, TransitionEndEvent } from "../layer.ts"
 import type { SpriteTransition } from "../layer.ts"
 import { GroupContext, LayerContext } from "./context.ts"
@@ -24,6 +24,10 @@ export type GroupProps = BubblingSpritePointerProps & {
   transition?: SpriteTransition | string | null
   /** A declared transition settled on one component. */
   onTransitionEnd?: (event: TransitionEndEvent) => void
+  /** The rate the native motion under this group runs at (see
+   * setGroupTimeScale): 0 freezes the subtree, 1 is app time; the nearest
+   * declaring node wins. Undefined or null inherits. */
+  timeScale?: number | null
   ref?: (group: SpriteGroup) => void
 }
 
@@ -47,6 +51,14 @@ export let Group: ParentComponent<GroupProps> = props => {
     () => props.transition,
     transition => setGroupTransition(group, transition ?? null),
   )
+  // Built only when the prop is present (the compiler emits the getter
+  // only then), so a plain group pays no effect for it.
+  if ("timeScale" in props) {
+    createEffect(
+      () => props.timeScale,
+      scale => setGroupTimeScale(group, scale ?? null),
+    )
+  }
   createEffect(
     () => [props.onPointerDown, props.onPointerMove, props.onPointerUp, props.onPointerCancel, props.onWheel, props.onTap, props.onTransitionEnd] as const,
     ([down, move, up, cancel, wheel, tap, end]) => {
@@ -59,7 +71,7 @@ export let Group: ParentComponent<GroupProps> = props => {
       group.onTransitionEnd = end
     },
   )
-  untrack(() => props.ref)?.(group)
+  callRef(() => props.ref, group)
   onCleanup(() => destroyGroup(group))
   return <GroupContext value={group}>{props.children}</GroupContext>
 }

package/src/components/shots.tsx

@@ -1,4 +1,4 @@
-import { createContext, createEffect, onCleanup, onFrame, untrack, useContext } from "@solidrt/core"
+import { callRef, createContext, createEffect, onCleanup, onFrame, untrack, useContext } from "@solidrt/core"
 import type { Element, ParentComponent } from "@solidrt/core"
 import { ViewportContext, useSpriteLayer } from "./context.ts"
 import { createShots } from "../shots.ts"
@@ -59,7 +59,7 @@ export let Shots: ParentComponent<ShotsProps> = props => {
       })
     },
   )
-  untrack(() => props.ref)?.(shots)
+  callRef(() => props.ref, shots)
   return <ShotsContext value={shots}>{props.children}</ShotsContext>
 }
 

package/src/components/sprite-layer.tsx

@@ -1,7 +1,8 @@
-import { createEffect, displayScale, getBoundingBoxViewport, getLayoutBox, onCleanup, onLayout, untrack, warnOnce } from "@solidrt/core"
+import { callRef, createEffect, displayScale, getBoundingBoxViewport, getLayoutBox, onCleanup, onLayout, untrack, warnOnce } from "@solidrt/core"
 import type { Element, ParentComponent, PointerFeed, TextureId } from "@solidrt/core"
-import type { BlendMode } from "@solidrt/core/gpu"
+import type { ShaderParams } from "@solidrt/core/gpu"
 import type { Atlas } from "../atlas.ts"
+import type { Material } from "../material.ts"
 import { createSpriteLayer } from "../layer.ts"
 import { feedPointer } from "../views.ts"
 import type { LayerPointerEvent, LayerTapEvent, LayerWheelEvent, SpriteLayer as LayerHandle } from "../layer.ts"
@@ -52,16 +53,22 @@ export type SpriteLayerProps = LayerPointerProps & {
    * still its own, `<Sprite>`, `<Group>` and `<Text2d>` children mount
    * into it - and leaves its lifetime to its maker, so the component
    * face sits over an imperative layer. The creation props (atlases,
-   * capacity, blend, orderBy) describe a layer the component makes, so
-   * with `layer` they have nothing to apply to and throw.
+   * capacity, material, orderBy) describe a layer the component makes,
+   * so with `layer` they have nothing to apply to and throw.
    */
   layer?: LayerHandle
   /** Initial record reservation (grows on demand); default 1024. */
   capacity?: number
-  /** How the sprites blend into the layer's views (see
-   * SpriteLayerOptions.blend); default "alpha", "add" for glows and
-   * additive particles. Fixed at mount. */
-  blend?: BlendMode
+  /** The layer's material (see SpriteLayerOptions.material): its blend,
+   * its look, its per-sprite style record; default `unlit()`, `unlit({
+   * blend: "add" })` for glows and additive particles. Fixed at mount. */
+  material?: Material
+  /** Uniform values written to every view of the layer (layer.setParams
+   * as a prop, over the material's own): the material's prelude
+   * uniforms. Live, with merge semantics - a key that disappears keeps
+   * its last value; for per-frame values prefer `ref` + setParams from
+   * onFrame. */
+  params?: ShaderParams
   /** The own view's clear color. */
   clearColor?: [number, number, number, number]
   /** Pan/zoom/rotate the own view over the world (in-shader); a
@@ -106,6 +113,13 @@ export type SpriteLayerProps = LayerPointerProps & {
    * under it). Live: a change applies to the next frame's cascade.
    */
   stagger?: number
+  /**
+   * The rate the layer's native motion runs at (layer.setTimeScale as a
+   * prop): 0 pauses every sprite and group transition while the app's UI
+   * keeps moving, 1 is app time; a `<Group timeScale={1}>` inside keeps
+   * running. Undefined or null is app time. Live.
+   */
+  timeScale?: number | null
   label?: string
   /** The layer: sprites, tint, pick, createView. */
   ref?: (layer: LayerHandle) => void
@@ -150,7 +164,7 @@ const FILL_INITIAL_SIZE = 1
 
 // The props that describe a layer the component creates - meaningless,
 // hence rejected, on an adopted one (`layer`), which was created already.
-const CREATION_PROPS = ["atlases", "capacity", "blend", "orderBy"] as const
+const CREATION_PROPS = ["atlases", "capacity", "material", "orderBy"] as const
 
 // The props that configure the layer's own view - meaningless, hence
 // rejected, on a layer without one (output={false}).
@@ -195,10 +209,12 @@ export let SpriteLayer: ParentComponent<SpriteLayerProps> = props => {
     if (props.atlases === undefined) throw new Error("SpriteLayer: give atlases (a layer of its own) or layer (an existing one)")
     return createSpriteLayer(props.atlases, {
       capacity: props.capacity,
-      blend: props.blend,
+      material: props.material,
+      params: props.params,
       tint: props.tint,
       orderBy: props.orderBy,
       stagger: props.stagger,
+      timeScale: props.timeScale ?? undefined,
       label: props.label,
     })
   })
@@ -208,12 +224,24 @@ export let SpriteLayer: ParentComponent<SpriteLayerProps> = props => {
       if (tint !== undefined) layer.setTint(tint)
     },
   )
+  createEffect(
+    () => props.params,
+    params => {
+      if (params !== undefined) layer.setParams(params)
+    },
+    { defer: true },
+  )
   createEffect(
     () => props.stagger,
     ms => layer.setStagger(ms ?? null),
     { defer: true },
   )
-  untrack(() => props.ref)?.(layer)
+  createEffect(
+    () => props.timeScale,
+    scale => layer.setTimeScale(scale ?? null),
+    { defer: true },
+  )
+  callRef(() => props.ref, layer)
   let output = untrack(() => props.output)
   if (output === false) {
     untrack(() => {
@@ -274,7 +302,11 @@ export let SpriteLayer: ParentComponent<SpriteLayerProps> = props => {
     },
     { defer: true },
   )
-  untrack(() => props.viewRef)?.(view)
+  callRef(() => props.viewRef, view)
+  // An adopted layer outlives the component, so its own view must not: a
+  // layer of the component's own takes the view with it (createSpriteLayer's
+  // owner-scoped dispose), an adopted one frees nothing of the component's.
+  if (untrack(() => props.layer)) onCleanup(() => view.dispose())
   let pointer = untrack(() => props.pointer) ?? null
   if (pointer) onCleanup(feedPointer(view, pointer))
   // The view's own handlers at the root of the walk; the props are read

package/src/components/sprite.tsx

@@ -1,6 +1,7 @@
-import { createEffect, onCleanup, untrack, useContext } from "@solidrt/core"
+import { callRef, createEffect, onCleanup, untrack, useContext } from "@solidrt/core"
 import type { VoidComponent } from "@solidrt/core"
-import { addSprite, destroySprite, setSprite, setSpriteTransition } from "../layer.ts"
+import { addSprite, destroySprite, setSprite, setSpriteTimeScale, setSpriteTransition } from "../layer.ts"
+import { setInstanceStyle } from "../records.ts"
 import type { Sprite as SpriteHandle, SpriteOptions, SpritePointerEvent, SpriteTapEvent, SpriteWheelEvent, TransitionEndEvent } from "../layer.ts"
 import type { SpriteTransition } from "../layer.ts"
 import { GroupContext, LayerContext } from "./context.ts"
@@ -43,6 +44,16 @@ export type SpriteProps = SpriteOptions &
     transition?: SpriteTransition | string | null
     /** A declared transition settled on one component. */
     onTransitionEnd?: (event: TransitionEndEvent) => void
+    /** The rate this sprite's native motion runs at (see
+     * setSpriteTimeScale): 0 freezes it, 1 is app time, overriding the
+     * layer's and the enclosing groups'. Undefined or null inherits. Node
+     * layers only. */
+    timeScale?: number | null
+    /** The sprite's style record under the layer's material (see
+     * setInstanceStyle): one value per component of the material's first
+     * instance buffer. Absent, the sprite keeps the material's
+     * instanceStyle. */
+    style?: ArrayLike<number>
     ref?: (sprite: SpriteHandle) => void
   }
 
@@ -62,6 +73,23 @@ export let Sprite: VoidComponent<SpriteProps> = props => {
     () => props.transition,
     transition => setSpriteTransition(sprite, transition ?? null),
   )
+  // Built only when the prop is present (the compiler emits the getter
+  // only then): a plain sprite pays no effect, and a record layer's
+  // sprite never meets the throw.
+  if ("timeScale" in props) {
+    createEffect(
+      () => props.timeScale,
+      scale => setSpriteTimeScale(sprite, scale ?? null),
+    )
+  }
+  if ("style" in props) {
+    createEffect(
+      () => props.style,
+      style => {
+        if (style !== undefined) setInstanceStyle(layer, sprite, style)
+      },
+    )
+  }
   createEffect(
     () => [props.onPointerDown, props.onPointerMove, props.onPointerUp, props.onPointerCancel, props.onPointerEnter, props.onPointerLeave, props.onWheel, props.onTap, props.onTransitionEnd] as const,
     ([down, move, up, cancel, enter, leave, wheel, tap, end]) => {
@@ -76,7 +104,7 @@ export let Sprite: VoidComponent<SpriteProps> = props => {
       sprite.onTransitionEnd = end
     },
   )
-  untrack(() => props.ref)?.(sprite)
+  callRef(() => props.ref, sprite)
   onCleanup(() => destroySprite(sprite))
   return null
 }

package/src/components/text2d.tsx

@@ -1,4 +1,4 @@
-import { createEffect, onCleanup, untrack, useContext } from "@solidrt/core"
+import { callRef, createEffect, onCleanup, untrack, useContext } from "@solidrt/core"
 import type { VoidComponent } from "@solidrt/core"
 import { setGroupTransition } from "../layer.ts"
 import type { SpritePointerEvent, SpriteTapEvent, SpriteTransition, SpriteWheelEvent, TransitionEndEvent } from "../layer.ts"
@@ -71,7 +71,7 @@ export let Text2d: VoidComponent<Text2dProps> = props => {
       run.group.onTransitionEnd = end
     },
   )
-  untrack(() => props.ref)?.(run)
+  callRef(() => props.ref, run)
   onCleanup(() => destroyText(run))
   return null
 }

package/src/components/tile-layer.tsx

@@ -1,7 +1,8 @@
-import { createEffect, createSignal, displayScale, For, getBoundingBoxViewport, onLayout, untrack } from "@solidrt/core"
+import { callRef, createEffect, createSignal, displayScale, For, getBoundingBoxViewport, onLayout, untrack } from "@solidrt/core"
 import type { VoidComponent } from "@solidrt/core"
-import type { BlendMode, FilterMode } from "@solidrt/core/gpu"
+import type { FilterMode, ShaderParams } from "@solidrt/core/gpu"
 import type { Atlas } from "../atlas.ts"
+import type { Material } from "../material.ts"
 import type { CameraUpdate } from "../camera.ts"
 import type { Frame } from "../frames.ts"
 import { tileWorldScale } from "../oversample-math.ts"
@@ -35,9 +36,14 @@ export type TileLayerProps = {
    * have no chunk and render nothing, so a full-bleed ground color belongs
    * on the container behind the layer). */
   chunkClearColor?: [number, number, number, number]
-  /** How the cells blend into their chunk bakes (see
-   * TileLayerOptions.blend); default "alpha". Fixed at mount. */
-  blend?: BlendMode
+  /** The material the cells bake with (see TileLayerOptions.material):
+   * its blend, its look, its per-cell style record; default `unlit()`.
+   * Fixed at mount. */
+  material?: Material
+  /** Uniform values written to every resident chunk (layer.setParams as
+   * a prop, over the material's own). Live, merge semantics; each change
+   * re-bakes every resident chunk - slow state, not per frame. */
+  params?: ShaderParams
   /** Sampler filter for the baked chunk textures at composite time; default
    * "linear" (hard pixels belong to the atlas sampler, see TileLayerOptions). */
   filter?: FilterMode
@@ -88,7 +94,8 @@ export let TileLayer: VoidComponent<TileLayerProps> = props => {
   let layer = untrack(() =>
     createTileLayer(props.cols, props.rows, props.tileW, props.tileH, props.atlases, {
       chunkClearColor: props.chunkClearColor,
-      blend: props.blend,
+      material: props.material,
+      params: props.params,
       filter: props.filter,
       chunkTiles: props.chunkTiles,
       tint: props.tint,
@@ -96,7 +103,7 @@ export let TileLayer: VoidComponent<TileLayerProps> = props => {
       label: props.label,
     }),
   )
-  untrack(() => props.ref)?.(layer)
+  callRef(() => props.ref, layer)
   createEffect(
     () => props.oversample,
     n => {
@@ -109,6 +116,13 @@ export let TileLayer: VoidComponent<TileLayerProps> = props => {
       if (tint !== undefined) layer.setTint(tint)
     },
   )
+  createEffect(
+    () => props.params,
+    params => {
+      if (params !== undefined) layer.setParams(params)
+    },
+    { defer: true },
+  )
   // Auto oversample: the world view's window box, in device pixels, per
   // world pixel. Rotation is not a resolution factor - texels per world
   // pixel do not change as the camera turns - but the measured box is the

package/src/components/view2d.tsx

@@ -1,4 +1,4 @@
-import { createEffect, displayScale, getBoundingBoxViewport, onCleanup, onLayout, untrack, useContext } from "@solidrt/core"
+import { callRef, createEffect, displayScale, getBoundingBoxViewport, onCleanup, onLayout, untrack, useContext } from "@solidrt/core"
 import type { Element, ParentComponent, PointerFeed, TextureId } from "@solidrt/core"
 import type { CameraUpdate } from "../camera.ts"
 import { feedPointer } from "../views.ts"
@@ -96,7 +96,7 @@ export let View2d: ParentComponent<View2dProps> = props => {
     },
     { defer: true },
   )
-  untrack(() => props.ref)?.(view)
+  callRef(() => props.ref, view)
   onCleanup(() => view.dispose())
   let pointer = untrack(() => props.pointer) ?? null
   if (pointer) onCleanup(feedPointer(view, pointer))

package/src/dispatch.ts

@@ -12,9 +12,11 @@
 // drag from empty space keeps delivering to the layer as it crosses
 // sprites, exactly as a drag from a sprite keeps naming that sprite.
 // Enter/leave pair on the sprite alone. Taps are synthesized here (DOM's
-// click, Unity's IPointerClickHandler): a press that releases on the same
-// target within the slop, the only pointer down for its whole press,
-// counted up for repeats (DOM's detail, Unity's clickCount).
+// click, which is primary-button only; Unity's IPointerClickHandler fires
+// for every button and reports it, we do not): a primary-button press
+// that releases on the same target within the slop, the only pointer
+// down for its whole press, counted up for repeats (DOM's detail,
+// Unity's clickCount).
 //
 // Pure BY DESIGN (types and camera.ts, nothing with GPU imports) so
 // tests/dispatch.test.ts drives it headless with a fake pick.
@@ -197,9 +199,11 @@ export function spriteDispatch(deps: DispatchDeps): (layout: (() => { width: num
         }
         presses.delete(e.pointerId)
         walk("onPointerUp", makeEvent(press.target, x, y, e), !press.claimed)
-        // The tap rule: no travel past the slop, alone for the whole
-        // press, released over the target it pressed (empty space for the
-        // layer itself).
+        // The tap rule: the primary button (DOM click; core's press and
+        // long-press gate the same way), no travel past the slop, alone
+        // for the whole press, released over the target it pressed (empty
+        // space for the layer itself).
+        if (e.button != null && e.button !== 0) return
         if (press.moved || !press.alone || topmost(x, y) !== press.target) return
         let time = e.timeStamp
         let repeat =

package/src/frames.ts

@@ -95,7 +95,7 @@ function frameOf(atlas: Atlas, x: number, y: number, w: number, h: number): Fram
  * a cell and an animation is a slice of consecutive indices.
  *
  * Cells that touch do not bleed at mip level 0: the layer shaders clamp
- * every sample into its frame (shaders.ts). A mip chain is different - its
+ * every sample into its frame (glsl.ts). A mip chain is different - its
  * texels straddle cell edges before sampling - so a sheet going through
  * `createAtlas` with `mipmap` is extruded first (`extrudeGrid`, whose
  * returned options slice the repacked sheet).