From 2e5bd80cdbb9ce6f36355e1c34b8c8a64411cd68 Mon Sep 17 00:00:00 2001
From: k1w1 <chris@aha.io>
Date: Thu, 18 Apr 2024 17:02:55 -0700
Subject: [PATCH] Add hack to prevent incorrectly scaled stroke

---
 context.js           | 3 +++
 package.json         | 2 +-
 test/tests/path2D.js | 7 +++----
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/context.js b/context.js
index 004c1d1..e9433f0 100644
--- a/context.js
+++ b/context.js
@@ -779,6 +779,8 @@ export default (function () {
       var pathElement = this.__createPathElement();
       this.__applyStyleToElement(pathElement, action);
       pathElement.setAttribute("paint-order", "fill stroke markers");
+      // This is a hack to replicate the behavior of Fabric. 
+      pathElement.setAttribute("vector-effect", "non-scaling-stroke");
       pathElement.setAttribute("d", path.__pathString);
       if (path2d) {
         this.__applyTransformation(pathElement);
@@ -790,6 +792,7 @@ export default (function () {
         var pathElement = this.__createPathElement();
         this.__applyStyleToElement(pathElement, action);
         pathElement.setAttribute("paint-order", "fill stroke markers");
+        pathElement.setAttribute("vector-effect", "non-scaling-stroke");
         pathElement.setAttribute("d", subPath.path.__pathString);
         if (subPath.transform) {
           this.__applyTransformation(pathElement, this.getTransform().multiply(subPath.transform));
diff --git a/package.json b/package.json
index a1a559b..82cb56b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aha-app/svgcanvas",
-  "version": "2.5.0-a14",
+  "version": "2.5.0-a15",
   "description": "svgcanvas",
   "main": "dist/svgcanvas.js",
   "scripts": {
diff --git a/test/tests/path2D.js b/test/tests/path2D.js
index 09d1aa9..8852b99 100644
--- a/test/tests/path2D.js
+++ b/test/tests/path2D.js
@@ -79,9 +79,8 @@ export default function path2D(ctx) {
   ctx.fill(path2);
   ctx.strokeStyle = "red";
 
-  let pNext = makePath(ctx);
-  // add first path, transform path, twice size, move 100,10
-  pNext.addPath(path2, new DOMMatrix([
+  let scaledPath = makePath(ctx);
+  scaledPath.addPath(path2, new DOMMatrix([
     2, 0,
     0, 1,
     0,
@@ -89,6 +88,6 @@ export default function path2D(ctx) {
   ]));
 
   ctx.scale(1 / 2, 1); // Reset scale so that stroke is not scaled.
-  ctx.stroke(pNext);
+  ctx.stroke(scaledPath);
   ctx.restore();
 }