js-draw 0.25.0 → 1.0.0

package/dist/cjs/tools/lib.js

@@ -2,34 +2,37 @@
 /**
  * @packageDocumentation
  */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarShortcutHandler = exports.SoundUITool = exports.PasteHandler = exports.EraserTool = exports.SelectAllShortcutHandler = exports.SelectionTool = exports.TextTool = exports.PenTool = exports.PanZoomMode = exports.PanZoomTool = exports.ToolSwitcherShortcut = exports.UndoRedoShortcut = exports.ToolEnabledGroup = exports.ToolController = exports.BaseTool = void 0;
 var BaseTool_1 = require("./BaseTool");
-Object.defineProperty(exports, "BaseTool", { enumerable: true, get: function () { return BaseTool_1.default; } });
+Object.defineProperty(exports, "BaseTool", { enumerable: true, get: function () { return __importDefault(BaseTool_1).default; } });
 var ToolController_1 = require("./ToolController");
-Object.defineProperty(exports, "ToolController", { enumerable: true, get: function () { return ToolController_1.default; } });
+Object.defineProperty(exports, "ToolController", { enumerable: true, get: function () { return __importDefault(ToolController_1).default; } });
 var ToolEnabledGroup_1 = require("./ToolEnabledGroup");
-Object.defineProperty(exports, "ToolEnabledGroup", { enumerable: true, get: function () { return ToolEnabledGroup_1.default; } });
+Object.defineProperty(exports, "ToolEnabledGroup", { enumerable: true, get: function () { return __importDefault(ToolEnabledGroup_1).default; } });
 var UndoRedoShortcut_1 = require("./UndoRedoShortcut");
-Object.defineProperty(exports, "UndoRedoShortcut", { enumerable: true, get: function () { return UndoRedoShortcut_1.default; } });
+Object.defineProperty(exports, "UndoRedoShortcut", { enumerable: true, get: function () { return __importDefault(UndoRedoShortcut_1).default; } });
 var ToolSwitcherShortcut_1 = require("./ToolSwitcherShortcut");
-Object.defineProperty(exports, "ToolSwitcherShortcut", { enumerable: true, get: function () { return ToolSwitcherShortcut_1.default; } });
+Object.defineProperty(exports, "ToolSwitcherShortcut", { enumerable: true, get: function () { return __importDefault(ToolSwitcherShortcut_1).default; } });
 var PanZoom_1 = require("./PanZoom");
-Object.defineProperty(exports, "PanZoomTool", { enumerable: true, get: function () { return PanZoom_1.default; } });
+Object.defineProperty(exports, "PanZoomTool", { enumerable: true, get: function () { return __importDefault(PanZoom_1).default; } });
 Object.defineProperty(exports, "PanZoomMode", { enumerable: true, get: function () { return PanZoom_1.PanZoomMode; } });
 var Pen_1 = require("./Pen");
-Object.defineProperty(exports, "PenTool", { enumerable: true, get: function () { return Pen_1.default; } });
+Object.defineProperty(exports, "PenTool", { enumerable: true, get: function () { return __importDefault(Pen_1).default; } });
 var TextTool_1 = require("./TextTool");
-Object.defineProperty(exports, "TextTool", { enumerable: true, get: function () { return TextTool_1.default; } });
+Object.defineProperty(exports, "TextTool", { enumerable: true, get: function () { return __importDefault(TextTool_1).default; } });
 var SelectionTool_1 = require("./SelectionTool/SelectionTool");
-Object.defineProperty(exports, "SelectionTool", { enumerable: true, get: function () { return SelectionTool_1.default; } });
+Object.defineProperty(exports, "SelectionTool", { enumerable: true, get: function () { return __importDefault(SelectionTool_1).default; } });
 var SelectAllShortcutHandler_1 = require("./SelectionTool/SelectAllShortcutHandler");
-Object.defineProperty(exports, "SelectAllShortcutHandler", { enumerable: true, get: function () { return SelectAllShortcutHandler_1.default; } });
+Object.defineProperty(exports, "SelectAllShortcutHandler", { enumerable: true, get: function () { return __importDefault(SelectAllShortcutHandler_1).default; } });
 var Eraser_1 = require("./Eraser");
