js-draw 0.25.0 → 1.0.0

package/dist/cjs/UndoRedoHistory.js

@@ -12,10 +12,10 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _UndoRedoHistory_undoStack, _UndoRedoHistory_redoStack;
 Object.defineProperty(exports, "__esModule", { value: true });
-var types_1 = require("./types");
-var UndoRedoHistory = /** @class */ (function () {
+const types_1 = require("./types");
+class UndoRedoHistory {
     // @internal
-    function UndoRedoHistory(editor, announceRedoCallback, announceUndoCallback) {
+    constructor(editor, announceRedoCallback, announceUndoCallback) {
         this.editor = editor;
         this.announceRedoCallback = announceRedoCallback;
         this.announceUndoCallback = announceUndoCallback;
@@ -25,42 +25,39 @@ var UndoRedoHistory = /** @class */ (function () {
         __classPrivateFieldSet(this, _UndoRedoHistory_undoStack, [], "f");
         __classPrivateFieldSet(this, _UndoRedoHistory_redoStack, [], "f");
     }
-    UndoRedoHistory.prototype.fireUpdateEvent = function (stackUpdateType, triggeringCommand) {
+    fireUpdateEvent(stackUpdateType, triggeringCommand) {
         this.editor.notifier.dispatch(types_1.EditorEventType.UndoRedoStackUpdated, {
             kind: types_1.EditorEventType.UndoRedoStackUpdated,
             undoStackSize: __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length,
             redoStackSize: __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").length,
             command: triggeringCommand,
-            stackUpdateType: stackUpdateType,
+            stackUpdateType,
         });
-    };
+    }
     // Adds the given command to this and applies it to the editor.
-    UndoRedoHistory.prototype.push = function (command, apply) {
-        var _this = this;
-        if (apply === void 0) { apply = true; }
+    push(command, apply = true) {
         if (apply) {
             command.apply(this.editor);
         }
         __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").push(command);
-        for (var _i = 0, _a = __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f"); _i < _a.length; _i++) {
-            var elem = _a[_i];
+        for (const elem of __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f")) {
             elem.onDrop(this.editor);
         }
         __classPrivateFieldSet(this, _UndoRedoHistory_redoStack, [], "f");
         if (__classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length > this.maxUndoRedoStackSize) {
-            var removeAtOnceCount = Math.ceil(this.maxUndoRedoStackSize / 100);
-            var removedElements = __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").splice(0, removeAtOnceCount);
-            removedElements.forEach(function (elem) { return elem.onDrop(_this.editor); });
+            const removeAtOnceCount = Math.ceil(this.maxUndoRedoStackSize / 100);
+            const removedElements = __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").splice(0, removeAtOnceCount);
+            removedElements.forEach(elem => elem.onDrop(this.editor));
         }
         this.fireUpdateEvent(types_1.UndoEventType.CommandDone, command);
         this.editor.notifier.dispatch(types_1.EditorEventType.CommandDone, {
             kind: types_1.EditorEventType.CommandDone,
-            command: command,
+            command,
         });
-    };
+    }
     // Remove the last command from this' undo stack and apply it.
-    UndoRedoHistory.prototype.undo = function () {
-        var command = __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").pop();
+    undo() {
+        const command = __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").pop();
         if (command) {
             __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").push(command);
             command.unapply(this.editor);
@@ -68,12 +65,12 @@ var UndoRedoHistory = /** @class */ (function () {
             this.fireUpdateEvent(types_1.UndoEventType.CommandUndone, command);
             this.editor.notifier.dispatch(types_1.EditorEventType.CommandUndone, {
                 kind: types_1.EditorEventType.CommandUndone,
-                command: command,
+                command,
             });
         }
-    };
-    UndoRedoHistory.prototype.redo = function () {
-        var command = __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").pop();
+    }
+    redo() {
+        const command = __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").pop();
         if (command) {
             __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").push(command);
             command.apply(this.editor);
@@ -81,25 +78,16 @@ var UndoRedoHistory = /** @class */ (function () {
             this.fireUpdateEvent(types_1.UndoEventType.CommandRedone, command);
             this.editor.notifier.dispatch(types_1.EditorEventType.CommandDone, {
                 kind: types_1.EditorEventType.CommandDone,
-                command: command,
+                command,
             });
         }
-    };
-    Object.defineProperty(UndoRedoHistory.prototype, "undoStackSize", {
-        get: function () {
-            return __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(UndoRedoHistory.prototype, "redoStackSize", {
-        get: function () {
-            return __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").length;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    return UndoRedoHistory;
-}());
+    }
+    get undoStackSize() {
+        return __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length;
+    }
+    get redoStackSize() {
+        return __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").length;
+    }
+}
 _UndoRedoHistory_undoStack = new WeakMap(), _UndoRedoHistory_redoStack = new WeakMap();
 exports.default = UndoRedoHistory;

package/dist/cjs/Viewport.d.ts

@@ -1,8 +1,5 @@
 import Command from './commands/Command';
-import Mat33 from './math/Mat33';
-import Rect2 from './math/shapes/Rect2';
-import { Point2, Vec2 } from './math/Vec2';
-import Vec3 from './math/Vec3';
+import { Mat33, Rect2, Point2, Vec2, Vec3 } from '@js-draw/math';
 import { StrokeDataPoint } from './types';
 type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
 export declare abstract class ViewportTransform extends Command {

package/dist/cjs/Viewport.js

@@ -1,19 +1,4 @@
 "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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     if (kind === "m") throw new TypeError("Private method is not writable");
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
@@ -25,283 +10,255 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _inverseTransform, _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Viewport = exports.ViewportTransform = void 0;
-var Command_1 = require("./commands/Command");
-var Mat33_1 = require("./math/Mat33");
-var Rect2_1 = require("./math/shapes/Rect2");
-var Vec2_1 = require("./math/Vec2");
-var Vec3_1 = require("./math/Vec3");
-var ViewportTransform = /** @class */ (function (_super) {
-    __extends(ViewportTransform, _super);
-    function ViewportTransform() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    return ViewportTransform;
-}(Command_1.default));
+const Command_1 = __importDefault(require("./commands/Command"));
+const math_1 = require("@js-draw/math");
+class ViewportTransform extends Command_1.default {
+}
 exports.ViewportTransform = ViewportTransform;
-var Viewport = exports.Viewport = /** @class */ (function () {
+class Viewport {
     // @internal
-    function Viewport(onTransformChangeCallback) {
+    constructor(onTransformChangeCallback) {
         this.onTransformChangeCallback = onTransformChangeCallback;
-        this.resetTransform(Mat33_1.default.identity);
-        this.screenRect = Rect2_1.default.empty;
+        this.resetTransform(math_1.Mat33.identity);
+        this.screenRect = math_1.Rect2.empty;
     }
     /**
      * @returns a temporary copy of `this` that does not notify when modified. This is
      * useful when rendering with a temporarily different viewport.
      */
-    Viewport.prototype.getTemporaryClone = function () {
-        var result = new Viewport(function () { });
+    getTemporaryClone() {
+        const result = new Viewport(() => { });
         result.transform = this.transform;
         result.inverseTransform = this.inverseTransform;
         result.screenRect = this.screenRect;
         return result;
-    };
+    }
     // @internal
-    Viewport.prototype.updateScreenSize = function (screenSize) {
+    updateScreenSize(screenSize) {
         this.screenRect = this.screenRect.resizedTo(screenSize);
-    };
-    Object.defineProperty(Viewport.prototype, "visibleRect", {
-        /** Get the screen's visible region transformed into canvas space. */
-        get: function () {
-            return this.screenRect.transformedBoundingBox(this.inverseTransform);
-        },
-        enumerable: false,
-        configurable: true
-    });
+    }
+    /** Get the screen's visible region transformed into canvas space. */
+    get visibleRect() {
+        return this.screenRect.transformedBoundingBox(this.inverseTransform);
+    }
     /** @returns the given point, but in canvas coordinates */
-    Viewport.prototype.screenToCanvas = function (screenPoint) {
+    screenToCanvas(screenPoint) {
         return this.inverseTransform.transformVec2(screenPoint);
-    };
+    }
     /** @returns the given point transformed into screen coordinates. */
-    Viewport.prototype.canvasToScreen = function (canvasPoint) {
+    canvasToScreen(canvasPoint) {
         return this.transform.transformVec2(canvasPoint);
-    };
+    }
     /** @returns a command that transforms the canvas by `transform`. */
-    Viewport.transformBy = function (transform) {
+    static transformBy(transform) {
         return new Viewport.ViewportTransform(transform);
-    };
+    }
     /**
      * Updates the transformation directly. Using `transformBy` is preferred.
      * @param newTransform - should map from canvas coordinates to screen coordinates.
      */
-    Viewport.prototype.resetTransform = function (newTransform) {
-        var _a;
-        if (newTransform === void 0) { newTransform = Mat33_1.default.identity; }
-        var oldTransform = this.transform;
+    resetTransform(newTransform = math_1.Mat33.identity) {
+        const oldTransform = this.transform;
         this.transform = newTransform;
         this.inverseTransform = newTransform.inverse();
-        (_a = this.onTransformChangeCallback) === null || _a === void 0 ? void 0 : _a.call(this, oldTransform, newTransform);
-    };
-    Object.defineProperty(Viewport.prototype, "screenToCanvasTransform", {
-        get: function () {
-            return this.inverseTransform;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Viewport.prototype, "canvasToScreenTransform", {
-        get: function () {
-            return this.transform;
-        },
-        enumerable: false,
-        configurable: true
-    });
+        this.onTransformChangeCallback?.(oldTransform, newTransform);
+    }
+    get screenToCanvasTransform() {
+        return this.inverseTransform;
+    }
+    get canvasToScreenTransform() {
+        return this.transform;
+    }
     /** @returns the size of the visible region in pixels. */
-    Viewport.prototype.getScreenRectSize = function () {
+    getScreenRectSize() {
         return this.screenRect.size;
-    };
+    }
     /** Alias for `getScreenRectSize`. @deprecated */
-    Viewport.prototype.getResolution = function () {
+    getResolution() {
         return this.getScreenRectSize();
-    };
+    }
     /** @returns the amount a vector on the canvas is scaled to become a vector on the screen. */
-    Viewport.prototype.getScaleFactor = function () {
+    getScaleFactor() {
         // Use transformVec3 to avoid translating the vector
-        return this.transform.transformVec3(Vec3_1.default.unitX).magnitude();
-    };
+        return this.transform.transformVec3(math_1.Vec3.unitX).magnitude();
+    }
     /**
      * @returns `getScaleFactor()` rounded to the nearest power of 10.
      * For example, if `getScaleFactor()` returns 101, `getScaleFactorToNearestPowerOfTen()`
      * should return `100` because `100` is the nearest power of 10 to 101.
      */
-    Viewport.prototype.getScaleFactorToNearestPowerOfTen = function () {
+    getScaleFactorToNearestPowerOfTen() {
         return this.getScaleFactorToNearestPowerOf(10);
-    };
-    Viewport.prototype.getScaleFactorToNearestPowerOf = function (powerOf) {
-        var scaleFactor = this.getScaleFactor();
+    }
+    getScaleFactorToNearestPowerOf(powerOf) {
+        const scaleFactor = this.getScaleFactor();
         return Math.pow(powerOf, Math.round(Math.log(scaleFactor) / Math.log(powerOf)));
-    };
+    }
     /** Returns the size of a grid cell (in canvas units) as used by {@link snapToGrid}. */
-    Viewport.getGridSize = function (scaleFactor) {
+    static getGridSize(scaleFactor) {
         return 50 / scaleFactor;
-    };
-    Viewport.prototype.snapToGrid = function (canvasPos) {
-        var scaleFactor = this.getScaleFactorToNearestPowerOf(2);
-        var snapCoordinate = function (coordinate) {
-            var roundFactor = 1 / Viewport.getGridSize(scaleFactor);
-            var snapped = Math.round(coordinate * roundFactor) / roundFactor;
+    }
+    snapToGrid(canvasPos) {
+        const scaleFactor = this.getScaleFactorToNearestPowerOf(2);
+        const snapCoordinate = (coordinate) => {
+            const roundFactor = 1 / Viewport.getGridSize(scaleFactor);
+            const snapped = Math.round(coordinate * roundFactor) / roundFactor;
             return snapped;
         };
-        var snappedCanvasPos = Vec2_1.Vec2.of(snapCoordinate(canvasPos.x), snapCoordinate(canvasPos.y));
+        const snappedCanvasPos = math_1.Vec2.of(snapCoordinate(canvasPos.x), snapCoordinate(canvasPos.y));
         return snappedCanvasPos;
-    };
+    }
     /** Returns the size of one screen pixel in canvas units. */
-    Viewport.prototype.getSizeOfPixelOnCanvas = function () {
+    getSizeOfPixelOnCanvas() {
         return 1 / this.getScaleFactor();
-    };
+    }
     /**
      * @returns the angle of the canvas in radians.
      * This is the angle by which the canvas is rotated relative to the screen.
      */
-    Viewport.prototype.getRotationAngle = function () {
-        return this.transform.transformVec3(Vec3_1.default.unitX).angle();
-    };
+    getRotationAngle() {
+        return this.transform.transformVec3(math_1.Vec3.unitX).angle();
+    }
     // The separate function type definition seems necessary here.
     // See https://stackoverflow.com/a/58163623/17055750.
     // eslint-disable-next-line no-dupe-class-members
-    Viewport.roundPoint = function (point, tolerance) {
-        var scaleFactor = Math.pow(10, Math.floor(Math.log10(tolerance)));
-        var roundComponent = function (component) {
+    static roundPoint(point, tolerance) {
+        const scaleFactor = 10 ** Math.floor(Math.log10(tolerance));
+        const roundComponent = (component) => {
             return Math.round(component / scaleFactor) * scaleFactor;
         };
         if (typeof point === 'number') {
             return roundComponent(point);
         }
         return point.map(roundComponent);
-    };
+    }
     // Round a point with a tolerance of ±1 screen unit.
-    Viewport.prototype.roundPoint = function (point) {
+    roundPoint(point) {
         return Viewport.roundPoint(point, 1 / this.getScaleFactor());
-    };
+    }
     // `roundAmount`: An integer >= 0, larger numbers cause less rounding. Smaller numbers cause more
     // (as such `roundAmount = 0` does the most rounding).
-    Viewport.roundScaleRatio = function (scaleRatio, roundAmount) {
-        if (roundAmount === void 0) { roundAmount = 1; }
+    static roundScaleRatio(scaleRatio, roundAmount = 1) {
         if (Math.abs(scaleRatio) <= 1e-12) {
             return 0;
         }
         // Represent as k 10ⁿ for some n, k ∈ ℤ.
-        var decimalComponent = Math.pow(10, Math.floor(Math.log10(Math.abs(scaleRatio))));
-        var roundAmountFactor = Math.pow(2, roundAmount);
+        const decimalComponent = 10 ** Math.floor(Math.log10(Math.abs(scaleRatio)));
+        const roundAmountFactor = 2 ** roundAmount;
         scaleRatio = Math.round(scaleRatio / decimalComponent * roundAmountFactor) / roundAmountFactor * decimalComponent;
         return scaleRatio;
-    };
+    }
     // Computes and returns an affine transformation that makes `toMakeVisible` visible and roughly centered on the screen.
-    Viewport.prototype.computeZoomToTransform = function (toMakeVisible, allowZoomIn, allowZoomOut) {
-        var _this = this;
-        if (allowZoomIn === void 0) { allowZoomIn = true; }
-        if (allowZoomOut === void 0) { allowZoomOut = true; }
-        var transform = Mat33_1.default.identity;
+    computeZoomToTransform(toMakeVisible, allowZoomIn = true, allowZoomOut = true) {
+        let transform = math_1.Mat33.identity;
         if (toMakeVisible.w === 0 || toMakeVisible.h === 0) {
-            throw new Error("".concat(toMakeVisible.toString(), " rectangle is empty! Cannot zoom to!"));
+            throw new Error(`${toMakeVisible.toString()} rectangle is empty! Cannot zoom to!`);
         }
         if (isNaN(toMakeVisible.size.magnitude())) {
-            throw new Error("".concat(toMakeVisible.toString(), " rectangle has NaN size! Cannot zoom to!"));
+            throw new Error(`${toMakeVisible.toString()} rectangle has NaN size! Cannot zoom to!`);
         }
         // Try to move the selection within the center 4/5ths of the viewport.
-        var recomputeTargetRect = function () {
+        const recomputeTargetRect = () => {
             // transform transforms objects on the canvas. As such, we need to invert it
             // to transform the viewport.
-            var visibleRect = _this.visibleRect.transformedBoundingBox(transform.inverse());
-            return visibleRect.transformedBoundingBox(Mat33_1.default.scaling2D(4 / 5, visibleRect.center));
+            const visibleRect = this.visibleRect.transformedBoundingBox(transform.inverse());
+            return visibleRect.transformedBoundingBox(math_1.Mat33.scaling2D(4 / 5, visibleRect.center));
         };
-        var targetRect = recomputeTargetRect();
-        var largerThanTarget = targetRect.w < toMakeVisible.w || targetRect.h < toMakeVisible.h;
+        let targetRect = recomputeTargetRect();
+        const largerThanTarget = targetRect.w < toMakeVisible.w || targetRect.h < toMakeVisible.h;
         // Ensure that toMakeVisible is at least 1/3rd of the visible region.
-        var muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 1 / 3;
+        const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 1 / 3;
         if ((largerThanTarget && allowZoomOut) || (muchSmallerThanTarget && allowZoomIn)) {
-            var multiplier = Math.max(toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h);
-            var visibleRectTransform = Mat33_1.default.scaling2D(multiplier, targetRect.topLeft);
-            var viewportContentTransform = visibleRectTransform.inverse();
+            const multiplier = Math.max(toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h);
+            const visibleRectTransform = math_1.Mat33.scaling2D(multiplier, targetRect.topLeft);
+            const viewportContentTransform = visibleRectTransform.inverse();
             transform = transform.rightMul(viewportContentTransform);
         }
         targetRect = recomputeTargetRect();
         // Ensure that the center of the region is visible
         if (!targetRect.containsRect(toMakeVisible)) {
             // target position - current position
-            var translation = toMakeVisible.center.minus(targetRect.center);
-            var visibleRectTransform = Mat33_1.default.translation(translation);
-            var viewportContentTransform = visibleRectTransform.inverse();
+            const translation = toMakeVisible.center.minus(targetRect.center);
+            const visibleRectTransform = math_1.Mat33.translation(translation);
+            const viewportContentTransform = visibleRectTransform.inverse();
             transform = transform.rightMul(viewportContentTransform);
         }
         if (!transform.invertable()) {
             console.warn('Unable to zoom to ', toMakeVisible, '! Computed transform', transform, 'is singular.');
-            transform = Mat33_1.default.identity;
+            transform = math_1.Mat33.identity;
         }
         return transform;
-    };
+    }
     // Returns a Command that transforms the view such that [rect] is visible, and perhaps
     // centered in the viewport.
     // Returns null if no transformation is necessary
     //
     // @see {@link computeZoomToTransform}
-    Viewport.prototype.zoomTo = function (toMakeVisible, allowZoomIn, allowZoomOut) {
-        if (allowZoomIn === void 0) { allowZoomIn = true; }
-        if (allowZoomOut === void 0) { allowZoomOut = true; }
-        var transform = this.computeZoomToTransform(toMakeVisible, allowZoomIn, allowZoomOut);
+    zoomTo(toMakeVisible, allowZoomIn = true, allowZoomOut = true) {
+        const transform = this.computeZoomToTransform(toMakeVisible, allowZoomIn, allowZoomOut);
         return new Viewport.ViewportTransform(transform);
-    };
-    var _inverseTransform, _a;
-    // Command that translates/scales the viewport.
-    Viewport.ViewportTransform = (_a = /** @class */ (function (_super) {
-            __extends(class_1, _super);
-            function class_1(transform) {
-                var _this = _super.call(this) || this;
-                _this.transform = transform;
-                _inverseTransform.set(_this, void 0);
-                __classPrivateFieldSet(_this, _inverseTransform, transform.inverse(), "f");
-                return _this;
+    }
+}
+exports.Viewport = Viewport;
+// Command that translates/scales the viewport.
+Viewport.ViewportTransform = (_a = class extends ViewportTransform {
+        constructor(transform) {
+            super();
+            this.transform = transform;
+            _inverseTransform.set(this, void 0);
+            __classPrivateFieldSet(this, _inverseTransform, transform.inverse(), "f");
+        }
+        apply(editor) {
+            const viewport = editor.viewport;
+            viewport.resetTransform(viewport.transform.rightMul(this.transform));
+            editor.queueRerender();
+        }
+        unapply(editor) {
+            const viewport = editor.viewport;
+            viewport.resetTransform(viewport.transform.rightMul(__classPrivateFieldGet(this, _inverseTransform, "f")));
+            editor.queueRerender();
+        }
+        description(editor, localizationTable) {
+            const result = [];
+            // Describe the transformation's affect on the viewport (note that transformation transforms
+            // the **elements** within the viewport). Assumes the transformation only does rotation/scale/translation.
+            const origVec = editor.viewport.visibleRect.center;
+            const linearTransformedVec = this.transform.transformVec3(math_1.Vec2.unitX);
+            const affineTransformedVec = this.transform.transformVec2(origVec);
+            const scale = linearTransformedVec.magnitude();
+            const rotation = 180 / Math.PI * linearTransformedVec.angle();
+            const translation = affineTransformedVec.minus(origVec);
+            if (scale > 1.2) {
+                result.push(localizationTable.zoomedIn);
+            }
+            else if (scale < 0.8) {
+                result.push(localizationTable.zoomedOut);
+            }
+            if (Math.floor(Math.abs(rotation)) > 0) {
+                result.push(localizationTable.rotatedBy(Math.round(rotation)));
+            }
+            const minTranslation = 1e-4;
+            if (translation.x > minTranslation) {
+                result.push(localizationTable.movedLeft);
             }
-            class_1.prototype.apply = function (editor) {
-                var viewport = editor.viewport;
-                viewport.resetTransform(viewport.transform.rightMul(this.transform));
-                editor.queueRerender();
-            };
-            class_1.prototype.unapply = function (editor) {
-                var viewport = editor.viewport;
-                viewport.resetTransform(viewport.transform.rightMul(__classPrivateFieldGet(this, _inverseTransform, "f")));
-                editor.queueRerender();
-            };
-            class_1.prototype.description = function (editor, localizationTable) {
-                var result = [];
-                // Describe the transformation's affect on the viewport (note that transformation transforms
-                // the **elements** within the viewport). Assumes the transformation only does rotation/scale/translation.
-                var origVec = editor.viewport.visibleRect.center;
-                var linearTransformedVec = this.transform.transformVec3(Vec2_1.Vec2.unitX);
-                var affineTransformedVec = this.transform.transformVec2(origVec);
-                var scale = linearTransformedVec.magnitude();
-                var rotation = 180 / Math.PI * linearTransformedVec.angle();
-                var translation = affineTransformedVec.minus(origVec);
-                if (scale > 1.2) {
-                    result.push(localizationTable.zoomedIn);
-                }
-                else if (scale < 0.8) {
-                    result.push(localizationTable.zoomedOut);
-                }
-                if (Math.floor(Math.abs(rotation)) > 0) {
-                    result.push(localizationTable.rotatedBy(Math.round(rotation)));
-                }
-                var minTranslation = 1e-4;
-                if (translation.x > minTranslation) {
-                    result.push(localizationTable.movedLeft);
-                }
-                else if (translation.x < -minTranslation) {
-                    result.push(localizationTable.movedRight);
-                }
-                if (translation.y < -minTranslation) {
-                    result.push(localizationTable.movedDown);
-                }
-                else if (translation.y > minTranslation) {
-                    result.push(localizationTable.movedUp);
-                }
-                return result.join('; ');
-            };
-            return class_1;
-        }(ViewportTransform)),
-        _inverseTransform = new WeakMap(),
-        _a);
-    return Viewport;
-}());
+            else if (translation.x < -minTranslation) {
+                result.push(localizationTable.movedRight);
+            }
+            if (translation.y < -minTranslation) {
+                result.push(localizationTable.movedDown);
+            }
+            else if (translation.y > minTranslation) {
+                result.push(localizationTable.movedUp);
+            }
+            return result.join('; ');
+        }
+    },
+    _inverseTransform = new WeakMap(),
+    _a);
 exports.default = Viewport;

package/dist/cjs/bundle/bundled.js

@@ -14,8 +14,11 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 require("../styles");
-var Editor_1 = require("../Editor");
+const Editor_1 = __importDefault(require("../Editor"));
 __exportStar(require("../lib"), exports);
 exports.default = Editor_1.default;