js-draw 0.25.1 → 1.0.1

package/dist/mjs/toolbar/widgets/layout/DropdownLayoutManager.mjs

@@ -0,0 +1,193 @@
+import  { EditorEventType }  from '../../../types.mjs';
+import  EventDispatcher  from '../../../EventDispatcher.mjs';
+import  { toolbarCSSPrefix }  from '../../constants.mjs';
+import  { ReactiveValue }  from '../../../util/ReactiveValue.mjs';
+var DropdownEventType;
+(function (DropdownEventType) {
+    DropdownEventType[DropdownEventType["DropdownShown"] = 0] = "DropdownShown";
+    DropdownEventType[DropdownEventType["DropdownHidden"] = 1] = "DropdownHidden";
+})(DropdownEventType || (DropdownEventType = {}));
+class Dropdown {
+    constructor(parent, notifier, onDestroy) {
+        this.parent = parent;
+        this.notifier = notifier;
+        this.onDestroy = onDestroy;
+        this.dropdownToggleListener = null;
+        this.hideDropdownTimeout = null;
+        this.visible = ReactiveValue.fromInitialValue(false);
+        this.dropdownContainer = document.createElement('div');
+        this.dropdownContainer.classList.add(`${toolbarCSSPrefix}dropdown`);
+        this.dropdownContainer.classList.add('hidden');
+        parent.target.insertAdjacentElement('afterend', this.dropdownContainer);
+        // When another dropdown is shown,
+        this.dropdownToggleListener = this.notifier.on(DropdownEventType.DropdownShown, (evt) => {
+            if (evt.dropdown !== this &&
+                // Don't hide if a submenu was shown (it might be a submenu of
+                // the current menu).
+                evt.fromToplevelDropdown) {
+                this.setVisible(false);
+            }
+        });
+    }
+    onActivated() {
+        // Do nothing.
+    }
+    repositionDropdown() {
+        const dropdownBBox = this.dropdownContainer.getBoundingClientRect();
+        const screenWidth = document.scrollingElement?.clientWidth ?? document.body.clientHeight;
+        const screenHeight = document.scrollingElement?.clientHeight ?? document.body.clientHeight;
+        let translateX = undefined;
+        let translateY = undefined;
+        if (dropdownBBox.left > screenWidth / 2) {
+            const targetElem = this.parent.target;
+            translateX = `calc(${targetElem.clientWidth + 'px'} - 100%)`;
+        }
+        // Shift the dropdown if it's off the screen, but only if doing so moves it on to the screen
+        // (prevents dropdowns from going almost completely offscreen on small screens).
+        if (dropdownBBox.bottom > screenHeight && (dropdownBBox.top - dropdownBBox.height > 0)) {
+            const targetElem = this.parent.target;
+            translateY = `calc(-${targetElem.clientHeight}px - 100%)`;
+        }
+        // Use .translate so as not to conflict with CSS animating the
+        // transform property.
+        if (translateX || translateY) {
+            this.dropdownContainer.style.translate = `${translateX ?? '0'} ${translateY ?? '0'}`;
+        }
+        else {
+            this.dropdownContainer.style.translate = '';
+        }
+    }
+    setVisible(visible) {
+        const currentlyVisible = this.visible.get();
+        if (currentlyVisible === visible) {
+            return;
+        }
+        // If waiting to hide the dropdown, cancel it.
+        if (this.hideDropdownTimeout) {
+            clearTimeout(this.hideDropdownTimeout);
+            this.hideDropdownTimeout = null;
+            this.dropdownContainer.classList.remove('hiding');
+            this.repositionDropdown();
+        }
+        const animationDuration = 150; // ms
+        this.visible.set(visible);
+        if (visible) {
+            this.dropdownContainer.classList.remove('hidden');
+            this.notifier.dispatch(DropdownEventType.DropdownShown, {
+                dropdown: this,
+                fromToplevelDropdown: this.parent.isToplevel(),
+            });
+            this.repositionDropdown();
+        }
+        else {
+            this.notifier.dispatch(DropdownEventType.DropdownHidden, {
+                dropdown: this,
+                fromToplevelDropdown: this.parent.isToplevel(),
+            });
+            this.dropdownContainer.classList.add('hiding');
+            // Hide the dropdown *slightly* before the animation finishes. This
+            // prevents flickering in some browsers.
+            const hideDelay = animationDuration * 0.95;
+            this.hideDropdownTimeout = setTimeout(() => {
+                this.dropdownContainer.classList.add('hidden');
+                this.dropdownContainer.classList.remove('hiding');
+                this.repositionDropdown();
+            }, hideDelay);
+        }
+        // Animate
+        const animationName = `var(--dropdown-${visible ? 'show' : 'hide'}-animation)`;
+        this.dropdownContainer.style.animation = `${animationDuration}ms ease ${animationName}`;
+    }
+    requestShow() {
+        this.setVisible(true);
+    }
+    requestHide() {
+        this.setVisible(false);
+    }
+    appendChild(item) {
+        this.dropdownContainer.appendChild(item);
+    }
+    clearChildren() {
+        this.dropdownContainer.replaceChildren();
+    }
+    destroy() {
+        this.setVisible(false);
+        this.dropdownContainer.remove();
+        this.dropdownToggleListener?.remove();
+        // Allow children to be added to other parents
+        this.clearChildren();
+        this.onDestroy();
+    }
+}
+export default class DropdownLayoutManager {
+    constructor(announceForAccessibility, localization) {
+        this.localization = localization;
+        this.dropdowns = new Set();
+        this.listeners = [];
+        this.connectedNotifiers = [];
+        this.notifier = new EventDispatcher();
+        this.notifier.on(DropdownEventType.DropdownShown, ({ dropdown, fromToplevelDropdown }) => {
+            if (!dropdown)
+                return;
+            announceForAccessibility(this.localization.dropdownShown(dropdown.parent.getTitle()));
+            // Share the event with other connected notifiers
+            this.connectedNotifiers.forEach(notifier => {
+                notifier.dispatch(EditorEventType.ToolbarDropdownShown, {
+                    kind: EditorEventType.ToolbarDropdownShown,
+                    fromToplevelDropdown,
+                    layoutManager: this,
+                });
+            });
+        });
+        this.notifier.on(DropdownEventType.DropdownHidden, ({ dropdown }) => {
+            if (!dropdown)
+                return;
+            announceForAccessibility(this.localization.dropdownHidden(dropdown.parent.getTitle()));
+        });
+    }
+    connectToEditorNotifier(notifier) {
+        this.connectedNotifiers.push(notifier);
+        this.refreshListeners();
+    }
+    /** Creates a dropdown within `parent`. */
+    createToolMenu(parent) {
+        const dropdown = new Dropdown(parent, this.notifier, () => {
+            this.dropdowns.delete(dropdown);
+            this.refreshListeners();
+        });
+        this.dropdowns.add(dropdown);
+        this.refreshListeners();
+        return dropdown;
+    }
+    /**
+     * Adds/removes listeners based on whether we have any managed dropdowns.
+     *
+     * We attempt to clean up all resources when `dropdowns.size == 0`, at which
+     * point, an instance of this could be safely garbage collected.
+     */
+    refreshListeners() {
+        const clearListeners = () => {
+            // Remove all listeners & resources that won't be garbage collected.
+            this.listeners.forEach(l => l.remove());
+            this.listeners = [];
+        };
+        if (this.dropdowns.size === 0) {
+            clearListeners();
+        }
+        else if (this.listeners.length !== this.connectedNotifiers.length) {
+            clearListeners();
+            this.listeners = this.connectedNotifiers.map(notifier => {
+                return notifier.on(EditorEventType.ToolbarDropdownShown, (evt) => {
+                    if (evt.kind !== EditorEventType.ToolbarDropdownShown
+                        // Don't forward to ourselves events that we originally triggered.
+                        || evt.layoutManager === this) {
+                        return;
+                    }
+                    this.notifier.dispatch(DropdownEventType.DropdownShown, {
+                        fromToplevelDropdown: evt.fromToplevelDropdown,
+                    });
+                });
+            });
+        }
+    }
+}

