js-draw 0.25.0 → 1.0.0

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

@@ -1,108 +1,76 @@
 "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));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 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");
+const math_1 = require("@js-draw/math");
+const types_1 = require("../../types");
+const Viewport_1 = __importDefault(require("../../Viewport"));
+const BaseTool_1 = __importDefault(require("../BaseTool"));
+const SVGRenderer_1 = __importDefault(require("../../rendering/renderers/SVGRenderer"));
+const Selection_1 = __importDefault(require("./Selection"));
+const TextComponent_1 = __importDefault(require("../../components/TextComponent"));
+const 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;
+class SelectionTool extends BaseTool_1.default {
+    constructor(editor, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.startPoint = null; // canvas position
+        this.expandingSelectionBox = false;
+        this.shiftKeyPressed = false;
+        this.snapToGrid = false;
+        this.selectionBoxHandlingEvt = false;
+        this.lastSelectedObjects = [];
+        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, _data => {
             // 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.clearWetInk();
+            this.selectionBox?.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;
+        this.editor.handleKeyEventsFrom(this.handleOverlay);
+        this.editor.handlePointerEventsFrom(this.handleOverlay);
     }
-    SelectionTool.prototype.makeSelectionBox = function (selectionStartPos) {
-        var _a;
+    makeSelectionBox(selectionStartPos) {
         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.prevSelectionBox?.cancelSelection();
         }
         this.selectionBox.addTo(this.handleOverlay);
-    };
-    SelectionTool.prototype.snapSelectionToGrid = function () {
+    }
+    snapSelectionToGrid() {
         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)));
+        const topLeftOfBBox = this.selectionBox.computeTightBoundingBox().topLeft;
+        const snappedTopLeft = this.editor.viewport.snapToGrid(topLeftOfBBox);
+        const snapDelta = snappedTopLeft.minus(topLeftOfBBox);
+        const oldTransform = this.selectionBox.getTransform();
+        this.selectionBox.setTransform(oldTransform.rightMul(math_1.Mat33.translation(snapDelta)));
         this.selectionBox.finalizeTransform();
