@weasel-js/svg 1.0.1 → 1.0.2

package/README.md

@@ -40,6 +40,18 @@ answer, and the alternative is unrepresentable anyway (see above). It only
 shows up on foreign SVG that sets decoration on a group and cancels it on a
 child.
 
+## Raster images
+
+`<image>` parses to an `SvgImageNode` holding the `href` verbatim — an
+external URL or a `data:` URI — plus a box. The package never fetches or
+decodes it, so an external URL round-trips as a reference and resolves only
+when something downstream loads it. `unpackSvgFiles` maps the node onto the
+kit's `kit:image` painter (`data.image.src`), which does load it.
+
+`preserveAspectRatio` is not modeled. The box is taken literally on the way
+in (a non-`none` value warns) and written back as `none`, so a source file
+that relied on letterboxing imports stretched.
+
 ## License
 
 MIT

package/dist/index.d.ts

@@ -121,6 +121,16 @@ 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
@@ -132,7 +142,7 @@ interface SvgGroupNode {
  * 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 —
- * `width = 99999` (effectively unbounded so wrap doesn't fire) and
+ * {@link UNBOUNDED_TEXT_WIDTH} and
  * `height = fontSize * lineHeight * (lineCount || 1)`.
  */
 interface SvgTextNode {
@@ -156,8 +166,32 @@ interface SvgTextNode {
     /** Opaque per-element bag for declared namespaces. See `NamespaceMeta`. */
     meta?: NamespaceMeta;
 }
+/**
+ * Raster-image leaf — an SVG `<image>`. `href` is the element's `href` (or
+ * legacy `xlink:href`) verbatim: an external URL or a `data:` URI. The
+ * package neither fetches nor decodes it, so an external URL round-trips as
+ * a reference and only resolves when something downstream loads it.
+ *
+ * SVG's `preserveAspectRatio` is not modeled; the box is taken literally.
+ */
+interface SvgImageNode {
+    kind: 'image';
+    href: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Element-level opacity (`opacity="..."`), 0..1. */
+    opacity?: number;
+    /** Element-level rotation in **radians**, pivoting around the unrotated
+     *  AABB center `(x + width/2, y + height/2)`. Emitted as SVG
+     *  `transform="rotate(angleDegrees cx cy)"`. */
+    rotation?: number;
+    /** Opaque per-element bag for declared namespaces. See `NamespaceMeta`. */
+    meta?: NamespaceMeta;
+}
 /** Discriminated-union node — the leaf of the public tree. */
-type SvgNode = SvgPathNode | SvgGroupNode | SvgTextNode;
+type SvgNode = SvgPathNode | SvgGroupNode | SvgTextNode | SvgImageNode;
 /** Options for {@link parseSvg}. */
 interface ParseOptions {
     /**
@@ -337,4 +371,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 SvgNode, type SvgPaint, type SvgPathNode, type SvgSceneDraft, type SvgStroke, type SvgTextNode, parseSvg, serializeSvg, 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, UNBOUNDED_TEXT_WIDTH, parseSvg, serializeSvg, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };

package/dist/index.js

@@ -1,10 +1,11 @@
-import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, dwarn, createInsertOp, PathBuilder, parseColor, rgbaToHex, PATH_C, PATH_Q } from '@weasel-js/core';
+import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, dwarn, createInsertOp, PathBuilder, parseColor, rgbaToHex, PATH_C, PATH_Q, resolveTextStyle, fillToBoundsFrame } from '@weasel-js/core';
 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) {
@@ -383,6 +384,9 @@ function applyAlpha(hex, alpha) {
   const a = Math.max(0, Math.min(255, Math.round(alpha * 255)));
   return `${hex}${a.toString(16).padStart(2, "0")}`;
 }
+function readGradientUnits(el) {
+  return el.getAttribute("gradientUnits") === "userSpaceOnUse" ? "world" : "bounds";
+}
 function readLinearGradient(el, onWarn) {
   const x1 = parseFloat(el.getAttribute("x1") ?? "0");
   const y1 = parseFloat(el.getAttribute("y1") ?? "0");
@@ -393,7 +397,8 @@ function readLinearGradient(el, onWarn) {
     fill: "linear-gradient",
     from: { x: x1, y: y1 },
     to: { x: x2, y: y2 },
-    stops
+    stops,
+    units: readGradientUnits(el)
   };
 }
 function readRadialGradient(el, onWarn) {
@@ -405,7 +410,8 @@ function readRadialGradient(el, onWarn) {
     fill: "radial-gradient",
     center: { x: cx, y: cy },
     radius: r,
-    stops
+    stops,
+    units: readGradientUnits(el)
   };
 }
 var PaintServerRegistry = class {
@@ -434,14 +440,17 @@ var PaintServerRegistry = class {
     return parts.join("");
   }
 };
+function gradientUnitsAttr(units) {
+  return units === "bounds" ? "objectBoundingBox" : "userSpaceOnUse";
+}
 function gradientXml(id, paint) {
   if (paint.fill === "linear-gradient") {
     const stops = paint.stops.map(stopXml).join("");
-    return `<linearGradient id="${id}" gradientUnits="userSpaceOnUse" x1="${trimNumber(paint.from.x)}" y1="${trimNumber(paint.from.y)}" x2="${trimNumber(paint.to.x)}" y2="${trimNumber(paint.to.y)}">${stops}</linearGradient>`;
+    return `<linearGradient id="${id}" gradientUnits="${gradientUnitsAttr(paint.units)}" x1="${trimNumber(paint.from.x)}" y1="${trimNumber(paint.from.y)}" x2="${trimNumber(paint.to.x)}" y2="${trimNumber(paint.to.y)}">${stops}</linearGradient>`;
   }
   if (paint.fill === "radial-gradient") {
     const stops = paint.stops.map(stopXml).join("");
-    return `<radialGradient id="${id}" gradientUnits="userSpaceOnUse" cx="${trimNumber(paint.center.x)}" cy="${trimNumber(paint.center.y)}" r="${trimNumber(paint.radius)}">${stops}</radialGradient>`;
+    return `<radialGradient id="${id}" gradientUnits="${gradientUnitsAttr(paint.units)}" cx="${trimNumber(paint.center.x)}" cy="${trimNumber(paint.center.y)}" r="${trimNumber(paint.radius)}">${stops}</radialGradient>`;
   }
   return "";
 }
@@ -685,6 +694,14 @@ function parseElement(el, ctm, style, gradients, onWarn, uriToPrefix) {
     }
     return textNode;
   }
+  if (tag === "image") {
+    const imageNode = parseImageElement(el, ctm, onWarn);
+    if (imageNode) {
+      const meta2 = collectElementMeta(el, uriToPrefix);
+      if (meta2) imageNode.meta = meta2;
+    }
+    return imageNode;
+  }
   if (!SUPPORTED_LEAF_TAGS.has(tag)) {
     onWarn(`unsupported element: <${el.tagName}>`);
     return null;
@@ -933,6 +950,54 @@ function parseTextDecoration(raw) {
   if (tokens.includes("line-through")) out.strikethrough = true;
   return out;
 }
+var XLINK_NS = "http://www.w3.org/1999/xlink";
+function parseImageElement(el, ctm, onWarn) {
+  const href = el.getAttribute("href") ?? el.getAttributeNS(XLINK_NS, "href") ?? el.getAttribute("xlink:href");
+  if (!href) {
+    onWarn("<image> without href; dropped");
+    return null;
+  }
+  const num = (raw, fallback) => {
+    if (raw == null) return fallback;
+    const n = parseFloat(raw);
+    return Number.isFinite(n) ? n : fallback;
+  };
+  const rawX = num(el.getAttribute("x"), 0);
+  const rawY = num(el.getAttribute("y"), 0);
+  const rawW = num(el.getAttribute("width"), 0);
+  const rawH = num(el.getAttribute("height"), 0);
+  const px = (x, y) => [ctm[0] * x + ctm[2] * y + ctm[4], ctm[1] * x + ctm[3] * y + ctm[5]];
+  const [x0, y0] = px(rawX, rawY);
+  const [x1, y1] = px(rawX + rawW, rawY + rawH);
+  const node = {
+    kind: "image",
+    href,
+    x: Math.min(x0, x1),
+    y: Math.min(y0, y1),
+    width: Math.abs(x1 - x0),
+    height: Math.abs(y1 - y0)
+  };
+  const opacity = readOpacityAttr(el, "opacity");
+  if (opacity != null) node.opacity = opacity;
+  const localTransform = parseTransform(el.getAttribute("transform"), onWarn);
+  if (!isIdentity(localTransform)) {
+    const cx = node.x + node.width / 2;
+    const cy = node.y + node.height / 2;
+    const angle = decomposeRotation(localTransform, cx, cy);
+    if (angle != null) {
+      node.rotation = angle;
+    } else {
+      const rotComp = rotationComponent(localTransform);
+      if (Math.abs(rotComp) > 1e-4) {
+        onWarn("<image> transform has a rotational component that can't be cleanly stored as rotation; dropped (may not round-trip identically)");
+      }
+    }
+  }
+  if (el.hasAttribute("preserveAspectRatio") && el.getAttribute("preserveAspectRatio") !== "none") {
+    onWarn("<image> preserveAspectRatio is not modeled; the box is taken literally");
+  }
+  return node;
+}
 function parseTextElement(el, ctm, style, gradients, onWarn) {
   const num = (raw, fallback) => {
     if (raw == null) return fallback;
@@ -979,7 +1044,7 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   }
   const dataW = num(el.getAttribute("data-weasel-width"), NaN);
   const dataH = num(el.getAttribute("data-weasel-height"), NaN);
-  const width = Number.isFinite(dataW) ? dataW : 99999;
+  const width = Number.isFinite(dataW) ? dataW : UNBOUNDED_TEXT_WIDTH;
   const lines = (plain.match(/\n/g)?.length ?? 0) + 1;
   const height = Number.isFinite(dataH) ? dataH : fontSize * lineHeight * lines;
   const opacity = readOpacityAttr(el, "opacity");
@@ -1227,8 +1292,32 @@ function registerTextPaint(paint, registry) {
 function nodeXml(node, registry, namespaces) {
   if (node.kind === "group") return groupXml(node, registry, namespaces);
   if (node.kind === "text") return textXml(node, registry, namespaces);
+  if (node.kind === "image") return imageXml(node, namespaces);
   return pathXml(node, registry, namespaces);
 }
+function imageXml(node, namespaces) {
+  const attrs = [
+    `href="${escapeAttr2(node.href)}"`,
+    `x="${trimNumber(node.x)}"`,
+    `y="${trimNumber(node.y)}"`,
+    `width="${trimNumber(node.width)}"`,
+    `height="${trimNumber(node.height)}"`,
+    `preserveAspectRatio="none"`
+  ];
+  if (node.opacity != null && node.opacity !== 1) {
+    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
+  }
+  if (node.rotation != null && node.rotation !== 0) {
+    const cx = node.x + node.width / 2;
+    const cy = node.y + node.height / 2;
+    const deg = node.rotation * 180 / Math.PI;
+    attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
+  }
+  const metaAttrs = metaAttrsXml(node.meta, namespaces);
+  const metaEls = metaElementsXml(node.meta, namespaces);
+  if (metaEls) return `<image ${attrs.join(" ")}${metaAttrs}>${metaEls}</image>`;
+  return `<image ${attrs.join(" ")}${metaAttrs}/>`;
+}
 function groupXml(node, registry, namespaces) {
   const attrs = [];
   if (node.transform) {
@@ -1334,7 +1423,7 @@ function computeBounds(nodes) {
       n.children.forEach(visit);
       return;
     }
-    const b = n.kind === "text" ? { minX: n.x, minY: n.y, maxX: n.x + n.width, maxY: n.y + n.height } : pathBounds(n.path);
+    const b = n.kind === "text" || n.kind === "image" ? { minX: n.x, minY: n.y, maxX: n.x + n.width, maxY: n.y + n.height } : pathBounds(n.path);
     if (b.minX < minX) minX = b.minX;
     if (b.minY < minY) minY = b.minY;
     if (b.maxX > maxX) maxX = b.maxX;
@@ -1456,11 +1545,19 @@ var svgIdCounter = 0;
 function freshSvgNodeId() {
   return `n${(svgIdCounter++).toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
 }
-function colorFromPaint(paint, context) {
+function fillFromPaint(paint, box) {
+  if (!paint) return void 0;
+  if (paint.kind === "none") return "none";
+  if (paint.kind === "solid") return paint.color;
+  const g = paint.paint;
+  const units = "units" in g ? g.units : void 0;
+  return units === "world" ? fillToBoundsFrame(g, box) : g;
+}
+function strokeColorFromPaint(paint) {
   if (!paint) return void 0;
   if (paint.kind === "none") return "none";
   if (paint.kind === "solid") return paint.color;
-  dwarn("ingest", `svg unpack: gradient ${context} flattened to ${GRADIENT_FALLBACK}`);
+  dwarn("ingest", `svg unpack: gradient stroke flattened to ${GRADIENT_FALLBACK}`);
   return GRADIENT_FALLBACK;
 }
 function svgNodesToKitDrafts(nodes, nextId) {
@@ -1487,7 +1584,12 @@ function svgNodesToKitDrafts(nodes, nextId) {
       return acc;
     }
     if (n.kind === "text") {
-      const pose2 = { x: n.x, y: n.y, width: n.width, height: n.height };
+      const pose2 = {
+        x: n.x,
+        y: n.y,
+        width: textBoxWidth(n),
+        height: n.height
+      };
       if (n.rotation) pose2.rotation = n.rotation;
       drafts.push({
         kind: "leaf",
@@ -1498,11 +1600,28 @@ function svgNodesToKitDrafts(nodes, nextId) {
       });
       return pose2;
     }
+    if (n.kind === "image") {
+      const pose2 = { x: n.x, y: n.y, width: n.width, height: n.height };
+      if (n.rotation) pose2.rotation = n.rotation;
+      drafts.push({
+        kind: "leaf",
+        id: nextId(),
+        parentId,
+        pose: pose2,
+        data: {
+          image: {
+            src: n.href,
+            ...n.opacity != null ? { opacity: n.opacity } : {}
+          }
+        }
+      });
+      return pose2;
+    }
     const b = n.path.kind === "rect" ? { x: n.path.x, y: n.path.y, width: n.path.width, height: n.path.height } : boundsOfPath(n.path);
     const pose = { x: b.x, y: b.y, width: b.width, height: b.height };
     if (n.rotation) pose.rotation = n.rotation;
-    const fill = colorFromPaint(n.fill, "fill");
-    const stroke = n.stroke ? colorFromPaint(n.stroke.paint, "stroke") : void 0;
+    const fill = fillFromPaint(n.fill, b);
+    const stroke = n.stroke ? strokeColorFromPaint(n.stroke.paint) : void 0;
     drafts.push({
       kind: "leaf",
       id: nextId(),
@@ -1519,6 +1638,21 @@ 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 ?? {};
+  return {
+    ...data,
+    style: { ...style, fontSize: resolveTextStyle(style).fontSize * scale }
+  };
+}
 function unionRect(a, b) {
   const minX = Math.min(a.x, b.x);
   const minY = Math.min(a.y, b.y);
@@ -1576,7 +1710,7 @@ async function unpackSvgFiles(files, ctx) {
             kind: d.kind,
             layer,
             pose: place(d.pose),
-            data: d.kind === "leaf" ? d.data : {},
+            data: d.kind === "leaf" ? scaleTextData(d.data, scale) : {},
             parent: d.parentId
           },
           label: "Insert SVG"
@@ -1590,6 +1724,6 @@ async function unpackSvgFiles(files, ctx) {
   }
 }
 
-export { IDENTITY_MATRIX, parseSvg, serializeSvg, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
+export { IDENTITY_MATRIX, UNBOUNDED_TEXT_WIDTH, parseSvg, serializeSvg, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map