js-draw 0.25.1 → 1.0.0

package/dist/cjs/tools/PanZoom.js

@@ -1,66 +1,16 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanZoomMode = void 0;
-var Mat33_1 = require("../math/Mat33");
-var Vec2_1 = require("../math/Vec2");
-var Vec3_1 = require("../math/Vec3");
-var Pointer_1 = require("../Pointer");
-var types_1 = require("../types");
-var untilNextAnimationFrame_1 = require("../util/untilNextAnimationFrame");
-var Viewport_1 = require("../Viewport");
-var BaseTool_1 = require("./BaseTool");
-var keybindings_1 = require("./keybindings");
+const math_1 = require("@js-draw/math");
+const Pointer_1 = require("../Pointer");
+const types_1 = require("../types");
+const untilNextAnimationFrame_1 = __importDefault(require("../util/untilNextAnimationFrame"));
+const Viewport_1 = require("../Viewport");
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+const keybindings_1 = require("./keybindings");
 var PanZoomMode;
 (function (PanZoomMode) {
     PanZoomMode[PanZoomMode["OneFingerTouchGestures"] = 1] = "OneFingerTouchGestures";
@@ -70,132 +20,119 @@ var PanZoomMode;
     PanZoomMode[PanZoomMode["Keyboard"] = 16] = "Keyboard";
     PanZoomMode[PanZoomMode["RotationLocked"] = 32] = "RotationLocked";
 })(PanZoomMode || (exports.PanZoomMode = PanZoomMode = {}));