-    };
-    SelectionTool.prototype.onPointerDown = function (_a) {
-        var allPointers = _a.allPointers, current = _a.current;
-        var snapToGrid = this.snapToGrid;
+    }
+    onPointerDown({ allPointers, current }) {
+        const 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) {
+            let transforming = false;
+            if (this.selectionBox) {
                 if (snapToGrid) {
                     this.snapSelectionToGrid();
                 }
-                var dragStartResult = this.selectionBox.onDragStart(current, this.lastEvtTarget);
+                const dragStartResult = this.selectionBox.onDragStart(current);
                 if (dragStartResult) {
                     transforming = true;
                     this.selectionBoxHandlingEvt = true;
@@ -117,13 +85,13 @@ var SelectionTool = /** @class */ (function (_super) {
             return true;
         }
         return false;
-    };
-    SelectionTool.prototype.onPointerMove = function (event) {
+    }
+    onPointerMove(event) {
         if (!this.selectionBox)
             return;
-        var currentPointer = event.current;
+        let currentPointer = event.current;
         if (!this.expandingSelectionBox && this.shiftKeyPressed && this.startPoint) {
-            var screenPos = this.editor.viewport.canvasToScreen(this.startPoint);
+            const screenPos = this.editor.viewport.canvasToScreen(this.startPoint);
             currentPointer = currentPointer.lockedToXYAxesScreen(screenPos, this.editor.viewport);
         }
         if (this.snapToGrid) {
@@ -135,28 +103,9 @@ var SelectionTool = /** @class */ (function (_super) {
         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;
+    onGestureEnd() {
         if (!this.selectionBox)
             return;
         if (!this.selectionBoxHandlingEvt) {
@@ -168,17 +117,11 @@ var SelectionTool = /** @class */ (function (_super) {
             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) {
+    }
+    onPointerUp(event) {
         if (!this.selectionBox)
             return;
-        var currentPointer = event.current;
+        let currentPointer = event.current;
         if (this.snapToGrid) {
             currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
         }
@@ -188,29 +131,66 @@ var SelectionTool = /** @class */ (function (_super) {
             // If so, finish expanding.
             this.expandingSelectionBox = false;
             this.selectionBox.resolveToObjects();
-            this.setSelection(__spreadArray(__spreadArray([], this.selectionBox.getSelectedObjects(), true), this.prevSelectionBox.getSelectedObjects(), true));
+            this.setSelection([
+                ...this.selectionBox.getSelectedObjects(),
+                ...this.prevSelectionBox.getSelectedObjects(),
+            ]);
         }
         else {
             this.onGestureEnd();
         }
-    };
-    SelectionTool.prototype.onGestureCancel = function () {
-        var _a, _b, _c, _d;
+    }
+    onGestureCancel() {
         if (this.selectionBoxHandlingEvt) {
-            (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.onDragCancel();
+            this.selectionBox?.onDragCancel();
         }
         else {
             // Revert to the previous selection, if any.
-            (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.cancelSelection();
+            this.selectionBox?.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.selectionBox?.addTo(this.handleOverlay);
+            this.selectionBox?.recomputeRegion();
             this.prevSelectionBox = null;
         }
         this.expandingSelectionBox = false;
-    };
-    SelectionTool.prototype.onKeyPress = function (event) {
-        var shortcucts = this.editor.shortcuts;
+    }
+    onSelectionUpdated() {
+        const selectedItemCount = this.selectionBox?.getSelectedItemCount() ?? 0;
+        const selectedObjects = this.selectionBox?.getSelectedObjects() ?? [];
+        const hasDifferentSelection = this.lastSelectedObjects.length !== selectedItemCount
+            || selectedObjects.some((obj, i) => this.lastSelectedObjects[i] !== obj);
+        if (hasDifferentSelection) {
+            this.lastSelectedObjects = selectedObjects;
+            // Note that the selection has changed
+            this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
+                kind: types_1.EditorEventType.ToolUpdated,
+                tool: this,
+            });
+            // Only fire the SelectionUpdated event if the selection really updated.
+            this.editor.notifier.dispatch(types_1.EditorEventType.SelectionUpdated, {
+                kind: types_1.EditorEventType.SelectionUpdated,
+                selectedComponents: selectedObjects,
+                tool: this,
+            });
+            if (selectedItemCount > 0) {
+                this.editor.announceForAccessibility(this.editor.localization.selectedElements(selectedItemCount));
+                this.zoomToSelection();
+            }
+        }
+        if (selectedItemCount === 0 && this.selectionBox) {
+            this.selectionBox.cancelSelection();
+            this.prevSelectionBox = this.selectionBox;
+            this.selectionBox = null;
+        }
+    }
+    zoomToSelection() {
+        if (this.selectionBox) {
+            const selectionRect = this.selectionBox.region;
+            this.editor.dispatchNoAnnounce(this.editor.viewport.zoomTo(selectionRect, false), false);
+        }
+    }
+    onKeyPress(event) {
+        const shortcucts = this.editor.shortcuts;
         if (shortcucts.matchesShortcut(keybindings_1.snapToGridKeyboardShortcutId, event)) {
             this.snapToGrid = true;
             return true;
@@ -233,11 +213,11 @@ var SelectionTool = /** @class */ (function (_super) {
             this.shiftKeyPressed = true;
             return true;
         }
-        var rotationSteps = 0;
-        var xTranslateSteps = 0;
-        var yTranslateSteps = 0;
-        var xScaleSteps = 0;
-        var yScaleSteps = 0;
+        let rotationSteps = 0;
+        let xTranslateSteps = 0;
+        let yTranslateSteps = 0;
+        let xScaleSteps = 0;
+        let yScaleSteps = 0;
         switch (event.key) {
             case 'a':
             case 'h':
@@ -278,7 +258,7 @@ var SelectionTool = /** @class */ (function (_super) {
                 yScaleSteps += 1;
                 break;
         }
-        var handled = xTranslateSteps !== 0
+        let handled = xTranslateSteps !== 0
             || yTranslateSteps !== 0
             || rotationSteps !== 0
             || xScaleSteps !== 0
@@ -287,16 +267,16 @@ var SelectionTool = /** @class */ (function (_super) {
             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();
+            const translateStepSize = 10 * this.editor.viewport.getSizeOfPixelOnCanvas();
+            const rotateStepSize = Math.PI / 8;
+            const scaleStepSize = 5 / 4;
+            const region = this.selectionBox.region;
+            const scaleFactor = math_1.Vec2.of(scaleStepSize ** xScaleSteps, scaleStepSize ** yScaleSteps);
+            const rotationMat = math_1.Mat33.zRotation(rotationSteps * rotateStepSize);
+            const roundedRotationMatrix = rotationMat.mapEntries(component => Viewport_1.default.roundScaleRatio(component));
+            const regionCenter = this.editor.viewport.roundPoint(region.center);
+            const transform = math_1.Mat33.scaling2D(scaleFactor, this.editor.viewport.roundPoint(region.topLeft)).rightMul(math_1.Mat33.translation(regionCenter).rightMul(roundedRotationMatrix).rightMul(math_1.Mat33.translation(regionCenter.times(-1)))).rightMul(math_1.Mat33.translation(this.editor.viewport.roundPoint(math_1.Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize))));
+            const oldTransform = this.selectionBox.getTransform();
             this.selectionBox.setTransform(oldTransform.rightMul(transform));
         }
         if (this.selectionBox && !handled && (event.key === 'Delete' || event.key === 'Backspace')) {
@@ -305,10 +285,9 @@ var SelectionTool = /** @class */ (function (_super) {
             handled = true;
         }
         return handled;
-    };
-    SelectionTool.prototype.onKeyUp = function (evt) {
-        var _this = this;
-        var shortcucts = this.editor.shortcuts;
+    }
+    onKeyUp(evt) {
+        const shortcucts = this.editor.shortcuts;
         if (shortcucts.matchesShortcut(keybindings_1.snapToGridKeyboardShortcutId, evt)) {
             this.snapToGrid = false;
             return true;
@@ -319,8 +298,8 @@ var SelectionTool = /** @class */ (function (_super) {
         }
         if (this.selectionBox && shortcucts.matchesShortcut(keybindings_1.duplicateSelectionShortcut, evt)) {
             // Finalize duplicating the selection
-            this.selectionBox.duplicateSelectedObjects().then(function (command) {
-                _this.editor.dispatch(command);
+            this.selectionBox.duplicateSelectedObjects().then(command => {
+                this.editor.dispatch(command);
             });
             return true;
         }
@@ -328,29 +307,28 @@ var SelectionTool = /** @class */ (function (_super) {
             this.shiftKeyPressed = false;
             return true;
         }
-        if (this.selectionBox && SelectionTool.handleableKeys.some(function (key) { return key === evt.key; })) {
+        if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
             this.selectionBox.finalizeTransform();
             return true;
         }
         return false;
-    };
-    SelectionTool.prototype.onCopy = function (event) {
+    }
+    onCopy(event) {
         if (!this.selectionBox) {
             return false;
         }
-        var selectedElems = this.selectionBox.getSelectedObjects();
-        var bbox = this.selectionBox.region;
+        const selectedElems = this.selectionBox.getSelectedObjects();
+        const 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];
+        const exportViewport = new Viewport_1.default(() => { });
+        exportViewport.updateScreenSize(math_1.Vec2.of(bbox.w, bbox.h));
+        exportViewport.resetTransform(math_1.Mat33.translation(bbox.topLeft.times(-1)));
+        const sanitize = true;
+        const { element: svgExportElem, renderer: svgRenderer } = SVGRenderer_1.default.fromViewport(exportViewport, sanitize);
+        const text = [];
+        for (const elem of selectedElems) {
             elem.render(svgRenderer);
             if (elem instanceof TextComponent_1.default) {
                 text.push(elem.getText());
@@ -362,10 +340,12 @@ var SelectionTool = /** @class */ (function (_super) {
             event.setData('text/plain', text.join('\n'));
         }
         return true;
-    };
-    SelectionTool.prototype.setEnabled = function (enabled) {
-        _super.prototype.setEnabled.call(this, enabled);
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
         // Clear the selection
+        this.selectionBox?.cancelSelection();
+        this.onSelectionUpdated();
         this.handleOverlay.replaceChildren();
         this.selectionBox = null;
         this.shiftKeyPressed = false;
@@ -378,32 +358,30 @@ var SelectionTool = /** @class */ (function (_super) {
         else {
             this.handleOverlay.tabIndex = -1;
         }
-    };
+    }
     // Get the object responsible for displaying this' selection.
     // @internal
-    SelectionTool.prototype.getSelection = function () {
+    getSelection() {
         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 : [];
-    };
+    }
+    getSelectedObjects() {
+        return this.selectionBox?.getSelectedObjects() ?? [];
+    }
     // Select the given `objects`. Any non-selectable objects in `objects` are ignored.
-    SelectionTool.prototype.setSelection = function (objects) {
+    setSelection(objects) {
         // Only select selectable objects.
-        objects = objects.filter(function (obj) { return obj.isSelectable(); });
+        objects = objects.filter(obj => obj.isSelectable());
         // Sort by z-index
-        objects.sort(function (a, b) { return a.getZIndex() - b.getZIndex(); });
+        objects.sort((a, b) => a.getZIndex() - b.getZIndex());
         // Remove duplicates
-        objects = objects.filter(function (current, idx) {
+        objects = objects.filter((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];
+        let bbox = null;
+        for (const object of objects) {
             if (bbox) {
                 bbox = bbox.union(object.getBBox());
             }
@@ -420,22 +398,21 @@ var SelectionTool = /** @class */ (function (_super) {
         }
         this.selectionBox.setSelectedObjects(objects, bbox);
         this.onSelectionUpdated();
-    };
-    SelectionTool.prototype.clearSelection = function () {
+    }
+    clearSelection() {
         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));
+    }
+}
+SelectionTool.handleableKeys = [
+    'a', 'h', 'ArrowLeft',
+    'd', 'l', 'ArrowRight',
+    'q', 'k', 'ArrowUp',
+    'e', 'j', 'ArrowDown',
+    'r', 'R',
+    'i', 'I', 'o', 'O',
+    'Control', 'Meta',
+];
 exports.default = SelectionTool;

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

@@ -1,5 +1,5 @@
 import Editor from '../../Editor';
-import Vec3 from '../../math/Vec3';
+import { Vec3 } from '@js-draw/math';
 import Selection from './Selection';
 import { ResizeMode } from './types';
 export declare class DragTransformer {