@emasoft/svg-matrix 1.3.2 → 1.3.4

package/dist/version.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.3.2",
-  "buildTime": "2026-01-10T15:48:31.859Z",
+  "version": "1.3.4",
+  "buildTime": "2026-01-25T12:44:06.936Z",
   "bundles": {
     "esm": [
       {
@@ -11,14 +11,14 @@
       },
       {
         "name": "svg-toolbox.min.js",
-        "size": 577127,
-        "gzipSize": 152269,
+        "size": 577298,
+        "gzipSize": 152361,
         "description": "ESM bundle for bundlers/Node.js (includes decimal.js)"
       },
       {
         "name": "svgm.min.js",
-        "size": 602429,
-        "gzipSize": 159416,
+        "size": 602600,
+        "gzipSize": 159489,
         "description": "ESM bundle for bundlers/Node.js (includes decimal.js)"
       }
     ],
@@ -31,8 +31,8 @@
       },
       {
         "name": "svg-toolbox.global.min.js",
-        "size": 577256,
-        "gzipSize": 151638,
+        "size": 577427,
+        "gzipSize": 151728,
         "description": "IIFE bundle for browsers via <script> (includes decimal.js)"
       },
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emasoft/svg-matrix",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Arbitrary-precision matrix, vector and affine transformation library for JavaScript using decimal.js",
   "type": "module",
   "main": "src/index.js",

package/src/index.js

@@ -5,7 +5,7 @@
  * SVG path conversion, and 2D/3D affine transformations using Decimal.js.
  *
  * @module @emasoft/svg-matrix
- * @version 1.3.2
+ * @version 1.3.4
  * @license MIT
  *
  * @example
@@ -135,7 +135,7 @@ Decimal.set({ precision: 80 });
  * Library version
  * @constant {string}
  */
-export const VERSION = "1.3.2";
+export const VERSION = "1.3.4";
 
 /**
  * Default precision for path output (decimal places)

package/src/marker-resolver.js

@@ -378,6 +378,12 @@ export function getMarkerTransform(
   }
 
   // Step 4: Apply viewBox transformation if present
+  // BUG FIX: When viewBox has non-zero origin, the refX/refY are in viewBox coordinates.
+  // We must convert them to viewport coordinates before applying the ref translation.
+  // Transform chain: T_position * R * T(-ref_viewport) * S * T(-viewBox.origin)
+  let hasViewBox = false;
+  let viewBoxScaleFactor = 1;
+
   if (viewBox) {
     // Calculate scale factors to fit viewBox into marker viewport
     const vbWidth = viewBox.width;
@@ -397,30 +403,47 @@ export function getMarkerTransform(
       // Validate scale factors are finite
       if (isFinite(scaleFactorX) && isFinite(scaleFactorY)) {
         // For now, use uniform scaling (can be enhanced with full preserveAspectRatio parsing)
-        const scaleFactor = Math.min(scaleFactorX, scaleFactorY);
-
-        scaleX *= scaleFactor;
-        scaleY *= scaleFactor;
+        viewBoxScaleFactor = Math.min(scaleFactorX, scaleFactorY);
+        hasViewBox = true;
 
-        // Translate to account for viewBox origin
-        const viewBoxTranslate = Transforms2D.translation(
-          -viewBox.x,
-          -viewBox.y,
-        );
-        transform = transform.mul(viewBoxTranslate);
+        scaleX *= viewBoxScaleFactor;
+        scaleY *= viewBoxScaleFactor;
       }
     }
   }
 
-  // Apply combined scaling
-  if (scaleX !== 1 || scaleY !== 1) {
-    const scale = Transforms2D.scale(scaleX, scaleY);
-    transform = transform.mul(scale);
-  }
+  if (hasViewBox) {
+    // When viewBox is present, refX/refY are in viewBox coordinates.
+    // Convert to viewport (marker) coordinates by:
+    // 1. Subtract viewBox origin to get position relative to viewBox
+    // 2. Scale by viewBox scale factor to get position in marker viewport
+    const refViewportX = (refX - viewBox.x) * viewBoxScaleFactor;
+    const refViewportY = (refY - viewBox.y) * viewBoxScaleFactor;
+
+    // Apply ref translation in viewport coordinates (BEFORE scaling in the chain)
+    const refTranslate = Transforms2D.translation(-refViewportX, -refViewportY);
+    transform = transform.mul(refTranslate);
+
+    // Apply combined scaling
+    if (scaleX !== 1 || scaleY !== 1) {
+      const scale = Transforms2D.scale(scaleX, scaleY);
+      transform = transform.mul(scale);
+    }
+
+    // Apply viewBox origin translation (AFTER scaling, so it scales correctly)
+    const viewBoxTranslate = Transforms2D.translation(-viewBox.x, -viewBox.y);
+    transform = transform.mul(viewBoxTranslate);
+  } else {
+    // No viewBox: apply scaling then ref translation in original coordinates
+    if (scaleX !== 1 || scaleY !== 1) {
+      const scale = Transforms2D.scale(scaleX, scaleY);
+      transform = transform.mul(scale);
+    }
 
-  // Step 5: Translate by -refX, -refY
-  const refTranslate = Transforms2D.translation(-refX, -refY);
-  transform = transform.mul(refTranslate);
+    // Step 5: Translate by -refX, -refY
+    const refTranslate = Transforms2D.translation(-refX, -refY);
+    transform = transform.mul(refTranslate);
+  }
 
   return transform;
 }

package/src/off-canvas-detection.js

@@ -1564,8 +1564,10 @@ export function clipPathToViewBox(pathCommands, viewBox) {
             continue;
           }
 
-          const x = D(cmd.x);
-          const y = D(cmd.y);
+          // BUG FIX: Handle relative coordinates (lowercase 'm')
+          const isRelative = cmd.type === cmd.type.toLowerCase();
+          const x = isRelative ? currentX.plus(D(cmd.x)) : D(cmd.x);
+          const y = isRelative ? currentY.plus(D(cmd.y)) : D(cmd.y);
 
           // Only add move if point is inside bounds
           if (pointInBBox({ x, y }, bounds)) {
@@ -1587,8 +1589,10 @@ export function clipPathToViewBox(pathCommands, viewBox) {
             continue;
           }
 
-          const x = D(cmd.x);
-          const y = D(cmd.y);
+          // BUG FIX: Handle relative coordinates (lowercase 'l')
+          const isRelative = cmd.type === cmd.type.toLowerCase();
+          const x = isRelative ? currentX.plus(D(cmd.x)) : D(cmd.x);
+          const y = isRelative ? currentY.plus(D(cmd.y)) : D(cmd.y);
 
           // Clip line segment
           const clipped = clipLine(
@@ -1629,7 +1633,9 @@ export function clipPathToViewBox(pathCommands, viewBox) {
             continue;
           }
 
-          const x = D(cmd.x);
+          // BUG FIX: Handle relative coordinates (lowercase 'h')
+          const isRelative = cmd.type === cmd.type.toLowerCase();
+          const x = isRelative ? currentX.plus(D(cmd.x)) : D(cmd.x);
           const clipped = clipLine(
             { x: currentX, y: currentY },
             { x, y: currentY },
@@ -1665,7 +1671,9 @@ export function clipPathToViewBox(pathCommands, viewBox) {
             continue;
           }
 
-          const y = D(cmd.y);
+          // BUG FIX: Handle relative coordinates (lowercase 'v')
+          const isRelative = cmd.type === cmd.type.toLowerCase();
+          const y = isRelative ? currentY.plus(D(cmd.y)) : D(cmd.y);
           const clipped = clipLine(
             { x: currentX, y: currentY },
             { x: currentX, y },
@@ -1708,8 +1716,10 @@ export function clipPathToViewBox(pathCommands, viewBox) {
           // BUG FIX: Sample the curve to better approximate clipping
           // A full implementation would clip curves exactly, but sampling provides
           // a reasonable approximation (WHY: curves can extend outside bounds even if endpoints are inside)
-          const x = D(cmd.x);
-          const y = D(cmd.y);
+          // BUG FIX: Handle relative coordinates (lowercase 'c', 's', 'q', 't', 'a')
+          const isRelative = cmd.type === cmd.type.toLowerCase();
+          const x = isRelative ? currentX.plus(D(cmd.x)) : D(cmd.x);
+          const y = isRelative ? currentY.plus(D(cmd.y)) : D(cmd.y);
 
           // Sample 10 points along the curve path from current to end
           const samples = 10;

package/src/svg-matrix-lib.js

@@ -5,7 +5,7 @@
  * Works in both Node.js and browser environments.
  *
  * @module svg-matrix-lib
- * @version 1.3.2
+ * @version 1.3.4
  * @license MIT
  *
  * @example Browser usage:
@@ -32,7 +32,7 @@ Decimal.set({ precision: 80 });
 /**
  * Library version
  */
