@solidrt/2d 0.0.68 → 0.0.70

package/AGENTS.md

@@ -603,10 +603,10 @@ for a zoom animation that would re-rasterize every label per frame.
 Layout is `layoutText` (text-layout.ts, pure): `\n` breaks, `maxWidth`
 wraps with core's greedy rule, `align` per line, `anchor`
 (start/middle/end, as d-text) and `anchorY` (top/middle/baseline/bottom)
-place the run's point, `letterSpacing` and `lineHeight` as named. The
-run reports `width`, `height`, `ascent` and `lines`. A run's `fontSize`
-defaults to the face's; glyphs scale their cells by `fontSize /
-font.size`.
+place the run's point, `lineHeight` as named; `letterSpacing` is shaped
+into the units by the engine. The run reports `width`, `height`, `ascent`
+and `lines`. A run's `fontSize` defaults to the face's; glyphs scale their
+cells by `fontSize / font.size`.
 
 ### Pure pieces
 
@@ -720,8 +720,16 @@ sits, `viewport` is the nearest view (the `<SpriteLayer>`'s own, or
 inside a `<View2d>` that view), what a `<Camera2d>` drives, and
 `pointer` that view's feed (the owner's `pointer` prop, null without
 one); read under `output={false}` outside a `<View2d>` `viewport` throws. A FILL-mode
-view is 1x1 until the first layout: `ref` fires at mount, before it, so
-`viewport.size()` reads 1x1 there. Sprites added and positioned from
+leaf is size-contained (`contain="size"`, the CSS layout prop every
+element takes): it adds nothing to its ancestors' sizes, exactly as an
+empty `<view>` at 100% would, so a column of header, layer pane
+(`flexGrow: 1`) and footer needs no `minHeight={0}`, and a pane with no
+definite height does not come out square. The leaf then has no size of
+its own at all: a parent with no size leaves it empty, the view is
+invisible, and the component warns once with the stack of the component
+that built it, naming the fix (a size, or flexGrow in a sized column). A
+FILL-mode view is 1x1 until the first layout: `ref` fires at mount,
+before it, so `viewport.size()` reads 1x1 there. Sprites added and positioned from
 `ref` (the pool, the opening scene) are fine - the first layout resizes
 the view before the first paint - but anything that needs the real size
 (centering on the view) waits for `onLayout`, or works in a `designSize`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/2d",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -15,10 +15,10 @@
     "AGENTS.md"
   ],
   "devDependencies": {
-    "@solidrt/test": "0.0.68"
+    "@solidrt/test": "0.0.70"
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-rc.13",
-    "@solidrt/core": "0.0.68"
+    "@solidrt/core": "0.0.70"
   }
 }

package/src/components/sprite-layer.tsx

@@ -1,4 +1,4 @@
-import { createEffect, displayScale, getBoundingBoxViewport, getLayoutBox, onCleanup, onLayout, untrack } from "@solidrt/core"
+import { 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 { Atlas } from "../atlas.ts"
@@ -314,7 +314,18 @@ export let SpriteLayer: ParentComponent<SpriteLayerProps> = props => {
   // one onLayout applies size then oversample in order; setSize no-ops
   // when nothing changed.
   if (fill) {
+    let warnEmpty = warnOnce()
     onLayout(() => {
+      // The leaf adds no size of its own (contain="size" below), so a
+      // parent with no size leaves it empty: nothing renders, and nothing
+      // on screen says why.
+      let box = leaf && getLayoutBox(leaf)
+      if (box && (box.width <= 0 || box.height <= 0)) {
+        warnEmpty(
+          `SpriteLayer: the fill leaf laid out ${box.width} x ${box.height}, so the view is invisible. ` +
+            `It adds no size of its own: give its parent a size (width/height, or flexGrow in a sized column), as on the web.`,
+        )
+      }
       let size = viewSize()
       if (size) view.setSize(size.width, size.height)
     })
@@ -354,6 +365,7 @@ export let SpriteLayer: ParentComponent<SpriteLayerProps> = props => {
               src={view.texture}
               width={fill ? "100%" : props.width}
               height={fill ? "100%" : props.height}
+              contain={fill ? "size" : undefined}
               onPointerDown={events ? viewHandlers.onPointerDown : undefined}
               onPointerMove={events ? viewHandlers.onPointerMove : undefined}
               onPointerUp={events ? viewHandlers.onPointerUp : undefined}

package/src/font.ts

@@ -14,9 +14,8 @@
 // (`Atlas.sdf`), and "mask", coverage at the face's exact size for drawing
 // 1:1.
 import { getOwner, onCleanup } from "@solidrt/core"
-import type { PreparedText } from "@solidrt/core"
 import { createFont, destroyFont, fontAtlas, glyphCells, prepareText, requestGlyphs } from "flux:font"
-import type { FontAtlasOptions, FontFace, FontId, FontPrepareOptions, GlyphCell } from "flux:font"
+import type { FontAtlasOptions, FontFace, FontId, FontPreparedText, FontPrepareOptions, GlyphCell } from "flux:font"
 import type { Atlas } from "./atlas.ts"
 import type { Frame } from "./frames.ts"
 
@@ -68,7 +67,7 @@ export type SpriteFont = {
   readonly fontSize: number
   /** Shape `text` on the engine (see flux:font prepareText): every unit
    * carries its glyphs, for `layoutText`. */
-  prepare(text: string, options?: FontPrepareOptions): PreparedText
+  prepare(text: string, options?: FontPrepareOptions): FontPreparedText
   /** The glyph's frame and placement, or null while its cell is not in
    * the atlas (request it with `request`). */
   glyph(id: number): Glyph | null

package/src/text-layout.ts

@@ -6,8 +6,9 @@
 // unit placed whole), restated here rather than imported because core
 // loads the gui modules and this file is checked headless on the flux
 // binary (tests/text-layout.test.ts), like frames.ts. No GPU or GUI
-// imports: the PreparedText import is a type.
-import type { PreparedText, TextUnit } from "@solidrt/core"
+// imports: the flux:font import is a type. Letter spacing is the
+// engine's, shaped into the units (`prepareText`'s `letterSpacing`).
+import type { FontPreparedText, FontTextUnit } from "flux:font"
 
 /** The anchor of the run's x: where the point sits on each line's
  * extent (SVG's text-anchor, d-text's `anchor`). */
@@ -28,8 +29,6 @@ export type TextLayoutOptions = {
   anchor?: TextAnchor
   /** Default "top". */
   anchorY?: TextAnchorY
-  /** Added after every glyph, run pixels (CSS letter-spacing); default 0. */
-  letterSpacing?: number
   /** Baseline to baseline, run pixels; default each line's own ascent
    * plus descent. */
   lineHeight?: number
@@ -65,24 +64,18 @@ export type TextLayout = {
 
 /**
  * Lay out a prepared text (from `SpriteFont.prepare`) into glyph
- * placements. Throws on units without glyphs (a text prepared on
- * Impeller, which exposes none).
+ * placements.
  */
-export function layoutText(prepared: PreparedText, opts?: TextLayoutOptions): TextLayout {
+export function layoutText(prepared: FontPreparedText, opts?: TextLayoutOptions): TextLayout {
   let units = prepared.units
   let maxWidth = opts?.maxWidth ?? Infinity
   if (!(maxWidth > 0)) throw new Error(`layoutText: maxWidth must be positive, got ${maxWidth}`)
-  let letterSpacing = opts?.letterSpacing ?? 0
-  if (!Number.isFinite(letterSpacing)) throw new Error(`layoutText: letterSpacing must be finite, got ${letterSpacing}`)
-  for (let i = 0; i < units.length; i++) {
-    if (units[i]!.glyphs === undefined) throw new Error(`layoutText: unit ${i} ("${units[i]!.text}") carries no glyphs; prepare the text on a sprite font`)
-  }
   // Break into lines: the greedy pass, lines as unit ranges.
   type Range = { from: number; to: number; ascent: number; descent: number; width: number }
   let ranges: Range[] = []
   let cursor = 0
   while (cursor < units.length) {
-    ranges.push(nextLine(units, cursor, maxWidth, letterSpacing))
+    ranges.push(nextLine(units, cursor, maxWidth))
     cursor = ranges[ranges.length - 1]!.to
   }
   // A text with no units (empty) still has one empty line of no height.
@@ -115,25 +108,26 @@ export function layoutText(prepared: PreparedText, opts?: TextLayoutOptions): Te
     let pen = line.x
     for (let i = line.from; i < line.to; i++) {
       let unit = units[i]!
-      for (let g of unit.glyphs!) {
-        glyphs.push({ id: g.id, x: pen + g.x, y: line.y + g.y })
-        pen += letterSpacing
-      }
+      for (let g of unit.glyphs) glyphs.push({ id: g.id, x: pen + g.x, y: line.y + g.y })
       pen += unit.advance
     }
   }
   return { glyphs, lines, width: runWidth, height, ascent: firstAscent }
 }
 
+// Slack a line's width may be exceeded by and still fit, logical px: core's
+// FIT_SLACK, the same value, for the same reason (a width that came back
+// from a layout box is a float ulp off the width the text measured).
+const FIT_SLACK = 1 / 64
+
 // Ink width of the wrap unit starting at `index` (core's unitInk): its
-// advance through every glued piece after it, plus the last piece's ink,
-// with the letter spacing its glyphs add.
-function unitInk(units: TextUnit[], index: number, letterSpacing: number): number {
-  let ink = units[index]!.width + letterSpacing * units[index]!.glyphs!.length
+// advance through every glued piece after it, plus the last piece's ink.
+function unitInk(units: FontTextUnit[], index: number): number {
+  let ink = units[index]!.width
   let advance = 0
   for (let j = index + 1; j < units.length && units[j]!.glue; j++) {
-    advance += units[j - 1]!.advance + letterSpacing * units[j - 1]!.glyphs!.length
-    ink = advance + units[j]!.width + letterSpacing * units[j]!.glyphs!.length
+    advance += units[j - 1]!.advance
+    ink = advance + units[j]!.width
   }
   return ink
 }
@@ -142,15 +136,15 @@ function unitInk(units: TextUnit[], index: number, letterSpacing: number): numbe
 // layoutNextLine): units go on while the pen plus the unit's ink stays
 // within the width; a hard break ends the line; a unit wider than the
 // line on its own goes on whole.
-function nextLine(units: TextUnit[], cursor: number, width: number, letterSpacing: number) {
+function nextLine(units: FontTextUnit[], cursor: number, width: number) {
   let pen = 0
   let ascent = 0
   let descent = 0
   let i = cursor
   while (i < units.length) {
     let unit = units[i]!
-    if (i > cursor && !unit.glue && pen + unitInk(units, i, letterSpacing) > width) break
-    pen += unit.advance + letterSpacing * unit.glyphs!.length
+    if (i > cursor && !unit.glue && pen + unitInk(units, i) > width + FIT_SLACK) break
+    pen += unit.advance
     if (unit.ascent > ascent) ascent = unit.ascent
     if (unit.descent > descent) descent = unit.descent
     i++
@@ -158,6 +152,6 @@ function nextLine(units: TextUnit[], cursor: number, width: number, letterSpacin
   }
   let last = units[i - 1]!
   // The ink width: trailing whitespace off, like the unit's own `width`.
-  let lineWidth = pen - (last.advance + letterSpacing * last.glyphs!.length) + last.width + letterSpacing * last.glyphs!.length
+  let lineWidth = pen - last.advance + last.width
   return { from: cursor, to: i, ascent, descent, width: Math.max(lineWidth, 0) }
 }

package/src/text.ts

@@ -23,7 +23,7 @@ export type TextStyle = {
   fontSize?: number
   /** Baseline to baseline in layer pixels; default each line's own box. */
   lineHeight?: number
-  /** Added after every glyph, layer pixels; default 0. */
+  /** Extra advance after every character, layer pixels (CSS letter-spacing); default the font's. */
   letterSpacing?: number
   /** Wrap at this width; unset, only `\n` breaks. */
   maxWidth?: number
@@ -149,13 +149,12 @@ function relayout(run: RunState, style: TextStyle): void {
   run._style = style
   run.text = style.text
   let fontSize = style.fontSize ?? run.font.fontSize
-  let prepared = run.font.prepare(style.text, { fontSize, lineHeight: 0 })
+  let prepared = run.font.prepare(style.text, { fontSize, lineHeight: 0, letterSpacing: style.letterSpacing })
   run._layout = layoutText(prepared, {
     maxWidth: style.maxWidth,
     align: style.align,
     anchor: style.anchor,
     anchorY: style.anchorY,
-    letterSpacing: style.letterSpacing,
     lineHeight: style.lineHeight,
   })
   run.width = run._layout.width