js-draw 0.23.1 → 0.24.1

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

@@ -1,463 +0,0 @@
-/**
- * @internal
- * @packageDocumentation
- */
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var _a;
-import  SerializableCommand  from '../../commands/SerializableCommand.mjs';
-import  Mat33  from '../../math/Mat33.mjs';
-import  Rect2  from '../../math/Rect2.mjs';
-import  { Vec2 }  from '../../math/Vec2.mjs';
-import  SelectionHandle, { HandleShape, handleSize }  from './SelectionHandle.mjs';
-import  { cssPrefix }  from './SelectionTool.mjs';
-import  Viewport  from '../../Viewport.mjs';
-import  Erase  from '../../commands/Erase.mjs';
-import  Duplicate  from '../../commands/Duplicate.mjs';
-import  { DragTransformer, ResizeTransformer, RotateTransformer }  from './TransformMode.mjs';
-import  { ResizeMode }  from './types.mjs';
-import  EditorImage  from '../../EditorImage.mjs';
-const updateChunkSize = 100;
-const maxPreviewElemCount = 500;
-// @internal
-class Selection {
-    constructor(startPoint, editor) {
-        this.editor = editor;
-        this.transform = Mat33.identity;
-        this.selectedElems = [];
-        this.hasParent = true;
-        // Maps IDs to whether we removed the component from the image
-        this.removedFromImage = {};
-        this.targetHandle = null;
-        this.backgroundDragging = false;
-        this.originalRegion = new Rect2(startPoint.x, startPoint.y, 0, 0);
-        this.transformers = {
-            drag: new DragTransformer(editor, this),
-            resize: new ResizeTransformer(editor, this),
-            rotate: new RotateTransformer(editor, this),
-        };
-        this.container = document.createElement('div');
-        this.backgroundElem = document.createElement('div');
-        this.backgroundElem.classList.add(`${cssPrefix}selection-background`);
-        this.container.appendChild(this.backgroundElem);
-        const resizeHorizontalHandle = new SelectionHandle(HandleShape.Square, Vec2.of(1, 0.5), this, (startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.HorizontalOnly), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
-        const resizeVerticalHandle = new SelectionHandle(HandleShape.Square, Vec2.of(0.5, 1), this, (startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.VerticalOnly), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
-        const resizeBothHandle = new SelectionHandle(HandleShape.Square, Vec2.of(1, 1), this, (startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.Both), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
-        const rotationHandle = new SelectionHandle(HandleShape.Circle, Vec2.of(0.5, 0), this, (startPoint) => this.transformers.rotate.onDragStart(startPoint), (currentPoint) => this.transformers.rotate.onDragUpdate(currentPoint), () => this.transformers.rotate.onDragEnd());
-        this.handles = [
-            resizeBothHandle,
-            resizeHorizontalHandle,
-            resizeVerticalHandle,
-            rotationHandle,
-        ];
-        for (const handle of this.handles) {
-            handle.addTo(this.backgroundElem);
-        }
-    }
-    // @internal Intended for unit tests
-    getBackgroundElem() {
-        return this.backgroundElem;
-    }
-    getTransform() {
-        return this.transform;
-    }
-    get preTransformRegion() {
-        return this.originalRegion;
-    }
-    get region() {
-        // TODO: This currently assumes that the region rotates about its center.
-        // This may not be true.
-        const rotationMatrix = Mat33.zRotation(this.regionRotation, this.originalRegion.center);
-        const scaleAndTranslateMat = this.transform.rightMul(rotationMatrix.inverse());
-        return this.originalRegion.transformedBoundingBox(scaleAndTranslateMat);
-    }
-    /**
-     * Computes and returns the bounding box of the selection without
-     * any additional padding. Computes directly from the elements that are selected.
-     * @internal
-     */
-    computeTightBoundingBox() {
-        const bbox = this.selectedElems.reduce((accumulator, elem) => {
-            return (accumulator !== null && accumulator !== void 0 ? accumulator : elem.getBBox()).union(elem.getBBox());
-        }, null);
-        return bbox !== null && bbox !== void 0 ? bbox : Rect2.empty;
-    }
-    get regionRotation() {
-        return this.transform.transformVec3(Vec2.unitX).angle();
-    }
-    get preTransformedScreenRegion() {
-        const toScreen = (vec) => this.editor.viewport.canvasToScreen(vec);
-        return Rect2.fromCorners(toScreen(this.preTransformRegion.topLeft), toScreen(this.preTransformRegion.bottomRight));
-    }
-    get preTransformedScreenRegionRotation() {
-        return this.editor.viewport.getRotationAngle();
-    }
-    get screenRegion() {
-        const toScreen = this.editor.viewport.canvasToScreenTransform;
-        const scaleFactor = this.editor.viewport.getScaleFactor();
-        const screenCenter = toScreen.transformVec2(this.region.center);
-        return new Rect2(screenCenter.x, screenCenter.y, scaleFactor * this.region.width, scaleFactor * this.region.height).translatedBy(this.region.size.times(-scaleFactor / 2));
-    }
-    get screenRegionRotation() {
-        return this.regionRotation + this.editor.viewport.getRotationAngle();
-    }
-    // Applies, previews, but doesn't finalize the given transformation.
-    setTransform(transform, preview = true) {
-        this.transform = transform;
-        if (preview && this.hasParent) {
-            this.scrollTo();
-            this.previewTransformCmds();
-        }
-    }
-    // Applies the current transformation to the selection
-    finalizeTransform() {
-        const fullTransform = this.transform;
-        const selectedElems = this.selectedElems;
-        // Reset for the next drag
-        this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
-        this.transform = Mat33.identity;
-        // Make the commands undo-able
-        this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
-        // Clear renderings of any in-progress transformations
-        const wetInkRenderer = this.editor.display.getWetInkRenderer();
-        wetInkRenderer.clear();
-    }
-    // Preview the effects of the current transformation on the selection
-    previewTransformCmds() {
-        // Don't render what we're moving if it's likely to be slow.
-        if (this.selectedElems.length > maxPreviewElemCount) {
-            this.updateUI();
-            return;
-        }
-        const wetInkRenderer = this.editor.display.getWetInkRenderer();
-        wetInkRenderer.clear();
-        wetInkRenderer.pushTransform(this.transform);
-        const viewportVisibleRect = this.editor.viewport.visibleRect;
-        const visibleRect = viewportVisibleRect.transformedBoundingBox(this.transform.inverse());
-        for (const elem of this.selectedElems) {
-            elem.render(wetInkRenderer, visibleRect);
-        }
-        wetInkRenderer.popTransform();
-        this.updateUI();
-    }
-    // Find the objects corresponding to this in the document,
-    // select them.
-    // Returns false iff nothing was selected.
-    resolveToObjects() {
-        let singleItemSelectionMode = false;
-        this.transform = Mat33.identity;
-        // Grow the rectangle, if necessary
-        if (this.region.w === 0 || this.region.h === 0) {
-            const padding = this.editor.viewport.visibleRect.maxDimension / 200;
-            this.originalRegion = Rect2.bboxOf(this.region.corners, padding);
-            // Only select one item if the rectangle was very small.
-            singleItemSelectionMode = true;
-        }
-        this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(elem => {
-            return elem.intersectsRect(this.region) && elem.isSelectable();
-        });
-        if (singleItemSelectionMode && this.selectedElems.length > 0) {
-            this.selectedElems = [this.selectedElems[this.selectedElems.length - 1]];
-        }
-        // Find the bounding box of all selected elements.
-        if (!this.recomputeRegion()) {
-            return false;
-        }
-        this.updateUI();
-        return true;
-    }
-    // Recompute this' region from the selected elements.
-    // Returns false if the selection is empty.
-    recomputeRegion() {
-        const newRegion = this.computeTightBoundingBox();
-        if (!newRegion) {
-            this.cancelSelection();
-            return false;
-        }
-        this.originalRegion = newRegion;
-        const minSize = this.getMinCanvasSize();
-        if (this.originalRegion.w < minSize || this.originalRegion.h < minSize) {
-            // Add padding
-            const padding = minSize / 2;
-            this.originalRegion = Rect2.bboxOf(this.originalRegion.corners, padding);
-        }
-        return true;
-    }
-    getMinCanvasSize() {
-        const canvasHandleSize = handleSize / this.editor.viewport.getScaleFactor();
-        return canvasHandleSize * 2;
-    }
-    getSelectedItemCount() {
-        return this.selectedElems.length;
-    }
-    // @internal
-    updateUI() {
-        // Don't update old selections.
-        if (!this.hasParent) {
-            return;
-        }
-        // marginLeft, marginTop: Display relative to the top left of the selection overlay.
-        // left, top don't work for this.
-        this.backgroundElem.style.marginLeft = `${this.screenRegion.topLeft.x}px`;
-        this.backgroundElem.style.marginTop = `${this.screenRegion.topLeft.y}px`;
-        this.backgroundElem.style.width = `${this.screenRegion.width}px`;
-        this.backgroundElem.style.height = `${this.screenRegion.height}px`;
-        const rotationDeg = this.screenRegionRotation * 180 / Math.PI;
-        this.backgroundElem.style.transform = `rotate(${rotationDeg}deg)`;
-        this.backgroundElem.style.transformOrigin = 'center';
-        for (const handle of this.handles) {
-            handle.updatePosition();
-        }
-    }
-    // Add/remove the contents of this' seleciton from the editor.
-    // Used to prevent previewed content from looking like duplicate content
-    // while dragging.
-    //
-    // Does nothing if a large number of elements are selected (and so modifying
-    // the editor image is likely to be slow.)
-    //
-    // If removed from the image, selected elements are drawn as wet ink.
-    addRemoveSelectionFromImage(inImage) {
-        // Don't hide elements if doing so will be slow.
-        if (!inImage && this.selectedElems.length > maxPreviewElemCount) {
-            return;
-        }
-        for (const elem of this.selectedElems) {
-            const parent = this.editor.image.findParent(elem);
-            if (!inImage && parent) {
-                this.removedFromImage[elem.getId()] = true;
-                parent.remove();
-            }
-            // If we're making things visible and the selected object wasn't previously
-            // visible,
-            else if (!parent && this.removedFromImage[elem.getId()]) {
-                EditorImage.addElement(elem).apply(this.editor);
-                this.removedFromImage[elem.getId()] = false;
-                delete this.removedFromImage[elem.getId()];
-            }
-        }
-        // Don't await queueRerender. If we're running in a test, the re-render might never
-        // happen.
-        this.editor.queueRerender().then(() => {
-            if (!inImage) {
-                this.previewTransformCmds();
-            }
-        });
-    }
-    removeDeletedElemsFromSelection() {
-        // Remove any deleted elements from the selection.
-        this.selectedElems = this.selectedElems.filter(elem => {
-            const hasParent = !!this.editor.image.findParent(elem);
-            // If we removed the element and haven't added it back yet, don't remove it
-            // from the selection.
-            const weRemoved = this.removedFromImage[elem.getId()];
-            return hasParent || weRemoved;
-        });
-    }
-    onDragStart(pointer, target) {
-        this.removeDeletedElemsFromSelection();
-        this.addRemoveSelectionFromImage(false);
-        for (const handle of this.handles) {
-            if (handle.isTarget(target)) {
-                handle.handleDragStart(pointer);
-                this.targetHandle = handle;
-                return true;
-            }
-        }
-        if (this.backgroundElem === target) {
-            this.backgroundDragging = true;
-            this.transformers.drag.onDragStart(pointer.canvasPos);
-            return true;
-        }
-        return false;
-    }
-    onDragUpdate(pointer) {
-        if (this.backgroundDragging) {
-            this.transformers.drag.onDragUpdate(pointer.canvasPos);
-        }
-        if (this.targetHandle) {
-            this.targetHandle.handleDragUpdate(pointer);
-        }
-    }
-    onDragEnd() {
-        if (this.backgroundDragging) {
-            this.transformers.drag.onDragEnd();
-        }
-        else if (this.targetHandle) {
-            this.targetHandle.handleDragEnd();
-        }
-        this.addRemoveSelectionFromImage(true);
-        this.backgroundDragging = false;
-        this.targetHandle = null;
-        this.updateUI();
-    }
-    onDragCancel() {
-        this.backgroundDragging = false;
-        this.targetHandle = null;
-        this.setTransform(Mat33.identity);
-        this.addRemoveSelectionFromImage(true);
-    }
-    // Scroll the viewport to this. Does not zoom
-    scrollTo() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.selectedElems.length === 0) {
-                return;
-            }
-            const screenRect = new Rect2(0, 0, this.editor.display.width, this.editor.display.height);
-            if (!screenRect.containsPoint(this.screenRegion.center)) {
-                const closestPoint = screenRect.getClosestPointOnBoundaryTo(this.screenRegion.center);
-                const screenDelta = this.screenRegion.center.minus(closestPoint);
-                const delta = this.editor.viewport.screenToCanvasTransform.transformVec3(screenDelta);
-                yield this.editor.dispatchNoAnnounce(Viewport.transformBy(Mat33.translation(delta.times(-1))), false);
-                // Re-renders clear wet ink, so we need to re-draw the preview
-                // after the full re-render.
-                yield this.editor.queueRerender();
-                this.previewTransformCmds();
-            }
-        });
-    }
-    deleteSelectedObjects() {
-        if (this.backgroundDragging || this.targetHandle) {
-            this.onDragEnd();
-        }
-        return new Erase(this.selectedElems);
-    }
-    duplicateSelectedObjects() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const wasTransforming = this.backgroundDragging || this.targetHandle;
-            let tmpApplyCommand = null;
-            if (wasTransforming) {
-                // Don't update the selection's focus when redoing/undoing
-                const selectionToUpdate = null;
-                tmpApplyCommand = new Selection.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.transform);
-                // Transform to ensure that the duplicates are in the correct location
-                yield tmpApplyCommand.apply(this.editor);
-                // Show items again
-                this.addRemoveSelectionFromImage(true);
-            }
-            const duplicateCommand = new Duplicate(this.selectedElems);
-            if (wasTransforming) {
-                // Move the selected objects back to the correct location.
-                yield (tmpApplyCommand === null || tmpApplyCommand === void 0 ? void 0 : tmpApplyCommand.unapply(this.editor));
-                this.addRemoveSelectionFromImage(false);
-                this.previewTransformCmds();
-                this.updateUI();
-            }
-            return duplicateCommand;
-        });
-    }
-    addTo(elem) {
-        if (this.container.parentElement) {
-            this.container.remove();
-        }
-        elem.appendChild(this.container);
-        this.hasParent = true;
-    }
-    setToPoint(point) {
-        this.originalRegion = this.originalRegion.grownToPoint(point);
-        this.updateUI();
-    }
-    cancelSelection() {
-        if (this.container.parentElement) {
-            this.container.remove();
-        }
-        this.originalRegion = Rect2.empty;
-        this.hasParent = false;
-    }
-    setSelectedObjects(objects, bbox) {
-        this.addRemoveSelectionFromImage(true);
-        this.originalRegion = bbox;
-        this.selectedElems = objects.filter(object => object.isSelectable());
-        this.updateUI();
-    }
-    getSelectedObjects() {
-        return this.selectedElems;
-    }
-}
-_a = Selection;
-(() => {
-    SerializableCommand.register('selection-tool-transform', (json, _editor) => {
-        var _b;
-        // The selection box is lost when serializing/deserializing. No need to store box rotation
-        const fullTransform = new Mat33(...json.transform);
-        const elemIds = ((_b = json.elems) !== null && _b !== void 0 ? _b : []);
-        return new _a.ApplyTransformationCommand(null, elemIds, fullTransform);
-    });
-})();
-Selection.ApplyTransformationCommand = class extends SerializableCommand {
-    constructor(selection, 
-    // If a `string[]`, selectedElems is a list of element IDs.
-    selectedElems, 
-    // Full transformation used to transform elements.
-    fullTransform) {
-        super('selection-tool-transform');
-        this.selection = selection;
-        this.fullTransform = fullTransform;
-        const isIDList = (arr) => {
-            return typeof arr[0] === 'string';
-        };
-        // If a list of element IDs,
-        if (isIDList(selectedElems)) {
-            this.selectedElemIds = selectedElems;
-        }
-        else {
-            this.selectedElemIds = selectedElems.map(elem => elem.getId());
-            this.transformCommands = selectedElems.map(elem => {
-                return elem.transformBy(this.fullTransform);
-            });
-        }
-    }
-    resolveToElems(editor) {
-        if (this.transformCommands) {
-            return;
-        }
-        this.transformCommands = this.selectedElemIds.map(id => {
-            const elem = editor.image.lookupElement(id);
-            if (!elem) {
-                throw new Error(`Unable to find element with ID, ${id}.`);
-            }
-            return elem.transformBy(this.fullTransform);
-        });
-    }
-    apply(editor) {
-        var _b, _c, _d, _e, _f;
-        return __awaiter(this, void 0, void 0, function* () {
-            this.resolveToElems(editor);
-            (_b = this.selection) === null || _b === void 0 ? void 0 : _b.setTransform(this.fullTransform, false);
-            (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
-            yield editor.asyncApplyCommands(this.transformCommands, updateChunkSize);
-            (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33.identity, false);
-            (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
-            (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();
-        });
-    }
-    unapply(editor) {
-        var _b, _c, _d, _e, _f;
-        return __awaiter(this, void 0, void 0, function* () {
-            this.resolveToElems(editor);
-            (_b = this.selection) === null || _b === void 0 ? void 0 : _b.setTransform(this.fullTransform.inverse(), false);
-            (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
-            yield editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize, true);
-            (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33.identity, false);
-            (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
-            (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();
-        });
-    }
-    serializeToJSON() {
-        return {
-            elems: this.selectedElemIds,
-            transform: this.fullTransform.toArray(),
-        };
-    }
-    description(_editor, localizationTable) {
-        return localizationTable.transformedElements(this.selectedElemIds.length);
-    }
-};
-export default Selection;

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

@@ -1,81 +0,0 @@
-import  { assertUnreachable }  from '../../util/assertions.mjs';
-import  { Vec2 }  from '../../math/Vec2.mjs';
-import  { cssPrefix }  from './SelectionTool.mjs';
-export var HandleShape;
-(function (HandleShape) {
-    HandleShape[HandleShape["Circle"] = 0] = "Circle";
-    HandleShape[HandleShape["Square"] = 1] = "Square";
-})(HandleShape || (HandleShape = {}));
-export const handleSize = 30;
-export default class SelectionHandle {
-    // Bounding box in screen coordinates.
-    constructor(shape, parentSide, parent, onDragStart, onDragUpdate, onDragEnd) {
-        this.shape = shape;
-        this.parentSide = parentSide;
-        this.parent = parent;
-        this.onDragStart = onDragStart;
-        this.onDragUpdate = onDragUpdate;
-        this.onDragEnd = onDragEnd;
-        this.dragLastPos = null;
-        this.element = document.createElement('div');
-        this.element.classList.add(`${cssPrefix}handle`);
-        switch (shape) {
-            case HandleShape.Circle:
-                this.element.classList.add(`${cssPrefix}circle`);
-                break;
-            case HandleShape.Square:
-                this.element.classList.add(`${cssPrefix}square`);
-                break;
-            default:
-                assertUnreachable(shape);
-        }
-        this.updatePosition();
-    }
-    /**
-     * Adds this to `container`, where `conatiner` should be the background/selection
-     * element visible on the screen.
-     */
-    addTo(container) {
-        container.appendChild(this.element);
-    }
-    updatePosition() {
-        const parentRect = this.parent.screenRegion;
-        const size = Vec2.of(handleSize, handleSize);
-        const topLeft = parentRect.size.scale(this.parentSide)
-            // Center
-            .minus(size.times(1 / 2));
-        // Position within the selection box.
-        this.element.style.marginLeft = `${topLeft.x}px`;
-        this.element.style.marginTop = `${topLeft.y}px`;
-        this.element.style.width = `${size.x}px`;
-        this.element.style.height = `${size.y}px`;
-    }
-    /**
-     * @returns `true` if the given `EventTarget` matches this.
-     */
-    isTarget(target) {
-        return target === this.element;
-    }
-    handleDragStart(pointer) {
-        this.onDragStart(pointer.canvasPos);
-        this.dragLastPos = pointer.canvasPos;
-    }
-    handleDragUpdate(pointer) {
-        if (!this.dragLastPos) {
-            return;
-        }
-        this.onDragUpdate(pointer.canvasPos);
-    }
-    handleDragEnd() {
-        if (!this.dragLastPos) {
-            return;
-        }
-        this.onDragEnd();
-    }
-    setSnapToGrid(snap) {
-        this.snapToGrid = snap;
-    }
-    isSnappingToGrid() {
-        return this.snapToGrid;
-    }
-}

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

@@ -1,37 +0,0 @@
-import AbstractComponent from '../../components/AbstractComponent';
-import Editor from '../../Editor';
-import { CopyEvent, KeyPressEvent, KeyUpEvent, PointerEvt } from '../../types';
-import BaseTool from '../BaseTool';
-import Selection from './Selection';
-export declare const cssPrefix = "selection-tool-";
-export default class SelectionTool extends BaseTool {
-    private editor;
-    private handleOverlay;
-    private prevSelectionBox;
-    private selectionBox;
-    private lastEvtTarget;
-    private startPoint;
-    private expandingSelectionBox;
-    private shiftKeyPressed;
-    private ctrlKeyPressed;
-    constructor(editor: Editor, description: string);
-    private makeSelectionBox;
-    private snapSelectionToGrid;
-    private selectionBoxHandlingEvt;
-    onPointerDown({ allPointers, current }: PointerEvt): boolean;
-    onPointerMove(event: PointerEvt): void;
-    private onSelectionUpdated;
-    private onGestureEnd;
-    private zoomToSelection;
-    onPointerUp(event: PointerEvt): void;
-    onGestureCancel(): void;
-    private static handleableKeys;
-    onKeyPress(event: KeyPressEvent): boolean;
-    onKeyUp(evt: KeyUpEvent): boolean;
-    onCopy(event: CopyEvent): boolean;
-    setEnabled(enabled: boolean): void;
-    getSelection(): Selection | null;
-    getSelectedObjects(): AbstractComponent[];
-    setSelection(objects: AbstractComponent[]): void;
-    clearSelection(): void;
-}