@weasel-js/svg 1.4.3 → 1.5.0

package/dist/index.d.ts

@@ -72,7 +72,12 @@ type SvgPaint = {
 /** Stroke description: a paint plus structural line parameters. */
 interface SvgStroke {
     paint: SvgPaint;
-    width: number;
+    /** World units, or `{ px }` for a width that holds its rendered thickness
+     *  however the document is scaled — SVG's `vector-effect="non-scaling-stroke"`,
+     *  and the same unit system as the kit's `Stroke.width`. */
+    width: number | {
+        px: number;
+    };
     opacity?: number;
     /** `stroke-linecap`. Default per SVG spec is `'butt'`. */
     cap?: 'butt' | 'round' | 'square';
@@ -125,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
@@ -145,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';
@@ -396,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, resolveStrokeWidth, 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);
@@ -879,7 +879,7 @@ function parseElement(el, ctm, style, gradients, onWarn, uriToPrefix) {
   }
   const leafStyle = deriveStyle(style, el);
   const fill = readPaint(leafStyle, "fill", "#000000", gradients, onWarn);
-  const stroke = readStroke(leafStyle, gradients, onWarn);
+  const stroke = readStroke(leafStyle, gradients, onWarn, isNonScalingStroke(el));
   const opacity = readOpacityAttr(el, "opacity");
   const fillRuleRaw = leafStyle["fill-rule"] ?? null;
   if (fillRuleRaw === "evenodd" && path.kind === "polygon") {
@@ -988,14 +988,14 @@ function readPaint(style, attr, defaultColor, gradients, onWarn) {
   if (a != null) out.opacity = a;
   return out;
 }
-function readStroke(style, gradients, onWarn) {
+function readStroke(style, gradients, onWarn, nonScaling = false) {
   const inheritedStroke = style["stroke"] ?? null;
   const inheritedWidth = style["stroke-width"] ?? null;
   if (inheritedStroke == null && inheritedWidth == null) return void 0;
   const paint = readPaint(style, "stroke", "#000000", gradients, onWarn);
   if (paint.kind === "none") return void 0;
-  const width = inheritedWidth != null ? parseFloat(inheritedWidth) : 1;
-  const stroke = { paint, width };
+  const n = inheritedWidth != null ? parseFloat(inheritedWidth) : 1;
+  const stroke = { paint, width: nonScaling ? { px: n } : n };
   const opacityRaw = style["stroke-opacity"] ?? null;
   if (opacityRaw != null) {
     const a = clamp01(parseFloat(opacityRaw));
@@ -1062,6 +1062,9 @@ var STROKE_KEYS = [
   "marker-mid",
   "marker-end"
 ];
+function isNonScalingStroke(el) {
+  return ownProp(el, "vector-effect") === "non-scaling-stroke";
+}
 function ownStrokeStyle(el) {
   const out = {};
   for (const k of STROKE_KEYS) {
@@ -1184,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);
@@ -1235,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;
@@ -1249,7 +1267,7 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const ay = m[1] * rawX + m[3] * rawY + m[5];
   const leafStyle = deriveStyle(style, el);
   const textStyle = readTextStyle(leafStyle, onWarn);
-  const textPaint = readTextPaint(leafStyle, gradients, onWarn);
+  const textPaint = readTextPaint(leafStyle, gradients, onWarn, isNonScalingStroke(el));
   const fontSize = textStyle.fontSize ?? 16;
   const lineHeight = textStyle.lineHeight ?? 1.2;
   const dominantBaseline = el.getAttribute("dominant-baseline");
@@ -1280,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,
@@ -1296,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;
@@ -1304,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);
@@ -1357,7 +1378,7 @@ function readTspanRun(el, gradients, style, onWarn) {
       if (paint) run.fill = paint;
     }
   }
-  const stroke = coreStroke(readStroke(ownStrokeStyle(el), gradients, onWarn));
+  const stroke = coreStroke(readStroke(ownStrokeStyle(el), gradients, onWarn, isNonScalingStroke(el)));
   if (stroke) run.stroke = stroke;
   return run;
 }
@@ -1394,7 +1415,7 @@ function readTextStyle(style, onWarn) {
   if (decoration.overline) out.overline = true;
   return out;
 }
-function readTextPaint(style, gradients, onWarn) {
+function readTextPaint(style, gradients, onWarn, nonScalingStroke = false) {
   const out = {};
   const fillRaw = resolveCurrentColor(style["fill"] ?? null, style);
   if (fillRaw) {
@@ -1408,7 +1429,7 @@ function readTextPaint(style, gradients, onWarn) {
       out.fill = null;
     }
   }
-  const stroke = coreStroke(readStroke(style, gradients, onWarn));
+  const stroke = coreStroke(readStroke(style, gradients, onWarn, nonScalingStroke));
   if (stroke) out.stroke = stroke;
   return out;
 }
@@ -1608,11 +1629,15 @@ function paintAttrs(paint, name, registry, includeOpacity = true) {
   const id = registry.register(paint.paint);
   return [`${name}="url(#${id})"`];
 }
+function strokeWidthAttrs(width) {
+  if (typeof width === "number") return [`stroke-width="${trimNumber(width)}"`];
+  return [`stroke-width="${trimNumber(width.px)}"`, 'vector-effect="non-scaling-stroke"'];
+}
 function coreStrokeAttrs(stroke, registry) {
   const paint = stroke?.paint;
   if (!stroke || !paint) return [];
-  const width = resolveStrokeWidth(stroke.width ?? 1, 1);
-  if (!(width > 0)) return [];
+  const width = stroke.width ?? 1;
+  if (!((typeof width === "object" ? width.px : width) > 0)) return [];
   const attrs = [];
   if ("color" in paint) {
     attrs.push(`stroke="${paint.color}"`);
@@ -1622,7 +1647,7 @@ function coreStrokeAttrs(stroke, registry) {
   } else {
     attrs.push(`stroke="url(#${registry.register(paint)})"`);
   }
-  attrs.push(`stroke-width="${trimNumber(width)}"`);
+  attrs.push(...strokeWidthAttrs(width));
   if (stroke.cap) attrs.push(`stroke-linecap="${stroke.cap}"`);
   if (stroke.join) attrs.push(`stroke-linejoin="${stroke.join}"`);
   if (stroke.dash && stroke.dash.length > 0) {
@@ -1645,7 +1670,7 @@ function coreStrokeAttrs(stroke, registry) {
 }
 function strokeAttrsFor(stroke, registry) {
   const attrs = paintAttrs(stroke.paint, "stroke", registry, false);
-  attrs.push(`stroke-width="${trimNumber(stroke.width)}"`);
+  attrs.push(...strokeWidthAttrs(stroke.width));
   const opacity = stroke.opacity ?? (stroke.paint.kind === "solid" ? stroke.paint.opacity : void 0);
   if (opacity != null && opacity !== 1) {
     attrs.push(`stroke-opacity="${trimNumber(opacity)}"`);
@@ -1712,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
@@ -1738,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) {
@@ -1860,6 +1886,21 @@ function strokeDataFromSvg(stroke, box) {
     ...stroke.markerEnd !== void 0 ? { markerEnd: stroke.markerEnd } : {}
   };
 }
+function fillInBoxFrame(fill, box) {
+  const units = "units" in fill ? fill.units : void 0;
+  return units === "world" ? fillToBoundsFrame(fill, box) : fill;
+}
+function runInBoxFrame(run, box) {
+  const fill = run.fill ? fillInBoxFrame(run.fill, box) : run.fill;
+  const stroke = run.stroke ? strokeInBoxFrame(run.stroke, box) : run.stroke;
+  if (fill === run.fill && stroke === run.stroke) return run;
+  return { ...run, ...fill ? { fill } : {}, ...stroke ? { stroke } : {} };
+}
+function strokeInBoxFrame(stroke, box) {
+  if (!stroke.paint) return stroke;
+  const paint = fillInBoxFrame(stroke.paint, box);
+  return paint === stroke.paint ? stroke : { ...stroke, paint };
+}
 function svgNodesToKitDrafts(nodes, nextId) {
   const drafts = [];
   const visit = (n, parentId) => {
@@ -1887,16 +1928,30 @@ 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;
+      const box = {
+        x: pose2.x,
+        y: pose2.y,
+        width: pose2.width,
+        height: pose2.height
+      };
       drafts.push({
         kind: "leaf",
         id: nextId(),
         parentId,
         pose: pose2,
-        data: { text: n.text, ...n.style ? { style: n.style } : {} }
+        data: {
+          text: n.text,
+          ...n.style ? { style: n.style } : {},
+          ...n.runs ? { runs: n.runs.map((r) => runInBoxFrame(r, box)) } : {},
+          // `!== undefined`, not a truthiness test: `null` is the document
+          // saying `fill="none"`, and absent takes the painter's default.
+          ...n.fill !== void 0 ? { fill: n.fill === null ? null : fillInBoxFrame(n.fill, box) } : {},
+          ...n.stroke !== void 0 ? { stroke: strokeInBoxFrame(n.stroke, box) } : {}
+        }
       });
       return pose2;
     }
@@ -1938,18 +1993,15 @@ 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 ?? {};
+  const runs = data.runs;
   return {
     ...data,
+    ...runs ? {
+      runs: runs.map((r) => r.fontSize !== void 0 ? { ...r, fontSize: r.fontSize * scale } : r)
+    } : {},
     style: { ...style, fontSize: resolveTextStyle(style).fontSize * scale }
   };
 }
@@ -2024,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