js-draw 0.17.4 → 0.18.1

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

@@ -1,398 +0,0 @@
-import Mat33 from '../../math/Mat33';
-import { Vec2 } from '../../math/Vec2';
-import { EditorEventType } from '../../types';
-import Viewport from '../../Viewport';
-import BaseTool from '../BaseTool';
-import SVGRenderer from '../../rendering/renderers/SVGRenderer';
-import Selection from './Selection';
-import TextComponent from '../../components/TextComponent';
-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/src/tools/SelectionTool/TransformMode.d.ts

@@ -1,34 +0,0 @@
-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/src/tools/SelectionTool/TransformMode.js

@@ -1,98 +0,0 @@
-import Mat33 from '../../math/Mat33';
-import { Vec2 } from '../../math/Vec2';
-import Viewport from '../../Viewport';
-import { ResizeMode } from './types';
-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/src/tools/SelectionTool/types.d.ts

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

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

@@ -1,11 +0,0 @@
-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/src/tools/TextTool.d.ts

@@ -1,33 +0,0 @@
-import Color4 from '../Color4';
-import Editor from '../Editor';
-import { PointerEvt } from '../types';
-import BaseTool from './BaseTool';
-import { ToolLocalization } from './localization';
-import TextStyle from '../rendering/TextRenderingStyle';
-export default class TextTool extends BaseTool {
-    private editor;
-    private localizationTable;
-    private textStyle;
-    private textEditOverlay;
-    private textInputElem;
-    private textTargetPosition;
-    private textMeasuringCtx;
-    private textRotation;
-    private textScale;
-    private removeExistingCommand;
-    constructor(editor: Editor, description: string, localizationTable: ToolLocalization);
-    private getTextAscent;
-    private flushInput;
-    private getTextScaleMatrix;
-    private updateTextInput;
-    private startTextInput;
-    setEnabled(enabled: boolean): void;
-    onPointerDown({ current, allPointers }: PointerEvt): boolean;
-    onGestureCancel(): void;
-    private dispatchUpdateEvent;
-    setFontFamily(fontFamily: string): void;
-    setColor(color: Color4): void;
-    setFontSize(size: number): void;
-    getTextStyle(): TextStyle;
-    private setTextStyle;
-}