js-draw 0.18.1 → 0.19.0

package/dist/mjs/src/tools/SelectionTool/SelectionTool.mjs

@@ -0,0 +1,398 @@
+import  Mat33  from '../../math/Mat33.mjs';
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  { EditorEventType }  from '../../types.mjs';
+import  Viewport  from '../../Viewport.mjs';
+import  BaseTool  from '../BaseTool.mjs';
+import  SVGRenderer  from '../../rendering/renderers/SVGRenderer.mjs';
+import  Selection  from './Selection.mjs';
+import  TextComponent  from '../../components/TextComponent.mjs';
+export const cssPrefix = 'selection-tool-';
+// Allows users to select/transform portions of the `EditorImage`.
+// With respect to `extend`ing, `SelectionTool` is not stable.
+export default class SelectionTool extends BaseTool {
+    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(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(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.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(EditorEventType.ToolUpdated, {
+            kind: 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.of(Math.pow(scaleStepSize, xScaleSteps), Math.pow(scaleStepSize, yScaleSteps));
+            const rotationMat = Mat33.zRotation(rotationSteps * rotateStepSize);
+            const roundedRotationMatrix = rotationMat.mapEntries(component => Viewport.roundScaleRatio(component));
+            const regionCenter = this.editor.viewport.roundPoint(region.center);
+            const transform = Mat33.scaling2D(scaleFactor, this.editor.viewport.roundPoint(region.topLeft)).rightMul(Mat33.translation(regionCenter).rightMul(roundedRotationMatrix).rightMul(Mat33.translation(regionCenter.times(-1)))).rightMul(Mat33.translation(this.editor.viewport.roundPoint(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(() => { });
+        exportViewport.updateScreenSize(Vec2.of(bbox.w, bbox.h));
+        exportViewport.resetTransform(Mat33.translation(bbox.topLeft.times(-1)));
+        const sanitize = true;
+        const { element: svgExportElem, renderer: svgRenderer } = SVGRenderer.fromViewport(exportViewport, sanitize);
+        const text = [];
+        for (const elem of selectedElems) {
+            elem.render(svgRenderer);
+            if (elem instanceof TextComponent) {
+                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();
+    }
+}
+SelectionTool.handleableKeys = [
+    'a', 'h', 'ArrowLeft',
+    'd', 'l', 'ArrowRight',
+    'q', 'k', 'ArrowUp',
+    'e', 'j', 'ArrowDown',
+    'r', 'R',
+    'i', 'I', 'o', 'O',
+    'Control', 'Meta',
+];

package/dist/mjs/src/tools/SelectionTool/TransformMode.d.ts

@@ -0,0 +1,34 @@
+import Editor from '../../Editor';
+import Vec3 from '../../math/Vec3';
+import Selection from './Selection';
+import { ResizeMode } from './types';
+export declare class DragTransformer {
+    private readonly editor;
+    private selection;
+    private dragStartPoint;
+    constructor(editor: Editor, selection: Selection);
+    onDragStart(startPoint: Vec3): void;
+    onDragUpdate(canvasPos: Vec3): void;
+    onDragEnd(): void;
+}
+export declare class ResizeTransformer {
+    private readonly editor;
+    private selection;
+    private mode;
+    private dragStartPoint;
+    constructor(editor: Editor, selection: Selection);
+    onDragStart(startPoint: Vec3, mode: ResizeMode): void;
+    onDragUpdate(canvasPos: Vec3): void;
+    onDragEnd(): void;
+}
+export declare class RotateTransformer {
+    private readonly editor;
+    private selection;
+    private startAngle;
+    constructor(editor: Editor, selection: Selection);
+    private getAngle;
+    private roundAngle;
+    onDragStart(startPoint: Vec3): void;
+    onDragUpdate(canvasPos: Vec3): void;
+    onDragEnd(): void;
+}

package/dist/mjs/src/tools/SelectionTool/TransformMode.mjs

@@ -0,0 +1,98 @@
+import  Mat33  from '../../math/Mat33.mjs';
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  Viewport  from '../../Viewport.mjs';
+import  { ResizeMode }  from './types.mjs';
+export class DragTransformer {
+    constructor(editor, selection) {
+        this.editor = editor;
+        this.selection = selection;
+    }
+    onDragStart(startPoint) {
+        this.selection.setTransform(Mat33.identity);
+        this.dragStartPoint = startPoint;
+    }
+    onDragUpdate(canvasPos) {
+        const delta = this.editor.viewport.roundPoint(canvasPos.minus(this.dragStartPoint));
+        this.selection.setTransform(Mat33.translation(delta));
+    }
+    onDragEnd() {
+        this.selection.finalizeTransform();
+    }
+}
+export class ResizeTransformer {
+    constructor(editor, selection) {
+        this.editor = editor;
+        this.selection = selection;
+        this.mode = ResizeMode.Both;
+    }
+    onDragStart(startPoint, mode) {
+        this.selection.setTransform(Mat33.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.of(1, 1);
+        if (this.mode === ResizeMode.HorizontalOnly) {
+            const newWidth = origWidth + canvasDelta.x;
+            scale = Vec2.of(newWidth / origWidth, scale.y);
+        }
+        if (this.mode === ResizeMode.VerticalOnly) {
+            const newHeight = origHeight + canvasDelta.y;
+            scale = Vec2.of(scale.x, newHeight / origHeight);
+        }
+        if (this.mode === ResizeMode.Both) {
+            const delta = Math.abs(canvasDelta.x) > Math.abs(canvasDelta.y) ? canvasDelta.x : canvasDelta.y;
+            const newWidth = origWidth + delta;
+            scale = 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.roundScaleRatio(component, 2));
+        if (scale.x !== 0 && scale.y !== 0) {
+            const origin = this.editor.viewport.roundPoint(this.selection.preTransformRegion.topLeft);
+            this.selection.setTransform(Mat33.scaling2D(scale, origin));
+        }
+    }
+    onDragEnd() {
+        this.selection.finalizeTransform();
+    }
+}
+export 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.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.zRotation(targetRotation);
+        const roundedRotationTransform = unrounded.mapEntries(entry => Viewport.roundScaleRatio(entry));
+        const fullRoundedTransform = Mat33
+            .translation(canvasSelCenter)
+            .rightMul(roundedRotationTransform)
+            .rightMul(Mat33.translation(canvasSelCenter.times(-1)));
+        this.selection.setTransform(fullRoundedTransform);
+    }
+    onDragEnd() {
+        this.selection.finalizeTransform();
+    }
+}

package/dist/mjs/src/tools/SelectionTool/types.d.ts

@@ -0,0 +1,9 @@
+export declare enum ResizeMode {
+    Both = 0,
+    HorizontalOnly = 1,
+    VerticalOnly = 2
+}
+export declare enum TransformMode {
+    Snap = 0,
+    NoSnap = 1
+}

package/dist/mjs/src/tools/SelectionTool/types.mjs

@@ -0,0 +1,11 @@
+export var ResizeMode;
+(function (ResizeMode) {
+    ResizeMode[ResizeMode["Both"] = 0] = "Both";
+    ResizeMode[ResizeMode["HorizontalOnly"] = 1] = "HorizontalOnly";
+    ResizeMode[ResizeMode["VerticalOnly"] = 2] = "VerticalOnly";
+})(ResizeMode || (ResizeMode = {}));
+export var TransformMode;
+(function (TransformMode) {
+    TransformMode[TransformMode["Snap"] = 0] = "Snap";
+    TransformMode[TransformMode["NoSnap"] = 1] = "NoSnap";
+})(TransformMode || (TransformMode = {}));

package/dist/mjs/src/tools/SoundUITool.d.ts

@@ -0,0 +1,24 @@
+import Editor from '../Editor';
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+/**
+ * This tool, when enabled, plays a sound representing the color of the portion of the display
+ * currently under the cursor. This tool adds a button that can be navigated to with the tab key
+ * that enables/disables the tool.
+ *
+ * This allows the user to explore the content of the display without a working screen.
+ */
+export default class SoundUITool extends BaseTool {
+    private editor;
+    private soundFeedback;
+    private toggleButton;
+    private toggleButtonContainer;
+    constructor(editor: Editor, description: string);
+    private updateToggleButtonText;
+    setEnabled(enabled: boolean): void;
+    private lastPointerPos;
+    onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onPointerMove({ current }: PointerEvt): void;
+    onPointerUp(_event: PointerEvt): void;
+    onGestureCancel(): void;
+}