-export const VERSION = "1.3.2";
+export const VERSION = "1.3.4";
 
 // Export core classes
 export { Decimal, Matrix, Vector };

package/src/svg-toolbox-lib.js

@@ -5,7 +5,7 @@
  * Provides 69+ operations for cleaning, optimizing, and transforming SVG files.
  *
  * @module svg-toolbox-lib
- * @version 1.3.2
+ * @version 1.3.4
  * @license MIT
  *
  * @example Browser usage:
@@ -34,7 +34,7 @@ import * as SVGToolboxModule from "./svg-toolbox.js";
 /**
  * Library version
  */
-export const VERSION = "1.3.2";
+export const VERSION = "1.3.4";
 
 /**
  * Default export for browser global (window.SVGToolbox)

package/src/svgm-lib.js

@@ -5,7 +5,7 @@
  * comprehensive SVG manipulation (SVGToolbox). Works in Node.js and browser.
  *
  * @module svgm-lib
- * @version 1.3.2
+ * @version 1.3.4
  * @license MIT
  *
  * @example Browser usage:
@@ -49,7 +49,7 @@ Decimal.set({ precision: 80 });
 /**
  * Library version
  */
-export const VERSION = "1.3.2";
+export const VERSION = "1.3.4";
 
 // Export math classes
 export { Decimal, Matrix, Vector };

package/src/transform-decomposition.js

@@ -294,7 +294,15 @@ export function decomposeMatrix(matrix) {
   }
 
   // Calculate rotation angle from first column
-  const rotation = Decimal.atan2(b, a);
+  // BUG FIX: When scaleX is negative (reflection), we must compute rotation from negated
+  // column vector to separate the reflection component from the rotation component.
+  // Without this fix, X-flip matrix(-1,0,0,1,0,0) gives rotation=π instead of 0.
+  let rotation;
+  if (scaleX.lessThan(0)) {
+    rotation = Decimal.atan2(b.neg(), a.neg());
+  } else {
+    rotation = Decimal.atan2(b, a);
+  }
 
   // Calculate skew
   // After removing rotation and scale, we get the skew