@glissade/backend-dom 0.22.0-pre.0 → 0.22.0-pre.2

package/dist/index.js

@@ -20,17 +20,20 @@ function ellipsePoint(cx, cy, rx, ry, phi, theta) {
 	const sp = Math.sin(phi);
 	return [cx + rx * ct * cp - ry * st * sp, cy + rx * ct * sp + ry * st * cp];
 }
-/** An `['E', cx, cy, rx, ry, rot, a0, a1]` ellipse seg → SVG path commands
-* (`M start A … [A …]`). SVG can't draw a ≥360° arc in one `A`, so a full
-* ellipse splits into two half-arcs. The dominant `E` producer is
+/** An `['E', cx, cy, rx, ry, rot, a0, a1]` ellipse seg → SVG path commands. When
+* `continues` (an open subpath precedes it — e.g. a rounded-rect corner after an
+* edge `L`) it leads with `L start` so the contour stays ONE continuous subpath
+* (a stray `M` would break the fill — e1JP5_1IzI2D); standalone (a Circle's `E`
+* is the first seg) it leads with `M start`. SVG can't draw a ≥360° arc in one
+* `A`, so a full ellipse splits into two half-arcs. The dominant `E` producer is
 * `roundedRectSegs`/`Circle`, whose quarter/full arcs this reconstructs exactly. */
