@weasel-js/svg 1.4.4 → 1.5.0

package/dist/index.d.ts

@@ -130,16 +130,6 @@ interface SvgGroupNode {
     /** Opaque per-element bag for declared namespaces. See `NamespaceMeta`. */
     meta?: NamespaceMeta;
 }
-/**
- * Width given to an external `<text>` that carries no `data-weasel-width`:
- * large enough that line wrapping never fires, since SVG text flows from a
- * baseline and the source says nothing about a box.
- *
- * It is a wrap sentinel, not a measurement. Anything that treats a text
- * node's width as geometry — a union AABB, a fit-clamp — has to recognize it
- * and substitute an estimate, or one text node swamps the whole file.
- */
-declare const UNBOUNDED_TEXT_WIDTH = 99999;
 /**
  * Text leaf node. Mirrors the kit's `TextPose` shape — a bounding box plus
  * text content, optional rich-text `runs` (per-range styling), and an
@@ -150,9 +140,12 @@ declare const UNBOUNDED_TEXT_WIDTH = 99999;
  * `dominant-baseline="text-before-edge"` so `y` is the top of the text
  * box, plus `data-weasel-width` / `data-weasel-height` so weasel's
  * explicit box dimensions round-trip losslessly. External SVG text
- * (lacking the data-* attrs) imports with estimated dimensions —
- * {@link UNBOUNDED_TEXT_WIDTH} and
+ * (lacking the data-* attrs) imports with the width the kit's text layout
+ * measures — an em-based estimate when no registered font can — and
  * `height = fontSize * lineHeight * (lineCount || 1)`.
+ *
+ * `x` here is always the box's left edge. In the SVG it is the
+ * `text-anchor` point, and the parser and serializer convert between them.
  */
 interface SvgTextNode {
     kind: 'text';
@@ -401,4 +394,4 @@ declare function svgNodesToKitDrafts(nodes: readonly SvgNode[], nextId: () => st
  */
 declare function unpackSvgFiles(files: File[], ctx: IngestCtx): Promise<void>;
 
-export { IDENTITY_MATRIX, type Matrix, type NamespaceMeta, type NamespacedElement, type ParseOptions, type ParseResult, type SerializeOptions, type SvgDraftBounds, type SvgGroupNode, type SvgImageNode, type SvgNode, type SvgPaint, type SvgPathNode, type SvgSceneDraft, type SvgStroke, type SvgTextNode, UNBOUNDED_TEXT_WIDTH, parseSvg, serializeSvg, strokeDataFromSvg, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
+export { IDENTITY_MATRIX, type Matrix, type NamespaceMeta, type NamespacedElement, type ParseOptions, type ParseResult, type SerializeOptions, type SvgDraftBounds, type SvgGroupNode, type SvgImageNode, type SvgNode, type SvgPaint, type SvgPathNode, type SvgSceneDraft, type SvgStroke, type SvgTextNode, parseSvg, serializeSvg, strokeDataFromSvg, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };

package/dist/index.js

@@ -1,13 +1,11 @@
-import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, getMarker, SCRIPT_METRICS, dwarn, createInsertOp, PathBuilder, parseColor, rgbaToHex, PATH_C, PATH_Q, solid, fillToBoundsFrame, resolveTextStyle, getPaintKind } from '@weasel-js/core';
+import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, getMarker, SCRIPT_METRICS, dwarn, createInsertOp, PathBuilder, parseColor, rgbaToHex, resolveTextStyle, layoutRuns, resolveRuns, resolveAlign, PATH_C, PATH_Q, solid, fillToBoundsFrame, getPaintKind } from '@weasel-js/core';
+import { invert } from '@weasel-js/geom';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
 // src/parse.ts
 
 // src/types.ts
 var IDENTITY_MATRIX = [1, 0, 0, 1, 0, 0];
-var UNBOUNDED_TEXT_WIDTH = 99999;
-
-// src/transform.ts
 function multiply(a, b) {
   return [
     a[0] * b[0] + a[2] * b[1],
@@ -78,15 +76,11 @@ function parseTransform(attr, onWarn) {
   }
   return result;
 }
-function invertMatrix(m) {
-  const det = m[0] * m[3] - m[1] * m[2];
-  if (!Number.isFinite(det) || Math.abs(det) < 1e-12) return null;
-  const a = m[3] / det, b = -m[1] / det, c = -m[2] / det, d = m[0] / det;
-  return [a, b, c, d, -(a * m[4] + c * m[5]), -(b * m[4] + d * m[5])];
-}
 function rebaseTransform(ctm, local) {
-  const inv = invertMatrix(ctm);
-  return inv ? multiply(multiply(ctm, local), inv) : local;
+  const inv = invert([...ctm]);
+  if (!inv) return null;
+  const [a, b, c, d, e, f] = inv;
+  return multiply(multiply(ctm, local), [a, b, c, d, e, f]);
 }
 function decomposeRotation(m, cx, cy, eps = 1e-4) {
   const [a, b, c, d, e, f] = m;
@@ -236,6 +230,10 @@ function polygonToPath(points, m = IDENTITY_MATRIX) {
   b.close();
   return transformPath(b.build(), m);
 }
+function anchorOffset(style, width) {
+  const edge = resolveAlign(style?.align ?? "left", style?.direction ?? "ltr");
+  return edge === "center" ? width / 2 : edge === "right" ? width : 0;
+}
 function parsePaintAttr(raw) {
   if (raw == null) return null;
   const s = raw.trim();
@@ -866,8 +864,10 @@ function parseElement(el, ctm, style, gradients, onWarn, uriToPrefix) {
     const bounds = pathAabb(path);
     const cx = bounds.x + bounds.width / 2;
     const cy = bounds.y + bounds.height / 2;
-    const angle = decomposeRotation(worldLocal, cx, cy);
-    if (angle != null) {
+    const angle = worldLocal && decomposeRotation(worldLocal, cx, cy);
+    if (!worldLocal) {
+      onWarn("leaf transform sits under a singular parent transform; dropped");
+    } else if (angle != null) {
       rotation = angle;
     } else {
       path = transformPath(path, worldLocal);
@@ -1187,8 +1187,10 @@ function parseImageElement(el, ctm, onWarn) {
     const worldLocal = rebaseTransform(ctm, localTransform);
     const cx = node.x + node.width / 2;
     const cy = node.y + node.height / 2;
-    const angle = decomposeRotation(worldLocal, cx, cy);
-    if (angle != null) {
+    const angle = worldLocal && decomposeRotation(worldLocal, cx, cy);
+    if (!worldLocal) {
+      onWarn("<image> transform sits under a singular parent transform; dropped");
+    } else if (angle != null) {
       node.rotation = angle;
     } else {
       const rotComp = rotationComponent(worldLocal);
@@ -1238,6 +1240,19 @@ function collapseRunWhitespace(runs) {
     if (runs[i].text === "") runs.splice(i, 1);
   }
 }
+var ESTIMATED_GLYPH_ADVANCE_EM = 0.6;
+function laidOutWidth(runs, style, plain) {
+  const resolved = resolveTextStyle(style);
+  const { bounds } = layoutRuns(resolveRuns(runs.length > 0 ? runs : [{ text: plain }], resolved), {
+    maxWidth: Infinity,
+    lineHeight: resolved.lineHeight,
+    align: resolved.align,
+    direction: resolved.direction
+  });
+  if (bounds.width > 0) return bounds.width;
+  const longest = plain.split("\n").reduce((max, line) => Math.max(max, line.length), 0);
+  return longest * resolved.fontSize * ESTIMATED_GLYPH_ADVANCE_EM;
+}
 function parseTextElement(el, ctm, style, gradients, onWarn) {
   const num2 = (raw, fallback) => {
     if (raw == null) return fallback;
@@ -1283,13 +1298,13 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const plain = runs.map((r) => r.text).join("");
   const dataW = num2(el.getAttribute("data-weasel-width"), NaN);
   const dataH = num2(el.getAttribute("data-weasel-height"), NaN);
-  const width = Number.isFinite(dataW) ? dataW : UNBOUNDED_TEXT_WIDTH;
+  const width = Number.isFinite(dataW) ? dataW : laidOutWidth(runs, textStyle, plain);
   const lines = (plain.match(/\n/g)?.length ?? 0) + 1;
   const height = Number.isFinite(dataH) ? dataH : fontSize * lineHeight * lines;
   const opacity = readOpacityAttr(el, "opacity");
   const node = {
     kind: "text",
-    x: ax,
+    x: ax - anchorOffset(textStyle, width),
     y: topY,
     width,
     height,
@@ -1299,6 +1314,7 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
     (r) => Object.entries(r).some(([k, v]) => k !== "text" && v !== void 0)
   );
   if (hasStyling) node.runs = runs;
+  if (el.getAttribute("data-weasel-wrap") === "true") textStyle.wrap = true;
   if (Object.keys(textStyle).length > 0) node.style = textStyle;
   if (textPaint.fill !== void 0) node.fill = textPaint.fill;
   if (textPaint.stroke != null) node.stroke = textPaint.stroke;
@@ -1307,8 +1323,10 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
     const worldLocal = rebaseTransform(ctm, localTransform);
     const cx = node.x + node.width / 2;
     const cy = node.y + node.height / 2;
-    const angle = decomposeRotation(worldLocal, cx, cy);
-    if (angle != null) {
+    const angle = worldLocal && decomposeRotation(worldLocal, cx, cy);
+    if (!worldLocal) {
+      onWarn("<text> transform sits under a singular parent transform; dropped");
+    } else if (angle != null) {
       node.rotation = angle;
     } else {
       const rotComp = rotationComponent(worldLocal);
@@ -1719,7 +1737,7 @@ function rotateAboutCenter(ctm, b, angle) {
 }
 function textXml(node, registry, namespaces) {
   const attrs = [
-    `x="${trimNumber(node.x)}"`,
+    `x="${trimNumber(node.x + anchorOffset(node.style, node.width))}"`,
     `y="${trimNumber(node.y)}"`,
     `dominant-baseline="text-before-edge"`,
     // The runs model stores real line breaks; SVG's default whitespace
@@ -1745,6 +1763,7 @@ function textXml(node, registry, namespaces) {
   }
   const decoration = textDecorationValue(style?.underline, style?.strikethrough, style?.overline);
   if (decoration) attrs.push(`text-decoration="${decoration}"`);
+  if (style?.wrap) attrs.push('data-weasel-wrap="true"');
   if (node.fill === null) {
     attrs.push('fill="none"');
   } else if (node.fill) {
@@ -1909,7 +1928,7 @@ function svgNodesToKitDrafts(nodes, nextId) {
       const pose2 = {
         x: n.x,
         y: n.y,
-        width: textBoxWidth(n),
+        width: n.width,
         height: n.height
       };
       if (n.rotation) pose2.rotation = n.rotation;
@@ -1974,13 +1993,6 @@ function svgNodesToKitDrafts(nodes, nextId) {
   for (const n of nodes) visit(n, null);
   return drafts;
 }
-var ESTIMATED_GLYPH_ADVANCE_EM = 0.6;
-function textBoxWidth(n) {
-  if (n.width !== UNBOUNDED_TEXT_WIDTH) return n.width;
-  const fontSize = resolveTextStyle(n.style).fontSize;
-  const longest = n.text.split("\n").reduce((max, line) => Math.max(max, line.length), 0);
-  return longest * fontSize * ESTIMATED_GLYPH_ADVANCE_EM;
-}
 function scaleTextData(data, scale) {
   if (scale === 1 || typeof data.text !== "string") return data;
   const style = data.style ?? {};
@@ -2064,6 +2076,6 @@ async function unpackSvgFiles(files, ctx) {
   }
 }
 
-export { IDENTITY_MATRIX, UNBOUNDED_TEXT_WIDTH, parseSvg, serializeSvg, strokeDataFromSvg, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
+export { IDENTITY_MATRIX, parseSvg, serializeSvg, strokeDataFromSvg, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map