@weasel-js/svg 0.7.2 → 1.0.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Path, FillStyle, StyledRun, TextStyle, IngestCtx } from '@weasel-js/core';
+import { Path, FillStyle, StyledRun, TextStyle, TilePatternSpec, IngestCtx } from '@weasel-js/core';
 
 /**
  * Public types for `@weasel-js/svg`. The package exposes a flat,
@@ -206,6 +206,12 @@ interface SerializeOptions {
         width: number;
         height: number;
     };
+    /**
+     * Called for paint that can't be expressed in SVG and is dropped — a
+     * conic gradient, or a pattern carrying a `TextureHandle` instead of a
+     * `TilePatternSpec`. Without this the loss is silent.
+     */
+    onWarn?: (message: string) => void;
     /** Emit `width="..."` on the root `<svg>`. */
     width?: number;
     /** Emit `height="..."` on the root `<svg>`. */
@@ -263,6 +269,33 @@ declare function parseSvg(svg: string, opts?: ParseOptions): ParseResult;
  */
 declare function serializeSvg(nodes: SvgNode[], opts?: SerializeOptions): string;
 
+/**
+ * Map between SVG `<pattern>` elements and weasel's `pattern` `FillStyle`.
+ * The counterpart to `gradients.ts` for the other paint-server kind.
+ *
+ * The tile's shapes come from `tileGeometry` in core, so the vector form a
+ * viewer sees is generated from the same description that rasterizes the GL
+ * texture. Alongside them we write the spec itself onto a `data-weasel-tile`
+ * attribute: any SVG consumer renders the shapes, and weasel reads the
+ * attribute back to recover the exact spec rather than reverse-engineering
+ * it from geometry.
+ *
+ * A pattern whose payload is a `TextureHandle` has no vector form — the
+ * handle is a session-scoped registry key with no tile description behind
+ * it — and exports as nothing, with a warning. Same treatment conic
+ * gradients get.
+ */
+
+/**
+ * A single tile as a standalone `<svg>` document, sized to its own extent.
+ * For UI that needs to show a tile outside a document — a picker swatch,
+ * set as a repeating CSS `background-image` via a data URI. Shares the shape
+ * mapper with `patternXml`, so a preview can't drift from what paints.
+ */
+declare function tilePreviewSvg(spec: TilePatternSpec, background?: string): string;
+/** `tilePreviewSvg` packed as a `url(...)` value for CSS `background-image`. */
+declare function tilePreviewCssUrl(spec: TilePatternSpec, background?: string): string;
+
 interface SvgDraftBounds {
     x: number;
     y: number;
@@ -304,4 +337,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, unpackSvgFiles };
+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 };

package/dist/index.js

@@ -1,4 +1,5 @@
 import { pathFromD, PATH_M, PATH_L, PATH_Z, boundsOfPath, dwarn, createInsertOp, PathBuilder, parseColor, rgbaToHex, PATH_C, PATH_Q } from '@weasel-js/core';
+import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
 // src/parse.ts
 
@@ -241,6 +242,98 @@ function parsePaintAttr(raw) {
     return null;
   }
 }
