js-draw 0.23.1 → 0.24.0

package/dist/mjs/tools/SelectionTool/Selection.mjs

@@ -0,0 +1,600 @@
+/**
+ * @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 __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 _this = this;
+import  SerializableCommand  from '../../commands/SerializableCommand.mjs';
+import  Mat33  from '../../math/Mat33.mjs';
+import  Rect2  from '../../math/shapes/Rect2.mjs';
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  SelectionHandle, { HandleShape, handleSize }  from './SelectionHandle.mjs';
+import  { cssPrefix }  from './SelectionTool.mjs';
+import  Viewport  from '../../Viewport.mjs';
+import  Erase  from '../../commands/Erase.mjs';
+import  Duplicate  from '../../commands/Duplicate.mjs';
+import  { DragTransformer, ResizeTransformer, RotateTransformer }  from './TransformMode.mjs';
+import  { ResizeMode }  from './types.mjs';
+import  EditorImage  from '../../EditorImage.mjs';
+var updateChunkSize = 100;
+var maxPreviewElemCount = 500;
+// @internal
+var Selection = /** @class */ (function () {
+    function Selection(startPoint, editor) {
+        var _this = this;
+        this.editor = editor;
+        this.transform = 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(startPoint.x, startPoint.y, 0, 0);
+        this.transformers = {
+            drag: new DragTransformer(editor, this),
+            resize: new ResizeTransformer(editor, this),
+            rotate: new RotateTransformer(editor, this),
+        };
+        this.container = document.createElement('div');
+        this.backgroundElem = document.createElement('div');
+        this.backgroundElem.classList.add("".concat(cssPrefix, "selection-background"));
+        this.container.appendChild(this.backgroundElem);
+        var resizeHorizontalHandle = new SelectionHandle(HandleShape.Square, Vec2.of(1, 0.5), this, function (startPoint) { return _this.transformers.resize.onDragStart(startPoint, ResizeMode.HorizontalOnly); }, function (currentPoint) { return _this.transformers.resize.onDragUpdate(currentPoint); }, function () { return _this.transformers.resize.onDragEnd(); });
+        var resizeVerticalHandle = new SelectionHandle(HandleShape.Square, Vec2.of(0.5, 1), this, function (startPoint) { return _this.transformers.resize.onDragStart(startPoint, ResizeMode.VerticalOnly); }, function (currentPoint) { return _this.transformers.resize.onDragUpdate(currentPoint); }, function () { return _this.transformers.resize.onDragEnd(); });
+        var resizeBothHandle = new SelectionHandle(HandleShape.Square, Vec2.of(1, 1), this, function (startPoint) { return _this.transformers.resize.onDragStart(startPoint, ResizeMode.Both); }, function (currentPoint) { return _this.transformers.resize.onDragUpdate(currentPoint); }, function () { return _this.transformers.resize.onDragEnd(); });
+        var rotationHandle = new SelectionHandle(HandleShape.Circle, 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(); });
+        this.handles = [
+            resizeBothHandle,
+            resizeHorizontalHandle,
+            resizeVerticalHandle,
+            rotationHandle,
+        ];
+        for (var _i = 0, _b = this.handles; _i < _b.length; _i++) {
+            var handle = _b[_i];
+            handle.addTo(this.backgroundElem);
+        }
+    }
+    // @internal Intended for unit tests
+    Selection.prototype.getBackgroundElem = function () {
+        return this.backgroundElem;
+    };
+    Selection.prototype.getTransform = function () {
+        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.zRotation(this.regionRotation, this.originalRegion.center);
+            var scaleAndTranslateMat = this.transform.rightMul(rotationMatrix.inverse());
+            return this.originalRegion.transformedBoundingBox(scaleAndTranslateMat);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * 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());
+        }, null);
+        return bbox !== null && bbox !== void 0 ? bbox : Rect2.empty;
+    };
+    Object.defineProperty(Selection.prototype, "regionRotation", {
+        get: function () {
+            return this.transform.transformVec3(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.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(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
+    });
+    // Applies, previews, but doesn't finalize the given transformation.
+    Selection.prototype.setTransform = function (transform, preview) {
+        if (preview === void 0) { 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;
+        // Reset for the next drag
+        this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
+        this.transform = Mat33.identity;
+        // Make the commands undo-able
+        this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
+        // Clear renderings of any in-progress transformations
+        var wetInkRenderer = this.editor.display.getWetInkRenderer();
+        wetInkRenderer.clear();
+    };
+    // Preview the effects of the current transformation on the selection
+    Selection.prototype.previewTransformCmds = function () {
+        // 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();
+        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];
+            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.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.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();
+        });
+        if (singleItemSelectionMode && this.selectedElems.length > 0) {
+            this.selectedElems = [this.selectedElems[this.selectedElems.length - 1]];
+        }
+        // Find the bounding box of all selected elements.
+        if (!this.recomputeRegion()) {
+            return false;
+        }
+        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();
+        if (!newRegion) {
+            this.cancelSelection();
+            return false;
+        }
+        this.originalRegion = newRegion;
+        var minSize = this.getMinCanvasSize();
+        if (this.originalRegion.w < minSize || this.originalRegion.h < minSize) {
+            // Add padding
+            var padding = minSize / 2;
+            this.originalRegion = Rect2.bboxOf(this.originalRegion.corners, padding);
+        }
+        return true;
+    };
+    Selection.prototype.getMinCanvasSize = function () {
+        var canvasHandleSize = handleSize / this.editor.viewport.getScaleFactor();
+        return canvasHandleSize * 2;
+    };
+    Selection.prototype.getSelectedItemCount = function () {
+        return this.selectedElems.length;
+    };
+    // @internal
+    Selection.prototype.updateUI = function () {
+        // 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.transformOrigin = 'center';
+        for (var _i = 0, _b = this.handles; _i < _b.length; _i++) {
+            var handle = _b[_i];
+            handle.updatePosition();
+        }
+    };
+    // Add/remove the contents of this' seleciton from the editor.
+    // Used to prevent previewed content from looking like duplicate content
+    // while dragging.
+    //
+    // Does nothing if a large number of elements are selected (and so modifying
+    // 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;
+        // 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) {
+                this.removedFromImage[elem.getId()] = true;
+                parent_1.remove();
+            }
+            // If we're making things visible and the selected object wasn't previously
+            // visible,
+            else if (!parent_1 && this.removedFromImage[elem.getId()]) {
+                EditorImage.addElement(elem).apply(this.editor);
+                this.removedFromImage[elem.getId()] = false;
+                delete this.removedFromImage[elem.getId()];
+            }
+        }
+        // Don't await queueRerender. If we're running in a test, the re-render might never
+        // happen.
+        this.editor.queueRerender().then(function () {
+            if (!inImage) {
+                _this.previewTransformCmds();
+            }
+        });
+    };
+    Selection.prototype.removeDeletedElemsFromSelection = function () {
+        var _this = this;
+        // Remove any deleted elements from the selection.
+        this.selectedElems = this.selectedElems.filter(function (elem) {
+            var 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()];
+            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);
+                this.targetHandle = handle;
+                return true;
+            }
+        }
+        if (this.backgroundElem === target) {
+            this.backgroundDragging = true;
+            this.transformers.drag.onDragStart(pointer.canvasPos);
+            return true;
+        }
+        return false;
+    };
+    Selection.prototype.onDragUpdate = function (pointer) {
+        if (this.backgroundDragging) {
+            this.transformers.drag.onDragUpdate(pointer.canvasPos);
+        }
+        if (this.targetHandle) {
+            this.targetHandle.handleDragUpdate(pointer);
+        }
+    };
+    Selection.prototype.onDragEnd = function () {
+        if (this.backgroundDragging) {
+            this.transformers.drag.onDragEnd();
+        }
+        else if (this.targetHandle) {
+            this.targetHandle.handleDragEnd();
+        }
+        this.addRemoveSelectionFromImage(true);
+        this.backgroundDragging = false;
+        this.targetHandle = null;
+        this.updateUI();
+    };
+    Selection.prototype.onDragCancel = function () {
+        this.backgroundDragging = false;
+        this.targetHandle = null;
+        this.setTransform(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(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.transformBy(Mat33.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 () {
+        if (this.backgroundDragging || this.targetHandle) {
+            this.onDragEnd();
+        }
+        return new Erase(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(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) {
+        if (this.container.parentElement) {
+            this.container.remove();
+        }
+        elem.appendChild(this.container);
+        this.hasParent = true;
+    };
+    Selection.prototype.setToPoint = function (point) {
+        this.originalRegion = this.originalRegion.grownToPoint(point);
+        this.updateUI();
+    };
+    Selection.prototype.cancelSelection = function () {
+        if (this.container.parentElement) {
+            this.container.remove();
+        }
+        this.originalRegion = Rect2.empty;
+        this.hasParent = false;
+    };
+    Selection.prototype.setSelectedObjects = function (objects, bbox) {
+        this.addRemoveSelectionFromImage(true);
+        this.originalRegion = bbox;
+        this.selectedElems = objects.filter(function (object) { return object.isSelectable(); });
+        this.updateUI();
+    };
+    Selection.prototype.getSelectedObjects = function () {
+        return this.selectedElems;
+    };
+    var _a;
+    _a = Selection;
+    (function () {
+        SerializableCommand.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.bind.apply(Mat33, __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.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*/];
+                    }
+                });
+            });
+        };
+        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.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*/];
+                    }
+                });
+            });
+        };
+        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));
+    return Selection;
+}());
+export default Selection;

