js-draw 0.17.4 → 0.18.0

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

@@ -0,0 +1,405 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cssPrefix = void 0;
+const Mat33_1 = __importDefault(require("../../math/Mat33"));
+const Vec2_1 = require("../../math/Vec2");
+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"));
+exports.cssPrefix = 'selection-tool-';
+// Allows users to select/transform portions of the `EditorImage`.
+// With respect to `extend`ing, `SelectionTool` is not stable.
+class SelectionTool extends BaseTool_1.default {
+    constructor(editor, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.lastEvtTarget = null;
+        this.expandingSelectionBox = false;
+        this.shiftKeyPressed = false;
+        this.ctrlKeyPressed = 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, _data => {
+            var _a;
+            (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.updateUI();
+        });
+        this.editor.handleKeyEventsFrom(this.handleOverlay);
+        this.editor.handlePointerEventsFrom(this.handleOverlay, (eventName, htmlEvent) => {
+            if (eventName === 'pointerdown') {
+                this.lastEvtTarget = htmlEvent.target;
+            }
+            return true;
+        });
+    }
+    makeSelectionBox(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);
+    }
+    snapSelectionToGrid() {
+        if (!this.selectionBox)
+            throw new Error('No selection to snap!');
+        // Snap the top left corner of what we have selected.
+        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(Mat33_1.default.translation(snapDelta)));
+        this.selectionBox.finalizeTransform();
+    }
+    onPointerDown({ allPointers, current }) {
+        const snapToGrid = this.ctrlKeyPressed;
+        if (snapToGrid) {
+            current = current.snappedToGrid(this.editor.viewport);
+        }
+        if (allPointers.length === 1 && current.isPrimary) {
+            let transforming = false;
+            if (this.lastEvtTarget && this.selectionBox) {
+                if (snapToGrid) {
+                    this.snapSelectionToGrid();
+                }
+                const 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;
+    }
+    onPointerMove(event) {
+        if (!this.selectionBox)
+            return;
+        let currentPointer = event.current;
+        if (this.ctrlKeyPressed) {
+            currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
+        }
+        if (this.selectionBoxHandlingEvt) {
+            this.selectionBox.onDragUpdate(currentPointer);
+        }
+        else {
+            this.selectionBox.setToPoint(currentPointer.canvasPos);
+        }
+    }
+    onSelectionUpdated() {
+        var _a, _b;
+        // Note that the selection has changed
+        this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
+            kind: types_1.EditorEventType.ToolUpdated,
+            tool: this,
+        });
+        const 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
+    onGestureEnd() {
+        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;
+    }
+    zoomToSelection() {
+        if (this.selectionBox) {
+            const selectionRect = this.selectionBox.region;
+            this.editor.dispatchNoAnnounce(this.editor.viewport.zoomTo(selectionRect, false), false);
+        }
+    }
+    onPointerUp(event) {
+        if (!this.selectionBox)
+            return;
+        let currentPointer = event.current;
+        if (this.ctrlKeyPressed) {
+            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([
+                ...this.selectionBox.getSelectedObjects(),
+                ...this.prevSelectionBox.getSelectedObjects(),
+            ]);
+        }
+        else {
+            this.onGestureEnd();
+        }
+    }
+    onGestureCancel() {
+        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;
+    }
+    onKeyPress(event) {
+        if (event.key === 'Control' || event.key === 'Meta') {
+            this.ctrlKeyPressed = true;
+            return true;
+        }
+        if (this.selectionBox && event.ctrlKey && event.key === 'd') {
+            // Handle duplication on key up — we don't want to accidentally duplicate
+            // many times.
+            return true;
+        }
+        else if (event.key === 'a' && event.ctrlKey) {
+            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;
+        }
+        let rotationSteps = 0;
+        let xTranslateSteps = 0;
+        let yTranslateSteps = 0;
+        let xScaleSteps = 0;
+        let 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;
+        }
+        let handled = xTranslateSteps !== 0
+            || yTranslateSteps !== 0
+            || rotationSteps !== 0
+            || xScaleSteps !== 0
+            || yScaleSteps !== 0;
+        if (!this.selectionBox) {
+            handled = false;
+        }
+        else if (handled) {
+            const translateStepSize = 10 * this.editor.viewport.getSizeOfPixelOnCanvas();
+            const rotateStepSize = Math.PI / 8;
+            const scaleStepSize = 5 / 4;
+            const region = this.selectionBox.region;
+            const scaleFactor = Vec2_1.Vec2.of(Math.pow(scaleStepSize, xScaleSteps), Math.pow(scaleStepSize, yScaleSteps));
+            const rotationMat = Mat33_1.default.zRotation(rotationSteps * rotateStepSize);
+            const roundedRotationMatrix = rotationMat.mapEntries(component => Viewport_1.default.roundScaleRatio(component));
+            const regionCenter = this.editor.viewport.roundPoint(region.center);
+            const 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))));
+            const 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;
+    }
+    onKeyUp(evt) {
+        if (evt.key === 'Control' || evt.key === 'Meta') {
+            this.ctrlKeyPressed = false;
+            return true;
+        }
+        if (evt.key === 'Shift') {
+            this.shiftKeyPressed = false;
+            return true;
+        }
+        else if (evt.ctrlKey) {
+            if (this.selectionBox && evt.key === 'd') {
+                this.selectionBox.duplicateSelectedObjects().then(command => {
+                    this.editor.dispatch(command);
+                });
+                return true;
+            }
+            if (evt.key === 'a' || evt.key === 'r') {
+                // Selected all in onKeyDown. Don't finalizeTransform.
+                return true;
+            }
+        }
+        if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
+            this.selectionBox.finalizeTransform();
+            return true;
+        }
+        return false;
+    }
+    onCopy(event) {
+        if (!this.selectionBox) {
+            return false;
+        }
+        const selectedElems = this.selectionBox.getSelectedObjects();
+        const bbox = this.selectionBox.region;
+        if (selectedElems.length === 0) {
+            return false;
+        }
+        const exportViewport = new Viewport_1.default(() => { });
+        exportViewport.updateScreenSize(Vec2_1.Vec2.of(bbox.w, bbox.h));
+        exportViewport.resetTransform(Mat33_1.default.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());
+            }
+        }
+        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;
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        // Clear the selection
+        this.handleOverlay.replaceChildren();
+        this.selectionBox = null;
+        this.shiftKeyPressed = false;
+        this.ctrlKeyPressed = 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
+    getSelection() {
+        return this.selectionBox;
+    }
+    getSelectedObjects() {
+        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.
+    setSelection(objects) {
+        // Only select selectable objects.
+        objects = objects.filter(obj => obj.isSelectable());
+        // Sort by z-index
+        objects.sort((a, b) => a.getZIndex() - b.getZIndex());
+        // Remove duplicates
+        objects = objects.filter((current, idx) => {
+            if (idx > 0) {
+                return current !== objects[idx - 1];
+            }
+            return true;
+        });
+        let bbox = null;
+        for (const object of objects) {
+            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();
+    }
+    clearSelection() {
+        this.handleOverlay.replaceChildren();
+        this.prevSelectionBox = this.selectionBox;
+        this.selectionBox = null;
+        this.onSelectionUpdated();
+    }
+}
+exports.default = SelectionTool;
+SelectionTool.handleableKeys = [
+    'a', 'h', 'ArrowLeft',
+    'd', 'l', 'ArrowRight',
+    'q', 'k', 'ArrowUp',
+    'e', 'j', 'ArrowDown',
+    'r', 'R',
+    'i', 'I', 'o', 'O',
+    'Control', 'Meta',
+];

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransformMode = exports.ResizeMode = void 0;
+var ResizeMode;
+(function (ResizeMode) {
+    ResizeMode[ResizeMode["Both"] = 0] = "Both";
+    ResizeMode[ResizeMode["HorizontalOnly"] = 1] = "HorizontalOnly";
+    ResizeMode[ResizeMode["VerticalOnly"] = 2] = "VerticalOnly";
+})(ResizeMode = exports.ResizeMode || (exports.ResizeMode = {}));
+var TransformMode;
+(function (TransformMode) {
+    TransformMode[TransformMode["Snap"] = 0] = "Snap";
+    TransformMode[TransformMode["NoSnap"] = 1] = "NoSnap";
+})(TransformMode = exports.TransformMode || (exports.TransformMode = {}));