+function patternSpecOf(paint) {
+  return "tile" in paint.pattern ? paint.pattern : null;
+}
+function patternXml(id, paint, onWarn) {
+  const spec = patternSpecOf(paint);
+  if (!spec) {
+    onWarn?.("pattern fill carries a TextureHandle, which has no vector form \u2014 omitted from <defs>");
+    return "";
+  }
+  const geometry = tileGeometry(spec);
+  const body = geometry.shapes.map(shapeXml).join("");
+  const origin = paint.origin ?? { x: 0, y: 0 };
+  const attrs = [
+    `id="${id}"`,
+    'patternUnits="userSpaceOnUse"',
+    `width="${trimNumber(geometry.size)}"`,
+    `height="${trimNumber(geometry.size)}"`
+  ];
+  if (origin.x !== 0 || origin.y !== 0) {
+    attrs.push(`x="${trimNumber(origin.x)}"`, `y="${trimNumber(origin.y)}"`);
+  }
+  attrs.push(`data-weasel-tile="${escapeAttr(JSON.stringify(spec))}"`);
+  return `<pattern ${attrs.join(" ")}>${body}</pattern>`;
+}
+function tilePreviewSvg(spec, background) {
+  const geometry = tileGeometry(spec);
+  const s = trimNumber(geometry.size);
+  const bg = background ? `<rect width="${s}" height="${s}" fill="${background}"/>` : "";
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}" viewBox="0 0 ${s} ${s}">${bg}${geometry.shapes.map(shapeXml).join("")}</svg>`;
+}
+function tilePreviewCssUrl(spec, background) {
+  return `url("data:image/svg+xml,${encodeURIComponent(tilePreviewSvg(spec, background))}")`;
+}
+function shapeXml(shape) {
+  switch (shape.kind) {
+    case "line":
+      return `<line x1="${trimNumber(shape.x1)}" y1="${trimNumber(shape.y1)}" x2="${trimNumber(shape.x2)}" y2="${trimNumber(shape.y2)}" stroke="${shape.color}" stroke-width="${trimNumber(shape.width)}"/>`;
+    case "circle":
+      return `<circle cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" r="${trimNumber(shape.r)}" fill="${shape.color}"/>`;
+    case "ellipse": {
+      const deg = shape.rotation * 180 / Math.PI;
+      const transform = deg === 0 ? "" : ` transform="rotate(${trimNumber(deg)} ${trimNumber(shape.cx)} ${trimNumber(shape.cy)})"`;
+      return `<ellipse cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" rx="${trimNumber(shape.rx)}" ry="${trimNumber(shape.ry)}" fill="${shape.color}"${transform}/>`;
+    }
+    case "rect":
+      return `<rect x="${trimNumber(shape.x)}" y="${trimNumber(shape.y)}" width="${trimNumber(shape.width)}" height="${trimNumber(shape.height)}" fill="${shape.color}"/>`;
+    default:
+      return "";
+  }
+}
+function collectPatterns(svg, onWarn) {
+  const out = /* @__PURE__ */ new Map();
+  const defs = svg.getElementsByTagName("defs");
+  for (let d = 0; d < defs.length; d++) {
+    const root = defs[d];
+    for (let i = 0; i < root.children.length; i++) {
+      const child = root.children[i];
+      if (child.tagName.toLowerCase() !== "pattern") continue;
+      const id = child.getAttribute("id");
+      if (!id) continue;
+      const paint = readPattern(child, onWarn);
+      if (paint) out.set(id, paint);
+    }
+  }
+  return out;
+}
+function readPattern(el, onWarn) {
+  const raw = el.getAttribute("data-weasel-tile");
+  if (!raw) {
+    onWarn?.(`<pattern id="${el.getAttribute("id")}"> has no data-weasel-tile \u2014 unsupported pattern, dropped`);
+    return null;
+  }
+  let spec;
+  try {
+    spec = JSON.parse(raw);
+  } catch {
+    onWarn?.(`<pattern id="${el.getAttribute("id")}"> has malformed data-weasel-tile \u2014 dropped`);
+    return null;
+  }
+  if (typeof spec?.tile !== "string" || typeof spec?.color !== "string") {
+    onWarn?.(`<pattern id="${el.getAttribute("id")}"> data-weasel-tile is not a tile spec \u2014 dropped`);
+    return null;
+  }
+  const x = parseFloat(el.getAttribute("x") ?? "0");
+  const y = parseFloat(el.getAttribute("y") ?? "0");
+  const paint = { fill: "pattern", pattern: spec };
+  if (x !== 0 || y !== 0) paint.origin = { x, y };
+  return paint;
+}
+function escapeAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
 
 // src/gradients.ts
 function collectGradients(svg, onWarn) {
@@ -259,7 +352,7 @@ function collectGradients(svg, onWarn) {
       } else if (tag === "radialgradient") {
         const paint = readRadialGradient(child, onWarn);
         if (paint) out.set(id, paint);
-      } else if (tag !== "lineargradient" && tag !== "radialgradient") {
+      } else if (tag !== "pattern") {
         onWarn?.(`unsupported <defs> child: <${child.tagName}>`);
       }
     }
@@ -315,25 +408,27 @@ function readRadialGradient(el, onWarn) {
     stops
   };
 }
