js-draw 0.25.0 → 1.0.0

package/dist/cjs/tools/SelectionTool/Selection.js

@@ -3,95 +3,59 @@
  * @internal
  * @packageDocumentation
  */
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
     }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var _this = this;
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-var SerializableCommand_1 = require("../../commands/SerializableCommand");
-var Mat33_1 = require("../../math/Mat33");
-var Rect2_1 = require("../../math/shapes/Rect2");
-var Vec2_1 = require("../../math/Vec2");
-var SelectionHandle_1 = require("./SelectionHandle");
-var SelectionTool_1 = require("./SelectionTool");
-var Viewport_1 = require("../../Viewport");
-var Erase_1 = require("../../commands/Erase");
-var Duplicate_1 = require("../../commands/Duplicate");
-var TransformMode_1 = require("./TransformMode");
-var types_1 = require("./types");
-var EditorImage_1 = require("../../EditorImage");
-var updateChunkSize = 100;
-var maxPreviewElemCount = 500;
+const SerializableCommand_1 = __importDefault(require("../../commands/SerializableCommand"));
+const math_1 = require("@js-draw/math");
+const SelectionHandle_1 = __importStar(require("./SelectionHandle"));
+const SelectionTool_1 = require("./SelectionTool");
+const Viewport_1 = __importDefault(require("../../Viewport"));
+const Erase_1 = __importDefault(require("../../commands/Erase"));
+const Duplicate_1 = __importDefault(require("../../commands/Duplicate"));
+const TransformMode_1 = require("./TransformMode");
+const types_1 = require("./types");
+const EditorImage_1 = __importDefault(require("../../EditorImage"));
+const updateChunkSize = 100;
+const maxPreviewElemCount = 500;
 // @internal
