js-draw 0.23.0 → 0.24.0

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

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleSize = exports.HandleShape = void 0;
+var assertions_1 = require("../../util/assertions");
+var Vec2_1 = require("../../math/Vec2");
+var SelectionTool_1 = require("./SelectionTool");
+var HandleShape;
+(function (HandleShape) {
+    HandleShape[HandleShape["Circle"] = 0] = "Circle";
+    HandleShape[HandleShape["Square"] = 1] = "Square";
+})(HandleShape || (exports.HandleShape = HandleShape = {}));
+exports.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(SelectionTool_1.cssPrefix, "handle"));
+        switch (shape) {
+            case HandleShape.Circle:
+                this.element.classList.add("".concat(SelectionTool_1.cssPrefix, "circle"));
+                break;
+            case HandleShape.Square:
+                this.element.classList.add("".concat(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.
+     */
+    SelectionHandle.prototype.addTo = function (container) {
+        container.appendChild(this.element);
+    };
+    SelectionHandle.prototype.updatePosition = function () {
+        var parentRect = this.parent.screenRegion;
+        var size = Vec2_1.Vec2.of(exports.handleSize, exports.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;
+}());
+exports.default = SelectionHandle;

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

@@ -0,0 +1,37 @@
+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 startPoint;
+    private expandingSelectionBox;
+    private shiftKeyPressed;
+    private snapToGrid;
+    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;
+}

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

@@ -0,0 +1,441 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cssPrefix = void 0;
+var Mat33_1 = require("../../math/Mat33");
+var Vec2_1 = require("../../math/Vec2");
+var types_1 = require("../../types");
+var Viewport_1 = require("../../Viewport");
+var BaseTool_1 = require("../BaseTool");
+var SVGRenderer_1 = require("../../rendering/renderers/SVGRenderer");
+var Selection_1 = require("./Selection");
+var TextComponent_1 = require("../../components/TextComponent");
+var keybindings_1 = require("../keybindings");
+exports.cssPrefix = 'selection-tool-';
+// Allows users to select/transform portions of the `EditorImage`.
+// With respect to `extend`ing, `SelectionTool` is not stable.
+var SelectionTool = /** @class */ (function (_super) {
+    __extends(SelectionTool, _super);
+    function SelectionTool(editor, description) {
+        var _this = _super.call(this, editor.notifier, description) || this;
+        _this.editor = editor;
+        _this.lastEvtTarget = null;
+        _this.startPoint = null; // canvas position
+        _this.expandingSelectionBox = false;
+        _this.shiftKeyPressed = false;
+        _this.snapToGrid = false;
+        _this.selectionBoxHandlingEvt = false;
+        _this.handleOverlay = document.createElement('div');
+        editor.createHTMLOverlay(_this.handleOverlay);
+        _this.handleOverlay.style.display = 'none';
+        _this.handleOverlay.classList.add('handleOverlay');
+        editor.notifier.on(types_1.EditorEventType.ViewportChanged, function (_data) {
+            var _a;
+            // The selection box could be using the wet ink display if its transformation
+            // hasn't been finalized yet. Clear before updating the UI.
+            _this.editor.clearWetInk();
+            (_a = _this.selectionBox) === null || _a === void 0 ? void 0 : _a.updateUI();
+        });
+        _this.editor.handleKeyEventsFrom(_this.handleOverlay);
+        _this.editor.handlePointerEventsFrom(_this.handleOverlay, function (eventName, htmlEvent) {
+            if (eventName === 'pointerdown') {
+                _this.lastEvtTarget = htmlEvent.target;
+            }
+            return true;
+        });
+        return _this;
+    }
+    SelectionTool.prototype.makeSelectionBox = function (selectionStartPos) {
+        var _a;
+        this.prevSelectionBox = this.selectionBox;
+        this.selectionBox = new Selection_1.default(selectionStartPos, this.editor);
+        if (!this.expandingSelectionBox) {
+            // Remove any previous selection rects
+            (_a = this.prevSelectionBox) === null || _a === void 0 ? void 0 : _a.cancelSelection();
+        }
+        this.selectionBox.addTo(this.handleOverlay);
+    };
+    SelectionTool.prototype.snapSelectionToGrid = function () {
+        if (!this.selectionBox)
+            throw new Error('No selection to snap!');
+        // Snap the top left corner of what we have selected.
+        var topLeftOfBBox = this.selectionBox.computeTightBoundingBox().topLeft;
+        var snappedTopLeft = this.editor.viewport.snapToGrid(topLeftOfBBox);
+        var snapDelta = snappedTopLeft.minus(topLeftOfBBox);
+        var oldTransform = this.selectionBox.getTransform();
+        this.selectionBox.setTransform(oldTransform.rightMul(Mat33_1.default.translation(snapDelta)));
+        this.selectionBox.finalizeTransform();
+    };
+    SelectionTool.prototype.onPointerDown = function (_a) {
+        var allPointers = _a.allPointers, current = _a.current;
+        var snapToGrid = this.snapToGrid;
+        if (snapToGrid) {
+            current = current.snappedToGrid(this.editor.viewport);
+        }
+        if (allPointers.length === 1 && current.isPrimary) {
+            this.startPoint = current.canvasPos;
+            var transforming = false;
+            if (this.lastEvtTarget && this.selectionBox) {
+                if (snapToGrid) {
+                    this.snapSelectionToGrid();
+                }
+                var dragStartResult = this.selectionBox.onDragStart(current, this.lastEvtTarget);
+                if (dragStartResult) {
+                    transforming = true;
+                    this.selectionBoxHandlingEvt = true;
+                    this.expandingSelectionBox = false;
+                }
+            }
+            if (!transforming) {
+                // Shift key: Combine the new and old selection boxes at the end of the gesture.
+                this.expandingSelectionBox = this.shiftKeyPressed;
+                this.makeSelectionBox(current.canvasPos);
+            }
+            return true;
+        }
+        return false;
+    };
+    SelectionTool.prototype.onPointerMove = function (event) {
+        if (!this.selectionBox)
+            return;
+        var currentPointer = event.current;
+        if (!this.expandingSelectionBox && this.shiftKeyPressed && this.startPoint) {
+            var screenPos = this.editor.viewport.canvasToScreen(this.startPoint);
+            currentPointer = currentPointer.lockedToXYAxesScreen(screenPos, this.editor.viewport);
+        }
+        if (this.snapToGrid) {
+            currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
+        }
+        if (this.selectionBoxHandlingEvt) {
+            this.selectionBox.onDragUpdate(currentPointer);
+        }
+        else {
+            this.selectionBox.setToPoint(currentPointer.canvasPos);
+        }
+    };
+    SelectionTool.prototype.onSelectionUpdated = function () {
+        var _a, _b;
+        // Note that the selection has changed
+        this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
+            kind: types_1.EditorEventType.ToolUpdated,
+            tool: this,
+        });
+        var selectedItemCount = (_b = (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.getSelectedItemCount()) !== null && _b !== void 0 ? _b : 0;
+        if (selectedItemCount > 0) {
+            this.editor.announceForAccessibility(this.editor.localization.selectedElements(selectedItemCount));
+            this.zoomToSelection();
+        }
+        else if (this.selectionBox) {
+            this.selectionBox.cancelSelection();
+            this.prevSelectionBox = this.selectionBox;
+            this.selectionBox = null;
+        }
+    };
+    // Called after a gestureCancel and a pointerUp
+    SelectionTool.prototype.onGestureEnd = function () {
+        this.lastEvtTarget = null;
+        if (!this.selectionBox)
+            return;
+        if (!this.selectionBoxHandlingEvt) {
+            // Expand/shrink the selection rectangle, if applicable
+            this.selectionBox.resolveToObjects();
+            this.onSelectionUpdated();
+        }
+        else {
+            this.selectionBox.onDragEnd();
+        }
+        this.selectionBoxHandlingEvt = false;
+    };
+    SelectionTool.prototype.zoomToSelection = function () {
+        if (this.selectionBox) {
+            var selectionRect = this.selectionBox.region;
+            this.editor.dispatchNoAnnounce(this.editor.viewport.zoomTo(selectionRect, false), false);
+        }
+    };
+    SelectionTool.prototype.onPointerUp = function (event) {
+        if (!this.selectionBox)
+            return;
+        var currentPointer = event.current;
+        if (this.snapToGrid) {
+            currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
+        }
+        this.selectionBox.setToPoint(currentPointer.canvasPos);
+        // Were we expanding the previous selection?
+        if (this.expandingSelectionBox && this.prevSelectionBox) {
+            // If so, finish expanding.
+            this.expandingSelectionBox = false;
+            this.selectionBox.resolveToObjects();
+            this.setSelection(__spreadArray(__spreadArray([], this.selectionBox.getSelectedObjects(), true), this.prevSelectionBox.getSelectedObjects(), true));
+        }
+        else {
+            this.onGestureEnd();
+        }
+    };
+    SelectionTool.prototype.onGestureCancel = function () {
+        var _a, _b, _c, _d;
+        if (this.selectionBoxHandlingEvt) {
+            (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.onDragCancel();
+        }
+        else {
+            // Revert to the previous selection, if any.
+            (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.cancelSelection();
+            this.selectionBox = this.prevSelectionBox;
+            (_c = this.selectionBox) === null || _c === void 0 ? void 0 : _c.addTo(this.handleOverlay);
+            (_d = this.selectionBox) === null || _d === void 0 ? void 0 : _d.recomputeRegion();
+            this.prevSelectionBox = null;
+        }
+        this.expandingSelectionBox = false;
+    };
+    SelectionTool.prototype.onKeyPress = function (event) {
+        var shortcucts = this.editor.shortcuts;
+        if (shortcucts.matchesShortcut(keybindings_1.snapToGridKeyboardShortcutId, event)) {
+            this.snapToGrid = true;
+            return true;
+        }
+        if (this.selectionBox && shortcucts.matchesShortcut(keybindings_1.duplicateSelectionShortcut, event)) {
+            // Handle duplication on key up — we don't want to accidentally duplicate
+            // many times.
+            return true;
+        }
+        else if (shortcucts.matchesShortcut(keybindings_1.selectAllKeyboardShortcut, event)) {
+            this.setSelection(this.editor.image.getAllElements());
+            return true;
+        }
+        else if (event.ctrlKey) {
+            // Don't transform the selection with, for example, ctrl+i.
+            // Pass it to another tool, if apliccable.
+            return false;
+        }
+        else if (event.key === 'Shift') {
+            this.shiftKeyPressed = true;
+            return true;
+        }
+        var rotationSteps = 0;
+        var xTranslateSteps = 0;
+        var yTranslateSteps = 0;
+        var xScaleSteps = 0;
+        var yScaleSteps = 0;
+        switch (event.key) {
+            case 'a':
+            case 'h':
+            case 'ArrowLeft':
+                xTranslateSteps -= 1;
+                break;
+            case 'd':
+            case 'l':
+            case 'ArrowRight':
+                xTranslateSteps += 1;
+                break;
+            case 'q':
+            case 'k':
+            case 'ArrowUp':
+                yTranslateSteps -= 1;
+                break;
+            case 'e':
+            case 'j':
+            case 'ArrowDown':
+                yTranslateSteps += 1;
+                break;
+            case 'r':
+                rotationSteps += 1;
+                break;
+            case 'R':
+                rotationSteps -= 1;
+                break;
+            case 'i':
+                xScaleSteps -= 1;
+                break;
+            case 'I':
+                xScaleSteps += 1;
+                break;
+            case 'o':
+                yScaleSteps -= 1;
+                break;
+            case 'O':
+                yScaleSteps += 1;
+                break;
+        }
+        var handled = xTranslateSteps !== 0
+            || yTranslateSteps !== 0
+            || rotationSteps !== 0
+            || xScaleSteps !== 0
+            || yScaleSteps !== 0;
+        if (!this.selectionBox) {
+            handled = false;
+        }
+        else if (handled) {
+            var translateStepSize = 10 * this.editor.viewport.getSizeOfPixelOnCanvas();
+            var rotateStepSize = Math.PI / 8;
+            var scaleStepSize = 5 / 4;
+            var region = this.selectionBox.region;
+            var scaleFactor = Vec2_1.Vec2.of(Math.pow(scaleStepSize, xScaleSteps), Math.pow(scaleStepSize, yScaleSteps));
+            var rotationMat = Mat33_1.default.zRotation(rotationSteps * rotateStepSize);
+            var roundedRotationMatrix = rotationMat.mapEntries(function (component) { return Viewport_1.default.roundScaleRatio(component); });
+            var regionCenter = this.editor.viewport.roundPoint(region.center);
+            var transform = Mat33_1.default.scaling2D(scaleFactor, this.editor.viewport.roundPoint(region.topLeft)).rightMul(Mat33_1.default.translation(regionCenter).rightMul(roundedRotationMatrix).rightMul(Mat33_1.default.translation(regionCenter.times(-1)))).rightMul(Mat33_1.default.translation(this.editor.viewport.roundPoint(Vec2_1.Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize))));
+            var oldTransform = this.selectionBox.getTransform();
+            this.selectionBox.setTransform(oldTransform.rightMul(transform));
+        }
+        if (this.selectionBox && !handled && (event.key === 'Delete' || event.key === 'Backspace')) {
+            this.editor.dispatch(this.selectionBox.deleteSelectedObjects());
+            this.clearSelection();
+            handled = true;
+        }
+        return handled;
+    };
+    SelectionTool.prototype.onKeyUp = function (evt) {
+        var _this = this;
+        var shortcucts = this.editor.shortcuts;
+        if (shortcucts.matchesShortcut(keybindings_1.snapToGridKeyboardShortcutId, evt)) {
+            this.snapToGrid = false;
+            return true;
+        }
+        if (shortcucts.matchesShortcut(keybindings_1.selectAllKeyboardShortcut, evt)) {
+            // Selected all in onKeyDown. Don't finalizeTransform.
+            return true;
+        }
+        if (this.selectionBox && shortcucts.matchesShortcut(keybindings_1.duplicateSelectionShortcut, evt)) {
+            // Finalize duplicating the selection
+            this.selectionBox.duplicateSelectedObjects().then(function (command) {
+                _this.editor.dispatch(command);
+            });
+            return true;
+        }
+        if (evt.key === 'Shift') {
+            this.shiftKeyPressed = false;
+            return true;
+        }
+        if (this.selectionBox && SelectionTool.handleableKeys.some(function (key) { return key === evt.key; })) {
+            this.selectionBox.finalizeTransform();
+            return true;
+        }
+        return false;
+    };
+    SelectionTool.prototype.onCopy = function (event) {
+        if (!this.selectionBox) {
+            return false;
+        }
+        var selectedElems = this.selectionBox.getSelectedObjects();
+        var bbox = this.selectionBox.region;
+        if (selectedElems.length === 0) {
+            return false;
+        }
+        var exportViewport = new Viewport_1.default(function () { });
+        exportViewport.updateScreenSize(Vec2_1.Vec2.of(bbox.w, bbox.h));
+        exportViewport.resetTransform(Mat33_1.default.translation(bbox.topLeft.times(-1)));
+        var sanitize = true;
+        var _a = SVGRenderer_1.default.fromViewport(exportViewport, sanitize), svgExportElem = _a.element, svgRenderer = _a.renderer;
+        var text = [];
+        for (var _i = 0, selectedElems_1 = selectedElems; _i < selectedElems_1.length; _i++) {
+            var elem = selectedElems_1[_i];
+            elem.render(svgRenderer);
+            if (elem instanceof TextComponent_1.default) {
+                text.push(elem.getText());
+            }
+        }
+        event.setData('image/svg+xml', svgExportElem.outerHTML);
+        event.setData('text/html', svgExportElem.outerHTML);
+        if (text.length > 0) {
+            event.setData('text/plain', text.join('\n'));
+        }
+        return true;
+    };
+    SelectionTool.prototype.setEnabled = function (enabled) {
+        _super.prototype.setEnabled.call(this, enabled);
+        // Clear the selection
+        this.handleOverlay.replaceChildren();
+        this.selectionBox = null;
+        this.shiftKeyPressed = false;
+        this.snapToGrid = false;
+        this.handleOverlay.style.display = enabled ? 'block' : 'none';
+        if (enabled) {
+            this.handleOverlay.tabIndex = 0;
+            this.handleOverlay.setAttribute('aria-label', this.editor.localization.selectionToolKeyboardShortcuts);
+        }
+        else {
+            this.handleOverlay.tabIndex = -1;
+        }
+    };
+    // Get the object responsible for displaying this' selection.
+    // @internal
+    SelectionTool.prototype.getSelection = function () {
+        return this.selectionBox;
+    };
+    SelectionTool.prototype.getSelectedObjects = function () {
+        var _a, _b;
+        return (_b = (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.getSelectedObjects()) !== null && _b !== void 0 ? _b : [];
+    };
+    // Select the given `objects`. Any non-selectable objects in `objects` are ignored.
+    SelectionTool.prototype.setSelection = function (objects) {
+        // Only select selectable objects.
+        objects = objects.filter(function (obj) { return obj.isSelectable(); });
+        // Sort by z-index
+        objects.sort(function (a, b) { return a.getZIndex() - b.getZIndex(); });
+        // Remove duplicates
+        objects = objects.filter(function (current, idx) {
+            if (idx > 0) {
+                return current !== objects[idx - 1];
+            }
+            return true;
+        });
+        var bbox = null;
+        for (var _i = 0, objects_1 = objects; _i < objects_1.length; _i++) {
+            var object = objects_1[_i];
+            if (bbox) {
+                bbox = bbox.union(object.getBBox());
+            }
+            else {
+                bbox = object.getBBox();
+            }
+        }
+        if (!bbox) {
+            return;
+        }
+        this.clearSelection();
+        if (!this.selectionBox) {
+            this.makeSelectionBox(bbox.topLeft);
+        }
+        this.selectionBox.setSelectedObjects(objects, bbox);
+        this.onSelectionUpdated();
+    };
+    SelectionTool.prototype.clearSelection = function () {
+        this.handleOverlay.replaceChildren();
+        this.prevSelectionBox = this.selectionBox;
+        this.selectionBox = null;
+        this.onSelectionUpdated();
+    };
+    SelectionTool.handleableKeys = [
+        'a', 'h', 'ArrowLeft',
+        'd', 'l', 'ArrowRight',
+        'q', 'k', 'ArrowUp',
+        'e', 'j', 'ArrowDown',
+        'r', 'R',
+        'i', 'I', 'o', 'O',
+        'Control', 'Meta',
+    ];
+    return SelectionTool;
+}(BaseTool_1.default));
+exports.default = SelectionTool;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RotateTransformer = exports.ResizeTransformer = exports.DragTransformer = void 0;
+var Mat33_1 = require("../../math/Mat33");
+var Vec2_1 = require("../../math/Vec2");
+var Viewport_1 = require("../../Viewport");
+var types_1 = require("./types");
+var DragTransformer = /** @class */ (function () {
+    function DragTransformer(editor, selection) {
+        this.editor = editor;
+        this.selection = selection;
+    }
+    DragTransformer.prototype.onDragStart = function (startPoint) {
+        this.selection.setTransform(Mat33_1.default.identity);
+        this.dragStartPoint = startPoint;
+    };
+    DragTransformer.prototype.onDragUpdate = function (canvasPos) {
+        var delta = this.editor.viewport.roundPoint(canvasPos.minus(this.dragStartPoint));
+        this.selection.setTransform(Mat33_1.default.translation(delta));
+    };
+    DragTransformer.prototype.onDragEnd = function () {
+        this.selection.finalizeTransform();
+    };
+    return DragTransformer;
+}());
+exports.DragTransformer = DragTransformer;
+var ResizeTransformer = /** @class */ (function () {
+    function ResizeTransformer(editor, selection) {
+        this.editor = editor;
+        this.selection = selection;
+        this.mode = types_1.ResizeMode.Both;
+    }
+    ResizeTransformer.prototype.onDragStart = function (startPoint, mode) {
+        this.selection.setTransform(Mat33_1.default.identity);
+        this.mode = mode;
+        this.dragStartPoint = startPoint;
+    };
+    ResizeTransformer.prototype.onDragUpdate = function (canvasPos) {
+        var canvasDelta = canvasPos.minus(this.dragStartPoint);
+        var origWidth = this.selection.preTransformRegion.width;
+        var origHeight = this.selection.preTransformRegion.height;
+        var scale = Vec2_1.Vec2.of(1, 1);
+        if (this.mode === types_1.ResizeMode.HorizontalOnly) {
+            var newWidth = origWidth + canvasDelta.x;
+            scale = Vec2_1.Vec2.of(newWidth / origWidth, scale.y);
+        }
+        if (this.mode === types_1.ResizeMode.VerticalOnly) {
+            var newHeight = origHeight + canvasDelta.y;
+            scale = Vec2_1.Vec2.of(scale.x, newHeight / origHeight);
+        }
+        if (this.mode === types_1.ResizeMode.Both) {
+            var delta = Math.abs(canvasDelta.x) > Math.abs(canvasDelta.y) ? canvasDelta.x : canvasDelta.y;
+            var newWidth = origWidth + delta;
+            scale = Vec2_1.Vec2.of(newWidth / origWidth, newWidth / origWidth);
+        }
+        // Round: If this isn't done, scaling can create numbers with long decimal representations.
+        //    long decimal representations => large file sizes.
+        scale = scale.map(function (component) { return Viewport_1.default.roundScaleRatio(component, 2); });
+        if (scale.x !== 0 && scale.y !== 0) {
+            var origin_1 = this.editor.viewport.roundPoint(this.selection.preTransformRegion.topLeft);
+            this.selection.setTransform(Mat33_1.default.scaling2D(scale, origin_1));
+        }
+    };
+    ResizeTransformer.prototype.onDragEnd = function () {
+        this.selection.finalizeTransform();
+    };
+    return ResizeTransformer;
+}());
+exports.ResizeTransformer = ResizeTransformer;
+var RotateTransformer = /** @class */ (function () {
+    function RotateTransformer(editor, selection) {
+        this.editor = editor;
+        this.selection = selection;
+        this.startAngle = 0;
+    }
+    RotateTransformer.prototype.getAngle = function (canvasPoint) {
+        var selectionCenter = this.selection.preTransformRegion.center;
+        var offset = canvasPoint.minus(selectionCenter);
+        return offset.angle();
+    };
+    RotateTransformer.prototype.roundAngle = function (angle) {
+        // Round angles to the nearest 16th of a turn
+        var roundingFactor = 16 / 2 / Math.PI;
+        return Math.round(angle * roundingFactor) / roundingFactor;
+    };
+    RotateTransformer.prototype.onDragStart = function (startPoint) {
+        this.selection.setTransform(Mat33_1.default.identity);
+        this.startAngle = this.getAngle(startPoint);
+    };
+    RotateTransformer.prototype.onDragUpdate = function (canvasPos) {
+        var targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
+        // Transform in canvas space
+        var canvasSelCenter = this.editor.viewport.roundPoint(this.selection.preTransformRegion.center);
+        var unrounded = Mat33_1.default.zRotation(targetRotation);
+        var roundedRotationTransform = unrounded.mapEntries(function (entry) { return Viewport_1.default.roundScaleRatio(entry); });
+        var fullRoundedTransform = Mat33_1.default
+            .translation(canvasSelCenter)
+            .rightMul(roundedRotationTransform)
+            .rightMul(Mat33_1.default.translation(canvasSelCenter.times(-1)));
+        this.selection.setTransform(fullRoundedTransform);
+    };
+    RotateTransformer.prototype.onDragEnd = function () {
+        this.selection.finalizeTransform();
+    };
+    return RotateTransformer;
+}());
+exports.RotateTransformer = RotateTransformer;