js-draw 0.3.2 → 0.4.1

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

@@ -0,0 +1,337 @@
+/**
+ * @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';
+import { Mat33, Rect2 } from '../../math/lib';
+import { Vec2 } from '../../math/Vec2';
+import SelectionHandle, { HandleShape, handleSize } from './SelectionHandle';
+import { cssPrefix } from './SelectionTool';
+import Viewport from '../../Viewport';
+import Erase from '../../commands/Erase';
+import Duplicate from '../../commands/Duplicate';
+import { DragTransformer, ResizeTransformer, RotateTransformer } from './TransformMode';
+import { ResizeMode } from './types';
+const updateChunkSize = 100;
+// @internal
+export default class Selection {
+    constructor(startPoint, editor) {
+        this.editor = editor;
+        this.transform = Mat33.identity;
+        this.transformCommands = [];
+        this.selectedElems = [];
+        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);
+        }
+    }
+    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);
+    }
+    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();
+    }
+    computeTransformCommands() {
+        return this.selectedElems.map(elem => {
+            return elem.transformBy(this.transform);
+        });
+    }
+    // Applies, previews, but doesn't finalize the given transformation.
+    setTransform(transform, preview = true) {
+        this.transform = transform;
+        if (preview) {
+            this.previewTransformCmds();
+            this.scrollTo();
+        }
+    }
+    // Applies the current transformation to the selection
+    finalizeTransform() {
+        this.transformCommands.forEach(cmd => {
+            cmd.unapply(this.editor);
+        });
+        const fullTransform = this.transform;
+        const currentTransfmCommands = this.computeTransformCommands();
+        // Reset for the next drag
+        this.transformCommands = [];
+        this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
+        this.transform = Mat33.identity;
+        // Make the commands undo-able
+        this.editor.dispatch(new Selection.ApplyTransformationCommand(this, currentTransfmCommands, fullTransform));
+    }
+    // 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 > updateChunkSize) {
+            this.updateUI();
+            return;
+        }
+        this.transformCommands.forEach(cmd => cmd.unapply(this.editor));
+        this.transformCommands = this.computeTransformCommands();
+        this.transformCommands.forEach(cmd => cmd.apply(this.editor));
+        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 => {
+            if (this.region.containsRect(elem.getBBox())) {
+                return true;
+            }
+            // Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
+            // As such, test with more lines than just this' edges.
+            const testLines = [];
+            for (const subregion of this.region.divideIntoGrid(2, 2)) {
+                testLines.push(...subregion.getEdges());
+            }
+            return testLines.some(edge => elem.intersects(edge));
+        });
+        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.selectedElems.reduce((accumulator, elem) => {
+            return (accumulator !== null && accumulator !== void 0 ? accumulator : elem.getBBox()).union(elem.getBBox());
+        }, null);
+        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() {
+        // 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();
+        }
+    }
+    onDragStart(pointer, target) {
+        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);
+        }
+        this.updateUI();
+    }
+    onDragEnd() {
+        if (this.backgroundDragging) {
+            this.transformers.drag.onDragEnd();
+        }
+        else if (this.targetHandle) {
+            this.targetHandle.handleDragEnd();
+        }
+        this.backgroundDragging = false;
+        this.targetHandle = null;
+        this.updateUI();
+    }
+    onDragCancel() {
+        this.backgroundDragging = false;
+        this.targetHandle = null;
+        this.setTransform(Mat33.identity);
+    }
+    // Scroll the viewport to this. Does not zoom
+    scrollTo() {
+        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);
+            this.editor.dispatchNoAnnounce(Viewport.transformBy(Mat33.translation(delta.times(-1))), false);
+        }
+    }
+    deleteSelectedObjects() {
+        return new Erase(this.selectedElems);
+    }
+    duplicateSelectedObjects() {
+        return new Duplicate(this.selectedElems);
+    }
+    addTo(elem) {
+        if (this.container.parentElement) {
+            this.container.remove();
+        }
+        elem.appendChild(this.container);
+    }
+    setToPoint(point) {
+        this.originalRegion = this.originalRegion.grownToPoint(point);
+        this.updateUI();
+    }
+    cancelSelection() {
+        if (this.container.parentElement) {
+            this.container.remove();
+        }
+        this.originalRegion = Rect2.empty;
+    }
+    setSelectedObjects(objects, bbox) {
+        this.originalRegion = bbox;
+        this.selectedElems = objects;
+        this.updateUI();
+    }
+    getSelectedObjects() {
+        return this.selectedElems;
+    }
+}
+_a = Selection;
+(() => {
+    SerializableCommand.register('selection-tool-transform', (json, editor) => {
+        // The selection box is lost when serializing/deserializing. No need to store box rotation
+        const fullTransform = new Mat33(...json.transform);
+        const commands = json.commands.map(data => SerializableCommand.deserialize(data, editor));
+        return new _a.ApplyTransformationCommand(null, commands, fullTransform);
+    });
+})();
+Selection.ApplyTransformationCommand = class extends SerializableCommand {
+    constructor(selection, currentTransfmCommands, fullTransform) {
+        super('selection-tool-transform');
+        this.selection = selection;
+        this.currentTransfmCommands = currentTransfmCommands;
+        this.fullTransform = fullTransform;
+    }
+    apply(editor) {
+        var _b, _c, _d, _e, _f;
+        return __awaiter(this, void 0, void 0, function* () {
+            (_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.currentTransfmCommands, 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* () {
+            (_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.currentTransfmCommands, updateChunkSize);
+            (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33.identity);
+            (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
+            (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();
+        });
+    }
+    serializeToJSON() {
+        return {
+            commands: this.currentTransfmCommands.map(command => command.serialize()),
+            transform: this.fullTransform.toArray(),
+        };
+    }
+    description(_editor, localizationTable) {
+        return localizationTable.transformedElements(this.currentTransfmCommands.length);
+    }
+};

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

@@ -0,0 +1,35 @@
+import { Point2, Vec2 } from '../../math/Vec2';
+import Selection from './Selection';
+import Pointer from '../../Pointer';
+export declare enum HandleShape {
+    Circle = 0,
+    Square = 1
+}
+export declare const handleSize = 30;
+export declare type DragStartCallback = (startPoint: Point2) => void;
+export declare type DragUpdateCallback = (canvasPoint: Point2) => void;
+export declare type DragEndCallback = () => void;
+export default class SelectionHandle {
+    readonly shape: HandleShape;
+    private readonly parentSide;
+    private readonly parent;
+    private readonly onDragStart;
+    private readonly onDragUpdate;
+    private readonly onDragEnd;
+    private element;
+    constructor(shape: HandleShape, parentSide: Vec2, parent: Selection, onDragStart: DragStartCallback, onDragUpdate: DragUpdateCallback, onDragEnd: DragEndCallback);
+    /**
+     * Adds this to `container`, where `conatiner` should be the background/selection
+     * element visible on the screen.
+     */
+    addTo(container: HTMLElement): void;
+    updatePosition(): void;
+    /**
+     * @returns `true` if the given `EventTarget` matches this.
+     */
+    isTarget(target: EventTarget): boolean;
+    private dragLastPos;
+    handleDragStart(pointer: Pointer): void;
+    handleDragUpdate(pointer: Pointer): void;
+    handleDragEnd(): void;
+}

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

@@ -0,0 +1,75 @@
+import { assertUnreachable } from '../../language/assertions';
+import { Vec2 } from '../../math/Vec2';
+import { cssPrefix } from './SelectionTool';
+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();
+    }
+}

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

@@ -0,0 +1,31 @@
+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;
+    constructor(editor: Editor, description: string);
+    private makeSelectionBox;
+    private selectionBoxHandlingEvt;
+    onPointerDown(event: 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;
+    setSelection(objects: AbstractComponent[]): void;
+    clearSelection(): void;
+}