-var Selection = /** @class */ (function () {
-    function Selection(startPoint, editor) {
-        var _this = this;
+class Selection {
+    constructor(startPoint, editor) {
         this.editor = editor;
-        this.transform = Mat33_1.default.identity;
+        this.transform = math_1.Mat33.identity;
         this.selectedElems = [];
         this.hasParent = true;
         // Maps IDs to whether we removed the component from the image
         this.removedFromImage = {};
         this.targetHandle = null;
         this.backgroundDragging = false;
-        this.originalRegion = new Rect2_1.default(startPoint.x, startPoint.y, 0, 0);
+        this.selectionDuplicatedAnimationTimeout = null;
+        this.originalRegion = new math_1.Rect2(startPoint.x, startPoint.y, 0, 0);
         this.transformers = {
             drag: new TransformMode_1.DragTransformer(editor, this),
             resize: new TransformMode_1.ResizeTransformer(editor, this),
@@ -99,156 +63,123 @@ var Selection = /** @class */ (function () {
         };
         this.container = document.createElement('div');
         this.backgroundElem = document.createElement('div');
-        this.backgroundElem.classList.add("".concat(SelectionTool_1.cssPrefix, "selection-background"));
+        this.backgroundElem.classList.add(`${SelectionTool_1.cssPrefix}selection-background`);
         this.container.appendChild(this.backgroundElem);
-        var resizeHorizontalHandle = new SelectionHandle_1.default(SelectionHandle_1.HandleShape.Square, Vec2_1.Vec2.of(1, 0.5), this, function (startPoint) { return _this.transformers.resize.onDragStart(startPoint, types_1.ResizeMode.HorizontalOnly); }, function (currentPoint) { return _this.transformers.resize.onDragUpdate(currentPoint); }, function () { return _this.transformers.resize.onDragEnd(); });
-        var resizeVerticalHandle = new SelectionHandle_1.default(SelectionHandle_1.HandleShape.Square, Vec2_1.Vec2.of(0.5, 1), this, function (startPoint) { return _this.transformers.resize.onDragStart(startPoint, types_1.ResizeMode.VerticalOnly); }, function (currentPoint) { return _this.transformers.resize.onDragUpdate(currentPoint); }, function () { return _this.transformers.resize.onDragEnd(); });
-        var resizeBothHandle = new SelectionHandle_1.default(SelectionHandle_1.HandleShape.Square, Vec2_1.Vec2.of(1, 1), this, function (startPoint) { return _this.transformers.resize.onDragStart(startPoint, types_1.ResizeMode.Both); }, function (currentPoint) { return _this.transformers.resize.onDragUpdate(currentPoint); }, function () { return _this.transformers.resize.onDragEnd(); });
-        var rotationHandle = new SelectionHandle_1.default(SelectionHandle_1.HandleShape.Circle, Vec2_1.Vec2.of(0.5, 0), this, function (startPoint) { return _this.transformers.rotate.onDragStart(startPoint); }, function (currentPoint) { return _this.transformers.rotate.onDragUpdate(currentPoint); }, function () { return _this.transformers.rotate.onDragEnd(); });
+        const resizeHorizontalHandle = new SelectionHandle_1.default(SelectionHandle_1.HandleShape.Square, math_1.Vec2.of(1, 0.5), this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, types_1.ResizeMode.HorizontalOnly), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
+        const resizeVerticalHandle = new SelectionHandle_1.default(SelectionHandle_1.HandleShape.Square, math_1.Vec2.of(0.5, 1), this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, types_1.ResizeMode.VerticalOnly), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
+        const resizeBothHandle = new SelectionHandle_1.default(SelectionHandle_1.HandleShape.Square, math_1.Vec2.of(1, 1), this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, types_1.ResizeMode.Both), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
+        const rotationHandle = new SelectionHandle_1.default(SelectionHandle_1.HandleShape.Circle, math_1.Vec2.of(0.5, 0), this, this.editor.viewport, (startPoint) => this.transformers.rotate.onDragStart(startPoint), (currentPoint) => this.transformers.rotate.onDragUpdate(currentPoint), () => this.transformers.rotate.onDragEnd());
         this.handles = [
             resizeBothHandle,
             resizeHorizontalHandle,
             resizeVerticalHandle,
             rotationHandle,
         ];
-        for (var _i = 0, _b = this.handles; _i < _b.length; _i++) {
-            var handle = _b[_i];
+        for (const handle of this.handles) {
             handle.addTo(this.backgroundElem);
         }
     }
     // @internal Intended for unit tests
-    Selection.prototype.getBackgroundElem = function () {
+    getBackgroundElem() {
         return this.backgroundElem;
-    };
-    Selection.prototype.getTransform = function () {
+    }
+    getTransform() {
         return this.transform;
-    };
-    Object.defineProperty(Selection.prototype, "preTransformRegion", {
-        get: function () {
-            return this.originalRegion;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Selection.prototype, "region", {
-        get: function () {
-            // TODO: This currently assumes that the region rotates about its center.
-            // This may not be true.
-            var rotationMatrix = Mat33_1.default.zRotation(this.regionRotation, this.originalRegion.center);
-            var scaleAndTranslateMat = this.transform.rightMul(rotationMatrix.inverse());
-            return this.originalRegion.transformedBoundingBox(scaleAndTranslateMat);
-        },
-        enumerable: false,
-        configurable: true
-    });
+    }
+    get preTransformRegion() {
+        return this.originalRegion;
+    }
+    get region() {
+        // TODO: This currently assumes that the region rotates about its center.
+        // This may not be true.
+        const rotationMatrix = math_1.Mat33.zRotation(this.regionRotation, this.originalRegion.center);
+        const scaleAndTranslateMat = this.transform.rightMul(rotationMatrix.inverse());
+        return this.originalRegion.transformedBoundingBox(scaleAndTranslateMat);
+    }
     /**
      * Computes and returns the bounding box of the selection without
      * any additional padding. Computes directly from the elements that are selected.
      * @internal
      */
-    Selection.prototype.computeTightBoundingBox = function () {
-        var bbox = this.selectedElems.reduce(function (accumulator, elem) {
-            return (accumulator !== null && accumulator !== void 0 ? accumulator : elem.getBBox()).union(elem.getBBox());
+    computeTightBoundingBox() {
+        const bbox = this.selectedElems.reduce((accumulator, elem) => {
+            return (accumulator ?? elem.getBBox()).union(elem.getBBox());
         }, null);
-        return bbox !== null && bbox !== void 0 ? bbox : Rect2_1.default.empty;
-    };
-    Object.defineProperty(Selection.prototype, "regionRotation", {
-        get: function () {
-            return this.transform.transformVec3(Vec2_1.Vec2.unitX).angle();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Selection.prototype, "preTransformedScreenRegion", {
-        get: function () {
-            var _this = this;
-            var toScreen = function (vec) { return _this.editor.viewport.canvasToScreen(vec); };
-            return Rect2_1.default.fromCorners(toScreen(this.preTransformRegion.topLeft), toScreen(this.preTransformRegion.bottomRight));
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Selection.prototype, "preTransformedScreenRegionRotation", {
-        get: function () {
-            return this.editor.viewport.getRotationAngle();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Selection.prototype, "screenRegion", {
-        get: function () {
-            var toScreen = this.editor.viewport.canvasToScreenTransform;
-            var scaleFactor = this.editor.viewport.getScaleFactor();
-            var screenCenter = toScreen.transformVec2(this.region.center);
-            return new Rect2_1.default(screenCenter.x, screenCenter.y, scaleFactor * this.region.width, scaleFactor * this.region.height).translatedBy(this.region.size.times(-scaleFactor / 2));
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Selection.prototype, "screenRegionRotation", {
-        get: function () {
-            return this.regionRotation + this.editor.viewport.getRotationAngle();
-        },
-        enumerable: false,
-        configurable: true
-    });
+        return bbox ?? math_1.Rect2.empty;
+    }
+    get regionRotation() {
+        return this.transform.transformVec3(math_1.Vec2.unitX).angle();
+    }
+    get preTransformedScreenRegion() {
+        const toScreen = (vec) => this.editor.viewport.canvasToScreen(vec);
+        return math_1.Rect2.fromCorners(toScreen(this.preTransformRegion.topLeft), toScreen(this.preTransformRegion.bottomRight));
+    }
+    get preTransformedScreenRegionRotation() {
+        return this.editor.viewport.getRotationAngle();
+    }
+    get screenRegion() {
+        const toScreen = this.editor.viewport.canvasToScreenTransform;
+        const scaleFactor = this.editor.viewport.getScaleFactor();
+        const screenCenter = toScreen.transformVec2(this.region.center);
+        return new math_1.Rect2(screenCenter.x, screenCenter.y, scaleFactor * this.region.width, scaleFactor * this.region.height).translatedBy(this.region.size.times(-scaleFactor / 2));
+    }
+    get screenRegionRotation() {
+        return this.regionRotation + this.editor.viewport.getRotationAngle();
+    }
     // Applies, previews, but doesn't finalize the given transformation.
-    Selection.prototype.setTransform = function (transform, preview) {
-        if (preview === void 0) { preview = true; }
+    setTransform(transform, preview = true) {
         this.transform = transform;
         if (preview && this.hasParent) {
             this.scrollTo();
             this.previewTransformCmds();
         }
-    };
+    }
     // Applies the current transformation to the selection
-    Selection.prototype.finalizeTransform = function () {
-        var fullTransform = this.transform;
-        var selectedElems = this.selectedElems;
+    async finalizeTransform() {
+        const fullTransform = this.transform;
+        const selectedElems = this.selectedElems;
         // Reset for the next drag
         this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
-        this.transform = Mat33_1.default.identity;
+        this.transform = math_1.Mat33.identity;
         // Make the commands undo-able
-        this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
+        await this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
         // Clear renderings of any in-progress transformations
-        var wetInkRenderer = this.editor.display.getWetInkRenderer();
+        const wetInkRenderer = this.editor.display.getWetInkRenderer();
         wetInkRenderer.clear();
-    };
+    }
     // Preview the effects of the current transformation on the selection
-    Selection.prototype.previewTransformCmds = function () {
+    previewTransformCmds() {
         // Don't render what we're moving if it's likely to be slow.
         if (this.selectedElems.length > maxPreviewElemCount) {
             this.updateUI();
             return;
         }
-        var wetInkRenderer = this.editor.display.getWetInkRenderer();
+        const wetInkRenderer = this.editor.display.getWetInkRenderer();
         wetInkRenderer.clear();
         wetInkRenderer.pushTransform(this.transform);
-        var viewportVisibleRect = this.editor.viewport.visibleRect;
-        var visibleRect = viewportVisibleRect.transformedBoundingBox(this.transform.inverse());
-        for (var _i = 0, _b = this.selectedElems; _i < _b.length; _i++) {
-            var elem = _b[_i];
+        const viewportVisibleRect = this.editor.viewport.visibleRect;
+        const visibleRect = viewportVisibleRect.transformedBoundingBox(this.transform.inverse());
+        for (const elem of this.selectedElems) {
             elem.render(wetInkRenderer, visibleRect);
         }
         wetInkRenderer.popTransform();
         this.updateUI();
-    };
+    }
     // Find the objects corresponding to this in the document,
     // select them.
     // Returns false iff nothing was selected.
-    Selection.prototype.resolveToObjects = function () {
-        var _this = this;
-        var singleItemSelectionMode = false;
-        this.transform = Mat33_1.default.identity;
+    resolveToObjects() {
+        let singleItemSelectionMode = false;
+        this.transform = math_1.Mat33.identity;
         // Grow the rectangle, if necessary
         if (this.region.w === 0 || this.region.h === 0) {
-            var padding = this.editor.viewport.visibleRect.maxDimension / 200;
-            this.originalRegion = Rect2_1.default.bboxOf(this.region.corners, padding);
+            const padding = this.editor.viewport.visibleRect.maxDimension / 200;
+            this.originalRegion = math_1.Rect2.bboxOf(this.region.corners, padding);
             // Only select one item if the rectangle was very small.
             singleItemSelectionMode = true;
         }
-        this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(function (elem) {
-            return elem.intersectsRect(_this.region) && elem.isSelectable();
+        this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(elem => {
+            return elem.intersectsRect(this.region) && elem.isSelectable();
         });
         if (singleItemSelectionMode && this.selectedElems.length > 0) {
             this.selectedElems = [this.selectedElems[this.selectedElems.length - 1]];
@@ -259,51 +190,50 @@ var Selection = /** @class */ (function () {
         }
         this.updateUI();
         return true;
-    };
+    }
     // Recompute this' region from the selected elements.
     // Returns false if the selection is empty.
-    Selection.prototype.recomputeRegion = function () {
-        var newRegion = this.computeTightBoundingBox();
+    recomputeRegion() {
+        const newRegion = this.computeTightBoundingBox();
         if (!newRegion) {
             this.cancelSelection();
             return false;
         }
         this.originalRegion = newRegion;
-        var minSize = this.getMinCanvasSize();
+        const minSize = this.getMinCanvasSize();
         if (this.originalRegion.w < minSize || this.originalRegion.h < minSize) {
             // Add padding
-            var padding = minSize / 2;
-            this.originalRegion = Rect2_1.default.bboxOf(this.originalRegion.corners, padding);
+            const padding = minSize / 2;
+            this.originalRegion = math_1.Rect2.bboxOf(this.originalRegion.corners, padding);
         }
         return true;
-    };
-    Selection.prototype.getMinCanvasSize = function () {
-        var canvasHandleSize = SelectionHandle_1.handleSize / this.editor.viewport.getScaleFactor();
+    }
+    getMinCanvasSize() {
+        const canvasHandleSize = SelectionHandle_1.handleSize / this.editor.viewport.getScaleFactor();
         return canvasHandleSize * 2;
-    };
-    Selection.prototype.getSelectedItemCount = function () {
+    }
+    getSelectedItemCount() {
         return this.selectedElems.length;
-    };
+    }
     // @internal
-    Selection.prototype.updateUI = function () {
+    updateUI() {
         // Don't update old selections.
         if (!this.hasParent) {
             return;
         }
         // marginLeft, marginTop: Display relative to the top left of the selection overlay.
         // left, top don't work for this.
-        this.backgroundElem.style.marginLeft = "".concat(this.screenRegion.topLeft.x, "px");
-        this.backgroundElem.style.marginTop = "".concat(this.screenRegion.topLeft.y, "px");
-        this.backgroundElem.style.width = "".concat(this.screenRegion.width, "px");
-        this.backgroundElem.style.height = "".concat(this.screenRegion.height, "px");
-        var rotationDeg = this.screenRegionRotation * 180 / Math.PI;
-        this.backgroundElem.style.transform = "rotate(".concat(rotationDeg, "deg)");
+        this.backgroundElem.style.marginLeft = `${this.screenRegion.topLeft.x}px`;
+        this.backgroundElem.style.marginTop = `${this.screenRegion.topLeft.y}px`;
+        this.backgroundElem.style.width = `${this.screenRegion.width}px`;
+        this.backgroundElem.style.height = `${this.screenRegion.height}px`;
+        const rotationDeg = this.screenRegionRotation * 180 / Math.PI;
+        this.backgroundElem.style.transform = `rotate(${rotationDeg}deg)`;
         this.backgroundElem.style.transformOrigin = 'center';
-        for (var _i = 0, _b = this.handles; _i < _b.length; _i++) {
-            var handle = _b[_i];
+        for (const handle of this.handles) {
             handle.updatePosition();
         }
-    };
+    }
     // Add/remove the contents of this' seleciton from the editor.
     // Used to prevent previewed content from looking like duplicate content
     // while dragging.
@@ -312,22 +242,20 @@ var Selection = /** @class */ (function () {
     // the editor image is likely to be slow.)
     //
     // If removed from the image, selected elements are drawn as wet ink.
-    Selection.prototype.addRemoveSelectionFromImage = function (inImage) {
-        var _this = this;
+    addRemoveSelectionFromImage(inImage) {
         // Don't hide elements if doing so will be slow.
         if (!inImage && this.selectedElems.length > maxPreviewElemCount) {
             return;
         }
-        for (var _i = 0, _b = this.selectedElems; _i < _b.length; _i++) {
-            var elem = _b[_i];
-            var parent_1 = this.editor.image.findParent(elem);
-            if (!inImage && parent_1) {
+        for (const elem of this.selectedElems) {
+            const parent = this.editor.image.findParent(elem);
+            if (!inImage && parent) {
                 this.removedFromImage[elem.getId()] = true;
-                parent_1.remove();
+                parent.remove();
             }
             // If we're making things visible and the selected object wasn't previously
             // visible,
-            else if (!parent_1 && this.removedFromImage[elem.getId()]) {
+            else if (!parent && this.removedFromImage[elem.getId()]) {
                 EditorImage_1.default.addElement(elem).apply(this.editor);
                 this.removedFromImage[elem.getId()] = false;
                 delete this.removedFromImage[elem.getId()];
@@ -335,50 +263,59 @@ var Selection = /** @class */ (function () {
         }
         // Don't await queueRerender. If we're running in a test, the re-render might never
         // happen.
-        this.editor.queueRerender().then(function () {
+        this.editor.queueRerender().then(() => {
             if (!inImage) {
-                _this.previewTransformCmds();
+                this.previewTransformCmds();
             }
         });
-    };
-    Selection.prototype.removeDeletedElemsFromSelection = function () {
-        var _this = this;
+    }
+    removeDeletedElemsFromSelection() {
         // Remove any deleted elements from the selection.
-        this.selectedElems = this.selectedElems.filter(function (elem) {
-            var hasParent = !!_this.editor.image.findParent(elem);
+        this.selectedElems = this.selectedElems.filter(elem => {
+            const hasParent = !!this.editor.image.findParent(elem);
             // If we removed the element and haven't added it back yet, don't remove it
             // from the selection.
-            var weRemoved = _this.removedFromImage[elem.getId()];
+            const weRemoved = this.removedFromImage[elem.getId()];
             return hasParent || weRemoved;
         });
-    };
-    Selection.prototype.onDragStart = function (pointer, target) {
-        this.removeDeletedElemsFromSelection();
-        this.addRemoveSelectionFromImage(false);
-        for (var _i = 0, _b = this.handles; _i < _b.length; _i++) {
-            var handle = _b[_i];
-            if (handle.isTarget(target)) {
-                handle.handleDragStart(pointer);
+    }
+    onDragStart(pointer) {
+        // Clear the HTML selection (prevent HTML drag and drop being triggered by this drag)
+        document.getSelection()?.removeAllRanges();
+        this.targetHandle = null;
+        let result = false;
+        for (const handle of this.handles) {
+            if (handle.containsPoint(pointer.canvasPos)) {
                 this.targetHandle = handle;
-                return true;
+                result = true;
             }
         }
-        if (this.backgroundElem === target) {
+        this.backgroundDragging = false;
+        if (this.region.containsPoint(pointer.canvasPos)) {
             this.backgroundDragging = true;
+            result = true;
+        }
+        if (result) {
+            this.removeDeletedElemsFromSelection();
+            this.addRemoveSelectionFromImage(false);
+        }
+        if (this.targetHandle) {
+            this.targetHandle.handleDragStart(pointer);
+        }
+        if (this.backgroundDragging) {
             this.transformers.drag.onDragStart(pointer.canvasPos);
-            return true;
         }
-        return false;
-    };
-    Selection.prototype.onDragUpdate = function (pointer) {
+        return result;
+    }
+    onDragUpdate(pointer) {
         if (this.backgroundDragging) {
             this.transformers.drag.onDragUpdate(pointer.canvasPos);
         }
         if (this.targetHandle) {
             this.targetHandle.handleDragUpdate(pointer);
         }
-    };
-    Selection.prototype.onDragEnd = function () {
+    }
+    onDragEnd() {
         if (this.backgroundDragging) {
             this.transformers.drag.onDragEnd();
         }
@@ -389,214 +326,170 @@ var Selection = /** @class */ (function () {
         this.backgroundDragging = false;
         this.targetHandle = null;
         this.updateUI();
-    };
-    Selection.prototype.onDragCancel = function () {
+    }
+    onDragCancel() {
         this.backgroundDragging = false;
         this.targetHandle = null;
-        this.setTransform(Mat33_1.default.identity);
+        this.setTransform(math_1.Mat33.identity);
         this.addRemoveSelectionFromImage(true);
-    };
+    }
     // Scroll the viewport to this. Does not zoom
-    Selection.prototype.scrollTo = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var screenRect, closestPoint, screenDelta, delta;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (this.selectedElems.length === 0) {
-                            return [2 /*return*/];
-                        }
-                        screenRect = new Rect2_1.default(0, 0, this.editor.display.width, this.editor.display.height);
-                        if (!!screenRect.containsPoint(this.screenRegion.center)) return [3 /*break*/, 3];
-                        closestPoint = screenRect.getClosestPointOnBoundaryTo(this.screenRegion.center);
-                        screenDelta = this.screenRegion.center.minus(closestPoint);
-                        delta = this.editor.viewport.screenToCanvasTransform.transformVec3(screenDelta);
-                        return [4 /*yield*/, this.editor.dispatchNoAnnounce(Viewport_1.default.transformBy(Mat33_1.default.translation(delta.times(-1))), false)];
-                    case 1:
-                        _b.sent();
-                        // Re-renders clear wet ink, so we need to re-draw the preview
-                        // after the full re-render.
-                        return [4 /*yield*/, this.editor.queueRerender()];
-                    case 2:
-                        // Re-renders clear wet ink, so we need to re-draw the preview
-                        // after the full re-render.
-                        _b.sent();
-                        this.previewTransformCmds();
-                        _b.label = 3;
-                    case 3: return [2 /*return*/];
-                }
-            });
-        });
-    };
-    Selection.prototype.deleteSelectedObjects = function () {
+    async scrollTo() {
+        if (this.selectedElems.length === 0) {
+            return;
+        }
+        const screenRect = new math_1.Rect2(0, 0, this.editor.display.width, this.editor.display.height);
+        if (!screenRect.containsPoint(this.screenRegion.center)) {
+            const closestPoint = screenRect.getClosestPointOnBoundaryTo(this.screenRegion.center);
+            const screenDelta = this.screenRegion.center.minus(closestPoint);
+            const delta = this.editor.viewport.screenToCanvasTransform.transformVec3(screenDelta);
+            await this.editor.dispatchNoAnnounce(Viewport_1.default.transformBy(math_1.Mat33.translation(delta.times(-1))), false);
+            // Re-renders clear wet ink, so we need to re-draw the preview
+            // after the full re-render.
+            await this.editor.queueRerender();
+            this.previewTransformCmds();
+        }
+    }
+    deleteSelectedObjects() {
         if (this.backgroundDragging || this.targetHandle) {
             this.onDragEnd();
         }
         return new Erase_1.default(this.selectedElems);
-    };
-    Selection.prototype.duplicateSelectedObjects = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var wasTransforming, tmpApplyCommand, selectionToUpdate, duplicateCommand;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        wasTransforming = this.backgroundDragging || this.targetHandle;
-                        tmpApplyCommand = null;
-                        if (!wasTransforming) return [3 /*break*/, 2];
-                        selectionToUpdate = null;
-                        tmpApplyCommand = new Selection.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.transform);
-                        // Transform to ensure that the duplicates are in the correct location
-                        return [4 /*yield*/, tmpApplyCommand.apply(this.editor)];
-                    case 1:
-                        // Transform to ensure that the duplicates are in the correct location
-                        _b.sent();
-                        // Show items again
-                        this.addRemoveSelectionFromImage(true);
-                        _b.label = 2;
-                    case 2:
-                        duplicateCommand = new Duplicate_1.default(this.selectedElems);
-                        if (!wasTransforming) return [3 /*break*/, 4];
-                        // Move the selected objects back to the correct location.
-                        return [4 /*yield*/, (tmpApplyCommand === null || tmpApplyCommand === void 0 ? void 0 : tmpApplyCommand.unapply(this.editor))];
-                    case 3:
-                        // Move the selected objects back to the correct location.
-                        _b.sent();
-                        this.addRemoveSelectionFromImage(false);
-                        this.previewTransformCmds();
-                        this.updateUI();
-                        _b.label = 4;
-                    case 4: return [2 /*return*/, duplicateCommand];
-                }
-            });
-        });
-    };
-    Selection.prototype.addTo = function (elem) {
+    }
+    runSelectionDuplicatedAnimation() {
+        if (this.selectionDuplicatedAnimationTimeout) {
+            clearTimeout(this.selectionDuplicatedAnimationTimeout);
+        }
+        const animationDuration = 400; // ms
+        this.backgroundElem.style.animation = `${animationDuration}ms ease selection-duplicated-animation`;
+        this.selectionDuplicatedAnimationTimeout = setTimeout(() => {
+            this.backgroundElem.style.animation = '';
+            this.selectionDuplicatedAnimationTimeout = null;
+        }, animationDuration);
+    }
+    async duplicateSelectedObjects() {
+        const wasTransforming = this.backgroundDragging || this.targetHandle;
+        let tmpApplyCommand = null;
+        if (!wasTransforming) {
+            this.runSelectionDuplicatedAnimation();
+        }
+        if (wasTransforming) {
+            // Don't update the selection's focus when redoing/undoing
+            const selectionToUpdate = null;
+            tmpApplyCommand = new Selection.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.transform);
+            // Transform to ensure that the duplicates are in the correct location
+            await tmpApplyCommand.apply(this.editor);
+            // Show items again
+            this.addRemoveSelectionFromImage(true);
+        }
+        const duplicateCommand = new Duplicate_1.default(this.selectedElems);
+        if (wasTransforming) {
+            // Move the selected objects back to the correct location.
+            await tmpApplyCommand?.unapply(this.editor);
+            this.addRemoveSelectionFromImage(false);
+            this.previewTransformCmds();
+            this.updateUI();
+        }
+        return duplicateCommand;
+    }
+    addTo(elem) {
         if (this.container.parentElement) {
             this.container.remove();
         }
         elem.appendChild(this.container);
         this.hasParent = true;
-    };
-    Selection.prototype.setToPoint = function (point) {
+    }
+    setToPoint(point) {
         this.originalRegion = this.originalRegion.grownToPoint(point);
         this.updateUI();
-    };
-    Selection.prototype.cancelSelection = function () {
+    }
+    cancelSelection() {
         if (this.container.parentElement) {
             this.container.remove();
         }
-        this.originalRegion = Rect2_1.default.empty;
+        this.originalRegion = math_1.Rect2.empty;
         this.hasParent = false;
-    };
-    Selection.prototype.setSelectedObjects = function (objects, bbox) {
+    }
+    setSelectedObjects(objects, bbox) {
         this.addRemoveSelectionFromImage(true);
         this.originalRegion = bbox;
-        this.selectedElems = objects.filter(function (object) { return object.isSelectable(); });
+        this.selectedElems = objects.filter(object => object.isSelectable());
         this.updateUI();
-    };
-    Selection.prototype.getSelectedObjects = function () {
-        return this.selectedElems;
-    };
-    var _a;
-    _a = Selection;
-    (function () {
-        SerializableCommand_1.default.register('selection-tool-transform', function (json, _editor) {
-            var _b;
-            // The selection box is lost when serializing/deserializing. No need to store box rotation
-            var fullTransform = new (Mat33_1.default.bind.apply(Mat33_1.default, __spreadArray([void 0], json.transform, false)))();
-            var elemIds = ((_b = json.elems) !== null && _b !== void 0 ? _b : []);
-            return new _a.ApplyTransformationCommand(null, elemIds, fullTransform);
-        });
-    })();
-    Selection.ApplyTransformationCommand = /** @class */ (function (_super) {
-        __extends(class_1, _super);
-        function class_1(selection, 
-        // If a `string[]`, selectedElems is a list of element IDs.
-        selectedElems, 
-        // Full transformation used to transform elements.
-        fullTransform) {
-            var _this = _super.call(this, 'selection-tool-transform') || this;
-            _this.selection = selection;
-            _this.fullTransform = fullTransform;
-            var isIDList = function (arr) {
-                return typeof arr[0] === 'string';
-            };
-            // If a list of element IDs,
-            if (isIDList(selectedElems)) {
-                _this.selectedElemIds = selectedElems;
-            }
-            else {
-                _this.selectedElemIds = selectedElems.map(function (elem) { return elem.getId(); });
-                _this.transformCommands = selectedElems.map(function (elem) {
-                    return elem.transformBy(_this.fullTransform);
-                });
-            }
-            return _this;
-        }
-        class_1.prototype.resolveToElems = function (editor) {
-            var _this = this;
-            if (this.transformCommands) {
-                return;
-            }
-            this.transformCommands = this.selectedElemIds.map(function (id) {
-                var elem = editor.image.lookupElement(id);
-                if (!elem) {
-                    throw new Error("Unable to find element with ID, ".concat(id, "."));
-                }
-                return elem.transformBy(_this.fullTransform);
-            });
-        };
-        class_1.prototype.apply = function (editor) {
-            var _b, _c, _d, _e, _f;
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_g) {
-                    switch (_g.label) {
-                        case 0:
-                            this.resolveToElems(editor);
-                            (_b = this.selection) === null || _b === void 0 ? void 0 : _b.setTransform(this.fullTransform, false);
-                            (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
-                            return [4 /*yield*/, editor.asyncApplyCommands(this.transformCommands, updateChunkSize)];
-                        case 1:
-                            _g.sent();
-                            (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33_1.default.identity, false);
-                            (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
-                            (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();
-                            return [2 /*return*/];
-                    }
-                });
-            });
+    }
+    getSelectedObjects() {
+        return [...this.selectedElems];
+    }
+}
+_a = Selection;
+(() => {
+    SerializableCommand_1.default.register('selection-tool-transform', (json, _editor) => {
+        // The selection box is lost when serializing/deserializing. No need to store box rotation
+        const fullTransform = new math_1.Mat33(...json.transform);
+        const elemIds = (json.elems ?? []);
+        return new _a.ApplyTransformationCommand(null, elemIds, fullTransform);
+    });
+})();
+Selection.ApplyTransformationCommand = class extends SerializableCommand_1.default {
+    constructor(selection, 
+    // If a `string[]`, selectedElems is a list of element IDs.
+    selectedElems, 
+    // Full transformation used to transform elements.
+    fullTransform) {
+        super('selection-tool-transform');
+        this.selection = selection;
+        this.fullTransform = fullTransform;
+        const isIDList = (arr) => {
+            return typeof arr[0] === 'string';
         };
-        class_1.prototype.unapply = function (editor) {
-            var _b, _c, _d, _e, _f;
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_g) {
-                    switch (_g.label) {
-                        case 0:
-                            this.resolveToElems(editor);
-                            (_b = this.selection) === null || _b === void 0 ? void 0 : _b.setTransform(this.fullTransform.inverse(), false);
-                            (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
-                            return [4 /*yield*/, editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize, true)];
-                        case 1:
-                            _g.sent();
-                            (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33_1.default.identity, false);
-                            (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
-                            (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();
-                            return [2 /*return*/];
-                    }
-                });
+        // If a list of element IDs,
+        if (isIDList(selectedElems)) {
+            this.selectedElemIds = selectedElems;
+        }
+        else {
+            this.selectedElemIds = selectedElems.map(elem => elem.getId());
+            this.transformCommands = selectedElems.map(elem => {
+                return elem.transformBy(this.fullTransform);
             });
+        }
+    }
+    resolveToElems(editor) {
+        if (this.transformCommands) {
+            return;
+        }
+        this.transformCommands = this.selectedElemIds.map(id => {
+            const elem = editor.image.lookupElement(id);
+            if (!elem) {
+                throw new Error(`Unable to find element with ID, ${id}.`);
+            }
+            return elem.transformBy(this.fullTransform);
+        });
+    }
+    async apply(editor) {
+        this.resolveToElems(editor);
+        this.selection?.setTransform(this.fullTransform, false);
+        this.selection?.updateUI();
+        await editor.asyncApplyCommands(this.transformCommands, updateChunkSize);
+        this.selection?.setTransform(math_1.Mat33.identity, false);
+        this.selection?.recomputeRegion();
+        this.selection?.updateUI();
+    }
+    async unapply(editor) {
+        this.resolveToElems(editor);
+        this.selection?.setTransform(this.fullTransform.inverse(), false);
+        this.selection?.updateUI();
+        await editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize, true);
+        this.selection?.setTransform(math_1.Mat33.identity, false);
+        this.selection?.recomputeRegion();
+        this.selection?.updateUI();
+    }
+    serializeToJSON() {
+        return {
+            elems: this.selectedElemIds,
+            transform: this.fullTransform.toArray(),
         };
-        class_1.prototype.serializeToJSON = function () {
-            return {
-                elems: this.selectedElemIds,
-                transform: this.fullTransform.toArray(),
-            };
-        };
-        class_1.prototype.description = function (_editor, localizationTable) {
-            return localizationTable.transformedElements(this.selectedElemIds.length);
-        };
-        return class_1;
-    }(SerializableCommand_1.default));
-    return Selection;
-}());
+    }
+    description(_editor, localizationTable) {
+        return localizationTable.transformedElements(this.selectedElemIds.length);
+    }
+};
 exports.default = Selection;