-var GradientRegistry = class {
+var PaintServerRegistry = class {
   byPaint = /* @__PURE__ */ new Map();
   order = [];
   counter = 0;
   register(paint) {
     const existing = this.byPaint.get(paint);
     if (existing) return existing;
-    const id = `grad${this.counter++}`;
+    const id = paint.fill === "pattern" ? `pat${this.counter++}` : `grad${this.counter++}`;
     this.byPaint.set(paint, id);
     this.order.push(paint);
     return id;
   }
-  /** Emit `<defs>...</defs>` XML for all registered gradients. */
-  toDefsXml() {
+  /** Emit `<defs>...</defs>` XML for every registered paint server. */
+  toDefsXml(onWarn) {
     if (this.order.length === 0) return "";
     const parts = ["<defs>"];
     for (const paint of this.order) {
       const id = this.byPaint.get(paint);
-      parts.push(gradientXml(id, paint));
+      parts.push(
+        paint.fill === "pattern" ? patternXml(id, paint, onWarn) : gradientXml(id, paint)
+      );
     }
     parts.push("</defs>");
     return parts.join("");
@@ -446,6 +541,7 @@ function parseSvg(svg, opts = {}) {
   }
   const documentMeta = collectDocumentMeta(root, uriToPrefix);
   const gradients = collectGradients(root, onWarn);
+  for (const [id, paint] of collectPatterns(root, onWarn)) gradients.set(id, paint);
   const rootStyle = deriveStyle(EMPTY_STYLE, root);
   const nodes = parseChildren(root, IDENTITY_MATRIX, rootStyle, gradients, onWarn, uriToPrefix);
   const result = { nodes, warnings };
@@ -766,6 +862,40 @@ function readStroke(style, gradients, onWarn) {
   }
   return stroke;
 }
+var STROKE_KEYS = [
+  "stroke",
+  "stroke-width",
+  "stroke-opacity",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "stroke-dasharray",
+  "stroke-miterlimit"
+];
+function ownStrokeStyle(el) {
+  const out = {};
+  for (const k of STROKE_KEYS) {
+    const v = ownProp(el, k);
+    if (v != null) out[k] = v;
+  }
+  return out;
+}
+function coreStroke(stroke) {
+  if (!stroke) return void 0;
+  let paint;
+  if (stroke.paint.kind === "gradient") {
+    paint = stroke.paint.paint;
+  } else if (stroke.paint.kind === "solid") {
+    paint = stroke.paint.opacity != null ? { fill: "solid", color: stroke.paint.color, opacity: stroke.paint.opacity } : { fill: "solid", color: stroke.paint.color };
+  } else {
+    return void 0;
+  }
+  const out = { paint, width: stroke.width };
+  if (stroke.cap) out.cap = stroke.cap;
+  if (stroke.join) out.join = stroke.join;
+  if (stroke.dash) out.dash = stroke.dash;
+  if (stroke.miterLimit != null) out.miterLimit = stroke.miterLimit;
+  return out;
+}
 function parseDashArray(s) {
   const tokens = s.trim().split(/[\s,]+/).filter(Boolean);
   if (tokens.length === 0) return null;
@@ -816,7 +946,7 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   const ax = m[0] * rawX + m[2] * rawY + m[4];
   const ay = m[1] * rawX + m[3] * rawY + m[5];
   const leafStyle = deriveStyle(style, el);
-  const textStyle = readTextStyle(leafStyle, el, gradients, onWarn);
+  const textStyle = readTextStyle(leafStyle, gradients, onWarn);
   const fontSize = textStyle.fontSize ?? 16;
   const lineHeight = textStyle.lineHeight ?? 1.2;
   const dominantBaseline = el.getAttribute("dominant-baseline");
@@ -863,7 +993,7 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
     text: plain
   };
   const hasStyling = runs.some(
-    (r) => r.bold || r.italic || r.fontFamily || r.fontSize != null || r.letterSpacing != null || r.underline || r.strikethrough || r.fill && ("color" in r.fill || "fill" in r.fill)
+    (r) => Object.entries(r).some(([k, v]) => k !== "text" && v !== void 0)
   );
   if (hasStyling) node.runs = runs;
   if (Object.keys(textStyle).length > 0) node.style = textStyle;
@@ -916,9 +1046,11 @@ function readTspanRun(el, gradients, style, onWarn) {
       if (paint) run.fill = paint;
     }
   }
+  const stroke = coreStroke(readStroke(ownStrokeStyle(el), gradients, onWarn));
+  if (stroke) run.stroke = stroke;
   return run;
 }
-function readTextStyle(style, el, gradients, onWarn) {
+function readTextStyle(style, gradients, onWarn) {
   const out = {};
   const sz = style["font-size"];
   if (sz != null) {
@@ -956,9 +1088,8 @@ function readTextStyle(style, el, gradients, onWarn) {
       if (paint) out.fill = paint;
     }
   }
-  if (el.hasAttribute("stroke")) {
-    onWarn('<text stroke="..."> not supported on text; ignoring');
-  }
+  const stroke = coreStroke(readStroke(style, gradients, onWarn));
+  if (stroke) out.stroke = stroke;
   return out;
 }
 function serializePathD(path) {
@@ -997,14 +1128,14 @@ function serializePathD(path) {
 
 // src/serialize.ts
 function serializeSvg(nodes, opts = {}) {
-  const registry = new GradientRegistry();
-  registerGradients(nodes, registry);
+  const registry = new PaintServerRegistry();
+  registerPaintServers(nodes, registry);
   const bounds = opts.viewBox ?? computeBounds(nodes);
   const vb = `${trimNumber(bounds.x)} ${trimNumber(bounds.y)} ${trimNumber(bounds.width)} ${trimNumber(bounds.height)}`;
   const namespaces = opts.namespaces ?? {};
   const rootAttrs = [`xmlns="http://www.w3.org/2000/svg"`];
   for (const [prefix, uri] of Object.entries(namespaces)) {
-    rootAttrs.push(`xmlns:${prefix}="${escapeAttr(uri)}"`);
+    rootAttrs.push(`xmlns:${prefix}="${escapeAttr2(uri)}"`);
   }
   rootAttrs.push(`viewBox="${vb}"`);
   if (opts.width != null) rootAttrs.push(`width="${trimNumber(opts.width)}"`);
@@ -1014,7 +1145,7 @@ function serializeSvg(nodes, opts = {}) {
       const bucket = opts.documentMeta[prefix];
       if (!bucket?.attrs) continue;
       for (const [name, value] of Object.entries(bucket.attrs)) {
-        rootAttrs.push(`${prefix}:${name}="${escapeAttr(value)}"`);
+        rootAttrs.push(`${prefix}:${name}="${escapeAttr2(value)}"`);
       }
     }
   }
@@ -1028,7 +1159,7 @@ function serializeSvg(nodes, opts = {}) {
       }
     }
   }
-  const defsXml = registry.toDefsXml();
+  const defsXml = registry.toDefsXml(opts.onWarn);
   const bodyXml = nodes.map((n) => nodeXml(n, registry, namespaces)).join("");
   const titleXml = opts.title && opts.title.length > 0 ? `<title>${escapeText(opts.title)}</title>` : "";
   return `<svg ${rootAttrs.join(" ")}>${titleXml}${defsXml}${docMetaXml}${bodyXml}</svg>`;
@@ -1036,7 +1167,7 @@ function serializeSvg(nodes, opts = {}) {
 function namespacedElementXml(prefix, localName, el) {
   const attrs = [];
   for (const [name, value] of Object.entries(el.attrs)) {
-    attrs.push(`${name}="${escapeAttr(value)}"`);
+    attrs.push(`${name}="${escapeAttr2(value)}"`);
   }
   const head = attrs.length > 0 ? `<${prefix}:${localName} ${attrs.join(" ")}>` : `<${prefix}:${localName}>`;
   let body = "";
@@ -1056,7 +1187,7 @@ function metaAttrsXml(meta, namespaces) {
     const bucket = meta[prefix];
     if (!bucket?.attrs) continue;
     for (const [name, value] of Object.entries(bucket.attrs)) {
-      parts.push(`${prefix}:${name}="${escapeAttr(value)}"`);
+      parts.push(`${prefix}:${name}="${escapeAttr2(value)}"`);
     }
   }
   return parts.length > 0 ? ` ${parts.join(" ")}` : "";
@@ -1073,21 +1204,26 @@ function metaElementsXml(meta, namespaces) {
   }
   return out;
 }
-function registerGradients(nodes, registry) {
+function registerPaintServers(nodes, registry) {
   for (const n of nodes) {
     if (n.kind === "group") {
-      registerGradients(n.children, registry);
+      registerPaintServers(n.children, registry);
     } else if (n.kind === "path") {
       if (n.fill.kind === "gradient") registry.register(n.fill.paint);
       if (n.stroke && n.stroke.paint.kind === "gradient") registry.register(n.stroke.paint.paint);
     } else if (n.kind === "text") {
-      const styleFill = n.style?.fill;
-      if (styleFill && !("color" in styleFill)) {
-        registry.register(styleFill);
+      registerTextPaint(n.style?.fill, registry);
+      registerTextPaint(n.style?.stroke?.paint, registry);
+      for (const run of n.runs ?? []) {
+        registerTextPaint(run.fill, registry);
+        registerTextPaint(run.stroke?.paint, registry);
       }
     }
   }
 }
+function registerTextPaint(paint, registry) {
+  if (paint && !("color" in paint)) registry.register(paint);
+}
 function nodeXml(node, registry, namespaces) {
   if (node.kind === "group") return groupXml(node, registry, namespaces);
   if (node.kind === "text") return textXml(node, registry, namespaces);
@@ -1149,6 +1285,28 @@ function paintAttrs(paint, name, registry) {
   const id = registry.register(paint.paint);
   return [`${name}="url(#${id})"`];
 }
+function coreStrokeAttrs(stroke, registry) {
+  if (!stroke) return [];
+  const width = stroke.width ?? 1;
+  if (!(width > 0)) return [];
+  const attrs = [];
+  if ("color" in stroke.paint) {
+    attrs.push(`stroke="${stroke.paint.color}"`);
+    if (stroke.paint.opacity != null && stroke.paint.opacity !== 1) {
+      attrs.push(`stroke-opacity="${trimNumber(stroke.paint.opacity)}"`);
+    }
+  } else {
+    attrs.push(`stroke="url(#${registry.register(stroke.paint)})"`);
+  }
+  attrs.push(`stroke-width="${trimNumber(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) {
+    attrs.push(`stroke-dasharray="${stroke.dash.map(trimNumber).join(" ")}"`);
+  }
+  if (stroke.miterLimit != null) attrs.push(`stroke-miterlimit="${trimNumber(stroke.miterLimit)}"`);
+  return attrs;
+}
 function strokeAttrsFor(stroke, registry) {
   const attrs = paintAttrs(stroke.paint, "stroke", registry);
   attrs.push(`stroke-width="${trimNumber(stroke.width)}"`);
@@ -1198,7 +1356,7 @@ function textXml(node, registry, namespaces) {
   ];
   const style = node.style;
   if (style?.fontSize != null) attrs.push(`font-size="${trimNumber(style.fontSize)}"`);
-  if (style?.fontFamily) attrs.push(`font-family="${escapeAttr(style.fontFamily)}"`);
+  if (style?.fontFamily) attrs.push(`font-family="${escapeAttr2(style.fontFamily)}"`);
   if (style?.fontWeight != null) attrs.push(`font-weight="${String(style.fontWeight)}"`);
   if (style?.fontStyle && style.fontStyle !== "normal") attrs.push(`font-style="${style.fontStyle}"`);
   if (style?.align && style.align !== "left") {
@@ -1221,6 +1379,7 @@ function textXml(node, registry, namespaces) {
       attrs.push(`fill="url(#${id})"`);
     }
   }
+  for (const a of coreStrokeAttrs(style?.stroke, registry)) attrs.push(a);
   if (node.opacity != null && node.opacity !== 1) {
     attrs.push(`opacity="${trimNumber(node.opacity)}"`);
   }
@@ -1239,7 +1398,7 @@ function runXml(run, registry) {
   const attrs = [];
   if (run.bold) attrs.push(`font-weight="700"`);
   if (run.italic) attrs.push(`font-style="italic"`);
-  if (run.fontFamily) attrs.push(`font-family="${escapeAttr(run.fontFamily)}"`);
+  if (run.fontFamily) attrs.push(`font-family="${escapeAttr2(run.fontFamily)}"`);
   if (run.fontSize != null) attrs.push(`font-size="${trimNumber(run.fontSize)}"`);
   if (run.letterSpacing != null) {
     attrs.push(`letter-spacing="${trimNumber(run.letterSpacing)}"`);
@@ -1254,6 +1413,7 @@ function runXml(run, registry) {
       attrs.push(`fill="url(#${id})"`);
     }
   }
+  for (const a of coreStrokeAttrs(run.stroke, registry)) attrs.push(a);
   const head = attrs.length > 0 ? `<tspan ${attrs.join(" ")}>` : "<tspan>";
   return `${head}${escapeText(run.text)}</tspan>`;
 }
@@ -1263,7 +1423,7 @@ function textDecorationValue(underline, strikethrough) {
   if (strikethrough) tokens.push("line-through");
   return tokens.length > 0 ? tokens.join(" ") : null;
 }
-function escapeAttr(s) {
+function escapeAttr2(s) {
   return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
 }
 function escapeText(s) {
@@ -1430,6 +1590,6 @@ async function unpackSvgFiles(files, ctx) {
   }
 }
 
-export { IDENTITY_MATRIX, parseSvg, serializeSvg, svgNodesToKitDrafts, unpackSvgFiles };
+export { IDENTITY_MATRIX, parseSvg, serializeSvg, svgNodesToKitDrafts, tilePreviewCssUrl, tilePreviewSvg, unpackSvgFiles };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map