js-draw 1.9.0 → 1.9.1

package/dist/cjs/Editor.js

@@ -189,19 +189,30 @@ class Editor {
         this.hideLoadingWarning();
         // Enforce zoom limits.
         this.notifier.on(types_1.EditorEventType.ViewportChanged, evt => {
-            if (evt.kind === types_1.EditorEventType.ViewportChanged) {
-                const zoom = evt.newTransform.transformVec3(math_1.Vec2.unitX).length();
-                if (zoom > this.settings.maxZoom || zoom < this.settings.minZoom) {
-                    const oldZoom = evt.oldTransform.transformVec3(math_1.Vec2.unitX).length();
-                    let resetTransform = math_1.Mat33.identity;
-                    if (oldZoom <= this.settings.maxZoom && oldZoom >= this.settings.minZoom) {
-                        resetTransform = evt.oldTransform;
-                    }
-                    else {
-                        // If 1x zoom isn't acceptable, try a zoom between the minimum and maximum.
-                        resetTransform = math_1.Mat33.scaling2D((this.settings.minZoom + this.settings.maxZoom) / 2);
-                    }
-                    this.viewport.resetTransform(resetTransform);
+            if (evt.kind !== types_1.EditorEventType.ViewportChanged)
+                return;
+            const getZoom = (mat) => mat.transformVec3(math_1.Vec2.unitX).length();
+            const zoom = getZoom(evt.newTransform);
+            if (zoom > this.settings.maxZoom || zoom < this.settings.minZoom) {
+                const oldZoom = getZoom(evt.oldTransform);
+                let resetTransform = math_1.Mat33.identity;
+                if (oldZoom <= this.settings.maxZoom && oldZoom >= this.settings.minZoom) {
+                    resetTransform = evt.oldTransform;
+                }
+                else {
+                    // If 1x zoom isn't acceptable, try a zoom between the minimum and maximum.
+                    resetTransform = math_1.Mat33.scaling2D((this.settings.minZoom + this.settings.maxZoom) / 2);
+                }
+                this.viewport.resetTransform(resetTransform);
+            }
+            else if (!isFinite(zoom)) {
+                // Recover from possible division-by-zero
+                console.warn(`Non-finite zoom (${zoom}) detected. Resetting the viewport. This was likely caused by division by zero.`);
+                if (isFinite(getZoom(evt.oldTransform))) {
+                    this.viewport.resetTransform(evt.oldTransform);
+                }
+                else {
+                    this.viewport.resetTransform();
                 }
             }
         });

package/dist/cjs/Viewport.d.ts

@@ -50,6 +50,11 @@ export declare class Viewport {
     private getScaleFactorToNearestPowerOf;
     /** Returns the size of a grid cell (in canvas units) as used by {@link snapToGrid}. */
     static getGridSize(scaleFactor: number): number;
+    /**
+     * Snaps `canvasPos` to the nearest grid cell corner.
+     *
+     * @see {@link getGridSize} and {@link getScaleFactorToNearestPowerOf}.
+     */
     snapToGrid(canvasPos: Point2): Vec3;
     /** Returns the size of one screen pixel in canvas units. */
     getSizeOfPixelOnCanvas(): number;
@@ -65,6 +70,7 @@ export declare class Viewport {
      * its original location. This is useful for preparing data for base-10 conversion.
      */
     static roundPoint<T extends Point2 | number>(point: T, tolerance: number): PointDataType<T>;
+    /** Round a point with a tolerance of ±1 screen unit. */
     roundPoint(point: Point2): Point2;
     static roundScaleRatio(scaleRatio: number, roundAmount?: number): number;
     computeZoomToTransform(toMakeVisible: Rect2, allowZoomIn?: boolean, allowZoomOut?: boolean): Mat33;

package/dist/cjs/Viewport.js

@@ -104,6 +104,11 @@ class Viewport {
     static getGridSize(scaleFactor) {
         return 50 / scaleFactor;
     }
+    /**
+     * Snaps `canvasPos` to the nearest grid cell corner.
+     *
+     * @see {@link getGridSize} and {@link getScaleFactorToNearestPowerOf}.
+     */
     snapToGrid(canvasPos) {
         const scaleFactor = this.getScaleFactorToNearestPowerOf(2);
         const snapCoordinate = (coordinate) => {
@@ -140,7 +145,7 @@ class Viewport {
         }
         return point.map(roundComponent);
     }
-    // Round a point with a tolerance of ±1 screen unit.
+    /** Round a point with a tolerance of ±1 screen unit. */
     roundPoint(point) {
         return Viewport.roundPoint(point, 1 / this.getScaleFactor());
     }

package/dist/cjs/rendering/Display.js

@@ -138,6 +138,9 @@ class Display {
                 // Ensure correct drawing operations on high-resolution screens.
                 // See
                 // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#scaling_for_high_resolution_displays
+                //
+                // This scaling causes the rendering contexts to automatically convert
+                // between screen coordinates and pixel coordinates.
                 wetInkCtx.resetTransform();
                 dryInkCtx.resetTransform();
                 dryInkCtx.scale(this.devicePixelRatio, this.devicePixelRatio);
@@ -156,7 +159,11 @@ class Display {
             dryInkCtx.restore();
         };
         this.getColorAt = (screenPos) => {
-            const pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
+            // getImageData isn't affected by a transformation matrix -- we need to
+            // pre-transform screenPos to convert it from screen coordinates into pixel
+            // coordinates.
+            const adjustedScreenPos = screenPos.times(this.devicePixelRatio);
+            const pixel = dryInkCtx.getImageData(adjustedScreenPos.x, adjustedScreenPos.y, 1, 1);
             const data = pixel?.data;
             if (data) {
                 const color = math_1.Color4.ofRGBA(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);

package/dist/cjs/version.js

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

package/dist/mjs/Editor.mjs

@@ -160,19 +160,30 @@ export class Editor {
         this.hideLoadingWarning();
         // Enforce zoom limits.
         this.notifier.on(EditorEventType.ViewportChanged, evt => {
-            if (evt.kind === EditorEventType.ViewportChanged) {
-                const zoom = evt.newTransform.transformVec3(Vec2.unitX).length();
-                if (zoom > this.settings.maxZoom || zoom < this.settings.minZoom) {
-                    const oldZoom = evt.oldTransform.transformVec3(Vec2.unitX).length();
-                    let resetTransform = Mat33.identity;
-                    if (oldZoom <= this.settings.maxZoom && oldZoom >= this.settings.minZoom) {
-                        resetTransform = evt.oldTransform;
-                    }
-                    else {
-                        // If 1x zoom isn't acceptable, try a zoom between the minimum and maximum.
-                        resetTransform = Mat33.scaling2D((this.settings.minZoom + this.settings.maxZoom) / 2);
-                    }
-                    this.viewport.resetTransform(resetTransform);
+            if (evt.kind !== EditorEventType.ViewportChanged)
+                return;
+            const getZoom = (mat) => mat.transformVec3(Vec2.unitX).length();
+            const zoom = getZoom(evt.newTransform);
+            if (zoom > this.settings.maxZoom || zoom < this.settings.minZoom) {
+                const oldZoom = getZoom(evt.oldTransform);
+                let resetTransform = Mat33.identity;
+                if (oldZoom <= this.settings.maxZoom && oldZoom >= this.settings.minZoom) {
+                    resetTransform = evt.oldTransform;
+                }
+                else {
+                    // If 1x zoom isn't acceptable, try a zoom between the minimum and maximum.
+                    resetTransform = Mat33.scaling2D((this.settings.minZoom + this.settings.maxZoom) / 2);
+                }
+                this.viewport.resetTransform(resetTransform);
+            }
+            else if (!isFinite(zoom)) {
+                // Recover from possible division-by-zero
+                console.warn(`Non-finite zoom (${zoom}) detected. Resetting the viewport. This was likely caused by division by zero.`);
+                if (isFinite(getZoom(evt.oldTransform))) {
+                    this.viewport.resetTransform(evt.oldTransform);
+                }
+                else {
+                    this.viewport.resetTransform();
                 }
             }
         });

package/dist/mjs/Viewport.d.ts

@@ -50,6 +50,11 @@ export declare class Viewport {
     private getScaleFactorToNearestPowerOf;
     /** Returns the size of a grid cell (in canvas units) as used by {@link snapToGrid}. */
     static getGridSize(scaleFactor: number): number;
+    /**
+     * Snaps `canvasPos` to the nearest grid cell corner.
+     *
+     * @see {@link getGridSize} and {@link getScaleFactorToNearestPowerOf}.
+     */
     snapToGrid(canvasPos: Point2): Vec3;
     /** Returns the size of one screen pixel in canvas units. */
     getSizeOfPixelOnCanvas(): number;
@@ -65,6 +70,7 @@ export declare class Viewport {
      * its original location. This is useful for preparing data for base-10 conversion.
      */
     static roundPoint<T extends Point2 | number>(point: T, tolerance: number): PointDataType<T>;
+    /** Round a point with a tolerance of ±1 screen unit. */
     roundPoint(point: Point2): Point2;
     static roundScaleRatio(scaleRatio: number, roundAmount?: number): number;
     computeZoomToTransform(toMakeVisible: Rect2, allowZoomIn?: boolean, allowZoomOut?: boolean): Mat33;

package/dist/mjs/Viewport.mjs

@@ -97,6 +97,11 @@ export class Viewport {
     static getGridSize(scaleFactor) {
         return 50 / scaleFactor;
     }
+    /**
+     * Snaps `canvasPos` to the nearest grid cell corner.
+     *
+     * @see {@link getGridSize} and {@link getScaleFactorToNearestPowerOf}.
+     */
     snapToGrid(canvasPos) {
         const scaleFactor = this.getScaleFactorToNearestPowerOf(2);
         const snapCoordinate = (coordinate) => {
@@ -133,7 +138,7 @@ export class Viewport {
         }
         return point.map(roundComponent);
     }
-    // Round a point with a tolerance of ±1 screen unit.
+    /** Round a point with a tolerance of ±1 screen unit. */
     roundPoint(point) {
         return Viewport.roundPoint(point, 1 / this.getScaleFactor());
     }

package/dist/mjs/rendering/Display.mjs

@@ -132,6 +132,9 @@ export default class Display {
                 // Ensure correct drawing operations on high-resolution screens.
                 // See
                 // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#scaling_for_high_resolution_displays
+                //
+                // This scaling causes the rendering contexts to automatically convert
+                // between screen coordinates and pixel coordinates.
                 wetInkCtx.resetTransform();
                 dryInkCtx.resetTransform();
                 dryInkCtx.scale(this.devicePixelRatio, this.devicePixelRatio);
@@ -150,7 +153,11 @@ export default class Display {
             dryInkCtx.restore();
         };
         this.getColorAt = (screenPos) => {
-            const pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
+            // getImageData isn't affected by a transformation matrix -- we need to
+            // pre-transform screenPos to convert it from screen coordinates into pixel
+            // coordinates.
+            const adjustedScreenPos = screenPos.times(this.devicePixelRatio);
+            const pixel = dryInkCtx.getImageData(adjustedScreenPos.x, adjustedScreenPos.y, 1, 1);
             const data = pixel?.data;
             if (data) {
                 const color = Color4.ofRGBA(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.9.0',
+    number: '1.9.1',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.9.0",
+  "version": "1.9.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",
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "e824c37e9f216852cf096976e3a74fb4f177ead3"
+  "gitHead": "b4bae7b437b2ce4ba8378a062b8e3959dca0f26e"
 }