js-draw 0.25.1 → 1.0.0

package/dist/cjs/tools/BaseTool.js

@@ -1,85 +1,162 @@
 "use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _BaseTool_enabled, _BaseTool_group, _BaseTool_inputMapper;
 Object.defineProperty(exports, "__esModule", { value: true });
-var types_1 = require("../types");
-var BaseTool = /** @class */ (function () {
-    function BaseTool(notifier, description) {
+const types_1 = require("../types");
+const inputEvents_1 = require("../inputEvents");
+const ReactiveValue_1 = require("../util/ReactiveValue");
+class BaseTool {
+    constructor(notifier, description) {
         this.notifier = notifier;
         this.description = description;
-        this.enabled = true;
-        this.group = null;
+        _BaseTool_enabled.set(this, void 0);
+        _BaseTool_group.set(this, null);
+        _BaseTool_inputMapper.set(this, null);
+        __classPrivateFieldSet(this, _BaseTool_enabled, ReactiveValue_1.ReactiveValue.fromInitialValue(true), "f");
+        __classPrivateFieldGet(this, _BaseTool_enabled, "f").onUpdate(enabled => {
+            // Ensure that at most one tool in the group is enabled.
+            if (enabled) {
+                __classPrivateFieldGet(this, _BaseTool_group, "f")?.notifyEnabled(this);
+                this.notifier.dispatch(types_1.EditorEventType.ToolEnabled, {
+                    kind: types_1.EditorEventType.ToolEnabled,
+                    tool: this,
+                });
+            }
+            else {
+                this.notifier.dispatch(types_1.EditorEventType.ToolDisabled, {
+                    kind: types_1.EditorEventType.ToolDisabled,
+                    tool: this,
+                });
+            }
+        });
+    }
+    setInputMapper(mapper) {
+        __classPrivateFieldSet(this, _BaseTool_inputMapper, mapper, "f");
+        if (mapper) {
+            mapper.setEmitListener(event => this.dispatchEventToCallback(event));
+        }
+    }
+    getInputMapper() {
+        return __classPrivateFieldGet(this, _BaseTool_inputMapper, "f");
+    }
+    dispatchEventToCallback(event) {
+        let exhaustivenessCheck;
+        switch (event.kind) {
+            case inputEvents_1.InputEvtType.PointerDownEvt:
+                return this.onPointerDown(event);
+            case inputEvents_1.InputEvtType.PointerMoveEvt:
+                this.onPointerMove(event);
+                break;
+            case inputEvents_1.InputEvtType.PointerUpEvt:
+                return this.onPointerUp(event) ?? false;
+            case inputEvents_1.InputEvtType.GestureCancelEvt:
+                this.onGestureCancel(event);
+                break;
+            case inputEvents_1.InputEvtType.WheelEvt:
+                return this.onWheel(event);
+            case inputEvents_1.InputEvtType.KeyPressEvent:
+                return this.onKeyPress(event);
+            case inputEvents_1.InputEvtType.KeyUpEvent:
+                return this.onKeyUp(event);
+            case inputEvents_1.InputEvtType.CopyEvent:
+                return this.onCopy(event);
+            case inputEvents_1.InputEvtType.PasteEvent:
+                return this.onPaste(event);
+            default:
+                exhaustivenessCheck = event;
+                return exhaustivenessCheck;
+        }
+        return true;
+    }
+    // @internal
+    onEvent(event) {
+        if (__classPrivateFieldGet(this, _BaseTool_inputMapper, "f")) {
+            return __classPrivateFieldGet(this, _BaseTool_inputMapper, "f").onEvent(event);
+        }
+        return this.dispatchEventToCallback(event);
     }
     /**
      * Returns true iff the tool handled the event and thus should receive additional
      * events.
      */
-    BaseTool.prototype.onPointerDown = function (_event) { return false; };
-    BaseTool.prototype.onPointerMove = function (_event) { };
+    onPointerDown(_event) { return false; }
+    onPointerMove(_event) { }
     /**
      * Returns true iff there are additional pointers down and the tool should
      * remain active to handle the additional events.
      *
      * For most purposes, this should return `false` or nothing.
      */
-    BaseTool.prototype.onPointerUp = function (_event) { };
-    BaseTool.prototype.onGestureCancel = function () { };
-    BaseTool.prototype.onWheel = function (_event) {
+    onPointerUp(_event) { }
+    onGestureCancel(_event) { }
+    onWheel(_event) {
         return false;
-    };
-    BaseTool.prototype.onCopy = function (_event) {
+    }
+    onCopy(_event) {
         return false;
-    };
-    BaseTool.prototype.onPaste = function (_event) {
+    }
+    onPaste(_event) {
         return false;
-    };
-    BaseTool.prototype.onKeyPress = function (_event) {
+    }
+    onKeyPress(_event) {
         return false;
-    };
-    BaseTool.prototype.onKeyUp = function (_event) {
+    }
+    onKeyUp(_event) {
         return false;
-    };
+    }
     /**
      * Return true if, while this tool is active, `_event` can be delivered to
      * another tool that is higher priority than this.
      * @internal May be renamed
      */
-    BaseTool.prototype.eventCanBeDeliveredToNonActiveTool = function (_event) {
+    eventCanBeDeliveredToNonActiveTool(_event) {
         return true;
-    };
-    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(types_1.EditorEventType.ToolEnabled, {
-                kind: types_1.EditorEventType.ToolEnabled,
-                tool: this,
-            });
-        }
-        else {
-            this.notifier.dispatch(types_1.EditorEventType.ToolDisabled, {
-                kind: types_1.EditorEventType.ToolDisabled,
-                tool: this,
-            });
-        }
-    };
-    BaseTool.prototype.isEnabled = function () {
-        return this.enabled;
-    };
+    }
+    setEnabled(enabled) {
+        __classPrivateFieldGet(this, _BaseTool_enabled, "f").set(enabled);
+    }
+    isEnabled() {
+        return __classPrivateFieldGet(this, _BaseTool_enabled, "f").get();
+    }
+    /**
+     * Returns a {@link ReactiveValue} that updates based on whether this tool is
+     * enabled.
+     *
+     * @example
+     * ```ts
+     * const tool = new SomeTool();
+     *
+     * // Watch for changes in enabled status
+     * tool.enabledValue().onUpdate(enabled => doSomething(enabled));
+     * ```
+     */
+    enabledValue() {
+        return __classPrivateFieldGet(this, _BaseTool_enabled, "f");
+    }
     // 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) {
+    setToolGroup(group) {
         if (this.isEnabled()) {
             group.notifyEnabled(this);
         }
-        this.group = group;
-    };
-    BaseTool.prototype.getToolGroup = function () {
-        if (this.group) {
-            return this.group;
+        __classPrivateFieldSet(this, _BaseTool_group, group, "f");
+    }
+    getToolGroup() {
+        if (__classPrivateFieldGet(this, _BaseTool_group, "f")) {
+            return __classPrivateFieldGet(this, _BaseTool_group, "f");
         }
         return null;
-    };
-    return BaseTool;
-}());
+    }
+}
+_BaseTool_enabled = new WeakMap(), _BaseTool_group = new WeakMap(), _BaseTool_inputMapper = new WeakMap();
 exports.default = BaseTool;

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

