js-draw 1.3.0 → 1.3.1

package/dist/cjs/SVGLoader.js

@@ -240,29 +240,44 @@ class SVGLoader {
     // If given, 'supportedAttrs' will have x, y, etc. attributes that were used in computing the transform added to it,
     // to prevent storing duplicate transform information when saving the component.
     getTransform(elem, supportedAttrs, computedStyles) {
-        computedStyles ??= window.getComputedStyle(elem);
-        let transformProperty = computedStyles.transform;
-        if (transformProperty === '' || transformProperty === 'none') {
-            transformProperty = elem.style.transform || 'none';
-        }
-        // Prefer the actual .style.transform
-        // to the computed stylesheet -- in some browsers, the computedStyles version
-        // can have lower precision.
+        // If possible, load the js-draw specific transform attribute
+        const highpTransformAttribute = 'data-highp-transform';
+        const rawTransformData = elem.getAttribute(highpTransformAttribute);
         let transform;
-        try {
-            transform = math_1.Mat33.fromCSSMatrix(elem.style.transform);
-        }
-        catch (_e) {
-            transform = math_1.Mat33.fromCSSMatrix(transformProperty);
-        }
-        const elemX = elem.getAttribute('x');
-        const elemY = elem.getAttribute('y');
-        if (elemX || elemY) {
-            const x = parseFloat(elemX ?? '0');
-            const y = parseFloat(elemY ?? '0');
-            if (!isNaN(x) && !isNaN(y)) {
-                supportedAttrs?.push('x', 'y');
-                transform = transform.rightMul(math_1.Mat33.translation(math_1.Vec2.of(x, y)));
+        if (rawTransformData) {
+            try {
+                transform = math_1.Mat33.fromCSSMatrix(rawTransformData);
+                supportedAttrs?.push(highpTransformAttribute);
+            }
+            catch (e) {
+                console.warn(`Unable to parse raw transform data, ${rawTransformData}. Falling back to CSS data.`);
+            }
+        }
+        if (!transform) {
+            computedStyles ??= window.getComputedStyle(elem);
+            let transformProperty = computedStyles.transform;
+            if (transformProperty === '' || transformProperty === 'none') {
+                transformProperty = elem.style.transform || 'none';
+            }
+            // Prefer the actual .style.transform
+            // to the computed stylesheet -- in some browsers, the computedStyles version
+            // can have lower precision.
+            try {
+                transform = math_1.Mat33.fromCSSMatrix(elem.style.transform);
+            }
+            catch (_e) {
+                console.warn('matrix parse error', _e);
+                transform = math_1.Mat33.fromCSSMatrix(transformProperty);
+            }
+            const elemX = elem.getAttribute('x');
+            const elemY = elem.getAttribute('y');
+            if (elemX || elemY) {
+                const x = parseFloat(elemX ?? '0');
+                const y = parseFloat(elemY ?? '0');
+                if (!isNaN(x) && !isNaN(y)) {
+                    supportedAttrs?.push('x', 'y');
+                    transform = transform.rightMul(math_1.Mat33.translation(math_1.Vec2.of(x, y)));
+                }
             }
         }
         return transform;

package/dist/cjs/components/BackgroundComponent.js

@@ -165,7 +165,8 @@ class BackgroundComponent extends AbstractComponent_1.default {
     }
     generateGridPath(visibleRect) {
         const contentBBox = this.getFullBoundingBox(visibleRect);
-        const targetRect = visibleRect?.grownBy(this.gridStrokeWidth)?.intersection(contentBBox) ?? contentBBox;
+        // .grownBy acts on all sides, so we need only grow by strokeWidth / 2 (1 * the stroke radius)
+        const targetRect = (visibleRect?.intersection(contentBBox) ?? contentBBox).grownBy(this.gridStrokeWidth / 2);
         const roundDownToGrid = (coord) => Math.floor(coord / this.gridSize) * this.gridSize;
         const roundUpToGrid = (coord) => Math.ceil(coord / this.gridSize) * this.gridSize;
         const startY = roundUpToGrid(targetRect.y);

package/dist/cjs/rendering/renderers/SVGRenderer.js

@@ -135,26 +135,18 @@ class SVGRenderer extends AbstractRenderer_1.default {
     }
     // Apply [elemTransform] to [elem]. Uses both a `matrix` and `.x`, `.y` properties if `setXY` is true.
     // Otherwise, just uses a `matrix`.
-    transformFrom(elemTransform, elem, inCanvasSpace = false, setXY = true) {
-        let transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
-        const translation = transform.transformVec2(math_1.Vec2.zero);
-        if (setXY) {
-            transform = transform.rightMul(math_1.Mat33.translation(translation.times(-1)));
-        }
+    transformFrom(elemTransform, elem, inCanvasSpace = false) {
+        const transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
         if (!transform.eq(math_1.Mat33.identity)) {
-            elem.style.transform = `matrix(
-				${transform.a1}, ${transform.b1},
-				${transform.a2}, ${transform.b2},
-				${transform.a3}, ${transform.b3}
-			)`;
+            const matrixString = transform.toCSSMatrix();
+            elem.style.transform = matrixString;
+            // Most browsers round the components of CSS transforms.
+            // Include a higher precision copy of the element's transform.
+            elem.setAttribute('data-highp-transform', matrixString);
         }
         else {
             elem.style.transform = '';
         }
-        if (setXY) {
-            elem.setAttribute('x', `${(0, math_1.toRoundedString)(translation.x)}`);
-            elem.setAttribute('y', `${(0, math_1.toRoundedString)(translation.y)}`);
-        }
     }
     drawText(text, transform, style) {
         const applyTextStyles = (elem, style) => {
@@ -190,10 +182,7 @@ class SVGRenderer extends AbstractRenderer_1.default {
         if (!this.textContainer) {
             const container = document.createElementNS(svgNameSpace, 'text');
             container.appendChild(document.createTextNode(text));
-            // Don't set .x/.y properties (just use .style.transform).
-            // Child nodes aren't translated by .x/.y properties, but are by .style.transform.
-            const setXY = false;
-            this.transformFrom(transform, container, true, setXY);
+            this.transformFrom(transform, container, true);
             applyTextStyles(container, style);
             this.elem.appendChild(container);
             this.objectElems?.push(container);

package/dist/cjs/rendering/renderers/SVGRenderer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    number: '1.3.0',
+    number: '1.3.1',
 };

package/dist/mjs/SVGLoader.mjs

@@ -211,29 +211,44 @@ export default class SVGLoader {
     // If given, 'supportedAttrs' will have x, y, etc. attributes that were used in computing the transform added to it,
     // to prevent storing duplicate transform information when saving the component.
     getTransform(elem, supportedAttrs, computedStyles) {
-        computedStyles ??= window.getComputedStyle(elem);
-        let transformProperty = computedStyles.transform;
-        if (transformProperty === '' || transformProperty === 'none') {
-            transformProperty = elem.style.transform || 'none';
-        }
-        // Prefer the actual .style.transform
-        // to the computed stylesheet -- in some browsers, the computedStyles version
-        // can have lower precision.
+        // If possible, load the js-draw specific transform attribute
+        const highpTransformAttribute = 'data-highp-transform';
+        const rawTransformData = elem.getAttribute(highpTransformAttribute);
         let transform;
-        try {
-            transform = Mat33.fromCSSMatrix(elem.style.transform);
-        }
-        catch (_e) {
-            transform = Mat33.fromCSSMatrix(transformProperty);
-        }
-        const elemX = elem.getAttribute('x');
-        const elemY = elem.getAttribute('y');
-        if (elemX || elemY) {
-            const x = parseFloat(elemX ?? '0');
-            const y = parseFloat(elemY ?? '0');
-            if (!isNaN(x) && !isNaN(y)) {
-                supportedAttrs?.push('x', 'y');
-                transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
+        if (rawTransformData) {
+            try {
+                transform = Mat33.fromCSSMatrix(rawTransformData);
+                supportedAttrs?.push(highpTransformAttribute);
+            }
+            catch (e) {
+                console.warn(`Unable to parse raw transform data, ${rawTransformData}. Falling back to CSS data.`);
+            }
+        }
+        if (!transform) {
+            computedStyles ??= window.getComputedStyle(elem);
+            let transformProperty = computedStyles.transform;
+            if (transformProperty === '' || transformProperty === 'none') {
+                transformProperty = elem.style.transform || 'none';
+            }
+            // Prefer the actual .style.transform
+            // to the computed stylesheet -- in some browsers, the computedStyles version
+            // can have lower precision.
+            try {
+                transform = Mat33.fromCSSMatrix(elem.style.transform);
+            }
+            catch (_e) {
+                console.warn('matrix parse error', _e);
+                transform = Mat33.fromCSSMatrix(transformProperty);
+            }
+            const elemX = elem.getAttribute('x');
+            const elemY = elem.getAttribute('y');
+            if (elemX || elemY) {
+                const x = parseFloat(elemX ?? '0');
+                const y = parseFloat(elemY ?? '0');
+                if (!isNaN(x) && !isNaN(y)) {
+                    supportedAttrs?.push('x', 'y');
+                    transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
+                }
             }
         }
         return transform;

package/dist/mjs/components/BackgroundComponent.mjs

@@ -136,7 +136,8 @@ export default class BackgroundComponent extends AbstractComponent {
     }
     generateGridPath(visibleRect) {
         const contentBBox = this.getFullBoundingBox(visibleRect);
-        const targetRect = visibleRect?.grownBy(this.gridStrokeWidth)?.intersection(contentBBox) ?? contentBBox;
+        // .grownBy acts on all sides, so we need only grow by strokeWidth / 2 (1 * the stroke radius)
+        const targetRect = (visibleRect?.intersection(contentBBox) ?? contentBBox).grownBy(this.gridStrokeWidth / 2);
         const roundDownToGrid = (coord) => Math.floor(coord / this.gridSize) * this.gridSize;
         const roundUpToGrid = (coord) => Math.ceil(coord / this.gridSize) * this.gridSize;
         const startY = roundUpToGrid(targetRect.y);

package/dist/mjs/rendering/renderers/SVGRenderer.mjs

@@ -129,26 +129,18 @@ export default class SVGRenderer extends AbstractRenderer {
     }
     // Apply [elemTransform] to [elem]. Uses both a `matrix` and `.x`, `.y` properties if `setXY` is true.
     // Otherwise, just uses a `matrix`.
-    transformFrom(elemTransform, elem, inCanvasSpace = false, setXY = true) {
-        let transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
-        const translation = transform.transformVec2(Vec2.zero);
-        if (setXY) {
-            transform = transform.rightMul(Mat33.translation(translation.times(-1)));
-        }
+    transformFrom(elemTransform, elem, inCanvasSpace = false) {
+        const transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
         if (!transform.eq(Mat33.identity)) {
-            elem.style.transform = `matrix(
-				${transform.a1}, ${transform.b1},
-				${transform.a2}, ${transform.b2},
-				${transform.a3}, ${transform.b3}
-			)`;
+            const matrixString = transform.toCSSMatrix();
+            elem.style.transform = matrixString;
+            // Most browsers round the components of CSS transforms.
+            // Include a higher precision copy of the element's transform.
+            elem.setAttribute('data-highp-transform', matrixString);
         }
         else {
             elem.style.transform = '';
         }
-        if (setXY) {
-            elem.setAttribute('x', `${toRoundedString(translation.x)}`);
-            elem.setAttribute('y', `${toRoundedString(translation.y)}`);
-        }
     }
     drawText(text, transform, style) {
         const applyTextStyles = (elem, style) => {
@@ -184,10 +176,7 @@ export default class SVGRenderer extends AbstractRenderer {
         if (!this.textContainer) {
             const container = document.createElementNS(svgNameSpace, 'text');
             container.appendChild(document.createTextNode(text));
-            // Don't set .x/.y properties (just use .style.transform).
-            // Child nodes aren't translated by .x/.y properties, but are by .style.transform.
-            const setXY = false;
-            this.transformFrom(transform, container, true, setXY);
+            this.transformFrom(transform, container, true);
             applyTextStyles(container, style);
             this.elem.appendChild(container);
             this.objectElems?.push(container);

package/dist/mjs/rendering/renderers/SVGRenderer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.3.0',
+    number: '1.3.1',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -64,7 +64,7 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.3.0",
+    "@js-draw/math": "^1.3.1",
     "@melloware/coloris": "0.21.0"
   },
   "devDependencies": {
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "46b3d8f819f8e083f6e3e1d01e027e4311355456"
+  "gitHead": "65af7ec944f70b69b2a4b07d98e5bb92eeeca029"
 }