js-draw 0.17.4 → 0.18.0

package/dist/cjs/src/tools/Eraser.js

@@ -0,0 +1,112 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const types_1 = require("../types");
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+const Vec2_1 = require("../math/Vec2");
+const LineSegment2_1 = __importDefault(require("../math/LineSegment2"));
+const Erase_1 = __importDefault(require("../commands/Erase"));
+const Pointer_1 = require("../Pointer");
+const Color4_1 = __importDefault(require("../Color4"));
+const Rect2_1 = __importDefault(require("../math/Rect2"));
+class Eraser extends BaseTool_1.default {
+    constructor(editor, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.lastPoint = null;
+        this.isFirstEraseEvt = true;
+        this.thickness = 10;
+        // Commands that each remove one element
+        this.partialCommands = [];
+    }
+    clearPreview() {
+        this.editor.clearWetInk();
+    }
+    getSizeOnCanvas() {
+        return this.thickness / this.editor.viewport.getScaleFactor();
+    }
+    drawPreviewAt(point) {
+        this.clearPreview();
+        const size = this.getSizeOnCanvas();
+        const renderer = this.editor.display.getWetInkRenderer();
+        const rect = this.getEraserRect(point);
+        const fill = {
+            fill: Color4_1.default.gray,
+        };
+        renderer.drawRect(rect, size / 4, fill);
+    }
+    getEraserRect(centerPoint) {
+        const size = this.getSizeOnCanvas();
+        const halfSize = Vec2_1.Vec2.of(size / 2, size / 2);
+        return Rect2_1.default.fromCorners(centerPoint.minus(halfSize), centerPoint.plus(halfSize));
+    }
+    eraseTo(currentPoint) {
+        if (!this.isFirstEraseEvt && currentPoint.minus(this.lastPoint).magnitude() === 0) {
+            return;
+        }
+        this.isFirstEraseEvt = false;
+        // Currently only objects within eraserRect or that intersect a straight line
+        // from the center of the current rect to the previous are erased. TODO: Erase
+        // all objects as if there were pointerMove events between the two points.
+        const eraserRect = this.getEraserRect(currentPoint);
+        const line = new LineSegment2_1.default(this.lastPoint, currentPoint);
+        const region = Rect2_1.default.union(line.bbox, eraserRect);
+        const intersectingElems = this.editor.image.getElementsIntersectingRegion(region).filter(component => {
+            return component.intersects(line) || component.intersectsRect(eraserRect);
+        });
+        // Only erase components that could be selected (and thus interacted with)
+        // by the user.
+        const toErase = intersectingElems.filter(elem => elem.isSelectable());
+        // Remove any intersecting elements.
+        this.toRemove.push(...toErase);
+        // Create new Erase commands for the now-to-be-erased elements and apply them.
+        const newPartialCommands = toErase.map(elem => new Erase_1.default([elem]));
+        newPartialCommands.forEach(cmd => cmd.apply(this.editor));
+        this.partialCommands.push(...newPartialCommands);
+        this.drawPreviewAt(currentPoint);
+        this.lastPoint = currentPoint;
+    }
+    onPointerDown(event) {
+        if (event.allPointers.length === 1 || event.current.device === Pointer_1.PointerDevice.Eraser) {
+            this.lastPoint = event.current.canvasPos;
+            this.toRemove = [];
+            this.isFirstEraseEvt = true;
+            this.drawPreviewAt(event.current.canvasPos);
+            return true;
+        }
+        return false;
+    }
+    onPointerMove(event) {
+        const currentPoint = event.current.canvasPos;
+        this.eraseTo(currentPoint);
+    }
+    onPointerUp(event) {
+        this.eraseTo(event.current.canvasPos);
+        if (this.toRemove.length > 0) {
+            // Undo commands for each individual component and unite into a single command.
+            this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
+            this.partialCommands = [];
+            const command = new Erase_1.default(this.toRemove);
+            this.editor.dispatch(command); // dispatch: Makes undo-able.
+        }
+        this.clearPreview();
+    }
+    onGestureCancel() {
+        this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
+        this.partialCommands = [];
+        this.clearPreview();
+    }
+    getThickness() {
+        return this.thickness;
+    }
+    setThickness(thickness) {
+        this.thickness = thickness;
+        this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
+            kind: types_1.EditorEventType.ToolUpdated,
+            tool: this,
+        });
+    }
+}
+exports.default = Eraser;

