emf-converter 4.8.1 → 4.8.2

package/README.md

@@ -217,7 +217,7 @@ Everything is measured against output painted by Windows itself; `src/gdi-parity
 - **Colour adjustment and image effects**: all eleven EMF+ image effects are supported. Complete native tables cover every legal ColorCurve intensity. Deferred draws retain their effects. JPEG, GIF and TIFF have bundled decoders for environments without Canvas. HSL, tint, red-eye, blur, sharpen and GDI colour adjustment retain measured differences; see [the detailed limitations](docs/limitations.md) and the native fixture bounds.
 - **Pen transforms**: EMF+ pen transforms (uniform, nonuniform and skewed) match GDI+ exactly on the 17 pen-transform fixtures, including dashes, which GDI+ lays out along the path in world space at the untransformed pen width. Native fixtures verify dashes under both uniform and non-uniform scales. GDI+ rejects singular pen transforms; the converter ignores such malformed transform data. Square, round, diamond and arrow anchor caps use their native shapes; the new centered-cap fixtures match every pixel with and without antialiasing.
 - **Text**: ANSI, multi-string and small-text records now render; the Windows text fixtures retain a few glyph-edge differences and a `PolyTextOut` C1 control-glyph difference (under 0.1% of pixels; bounds in `src/emf-text-records.fixture.test.ts`). ANSI decoding uses the host's `TextDecoder` for common Windows code pages; Johab and OEM CP437 use bundled Windows mappings. Vertical `ETO_PDY` advances work with and without the `fonts` engine. Without `fonts`, SVG text measurements use deterministic estimates, so precise justification requires supplying the matching fonts.
-- **Wide pens and paths**: flat-capped GDI pens 7 px and wider can differ by a few pixels at round joins, and dashed wide Bezier curves follow `WidenPath` (which Windows' direct drawing does not quite match); at most 0.2% of pixels on the fixtures. `EMR_WIDENPATH` does not reproduce the extra inner join triangles GDI's own `WidenPath` emits (visible only when the widened outline is itself stroked). EMF+ 1-pixel antialiased lines can differ by one antialiasing sample at their ends, some closed widened outlines by one sample along an edge, and Inset or compound pens on closed figures are approximate.
+- **Wide pens and paths**: flat-capped GDI pens 7 px and wider can differ by a few pixels at round joins, and dashed wide curves follow `WidenPath` (exact for round and flat caps at one logical unit per pixel; square caps differ slightly at path ends); at most 0.2% of pixels on the fixtures. `EMR_WIDENPATH` does not reproduce the extra inner join triangles GDI's own `WidenPath` emits (visible only when the widened outline is itself stroked). EMF+ 1-pixel antialiased lines can differ by one antialiasing sample at their ends, some closed widened outlines by one sample along an edge, and Inset or compound pens on closed figures are approximate.
 - **GM_COMPATIBLE recordings**: EMF files do not record the graphics mode, and Windows plays RoundRect, Arc, Chord, Pie and null-pen Ellipse records back differently from how a GM_COMPATIBLE application drew them on screen; the converter follows Windows' playback.
 - **Small EMF+ residuals**: rotated `HighQualityBicubic` `DrawImage` edge pixels (0.14%), one-level differences at exact half-level `Blend` knots, and a few pixels of a metafile nested in `DrawImage` under a scale.
 - **WMF**: `PS_INSIDEFRAME` boxes can come out a pixel short at non-integer scales, right-to-left (`LAYOUT_RTL`) layouts differ by single pixels on mirrored diagonals, and metric map modes assume a 96 dpi reference device (Windows derives them from the physical display, so its own output varies per machine).

package/dist/browser.js

@@ -29228,9 +29228,9 @@ function perpendicularVectors(width, dx0, dy0) {
   const vx = rounded[0], vy = rounded[1];
   return { v: flip ? [-vx, -vy] : [vx, vy], ray: flip ? [-x, -y] : [x, y] };
 }
-function squareExtension(width, dx, dy) {
+function squareExtension(width, dx, dy, scale = 1) {
   const len = Math.hypot(dx, dy);
-  const r = width / 2;
+  const r = width / 2 * scale;
   return [Math.floor(dx / len * r + 0.5), Math.floor(dy / len * r + 0.5)];
 }
 function turnSign(ax, ay, bx, by) {
@@ -29269,7 +29269,7 @@ var Outliner = class {
     const [L, R] = drawVertices(this.pen, d[0], d[1]);
     const perpendicular = curve && drawDir ? drawDir : [dx, dy];
     const vectors = perpendicularVectors(this.opts.width, perpendicular[0], perpendicular[1]);
-    return { dx, dy, L, R, v: vectors.v, vRaw: vectors.ray, e: squareExtension(this.opts.width, perpendicular[0], perpendicular[1]), curveEnd: !!drawDir, tangentLength: drawDir ? drawDir[0] * drawDir[0] + drawDir[1] * drawDir[1] : 0, curve };
+    return { dx, dy, L, R, v: vectors.v, vRaw: vectors.ray, e: squareExtension(this.opts.width, perpendicular[0], perpendicular[1]), pe: [perpendicular[0], perpendicular[1]], curveEnd: !!drawDir, tangentLength: drawDir ? drawDir[0] * drawDir[0] + drawDir[1] * drawDir[1] : 0, curve };
   }
   push(p, v) {
     this.pts.push([p[0] + v[0], p[1] + v[1]]);
@@ -29364,7 +29364,7 @@ var Outliner = class {
     return side === "R" ? s.v : [-s.v[0], -s.v[1]];
   }
   /** A cap at `p` from the `from` side of `s` round to the other side (`start`: around the back). */
-  cap(p, s, start) {
+  cap(p, s, start, scale = 1) {
     const from = start ? "L" : "R";
     const to = start ? "R" : "L";
     const { cap } = this.opts;
@@ -29382,7 +29382,8 @@ var Outliner = class {
     const sv = this.capSide(s, from);
     const ev = this.capSide(s, to);
     if (cap === "square") {
-      const e = start ? [-s.e[0], -s.e[1]] : s.e;
+      const e0 = scale === 1 ? s.e : squareExtension(this.opts.width, s.pe[0], s.pe[1], scale);
+      const e = start ? [-e0[0], -e0[1]] : e0;
       this.push(p, [sv[0] + e[0], sv[1] + e[1]]);
       this.push(p, [ev[0] + e[0], ev[1] + e[1]]);
     } else {
@@ -29478,7 +29479,7 @@ var Outliner = class {
    * lets a single point stand for a zero-length dash along `dirs[0]`;
    * `draws` (curve end tangents) picks draw vertices only.
    */
-  open(P, dirs, draws, curves) {
+  open(P, dirs, draws, curves, startScale = 1, endScale = 1) {
     if (P.length < 2 && !dirs?.[0]) {
       this.dot(P[0]);
       return;
@@ -29489,12 +29490,12 @@ var Outliner = class {
     }
     if (segs2.length === 0) {
       const s = this.seg(P[0], P[0], dirs?.[0], draws?.[0], curves?.[0]);
-      this.cap(P[0], s, true);
-      this.cap(P[0], s, false);
+      this.cap(P[0], s, true, startScale);
+      this.cap(P[0], s, false, endScale);
       this.flush();
       return;
     }
-    this.cap(P[0], segs2[0], true);
+    this.cap(P[0], segs2[0], true, startScale);
     for (let i = 0; i + 1 < segs2.length; i++) {
       const s = segs2[i];
       const t = segs2[i + 1];
@@ -29505,7 +29506,7 @@ var Outliner = class {
         this.join(P[i + 1], s, t, "R", tr < 0);
       }
     }
-    this.cap(P[P.length - 1], segs2[segs2.length - 1], false);
+    this.cap(P[P.length - 1], segs2[segs2.length - 1], false, endScale);
     for (let i = segs2.length - 1; i > 0; i--) {
       const s = segs2[i];
       const t = segs2[i - 1];
@@ -29561,7 +29562,7 @@ var Outliner = class {
     this.flush();
   }
 };
-function dashPieces(P, tangents, pattern, shorten) {
+function dashPieces(P, tangents, curveFlags, pattern, shorten, wholePixelVectors) {
   const out = [];
   const dashes = [];
   for (let i = 0; i < pattern.length; i += 2) {
@@ -29576,12 +29577,22 @@ function dashPieces(P, tangents, pattern, shorten) {
   let idx = 0;
   let left = dashes[0];
   let on = true;
-  let cur = { pts: [P[0]], dirs: [], draws: [] };
+  let cur = { pts: [P[0]], dirs: [], draws: [], curves: [], startScale: 1, endScale: 1 };
   for (let i = 0; i + 1 < P.length; i++) {
     const [x0, y0] = P[i];
     const [x1, y1] = P[i + 1];
     const dir = [x1 - x0, y1 - y0];
-    const len = Math.hypot(dir[0], dir[1]);
+    const real = Math.hypot(dir[0], dir[1]);
+    const len = wholePixelVectors ? Math.hypot(Math.floor(dir[0] / 16), Math.floor(dir[1] / 16)) * 16 : Math.hypot(dir[0], dir[1]);
+    if (len === 0) {
+      if (on && cur) {
+        cur.pts.push(P[i + 1]);
+        cur.dirs.push(dir);
+        cur.draws.push(tangents[i]);
+        cur.curves.push(curveFlags[i]);
+      }
+      continue;
+    }
     let t = 0;
     while (len - t > left || left === 0 && on) {
       t += left;
@@ -29590,10 +29601,12 @@ function dashPieces(P, tangents, pattern, shorten) {
         cur.pts.push(q);
         cur.dirs.push(dir);
         cur.draws.push(tangents[i]);
+        cur.curves.push(curveFlags[i]);
+        cur.endScale = cur.pts[0] === P[0] && q[0] === P[0][0] && q[1] === P[0][1] ? 1 : real / len;
         out.push(cur);
         cur = null;
       } else {
-        cur = { pts: [q], dirs: [], draws: [] };
+        cur = { pts: [q], dirs: [], draws: [], curves: [], startScale: real / len, endScale: 1 };
       }
       on = !on;
       idx = (idx + 1) % dashes.length;
@@ -29604,9 +29617,12 @@ function dashPieces(P, tangents, pattern, shorten) {
       cur.pts.push(P[i + 1]);
       cur.dirs.push(dir);
       cur.draws.push(tangents[i]);
+      cur.curves.push(curveFlags[i]);
+      cur.endScale = real / len;
     }
   }
   if (on && cur && cur.dirs.length > 0) {
+    cur.endScale = 1;
     out.push(cur);
   }
   return out;
@@ -29641,10 +29657,13 @@ function widenPath(path, opts) {
     if (dashed) {
       const run = closed ? [...P, P[0]] : P;
       const shorten = opts.cap === "flat" || opts.shortenDashes === false ? 0 : opts.width;
-      for (const piece of dashPieces(run, closed ? [...dirs, void 0] : dirs, opts.dashes, shorten)) {
+      const runTangents = closed ? [...dirs, void 0] : dirs;
+      const runCurves = closed ? [...curves, !!fig.roundWiden] : curves;
+      for (const piece of dashPieces(run, runTangents, runCurves, opts.dashes, shorten, !!opts.wholePixelDashVectors)) {
         const pts = [piece.pts[0]];
         const pdirs = [];
         const pdraws = [];
+        const pcurves = [];
         for (let i = 1; i < piece.pts.length; i++) {
           const q = piece.pts[i];
           const last = pts[pts.length - 1];
@@ -29652,9 +29671,10 @@ function widenPath(path, opts) {
             pts.push(q);
             pdirs.push(piece.dirs[i - 1]);
             pdraws.push(piece.draws[i - 1]);
+            pcurves.push(piece.curves[i - 1]);
           }
         }
-        outliner.open(pts, pdirs.length > 0 ? pdirs : [piece.dirs[0]], pdirs.length > 0 ? pdraws : [piece.draws[0]], pts.map(() => !!fig.roundWiden));
+        outliner.open(pts, pdirs.length > 0 ? pdirs : [piece.dirs[0]], pdirs.length > 0 ? pdraws : [piece.draws[0]], pdirs.length > 0 ? pcurves : [piece.curves[0]], piece.startScale, piece.endScale);
       }
     } else if (closed && P.length >= 3) {
       outliner.closed(P, dirs, curves);
@@ -29862,7 +29882,10 @@ function penWidenOptions(rCtx, opts = {}) {
     join: opts.roundPen ? "round" : opts.rectangle && !state.penExtended ? "miter" : !state.penExtended || joinBits === 0 ? "round" : joinBits === 4096 ? "bevel" : "miter",
     miterLimit: state.miterLimit ?? 10,
     dashes: dashes ? dashes.map((v) => v * 16) : null,
-    shortenDashes: (flags & 15) !== 7
+    shortenDashes: (flags & 15) !== 7,
+    // One logical unit per device pixel, unrotated: GDI measures dash
+    // segments in whole pixels.
+    wholePixelDashVectors: Math.abs(matrix[0] - 1) < 1e-6 && Math.abs(matrix[3] - 1) < 1e-6 && Math.abs(matrix[1]) < 1e-6 && Math.abs(matrix[2]) < 1e-6
   };
 }
 function hatchBackgroundMask(hatch) {

package/dist/browser.mjs

@@ -29226,9 +29226,9 @@ function perpendicularVectors(width, dx0, dy0) {
   const vx = rounded[0], vy = rounded[1];
   return { v: flip ? [-vx, -vy] : [vx, vy], ray: flip ? [-x, -y] : [x, y] };
 }
-function squareExtension(width, dx, dy) {
+function squareExtension(width, dx, dy, scale = 1) {
   const len = Math.hypot(dx, dy);
-  const r = width / 2;
+  const r = width / 2 * scale;
   return [Math.floor(dx / len * r + 0.5), Math.floor(dy / len * r + 0.5)];
 }
 function turnSign(ax, ay, bx, by) {
@@ -29267,7 +29267,7 @@ var Outliner = class {
     const [L, R] = drawVertices(this.pen, d[0], d[1]);
     const perpendicular = curve && drawDir ? drawDir : [dx, dy];
     const vectors = perpendicularVectors(this.opts.width, perpendicular[0], perpendicular[1]);
-    return { dx, dy, L, R, v: vectors.v, vRaw: vectors.ray, e: squareExtension(this.opts.width, perpendicular[0], perpendicular[1]), curveEnd: !!drawDir, tangentLength: drawDir ? drawDir[0] * drawDir[0] + drawDir[1] * drawDir[1] : 0, curve };
+    return { dx, dy, L, R, v: vectors.v, vRaw: vectors.ray, e: squareExtension(this.opts.width, perpendicular[0], perpendicular[1]), pe: [perpendicular[0], perpendicular[1]], curveEnd: !!drawDir, tangentLength: drawDir ? drawDir[0] * drawDir[0] + drawDir[1] * drawDir[1] : 0, curve };
   }
   push(p, v) {
     this.pts.push([p[0] + v[0], p[1] + v[1]]);
@@ -29362,7 +29362,7 @@ var Outliner = class {
     return side === "R" ? s.v : [-s.v[0], -s.v[1]];
   }
   /** A cap at `p` from the `from` side of `s` round to the other side (`start`: around the back). */
-  cap(p, s, start) {
+  cap(p, s, start, scale = 1) {
     const from = start ? "L" : "R";
     const to = start ? "R" : "L";
     const { cap } = this.opts;
@@ -29380,7 +29380,8 @@ var Outliner = class {
     const sv = this.capSide(s, from);
     const ev = this.capSide(s, to);
     if (cap === "square") {
-      const e = start ? [-s.e[0], -s.e[1]] : s.e;
+      const e0 = scale === 1 ? s.e : squareExtension(this.opts.width, s.pe[0], s.pe[1], scale);
+      const e = start ? [-e0[0], -e0[1]] : e0;
       this.push(p, [sv[0] + e[0], sv[1] + e[1]]);
       this.push(p, [ev[0] + e[0], ev[1] + e[1]]);
     } else {
@@ -29476,7 +29477,7 @@ var Outliner = class {
    * lets a single point stand for a zero-length dash along `dirs[0]`;
    * `draws` (curve end tangents) picks draw vertices only.
    */
-  open(P, dirs, draws, curves) {
+  open(P, dirs, draws, curves, startScale = 1, endScale = 1) {
     if (P.length < 2 && !dirs?.[0]) {
       this.dot(P[0]);
       return;
@@ -29487,12 +29488,12 @@ var Outliner = class {
     }
     if (segs2.length === 0) {
       const s = this.seg(P[0], P[0], dirs?.[0], draws?.[0], curves?.[0]);
-      this.cap(P[0], s, true);
-      this.cap(P[0], s, false);
+      this.cap(P[0], s, true, startScale);
+      this.cap(P[0], s, false, endScale);
       this.flush();
       return;
     }
-    this.cap(P[0], segs2[0], true);
+    this.cap(P[0], segs2[0], true, startScale);
     for (let i = 0; i + 1 < segs2.length; i++) {
       const s = segs2[i];
       const t = segs2[i + 1];
@@ -29503,7 +29504,7 @@ var Outliner = class {
         this.join(P[i + 1], s, t, "R", tr < 0);
       }
     }
-    this.cap(P[P.length - 1], segs2[segs2.length - 1], false);
+    this.cap(P[P.length - 1], segs2[segs2.length - 1], false, endScale);
     for (let i = segs2.length - 1; i > 0; i--) {
       const s = segs2[i];
       const t = segs2[i - 1];
@@ -29559,7 +29560,7 @@ var Outliner = class {
     this.flush();
   }
 };
-function dashPieces(P, tangents, pattern, shorten) {
+function dashPieces(P, tangents, curveFlags, pattern, shorten, wholePixelVectors) {
   const out = [];
   const dashes = [];
   for (let i = 0; i < pattern.length; i += 2) {
@@ -29574,12 +29575,22 @@ function dashPieces(P, tangents, pattern, shorten) {
   let idx = 0;
   let left = dashes[0];
   let on = true;
-  let cur = { pts: [P[0]], dirs: [], draws: [] };
+  let cur = { pts: [P[0]], dirs: [], draws: [], curves: [], startScale: 1, endScale: 1 };
   for (let i = 0; i + 1 < P.length; i++) {
     const [x0, y0] = P[i];
     const [x1, y1] = P[i + 1];
     const dir = [x1 - x0, y1 - y0];
-    const len = Math.hypot(dir[0], dir[1]);
+    const real = Math.hypot(dir[0], dir[1]);
+    const len = wholePixelVectors ? Math.hypot(Math.floor(dir[0] / 16), Math.floor(dir[1] / 16)) * 16 : Math.hypot(dir[0], dir[1]);
+    if (len === 0) {
+      if (on && cur) {
+        cur.pts.push(P[i + 1]);
+        cur.dirs.push(dir);
+        cur.draws.push(tangents[i]);
+        cur.curves.push(curveFlags[i]);
+      }
+      continue;
+    }
     let t = 0;
     while (len - t > left || left === 0 && on) {
       t += left;
@@ -29588,10 +29599,12 @@ function dashPieces(P, tangents, pattern, shorten) {
         cur.pts.push(q);
         cur.dirs.push(dir);
         cur.draws.push(tangents[i]);
+        cur.curves.push(curveFlags[i]);
+        cur.endScale = cur.pts[0] === P[0] && q[0] === P[0][0] && q[1] === P[0][1] ? 1 : real / len;
         out.push(cur);
         cur = null;
       } else {
-        cur = { pts: [q], dirs: [], draws: [] };
+        cur = { pts: [q], dirs: [], draws: [], curves: [], startScale: real / len, endScale: 1 };
       }
       on = !on;
       idx = (idx + 1) % dashes.length;
@@ -29602,9 +29615,12 @@ function dashPieces(P, tangents, pattern, shorten) {
       cur.pts.push(P[i + 1]);
       cur.dirs.push(dir);
       cur.draws.push(tangents[i]);
+      cur.curves.push(curveFlags[i]);
+      cur.endScale = real / len;
     }
   }
   if (on && cur && cur.dirs.length > 0) {
+    cur.endScale = 1;
     out.push(cur);
   }
   return out;
@@ -29639,10 +29655,13 @@ function widenPath(path, opts) {
     if (dashed) {
       const run = closed ? [...P, P[0]] : P;
       const shorten = opts.cap === "flat" || opts.shortenDashes === false ? 0 : opts.width;
-      for (const piece of dashPieces(run, closed ? [...dirs, void 0] : dirs, opts.dashes, shorten)) {
+      const runTangents = closed ? [...dirs, void 0] : dirs;
+      const runCurves = closed ? [...curves, !!fig.roundWiden] : curves;
+      for (const piece of dashPieces(run, runTangents, runCurves, opts.dashes, shorten, !!opts.wholePixelDashVectors)) {
         const pts = [piece.pts[0]];
         const pdirs = [];
         const pdraws = [];
+        const pcurves = [];
         for (let i = 1; i < piece.pts.length; i++) {
           const q = piece.pts[i];
           const last = pts[pts.length - 1];
@@ -29650,9 +29669,10 @@ function widenPath(path, opts) {
             pts.push(q);
             pdirs.push(piece.dirs[i - 1]);
             pdraws.push(piece.draws[i - 1]);
+            pcurves.push(piece.curves[i - 1]);
           }
         }
-        outliner.open(pts, pdirs.length > 0 ? pdirs : [piece.dirs[0]], pdirs.length > 0 ? pdraws : [piece.draws[0]], pts.map(() => !!fig.roundWiden));
+        outliner.open(pts, pdirs.length > 0 ? pdirs : [piece.dirs[0]], pdirs.length > 0 ? pdraws : [piece.draws[0]], pdirs.length > 0 ? pcurves : [piece.curves[0]], piece.startScale, piece.endScale);
       }
     } else if (closed && P.length >= 3) {
       outliner.closed(P, dirs, curves);
@@ -29860,7 +29880,10 @@ function penWidenOptions(rCtx, opts = {}) {
     join: opts.roundPen ? "round" : opts.rectangle && !state.penExtended ? "miter" : !state.penExtended || joinBits === 0 ? "round" : joinBits === 4096 ? "bevel" : "miter",
     miterLimit: state.miterLimit ?? 10,
     dashes: dashes ? dashes.map((v) => v * 16) : null,
-    shortenDashes: (flags & 15) !== 7
+    shortenDashes: (flags & 15) !== 7,
+    // One logical unit per device pixel, unrotated: GDI measures dash
+    // segments in whole pixels.
+    wholePixelDashVectors: Math.abs(matrix[0] - 1) < 1e-6 && Math.abs(matrix[3] - 1) < 1e-6 && Math.abs(matrix[1]) < 1e-6 && Math.abs(matrix[2]) < 1e-6
   };
 }
 function hatchBackgroundMask(hatch) {

package/dist/index.js

@@ -29229,9 +29229,9 @@ function perpendicularVectors(width, dx0, dy0) {
   const vx = rounded[0], vy = rounded[1];
   return { v: flip ? [-vx, -vy] : [vx, vy], ray: flip ? [-x, -y] : [x, y] };
 }
-function squareExtension(width, dx, dy) {
+function squareExtension(width, dx, dy, scale = 1) {
   const len = Math.hypot(dx, dy);
-  const r = width / 2;
+  const r = width / 2 * scale;
   return [Math.floor(dx / len * r + 0.5), Math.floor(dy / len * r + 0.5)];
 }
 function turnSign(ax, ay, bx, by) {
@@ -29270,7 +29270,7 @@ var Outliner = class {
     const [L, R] = drawVertices(this.pen, d[0], d[1]);
     const perpendicular = curve && drawDir ? drawDir : [dx, dy];
     const vectors = perpendicularVectors(this.opts.width, perpendicular[0], perpendicular[1]);
-    return { dx, dy, L, R, v: vectors.v, vRaw: vectors.ray, e: squareExtension(this.opts.width, perpendicular[0], perpendicular[1]), curveEnd: !!drawDir, tangentLength: drawDir ? drawDir[0] * drawDir[0] + drawDir[1] * drawDir[1] : 0, curve };
+    return { dx, dy, L, R, v: vectors.v, vRaw: vectors.ray, e: squareExtension(this.opts.width, perpendicular[0], perpendicular[1]), pe: [perpendicular[0], perpendicular[1]], curveEnd: !!drawDir, tangentLength: drawDir ? drawDir[0] * drawDir[0] + drawDir[1] * drawDir[1] : 0, curve };
   }
   push(p, v) {
     this.pts.push([p[0] + v[0], p[1] + v[1]]);
@@ -29365,7 +29365,7 @@ var Outliner = class {
     return side === "R" ? s.v : [-s.v[0], -s.v[1]];
   }
   /** A cap at `p` from the `from` side of `s` round to the other side (`start`: around the back). */
-  cap(p, s, start) {
+  cap(p, s, start, scale = 1) {
     const from = start ? "L" : "R";
     const to = start ? "R" : "L";
     const { cap } = this.opts;
@@ -29383,7 +29383,8 @@ var Outliner = class {
     const sv = this.capSide(s, from);
     const ev = this.capSide(s, to);
     if (cap === "square") {
-      const e = start ? [-s.e[0], -s.e[1]] : s.e;
+      const e0 = scale === 1 ? s.e : squareExtension(this.opts.width, s.pe[0], s.pe[1], scale);
+      const e = start ? [-e0[0], -e0[1]] : e0;
       this.push(p, [sv[0] + e[0], sv[1] + e[1]]);
       this.push(p, [ev[0] + e[0], ev[1] + e[1]]);
     } else {
@@ -29479,7 +29480,7 @@ var Outliner = class {
    * lets a single point stand for a zero-length dash along `dirs[0]`;
    * `draws` (curve end tangents) picks draw vertices only.
    */
-  open(P, dirs, draws, curves) {
+  open(P, dirs, draws, curves, startScale = 1, endScale = 1) {
     if (P.length < 2 && !dirs?.[0]) {
       this.dot(P[0]);
       return;
@@ -29490,12 +29491,12 @@ var Outliner = class {
     }
     if (segs2.length === 0) {
       const s = this.seg(P[0], P[0], dirs?.[0], draws?.[0], curves?.[0]);
-      this.cap(P[0], s, true);
-      this.cap(P[0], s, false);
+      this.cap(P[0], s, true, startScale);
+      this.cap(P[0], s, false, endScale);
       this.flush();
       return;
     }
-    this.cap(P[0], segs2[0], true);
+    this.cap(P[0], segs2[0], true, startScale);
     for (let i = 0; i + 1 < segs2.length; i++) {
       const s = segs2[i];
       const t = segs2[i + 1];
@@ -29506,7 +29507,7 @@ var Outliner = class {
         this.join(P[i + 1], s, t, "R", tr < 0);
       }
     }
-    this.cap(P[P.length - 1], segs2[segs2.length - 1], false);
+    this.cap(P[P.length - 1], segs2[segs2.length - 1], false, endScale);
     for (let i = segs2.length - 1; i > 0; i--) {
       const s = segs2[i];
       const t = segs2[i - 1];
@@ -29562,7 +29563,7 @@ var Outliner = class {
     this.flush();
   }
 };
-function dashPieces(P, tangents, pattern, shorten) {
+function dashPieces(P, tangents, curveFlags, pattern, shorten, wholePixelVectors) {
   const out = [];
   const dashes = [];
   for (let i = 0; i < pattern.length; i += 2) {
@@ -29577,12 +29578,22 @@ function dashPieces(P, tangents, pattern, shorten) {
   let idx = 0;
   let left = dashes[0];
   let on = true;
-  let cur = { pts: [P[0]], dirs: [], draws: [] };
+  let cur = { pts: [P[0]], dirs: [], draws: [], curves: [], startScale: 1, endScale: 1 };
   for (let i = 0; i + 1 < P.length; i++) {
     const [x0, y0] = P[i];
     const [x1, y1] = P[i + 1];
     const dir = [x1 - x0, y1 - y0];
-    const len = Math.hypot(dir[0], dir[1]);
+    const real = Math.hypot(dir[0], dir[1]);
+    const len = wholePixelVectors ? Math.hypot(Math.floor(dir[0] / 16), Math.floor(dir[1] / 16)) * 16 : Math.hypot(dir[0], dir[1]);
+    if (len === 0) {
+      if (on && cur) {
+        cur.pts.push(P[i + 1]);
+        cur.dirs.push(dir);
+        cur.draws.push(tangents[i]);
+        cur.curves.push(curveFlags[i]);
+      }
+      continue;
+    }
     let t = 0;
     while (len - t > left || left === 0 && on) {
       t += left;
@@ -29591,10 +29602,12 @@ function dashPieces(P, tangents, pattern, shorten) {
         cur.pts.push(q);
         cur.dirs.push(dir);
         cur.draws.push(tangents[i]);
+        cur.curves.push(curveFlags[i]);
+        cur.endScale = cur.pts[0] === P[0] && q[0] === P[0][0] && q[1] === P[0][1] ? 1 : real / len;
         out.push(cur);
         cur = null;
       } else {
-        cur = { pts: [q], dirs: [], draws: [] };
+        cur = { pts: [q], dirs: [], draws: [], curves: [], startScale: real / len, endScale: 1 };
       }
       on = !on;
       idx = (idx + 1) % dashes.length;
@@ -29605,9 +29618,12 @@ function dashPieces(P, tangents, pattern, shorten) {
       cur.pts.push(P[i + 1]);
       cur.dirs.push(dir);
       cur.draws.push(tangents[i]);
+      cur.curves.push(curveFlags[i]);
+      cur.endScale = real / len;
     }
   }
   if (on && cur && cur.dirs.length > 0) {
+    cur.endScale = 1;
     out.push(cur);
   }
   return out;
@@ -29642,10 +29658,13 @@ function widenPath(path, opts) {
     if (dashed) {
       const run = closed ? [...P, P[0]] : P;
       const shorten = opts.cap === "flat" || opts.shortenDashes === false ? 0 : opts.width;
-      for (const piece of dashPieces(run, closed ? [...dirs, void 0] : dirs, opts.dashes, shorten)) {
+      const runTangents = closed ? [...dirs, void 0] : dirs;
+      const runCurves = closed ? [...curves, !!fig.roundWiden] : curves;
+      for (const piece of dashPieces(run, runTangents, runCurves, opts.dashes, shorten, !!opts.wholePixelDashVectors)) {
         const pts = [piece.pts[0]];
         const pdirs = [];
         const pdraws = [];
+        const pcurves = [];
         for (let i = 1; i < piece.pts.length; i++) {
           const q = piece.pts[i];
           const last = pts[pts.length - 1];
@@ -29653,9 +29672,10 @@ function widenPath(path, opts) {
             pts.push(q);
             pdirs.push(piece.dirs[i - 1]);
             pdraws.push(piece.draws[i - 1]);
+            pcurves.push(piece.curves[i - 1]);
           }
         }
-        outliner.open(pts, pdirs.length > 0 ? pdirs : [piece.dirs[0]], pdirs.length > 0 ? pdraws : [piece.draws[0]], pts.map(() => !!fig.roundWiden));
+        outliner.open(pts, pdirs.length > 0 ? pdirs : [piece.dirs[0]], pdirs.length > 0 ? pdraws : [piece.draws[0]], pdirs.length > 0 ? pcurves : [piece.curves[0]], piece.startScale, piece.endScale);
       }
     } else if (closed && P.length >= 3) {
       outliner.closed(P, dirs, curves);
@@ -29863,7 +29883,10 @@ function penWidenOptions(rCtx, opts = {}) {
     join: opts.roundPen ? "round" : opts.rectangle && !state.penExtended ? "miter" : !state.penExtended || joinBits === 0 ? "round" : joinBits === 4096 ? "bevel" : "miter",
     miterLimit: state.miterLimit ?? 10,
     dashes: dashes ? dashes.map((v) => v * 16) : null,
-    shortenDashes: (flags & 15) !== 7
+    shortenDashes: (flags & 15) !== 7,
+    // One logical unit per device pixel, unrotated: GDI measures dash
+    // segments in whole pixels.
+    wholePixelDashVectors: Math.abs(matrix[0] - 1) < 1e-6 && Math.abs(matrix[3] - 1) < 1e-6 && Math.abs(matrix[1]) < 1e-6 && Math.abs(matrix[2]) < 1e-6
   };
 }
 function hatchBackgroundMask(hatch) {

package/dist/index.mjs

@@ -29227,9 +29227,9 @@ function perpendicularVectors(width, dx0, dy0) {
   const vx = rounded[0], vy = rounded[1];
   return { v: flip ? [-vx, -vy] : [vx, vy], ray: flip ? [-x, -y] : [x, y] };
 }
-function squareExtension(width, dx, dy) {
+function squareExtension(width, dx, dy, scale = 1) {
   const len = Math.hypot(dx, dy);
-  const r = width / 2;
+  const r = width / 2 * scale;
   return [Math.floor(dx / len * r + 0.5), Math.floor(dy / len * r + 0.5)];
 }
 function turnSign(ax, ay, bx, by) {
@@ -29268,7 +29268,7 @@ var Outliner = class {
     const [L, R] = drawVertices(this.pen, d[0], d[1]);
     const perpendicular = curve && drawDir ? drawDir : [dx, dy];
     const vectors = perpendicularVectors(this.opts.width, perpendicular[0], perpendicular[1]);
-    return { dx, dy, L, R, v: vectors.v, vRaw: vectors.ray, e: squareExtension(this.opts.width, perpendicular[0], perpendicular[1]), curveEnd: !!drawDir, tangentLength: drawDir ? drawDir[0] * drawDir[0] + drawDir[1] * drawDir[1] : 0, curve };
+    return { dx, dy, L, R, v: vectors.v, vRaw: vectors.ray, e: squareExtension(this.opts.width, perpendicular[0], perpendicular[1]), pe: [perpendicular[0], perpendicular[1]], curveEnd: !!drawDir, tangentLength: drawDir ? drawDir[0] * drawDir[0] + drawDir[1] * drawDir[1] : 0, curve };
   }
   push(p, v) {
     this.pts.push([p[0] + v[0], p[1] + v[1]]);
@@ -29363,7 +29363,7 @@ var Outliner = class {
     return side === "R" ? s.v : [-s.v[0], -s.v[1]];
   }
   /** A cap at `p` from the `from` side of `s` round to the other side (`start`: around the back). */
-  cap(p, s, start) {
+  cap(p, s, start, scale = 1) {
     const from = start ? "L" : "R";
     const to = start ? "R" : "L";
     const { cap } = this.opts;
@@ -29381,7 +29381,8 @@ var Outliner = class {
     const sv = this.capSide(s, from);
     const ev = this.capSide(s, to);
     if (cap === "square") {
-      const e = start ? [-s.e[0], -s.e[1]] : s.e;
+      const e0 = scale === 1 ? s.e : squareExtension(this.opts.width, s.pe[0], s.pe[1], scale);
+      const e = start ? [-e0[0], -e0[1]] : e0;
       this.push(p, [sv[0] + e[0], sv[1] + e[1]]);
       this.push(p, [ev[0] + e[0], ev[1] + e[1]]);
     } else {
@@ -29477,7 +29478,7 @@ var Outliner = class {
    * lets a single point stand for a zero-length dash along `dirs[0]`;
    * `draws` (curve end tangents) picks draw vertices only.
    */
-  open(P, dirs, draws, curves) {
+  open(P, dirs, draws, curves, startScale = 1, endScale = 1) {
     if (P.length < 2 && !dirs?.[0]) {
       this.dot(P[0]);
       return;
@@ -29488,12 +29489,12 @@ var Outliner = class {
     }
     if (segs2.length === 0) {
       const s = this.seg(P[0], P[0], dirs?.[0], draws?.[0], curves?.[0]);
-      this.cap(P[0], s, true);
-      this.cap(P[0], s, false);
+      this.cap(P[0], s, true, startScale);
+      this.cap(P[0], s, false, endScale);
       this.flush();
       return;
     }
-    this.cap(P[0], segs2[0], true);
+    this.cap(P[0], segs2[0], true, startScale);
     for (let i = 0; i + 1 < segs2.length; i++) {
       const s = segs2[i];
       const t = segs2[i + 1];
@@ -29504,7 +29505,7 @@ var Outliner = class {
         this.join(P[i + 1], s, t, "R", tr < 0);
       }
     }
-    this.cap(P[P.length - 1], segs2[segs2.length - 1], false);
+    this.cap(P[P.length - 1], segs2[segs2.length - 1], false, endScale);
     for (let i = segs2.length - 1; i > 0; i--) {
       const s = segs2[i];
       const t = segs2[i - 1];
@@ -29560,7 +29561,7 @@ var Outliner = class {
     this.flush();
   }
 };
-function dashPieces(P, tangents, pattern, shorten) {
+function dashPieces(P, tangents, curveFlags, pattern, shorten, wholePixelVectors) {
   const out = [];
   const dashes = [];
   for (let i = 0; i < pattern.length; i += 2) {
@@ -29575,12 +29576,22 @@ function dashPieces(P, tangents, pattern, shorten) {
   let idx = 0;
   let left = dashes[0];
   let on = true;
-  let cur = { pts: [P[0]], dirs: [], draws: [] };
+  let cur = { pts: [P[0]], dirs: [], draws: [], curves: [], startScale: 1, endScale: 1 };
   for (let i = 0; i + 1 < P.length; i++) {
     const [x0, y0] = P[i];
     const [x1, y1] = P[i + 1];
     const dir = [x1 - x0, y1 - y0];
-    const len = Math.hypot(dir[0], dir[1]);
+    const real = Math.hypot(dir[0], dir[1]);
+    const len = wholePixelVectors ? Math.hypot(Math.floor(dir[0] / 16), Math.floor(dir[1] / 16)) * 16 : Math.hypot(dir[0], dir[1]);
+    if (len === 0) {
+      if (on && cur) {
+        cur.pts.push(P[i + 1]);
+        cur.dirs.push(dir);
+        cur.draws.push(tangents[i]);
+        cur.curves.push(curveFlags[i]);
+      }
+      continue;
+    }
     let t = 0;
     while (len - t > left || left === 0 && on) {
       t += left;
@@ -29589,10 +29600,12 @@ function dashPieces(P, tangents, pattern, shorten) {
         cur.pts.push(q);
         cur.dirs.push(dir);
         cur.draws.push(tangents[i]);
+        cur.curves.push(curveFlags[i]);
+        cur.endScale = cur.pts[0] === P[0] && q[0] === P[0][0] && q[1] === P[0][1] ? 1 : real / len;
         out.push(cur);
         cur = null;
       } else {
-        cur = { pts: [q], dirs: [], draws: [] };
+        cur = { pts: [q], dirs: [], draws: [], curves: [], startScale: real / len, endScale: 1 };
       }
       on = !on;
       idx = (idx + 1) % dashes.length;
@@ -29603,9 +29616,12 @@ function dashPieces(P, tangents, pattern, shorten) {
       cur.pts.push(P[i + 1]);
       cur.dirs.push(dir);
       cur.draws.push(tangents[i]);
+      cur.curves.push(curveFlags[i]);
+      cur.endScale = real / len;
     }
   }
   if (on && cur && cur.dirs.length > 0) {
+    cur.endScale = 1;
     out.push(cur);
   }
   return out;
@@ -29640,10 +29656,13 @@ function widenPath(path, opts) {
     if (dashed) {
       const run = closed ? [...P, P[0]] : P;
       const shorten = opts.cap === "flat" || opts.shortenDashes === false ? 0 : opts.width;
-      for (const piece of dashPieces(run, closed ? [...dirs, void 0] : dirs, opts.dashes, shorten)) {
+      const runTangents = closed ? [...dirs, void 0] : dirs;
+      const runCurves = closed ? [...curves, !!fig.roundWiden] : curves;
+      for (const piece of dashPieces(run, runTangents, runCurves, opts.dashes, shorten, !!opts.wholePixelDashVectors)) {
         const pts = [piece.pts[0]];
         const pdirs = [];
         const pdraws = [];
+        const pcurves = [];
         for (let i = 1; i < piece.pts.length; i++) {
           const q = piece.pts[i];
           const last = pts[pts.length - 1];
@@ -29651,9 +29670,10 @@ function widenPath(path, opts) {
             pts.push(q);
             pdirs.push(piece.dirs[i - 1]);
             pdraws.push(piece.draws[i - 1]);
+            pcurves.push(piece.curves[i - 1]);
           }
         }
-        outliner.open(pts, pdirs.length > 0 ? pdirs : [piece.dirs[0]], pdirs.length > 0 ? pdraws : [piece.draws[0]], pts.map(() => !!fig.roundWiden));
+        outliner.open(pts, pdirs.length > 0 ? pdirs : [piece.dirs[0]], pdirs.length > 0 ? pdraws : [piece.draws[0]], pdirs.length > 0 ? pcurves : [piece.curves[0]], piece.startScale, piece.endScale);
       }
     } else if (closed && P.length >= 3) {
       outliner.closed(P, dirs, curves);
@@ -29861,7 +29881,10 @@ function penWidenOptions(rCtx, opts = {}) {
     join: opts.roundPen ? "round" : opts.rectangle && !state.penExtended ? "miter" : !state.penExtended || joinBits === 0 ? "round" : joinBits === 4096 ? "bevel" : "miter",
     miterLimit: state.miterLimit ?? 10,
     dashes: dashes ? dashes.map((v) => v * 16) : null,
-    shortenDashes: (flags & 15) !== 7
+    shortenDashes: (flags & 15) !== 7,
+    // One logical unit per device pixel, unrotated: GDI measures dash
+    // segments in whole pixels.
+    wholePixelDashVectors: Math.abs(matrix[0] - 1) < 1e-6 && Math.abs(matrix[3] - 1) < 1e-6 && Math.abs(matrix[1]) < 1e-6 && Math.abs(matrix[2]) < 1e-6
   };
 }
 function hatchBackgroundMask(hatch) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "emf-converter",
-	"version": "4.8.1",
+	"version": "4.8.2",
 	"description": "Convert EMF/WMF metafile binaries to PNG data URLs or SVG (markup, data URL, React/JSX)",
 	"keywords": [
 		"canvas",