@glissade/backend-dom 0.22.0-pre.1 → 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,24 +50,31 @@ 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(" ");
@@ -219,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", () => {
@@ -437,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";
@@ -658,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.1",
+  "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.1",
-    "@glissade/scene": "0.22.0-pre.1"
+    "@glissade/core": "0.22.0-pre.2",
+    "@glissade/scene": "0.22.0-pre.2"
   },
   "repository": {
     "type": "git",