@glissade/scene 0.10.0-pre.1 → 0.10.1-pre.0

package/dist/index.d.ts

@@ -440,6 +440,10 @@ declare class ShaderEffect extends Group {
 }
 //#endregion
 //#region src/raster2d.d.ts
+/** A backend gradient handle (DOM CanvasGradient and @napi-rs CanvasGradient both satisfy it). */
+interface CanvasGradientLike {
+  addColorStop(offset: number, color: string): void;
+}
 /** The structural path surface buildPath drives — DOM Path2D and @napi-rs Path2D both satisfy it. */
 interface PathLike {
   moveTo(x: number, y: number): void;
@@ -468,6 +472,8 @@ interface Ctx2DLike<TPath, TDrawable> {
   drawImage(image: TDrawable, x: number, y: number, w?: number, h?: number): void;
   drawImage(image: TDrawable, sx: number, sy: number, sw: number, sh: number, x: number, y: number, w: number, h: number): void;
   setLineDash(segments: number[]): void;
+  createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradientLike;
+  createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradientLike;
   lineDashOffset: number;
   fillStyle: unknown;
   strokeStyle: unknown;

package/dist/index.js

@@ -967,6 +967,24 @@ var ShaderEffect = class extends Group {
 * four-line adapters, so the twin rasterizers structurally cannot drift —
 * the golden + SSIM suites verify the refactor preserved every byte.
 */
+function resolveFill(ctx, paint, bounds) {
+	if (paint.kind === "color") return paint.color;
+	let g;
+	if (paint.kind === "radial") {
+		const cx = paint.center ? paint.center[0] : bounds ? (bounds.minX + bounds.maxX) / 2 : 0;
+		const cy = paint.center ? paint.center[1] : bounds ? (bounds.minY + bounds.maxY) / 2 : 0;
+		const r = paint.radius !== void 0 ? paint.radius : bounds ? Math.hypot(bounds.maxX - bounds.minX, bounds.maxY - bounds.minY) / 2 : 0;
+		g = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
+	} else {
+		const fx = paint.from ? paint.from[0] : bounds ? (bounds.minX + bounds.maxX) / 2 : 0;
+		const fy = paint.from ? paint.from[1] : bounds ? bounds.minY : 0;
+		const tx = paint.to ? paint.to[0] : bounds ? (bounds.minX + bounds.maxX) / 2 : 0;
+		const ty = paint.to ? paint.to[1] : bounds ? bounds.maxY : 0;
+		g = ctx.createLinearGradient(fx, fy, tx, ty);
+	}
+	for (const s of paint.stops) g.addColorStop(s.offset, s.color);
+	return g;
+}
 function fontString(font) {
 	return `${font.style === "italic" ? "italic " : ""}${font.weight !== void 0 && font.weight !== 400 ? `${font.weight} ` : ""}${font.size}px ${font.family}`;
 }
@@ -1260,15 +1278,16 @@ var Raster2D = class {
 					break;
 				case "fillPath": {
 					const ctx = ctxOf();
-					ctx.fillStyle = cmd.paint.color;
-					ctx.fill(this.path(list.resources, cmd.path));
 					const b = this.pathBounds(list.resources, cmd.path);
+					ctx.fillStyle = resolveFill(ctx, cmd.paint, b);
+					ctx.fill(this.path(list.resources, cmd.path));
 					if (b) accumulateRect(top(), mat, b.minX, b.minY, b.maxX, b.maxY);
 					break;
 				}
 				case "strokePath": {
 					const ctx = ctxOf();
-					ctx.strokeStyle = cmd.paint.color;
+					const sb = this.pathBounds(list.resources, cmd.path);
+					ctx.strokeStyle = resolveFill(ctx, cmd.paint, sb);
 					ctx.lineWidth = cmd.stroke.width;
 					ctx.lineCap = cmd.stroke.cap ?? "butt";
 					ctx.lineJoin = cmd.stroke.join ?? "miter";
@@ -1281,17 +1300,16 @@ var Raster2D = class {
 						ctx.setLineDash([]);
 						ctx.lineDashOffset = 0;
 					}
-					const b = this.pathBounds(list.resources, cmd.path);
-					if (b) {
+					if (sb) {
 						const o = cmd.stroke.width * ((cmd.stroke.join ?? "miter") === "miter" ? 5 : 1);
-						accumulateRect(top(), mat, b.minX - o, b.minY - o, b.maxX + o, b.maxY + o);
+						accumulateRect(top(), mat, sb.minX - o, sb.minY - o, sb.maxX + o, sb.maxY + o);
 					}
 					break;
 				}
 				case "fillText": {
 					const ctx = ctxOf();
 					ctx.font = fontString(cmd.font);
-					ctx.fillStyle = cmd.paint.color;
+					ctx.fillStyle = resolveFill(ctx, cmd.paint, null);
 					ctx.textBaseline = "alphabetic";
 					ctx.textAlign = cmd.align ?? "left";
 					ctx.fillText(cmd.text, cmd.x, cmd.y);

package/dist/layoutEngine.d.ts

@@ -1,4 +1,4 @@
-import { BindableSignal, PathValue, ReadonlySignal, Rng, Track, Vec2, Vec2Signal } from "@glissade/core";
+import { BindableSignal, Paint, PathValue, ReadonlySignal, Rng, Track, Vec2, Vec2Signal } from "@glissade/core";
 
 //#region src/matrix.d.ts
 
@@ -33,11 +33,6 @@ type Resource = {
   mediaT: number;
 };
 type BlendMode = 'source-over' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten';
-/** M1: solid colors. Gradients/patterns are additive later — backends switch on kind. */
-type Paint = {
-  kind: 'color';
-  color: string;
-};
 interface StrokeStyle {
   width: number;
   cap?: 'butt' | 'round' | 'square';
@@ -287,6 +282,15 @@ interface NodeProps {
    * (the cache key folds in the inherited device transform, so a stale CTM can
    * never blit). OFF by default: a scene that never sets it emits ZERO extra
    * groups and is byte-identical to before. Best for expensive STATIC subtrees.
+   *
+   * CAVEAT (when it does NOT help): the key folds in the inherited device
+   * transform, so a subtree that itself DRIFTS — e.g. animated on sub-pixel
+   * float positions — misses the cache every frame; cache a static subtree
+   * under a *moving parent*, not a subtree that moves itself. And a `filter`
+   * is a LIVE composite parameter applied on the blit, never baked into the
+   * cached bitmap, so `cache:true` on a filter-declaring (e.g. blurred) group
+   * does not cache the filter cost. For per-frame-cheap drift, prefer
+   * eliminating the work (a cheaper Paint/effect) over caching it.
    */
   cache?: boolean;
 }
@@ -489,8 +493,12 @@ declare class Group extends Node {
   remove(child: Node): this;
   protected draw(out: DisplayListBuilder, ctx: EvalContext): void;
 }
+/** A color string is sugar for a solid `color` Paint; a Paint passes through. */
+
 interface ShapeProps extends NodeProps {
-  fill?: PropInit<string>;
+  /** A CSS color string, or a `Paint` (e.g. a `radial` gradient — soft-light
+   * fills with no blur filter; center/radius default to the shape bounds). */
+  fill?: PropInit<string | Paint>;
   stroke?: PropInit<string>;
   strokeWidth?: PropInit<number>;
   /** hand-drawn look: the outline is geometrically roughened (see sketch.ts) */
@@ -506,7 +514,7 @@ interface ShapeProps extends NodeProps {
   sketchFill?: HachureSpec;
 }
 declare abstract class Shape extends Node {
-  readonly fill: BindableSignal<string>;
+  readonly fill: BindableSignal<string | Paint>;
   readonly stroke: BindableSignal<string>;
   readonly strokeWidth: BindableSignal<number>;
   readonly sketch: SketchStyle | undefined;

package/dist/layoutEngine.js

@@ -948,6 +948,13 @@ var Group = class extends Node {
 		for (const child of sorted) child.emit(out, ctx);
 	}
 };
+/** A color string is sugar for a solid `color` Paint; a Paint passes through. */
+function toPaint(fill) {
+	return typeof fill === "string" ? {
+		kind: "color",
+		color: fill
+	} : fill;
+}
 var Shape = class extends Node {
 	fill;
 	stroke;
@@ -984,10 +991,7 @@ var Shape = class extends Node {
 		if (fill) out.push({
 			op: "fillPath",
 			path,
-			paint: {
-				kind: "color",
-				color: fill
-			}
+			paint: toPaint(fill)
 		});
 		const stroke = this.stroke();
 		const width = this.strokeWidth();
@@ -1021,14 +1025,11 @@ var Shape = class extends Node {
 			out.push({
 				op: "fillPath",
 				path,
-				paint: {
-					kind: "color",
-					color: fill
-				}
+				paint: toPaint(fill)
 			});
 		}
 		const { strokes, resolved } = roughen(segs, this.sketch, rng);
-		const ink = this.stroke() || fill || "#000000";
+		const ink = this.stroke() || (typeof fill === "string" ? fill : "") || "#000000";
 		if (this.sketchFill) {
 			const clipPath = out.resource({
 				kind: "path",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/scene",
-  "version": "0.10.0-pre.1",
+  "version": "0.10.1-pre.0",
   "description": "glissade scene graph: nodes, transforms, DisplayList emission. Renderer-agnostic; zero DOM/Node dependencies.",
   "license": "Apache-2.0",
   "type": "module",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "yoga-layout": "^3.2.1",
-    "@glissade/core": "0.10.0-pre.1"
+    "@glissade/core": "0.10.1-pre.0"
   },
   "repository": {
     "type": "git",