js-draw 0.25.1 → 1.0.1

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

@@ -1,6 +1,7 @@
-import { Point2, Vec2 } from '../../math/Vec2';
+import { Point2, Vec2 } from '@js-draw/math';
 import Selection from './Selection';
 import Pointer from '../../Pointer';
+import Viewport from '../../Viewport';
 export declare enum HandleShape {
     Circle = 0,
     Square = 1
@@ -13,22 +14,31 @@ export default class SelectionHandle {
     readonly shape: HandleShape;
     private readonly parentSide;
     private readonly parent;
+    private readonly viewport;
     private readonly onDragStart;
     private readonly onDragUpdate;
     private readonly onDragEnd;
     private element;
     private snapToGrid;
-    constructor(shape: HandleShape, parentSide: Vec2, parent: Selection, onDragStart: DragStartCallback, onDragUpdate: DragUpdateCallback, onDragEnd: DragEndCallback);
+    constructor(shape: HandleShape, parentSide: Vec2, parent: Selection, viewport: Viewport, 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.
+     * Returns this handle's bounding box relative to the top left of the
+     * selection box.
+     */
+    private getBBoxParentCoords;
+    /** @returns this handle's bounding box relative to the canvas. */
+    private getBBoxCanvasCoords;
+    /**
+     * Moves the HTML representation of this to the location matching its internal representation.
      */
-    isTarget(target: EventTarget): boolean;
+    updatePosition(): void;
+    /** @returns true iff `point` (in editor **canvas** coordinates) is in this. */
+    containsPoint(point: Point2): boolean;
     private dragLastPos;
     handleDragStart(pointer: Pointer): void;
     handleDragUpdate(pointer: Pointer): void;

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

@@ -1,30 +1,30 @@
 import  { assertUnreachable }  from '../../util/assertions.mjs';
-import  { Vec2 }  from '../../math/Vec2.mjs';
+import { Rect2, Vec2 } from '@js-draw/math';
 import  { cssPrefix }  from './SelectionTool.mjs';
 export var HandleShape;
 (function (HandleShape) {
     HandleShape[HandleShape["Circle"] = 0] = "Circle";
     HandleShape[HandleShape["Square"] = 1] = "Square";
 })(HandleShape || (HandleShape = {}));
-export var handleSize = 30;
-var SelectionHandle = /** @class */ (function () {
-    // Bounding box in screen coordinates.
-    function SelectionHandle(shape, parentSide, parent, onDragStart, onDragUpdate, onDragEnd) {
+export const handleSize = 30;
+export default class SelectionHandle {
+    constructor(shape, parentSide, parent, viewport, onDragStart, onDragUpdate, onDragEnd) {
         this.shape = shape;
         this.parentSide = parentSide;
         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("".concat(cssPrefix, "handle"));
+        this.element.classList.add(`${cssPrefix}handle`);
         switch (shape) {
             case HandleShape.Circle:
-                this.element.classList.add("".concat(cssPrefix, "circle"));
+                this.element.classList.add(`${cssPrefix}circle`);
                 break;
             case HandleShape.Square:
-                this.element.classList.add("".concat(cssPrefix, "square"));
+                this.element.classList.add(`${cssPrefix}square`);
                 break;
             default:
                 assertUnreachable(shape);
@@ -35,49 +35,74 @@ var SelectionHandle = /** @class */ (function () {
      * Adds this to `container`, where `conatiner` should be the background/selection
      * element visible on the screen.
      */
-    SelectionHandle.prototype.addTo = function (container) {
+    addTo(container) {
         container.appendChild(this.element);
-    };
-    SelectionHandle.prototype.updatePosition = function () {
-        var parentRect = this.parent.screenRegion;
-        var size = Vec2.of(handleSize, handleSize);
-        var topLeft = parentRect.size.scale(this.parentSide)
+    }
+    /**
+     * Returns this handle's bounding box relative to the top left of the
+     * selection box.
+     */
+    getBBoxParentCoords() {
+        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 = "".concat(topLeft.x, "px");
-        this.element.style.marginTop = "".concat(topLeft.y, "px");
-        this.element.style.width = "".concat(size.x, "px");
-        this.element.style.height = "".concat(size.y, "px");
-    };
+        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);
+    }
     /**
-     * @returns `true` if the given `EventTarget` matches this.
+     * Moves the HTML representation of this to the location matching its internal representation.
      */
-    SelectionHandle.prototype.isTarget = function (target) {
-        return target === this.element;
-    };
-    SelectionHandle.prototype.handleDragStart = function (pointer) {
+    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;
-    };
-    SelectionHandle.prototype.handleDragUpdate = function (pointer) {
+    }
+    handleDragUpdate(pointer) {
         if (!this.dragLastPos) {
             return;
         }
         this.onDragUpdate(pointer.canvasPos);
-    };
-    SelectionHandle.prototype.handleDragEnd = function () {
+    }
+    handleDragEnd() {
         if (!this.dragLastPos) {
             return;
         }
         this.onDragEnd();
-    };
-    SelectionHandle.prototype.setSnapToGrid = function (snap) {
+    }
+    setSnapToGrid(snap) {
         this.snapToGrid = snap;
-    };
-    SelectionHandle.prototype.isSnappingToGrid = function () {
+    }
+    isSnappingToGrid() {
         return this.snapToGrid;
-    };
-    return SelectionHandle;
-}());
-export default SelectionHandle;
+    }
+}

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

@@ -1,6 +1,6 @@
 import AbstractComponent from '../../components/AbstractComponent';
 import Editor from '../../Editor';
-import { CopyEvent, KeyPressEvent, KeyUpEvent, PointerEvt } from '../../types';
+import { CopyEvent, KeyPressEvent, KeyUpEvent, PointerEvt } from '../../inputEvents';
 import BaseTool from '../BaseTool';
 import Selection from './Selection';
 export declare const cssPrefix = "selection-tool-";
@@ -9,7 +9,6 @@ export default class SelectionTool extends BaseTool {
     private handleOverlay;
     private prevSelectionBox;
     private selectionBox;
-    private lastEvtTarget;
     private startPoint;
     private expandingSelectionBox;
     private shiftKeyPressed;
@@ -20,11 +19,12 @@ export default class SelectionTool extends BaseTool {
     private selectionBoxHandlingEvt;
     onPointerDown({ allPointers, current }: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
-    private onSelectionUpdated;
     private onGestureEnd;
-    private zoomToSelection;
     onPointerUp(event: PointerEvt): void;
     onGestureCancel(): void;
+    private lastSelectedObjects;
+    private onSelectionUpdated;
+    private zoomToSelection;
     private static handleableKeys;
     onKeyPress(event: KeyPressEvent): boolean;
     onKeyUp(evt: KeyUpEvent): boolean;