js-draw 0.25.1 → 1.0.1

package/dist/cjs/toolbar/widgets/layout/DropdownLayoutManager.js

@@ -0,0 +1,199 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const types_1 = require("../../../types");
+const EventDispatcher_1 = __importDefault(require("../../../EventDispatcher"));
+const constants_1 = require("../../constants");
+const ReactiveValue_1 = require("../../../util/ReactiveValue");
+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_1.ReactiveValue.fromInitialValue(false);
+        this.dropdownContainer = document.createElement('div');
+        this.dropdownContainer.classList.add(`${constants_1.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();
+    }
+}
+class DropdownLayoutManager {
+    constructor(announceForAccessibility, localization) {
+        this.localization = localization;
+        this.dropdowns = new Set();
+        this.listeners = [];
+        this.connectedNotifiers = [];
+        this.notifier = new EventDispatcher_1.default();
+        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(types_1.EditorEventType.ToolbarDropdownShown, {
+                    kind: types_1.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(types_1.EditorEventType.ToolbarDropdownShown, (evt) => {
+                    if (evt.kind !== types_1.EditorEventType.ToolbarDropdownShown
+                        // Don't forward to ourselves events that we originally triggered.
+                        || evt.layoutManager === this) {
+                        return;
+                    }
+                    this.notifier.dispatch(DropdownEventType.DropdownShown, {
+                        fromToplevelDropdown: evt.fromToplevelDropdown,
+                    });
+                });
+            });
+        }
+    }
+}
+exports.default = DropdownLayoutManager;

package/dist/cjs/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/cjs/toolbar/widgets/layout/EdgeToolbarLayoutManager.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ReactiveValue_1 = require("../../../util/ReactiveValue");
+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_1.ReactiveValue.fromInitialValue(null);
+    }
+    /** Creates a dropdown within `parent`. */
+    createToolMenu(parent) {
+        const contentElem = document.createElement('div');
+        let result = null;
+        const visible = ReactiveValue_1.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;
+    }
+}
+exports.default = EdgeToolbarLayoutManager;

package/dist/cjs/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/cjs/toolbar/widgets/layout/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/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/cjs/toolbar/widgets/lib.js

@@ -1,23 +1,27 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DocumentPropertiesWidget = exports.InsertImageWidget = exports.EraserToolWidget = exports.SelectionToolWidget = exports.HandToolWidget = exports.TextToolWidget = exports.PenToolWidget = exports.BaseWidget = exports.BaseToolWidget = exports.ActionButtonWidget = void 0;
+exports.DocumentPropertiesWidget = exports.InsertImageWidget = exports.EraserToolWidget = exports.SelectionToolWidget = exports.HandToolWidget = exports.TextToolWidget = exports.PenToolWidget = exports.ToolbarWidgetTag = exports.BaseWidget = exports.BaseToolWidget = exports.ActionButtonWidget = void 0;
 var ActionButtonWidget_1 = require("./ActionButtonWidget");
-Object.defineProperty(exports, "ActionButtonWidget", { enumerable: true, get: function () { return ActionButtonWidget_1.default; } });
+Object.defineProperty(exports, "ActionButtonWidget", { enumerable: true, get: function () { return __importDefault(ActionButtonWidget_1).default; } });
 var BaseToolWidget_1 = require("./BaseToolWidget");
-Object.defineProperty(exports, "BaseToolWidget", { enumerable: true, get: function () { return BaseToolWidget_1.default; } });
+Object.defineProperty(exports, "BaseToolWidget", { enumerable: true, get: function () { return __importDefault(BaseToolWidget_1).default; } });
 var BaseWidget_1 = require("./BaseWidget");
-Object.defineProperty(exports, "BaseWidget", { enumerable: true, get: function () { return BaseWidget_1.default; } });
+Object.defineProperty(exports, "BaseWidget", { enumerable: true, get: function () { return __importDefault(BaseWidget_1).default; } });
+Object.defineProperty(exports, "ToolbarWidgetTag", { enumerable: true, get: function () { return BaseWidget_1.ToolbarWidgetTag; } });
 var PenToolWidget_1 = require("./PenToolWidget");
-Object.defineProperty(exports, "PenToolWidget", { enumerable: true, get: function () { return PenToolWidget_1.default; } });
+Object.defineProperty(exports, "PenToolWidget", { enumerable: true, get: function () { return __importDefault(PenToolWidget_1).default; } });
 var TextToolWidget_1 = require("./TextToolWidget");
-Object.defineProperty(exports, "TextToolWidget", { enumerable: true, get: function () { return TextToolWidget_1.default; } });
+Object.defineProperty(exports, "TextToolWidget", { enumerable: true, get: function () { return __importDefault(TextToolWidget_1).default; } });
 var HandToolWidget_1 = require("./HandToolWidget");
-Object.defineProperty(exports, "HandToolWidget", { enumerable: true, get: function () { return HandToolWidget_1.default; } });
+Object.defineProperty(exports, "HandToolWidget", { enumerable: true, get: function () { return __importDefault(HandToolWidget_1).default; } });
 var SelectionToolWidget_1 = require("./SelectionToolWidget");
-Object.defineProperty(exports, "SelectionToolWidget", { enumerable: true, get: function () { return SelectionToolWidget_1.default; } });
+Object.defineProperty(exports, "SelectionToolWidget", { enumerable: true, get: function () { return __importDefault(SelectionToolWidget_1).default; } });
 var EraserToolWidget_1 = require("./EraserToolWidget");
-Object.defineProperty(exports, "EraserToolWidget", { enumerable: true, get: function () { return EraserToolWidget_1.default; } });
+Object.defineProperty(exports, "EraserToolWidget", { enumerable: true, get: function () { return __importDefault(EraserToolWidget_1).default; } });
 var InsertImageWidget_1 = require("./InsertImageWidget");
-Object.defineProperty(exports, "InsertImageWidget", { enumerable: true, get: function () { return InsertImageWidget_1.default; } });
+Object.defineProperty(exports, "InsertImageWidget", { enumerable: true, get: function () { return __importDefault(InsertImageWidget_1).default; } });
 var DocumentPropertiesWidget_1 = require("./DocumentPropertiesWidget");
-Object.defineProperty(exports, "DocumentPropertiesWidget", { enumerable: true, get: function () { return DocumentPropertiesWidget_1.default; } });
+Object.defineProperty(exports, "DocumentPropertiesWidget", { enumerable: true, get: function () { return __importDefault(DocumentPropertiesWidget_1).default; } });

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