js-draw 0.23.0 → 0.24.0

package/dist/mjs/tools/BaseTool.mjs

@@ -0,0 +1,65 @@
+import  { EditorEventType }  from '../types.mjs';
+var BaseTool = /** @class */ (function () {
+    function BaseTool(notifier, description) {
+        this.notifier = notifier;
+        this.description = description;
+        this.enabled = true;
+        this.group = null;
+    }
+    BaseTool.prototype.onPointerDown = function (_event) { return false; };
+    BaseTool.prototype.onPointerMove = function (_event) { };
+    BaseTool.prototype.onPointerUp = function (_event) { };
+    BaseTool.prototype.onGestureCancel = function () { };
+    BaseTool.prototype.onWheel = function (_event) {
+        return false;
+    };
+    BaseTool.prototype.onCopy = function (_event) {
+        return false;
+    };
+    BaseTool.prototype.onPaste = function (_event) {
+        return false;
+    };
+    BaseTool.prototype.onKeyPress = function (_event) {
+        return false;
+    };
+    BaseTool.prototype.onKeyUp = function (_event) {
+        return false;
+    };
+    BaseTool.prototype.setEnabled = function (enabled) {
+        var _a;
+        this.enabled = enabled;
+        // Ensure that at most one tool in the group is enabled.
+        if (enabled) {
+            (_a = this.group) === null || _a === void 0 ? void 0 : _a.notifyEnabled(this);
+            this.notifier.dispatch(EditorEventType.ToolEnabled, {
+                kind: EditorEventType.ToolEnabled,
+                tool: this,
+            });
+        }
+        else {
+            this.notifier.dispatch(EditorEventType.ToolDisabled, {
+                kind: EditorEventType.ToolDisabled,
+                tool: this,
+            });
+        }
+    };
+    BaseTool.prototype.isEnabled = function () {
+        return this.enabled;
+    };
+    // Connect this tool to a set of other tools, ensuring that at most one
+    // of the tools in the group is enabled.
+    BaseTool.prototype.setToolGroup = function (group) {
+        if (this.isEnabled()) {
+            group.notifyEnabled(this);
+        }
+        this.group = group;
+    };
+    BaseTool.prototype.getToolGroup = function () {
+        if (this.group) {
+            return this.group;
+        }
+        return null;
+    };
+    return BaseTool;
+}());
+export default BaseTool;

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