package/dist/mjs/toolbar/widgets/layout/EdgeToolbarLayoutManager.d.ts

@@ -0,0 +1,14 @@
+import { MutableReactiveValue } from '../../../util/ReactiveValue';
+import { ToolbarLocalization } from '../../localization';
+import { ToolMenu, WidgetContentLayoutManager, ToolMenuParent } from './types';
+export default class EdgeToolbarLayoutManager implements WidgetContentLayoutManager {
+    private setSidebarContent;
+    private sidebarTitle;
+    private sidebarVisibility;
+    private announceForAccessibility;
+    private localization;
+    private visibleWidgetContent;
+    constructor(setSidebarContent: (...content: HTMLElement[]) => void, sidebarTitle: MutableReactiveValue<string>, sidebarVisibility: MutableReactiveValue<boolean>, announceForAccessibility: (text: string) => void, localization: ToolbarLocalization);
+    /** Creates a dropdown within `parent`. */
+    createToolMenu(parent: ToolMenuParent): ToolMenu;
+}

package/dist/mjs/toolbar/widgets/layout/EdgeToolbarLayoutManager.mjs

@@ -0,0 +1,57 @@
+import  { ReactiveValue }  from '../../../util/ReactiveValue.mjs';
+export default class EdgeToolbarLayoutManager {
+    // @internal
+    constructor(setSidebarContent, sidebarTitle, sidebarVisibility, announceForAccessibility, localization) {
+        this.setSidebarContent = setSidebarContent;
+        this.sidebarTitle = sidebarTitle;
+        this.sidebarVisibility = sidebarVisibility;
+        this.announceForAccessibility = announceForAccessibility;
+        this.localization = localization;
+        this.visibleWidgetContent = ReactiveValue.fromInitialValue(null);
+    }
+    /** Creates a dropdown within `parent`. */
+    createToolMenu(parent) {
+        const contentElem = document.createElement('div');
+        let result = null;
+        const visible = ReactiveValue.fromCallback(() => {
+            return this.visibleWidgetContent.get() === result && this.sidebarVisibility.get();
+        }, [this.visibleWidgetContent, this.sidebarVisibility]);
+        result = {
+            visible,
+            requestShow: () => {
+                this.setSidebarContent(contentElem);
+                this.sidebarTitle.set(parent.getTitle());
+                // Set visibleWidgetContent first -- this causes the previously visible (if any)
+                // item to not be sent a shown event.
+                this.visibleWidgetContent.set(result);
+                this.sidebarVisibility.set(true);
+                this.announceForAccessibility(this.localization.dropdownShown(parent.getTitle()));
+            },
+            onActivated: () => {
+                // TODO: Only request show when in sidebar mode
+                //result?.requestShow();
+            },
+            requestHide: () => {
+                if (visible.get()) {
+                    this.sidebarVisibility.set(false);
+                }
+            },
+            appendChild: (item) => {
+                contentElem.appendChild(item);
+            },
+            clearChildren: () => {
+                contentElem.replaceChildren();
+            },
+            destroy: () => {
+                result?.requestHide();
+                if (contentElem.parentElement) {
+                    contentElem.remove();
+                }
+                if (this.visibleWidgetContent.get() === result) {
+                    this.visibleWidgetContent.set(null);
+                }
+            },
+        };
+        return result;
+    }
+}