-Object.defineProperty(exports, "EraserTool", { enumerable: true, get: function () { return Eraser_1.default; } });
+Object.defineProperty(exports, "EraserTool", { enumerable: true, get: function () { return __importDefault(Eraser_1).default; } });
 var PasteHandler_1 = require("./PasteHandler");
-Object.defineProperty(exports, "PasteHandler", { enumerable: true, get: function () { return PasteHandler_1.default; } });
+Object.defineProperty(exports, "PasteHandler", { enumerable: true, get: function () { return __importDefault(PasteHandler_1).default; } });
 var SoundUITool_1 = require("./SoundUITool");
-Object.defineProperty(exports, "SoundUITool", { enumerable: true, get: function () { return SoundUITool_1.default; } });
+Object.defineProperty(exports, "SoundUITool", { enumerable: true, get: function () { return __importDefault(SoundUITool_1).default; } });
 var ToolbarShortcutHandler_1 = require("./ToolbarShortcutHandler");
-Object.defineProperty(exports, "ToolbarShortcutHandler", { enumerable: true, get: function () { return ToolbarShortcutHandler_1.default; } });
+Object.defineProperty(exports, "ToolbarShortcutHandler", { enumerable: true, get: function () { return __importDefault(ToolbarShortcutHandler_1).default; } });

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