-var InertialScroller = /** @class */ (function () {
-    function InertialScroller(initialVelocity, scrollBy, onComplete) {
+class InertialScroller {
+    constructor(initialVelocity, scrollBy, onComplete) {
         this.initialVelocity = initialVelocity;
         this.scrollBy = scrollBy;
         this.onComplete = onComplete;
         this.running = false;
         this.start();
     }
-    InertialScroller.prototype.start = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var lastTime, maxSpeed, minSpeed, nowTime, dt;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (this.running) {
-                            return [2 /*return*/];
-                        }
-                        this.currentVelocity = this.initialVelocity;
-                        lastTime = (new Date()).getTime();
-                        this.running = true;
-                        maxSpeed = 5000;
-                        minSpeed = 200;
-                        if (this.currentVelocity.magnitude() > maxSpeed) {
-                            this.currentVelocity = this.currentVelocity.normalized().times(maxSpeed);
-                        }
-                        _a.label = 1;
-                    case 1:
-                        if (!(this.running && this.currentVelocity.magnitude() > minSpeed)) return [3 /*break*/, 3];
-                        nowTime = (new Date()).getTime();
-                        dt = (nowTime - lastTime) / 1000;
-                        this.currentVelocity = this.currentVelocity.times(Math.pow(1 / 8, dt));
-                        this.scrollBy(this.currentVelocity.times(dt));
-                        return [4 /*yield*/, (0, untilNextAnimationFrame_1.default)()];
-                    case 2:
-                        _a.sent();
-                        lastTime = nowTime;
-                        return [3 /*break*/, 1];
-                    case 3:
-                        if (this.running) {
-                            this.stop();
-                        }
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    InertialScroller.prototype.getCurrentVelocity = function () {
+    async start() {
+        if (this.running) {
+            return;
+        }
+        this.currentVelocity = this.initialVelocity;
+        let lastTime = performance.now();
+        this.running = true;
+        const maxSpeed = 5000; // units/s
+        const minSpeed = 200; // units/s
+        if (this.currentVelocity.magnitude() > maxSpeed) {
+            this.currentVelocity = this.currentVelocity.normalized().times(maxSpeed);
+        }
+        while (this.running && this.currentVelocity.magnitude() > minSpeed) {
+            const nowTime = performance.now();
+            const dt = (nowTime - lastTime) / 1000;
+            this.currentVelocity = this.currentVelocity.times(Math.pow(1 / 8, dt));
+            this.scrollBy(this.currentVelocity.times(dt));
+            await (0, untilNextAnimationFrame_1.default)();
+            lastTime = nowTime;
+        }
+        if (this.running) {
+            this.stop();
+        }
+    }
+    getCurrentVelocity() {
         if (!this.running) {
             return null;
         }
         return this.currentVelocity;
-    };
-    InertialScroller.prototype.stop = function () {
+    }
+    stop() {
         if (this.running) {
             this.running = false;
             this.onComplete();
         }
-    };
-    return InertialScroller;
-}());
-var PanZoom = /** @class */ (function (_super) {
-    __extends(PanZoom, _super);
-    function PanZoom(editor, mode, description) {
-        var _this = _super.call(this, editor.notifier, description) || this;
-        _this.editor = editor;
-        _this.mode = mode;
-        _this.transform = null;
-        _this.lastPointerDownTimestamp = 0;
-        _this.initialTouchAngle = 0;
-        _this.initialViewportRotation = 0;
-        _this.inertialScroller = null;
-        _this.velocity = null;
-        return _this;
+    }
+}
+class PanZoom extends BaseTool_1.default {
+    constructor(editor, mode, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.mode = mode;
+        this.transform = null;
+        this.lastPointerDownTimestamp = 0;
+        this.initialTouchAngle = 0;
+        this.initialViewportRotation = 0;
+        // Set to `true` only when scaling has started (if two fingers are down and have moved
+        // far enough).
+        this.isScaling = false;
+        this.inertialScroller = null;
+        this.velocity = null;
     }
     // Returns information about the pointers in a gesture
-    PanZoom.prototype.computePinchData = function (p1, p2) {
+    computePinchData(p1, p2) {
         // Swap the pointers to ensure consistent ordering.
         if (p1.id < p2.id) {
-            var tmp = p1;
+            const tmp = p1;
             p1 = p2;
             p2 = tmp;
         }
-        var screenBetween = p2.screenPos.minus(p1.screenPos);
-        var angle = screenBetween.angle();
-        var dist = screenBetween.magnitude();
-        var canvasCenter = p2.canvasPos.plus(p1.canvasPos).times(0.5);
-        var screenCenter = p2.screenPos.plus(p1.screenPos).times(0.5);
-        return { canvasCenter: canvasCenter, screenCenter: screenCenter, angle: angle, dist: dist };
-    };
-    PanZoom.prototype.allPointersAreOfType = function (pointers, kind) {
-        return pointers.every(function (pointer) { return pointer.device === kind; });
-    };
-    PanZoom.prototype.onPointerDown = function (_a) {
-        var _b, _c, _d, _e;
-        var pointers = _a.allPointers, currentPointer = _a.current;
-        var handlingGesture = false;
-        var inertialScrollerVelocity = (_c = (_b = this.inertialScroller) === null || _b === void 0 ? void 0 : _b.getCurrentVelocity()) !== null && _c !== void 0 ? _c : Vec2_1.Vec2.zero;
-        (_d = this.inertialScroller) === null || _d === void 0 ? void 0 : _d.stop();
+        const screenBetween = p2.screenPos.minus(p1.screenPos);
+        const angle = screenBetween.angle();
+        const dist = screenBetween.magnitude();
+        const canvasCenter = p2.canvasPos.plus(p1.canvasPos).times(0.5);
+        const screenCenter = p2.screenPos.plus(p1.screenPos).times(0.5);
+        return { canvasCenter, screenCenter, angle, dist };
+    }
+    allPointersAreOfType(pointers, kind) {
+        return pointers.every(pointer => pointer.device === kind);
+    }
+    onPointerDown({ allPointers: pointers, current: currentPointer }) {
+        let handlingGesture = false;
+        const inertialScrollerVelocity = this.inertialScroller?.getCurrentVelocity() ?? math_1.Vec2.zero;
+        this.inertialScroller?.stop();
         this.velocity = inertialScrollerVelocity;
         this.lastPointerDownTimestamp = currentPointer.timeStamp;
-        var allAreTouch = this.allPointersAreOfType(pointers, Pointer_1.PointerDevice.Touch);
-        var isRightClick = this.allPointersAreOfType(pointers, Pointer_1.PointerDevice.RightButtonMouse);
+        const allAreTouch = this.allPointersAreOfType(pointers, Pointer_1.PointerDevice.Touch);
+        const isRightClick = this.allPointersAreOfType(pointers, Pointer_1.PointerDevice.RightButtonMouse);
         if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
-            var _f = this.computePinchData(pointers[0], pointers[1]), screenCenter = _f.screenCenter, angle = _f.angle, dist = _f.dist;
+            const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
             this.lastDist = dist;
+            this.startDist = dist;
             this.lastScreenCenter = screenCenter;
             this.initialTouchAngle = angle;
             this.initialViewportRotation = this.editor.viewport.getRotationAngle();
+            this.isScaling = false;
             handlingGesture = true;
         }
         else if (pointers.length === 1 && ((this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
             || (isRightClick && this.mode & PanZoomMode.RightClickDrags)
             || (this.mode & PanZoomMode.SinglePointerGestures))) {
             this.lastScreenCenter = pointers[0].screenPos;
+            this.isScaling = false;
             handlingGesture = true;
         }
         if (handlingGesture) {
-            this.lastTimestamp = (new Date()).getTime();
-            (_e = this.transform) !== null && _e !== void 0 ? _e : (this.transform = Viewport_1.Viewport.transformBy(Mat33_1.default.identity));
+            this.lastTimestamp = performance.now();
+            this.transform ??= Viewport_1.Viewport.transformBy(math_1.Mat33.identity);
             this.editor.display.setDraftMode(true);
         }
         return handlingGesture;
-    };
-    PanZoom.prototype.updateVelocity = function (currentCenter) {
-        var deltaPos = currentCenter.minus(this.lastScreenCenter);
-        var deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
+    }
+    updateVelocity(currentCenter) {
+        const deltaPos = currentCenter.minus(this.lastScreenCenter);
+        let deltaTime = (performance.now() - this.lastTimestamp) / 1000;
         // Ignore duplicate events, unless there has been enough time between them.
         if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
             return;
@@ -206,34 +143,34 @@ var PanZoom = /** @class */ (function (_super) {
         }
         // Don't divide by almost zero, either
         deltaTime = Math.max(deltaTime, 0.01);
-        var currentVelocity = deltaPos.times(1 / deltaTime);
-        var smoothedVelocity = currentVelocity;
+        const currentVelocity = deltaPos.times(1 / deltaTime);
+        let smoothedVelocity = currentVelocity;
         if (this.velocity) {
             smoothedVelocity = this.velocity.lerp(currentVelocity, 0.5);
         }
         this.velocity = smoothedVelocity;
-    };
+    }
     // Returns the change in position of the center of the given group of pointers.
     // Assumes this.lastScreenCenter has been set appropriately.
-    PanZoom.prototype.getCenterDelta = function (screenCenter) {
+    getCenterDelta(screenCenter) {
         // Use transformVec3 to avoid translating the delta
-        var delta = this.editor.viewport.screenToCanvasTransform.transformVec3(screenCenter.minus(this.lastScreenCenter));
+        const delta = this.editor.viewport.screenToCanvasTransform.transformVec3(screenCenter.minus(this.lastScreenCenter));
         return delta;
-    };
+    }
     //  Snaps `angle` to common desired rotations. For example, if `touchAngle` corresponds
     // to a viewport rotation of 90.1 degrees, this function returns a rotation delta that,
     // when applied to the viewport, rotates the viewport to 90.0 degrees.
     //
     // Returns a snapped rotation delta that, when applied to the viewport, rotates the viewport,
     // from its position on the last touchDown event, by `touchAngle - initialTouchAngle`.
-    PanZoom.prototype.toSnappedRotationDelta = function (touchAngle) {
-        var deltaAngle = touchAngle - this.initialTouchAngle;
-        var fullRotation = deltaAngle + this.initialViewportRotation;
-        var snapToMultipleOf = Math.PI / 2;
-        var roundedFullRotation = Math.round(fullRotation / snapToMultipleOf) * snapToMultipleOf;
+    toSnappedRotationDelta(touchAngle) {
+        const deltaAngle = touchAngle - this.initialTouchAngle;
+        let fullRotation = deltaAngle + this.initialViewportRotation;
+        const snapToMultipleOf = Math.PI / 2;
+        const roundedFullRotation = Math.round(fullRotation / snapToMultipleOf) * snapToMultipleOf;
         // The maximum angle for which we snap the given angle to a multiple of
         // `snapToMultipleOf`.
-        var maxSnapAngle = 0.07;
+        const maxSnapAngle = 0.07;
         // Snap the rotation
         if (Math.abs(fullRotation - roundedFullRotation) < maxSnapAngle) {
             fullRotation = roundedFullRotation;
@@ -245,11 +182,11 @@ var PanZoom = /** @class */ (function (_super) {
             }
         }
         return fullRotation - this.editor.viewport.getRotationAngle();
-    };
-    PanZoom.prototype.handleTwoFingerMove = function (allPointers) {
-        var _a = this.computePinchData(allPointers[0], allPointers[1]), screenCenter = _a.screenCenter, canvasCenter = _a.canvasCenter, angle = _a.angle, dist = _a.dist;
-        var delta = this.getCenterDelta(screenCenter);
-        var deltaRotation;
+    }
+    handleTwoFingerMove(allPointers) {
+        const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
+        const delta = this.getCenterDelta(screenCenter);
+        let deltaRotation;
         if (this.isRotationLocked()) {
             deltaRotation = 0;
         }
@@ -257,24 +194,34 @@ var PanZoom = /** @class */ (function (_super) {
             deltaRotation = this.toSnappedRotationDelta(angle);
         }
         this.updateVelocity(screenCenter);
-        var transformUpdate = Mat33_1.default.translation(delta)
-            .rightMul(Mat33_1.default.scaling2D(dist / this.lastDist, canvasCenter))
-            .rightMul(Mat33_1.default.zRotation(deltaRotation, canvasCenter));
+        let scaleFactor = 1;
+        if (this.isScaling) {
+            scaleFactor = dist / this.lastDist;
+        }
+        else {
+            const initialScaleFactor = dist / this.startDist;
+            // Only start scaling if scaling done so far exceeds some threshold.
+            if (initialScaleFactor > 1.05 || initialScaleFactor < 0.95) {
+                scaleFactor = initialScaleFactor;
+                this.isScaling = true;
+            }
+        }
+        const transformUpdate = math_1.Mat33.translation(delta)
+            .rightMul(math_1.Mat33.scaling2D(scaleFactor, canvasCenter))
+            .rightMul(math_1.Mat33.zRotation(deltaRotation, canvasCenter));
         this.lastScreenCenter = screenCenter;
         this.lastDist = dist;
         this.transform = Viewport_1.Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
-    };
-    PanZoom.prototype.handleOneFingerMove = function (pointer) {
-        var delta = this.getCenterDelta(pointer.screenPos);
-        this.transform = Viewport_1.Viewport.transformBy(this.transform.transform.rightMul(Mat33_1.default.translation(delta)));
+    }
+    handleOneFingerMove(pointer) {
+        const delta = this.getCenterDelta(pointer.screenPos);
+        this.transform = Viewport_1.Viewport.transformBy(this.transform.transform.rightMul(math_1.Mat33.translation(delta)));
         this.updateVelocity(pointer.screenPos);
         this.lastScreenCenter = pointer.screenPos;
-    };
-    PanZoom.prototype.onPointerMove = function (_a) {
-        var _b;
-        var allPointers = _a.allPointers;
-        (_b = this.transform) !== null && _b !== void 0 ? _b : (this.transform = Viewport_1.Viewport.transformBy(Mat33_1.default.identity));
-        var lastTransform = this.transform;
+    }
+    onPointerMove({ allPointers }) {
+        this.transform ??= Viewport_1.Viewport.transformBy(math_1.Mat33.identity);
+        const lastTransform = this.transform;
         if (allPointers.length === 2) {
             this.handleTwoFingerMove(allPointers);
         }
@@ -283,27 +230,25 @@ var PanZoom = /** @class */ (function (_super) {
         }
         lastTransform.unapply(this.editor);
         this.transform.apply(this.editor);
-        this.lastTimestamp = (new Date()).getTime();
-    };
-    PanZoom.prototype.onPointerUp = function (event) {
-        var _this = this;
-        var _a;
-        var onComplete = function () {
-            if (_this.transform) {
-                _this.transform.unapply(_this.editor);
-                _this.editor.dispatch(_this.transform, false);
+        this.lastTimestamp = performance.now();
+    }
+    onPointerUp(event) {
+        const onComplete = () => {
+            if (this.transform) {
+                this.transform.unapply(this.editor);
+                this.editor.dispatch(this.transform, false);
             }
-            _this.editor.display.setDraftMode(false);
-            _this.transform = null;
-            _this.velocity = Vec2_1.Vec2.zero;
+            this.editor.display.setDraftMode(false);
+            this.transform = null;
+            this.velocity = math_1.Vec2.zero;
         };
-        var minInertialScrollDt = 30;
-        var shouldInertialScroll = event.current.device === Pointer_1.PointerDevice.Touch
+        const minInertialScrollDt = 30;
+        const shouldInertialScroll = event.current.device === Pointer_1.PointerDevice.Touch
             && event.allPointers.length === 1
             && this.velocity !== null
             && event.current.timeStamp - this.lastPointerDownTimestamp > minInertialScrollDt;
         if (shouldInertialScroll && this.velocity !== null) {
-            var oldVelocity = this.velocity;
+            const oldVelocity = this.velocity;
             // If the user drags the screen, then stops, then lifts the pointer,
             // we want the final velocity to reflect the stop at the end (so the velocity
             // should be near zero). Handle this:
@@ -318,86 +263,80 @@ var PanZoom = /** @class */ (function (_super) {
                 this.velocity = oldVelocity;
             }
             // Cancel any ongoing inertial scrolling.
-            (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
-            this.inertialScroller = new InertialScroller(this.velocity, function (scrollDelta) {
-                if (!_this.transform) {
+            this.inertialScroller?.stop();
+            this.inertialScroller = new InertialScroller(this.velocity, (scrollDelta) => {
+                if (!this.transform) {
                     return;
                 }
-                var canvasDelta = _this.editor.viewport.screenToCanvasTransform.transformVec3(scrollDelta);
+                const canvasDelta = this.editor.viewport.screenToCanvasTransform.transformVec3(scrollDelta);
                 // Scroll by scrollDelta
-                _this.transform.unapply(_this.editor);
-                _this.transform = Viewport_1.Viewport.transformBy(_this.transform.transform.rightMul(Mat33_1.default.translation(canvasDelta)));
-                _this.transform.apply(_this.editor);
+                this.transform.unapply(this.editor);
+                this.transform = Viewport_1.Viewport.transformBy(this.transform.transform.rightMul(math_1.Mat33.translation(canvasDelta)));
+                this.transform.apply(this.editor);
             }, onComplete);
         }
         else {
             onComplete();
         }
-    };
-    PanZoom.prototype.onGestureCancel = function () {
-        var _a, _b;
-        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
-        this.velocity = Vec2_1.Vec2.zero;
-        (_b = this.transform) === null || _b === void 0 ? void 0 : _b.unapply(this.editor);
+    }
+    onGestureCancel() {
+        this.inertialScroller?.stop();
+        this.velocity = math_1.Vec2.zero;
+        this.transform?.unapply(this.editor);
         this.editor.display.setDraftMode(false);
         this.transform = null;
-    };
+    }
     // Applies [transformUpdate] to the editor. This stacks on top of the
     // current transformation, if it exists.
-    PanZoom.prototype.updateTransform = function (transformUpdate, announce) {
-        var _a;
-        if (announce === void 0) { announce = false; }
-        var newTransform = transformUpdate;
+    updateTransform(transformUpdate, announce = false) {
+        let newTransform = transformUpdate;
         if (this.transform) {
             newTransform = this.transform.transform.rightMul(transformUpdate);
         }
-        (_a = this.transform) === null || _a === void 0 ? void 0 : _a.unapply(this.editor);
+        this.transform?.unapply(this.editor);
         this.transform = Viewport_1.Viewport.transformBy(newTransform);
         this.transform.apply(this.editor);
         if (announce) {
             this.editor.announceForAccessibility(this.transform.description(this.editor, this.editor.localization));
         }
-    };
-    PanZoom.prototype.onWheel = function (_a) {
-        var _b;
-        var delta = _a.delta, screenPos = _a.screenPos;
-        (_b = this.inertialScroller) === null || _b === void 0 ? void 0 : _b.stop();
+    }
+    onWheel({ delta, screenPos }) {
+        this.inertialScroller?.stop();
         // Reset the transformation -- wheel events are individual events, so we don't
         // need to unapply/reapply.
-        this.transform = Viewport_1.Viewport.transformBy(Mat33_1.default.identity);
-        var canvasPos = this.editor.viewport.screenToCanvas(screenPos);
-        var toCanvas = this.editor.viewport.screenToCanvasTransform;
+        this.transform = Viewport_1.Viewport.transformBy(math_1.Mat33.identity);
+        const canvasPos = this.editor.viewport.screenToCanvas(screenPos);
+        const toCanvas = this.editor.viewport.screenToCanvasTransform;
         // Transform without including translation
-        var translation = toCanvas.transformVec3(Vec3_1.default.of(-delta.x, -delta.y, 0));
-        var pinchZoomScaleFactor = 1.03;
-        var transformUpdate = Mat33_1.default.scaling2D(Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos).rightMul(Mat33_1.default.translation(translation));
+        const translation = toCanvas.transformVec3(math_1.Vec3.of(-delta.x, -delta.y, 0));
+        const pinchZoomScaleFactor = 1.03;
+        const transformUpdate = math_1.Mat33.scaling2D(Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos).rightMul(math_1.Mat33.translation(translation));
         this.updateTransform(transformUpdate, true);
         return true;
-    };
-    PanZoom.prototype.onKeyPress = function (event) {
-        var _a;
-        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
+    }
+    onKeyPress(event) {
+        this.inertialScroller?.stop();
         if (!(this.mode & PanZoomMode.Keyboard)) {
             return false;
         }
         // No need to keep the same the transform for keyboard events.
-        this.transform = Viewport_1.Viewport.transformBy(Mat33_1.default.identity);
-        var translation = Vec2_1.Vec2.zero;
-        var scale = 1;
-        var rotation = 0;
+        this.transform = Viewport_1.Viewport.transformBy(math_1.Mat33.identity);
+        let translation = math_1.Vec2.zero;
+        let scale = 1;
+        let rotation = 0;
         // Keyboard shortcut handling
-        var shortcucts = this.editor.shortcuts;
+        const shortcucts = this.editor.shortcuts;
         if (shortcucts.matchesShortcut(keybindings_1.moveLeftKeyboardShortcutId, event)) {
-            translation = Vec2_1.Vec2.of(-1, 0);
+            translation = math_1.Vec2.of(-1, 0);
         }
         else if (shortcucts.matchesShortcut(keybindings_1.moveRightKeyboardShortcutId, event)) {
-            translation = Vec2_1.Vec2.of(1, 0);
+            translation = math_1.Vec2.of(1, 0);
         }
         else if (shortcucts.matchesShortcut(keybindings_1.moveUpKeyboardShortcutId, event)) {
-            translation = Vec2_1.Vec2.of(0, -1);
+            translation = math_1.Vec2.of(0, -1);
         }
         else if (shortcucts.matchesShortcut(keybindings_1.moveDownKeyboardShortcutId, event)) {
-            translation = Vec2_1.Vec2.of(0, 1);
+            translation = math_1.Vec2.of(0, 1);
         }
         else if (shortcucts.matchesShortcut(keybindings_1.zoomInKeyboardShortcutId, event)) {
             scale = 1 / 2;
@@ -429,23 +368,23 @@ var PanZoom = /** @class */ (function (_super) {
         if (this.isRotationLocked()) {
             rotation = 0;
         }
-        var toCanvas = this.editor.viewport.screenToCanvasTransform;
+        const toCanvas = this.editor.viewport.screenToCanvasTransform;
         // Transform without translating (treat toCanvas as a linear instead of
         // an affine transformation).
         translation = toCanvas.transformVec3(translation);
         // Rotate/scale about the center of the canvas
-        var transformCenter = this.editor.viewport.visibleRect.center;
-        var transformUpdate = Mat33_1.default.scaling2D(scale, transformCenter).rightMul(Mat33_1.default.zRotation(rotation, transformCenter)).rightMul(Mat33_1.default.translation(translation));
+        const transformCenter = this.editor.viewport.visibleRect.center;
+        const transformUpdate = math_1.Mat33.scaling2D(scale, transformCenter).rightMul(math_1.Mat33.zRotation(rotation, transformCenter)).rightMul(math_1.Mat33.translation(translation));
         this.updateTransform(transformUpdate, true);
         return true;
-    };
-    PanZoom.prototype.isRotationLocked = function () {
+    }
+    isRotationLocked() {
         return !!(this.mode & PanZoomMode.RotationLocked);
-    };
+    }
     // Sets whether the given `mode` is enabled. `mode` should be a single
     // mode from the `PanZoomMode` enum.
-    PanZoom.prototype.setModeEnabled = function (mode, enabled) {
-        var newMode = this.mode;
+    setModeEnabled(mode, enabled) {
+        let newMode = this.mode;
         if (enabled) {
             newMode |= mode;
         }
@@ -453,8 +392,8 @@ var PanZoom = /** @class */ (function (_super) {
             newMode &= ~mode;
         }
         this.setMode(newMode);
-    };
-    PanZoom.prototype.setMode = function (mode) {
+    }
+    setMode(mode) {
         if (mode !== this.mode) {
             this.mode = mode;
             this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
@@ -462,10 +401,9 @@ var PanZoom = /** @class */ (function (_super) {
                 tool: this,
             });
         }
-    };
-    PanZoom.prototype.getMode = function () {
+    }
+    getMode() {
         return this.mode;
-    };
-    return PanZoom;
-}(BaseTool_1.default));
+    }
+}
 exports.default = PanZoom;

package/dist/cjs/tools/PasteHandler.d.ts

@@ -1,5 +1,5 @@
 import Editor from '../Editor';
-import { PasteEvent } from '../types';
+import { PasteEvent } from '../inputEvents';
 import BaseTool from './BaseTool';
 /**
  * A tool that handles paste events (e.g. as triggered by ctrl+V).