js-draw 1.21.2 → 1.22.0

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

@@ -0,0 +1,140 @@
+import  { assertUnreachable }  from '../../util/assertions.mjs';
+import { Rect2, Vec2 } from '@js-draw/math';
+import  { cssPrefix }  from './SelectionTool.mjs';
+var HandleShape;
+(function (HandleShape) {
+    HandleShape[HandleShape["Circle"] = 0] = "Circle";
+    HandleShape[HandleShape["Square"] = 1] = "Square";
+})(HandleShape || (HandleShape = {}));
+export var HandleAction;
+(function (HandleAction) {
+    HandleAction["ResizeXY"] = "resize-xy";
+    HandleAction["Rotate"] = "rotate";
+    HandleAction["ResizeX"] = "resize-x";
+    HandleAction["ResizeY"] = "resize-y";
+})(HandleAction || (HandleAction = {}));
+// The *interactable* handle size. The visual size will be slightly smaller.
+export const handleSize = 30;
+export default class SelectionHandle {
+    constructor(presentation, parent, viewport, onDragStart, onDragUpdate, onDragEnd) {
+        this.presentation = presentation;
+        this.parent = parent;
+        this.viewport = viewport;
+        this.onDragStart = onDragStart;
+        this.onDragUpdate = onDragUpdate;
+        this.onDragEnd = onDragEnd;
+        this.dragLastPos = null;
+        this.element = document.createElement('div');
+        this.element.classList.add(`${cssPrefix}handle`, `${cssPrefix}${presentation.action}`);
+        // Create a slightly smaller content/background element.
+        const visibleContent = document.createElement('div');
+        visibleContent.classList.add(`${cssPrefix}content`);
+        this.element.appendChild(visibleContent);
+        this.parentSide = presentation.side;
+        const icon = presentation.icon;
+        if (icon) {
+            visibleContent.appendChild(icon);
+            icon.classList.add('icon');
+        }
+        if (presentation.action === HandleAction.Rotate) {
+            this.shape = HandleShape.Circle;
+        }
+        else {
+            this.shape = HandleShape.Square;
+        }
+        switch (this.shape) {
+            case HandleShape.Circle:
+                this.element.classList.add(`${cssPrefix}circle`);
+                break;
+            case HandleShape.Square:
+                this.element.classList.add(`${cssPrefix}square`);
+                break;
+            default:
+                assertUnreachable(this.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);
+    }
+    /**
+     * Removes this element from its container. Should only be called
+     * after {@link addTo}.
+     */
+    remove() {
+        this.element.remove();
+    }
+    /**
+     * Returns this handle's bounding box relative to the top left of the
+     * selection box.
+     */
+    getBBoxParentCoords() {
+        const parentRect = this.parent.getScreenRegion();
+        const size = Vec2.of(handleSize, handleSize);
+        const topLeft = parentRect.size
+            .scale(this.parentSide)
+            // Center
+            .minus(size.times(1 / 2));
+        return new Rect2(topLeft.x, topLeft.y, size.x, size.y);
+    }
+    /** @returns this handle's bounding box relative to the canvas. */
+    getBBoxCanvasCoords() {
+        const parentRect = this.parent.region;
+        const size = Vec2.of(handleSize, handleSize).times(1 / this.viewport.getScaleFactor());
+        const topLeftFromParent = parentRect.size.scale(this.parentSide).minus(size.times(0.5));
+        return new Rect2(topLeftFromParent.x, topLeftFromParent.y, size.x, size.y).translatedBy(parentRect.topLeft);
+    }
+    /**
+     * Moves the HTML representation of this to the location matching its internal representation.
+     */
+    updatePosition() {
+        const bbox = this.getBBoxParentCoords();
+        // Position within the selection box.
+        this.element.style.marginLeft = `${bbox.topLeft.x}px`;
+        this.element.style.marginTop = `${bbox.topLeft.y}px`;
+        this.element.style.width = `${bbox.w}px`;
+        this.element.style.height = `${bbox.h}px`;
+    }
+    /** @returns true iff `point` (in editor **canvas** coordinates) is in this. */
+    containsPoint(point) {
+        const bbox = this.getBBoxCanvasCoords();
+        const delta = point.minus(bbox.center);
+        // Should have same x and y radius
+        const radius = bbox.size.x / 2;
+        let result;
+        if (this.shape === HandleShape.Circle) {
+            result = delta.magnitude() <= radius;
+        }
+        else {
+            result = Math.abs(delta.x) <= radius && Math.abs(delta.y) <= radius;
+        }
+        return result;
+    }
+    handleDragStart(pointer) {
+        this.onDragStart(pointer.canvasPos);
+        this.dragLastPos = pointer.canvasPos;
+        return true;
+    }
+    handleDragUpdate(pointer) {
+        if (!this.dragLastPos) {
+            return;
+        }
+        this.onDragUpdate(pointer.canvasPos);
+    }
+    handleDragEnd() {
+        if (!this.dragLastPos) {
+            return;
+        }
+        return this.onDragEnd();
+    }
+    setSnapToGrid(snap) {
+        this.snapToGrid = snap;
+    }
+    isSnappingToGrid() {
+        return this.snapToGrid;
+    }
+}

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

@@ -0,0 +1,32 @@
+import { Point2 } from '@js-draw/math';
+import Selection from './Selection';
+import Pointer from '../../Pointer';
+import Viewport from '../../Viewport';
+import { SelectionBoxChild } from './types';
+import { ToolLocalization } from '../localization';
+export type DragStartCallback = (startPoint: Point2) => void;
+export type DragUpdateCallback = (canvasPoint: Point2) => void;
+export type DragEndCallback = () => Promise<void> | void;
+type OnShowContextMenu = (anchor: Point2) => void;
+export default class SelectionMenuShortcut implements SelectionBoxChild {
+    private readonly parent;
+    private readonly viewport;
+    private localization;
+    private element;
+    private onClick;
+    constructor(parent: Selection, viewport: Viewport, showContextMenu: OnShowContextMenu, localization: ToolLocalization);
+    private initUI;
+    addTo(container: HTMLElement): void;
+    remove(): void;
+    private getElementScreenSize;
+    /** Gets this menu's bounding box relative to the top left of its parent. */
+    private getBBoxParentCoords;
+    private getBBoxCanvasCoords;
+    updatePosition(): void;
+    containsPoint(canvasPoint: Point2): boolean;
+    private lastDragPointer;
+    handleDragStart(pointer: Pointer): boolean;
+    handleDragUpdate(pointer: Pointer): void;
+    handleDragEnd(): void;
+}
+export {};

package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.mjs

@@ -0,0 +1,85 @@
+import { Rect2, Vec2 } from '@js-draw/math';
+import  { cssPrefix }  from './SelectionTool.mjs';
+const verticalOffset = 40;
+export default class SelectionMenuShortcut {
+    constructor(parent, viewport, showContextMenu, localization) {
+        this.parent = parent;
+        this.viewport = viewport;
+        this.localization = localization;
+        this.lastDragPointer = null;
+        this.element = document.createElement('div');
+        this.element.classList.add(`${cssPrefix}handle`, `${cssPrefix}selection-menu`);
+        this.element.style.setProperty('--vertical-offset', `${verticalOffset}px`);
+        this.onClick = async () => {
+            const anchor = this.getBBoxCanvasCoords().center;
+            showContextMenu(anchor);
+        };
+        this.initUI();
+        this.updatePosition();
+    }
+    initUI() {
+        const button = document.createElement('button');
+        button.textContent = '...';
+        button.ariaLabel = this.localization.selectionMenu__show;
+        button.title = button.ariaLabel;
+        // To prevent editor event handlers from conflicting with those for the button,
+        // don't register a [click] handler. An onclick handler can be fired incorrectly
+        // in this case (in Chrome) after onClick is fired in onDragEnd, leading to a double
+        // on-click action.
+        button.onkeydown = (event) => {
+            if (event.key === 'Enter')
+                this.onClick();
+        };
+        this.element.appendChild(button);
+        // Update the bounding box of this in response to the new button.
+        requestAnimationFrame(() => {
+            this.updatePosition();
+        });
+    }
+    addTo(container) {
+        container.appendChild(this.element);
+    }
+    remove() {
+        this.element.remove();
+    }
+    getElementScreenSize() {
+        return Vec2.of(this.element.clientWidth, this.element.clientHeight);
+    }
+    /** Gets this menu's bounding box relative to the top left of its parent. */
+    getBBoxParentCoords() {
+        const topLeft = Vec2.of(0, -verticalOffset);
+        const screenSize = this.getElementScreenSize();
+        return new Rect2(topLeft.x, topLeft.y, screenSize.x, screenSize.y);
+    }
+    getBBoxCanvasCoords() {
+        const parentCanvasRect = this.parent.region;
+        const toCanvasScale = this.viewport.getSizeOfPixelOnCanvas();
+        // Don't apply rotation -- rotation is handled by the selection container
+        const contentCanvasSize = this.getElementScreenSize().times(toCanvasScale);
+        const handleSizeCanvas = verticalOffset / this.viewport.getScaleFactor();
+        const topLeft = Vec2.of(parentCanvasRect.x, parentCanvasRect.y - handleSizeCanvas);
+        return new Rect2(topLeft.x, topLeft.y, contentCanvasSize.x, contentCanvasSize.y);
+    }
+    updatePosition() {
+        const bbox = this.getBBoxParentCoords();
+        // Position within the selection box.
+        this.element.style.marginLeft = `${bbox.topLeft.x}px`;
+        this.element.style.marginTop = `${bbox.topLeft.y}px`;
+    }
+    containsPoint(canvasPoint) {
+        return this.getBBoxCanvasCoords().containsPoint(canvasPoint);
+    }
+    handleDragStart(pointer) {
+        this.lastDragPointer = pointer;
+        return true;
+    }
+    handleDragUpdate(pointer) {
+        this.lastDragPointer = pointer;
+    }
+    handleDragEnd() {
+        if (this.lastDragPointer && this.containsPoint(this.lastDragPointer.canvasPos)) {
+            this.onClick();
+        }
+        this.lastDragPointer = null;
+    }
+}

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

@@ -0,0 +1,42 @@
+import AbstractComponent from '../../components/AbstractComponent';
+import Editor from '../../Editor';
+import { ContextMenuEvt, CopyEvent, KeyPressEvent, KeyUpEvent, PointerEvt } from '../../inputEvents';
+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 rebuildSelectionScheduled;
+    private startPoint;
+    private expandingSelectionBox;
+    private shiftKeyPressed;
+    private snapToGrid;
+    private lastPointer;
+    private autoscroller;
+    constructor(editor: Editor, description: string);
+    private makeSelectionBox;
+    private snapSelectionToGrid;
+    private showContextMenu;
+    onContextMenu(event: ContextMenuEvt): boolean;
+    private selectionBoxHandlingEvt;
+    onPointerDown({ allPointers, current }: PointerEvt): boolean;
+    onPointerMove(event: PointerEvt): void;
+    private onMainPointerUpdated;
+    onPointerUp(event: PointerEvt): void;
+    onGestureCancel(): void;
+    private lastSelectedObjects;
+    private onSelectionUpdated;
+    private zoomToSelection;
+    private hasUnfinalizedTransformFromKeyPress;
+    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;
+}