js-draw 0.3.1 → 0.4.0

package/dist/src/tools/PasteHandler.js

@@ -0,0 +1,144 @@
+/**
+ * A tool that handles paste events.
+ * @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());
+    });
+};
+import { TextComponent } from '../components/lib';
+import { uniteCommands } from '../commands/lib';
+import SVGLoader from '../SVGLoader';
+import { Mat33, Vec2 } from '../math/lib';
+import BaseTool from './BaseTool';
+import EditorImage from '../EditorImage';
+import SelectionTool from './SelectionTool/SelectionTool';
+import TextTool from './TextTool';
+import Color4 from '../Color4';
+import ImageComponent from '../components/ImageComponent';
+import Viewport from '../Viewport';
+// { @inheritDoc PasteHandler! }
+export default class PasteHandler extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.pasteHandler);
+        this.editor = editor;
+    }
+    onPaste(event) {
+        const mime = event.mime.toLowerCase();
+        if (mime === 'image/svg+xml') {
+            void this.doSVGPaste(event.data);
+            return true;
+        }
+        else if (mime === 'text/plain') {
+            void this.doTextPaste(event.data);
+            return true;
+        }
+        else if (mime === 'image/png' || mime === 'image/jpeg') {
+            void this.doImagePaste(event.data);
+            return true;
+        }
+        return false;
+    }
+    addComponentsFromPaste(components) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let bbox = null;
+            for (const component of components) {
+                if (bbox) {
+                    bbox = bbox.union(component.getBBox());
+                }
+                else {
+                    bbox = component.getBBox();
+                }
+            }
+            if (!bbox) {
+                return;
+            }
+            // Find a transform that scales/moves bbox onto the screen.
+            const visibleRect = this.editor.viewport.visibleRect;
+            const scaleRatioX = visibleRect.width / bbox.width;
+            const scaleRatioY = visibleRect.height / bbox.height;
+            let scaleRatio = scaleRatioX;
+            if (bbox.width * scaleRatio > visibleRect.width || bbox.height * scaleRatio > visibleRect.height) {
+                scaleRatio = scaleRatioY;
+            }
+            scaleRatio *= 2 / 3;
+            scaleRatio = Viewport.roundScaleRatio(scaleRatio);
+            const transfm = Mat33.translation(visibleRect.center.minus(bbox.center)).rightMul(Mat33.scaling2D(scaleRatio, bbox.center));
+            const commands = [];
+            for (const component of components) {
+                // To allow deserialization, we need to add first, then transform.
+                commands.push(EditorImage.addElement(component));
+                commands.push(component.transformBy(transfm));
+            }
+            const applyChunkSize = 100;
+            this.editor.dispatch(uniteCommands(commands, applyChunkSize), true);
+            for (const selectionTool of this.editor.toolController.getMatchingTools(SelectionTool)) {
+                selectionTool.setEnabled(true);
+                selectionTool.setSelection(components);
+            }
+        });
+    }
+    doSVGPaste(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const sanitize = true;
+            const loader = SVGLoader.fromString(data, sanitize);
+            const components = [];
+            yield loader.start((component) => {
+                components.push(component);
+            }, (_countProcessed, _totalToProcess) => null);
+            yield this.addComponentsFromPaste(components);
+        });
+    }
+    doTextPaste(text) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const textTools = this.editor.toolController.getMatchingTools(TextTool);
+            textTools.sort((a, b) => {
+                if (!a.isEnabled() && b.isEnabled()) {
+                    return -1;
+                }
+                if (!b.isEnabled() && a.isEnabled()) {
+                    return 1;
+                }
+                return 0;
+            });
+            const defaultTextStyle = { size: 12, fontFamily: 'sans', renderingStyle: { fill: Color4.red } };
+            const pastedTextStyle = (_b = (_a = textTools[0]) === null || _a === void 0 ? void 0 : _a.getTextStyle()) !== null && _b !== void 0 ? _b : defaultTextStyle;
+            const lines = text.split('\n');
+            let lastComponent = null;
+            const components = [];
+            for (const line of lines) {
+                let position = Vec2.zero;
+                if (lastComponent) {
+                    const lineMargin = Math.floor(pastedTextStyle.size);
+                    position = lastComponent.getBBox().bottomLeft.plus(Vec2.unitY.times(lineMargin));
+                }
+                const component = new TextComponent([line], Mat33.translation(position), pastedTextStyle);
+                components.push(component);
+                lastComponent = component;
+            }
+            if (components.length === 1) {
+                yield this.addComponentsFromPaste([components[0]]);
+            }
+            else {
+                // Wrap the existing `TextComponent`s --- dragging one component should drag all.
+                yield this.addComponentsFromPaste([
+                    new TextComponent(components, Mat33.identity, pastedTextStyle)
+                ]);
+            }
+        });
+    }
+    doImagePaste(dataURL) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const image = new Image();
+            image.src = dataURL;
+            const component = yield ImageComponent.fromImage(image, Mat33.identity);
+            yield this.addComponentsFromPaste([component]);
+        });
+    }
+}

package/dist/src/tools/Pen.js

@@ -131,7 +131,7 @@ export default class Pen extends BaseTool {
             newThickness = this.getThickness() * 3 / 2;
         }
         if (newThickness !== undefined) {
-            newThickness = Math.min(Math.max(1, newThickness), 128);
+            newThickness = Math.min(Math.max(1, newThickness), 256);
             this.setThickness(newThickness);
             return true;
         }

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

@@ -0,0 +1,54 @@
+/**
+ * @internal
+ * @packageDocumentation
+ */
+import Editor from '../../Editor';
+import { Mat33, Rect2 } from '../../math/lib';
+import { Point2 } from '../../math/Vec2';
+import Pointer from '../../Pointer';
+import AbstractComponent from '../../components/AbstractComponent';
+import Command from '../../commands/Command';
+export default class Selection {
+    private editor;
+    private handles;
+    private originalRegion;
+    private transformers;
+    private transform;
+    private transformCommands;
+    private selectedElems;
+    private container;
+    private backgroundElem;
+    constructor(startPoint: Point2, editor: Editor);
+    getTransform(): Mat33;
+    get preTransformRegion(): Rect2;
+    get region(): Rect2;
+    get regionRotation(): number;
+    get preTransformedScreenRegion(): Rect2;
+    get preTransformedScreenRegionRotation(): number;
+    get screenRegion(): Rect2;
+    get screenRegionRotation(): number;
+    private computeTransformCommands;
+    setTransform(transform: Mat33, preview?: boolean): void;
+    finalizeTransform(): void;
+    private static ApplyTransformationCommand;
+    private previewTransformCmds;
+    resolveToObjects(): boolean;
+    recomputeRegion(): boolean;
+    getMinCanvasSize(): number;
+    getSelectedItemCount(): number;
+    updateUI(): void;
+    private targetHandle;
+    private backgroundDragging;
+    onDragStart(pointer: Pointer, target: EventTarget): boolean;
+    onDragUpdate(pointer: Pointer): void;
+    onDragEnd(): void;
+    onDragCancel(): void;
+    scrollTo(): void;
+    deleteSelectedObjects(): Command;
+    duplicateSelectedObjects(): Command;
+    addTo(elem: HTMLElement): void;
+    setToPoint(point: Point2): void;
+    cancelSelection(): void;
+    setSelectedObjects(objects: AbstractComponent[], bbox: Rect2): void;
+    getSelectedObjects(): AbstractComponent[];
+}

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();
+    }
+}