@@ -16,9 +16,10 @@ export interface ToolLocalization {
     soundExplorer: string;
     disableAccessibilityExploreTool: string;
     enableAccessibilityExploreTool: string;
+    soundExplorerUsageAnnouncement: string;
     findLabel: string;
     toNextMatch: string;
-    closeFindDialog: string;
+    closeDialog: string;
     findDialogShown: string;
     findDialogHidden: string;
     focusedFoundText: (currentMatchNumber: number, totalMatches: number) => string;

package/dist/cjs/tools/localization.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultToolLocalization = void 0;
 exports.defaultToolLocalization = {
-    penTool: function (penId) { return "Pen ".concat(penId); },
+    penTool: (penId) => `Pen ${penId}`,
     selectionTool: 'Selection',
     selectAllTool: 'Select all shortcut',
     eraserTool: 'Eraser',
@@ -19,15 +19,16 @@ exports.defaultToolLocalization = {
     soundExplorer: 'Sound-based image exploration',
     disableAccessibilityExploreTool: 'Disable sound-based exploration',
     enableAccessibilityExploreTool: 'Enable sound-based exploration',
+    soundExplorerUsageAnnouncement: 'Sound-based image exploration enabled: Click/drag the screen to play a sound representation of different parts of the image.',
     findLabel: 'Find',
     toNextMatch: 'Next',
-    closeFindDialog: 'Close',
+    closeDialog: 'Close',
     findDialogShown: 'Find dialog shown',
     findDialogHidden: 'Find dialog hidden',
-    focusedFoundText: function (matchIdx, totalMatches) { return "Viewing match ".concat(matchIdx, " of ").concat(totalMatches); },
+    focusedFoundText: (matchIdx, totalMatches) => `Viewing match ${matchIdx} of ${totalMatches}`,
     anyDevicePanning: 'Any device panning',
-    copied: function (count, description) { return "Copied ".concat(count, " ").concat(description); },
-    pasted: function (count, description) { return "Pasted ".concat(count, " ").concat(description); },
-    toolEnabledAnnouncement: function (toolName) { return "".concat(toolName, " enabled"); },
-    toolDisabledAnnouncement: function (toolName) { return "".concat(toolName, " disabled"); },
+    copied: (count, description) => `Copied ${count} ${description}`,
+    pasted: (count, description) => `Pasted ${count} ${description}`,
+    toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
+    toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
 };

package/dist/cjs/types.d.ts

@@ -1,77 +1,9 @@
-import EventDispatcher from './EventDispatcher';
-import Mat33 from './math/Mat33';
-import { Point2, Vec2 } from './math/Vec2';
-import Vec3 from './math/Vec3';
-import BaseTool from './tools/BaseTool';
-import AbstractComponent from './components/AbstractComponent';
-import Rect2 from './math/shapes/Rect2';
-import Pointer from './Pointer';
-import Color4 from './Color4';
-import Command from './commands/Command';
-import BaseWidget from './toolbar/widgets/BaseWidget';
-export type HTMLPointerEventName = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
-export type HTMLPointerEventFilter = (eventName: HTMLPointerEventName, event: PointerEvent) => boolean;
-export interface PointerEvtListener {
-    onPointerDown(event: PointerEvt): boolean;
-    onPointerMove(event: PointerEvt): void;
-    onPointerUp(event: PointerEvt): void;
-    onGestureCancel(): void;
-}
-export declare enum InputEvtType {
-    PointerDownEvt = 0,
-    PointerMoveEvt = 1,
-    PointerUpEvt = 2,
-    GestureCancelEvt = 3,
-    WheelEvt = 4,
-    KeyPressEvent = 5,
-    KeyUpEvent = 6,
-    CopyEvent = 7,
-    PasteEvent = 8
-}
-export interface WheelEvt {
-    readonly kind: InputEvtType.WheelEvt;
-    readonly delta: Vec3;
-    readonly screenPos: Point2;
-}
-export interface KeyPressEvent {
-    readonly kind: InputEvtType.KeyPressEvent;
-    readonly key: string;
-    readonly ctrlKey: boolean | undefined;
-    readonly altKey: boolean | undefined;
-}
-export interface KeyUpEvent {
-    readonly kind: InputEvtType.KeyUpEvent;
-    readonly key: string;
-    readonly ctrlKey: boolean | undefined;
-    readonly altKey: boolean | undefined;
-}
-export interface CopyEvent {
-    readonly kind: InputEvtType.CopyEvent;
-    setData(mime: string, data: string): void;
-}
-export interface PasteEvent {
-    readonly kind: InputEvtType.PasteEvent;
-    readonly data: string;
-    readonly mime: string;
-}
-export interface GestureCancelEvt {
-    readonly kind: InputEvtType.GestureCancelEvt;
-}
-interface PointerEvtBase {
-    readonly current: Pointer;
-    readonly allPointers: Pointer[];
-}
-export interface PointerDownEvt extends PointerEvtBase {
-    readonly kind: InputEvtType.PointerDownEvt;
-}
-export interface PointerMoveEvt extends PointerEvtBase {
-    readonly kind: InputEvtType.PointerMoveEvt;
-}
-export interface PointerUpEvt extends PointerEvtBase {
-    readonly kind: InputEvtType.PointerUpEvt;
-}
-export type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
-export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
+import type EventDispatcher from './EventDispatcher';
+import type { Mat33, Point2, Vec2, Rect2, Color4 } from '@js-draw/math';
+import type BaseTool from './tools/BaseTool';
+import type AbstractComponent from './components/AbstractComponent';
+import type Command from './commands/Command';
+import type { WidgetContentLayoutManager } from './toolbar/widgets/layout/types';
 export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 export declare enum EditorEventType {
     ToolEnabled = 0,
@@ -83,9 +15,13 @@ export declare enum EditorEventType {
     ObjectAdded = 6,
     ViewportChanged = 7,
     DisplayResized = 8,
-    ColorPickerToggled = 9,
-    ColorPickerColorSelected = 10,
-    ToolbarDropdownShown = 11
+    SelectionUpdated = 9,
+    /** @internal */
+    ColorPickerToggled = 10,
+    /** @internal */
+    ColorPickerColorSelected = 11,
+    /** @deprecated @internal */
+    ToolbarDropdownShown = 12
 }
 export declare enum UndoEventType {
     CommandDone = 0,
@@ -125,6 +61,11 @@ export interface CommandUndoneEvent {
     readonly kind: EditorEventType.CommandUndone;
     readonly command: Command;
 }
+export interface SelectionUpdated {
+    readonly kind: EditorEventType.SelectionUpdated;
+    readonly selectedComponents: AbstractComponent[];
+    readonly tool: BaseTool;
+}
 export interface ColorPickerToggled {
     readonly kind: EditorEventType.ColorPickerToggled;
     readonly open: boolean;
@@ -135,9 +76,10 @@ export interface ColorPickerColorSelected {
 }
 export interface ToolbarDropdownShownEvent {
     readonly kind: EditorEventType.ToolbarDropdownShown;
-    readonly parentWidget: BaseWidget;
+    readonly fromToplevelDropdown: boolean;
+    readonly layoutManager: WidgetContentLayoutManager;
 }
-export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
+export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | SelectionUpdated | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
 export type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null | void;
 export type ComponentAddedListener = (component: AbstractComponent) => Promise<void> | void;
 export type OnDetermineExportRectListener = (exportRect: Rect2) => void;
@@ -147,7 +89,7 @@ export interface ImageLoader {
 export interface StrokeDataPoint {
     pos: Point2;
     width: number;
-    /** Time in milliseconds (e.g. as returned by `new Date().getTime()`). */
+    /** Time in milliseconds (e.g. as returned by `performance.now()`). */
     time: number;
     color: Color4;
 }

package/dist/cjs/types.js

@@ -1,19 +1,7 @@
 "use strict";
 // Types related to the image editor
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UndoEventType = exports.EditorEventType = exports.InputEvtType = void 0;
-var InputEvtType;
-(function (InputEvtType) {
-    InputEvtType[InputEvtType["PointerDownEvt"] = 0] = "PointerDownEvt";
-    InputEvtType[InputEvtType["PointerMoveEvt"] = 1] = "PointerMoveEvt";
-    InputEvtType[InputEvtType["PointerUpEvt"] = 2] = "PointerUpEvt";
-    InputEvtType[InputEvtType["GestureCancelEvt"] = 3] = "GestureCancelEvt";
-    InputEvtType[InputEvtType["WheelEvt"] = 4] = "WheelEvt";
-    InputEvtType[InputEvtType["KeyPressEvent"] = 5] = "KeyPressEvent";
-    InputEvtType[InputEvtType["KeyUpEvent"] = 6] = "KeyUpEvent";
-    InputEvtType[InputEvtType["CopyEvent"] = 7] = "CopyEvent";
-    InputEvtType[InputEvtType["PasteEvent"] = 8] = "PasteEvent";
-})(InputEvtType || (exports.InputEvtType = InputEvtType = {}));
+exports.UndoEventType = exports.EditorEventType = void 0;
 var EditorEventType;
 (function (EditorEventType) {
     EditorEventType[EditorEventType["ToolEnabled"] = 0] = "ToolEnabled";
@@ -25,9 +13,13 @@ var EditorEventType;
     EditorEventType[EditorEventType["ObjectAdded"] = 6] = "ObjectAdded";
     EditorEventType[EditorEventType["ViewportChanged"] = 7] = "ViewportChanged";
     EditorEventType[EditorEventType["DisplayResized"] = 8] = "DisplayResized";
-    EditorEventType[EditorEventType["ColorPickerToggled"] = 9] = "ColorPickerToggled";
-    EditorEventType[EditorEventType["ColorPickerColorSelected"] = 10] = "ColorPickerColorSelected";
-    EditorEventType[EditorEventType["ToolbarDropdownShown"] = 11] = "ToolbarDropdownShown";
+    EditorEventType[EditorEventType["SelectionUpdated"] = 9] = "SelectionUpdated";
+    /** @internal */
+    EditorEventType[EditorEventType["ColorPickerToggled"] = 10] = "ColorPickerToggled";
+    /** @internal */
+    EditorEventType[EditorEventType["ColorPickerColorSelected"] = 11] = "ColorPickerColorSelected";
+    /** @deprecated @internal */
+    EditorEventType[EditorEventType["ToolbarDropdownShown"] = 12] = "ToolbarDropdownShown";
 })(EditorEventType || (exports.EditorEventType = EditorEventType = {}));
 // Types of `EditorUndoStackUpdated` events.
 var UndoEventType;

package/dist/cjs/util/ReactiveValue.d.ts

@@ -0,0 +1,65 @@
+type ListenerResult = {
+    remove(): void;
+};
+type UpdateCallback<T> = (value: T) => void;
+/**
+ * A `ReactiveValue` is a value that
+ * - updates periodically,
+ * - can fire listeners when it updates,
+ * - and can be chanined together with other `ReactiveValue`s.
+ *
+ * A `ReactiveValue` is a read-only view. See {@link MutableReactiveValue} for a
+ * read-write view.
+ *
+ * Static methods in the `ReactiveValue` and `MutableReactiveValue` classes are
+ * constructors (e.g. `fromImmutable`).
+ */
+export declare abstract class ReactiveValue<T> {
+    /**
+     * Returns a reference to the current value of this `ReactiveValue`.
+     *
+     * The result of this **should not be modified** (use `setValue` instead).
+     */
+    abstract get(): T;
+    /**
+     * Registers a listener that is notified when the value of this changes.
+     */
+    abstract onUpdate(listener: UpdateCallback<T>): ListenerResult;
+    /**
+     * Calls `callback` immediately, then registers `callback` as an onUpdateListener.
+     *
+     * @see {@link onUpdate}.
+     */
+    abstract onUpdateAndNow(callback: UpdateCallback<T>): ListenerResult;
+    /** Creates a `ReactiveValue` with an initial value, `initialValue`. */
+    static fromInitialValue<T>(initialValue: T): MutableReactiveValue<T>;
+    /** Returns a `ReactiveValue` that is **known** will never change. */
+    static fromImmutable<T>(value: T): ReactiveValue<T>;
+    /**
+     * Creates a `ReactiveValue` whose values come from `callback`.
+     *
+     * `callback` is called whenever any of `sourceValues` are updated and initially to
+     * set the initial value of the result.
+     */
+    static fromCallback<T>(callback: () => T, sourceValues: ReactiveValue<any>[]): ReactiveValue<T>;
+    /**
+     * Returns a reactive value derived from a single `source`.
+     *
+     * If `inverseMap` is `undefined`, the result is a read-only view.
+     */
+    static map<A, B>(source: ReactiveValue<A>, map: (a: A) => B, inverseMap?: undefined): ReactiveValue<B>;
+    /**
+     * Returns a reactive value derived from a single `source`.
+     */
+    static map<A, B>(source: ReactiveValue<A>, map: (a: A) => B, inverseMap: (b: B) => A): MutableReactiveValue<B>;
+}
+export declare abstract class MutableReactiveValue<T> extends ReactiveValue<T> {
+    /**
+     * Changes the value of this and fires all update listeners.
+     *
+     * @see {@link onUpdate}
+     */
+    abstract set(newValue: T): void;
+    static fromProperty<SourceType extends object, Name extends keyof SourceType>(sourceValue: MutableReactiveValue<SourceType>, propertyName: Name): MutableReactiveValue<SourceType[Name]>;
+}
+export default ReactiveValue;

package/dist/cjs/util/ReactiveValue.js

@@ -0,0 +1,166 @@
+"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 _ReactiveValueImpl_value, _ReactiveValueImpl_onUpdateListeners;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MutableReactiveValue = exports.ReactiveValue = void 0;
+const noOpUpdateListenerResult = {
+    remove() { }
+};
+/**
+ * An update listener that does nothing. Useful for reactive values
+ * that will never change.
+ */
+const noOpSetUpdateListener = () => {
+    return noOpUpdateListenerResult;
+};
+/**
+ * A `ReactiveValue` is a value that
+ * - updates periodically,
+ * - can fire listeners when it updates,
+ * - and can be chanined together with other `ReactiveValue`s.
+ *
+ * A `ReactiveValue` is a read-only view. See {@link MutableReactiveValue} for a
+ * read-write view.
+ *
+ * Static methods in the `ReactiveValue` and `MutableReactiveValue` classes are
+ * constructors (e.g. `fromImmutable`).
+ */
+class ReactiveValue {
+    /** Creates a `ReactiveValue` with an initial value, `initialValue`. */
+    static fromInitialValue(initialValue) {
+        return new ReactiveValueImpl(initialValue);
+    }
+    /** Returns a `ReactiveValue` that is **known** will never change. */
+    static fromImmutable(value) {
+        return {
+            get: () => value,
+            onUpdate: noOpSetUpdateListener,
+            onUpdateAndNow: callback => {
+                callback(value);
+                return noOpUpdateListenerResult;
+            },
+        };
+    }
+    /**
+     * Creates a `ReactiveValue` whose values come from `callback`.
+     *
+     * `callback` is called whenever any of `sourceValues` are updated and initially to
+     * set the initial value of the result.
+     */
+    static fromCallback(callback, sourceValues) {
+        const result = new ReactiveValueImpl(callback());
+        const resultRef = window.WeakRef ? new WeakRef(result) : { deref: () => result };
+        for (const value of sourceValues) {
+            const listener = value.onUpdate(() => {
+                // Use resultRef to allow `result` to be garbage collected
+                // despite this listener.
+                const value = resultRef.deref();
+                if (value) {
+                    value.set(callback());
+                }
+                else {
+                    listener.remove();
+                }
+            });
+        }
+        return result;
+    }
+    static map(source, map, inverseMap) {
+        const result = ReactiveValue.fromInitialValue(map(source.get()));
+        let expectedResultValue = result.get();
+        source.onUpdate(newValue => {
+            expectedResultValue = map(newValue);
+            result.set(expectedResultValue);
+        });
+        if (inverseMap) {
+            result.onUpdate(newValue => {
+                // Prevent infinite loops if inverseMap is not a true
+                // inverse.
+                if (newValue !== expectedResultValue) {
+                    source.set(inverseMap(newValue));
+                }
+            });
+        }
+        return result;
+    }
+}
+exports.ReactiveValue = ReactiveValue;
+class MutableReactiveValue extends ReactiveValue {
+    static fromProperty(sourceValue, propertyName) {
+        const child = ReactiveValue.fromInitialValue(sourceValue.get()[propertyName]);
+        const childRef = new WeakRef(child);
+        // When the source is updated...
+        const sourceListener = sourceValue.onUpdate(newValue => {
+            const childValue = childRef.deref();
+            if (childValue) {
+                childValue.set(newValue[propertyName]);
+            }
+            else {
+                // TODO: What if `sourceValue` would be dropped before
+                // the child value?
+                sourceListener.remove();
+            }
+        });
+        // When the child is updated, also apply the update to the
+        // parent.
+        child.onUpdate(newValue => {
+            sourceValue.set({
+                ...sourceValue.get(),
+                [propertyName]: newValue,
+            });
+        });
+        return child;
+    }
+}
+exports.MutableReactiveValue = MutableReactiveValue;
+// @internal
+class ReactiveValueImpl extends MutableReactiveValue {
+    constructor(initialValue) {
+        super();
+        _ReactiveValueImpl_value.set(this, void 0);
+        _ReactiveValueImpl_onUpdateListeners.set(this, void 0);
+        __classPrivateFieldSet(this, _ReactiveValueImpl_value, initialValue, "f");
+        __classPrivateFieldSet(this, _ReactiveValueImpl_onUpdateListeners, [], "f");
+    }
+    set(newValue) {
+        if (__classPrivateFieldGet(this, _ReactiveValueImpl_value, "f") === newValue) {
+            return;
+        }
+        __classPrivateFieldSet(this, _ReactiveValueImpl_value, newValue, "f");
+        for (const listener of __classPrivateFieldGet(this, _ReactiveValueImpl_onUpdateListeners, "f")) {
+            listener(newValue);
+        }
+    }
+    get() {
+        return __classPrivateFieldGet(this, _ReactiveValueImpl_value, "f");
+    }
+    onUpdate(listener) {
+        // **Note**: If memory is a concern, listeners should avoid referencing this
+        // reactive value directly. Doing so allows the value to be garbage collected when
+        // no longer referenced.
+        __classPrivateFieldGet(this, _ReactiveValueImpl_onUpdateListeners, "f").push(listener);
+        return {
+            remove: () => {
+                __classPrivateFieldSet(this, _ReactiveValueImpl_onUpdateListeners, __classPrivateFieldGet(this, _ReactiveValueImpl_onUpdateListeners, "f").filter(otherListener => {
+                    return otherListener !== listener;
+                }), "f");
+            },
+        };
+    }
+    onUpdateAndNow(callback) {
+        callback(this.get());
+        return this.onUpdate(callback);
+    }
+}
+_ReactiveValueImpl_value = new WeakMap(), _ReactiveValueImpl_onUpdateListeners = new WeakMap();
+exports.default = ReactiveValue;

package/dist/cjs/util/assertions.js

@@ -5,9 +5,9 @@ exports.assertIsNumberArray = exports.assertIsNumber = exports.assertUnreachable
  * Compile-time assertion that a branch of code is unreachable.
  * @internal
  */
-var assertUnreachable = function (key) {
+const assertUnreachable = (key) => {
     // See https://stackoverflow.com/a/39419171/17055750
-    throw new Error("Should be unreachable. Key: ".concat(key, "."));
+    throw new Error(`Should be unreachable. Key: ${key}.`);
 };
 exports.assertUnreachable = assertUnreachable;
 /**
@@ -23,8 +23,7 @@ exports.assertUnreachable = assertUnreachable;
  *
  *
  */
-var assertIsNumber = function (value, allowNaN) {
-    if (allowNaN === void 0) { allowNaN = false; }
+const assertIsNumber = (value, allowNaN = false) => {
     if (typeof value !== 'number' || (!allowNaN && isNaN(value))) {
         throw new Error('Given value is not a number');
         // return false;
@@ -35,16 +34,14 @@ exports.assertIsNumber = assertIsNumber;
 /**
  * Throws if any of `values` is not of type number.
  */
-var assertIsNumberArray = function (values, allowNaN) {
-    if (allowNaN === void 0) { allowNaN = false; }
+const assertIsNumberArray = (values, allowNaN = false) => {
     if (typeof values !== 'object') {
         throw new Error('Asserting isNumberArray: Given entity is not an array');
     }
     if (!(0, exports.assertIsNumber)(values['length'])) {
         return false;
     }
-    for (var _i = 0, values_1 = values; _i < values_1.length; _i++) {
-        var value = values_1[_i];
+    for (const value of values) {
         if (!(0, exports.assertIsNumber)(value, allowNaN)) {
             return false;
         }

package/dist/cjs/util/fileToBase64.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var fileToBase64 = function (file, onprogress) {
-    var reader = new FileReader();
-    return new Promise(function (resolve, reject) {
-        reader.onload = function () { return resolve(reader.result); };
+const fileToBase64 = (file, onprogress) => {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        reader.onload = () => resolve(reader.result);
         reader.onerror = reject;
         reader.onabort = reject;
-        reader.onprogress = function (evt) {
-            onprogress === null || onprogress === void 0 ? void 0 : onprogress(evt);
+        reader.onprogress = (evt) => {
+            onprogress?.(evt);
         };
         reader.readAsDataURL(file);
     });

package/dist/cjs/util/guessKeyCodeFromKey.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Attempts to guess the .code value corresponding to the given key.
+ *
+ * Use this to facilitate testing.
+ *
+ * If no matching keycode is found, returns `key`.
+ */
+declare const guessKeyCodeFromKey: (key: string) => string;
+export default guessKeyCodeFromKey;

package/dist/cjs/util/guessKeyCodeFromKey.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// See https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values for
+// more
+const keyToKeyCode = {
+    'Control': 'ControlLeft',
+    '=': 'Equal',
+    '-': 'Minus',
+    ';': 'Semicolon',
+    ' ': 'Space',
+};
+/**
+ * Attempts to guess the .code value corresponding to the given key.
+ *
+ * Use this to facilitate testing.
+ *
+ * If no matching keycode is found, returns `key`.
+ */
+const guessKeyCodeFromKey = (key) => {
+    const upperKey = key.toUpperCase();
+    if ('A' <= upperKey && upperKey <= 'Z') {
+        return `Key${upperKey}`;
+    }
+    if ('0' <= key && key <= '9') {
+        return `Digit${key}`;
+    }
+    if (key in keyToKeyCode) {
+        return keyToKeyCode[key];
+    }
+    return key;
+};
+exports.default = guessKeyCodeFromKey;

package/dist/cjs/util/listPrefixMatch.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns true iff all elements in the shorter list equal (===) the elements
+ * in the longer list.
+ */
+declare const listPrefixMatch: <T>(a: T[], b: T[]) => boolean;
+export default listPrefixMatch;

package/dist/cjs/util/listPrefixMatch.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Returns true iff all elements in the shorter list equal (===) the elements
+ * in the longer list.
+ */
+const listPrefixMatch = (a, b) => {
+    const shorter = a.length < b.length ? a : b;
+    const longer = shorter === a ? b : a;
+    for (let i = 0; i < shorter.length; i++) {
+        if (shorter[i] !== longer[i]) {
+            return false;
+        }
+    }
+    return true;
+};
+exports.default = listPrefixMatch;

package/dist/cjs/util/stopPropagationOfScrollingWheelEvents.d.ts

@@ -0,0 +1,2 @@
+declare const stopPropagationOfScrollingWheelEvents: (scrollingContainer: HTMLElement) => void;
+export default stopPropagationOfScrollingWheelEvents;