@@ -0,0 +1,24 @@
+import { KeyPressEvent, PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import Editor from '../Editor';
+export default class Eraser extends BaseTool {
+    private editor;
+    private lastPoint;
+    private isFirstEraseEvt;
+    private toRemove;
+    private thickness;
+    private partialCommands;
+    constructor(editor: Editor, description: string);
+    private clearPreview;
+    private getSizeOnCanvas;
+    private drawPreviewAt;
+    private getEraserRect;
+    private eraseTo;
+    onPointerDown(event: PointerEvt): boolean;
+    onPointerMove(event: PointerEvt): void;
+    onPointerUp(event: PointerEvt): void;
+    onGestureCancel(): void;
+    onKeyPress(event: KeyPressEvent): boolean;
+    getThickness(): number;
+    setThickness(thickness: number): void;
+}

package/dist/mjs/tools/Eraser.mjs

@@ -0,0 +1,146 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import  { EditorEventType }  from '../types.mjs';
+import  BaseTool  from './BaseTool.mjs';
+import  { Vec2 }  from '../math/Vec2.mjs';
+import  LineSegment2  from '../math/shapes/LineSegment2.mjs';
+import  Erase  from '../commands/Erase.mjs';
+import  { PointerDevice }  from '../Pointer.mjs';
+import  Color4  from '../Color4.mjs';
+import  Rect2  from '../math/shapes/Rect2.mjs';
+import  { decreaseSizeKeyboardShortcutId, increaseSizeKeyboardShortcutId }  from './keybindings.mjs';
+var Eraser = /** @class */ (function (_super) {
+    __extends(Eraser, _super);
+    function Eraser(editor, description) {
+        var _this = _super.call(this, editor.notifier, description) || this;
+        _this.editor = editor;
+        _this.lastPoint = null;
+        _this.isFirstEraseEvt = true;
+        _this.thickness = 10;
+        // Commands that each remove one element
+        _this.partialCommands = [];
+        return _this;
+    }
+    Eraser.prototype.clearPreview = function () {
+        this.editor.clearWetInk();
+    };
+    Eraser.prototype.getSizeOnCanvas = function () {
+        return this.thickness / this.editor.viewport.getScaleFactor();
+    };
+    Eraser.prototype.drawPreviewAt = function (point) {
+        this.clearPreview();
+        var size = this.getSizeOnCanvas();
+        var renderer = this.editor.display.getWetInkRenderer();
+        var rect = this.getEraserRect(point);
+        var fill = {
+            fill: Color4.gray,
+        };
+        renderer.drawRect(rect, size / 4, fill);
+    };
+    Eraser.prototype.getEraserRect = function (centerPoint) {
+        var size = this.getSizeOnCanvas();
+        var halfSize = Vec2.of(size / 2, size / 2);
+        return Rect2.fromCorners(centerPoint.minus(halfSize), centerPoint.plus(halfSize));
+    };
+    Eraser.prototype.eraseTo = function (currentPoint) {
+        var _a, _b;
+        var _this = this;
+        if (!this.isFirstEraseEvt && currentPoint.minus(this.lastPoint).magnitude() === 0) {
+            return;
+        }
+        this.isFirstEraseEvt = false;
+        // Currently only objects within eraserRect or that intersect a straight line
+        // from the center of the current rect to the previous are erased. TODO: Erase
+        // all objects as if there were pointerMove events between the two points.
+        var eraserRect = this.getEraserRect(currentPoint);
+        var line = new LineSegment2(this.lastPoint, currentPoint);
+        var region = Rect2.union(line.bbox, eraserRect);
+        var intersectingElems = this.editor.image.getElementsIntersectingRegion(region).filter(function (component) {
+            return component.intersects(line) || component.intersectsRect(eraserRect);
+        });
+        // Only erase components that could be selected (and thus interacted with)
+        // by the user.
+        var toErase = intersectingElems.filter(function (elem) { return elem.isSelectable(); });
+        // Remove any intersecting elements.
+        (_a = this.toRemove).push.apply(_a, toErase);
+        // Create new Erase commands for the now-to-be-erased elements and apply them.
+        var newPartialCommands = toErase.map(function (elem) { return new Erase([elem]); });
+        newPartialCommands.forEach(function (cmd) { return cmd.apply(_this.editor); });
+        (_b = this.partialCommands).push.apply(_b, newPartialCommands);
+        this.drawPreviewAt(currentPoint);
+        this.lastPoint = currentPoint;
+    };
+    Eraser.prototype.onPointerDown = function (event) {
+        if (event.allPointers.length === 1 || event.current.device === PointerDevice.Eraser) {
+            this.lastPoint = event.current.canvasPos;
+            this.toRemove = [];
+            this.isFirstEraseEvt = true;
+            this.drawPreviewAt(event.current.canvasPos);
+            return true;
+        }
+        return false;
+    };
+    Eraser.prototype.onPointerMove = function (event) {
+        var currentPoint = event.current.canvasPos;
+        this.eraseTo(currentPoint);
+    };
+    Eraser.prototype.onPointerUp = function (event) {
+        var _this = this;
+        this.eraseTo(event.current.canvasPos);
+        if (this.toRemove.length > 0) {
+            // Undo commands for each individual component and unite into a single command.
+            this.partialCommands.forEach(function (cmd) { return cmd.unapply(_this.editor); });
+            this.partialCommands = [];
+            var command = new Erase(this.toRemove);
+            this.editor.dispatch(command); // dispatch: Makes undo-able.
+        }
+        this.clearPreview();
+    };
+    Eraser.prototype.onGestureCancel = function () {
+        var _this = this;
+        this.partialCommands.forEach(function (cmd) { return cmd.unapply(_this.editor); });
+        this.partialCommands = [];
+        this.clearPreview();
+    };
+    Eraser.prototype.onKeyPress = function (event) {
+        var shortcuts = this.editor.shortcuts;
+        var newThickness;
+        if (shortcuts.matchesShortcut(decreaseSizeKeyboardShortcutId, event)) {
+            newThickness = this.getThickness() * 2 / 3;
+        }
+        else if (shortcuts.matchesShortcut(increaseSizeKeyboardShortcutId, event)) {
+            newThickness = this.getThickness() * 3 / 2;
+        }
+        if (newThickness !== undefined) {
+            newThickness = Math.min(Math.max(1, newThickness), 200);
+            this.setThickness(newThickness);
+            return true;
+        }
+        return false;
+    };
+    Eraser.prototype.getThickness = function () {
+        return this.thickness;
+    };
+    Eraser.prototype.setThickness = function (thickness) {
+        this.thickness = thickness;
+        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+            kind: EditorEventType.ToolUpdated,
+            tool: this,
+        });
+    };
+    return Eraser;
+}(BaseTool));
+export default Eraser;

