js-draw 0.18.1 → 0.19.0

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

@@ -0,0 +1,488 @@
+"use strict";
+/**
+ * @internal
+ * @packageDocumentation
+ */
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+const SerializableCommand_1 = __importDefault(require("../../commands/SerializableCommand"));
+const Mat33_1 = __importDefault(require("../../math/Mat33"));
+const Rect2_1 = __importDefault(require("../../math/Rect2"));
+const Vec2_1 = require("../../math/Vec2");
+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
+class Selection {
+    constructor(startPoint, editor) {
+        this.editor = editor;
+        this.transform = Mat33_1.default.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.transformers = {
+            drag: new TransformMode_1.DragTransformer(editor, this),
+            resize: new TransformMode_1.ResizeTransformer(editor, this),
+            rotate: new TransformMode_1.RotateTransformer(editor, this),
+        };
+        this.container = document.createElement('div');
+        this.backgroundElem = document.createElement('div');
+        this.backgroundElem.classList.add(`${SelectionTool_1.cssPrefix}selection-background`);
+        this.container.appendChild(this.backgroundElem);
+        const resizeHorizontalHandle = new SelectionHandle_1.default(SelectionHandle_1.HandleShape.Square, Vec2_1.Vec2.of(1, 0.5), this, (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, Vec2_1.Vec2.of(0.5, 1), this, (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, Vec2_1.Vec2.of(1, 1), this, (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, Vec2_1.Vec2.of(0.5, 0), this, (startPoint) => this.transformers.rotate.onDragStart(startPoint), (currentPoint) => this.transformers.rotate.onDragUpdate(currentPoint), () => this.transformers.rotate.onDragEnd());
+        this.handles = [
+            resizeBothHandle,
+            resizeHorizontalHandle,
+            resizeVerticalHandle,
+            rotationHandle,
+        ];
+        for (const handle of this.handles) {
+            handle.addTo(this.backgroundElem);
+        }
+    }
+    // @internal Intended for unit tests
+    getBackgroundElem() {
+        return this.backgroundElem;
+    }
+    getTransform() {
+        return this.transform;
+    }
+    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 = Mat33_1.default.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
+     */
+    computeTightBoundingBox() {
+        const bbox = this.selectedElems.reduce((accumulator, elem) => {
+            return (accumulator !== null && accumulator !== void 0 ? accumulator : elem.getBBox()).union(elem.getBBox());
+        }, null);
+        return bbox !== null && bbox !== void 0 ? bbox : Rect2_1.default.empty;
+    }
+    get regionRotation() {
+        return this.transform.transformVec3(Vec2_1.Vec2.unitX).angle();
+    }
+    get preTransformedScreenRegion() {
+        const toScreen = (vec) => this.editor.viewport.canvasToScreen(vec);
+        return Rect2_1.default.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 Rect2_1.default(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.
+    setTransform(transform, preview = true) {
+        this.transform = transform;
+        if (preview && this.hasParent) {
+            this.scrollTo();
+            this.previewTransformCmds();
+        }
+    }
+    // Applies the current transformation to the selection
+    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;
+        // Make the commands undo-able
+        this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
+    }
+    // Preview the effects of the current transformation on the selection
+    previewTransformCmds() {
+        // Don't render what we're moving if it's likely to be slow.
+        if (this.selectedElems.length > maxPreviewElemCount) {
+            this.updateUI();
+            return;
+        }
+        const wetInkRenderer = this.editor.display.getWetInkRenderer();
+        wetInkRenderer.clear();
+        wetInkRenderer.pushTransform(this.transform);
+        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.
+    resolveToObjects() {
+        let singleItemSelectionMode = false;
+        this.transform = Mat33_1.default.identity;
+        // Grow the rectangle, if necessary
+        if (this.region.w === 0 || this.region.h === 0) {
+            const padding = this.editor.viewport.visibleRect.maxDimension / 200;
+            this.originalRegion = Rect2_1.default.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(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.
+    recomputeRegion() {
+        const newRegion = this.computeTightBoundingBox();
+        if (!newRegion) {
+            this.cancelSelection();
+            return false;
+        }
+        this.originalRegion = newRegion;
+        const minSize = this.getMinCanvasSize();
+        if (this.originalRegion.w < minSize || this.originalRegion.h < minSize) {
+            // Add padding
+            const padding = minSize / 2;
+            this.originalRegion = Rect2_1.default.bboxOf(this.originalRegion.corners, padding);
+        }
+        return true;
+    }
+    getMinCanvasSize() {
+        const canvasHandleSize = SelectionHandle_1.handleSize / this.editor.viewport.getScaleFactor();
+        return canvasHandleSize * 2;
+    }
+    getSelectedItemCount() {
+        return this.selectedElems.length;
+    }
+    // @internal
+    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 = `${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 (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.
+    //
+    // 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.
+    addRemoveSelectionFromImage(inImage) {
+        // Don't hide elements if doing so will be slow.
+        if (!inImage && this.selectedElems.length > maxPreviewElemCount) {
+            return;
+        }
+        for (const elem of this.selectedElems) {
+            const parent = this.editor.image.findParent(elem);
+            if (!inImage && parent) {
+                this.removedFromImage[elem.getId()] = true;
+                parent.remove();
+            }
+            // If we're making things visible and the selected object wasn't previously
+            // visible,
+            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()];
+            }
+        }
+        // Don't await queueRerender. If we're running in a test, the re-render might never
+        // happen.
+        this.editor.queueRerender().then(() => {
+            if (!inImage) {
+                this.previewTransformCmds();
+            }
+        });
+    }
+    removeDeletedElemsFromSelection() {
+        // Remove any deleted elements from the selection.
+        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.
+            const weRemoved = this.removedFromImage[elem.getId()];
+            return hasParent || weRemoved;
+        });
+    }
+    onDragStart(pointer, target) {
+        this.removeDeletedElemsFromSelection();
+        this.addRemoveSelectionFromImage(false);
+        for (const handle of this.handles) {
+            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;
+    }
+    onDragUpdate(pointer) {
+        if (this.backgroundDragging) {
+            this.transformers.drag.onDragUpdate(pointer.canvasPos);
+        }
+        if (this.targetHandle) {
+            this.targetHandle.handleDragUpdate(pointer);
+        }
+    }
+    onDragEnd() {
+        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();
+    }
+    onDragCancel() {
+        this.backgroundDragging = false;
+        this.targetHandle = null;
+        this.setTransform(Mat33_1.default.identity);
+        this.addRemoveSelectionFromImage(true);
+    }
+    // Scroll the viewport to this. Does not zoom
+    scrollTo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.selectedElems.length === 0) {
+                return;
+            }
+            const screenRect = new Rect2_1.default(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);
+                yield this.editor.dispatchNoAnnounce(Viewport_1.default.transformBy(Mat33_1.default.translation(delta.times(-1))), false);
+                // Re-renders clear wet ink, so we need to re-draw the preview
+                // after the full re-render.
+                yield this.editor.queueRerender();
+                this.previewTransformCmds();
+            }
+        });
+    }
+    deleteSelectedObjects() {
+        if (this.backgroundDragging || this.targetHandle) {
+            this.onDragEnd();
+        }
+        return new Erase_1.default(this.selectedElems);
+    }
+    duplicateSelectedObjects() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const wasTransforming = this.backgroundDragging || this.targetHandle;
+            let tmpApplyCommand = null;
+            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
+                yield 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.
+                yield (tmpApplyCommand === null || tmpApplyCommand === void 0 ? void 0 : 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;
+    }
+    setToPoint(point) {
+        this.originalRegion = this.originalRegion.grownToPoint(point);
+        this.updateUI();
+    }
+    cancelSelection() {
+        if (this.container.parentElement) {
+            this.container.remove();
+        }
+        this.originalRegion = Rect2_1.default.empty;
+        this.hasParent = false;
+    }
+    setSelectedObjects(objects, bbox) {
+        this.addRemoveSelectionFromImage(true);
+        this.originalRegion = bbox;
+        this.selectedElems = objects.filter(object => object.isSelectable());
+        this.updateUI();
+    }
+    getSelectedObjects() {
+        return this.selectedElems;
+    }
+}
+exports.default = Selection;
+_a = Selection;
+(() => {
+    SerializableCommand_1.default.register('selection-tool-transform', (json, _editor) => {
+        var _b;
+        // The selection box is lost when serializing/deserializing. No need to store box rotation
+        const fullTransform = new Mat33_1.default(...json.transform);
+        const elemIds = ((_b = json.elems) !== null && _b !== void 0 ? _b : []);
+        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';
+        };
+        // 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);
+        });
+    }
+    apply(editor) {
+        var _b, _c, _d, _e, _f;
+        return __awaiter(this, void 0, void 0, function* () {
+            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();
+            yield editor.asyncApplyCommands(this.transformCommands, updateChunkSize);
+            (_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();
+        });
+    }
+    unapply(editor) {
+        var _b, _c, _d, _e, _f;
+        return __awaiter(this, void 0, void 0, function* () {
+            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();
+            yield editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize, true);
+            (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33_1.default.identity);
+            (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
+            (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();
+        });
+    }
+    serializeToJSON() {
+        return {
+            elems: this.selectedElemIds,
+            transform: this.fullTransform.toArray(),
+        };
+    }
+    description(_editor, localizationTable) {
+        return localizationTable.transformedElements(this.selectedElemIds.length);
+    }
+};

package/dist/cjs/src/tools/SelectionTool/SelectionHandle.d.ts

@@ -0,0 +1,38 @@
+import { Point2, Vec2 } from '../../math/Vec2';
+import Selection from './Selection';
+import Pointer from '../../Pointer';
+export declare enum HandleShape {
+    Circle = 0,
+    Square = 1
+}
+export declare const handleSize = 30;
+export type DragStartCallback = (startPoint: Point2) => void;
+export type DragUpdateCallback = (canvasPoint: Point2) => void;
+export type DragEndCallback = () => void;
+export default class SelectionHandle {
+    readonly shape: HandleShape;
+    private readonly parentSide;
+    private readonly parent;
+    private readonly onDragStart;
+    private readonly onDragUpdate;
+    private readonly onDragEnd;
+    private element;
+    private snapToGrid;
+    constructor(shape: HandleShape, parentSide: Vec2, parent: Selection, onDragStart: DragStartCallback, onDragUpdate: DragUpdateCallback, onDragEnd: DragEndCallback);
+    /**
+     * Adds this to `container`, where `conatiner` should be the background/selection
+     * element visible on the screen.
+     */
+    addTo(container: HTMLElement): void;
+    updatePosition(): void;
+    /**
+     * @returns `true` if the given `EventTarget` matches this.
+     */
+    isTarget(target: EventTarget): boolean;
+    private dragLastPos;
+    handleDragStart(pointer: Pointer): void;
+    handleDragUpdate(pointer: Pointer): void;
+    handleDragEnd(): void;
+    setSnapToGrid(snap: boolean): void;
+    isSnappingToGrid(): boolean;
+}

package/dist/cjs/src/tools/SelectionTool/SelectionHandle.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleSize = exports.HandleShape = void 0;
+const assertions_1 = require("../../util/assertions");
+const Vec2_1 = require("../../math/Vec2");
+const SelectionTool_1 = require("./SelectionTool");
+var HandleShape;
+(function (HandleShape) {
+    HandleShape[HandleShape["Circle"] = 0] = "Circle";
+    HandleShape[HandleShape["Square"] = 1] = "Square";
+})(HandleShape = exports.HandleShape || (exports.HandleShape = {}));
+exports.handleSize = 30;
+class SelectionHandle {
+    // Bounding box in screen coordinates.
+    constructor(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(`${SelectionTool_1.cssPrefix}handle`);
+        switch (shape) {
+            case HandleShape.Circle:
+                this.element.classList.add(`${SelectionTool_1.cssPrefix}circle`);
+                break;
+            case HandleShape.Square:
+                this.element.classList.add(`${SelectionTool_1.cssPrefix}square`);
+                break;
+            default:
+                (0, assertions_1.assertUnreachable)(shape);
+        }
+        this.updatePosition();
+    }
+    /**
+     * Adds this to `container`, where `conatiner` should be the background/selection
+     * element visible on the screen.
+     */
+    addTo(container) {
+        container.appendChild(this.element);
+    }
+    updatePosition() {
+        const parentRect = this.parent.screenRegion;
+        const size = Vec2_1.Vec2.of(exports.handleSize, exports.handleSize);
+        const topLeft = parentRect.size.scale(this.parentSide)
+            // Center
+            .minus(size.times(1 / 2));
+        // Position within the selection box.
+        this.element.style.marginLeft = `${topLeft.x}px`;
+        this.element.style.marginTop = `${topLeft.y}px`;
+        this.element.style.width = `${size.x}px`;
+        this.element.style.height = `${size.y}px`;
+    }
+    /**
+     * @returns `true` if the given `EventTarget` matches this.
+     */
+    isTarget(target) {
+        return target === this.element;
+    }
+    handleDragStart(pointer) {
+        this.onDragStart(pointer.canvasPos);
+        this.dragLastPos = pointer.canvasPos;
+    }
+    handleDragUpdate(pointer) {
+        if (!this.dragLastPos) {
+            return;
+        }
+        this.onDragUpdate(pointer.canvasPos);
+    }
+    handleDragEnd() {
+        if (!this.dragLastPos) {
+            return;
+        }
+        this.onDragEnd();
+    }
+    setSnapToGrid(snap) {
+        this.snapToGrid = snap;
+    }
+    isSnappingToGrid() {
+        return this.snapToGrid;
+    }
+}
+exports.default = SelectionHandle;

package/dist/cjs/src/tools/SelectionTool/SelectionTool.d.ts

@@ -0,0 +1,36 @@
+import AbstractComponent from '../../components/AbstractComponent';
+import Editor from '../../Editor';
+import { CopyEvent, KeyPressEvent, KeyUpEvent, PointerEvt } from '../../types';
+import BaseTool from '../BaseTool';
+import Selection from './Selection';
+export declare const cssPrefix = "selection-tool-";
+export default class SelectionTool extends BaseTool {
+    private editor;
+    private handleOverlay;
+    private prevSelectionBox;
+    private selectionBox;
+    private lastEvtTarget;
+    private expandingSelectionBox;
+    private shiftKeyPressed;
+    private ctrlKeyPressed;
+    constructor(editor: Editor, description: string);
+    private makeSelectionBox;
+    private snapSelectionToGrid;
+    private selectionBoxHandlingEvt;
+    onPointerDown({ allPointers, current }: PointerEvt): boolean;
+    onPointerMove(event: PointerEvt): void;
+    private onSelectionUpdated;
+    private onGestureEnd;
+    private zoomToSelection;
+    onPointerUp(event: PointerEvt): void;
+    onGestureCancel(): void;
+    private static handleableKeys;
+    onKeyPress(event: KeyPressEvent): boolean;
+    onKeyUp(evt: KeyUpEvent): boolean;
+    onCopy(event: CopyEvent): boolean;
+    setEnabled(enabled: boolean): void;
+    getSelection(): Selection | null;
+    getSelectedObjects(): AbstractComponent[];
+    setSelection(objects: AbstractComponent[]): void;
+    clearSelection(): void;
+}