@@ -1,12 +1,14 @@
-import { KeyPressEvent, PointerEvt } from '../types';
+import { KeyPressEvent, PointerEvt } from '../inputEvents';
 import BaseTool from './BaseTool';
 import Editor from '../Editor';
+import { MutableReactiveValue } from '../util/ReactiveValue';
 export default class Eraser extends BaseTool {
     private editor;
     private lastPoint;
     private isFirstEraseEvt;
     private toRemove;
     private thickness;
+    private thicknessValue;
     private partialCommands;
     constructor(editor: Editor, description: string);
     private clearPreview;
@@ -20,5 +22,10 @@ export default class Eraser extends BaseTool {
     onGestureCancel(): void;
     onKeyPress(event: KeyPressEvent): boolean;
     getThickness(): number;
+    /**
+     * Returns a {@link MutableReactiveValue} that can be used to watch
+     * this tool's thickness.
+     */
+    getThicknessValue(): MutableReactiveValue<number>;
     setThickness(thickness: number): void;
 }

package/dist/cjs/tools/Eraser.js

@@ -1,65 +1,55 @@
 "use strict";
-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 __());
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var types_1 = require("../types");
-var BaseTool_1 = require("./BaseTool");
-var Vec2_1 = require("../math/Vec2");
-var LineSegment2_1 = require("../math/shapes/LineSegment2");
-var Erase_1 = require("../commands/Erase");
-var Pointer_1 = require("../Pointer");
-var Color4_1 = require("../Color4");
-var Rect2_1 = require("../math/shapes/Rect2");
-var keybindings_1 = require("./keybindings");
-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;
+const types_1 = require("../types");
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+const math_1 = require("@js-draw/math");
+const Erase_1 = __importDefault(require("../commands/Erase"));
+const Pointer_1 = require("../Pointer");
+const keybindings_1 = require("./keybindings");
+const ReactiveValue_1 = require("../util/ReactiveValue");
+class Eraser extends BaseTool_1.default {
+    constructor(editor, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.lastPoint = null;
+        this.isFirstEraseEvt = true;
+        this.thickness = 10;
         // Commands that each remove one element
-        _this.partialCommands = [];
-        return _this;
+        this.partialCommands = [];
+        this.thicknessValue = ReactiveValue_1.ReactiveValue.fromInitialValue(this.thickness);
+        this.thicknessValue.onUpdate(value => {
+            this.thickness = value;
+            this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
+                kind: types_1.EditorEventType.ToolUpdated,
+                tool: this,
+            });
+        });
     }