package/dist/mjs/tools/Eraser.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,20 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+export default class FindTool extends BaseTool {
+    private editor;
+    private overlay;
+    private searchInput;
+    private currentMatchIdx;
+    constructor(editor: Editor);
+    private getMatches;
+    private focusCurrentMatch;
+    private toNextMatch;
+    private toPrevMatch;
+    private fillOverlay;
+    private isVisible;
+    private setVisible;
+    private toggleVisible;
+    onKeyPress(event: KeyPressEvent): boolean;
+    setEnabled(enabled: boolean): void;
+}

package/dist/mjs/tools/FindTool.mjs

@@ -0,0 +1,135 @@
+// Displays a find dialog that allows the user to search for and focus text.
+//
+// @packageDocumentation
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import  TextComponent  from '../components/TextComponent.mjs';
+import  BaseTool  from './BaseTool.mjs';
+import  { toggleFindVisibleShortcutId }  from './keybindings.mjs';
+var cssPrefix = 'find-tool';
+var FindTool = /** @class */ (function (_super) {
+    __extends(FindTool, _super);
+    function FindTool(editor) {
+        var _this = _super.call(this, editor.notifier, editor.localization.findLabel) || this;
+        _this.editor = editor;
+        _this.currentMatchIdx = 0;
+        _this.overlay = document.createElement('div');
+        _this.fillOverlay();
+        editor.createHTMLOverlay(_this.overlay);
+        _this.overlay.style.display = 'none';
+        _this.overlay.classList.add("".concat(cssPrefix, "-overlay"));
+        return _this;
+    }
+    FindTool.prototype.getMatches = function (searchFor) {
+        searchFor = searchFor.toLocaleLowerCase();
+        var allTextComponents = this.editor.image.getAllElements()
+            .filter(function (elem) { return elem instanceof TextComponent; });
+        var matches = allTextComponents.filter(function (text) { return text.getText().toLocaleLowerCase().indexOf(searchFor) !== -1; });
+        return matches.map(function (match) { return match.getBBox(); });
+    };
+    FindTool.prototype.focusCurrentMatch = function () {
+        var matches = this.getMatches(this.searchInput.value);
+        var matchIdx = this.currentMatchIdx % matches.length;
+        if (matchIdx < 0) {
+            matchIdx = matches.length + matchIdx;
+        }
+        if (matchIdx < matches.length) {
+            var undoable = false;
+            this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true), undoable);
+            this.editor.announceForAccessibility(this.editor.localization.focusedFoundText(matchIdx + 1, matches.length));
+        }
+    };
+    FindTool.prototype.toNextMatch = function () {
+        this.currentMatchIdx++;
+        this.focusCurrentMatch();
+    };
+    FindTool.prototype.toPrevMatch = function () {
+        this.currentMatchIdx--;
+        this.focusCurrentMatch();
+    };
+    FindTool.prototype.fillOverlay = function () {
+        var _this = this;
+        var label = document.createElement('label');
+        this.searchInput = document.createElement('input');
+        var nextBtn = document.createElement('button');
+        var closeBtn = document.createElement('button');
+        // Math.random() ensures that the ID is unique (to allow us to refer to it
+        // with an htmlFor).
+        this.searchInput.setAttribute('id', "".concat(cssPrefix, "-searchInput-").concat(Math.random()));
+        label.htmlFor = this.searchInput.getAttribute('id');
+        label.innerText = this.editor.localization.findLabel;
+        nextBtn.innerText = this.editor.localization.toNextMatch;
+        closeBtn.innerText = this.editor.localization.closeFindDialog;
+        this.searchInput.onkeydown = function (ev) {
+            if (ev.key === 'Enter') {
+                if (ev.shiftKey) {
+                    _this.toPrevMatch();
+                }
+                else {
+                    _this.toNextMatch();
+                }
+            }
+            else if (ev.key === 'Escape') {
+                _this.setVisible(false);
+            }
+            else if (_this.editor.shortcuts.matchesShortcut(toggleFindVisibleShortcutId, ev)) {
+                ev.preventDefault();
+                _this.toggleVisible();
+            }
+        };
+        nextBtn.onclick = function () {
+            _this.toNextMatch();
+        };
+        closeBtn.onclick = function () {
+            _this.setVisible(false);
+        };
+        this.overlay.replaceChildren(label, this.searchInput, nextBtn, closeBtn);
+    };
+    FindTool.prototype.isVisible = function () {
+        return this.overlay.style.display !== 'none';
+    };
+    FindTool.prototype.setVisible = function (visible) {
+        if (visible !== this.isVisible()) {
+            this.overlay.style.display = visible ? 'block' : 'none';
+            if (visible) {
+                this.searchInput.focus();
+                this.editor.announceForAccessibility(this.editor.localization.findDialogShown);
+            }
+            else {
+                this.editor.focus();
+                this.editor.announceForAccessibility(this.editor.localization.findDialogHidden);
+            }
+        }
+    };
+    FindTool.prototype.toggleVisible = function () {
+        this.setVisible(!this.isVisible());
+    };
+    FindTool.prototype.onKeyPress = function (event) {
+        if (this.editor.shortcuts.matchesShortcut(toggleFindVisibleShortcutId, event)) {
+            this.toggleVisible();
+            return true;
+        }
+        return false;
+    };
+    FindTool.prototype.setEnabled = function (enabled) {
+        _super.prototype.setEnabled.call(this, enabled);
+        if (enabled) {
+            this.setVisible(false);
+        }
+    };
+    return FindTool;
+}(BaseTool));
+export default FindTool;

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