package/dist/mjs/toolbar/widgets/layout/types.d.ts

@@ -0,0 +1,63 @@
+import ReactiveValue from 'js-draw/src/util/ReactiveValue';
+/**
+ * A class that manages whether/what content is shown for a widget.
+ *
+ * This might be a dropdown menu or a sidebar.
+ *
+ * TODO: Shouldn't be an interface, unless always internal.
+ * @internal
+ */
+export interface ToolMenu {
+    /**
+     * Request that the layout manager show the dropdown. In general,
+     * this makes the content of the dropdown visible.
+     */
+    requestShow(): void;
+    /**
+     * Request that the layout manager hide the dropdown. Even after calling this,
+     * the dropdown may still be visible.
+     */
+    requestHide(): void;
+    /** Whether the dropdown is visible (not hidden). */
+    readonly visible: ReactiveValue<boolean>;
+    /** Note that the tool associated with this dropdown has been activated. */
+    onActivated(): void;
+    /** Adds the given `child` to the content of the dropdown. */
+    appendChild(child: HTMLElement): void;
+    /** Removes all children from this dropdown. */
+    clearChildren(): void;
+    /**
+     * Destroy the dropdown and remove it from the document. This should be called when
+     * the creator of the dropdown is destroyed.
+     */
+    destroy(): void;
+}
+/**
+ * Provides information about the element a tool menu is attached to.
+ */
+export interface ToolMenuParent {
+    /** The dropdown may be added **after** this element. */
+    target: HTMLElement;
+    /**
+     * @returns the title of the element the dropdown is associated with.
+     *
+     * This is used for accessibility announcements (and possibly to display
+     * a heading).
+     */
+    getTitle(): string;
+    /**
+     * Returns true iff the parent is a toplevel element (not contained within
+     * a ContentLayoutManager of the same type as the current).
+     */
+    isToplevel(): boolean;
+}
+export interface WidgetContentLayoutManager {
+    /**
+     * Creates a tool menu (e.g. a dropdown). The dropdown *may* be added to `parent` or addded
+     * elsewhere (this depends on the layout manager).
+     *
+     * Regardless, `parent` should be a place where an absolutely-positioned dropdown
+     * element could be added.
+     */
+    createToolMenu(parent: ToolMenuParent): ToolMenu;
+}

package/dist/mjs/toolbar/widgets/lib.d.ts

@@ -1,6 +1,6 @@
 export { default as ActionButtonWidget } from './ActionButtonWidget';
 export { default as BaseToolWidget } from './BaseToolWidget';
