@weasel-js/svg 1.15.1 → 1.16.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Affine } from '@weasel-js/geom';
 export { pathToD as serializePathD } from '@weasel-js/geom';
-import { Path, Paint, ScreenLength, StrokeAlign, MarkerRef, VertexWidth, StrokeNib, BooleanShapeOp, StyledRun, TextStyle, TextVerticalAlign, Fill, Stroke, PoseLinear, MarkerEntry, TextPoseLayout, RenderNeeds, TilePatternSpec, IngestCtx, Inherit, ImageNodeData, NodeClip } from '@weasel-js/core';
+import { Path, Paint, ScreenLength, StrokeAlign, MarkerRef, VertexWidth, StrokeNib, Stroke, BooleanShapeOp, StyledRun, TextStyle, TextVerticalAlign, Fill, PoseLinear, MarkerEntry, TextPoseLayout, RenderNeeds, TilePatternSpec, IngestCtx, Inherit, ImageNodeData, NodeClip } from '@weasel-js/core';
 
 /**
  * Media Queries 4 evaluation against a fixed environment.
@@ -133,6 +133,12 @@ interface SvgStroke {
      *  more takes `width`. */
     vertexWidths?: VertexWidth[];
     nib?: StrokeNib;
+    /** The kit stroke's `trim`, measured along the path as written. SVG has no
+     *  trim, so the serializer strokes only the span it draws; `parseSvg` never sets it. */
+    trim?: Stroke['trim'];
+    /** `stroke-dashoffset`: where along its pattern the dash starts. Written for
+     *  a trimmed run that starts mid-pattern; `parseSvg` never sets it. */
+    dashOffset?: number;
 }
 /**
  * Which of a node's paints its own element sets none of, so that it takes the
@@ -463,7 +469,7 @@ declare function nativeSvgSpace(space: string | null | undefined): boolean;
  * Produce an SVG document string. The root `viewBox` is `opts.viewBox` if
  * supplied, otherwise a tight bounding box around every leaf.
  */
-declare function serializeSvg(nodes: SvgNode[], opts?: SerializeOptions): string;
+declare function serializeSvg(given: SvgNode[], opts?: SerializeOptions): string;
 
 /**
  * Escaping for the XML this package writes by hand.
@@ -562,13 +568,7 @@ declare function evaluateSupports(condition: string, opts?: SupportsOptions): bo
  */
 declare function unpackSvgFiles(files: File[], ctx: IngestCtx): Promise<void>;
 
-/**
- * The kit-to-SVG direction: scene leaves back to `SvgNode`s, the inverse of
- * `svgNodesToKitDrafts`. Each leaf is written as the built-in painter that
- * draws it would draw it — the pose baked into the geometry, box-relative
- * paints resolved into that box — so `serializeSvg` over the result shows what
- * the canvas shows.
- */
+/** A kit paint and stroke as the `SvgPaint` and `SvgStroke` an element is written with. */
 
 /** A leaf's box: where it is drawn, and the frame its box-relative paints
  *  resolve against. */
@@ -582,6 +582,22 @@ interface SvgKitPose {
      *  so a path leaf's is baked into its geometry with its rotation. */
     transform?: PoseLinear;
 }