package/dist/mjs/tools/SelectionTool/SelectionHandle.mjs

@@ -0,0 +1,83 @@
+import  { assertUnreachable }  from '../../util/assertions.mjs';
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  { cssPrefix }  from './SelectionTool.mjs';
+export var HandleShape;
+(function (HandleShape) {
+    HandleShape[HandleShape["Circle"] = 0] = "Circle";
+    HandleShape[HandleShape["Square"] = 1] = "Square";
+})(HandleShape || (HandleShape = {}));
+export var handleSize = 30;
+var SelectionHandle = /** @class */ (function () {
+    // Bounding box in screen coordinates.
+    function SelectionHandle(shape, parentSide, parent, onDragStart, onDragUpdate, onDragEnd) {
+        this.shape = shape;
+        this.parentSide = parentSide;
+        this.parent = parent;
+        this.onDragStart = onDragStart;
+        this.onDragUpdate = onDragUpdate;
+        this.onDragEnd = onDragEnd;
+        this.dragLastPos = null;
+        this.element = document.createElement('div');
+        this.element.classList.add("".concat(cssPrefix, "handle"));
+        switch (shape) {
+            case HandleShape.Circle:
+                this.element.classList.add("".concat(cssPrefix, "circle"));
+                break;
+            case HandleShape.Square:
+                this.element.classList.add("".concat(cssPrefix, "square"));
+                break;
+            default:
+                assertUnreachable(shape);
+        }
+        this.updatePosition();
+    }
+    /**
+     * Adds this to `container`, where `conatiner` should be the background/selection
+     * element visible on the screen.
+     */
+    SelectionHandle.prototype.addTo = function (container) {
+        container.appendChild(this.element);
+    };
+    SelectionHandle.prototype.updatePosition = function () {
+        var parentRect = this.parent.screenRegion;
+        var size = Vec2.of(handleSize, handleSize);
+        var topLeft = parentRect.size.scale(this.parentSide)
+            // Center
+            .minus(size.times(1 / 2));
+        // Position within the selection box.
+        this.element.style.marginLeft = "".concat(topLeft.x, "px");
+        this.element.style.marginTop = "".concat(topLeft.y, "px");
+        this.element.style.width = "".concat(size.x, "px");
+        this.element.style.height = "".concat(size.y, "px");
+    };
+    /**
+     * @returns `true` if the given `EventTarget` matches this.
+     */
+    SelectionHandle.prototype.isTarget = function (target) {
+        return target === this.element;
+    };
+    SelectionHandle.prototype.handleDragStart = function (pointer) {
+        this.onDragStart(pointer.canvasPos);
+        this.dragLastPos = pointer.canvasPos;
+    };
+    SelectionHandle.prototype.handleDragUpdate = function (pointer) {
+        if (!this.dragLastPos) {
+            return;
+        }
+        this.onDragUpdate(pointer.canvasPos);
+    };
+    SelectionHandle.prototype.handleDragEnd = function () {
+        if (!this.dragLastPos) {
+            return;
+        }
+        this.onDragEnd();
+    };
+    SelectionHandle.prototype.setSnapToGrid = function (snap) {
+        this.snapToGrid = snap;
+    };
+    SelectionHandle.prototype.isSnappingToGrid = function () {
+        return this.snapToGrid;
+    };
+    return SelectionHandle;
+}());
+export default SelectionHandle;