-export { default as BaseWidget } from './BaseWidget';
+export { default as BaseWidget, ToolbarWidgetTag } from './BaseWidget';
 export { default as PenToolWidget } from './PenToolWidget';
 export { default as TextToolWidget } from './TextToolWidget';
 export { default as HandToolWidget } from './HandToolWidget';

package/dist/mjs/toolbar/widgets/lib.mjs

@@ -1,6 +1,6 @@
 export  { default as ActionButtonWidget }  from './ActionButtonWidget.mjs';
 export  { default as BaseToolWidget }  from './BaseToolWidget.mjs';
-export  { default as BaseWidget }  from './BaseWidget.mjs';
+export  { default as BaseWidget, ToolbarWidgetTag }  from './BaseWidget.mjs';
 export  { default as PenToolWidget }  from './PenToolWidget.mjs';
 export  { default as TextToolWidget }  from './TextToolWidget.mjs';
 export  { default as HandToolWidget }  from './HandToolWidget.mjs';

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

@@ -1,25 +1,31 @@
-import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent } from '../types';
+import { EditorNotifier } from '../types';
+import { WheelEvt, PointerEvt, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent, InputEvt, GestureCancelEvt, PointerDownEvt, PointerMoveEvt, PointerUpEvt } from '../inputEvents';
 import ToolEnabledGroup from './ToolEnabledGroup';
-export default abstract class BaseTool implements PointerEvtListener {
+import InputMapper, { InputEventListener } from './InputFilter/InputMapper';
+import { ReactiveValue } from '../util/ReactiveValue';
+export default abstract class BaseTool implements InputEventListener {
+    #private;
     private notifier;
     readonly description: string;
-    private enabled;
-    private group;
+    protected constructor(notifier: EditorNotifier, description: string);
+    setInputMapper(mapper: InputMapper | null): void;
+    getInputMapper(): InputMapper | null;
+    private dispatchEventToCallback;
+    onEvent(event: InputEvt): boolean;
     /**
      * Returns true iff the tool handled the event and thus should receive additional
      * events.
      */
-    onPointerDown(_event: PointerEvt): boolean;
-    onPointerMove(_event: PointerEvt): void;
+    onPointerDown(_event: PointerDownEvt): boolean;
+    onPointerMove(_event: PointerMoveEvt): void;
     /**
      * 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.
      */
-    onPointerUp(_event: PointerEvt): boolean | void;
-    onGestureCancel(): void;
-    protected constructor(notifier: EditorNotifier, description: string);
+    onPointerUp(_event: PointerUpEvt): boolean | void;
+    onGestureCancel(_event: GestureCancelEvt): void;
     onWheel(_event: WheelEvt): boolean;
     onCopy(_event: CopyEvent): boolean;
     onPaste(_event: PasteEvent): boolean;
@@ -33,6 +39,19 @@ export default abstract class BaseTool implements PointerEvtListener {
     eventCanBeDeliveredToNonActiveTool(_event: PointerEvt): boolean;
     setEnabled(enabled: boolean): void;
     isEnabled(): boolean;
+    /**
+     * 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(): ReactiveValue<boolean>;
     setToolGroup(group: ToolEnabledGroup): void;
     getToolGroup(): ToolEnabledGroup | null;
 }

package/dist/mjs/tools/BaseTool.mjs

@@ -1,83 +1,160 @@
+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;
 import  { EditorEventType }  from '../types.mjs';
-var BaseTool = /** @class */ (function () {
-    function BaseTool(notifier, description) {
+import  { InputEvtType }  from '../inputEvents.mjs';
+import  { ReactiveValue }  from '../util/ReactiveValue.mjs';
+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.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(EditorEventType.ToolEnabled, {
+                    kind: EditorEventType.ToolEnabled,
+                    tool: this,
+                });
+            }
+            else {
+                this.notifier.dispatch(EditorEventType.ToolDisabled, {
+                    kind: 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 InputEvtType.PointerDownEvt:
+                return this.onPointerDown(event);
+            case InputEvtType.PointerMoveEvt:
+                this.onPointerMove(event);
+                break;
+            case InputEvtType.PointerUpEvt:
+                return this.onPointerUp(event) ?? false;
+            case InputEvtType.GestureCancelEvt:
+                this.onGestureCancel(event);
+                break;
+            case InputEvtType.WheelEvt:
+                return this.onWheel(event);
+            case InputEvtType.KeyPressEvent:
+                return this.onKeyPress(event);
+            case InputEvtType.KeyUpEvent:
+                return this.onKeyUp(event);
+            case InputEvtType.CopyEvent:
+                return this.onCopy(event);
+            case 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(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;
-    };
+    }
+    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();
 export default BaseTool;

package/dist/mjs/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;
 }