-    Eraser.prototype.clearPreview = function () {
+    clearPreview() {
         this.editor.clearWetInk();
-    };
-    Eraser.prototype.getSizeOnCanvas = function () {
+    }
+    getSizeOnCanvas() {
         return this.thickness / this.editor.viewport.getScaleFactor();
-    };
-    Eraser.prototype.drawPreviewAt = function (point) {
+    }
+    drawPreviewAt(point) {
         this.clearPreview();
-        var size = this.getSizeOnCanvas();
-        var renderer = this.editor.display.getWetInkRenderer();
-        var rect = this.getEraserRect(point);
-        var fill = {
-            fill: Color4_1.default.gray,
+        const size = this.getSizeOnCanvas();
+        const renderer = this.editor.display.getWetInkRenderer();
+        const rect = this.getEraserRect(point);
+        const fill = {
+            fill: math_1.Color4.gray,
         };
         renderer.drawRect(rect, size / 4, fill);
-    };
-    Eraser.prototype.getEraserRect = function (centerPoint) {
-        var size = this.getSizeOnCanvas();
-        var halfSize = Vec2_1.Vec2.of(size / 2, size / 2);
-        return Rect2_1.default.fromCorners(centerPoint.minus(halfSize), centerPoint.plus(halfSize));
-    };
-    Eraser.prototype.eraseTo = function (currentPoint) {
-        var _a, _b;
-        var _this = this;
+    }
+    getEraserRect(centerPoint) {
+        const size = this.getSizeOnCanvas();
+        const halfSize = math_1.Vec2.of(size / 2, size / 2);
+        return math_1.Rect2.fromCorners(centerPoint.minus(halfSize), centerPoint.plus(halfSize));
+    }
+    eraseTo(currentPoint) {
         if (!this.isFirstEraseEvt && currentPoint.minus(this.lastPoint).magnitude() === 0) {
             return;
         }
@@ -67,25 +57,25 @@ var Eraser = /** @class */ (function (_super) {
         // 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_1.default(this.lastPoint, currentPoint);
-        var region = Rect2_1.default.union(line.bbox, eraserRect);
-        var intersectingElems = this.editor.image.getElementsIntersectingRegion(region).filter(function (component) {
+        const eraserRect = this.getEraserRect(currentPoint);
+        const line = new math_1.LineSegment2(this.lastPoint, currentPoint);
+        const region = math_1.Rect2.union(line.bbox, eraserRect);
+        const intersectingElems = this.editor.image.getElementsIntersectingRegion(region).filter(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(); });
+        const toErase = intersectingElems.filter(elem => elem.isSelectable());
         // Remove any intersecting elements.
-        (_a = this.toRemove).push.apply(_a, toErase);
+        this.toRemove.push(...toErase);
         // Create new Erase commands for the now-to-be-erased elements and apply them.
-        var newPartialCommands = toErase.map(function (elem) { return new Erase_1.default([elem]); });
-        newPartialCommands.forEach(function (cmd) { return cmd.apply(_this.editor); });
-        (_b = this.partialCommands).push.apply(_b, newPartialCommands);
+        const newPartialCommands = toErase.map(elem => new Erase_1.default([elem]));
+        newPartialCommands.forEach(cmd => cmd.apply(this.editor));
+        this.partialCommands.push(...newPartialCommands);
         this.drawPreviewAt(currentPoint);
         this.lastPoint = currentPoint;
-    };
-    Eraser.prototype.onPointerDown = function (event) {
+    }
+    onPointerDown(event) {
         if (event.allPointers.length === 1 || event.current.device === Pointer_1.PointerDevice.Eraser) {
             this.lastPoint = event.current.canvasPos;
             this.toRemove = [];
@@ -94,32 +84,30 @@ var Eraser = /** @class */ (function (_super) {
             return true;
         }
         return false;
-    };
-    Eraser.prototype.onPointerMove = function (event) {
-        var currentPoint = event.current.canvasPos;
+    }
+    onPointerMove(event) {
+        const currentPoint = event.current.canvasPos;
         this.eraseTo(currentPoint);
-    };
-    Eraser.prototype.onPointerUp = function (event) {
-        var _this = this;
+    }
+    onPointerUp(event) {
         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.forEach(cmd => cmd.unapply(this.editor));
             this.partialCommands = [];
-            var command = new Erase_1.default(this.toRemove);
+            const command = new Erase_1.default(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); });
+    }
+    onGestureCancel() {
+        this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
         this.partialCommands = [];
         this.clearPreview();
-    };
-    Eraser.prototype.onKeyPress = function (event) {
-        var shortcuts = this.editor.shortcuts;
-        var newThickness;
+    }
+    onKeyPress(event) {
+        const shortcuts = this.editor.shortcuts;
+        let newThickness;
         if (shortcuts.matchesShortcut(keybindings_1.decreaseSizeKeyboardShortcutId, event)) {
             newThickness = this.getThickness() * 2 / 3;
         }
@@ -132,17 +120,19 @@ var Eraser = /** @class */ (function (_super) {
             return true;
         }
         return false;
-    };
-    Eraser.prototype.getThickness = function () {
+    }
+    getThickness() {
         return this.thickness;
-    };
-    Eraser.prototype.setThickness = function (thickness) {
-        this.thickness = thickness;
-        this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
-            kind: types_1.EditorEventType.ToolUpdated,
-            tool: this,
-        });
-    };
-    return Eraser;
-}(BaseTool_1.default));
+    }
+    /**
+     * Returns a {@link MutableReactiveValue} that can be used to watch
+     * this tool's thickness.
+     */
+    getThicknessValue() {
+        return this.thicknessValue;
+    }
+    setThickness(thickness) {
+        this.thicknessValue.set(thickness);
+    }
+}
 exports.default = Eraser;

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

@@ -1,5 +1,5 @@
 import Editor from '../Editor';
-import { KeyPressEvent } from '../types';
+import { KeyPressEvent } from '../inputEvents';
 import BaseTool from './BaseTool';
 export default class FindTool extends BaseTool {
     private editor;