package/dist/cjs/src/tools/FindTool.js

@@ -0,0 +1,121 @@
+"use strict";
+// Displays a find dialog that allows the user to search for and focus text. 
+//
+// @packageDocumentation
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cssPrefix = void 0;
+const TextComponent_1 = __importDefault(require("../components/TextComponent"));
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+exports.cssPrefix = 'find-tool';
+class FindTool extends BaseTool_1.default {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.findLabel);
+        this.editor = editor;
+        this.currentMatchIdx = 0;
+        this.overlay = document.createElement('div');
+        this.fillOverlay();
+        editor.createHTMLOverlay(this.overlay);
+        this.overlay.style.display = 'none';
+        this.overlay.classList.add(`${exports.cssPrefix}-overlay`);
+    }
+    getMatches(searchFor) {
+        searchFor = searchFor.toLocaleLowerCase();
+        const allTextComponents = this.editor.image.getAllElements()
+            .filter(elem => elem instanceof TextComponent_1.default);
+        const matches = allTextComponents.filter(text => text.getText().toLocaleLowerCase().indexOf(searchFor) !== -1);
+        return matches.map(match => match.getBBox());
+    }
+    focusCurrentMatch() {
+        const matches = this.getMatches(this.searchInput.value);
+        let matchIdx = this.currentMatchIdx % matches.length;
+        if (matchIdx < 0) {
+            matchIdx = matches.length + matchIdx;
+        }
+        if (matchIdx < matches.length) {
+            const undoable = false;
+            this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true), undoable);
+            this.editor.announceForAccessibility(this.editor.localization.focusedFoundText(matchIdx + 1, matches.length));
+        }
+    }
+    toNextMatch() {
+        this.currentMatchIdx++;
+        this.focusCurrentMatch();
+    }
+    toPrevMatch() {
+        this.currentMatchIdx--;
+        this.focusCurrentMatch();
+    }
+    fillOverlay() {
+        const label = document.createElement('label');
+        this.searchInput = document.createElement('input');
+        const nextBtn = document.createElement('button');
+        const closeBtn = document.createElement('button');
+        // Math.random() ensures that the ID is unique (to allow us to refer to it
+        // with an htmlFor).
+        this.searchInput.setAttribute('id', `${exports.cssPrefix}-searchInput-${Math.random()}`);
+        label.htmlFor = this.searchInput.getAttribute('id');
+        label.innerText = this.editor.localization.findLabel;
+        nextBtn.innerText = this.editor.localization.toNextMatch;
+        closeBtn.innerText = this.editor.localization.closeFindDialog;
+        this.searchInput.onkeydown = (ev) => {
+            if (ev.key === 'Enter') {
+                if (ev.shiftKey) {
+                    this.toPrevMatch();
+                }
+                else {
+                    this.toNextMatch();
+                }
+            }
+            else if (ev.key === 'Escape') {
+                this.setVisible(false);
+            }
+            else if (ev.key === 'f' && ev.ctrlKey) {
+                ev.preventDefault();
+                this.toggleVisible();
+            }
+        };
+        nextBtn.onclick = () => {
+            this.toNextMatch();
+        };
+        closeBtn.onclick = () => {
+            this.setVisible(false);
+        };
+        this.overlay.replaceChildren(label, this.searchInput, nextBtn, closeBtn);
+    }
+    isVisible() {
+        return this.overlay.style.display !== 'none';
+    }
+    setVisible(visible) {
+        if (visible !== this.isVisible()) {
+            this.overlay.style.display = visible ? 'block' : 'none';
+            if (visible) {
+                this.searchInput.focus();
+                this.editor.announceForAccessibility(this.editor.localization.findDialogShown);
+            }
+            else {
+                this.editor.focus();
+                this.editor.announceForAccessibility(this.editor.localization.findDialogHidden);
+            }
+        }
+    }
+    toggleVisible() {
+        this.setVisible(!this.isVisible());
+    }
+    onKeyPress(event) {
+        if (event.ctrlKey && event.key === 'f') {
+            this.toggleVisible();
+            return true;
+        }
+        return false;
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        if (enabled) {
+            this.setVisible(false);
+        }
+    }
+}
+exports.default = FindTool;