-function ellipseToArcs(seg) {
+function ellipseToArcs(seg, continues) {
 	const [, cx, cy, rx, ry, rot, a0, a1] = seg;
 	const rotDeg = rot * 180 / Math.PI;
 	const delta = a1 - a0;
 	const sweep = delta >= 0 ? 1 : 0;
 	const [sx, sy] = ellipsePoint(cx, cy, rx, ry, rot, a0);
-	const out = [`M${sx} ${sy}`];
+	const out = [`${continues ? "L" : "M"}${sx} ${sy}`];
 	if (Math.abs(delta) >= 2 * Math.PI - 1e-9) {
 		const dir = sweep ? Math.PI : -Math.PI;
 		const [mx, my] = ellipsePoint(cx, cy, rx, ry, rot, a0 + dir);
@@ -47,28 +50,86 @@ function ellipseToArcs(seg) {
 /** Turn a `PathSeg[]` into an SVG `d` attribute (M/L/C/Q/E/Z — the full set). */
 function segsToD(segs) {
 	const parts = [];
+	let open = false;
 	for (const seg of segs) switch (seg[0]) {
 		case "M":
 			parts.push(`M${seg[1]} ${seg[2]}`);
+			open = true;
 			break;
 		case "L":
 			parts.push(`L${seg[1]} ${seg[2]}`);
+			open = true;
 			break;
 		case "C":
 			parts.push(`C${seg[1]} ${seg[2]} ${seg[3]} ${seg[4]} ${seg[5]} ${seg[6]}`);
+			open = true;
 			break;
 		case "Q":
 			parts.push(`Q${seg[1]} ${seg[2]} ${seg[3]} ${seg[4]}`);
+			open = true;
 			break;
 		case "E":
-			parts.push(ellipseToArcs(seg));
+			parts.push(ellipseToArcs(seg, open));
+			open = true;
 			break;
 		case "Z":
 			parts.push("Z");
+			open = false;
 			break;
 	}
 	return parts.join(" ");
 }
+/**
+* Axis-aligned bounding box of a path in its LOCAL coordinate space, or null for
+* an empty path. Curve control points give a safe superset (the painted curve
+* never exceeds its hull); `E` uses `max(rx,ry)` so the box contains the ellipse
+* at any rotation (exact for the rounded-rect `rx==ry` case). Used to size each
+* shape's `<svg>` island TIGHTLY around its geometry instead of full-canvas —
+* the paint is unchanged (the viewBox maps local coords 1:1), but the SVG box no
+* longer spans the whole viewport, so shapes don't overlap as giant transparent
+* hit-targets.
+*/
+function pathBBox(segs) {
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	const pt = (x, y) => {
+		if (x < minX) minX = x;
+		if (x > maxX) maxX = x;
+		if (y < minY) minY = y;
+		if (y > maxY) maxY = y;
+	};
+	for (const seg of segs) switch (seg[0]) {
+		case "M":
+		case "L":
+			pt(seg[1], seg[2]);
+			break;
+		case "C":
+			pt(seg[1], seg[2]);
+			pt(seg[3], seg[4]);
+			pt(seg[5], seg[6]);
+			break;
+		case "Q":
+			pt(seg[1], seg[2]);
+			pt(seg[3], seg[4]);
+			break;
+		case "E": {
+			const r = Math.max(seg[3], seg[4]);
+			pt(seg[1] - r, seg[2] - r);
+			pt(seg[1] + r, seg[2] + r);
+			break;
+		}
+		case "Z": break;
+	}
+	if (!Number.isFinite(minX)) return null;
+	return {
+		x: minX,
+		y: minY,
+		w: maxX - minX,
+		h: maxY - minY
+	};
+}
 /** Short, stable FNV-1a hash (hex) over a string — for deterministic def ids
 * that survive reorder (same scope+key → same id across frames). */
 function hashKey(s) {
@@ -141,15 +202,24 @@ var DomBackend = class {
 			const res = list.resources[id];
 			return res && res.kind === "path" ? res.segs : [];
 		};
-		/** A fresh `<svg>` geometry island absolutely positioned over the cursor. */
+		/**
+		* A fresh `<svg>` geometry island. Starts collapsed (0×0) — fillPath/
+		* strokePath size it TIGHTLY to the path bbox per render (#sizeIsland);
+		* clip's defs-only island stays collapsed (it renders nothing, only holds a
+		* <clipPath> referenced by id). `overflow:visible` keeps any curve/miter
+		* overshoot painted; `pointer-events:none` makes the box's transparent area
+		* click-through, so it can't swallow clicks meant for shapes behind it (the
+		* painted path re-enables hit-testing with its own `pointer-events`).
+		*/
 		const island = () => {
 			const svg = doc.createElementNS(SVG_NS, "svg");
-			svg.setAttribute("width", String(list.size.w));
-			svg.setAttribute("height", String(list.size.h));
+			svg.setAttribute("width", "0");
+			svg.setAttribute("height", "0");
 			svg.style.position = "absolute";
 			svg.style.left = "0";
 			svg.style.top = "0";
 			svg.style.overflow = "visible";
+			svg.style.pointerEvents = "none";
 			return svg;
 		};
 		list.commands.forEach((cmd, i) => {
@@ -159,11 +229,13 @@ var DomBackend = class {
 					stack.push(cursor);
 					scopeStack.push(scope);
 					break;
-				case "restore":
-					this.#pruneCursor(cursor);
-					cursor = stack.pop() ?? this.root;
+				case "restore": {
+					const saved = stack.pop() ?? this.root;
+					if (cursor !== saved) this.#pruneCursor(cursor);
+					cursor = saved;
 					scope = scopeStack.pop() ?? "";
 					break;
+				}
 				case "transform": {
 					const key = this.#keyFor(cursor, id, "transform");
 					const o = this.#matchOrCreate(cursor, key, "transform", () => {
@@ -225,6 +297,7 @@ var DomBackend = class {
 					const o = this.#matchOrCreate(cursor, key, "fillPath", () => {
 						const svg = island();
 						const path = doc.createElementNS(SVG_NS, "path");
+						path.style.pointerEvents = "auto";
 						svg.appendChild(path);
 						return {
 							op: "fillPath",
@@ -234,8 +307,10 @@ var DomBackend = class {
 						};
 					});
 					const path = o.path;
-					this.#setAttr(path, o, "d", "d", segsToD(pathSegs(cmd.path)));
+					const segs = pathSegs(cmd.path);
+					this.#setAttr(path, o, "d", "d", segsToD(segs));
 					this.#setAttr(path, o, "fill", "fill", this.#resolvePaint(cmd.paint, o, scope, key));
+					this.#sizeIsland(o.el, o, segs, 0);
 					this.#stamp(o, path, id);
 					break;
 				}
@@ -244,6 +319,7 @@ var DomBackend = class {
 					const o = this.#matchOrCreate(cursor, key, "strokePath", () => {
 						const svg = island();
 						const path = doc.createElementNS(SVG_NS, "path");
+						path.style.pointerEvents = "stroke";
 						svg.appendChild(path);
 						return {
 							op: "strokePath",
@@ -253,10 +329,12 @@ var DomBackend = class {
 						};
 					});
 					const path = o.path;
-					this.#setAttr(path, o, "d", "d", segsToD(pathSegs(cmd.path)));
+					const segs = pathSegs(cmd.path);
+					this.#setAttr(path, o, "d", "d", segsToD(segs));
 					this.#setAttr(path, o, "fill", "fill", "none");
 					this.#setAttr(path, o, "stroke", "stroke", this.#resolvePaint(cmd.paint, o, scope, key));
 					this.#applyStroke(path, o, cmd.stroke);
+					this.#sizeIsland(o.el, o, segs, cmd.stroke.width);
 					this.#stamp(o, path, id);
 					break;
 				}
@@ -371,6 +449,7 @@ var DomBackend = class {
 	measureText(text, font) {
 		const size = font.size;
 		const span = this.#ensureMeasureSpan();
+		if (!span.isConnected) this.#mountMeasureSpan(span);
 		span.style.font = fontString(font);
 		span.style.fontVariationSettings = font.fontVariationSettings ?? "normal";
 		span.style.letterSpacing = font.letterSpacing !== void 0 ? `${font.letterSpacing}px` : "normal";
@@ -523,6 +602,32 @@ var DomBackend = class {
 		this.#setAttr(el, o, "nodeId", "data-node-id", id);
 	}
 	/**
+	* Size a geometry island's `<svg>` box tightly to its path bbox (in the
+	* cursor's local space) via the `viewBox`, so the painted coordinates are
+	* UNCHANGED (1:1 mapping) while the element box shrinks from full-canvas to the
+	* shape. Cached writes — only touches the DOM when the bbox moves. `pad`
+	* (stroke width) grows the box so it contains a stroke straddling the
+	* centerline; `overflow:visible` covers any residual curve/miter overshoot.
+	*/
+	#sizeIsland(svg, o, segs, pad) {
+		const bb = pathBBox(segs);
+		if (bb === null) {
+			this.#setAttr(svg, o, "svgW", "width", "0");
+			this.#setAttr(svg, o, "svgH", "height", "0");
+			this.#setAttr(svg, o, "svgVB", "viewBox", void 0);
+			return;
+		}
+		const x = bb.x - pad;
+		const y = bb.y - pad;
+		const w = bb.w + 2 * pad;
+		const h = bb.h + 2 * pad;
+		this.#setStyle(o, svg, "left", `${x}px`);
+		this.#setStyle(o, svg, "top", `${y}px`);
+		this.#setAttr(svg, o, "svgW", "width", String(w));
+		this.#setAttr(svg, o, "svgH", "height", String(h));
+		this.#setAttr(svg, o, "svgVB", "viewBox", `${x} ${y} ${w} ${h}`);
+	}
+	/**
 	* Caret-preserving text write. RULE B (freeze): never touch the text while the
 	* div (or a descendant) is the focused contentEditable. RULE A (patch-only):
 	* write nothing when unchanged; otherwise mutate the SAME Text node's `.data`
@@ -566,10 +671,22 @@ var DomBackend = class {
 		span.style.whiteSpace = "pre";
 		span.style.left = "-99999px";
 		span.style.top = "0";
-		(this.#host ?? this.#doc.body ?? this.root).appendChild(span);
 		this.#measureSpan = span;
+		this.#mountMeasureSpan(span);
 		return span;
 	}
+	/**
+	* Attach the measuring span to a CONNECTED layout tree. A detached element
+	* reports a 0-width rect in real browsers too — so a measurer mounted under a
+	* not-yet-connected host silently falls back to the coarse estimate, mis-breaks
+	* long Text, and captions overflow their `width` (aJsLQp0fSs5L). Prefer the
+	* document body (reliably live), then a connected host, else the root (headless
+	* jsdom has no layout anyway → 0 → estimate, which is expected there).
+	*/
+	#mountMeasureSpan(span) {
+		const body = this.#doc.body;
+		((body && body.isConnected !== false ? body : null) ?? (this.#host?.isConnected ? this.#host : null) ?? this.root).appendChild(span);
+	}
 	/** Best-effort `src` for a registered image asset (an `HTMLImageElement` or a
 	* URL string); other shapes have no DOM-loadable src in this preview tier. */
 	#imageSrc(assetId) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/backend-dom",
-  "version": "0.22.0-pre.0",
+  "version": "0.22.0-pre.2",
   "description": "glissade DOM render backend: DisplayList -> HTML/SVG elements. A preview / non-parity realtime tier (accessibility, selectable text, CSS-native embedding) — NOT a Skia-export twin.",
   "license": "Apache-2.0",
   "engines": {
@@ -18,8 +18,8 @@
     "dist"
   ],
   "dependencies": {
-    "@glissade/core": "0.22.0-pre.0",
-    "@glissade/scene": "0.22.0-pre.0"
+    "@glissade/core": "0.22.0-pre.2",
+    "@glissade/scene": "0.22.0-pre.2"
   },
   "repository": {
     "type": "git",