+/** A kit paint as an `SvgPaint`. `null` is `fill="none"`; a box-relative
+ *  gradient or pattern is resolved into `box`, since the geometry it paints
+ *  is written already placed there. */
+declare function svgPaintFromKit(fill: Paint | null, box: SvgKitPose): SvgPaint;
+/** A kit `Stroke` as an `SvgStroke` — the inverse of `strokeDataFromSvg`.
+ *  One with no paint or no width draws nothing and is written as no stroke. */
+declare function svgStrokeFromKit(raw: Stroke | null | undefined, box: SvgKitPose): SvgStroke | undefined;
+
+/**
+ * The kit-to-SVG direction: scene leaves back to `SvgNode`s, the inverse of
+ * `svgNodesToKitDrafts`. Each leaf is written as the built-in painter that
+ * draws it would draw it — the pose baked into the geometry, box-relative
+ * paints resolved into that box — so `serializeSvg` over the result shows what
+ * the canvas shows.
+ */
+
 /** The leaf data the kit's path, text and image painters read — what
  *  `svgNodesToKitDrafts` writes. */
 interface SvgKitLeafData {
@@ -601,13 +617,7 @@ interface SvgKitLeafData {
     overflow?: 'visible' | 'clip';
     image?: ImageNodeData['image'];
 }
-/** A kit paint as an `SvgPaint`. `null` is `fill="none"`; a box-relative
- *  gradient or pattern is resolved into `box`, since the geometry it paints
- *  is written already placed there. */
-declare function svgPaintFromKit(fill: Paint | null, box: SvgKitPose): SvgPaint;
-/** A kit `Stroke` as an `SvgStroke` — the inverse of `strokeDataFromSvg`.
- *  One with no paint or no width draws nothing and is written as no stroke. */
-declare function svgStrokeFromKit(raw: Stroke | null | undefined, box: SvgKitPose): SvgStroke | undefined;
+
 /** Write a `kit:image` leaf as an `SvgImageNode` — the inverse of the image
  *  arm of `svgNodesToKitDrafts`. The pose is the image's box. */
 declare function svgImageFromKit(image: ImageNodeData['image'], pose: SvgKitPose): SvgImageNode;

package/dist/index.js

@@ -1,12 +1,14 @@
-import { identity, multiply, pathToD, invert, splitByClosure, fillsOpenSubpaths, rotateAboutPoint, hasOpenSubpath, worldCoords, splitSubpaths, joinPaths } from '@weasel-js/geom';
+import { identity, RAD_TO_DEG, multiply, pathToD, clamp01, DEG_TO_RAD, invert, splitByClosure, fillsOpenSubpaths, pathLengthTable, lengthAtCurve, hasOpenSubpath, worldCoords, boundsOfPath as boundsOfPath$1, splitSubpaths, rotateAboutPoint, applyToPoint, joinPaths } from '@weasel-js/geom';
 export { pathToD as serializePathD } from '@weasel-js/geom';
-import { isTileKind, boundsOfPath, transformPath, isSolidPaint, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, localizeWorldPoses, createInsertOp, fillInPoseFrame, resolveStroke, pathThroughPoseFrame, resolveFill, pathInPoseFrame, poseLinearOf, poseFrameOf, definesFrame, INHERIT, clipOutline, resolveScreenLength, pathFromD, isPatternPaint, resolveTextStyle, halfLeadingFor, numericWeight, strokeToPath, booleanGroupFields, toRuns, resolveRunFace, derivedDepOf, documentOf, booleanOpOf, DEFAULT_TEXT_FILL, parseColor, rgbaToHex, layoutRuns, resolveRuns, resolveAlign, PathBuilder, PATH_M, PATH_L, PATH_Z, scaleVertexWidth, getPaintKind, resolveMarkerSize, paragraphDirection, scriptMetricsFor, vertexHalfWidths, isImagePatternPaint, isTilePaint, tileSpecOf } from '@weasel-js/core';
+import { isTileKind, boundsOfPath, transformPath, isSolidPaint, warmFonts, warmPaintKinds, isPaintKindKnown, solid, fillToBoundsFrame, getMarker, registerMarker, dwarn, unionAABB, localizeWorldPoses, createInsertOp, fillInPoseFrame, resolveStroke, pathThroughPoseFrame, resolveFill, pathInPoseFrame, poseLinearOf, poseFrameOf, asPolygonPath, definesFrame, INHERIT, clipOutline, resolveScreenLength, pathFromD, isPatternPaint, resolveTextStyle, halfLeadingFor, numericWeight, strokeToPath, booleanGroupFields, toRuns, resolveRunFace, derivedDepOf, documentOf, booleanOpOf, DEFAULT_TEXT_FILL, parseColor, rgbaToHex, layoutRuns, resolveRuns, resolveAlign, PathBuilder, PATH_M, PATH_L, PATH_Z, scaleVertexWidth, getPaintKind, resolveMarkerSize, paragraphDirection, scriptMetricsFor, vertexHalfWidths, isImagePatternPaint, isTilePaint, tileSpecOf } from '@weasel-js/core';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
+import { trimSpan, trimmedPath, trimmedRuns } from '@weasel-js/stroke';
 
 // src/types.ts
 var IDENTITY_MATRIX = identity();
 function applyMatrix(m, x, y) {
-  return { x: m[0] * x + m[2] * y + m[4], y: m[1] * x + m[3] * y + m[5] };
+  const [px, py] = applyToPoint(m, x, y);
+  return { x: px, y: py };
 }
 function isIdentity(m, eps = 1e-9) {
   return Math.abs(m[0] - 1) < eps && Math.abs(m[1]) < eps && Math.abs(m[2]) < eps && Math.abs(m[3] - 1) < eps && Math.abs(m[4]) < eps && Math.abs(m[5]) < eps;
@@ -42,7 +44,7 @@ function parseTransform(attr, onWarn) {
       const sy = nums.length >= 2 ? nums[1] : sx;
       local = [sx, 0, 0, sy, 0, 0];
     } else if (name === "rotate") {
-      const ang = (nums[0] ?? 0) * Math.PI / 180;
+      const ang = (nums[0] ?? 0) * DEG_TO_RAD;
       const c = Math.cos(ang);
       const s = Math.sin(ang);
       const rot = [c, s, -s, c, 0, 0];
@@ -54,7 +56,7 @@ function parseTransform(attr, onWarn) {
         local = rot;
       }
     } else if (name === "skewx" || name === "skewy") {
-      const ang = (nums[0] ?? 0) * Math.PI / 180;
+      const ang = (nums[0] ?? 0) * DEG_TO_RAD;
       const t = Math.tan(ang);
       local = name === "skewx" ? [1, 0, t, 1, 0, 0] : [1, t, 0, 1, 0, 0];
     } else {
@@ -773,7 +775,6 @@ function dimension(v) {
   const m = DIMENSION2.exec(v);
   return m ? { n: Number(m[1]), unit: m[2].toLowerCase() } : void 0;
 }
-var clamp01 = (n) => n < 0 ? 0 : n > 1 ? 1 : n;
 function pxPer(unit, fontSize) {
   if (unit === "") return 1;
   const ems = emsPer(unit);
@@ -1377,7 +1378,7 @@ function boxTransformAttr(node) {
   if (!node.rotation) return null;
   const cx = node.x + node.width / 2;
   const cy = node.y + node.height / 2;
-  const deg = node.rotation * 180 / Math.PI;
+  const deg = node.rotation * RAD_TO_DEG;
   return `transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`;
 }
 
@@ -1439,8 +1440,6 @@ function toggle(node, key) {
   if (node[key]) delete node[key];
   else node[key] = true;
 }
-
-// src/patterns.ts
 function patternXml(id, paint, onWarn) {
   if (isImagePatternPaint(paint)) return imagePatternXml(id, paint, onWarn);
   if (!isTilePaint(paint)) {
@@ -1500,7 +1499,7 @@ function shapeXml(shape) {
     case "circle":
       return `<circle cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" r="${trimNumber(shape.r)}" fill="${escapeAttr(shape.color)}"/>`;
     case "ellipse": {
-      const deg = shape.rotation * 180 / Math.PI;
+      const deg = shape.rotation * RAD_TO_DEG;
       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="${escapeAttr(shape.color)}"${transform}/>`;
     }
@@ -1566,8 +1565,6 @@ function readPlacement(el, onWarn) {
   if (!isIdentity([m[0], m[1], m[2], m[3], 0, 0])) placement.transform = [m[0], m[1], m[2], m[3]];
   return placement;
 }
-
-// src/gradients.ts
 var WEASEL_NS = "urn:weasel-js:svg";
 var WEASEL_NS_PREFIX = "wzl";
 function nativeSvgKind(kind) {
@@ -1888,7 +1885,7 @@ function defaultMarkerXml(id, entry, onWarn, key, size) {
   const d = pathToD(path);
   const fill = markerPaintAttrs("fill", entry.fill, id, onWarn);
   const outline = entry.outline ? ` ${markerPaintAttrs("stroke", entry.outline.paint, id, onWarn)} stroke-width="${trimNumber(entry.outline.width * unit)}" stroke-linecap="round" stroke-linejoin="round"` : "";
-  const orient = typeof entry.orient === "number" ? trimNumber(entry.orient * 180 / Math.PI) : "auto-start-reverse";
+  const orient = typeof entry.orient === "number" ? trimNumber(entry.orient * RAD_TO_DEG) : "auto-start-reverse";
   const units = size === void 0 ? 'markerUnits="strokeWidth" markerWidth="8" markerHeight="8"' : `markerUnits="userSpaceOnUse" markerWidth="${trimNumber(8 * unit)}" markerHeight="${trimNumber(8 * unit)}" ${WEASEL_NS_PREFIX}:key="${escapeAttr(name)}" ${WEASEL_NS_PREFIX}:size="${typeof size === "number" ? trimNumber(size) : `${trimNumber(size.px)}px`}"`;
   const inset = writesInset(entry) ? ` ${WEASEL_NS_PREFIX}:inset="${trimNumber(entry.inset)}"` : "";
   return `<marker id="${id}" ${units}${inset} refX="0" refY="0" orient="${orient}" overflow="visible"><path d="${d}" ${fill}${outline}/></marker>`;
@@ -2295,7 +2292,8 @@ function strokeOutlineXml(path, stroke, fillAttrs, transform) {
     ...stroke.align ? { align: stroke.align } : {},
     ...stroke.markerStart ? { markerStart: stroke.markerStart } : {},
     ...stroke.markerMid ? { markerMid: stroke.markerMid } : {},
-    ...stroke.markerEnd ? { markerEnd: stroke.markerEnd } : {}
+    ...stroke.markerEnd ? { markerEnd: stroke.markerEnd } : {},
+    ...stroke.trim ? { trim: stroke.trim } : {}
   };
   const outline = strokeToPath(path, kit);
   const attrs = [`d="${pathToD(outline)}"`, ...fillAttrs, 'stroke="none"'];
@@ -3277,7 +3275,7 @@ function markerOrient(raw) {
   if (!m) return { orient: 0, reverseAtStart: false };
   const n = parseFloat(m[1]);
   const unit = (m[2] ?? "deg").toLowerCase();
-  const rad = unit === "rad" ? n : unit === "grad" ? n * Math.PI / 200 : unit === "turn" ? n * 2 * Math.PI : n * Math.PI / 180;
+  const rad = unit === "rad" ? n : unit === "grad" ? n * Math.PI / 200 : unit === "turn" ? n * 2 * Math.PI : n * DEG_TO_RAD;
   return { orient: rad, reverseAtStart: false };
 }
 function markerPaint(style, attr, gradients, onWarn) {
@@ -3824,12 +3822,15 @@ function pathAsSvgDraws(node) {
     const { stroke: _stroke, ...rest } = node;
     return { ...rest, fill: only.fill, ...only.stroke ? { stroke: only.stroke } : {} };
   }
-  const group = {
-    kind: "group",
-    children: pieces.map((p) => ({ kind: "path", path: p.path, fill: p.fill, ...p.stroke ? { stroke: p.stroke } : {} }))
-  };
+  return drawsAsGroup(
+    node,
+    pieces.map((p) => ({ kind: "path", path: p.path, fill: p.fill, ...p.stroke ? { stroke: p.stroke } : {} }))
+  );
+}
+function drawsAsGroup(node, children) {
+  const group = { kind: "group", children };
   if (node.rotation != null && node.rotation !== 0) {
-    const b = pathBounds(path);
+    const b = pathBounds(node.path);
     group.transform = rotateAboutPoint((b.minX + b.maxX) / 2, (b.minY + b.maxY) / 2, node.rotation);
   }
   if (node.opacity != null) group.opacity = node.opacity;
@@ -3911,6 +3912,7 @@ function strokeAttrsFor(stroke, registry, warn) {
   }
   if (stroke.dash && stroke.dash.length > 0) {
     attrs.push(`stroke-dasharray="${stroke.dash.map(trimNumber).join(" ")}"`);
+    if (stroke.dashOffset) attrs.push(`stroke-dashoffset="${trimNumber(stroke.dashOffset)}"`);
   }
   if (stroke.miterLimit != null) {
     attrs.push(`stroke-miterlimit="${trimNumber(stroke.miterLimit)}"`);
@@ -3983,6 +3985,44 @@ function fitLeafXml(xml, inherits, painted) {
     return `<${name}${attrs}${resets.map((n) => ` ${n}="${INITIAL[n]}"`).join("")}${close2}>`;
   });
 }
+var NONE = { kind: "none" };
+function withTrimDrawn(node) {
+  const { stroke, inherits: _inherits, ...rest } = node;
+  if (!stroke || stroke.trim === void 0 || hasVariableWidth(stroke)) return node;
+  const { trim, ...own2 } = stroke;
+  const bare = own2.paint.kind === "gradient" ? { ...own2, paint: { ...own2.paint, paint: fillInPoseFrame(own2.paint.paint, boundsOfPath$1(node.path)) } } : own2;
+  const cut = trimmedPath(node.path, trim);
+  const children = [
+    ...node.fill.kind === "none" ? [] : [{ kind: "path", path: node.path, fill: node.fill }],
+    ...cut ? strokeRuns(cut, bare) : []
+  ];
+  if (children.length === 0) return null;
+  if (children.length === 1 && !node.rotation) return { ...rest, ...children[0] };
+  return drawsAsGroup(node, children);
+}
+function withTrimsDrawn(nodes) {
+  const out = [];
+  for (const n of nodes) {
+    const drawn = n.kind === "path" ? withTrimDrawn(n) : n.kind === "group" ? { ...n, children: withTrimsDrawn(n.children) } : n;
+    if (drawn) out.push(drawn);
+  }
+  return out;
+}
+function strokeRuns(cut, stroke) {
+  const dashed = (stroke.dash?.length ?? 0) > 0;
+  return trimmedRuns(cut, dashed, true).map(({ path, dashPhase, fromClosed }) => {
+    const s = fromClosed ? withoutEndMarkers(stroke) : stroke;
+    return { kind: "path", path, fill: NONE, stroke: dashed && dashPhase > 0 ? { ...s, dashOffset: dashPhase } : s };
+  });
+}
+var NOTHING = { start: 1, end: 0 };
+function strokeTrimOnPath(stroke, local, drawn) {
+  if (stroke.trim === void 0) return stroke;
+  const span = trimSpan(local, stroke.trim);
+  if (!span) return { ...stroke, trim: NOTHING };
+  const table = pathLengthTable(drawn);
+  return { ...stroke, trim: { start: { length: lengthAtCurve(table, span.from) }, end: { length: lengthAtCurve(table, span.to) } } };
+}
 function textXml(node, registry, namespaces, warn, given) {
   const layout = given && layoutMeasured(given, node.text) ? given : null;
   const resolved = resolveTextStyle(node.style);
@@ -4145,13 +4185,12 @@ function prettyXml(xml) {
   }
   return lines.join("\n");
 }
-
-// src/serialize.ts
 var NOTHING_PAINTED = /* @__PURE__ */ new Set();
-function serializeSvg(nodes, opts = {}) {
+function serializeSvg(given, opts = {}) {
   const registry = new PaintServerRegistry();
+  const nodes = withTrimsDrawn(given);
   registerPaintServers(nodes, registry);
-  const bounds = opts.viewBox ?? computeBounds(nodes);
+  const bounds = opts.viewBox ?? computeBounds(given);
   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"`];
@@ -4304,7 +4343,7 @@ function rotationAttr(node) {
   const b = pathBounds(node.path);
   const cx = b.minX + (b.maxX - b.minX) / 2;
   const cy = b.minY + (b.maxY - b.minY) / 2;
-  const deg = node.rotation * 180 / Math.PI;
+  const deg = node.rotation * RAD_TO_DEG;
   return `transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`;
 }
 function svgNeeds(nodes, opts = {}) {
@@ -4393,7 +4432,8 @@ function strokeDataFromSvg(stroke, box) {
     ...stroke.markerMid !== void 0 ? { markerMid: stroke.markerMid } : {},
     ...stroke.markerEnd !== void 0 ? { markerEnd: stroke.markerEnd } : {},
     ...stroke.vertexWidths !== void 0 ? { vertexWidths: stroke.vertexWidths } : {},
-    ...stroke.nib !== void 0 ? { nib: stroke.nib } : {}
+    ...stroke.nib !== void 0 ? { nib: stroke.nib } : {},
+    ...stroke.trim !== void 0 ? { trim: stroke.trim } : {}
   };
 }
 function fillInBoxFrame(fill, box) {
@@ -4699,9 +4739,12 @@ function svgStrokeFromKit(raw, box) {
     ...stroke.markerMid !== void 0 ? { markerMid: stroke.markerMid } : {},
     ...stroke.markerEnd !== void 0 ? { markerEnd: stroke.markerEnd } : {},
     ...stroke.vertexWidths?.length ? { vertexWidths: stroke.vertexWidths } : {},
-    ...stroke.nib ? { nib: stroke.nib } : {}
+    ...stroke.nib ? { nib: stroke.nib } : {},
+    ...stroke.trim !== void 0 ? { trim: stroke.trim } : {}
   };
 }
+
+// src/fromKit.ts
 function svgImageFromKit(image, pose) {
   const node = {
     kind: "image",
@@ -4750,9 +4793,10 @@ function svgLeafFromKit(data, pose) {
   if (stroke) node.stroke = stroke;
   const frame = poseLinearOf(pose) && poseFrameOf(pose);
   if (frame) {
-    node.path = pathThroughPoseFrame(node.path, pose);
+    const local = node.path;
+    node.path = pathThroughPoseFrame(stroke?.trim ? asPolygonPath(local) : local, pose);
     node.fill = paintThroughMatrix(node.fill, frame);
-    if (stroke) node.stroke = strokeThroughMatrix(stroke, frame);
+    if (stroke) node.stroke = strokeTrimOnPath(strokeThroughMatrix(stroke, frame), local, node.path);
   } else if (pose.rotation) node.rotation = pose.rotation;
   return node;
 }