@@ -0,0 +1,52 @@
+import { Editor } from '../Editor';
+import { Point2 } from '../math/Vec2';
+import Pointer from '../Pointer';
+import { KeyPressEvent, PointerEvt, WheelEvt } from '../types';
+import BaseTool from './BaseTool';
+interface PinchData {
+    canvasCenter: Point2;
+    screenCenter: Point2;
+    angle: number;
+    dist: number;
+}
+export declare enum PanZoomMode {
+    OneFingerTouchGestures = 1,
+    TwoFingerTouchGestures = 2,
+    RightClickDrags = 4,
+    SinglePointerGestures = 8,
+    Keyboard = 16,
+    RotationLocked = 32
+}
+export default class PanZoom extends BaseTool {
+    private editor;
+    private mode;
+    private transform;
+    private lastDist;
+    private lastScreenCenter;
+    private lastTimestamp;
+    private lastPointerDownTimestamp;
+    private initialTouchAngle;
+    private initialViewportRotation;
+    private inertialScroller;
+    private velocity;
+    constructor(editor: Editor, mode: PanZoomMode, description: string);
+    computePinchData(p1: Pointer, p2: Pointer): PinchData;
+    private allPointersAreOfType;
+    onPointerDown({ allPointers: pointers, current: currentPointer }: PointerEvt): boolean;
+    private updateVelocity;
+    private getCenterDelta;
+    private toSnappedRotationDelta;
+    private handleTwoFingerMove;
+    private handleOneFingerMove;
+    onPointerMove({ allPointers }: PointerEvt): void;
+    onPointerUp(event: PointerEvt): void;
+    onGestureCancel(): void;
+    private updateTransform;
+    onWheel({ delta, screenPos }: WheelEvt): boolean;
+    onKeyPress(event: KeyPressEvent): boolean;
+    private isRotationLocked;
+    setModeEnabled(mode: PanZoomMode, enabled: boolean): void;
+    setMode(mode: PanZoomMode): void;
+    getMode(): PanZoomMode;
+}
+export {};