@weasel-js/svg 1.4.2 → 1.4.4

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';
@@ -166,8 +171,11 @@ interface SvgTextNode {
      * in `data.fill` / `data.stroke`. Not `SvgPaint`, which is the path
      * nodes' shape — a text paint reaches the renderer through the runs, and
      * `StyledRun.fill` / `.stroke` override these per range.
+     *
+     * `null` is SVG's `fill="none"`: outline-only text, painted by its stroke
+     * alone. Absent takes the default black.
      */
-    fill?: FillStyle;
+    fill?: FillStyle | null;
     stroke?: Stroke;
     /** Element-level opacity (`opacity="..."`), 0..1. */
     opacity?: number;

package/dist/index.js

@@ -1,4 +1,4 @@
-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, PATH_C, PATH_Q, solid, fillToBoundsFrame, resolveTextStyle, getPaintKind } from '@weasel-js/core';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 
 // src/parse.ts
@@ -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) {
@@ -1249,7 +1252,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");
@@ -1297,7 +1300,7 @@ function parseTextElement(el, ctm, style, gradients, onWarn) {
   );
   if (hasStyling) node.runs = runs;
   if (Object.keys(textStyle).length > 0) node.style = textStyle;
-  if (textPaint.fill != null) node.fill = textPaint.fill;
+  if (textPaint.fill !== void 0) node.fill = textPaint.fill;
   if (textPaint.stroke != null) node.stroke = textPaint.stroke;
   if (opacity != null) node.opacity = opacity;
   if (!isIdentity(localTransform)) {
@@ -1357,7 +1360,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 +1397,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) {
@@ -1404,9 +1407,11 @@ function readTextPaint(style, gradients, onWarn) {
     } else if (parsed?.kind === "ref") {
       const paint = gradients.get(parsed.id);
       if (paint) out.fill = paint;
+    } else if (parsed?.kind === "none") {
+      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;
 }
@@ -1606,20 +1611,25 @@ 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) {
-  if (!stroke) return [];
-  const width = resolveStrokeWidth(stroke.width ?? 1, 1);
-  if (!(width > 0)) return [];
+  const paint = stroke?.paint;
+  if (!stroke || !paint) return [];
+  const width = stroke.width ?? 1;
+  if (!((typeof width === "object" ? width.px : 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)}"`);
+  if ("color" in paint) {
+    attrs.push(`stroke="${paint.color}"`);
+    if (paint.opacity != null && paint.opacity !== 1) {
+      attrs.push(`stroke-opacity="${trimNumber(paint.opacity)}"`);
     }
   } else {
-    attrs.push(`stroke="url(#${registry.register(stroke.paint)})"`);
+    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) {
@@ -1642,7 +1652,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)}"`);
@@ -1735,7 +1745,9 @@ function textXml(node, registry, namespaces) {
   }
   const decoration = textDecorationValue(style?.underline, style?.strikethrough, style?.overline);
   if (decoration) attrs.push(`text-decoration="${decoration}"`);
-  if (node.fill) {
+  if (node.fill === null) {
+    attrs.push('fill="none"');
+  } else if (node.fill) {
     if ("color" in node.fill) {
       attrs.push(`fill="${node.fill.color}"`);
       if (node.fill.opacity != null && node.fill.opacity !== 1) {
@@ -1855,6 +1867,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) => {
@@ -1886,12 +1913,26 @@ function svgNodesToKitDrafts(nodes, nextId) {
         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;
     }
@@ -1943,8 +1984,12 @@ function textBoxWidth(n) {
 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 }
   };
 }