package/dist/cjs/src/tools/PanZoom.js

@@ -0,0 +1,421 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanZoomMode = void 0;
+const Mat33_1 = __importDefault(require("../math/Mat33"));
+const Vec2_1 = require("../math/Vec2");
+const Vec3_1 = __importDefault(require("../math/Vec3"));
+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"));
+var PanZoomMode;
+(function (PanZoomMode) {
+    PanZoomMode[PanZoomMode["OneFingerTouchGestures"] = 1] = "OneFingerTouchGestures";
+    PanZoomMode[PanZoomMode["TwoFingerTouchGestures"] = 2] = "TwoFingerTouchGestures";
+    PanZoomMode[PanZoomMode["RightClickDrags"] = 4] = "RightClickDrags";
+    PanZoomMode[PanZoomMode["SinglePointerGestures"] = 8] = "SinglePointerGestures";
+    PanZoomMode[PanZoomMode["Keyboard"] = 16] = "Keyboard";
+    PanZoomMode[PanZoomMode["RotationLocked"] = 32] = "RotationLocked";
+})(PanZoomMode = exports.PanZoomMode || (exports.PanZoomMode = {}));
+class InertialScroller {
+    constructor(initialVelocity, scrollBy, onComplete) {
+        this.initialVelocity = initialVelocity;
+        this.scrollBy = scrollBy;
+        this.onComplete = onComplete;
+        this.running = false;
+        this.start();
+    }
+    start() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.running) {
+                return;
+            }
+            this.currentVelocity = this.initialVelocity;
+            let lastTime = (new Date()).getTime();
+            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 = (new Date()).getTime();
+                const dt = (nowTime - lastTime) / 1000;
+                this.currentVelocity = this.currentVelocity.times(Math.pow(1 / 8, dt));
+                this.scrollBy(this.currentVelocity.times(dt));
+                yield (0, untilNextAnimationFrame_1.default)();
+                lastTime = nowTime;
+            }
+            if (this.running) {
+                this.stop();
+            }
+        });
+    }
+    getCurrentVelocity() {
+        if (!this.running) {
+            return null;
+        }
+        return this.currentVelocity;
+    }
+    stop() {
+        if (this.running) {
+            this.running = false;
+            this.onComplete();
+        }
+    }
+}
+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;
+        this.inertialScroller = null;
+        this.velocity = null;
+    }
+    // Returns information about the pointers in a gesture
+    computePinchData(p1, p2) {
+        // Swap the pointers to ensure consistent ordering.
+        if (p1.id < p2.id) {
+            const tmp = p1;
+            p1 = p2;
+            p2 = tmp;
+        }
+        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 }) {
+        var _a, _b, _c, _d;
+        let handlingGesture = false;
+        const inertialScrollerVelocity = (_b = (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.getCurrentVelocity()) !== null && _b !== void 0 ? _b : Vec2_1.Vec2.zero;
+        (_c = this.inertialScroller) === null || _c === void 0 ? void 0 : _c.stop();
+        this.velocity = inertialScrollerVelocity;
+        this.lastPointerDownTimestamp = currentPointer.timeStamp;
+        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) {
+            const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
+            this.lastDist = dist;
+            this.lastScreenCenter = screenCenter;
+            this.initialTouchAngle = angle;
+            this.initialViewportRotation = this.editor.viewport.getRotationAngle();
+            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;
+            handlingGesture = true;
+        }
+        if (handlingGesture) {
+            this.lastTimestamp = (new Date()).getTime();
+            (_d = this.transform) !== null && _d !== void 0 ? _d : (this.transform = Viewport_1.Viewport.transformBy(Mat33_1.default.identity));
+            this.editor.display.setDraftMode(true);
+        }
+        return handlingGesture;
+    }
+    updateVelocity(currentCenter) {
+        const deltaPos = currentCenter.minus(this.lastScreenCenter);
+        let deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
+        // Ignore duplicate events, unless there has been enough time between them.
+        if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
+            return;
+        }
+        // We divide by deltaTime. Don't divide by zero.
+        if (deltaTime === 0) {
+            return;
+        }
+        // Don't divide by almost zero, either
+        deltaTime = Math.max(deltaTime, 0.01);
+        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.
+    getCenterDelta(screenCenter) {
+        // Use transformVec3 to avoid translating the delta
+        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`.
+    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`.
+        const maxSnapAngle = 0.07;
+        // Snap the rotation
+        if (Math.abs(fullRotation - roundedFullRotation) < maxSnapAngle) {
+            fullRotation = roundedFullRotation;
+            // Work around a rotation/matrix multiply bug.
+            // (See commit after 4abe27ff8e7913155828f98dee77b09c57c51d30).
+            // TODO: Fix the underlying issue and remove this.
+            if (fullRotation !== 0) {
+                fullRotation += 0.0001;
+            }
+        }
+        return fullRotation - this.editor.viewport.getRotationAngle();
+    }
+    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;
+        }
+        else {
+            deltaRotation = this.toSnappedRotationDelta(angle);
+        }
+        this.updateVelocity(screenCenter);
+        const transformUpdate = Mat33_1.default.translation(delta)
+            .rightMul(Mat33_1.default.scaling2D(dist / this.lastDist, canvasCenter))
+            .rightMul(Mat33_1.default.zRotation(deltaRotation, canvasCenter));
+        this.lastScreenCenter = screenCenter;
+        this.lastDist = dist;
+        this.transform = Viewport_1.Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
+    }
+    handleOneFingerMove(pointer) {
+        const delta = this.getCenterDelta(pointer.screenPos);
+        this.transform = Viewport_1.Viewport.transformBy(this.transform.transform.rightMul(Mat33_1.default.translation(delta)));
+        this.updateVelocity(pointer.screenPos);
+        this.lastScreenCenter = pointer.screenPos;
+    }
+    onPointerMove({ allPointers }) {
+        var _a;
+        (_a = this.transform) !== null && _a !== void 0 ? _a : (this.transform = Viewport_1.Viewport.transformBy(Mat33_1.default.identity));
+        const lastTransform = this.transform;
+        if (allPointers.length === 2) {
+            this.handleTwoFingerMove(allPointers);
+        }
+        else if (allPointers.length === 1) {
+            this.handleOneFingerMove(allPointers[0]);
+        }
+        lastTransform.unapply(this.editor);
+        this.transform.apply(this.editor);
+        this.lastTimestamp = (new Date()).getTime();
+    }
+    onPointerUp(event) {
+        var _a;
+        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;
+        };
+        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) {
+            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:
+            this.updateVelocity(event.current.screenPos);
+            // Work around an input issue. Some devices that disable the touchscreen when a stylus
+            // comes near the screen fire a touch-end event at the position of the stylus when a
+            // touch gesture is canceled. Because the stylus is often far away from the last touch,
+            // this causes a great displacement between the second-to-last (from the touchscreen) and
+            // last (from the pen that is now near the screen) events. Only allow velocity to decrease
+            // to work around this:
+            if (oldVelocity.magnitude() < this.velocity.magnitude()) {
+                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, (scrollDelta) => {
+                if (!this.transform) {
+                    return;
+                }
+                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);
+            }, onComplete);
+        }
+        else {
+            onComplete();
+        }
+    }
+    onGestureCancel() {
+        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);
+        this.editor.display.setDraftMode(false);
+        this.transform = null;
+    }
+    // Applies [transformUpdate] to the editor. This stacks on top of the
+    // current transformation, if it exists.
+    updateTransform(transformUpdate, announce = false) {
+        var _a;
+        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 = Viewport_1.Viewport.transformBy(newTransform);
+        this.transform.apply(this.editor);
+        if (announce) {
+            this.editor.announceForAccessibility(this.transform.description(this.editor, this.editor.localization));
+        }
+    }
+    onWheel({ delta, screenPos }) {
+        var _a;
+        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.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);
+        const canvasPos = this.editor.viewport.screenToCanvas(screenPos);
+        const toCanvas = this.editor.viewport.screenToCanvasTransform;
+        // Transform without including translation
+        const translation = toCanvas.transformVec3(Vec3_1.default.of(-delta.x, -delta.y, 0));
+        const pinchZoomScaleFactor = 1.03;
+        const transformUpdate = Mat33_1.default.scaling2D(Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos).rightMul(Mat33_1.default.translation(translation));
+        this.updateTransform(transformUpdate, true);
+        return true;
+    }
+    onKeyPress({ key, ctrlKey, altKey }) {
+        var _a;
+        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
+        if (!(this.mode & PanZoomMode.Keyboard)) {
+            return false;
+        }
+        if (ctrlKey || altKey) {
+            return false;
+        }
+        // No need to keep the same the transform for keyboard events.
+        this.transform = Viewport_1.Viewport.transformBy(Mat33_1.default.identity);
+        let translation = Vec2_1.Vec2.zero;
+        let scale = 1;
+        let rotation = 0;
+        // Keyboard shortcut handling
+        switch (key) {
+            case 'a':
+            case 'h':
+            case 'ArrowLeft':
+                translation = Vec2_1.Vec2.of(-1, 0);
+                break;
+            case 'd':
+            case 'l':
+            case 'ArrowRight':
+                translation = Vec2_1.Vec2.of(1, 0);
+                break;
+            case 'q':
+            case 'k':
+            case 'ArrowUp':
+                translation = Vec2_1.Vec2.of(0, -1);
+                break;
+            case 'e':
+            case 'j':
+            case 'ArrowDown':
+                translation = Vec2_1.Vec2.of(0, 1);
+                break;
+            case 'w':
+                scale = 1 / 2;
+                break;
+            case 's':
+                scale = 2;
+                break;
+            case 'r':
+                rotation = 1;
+                break;
+            case 'R':
+                rotation = -1;
+                break;
+            default:
+                return false;
+        }
+        // For each keypress,
+        translation = translation.times(30); // Move at most 30 units
+        rotation *= Math.PI / 8; // Rotate at least a sixteenth of a rotation
+        // Transform the canvas, not the viewport:
+        translation = translation.times(-1);
+        rotation = rotation * -1;
+        scale = 1 / scale;
+        // Work around an issue that seems to be related to rotation matricies losing precision on inversion.
+        // TODO: Figure out why and implement a better solution.
+        if (rotation !== 0) {
+            rotation += 0.0001;
+        }
+        if (this.isRotationLocked()) {
+            rotation = 0;
+        }
+        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
+        const transformCenter = this.editor.viewport.visibleRect.center;
+        const transformUpdate = Mat33_1.default.scaling2D(scale, transformCenter).rightMul(Mat33_1.default.zRotation(rotation, transformCenter)).rightMul(Mat33_1.default.translation(translation));
+        this.updateTransform(transformUpdate, true);
+        return true;
+    }
+    isRotationLocked() {
+        return !!(this.mode & PanZoomMode.RotationLocked);
+    }
+    // Sets whether the given `mode` is enabled. `mode` should be a single
+    // mode from the `PanZoomMode` enum.
+    setModeEnabled(mode, enabled) {
+        let newMode = this.mode;
+        if (enabled) {
+            newMode |= mode;
+        }
+        else {
+            newMode &= ~mode;
+        }
+        this.setMode(newMode);
+    }
+    setMode(mode) {
+        if (mode !== this.mode) {
+            this.mode = mode;
+            this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
+                kind: types_1.EditorEventType.ToolUpdated,
+                tool: this,
+            });
+        }
+    }
+    getMode() {
+        return this.mode;
+    }
+}
+exports.default = PanZoom;