js-draw 0.25.1 → 1.0.0

package/dist/mjs/toolbar/widgets/BaseWidget.mjs

@@ -9,45 +9,89 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _BaseWidget_hasDropdown;
+var _BaseWidget_hasDropdown, _BaseWidget_tags;
 import  ToolbarShortcutHandler  from '../../tools/ToolbarShortcutHandler.mjs';
-import  { EditorEventType, InputEvtType }  from '../../types.mjs';
-import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
-var BaseWidget = /** @class */ (function () {
-    function BaseWidget(editor, id, localizationTable) {
-        var _this = this;
+import  { keyPressEventFromHTMLEvent, keyUpEventFromHTMLEvent }  from '../../inputEvents.mjs';
+import  { toolbarCSSPrefix }  from '../constants.mjs';
+import  DropdownLayoutManager  from './layout/DropdownLayoutManager.mjs';
+/**
+ * A set of labels that allow toolbar themes to treat buttons differently.
+ */
+export var ToolbarWidgetTag;
+(function (ToolbarWidgetTag) {
+    ToolbarWidgetTag["Save"] = "save";
+    ToolbarWidgetTag["Exit"] = "exit";
+    ToolbarWidgetTag["Undo"] = "undo";
+    ToolbarWidgetTag["Redo"] = "redo";
+})(ToolbarWidgetTag || (ToolbarWidgetTag = {}));
+class BaseWidget {
+    constructor(editor, id, localizationTable) {
         this.editor = editor;
         this.id = id;
+        this.dropdown = null;
         _BaseWidget_hasDropdown.set(this, void 0);
         this.disabled = false;
+        _BaseWidget_tags.set(this, []);
         // Maps subWidget IDs to subWidgets.
         this.subWidgets = {};
         this.toplevel = true;
-        this.toolbarWidgetToggleListener = null;
-        this.hideDropdownTimeout = null;
-        this.localizationTable = localizationTable !== null && localizationTable !== void 0 ? localizationTable : editor.localization;
+        this.localizationTable = localizationTable ?? editor.localization;
+        // Default layout manager
+        const defaultLayoutManager = new DropdownLayoutManager((text) => this.editor.announceForAccessibility(text), this.localizationTable);
+        defaultLayoutManager.connectToEditorNotifier(editor.notifier);
+        this.layoutManager = defaultLayoutManager;
         this.icon = null;
         this.container = document.createElement('div');
-        this.container.classList.add("".concat(toolbarCSSPrefix, "toolContainer"));
-        this.dropdownContainer = document.createElement('div');
-        this.dropdownContainer.classList.add("".concat(toolbarCSSPrefix, "dropdown"));
-        this.dropdownContainer.classList.add('hidden');
+        this.container.classList.add(`${toolbarCSSPrefix}toolContainer`, `${toolbarCSSPrefix}toolButtonContainer`);
+        this.dropdownContent = document.createElement('div');
         __classPrivateFieldSet(this, _BaseWidget_hasDropdown, false, "f");
         this.button = document.createElement('div');
-        this.button.classList.add("".concat(toolbarCSSPrefix, "button"));
+        this.button.classList.add(`${toolbarCSSPrefix}button`);
         this.label = document.createElement('label');
         this.button.setAttribute('role', 'button');
         this.button.tabIndex = 0;
-        var toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler);
+        const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler);
         // If the onKeyPress function has been extended and the editor is configured to send keypress events to
         // toolbar widgets,
         if (toolbarShortcutHandlers.length > 0 && this.onKeyPress !== BaseWidget.prototype.onKeyPress) {
-            toolbarShortcutHandlers[0].registerListener(function (event) { return _this.onKeyPress(event); });
+            toolbarShortcutHandlers[0].registerListener(event => this.onKeyPress(event));
         }
     }
-    BaseWidget.prototype.getId = function () {
+    getId() {
         return this.id;
-    };
+    }
+    /**
+     * Note: Tags should be set *before* a tool widget is added to a toolbar.
+     *
+     *
+     * Associates tags with this widget that can be used by toolbar themes
+     * to customize the layout/appearance of this button. Prefer tags in
+     * the `ToolbarWidgetTag` enum, where possible.
+     *
+     * In addition to being readable from the {@link getTags} method, tags are
+     * added to a button's main container as CSS classes with the `toolwidget-tag--` prefix.
+     *
+     * For example, the `undo` tag would result in `toolwidget-tag--undo`
+     * being added to the button's container's class list.
+     *
+     */
+    setTags(tags) {
+        const toClassName = (tag) => {
+            return `toolwidget-tag--${tag}`;
+        };
+        // Remove CSS classes associated with old tags
+        for (const tag of __classPrivateFieldGet(this, _BaseWidget_tags, "f")) {
+            this.container.classList.remove(toClassName(tag));
+        }
+        __classPrivateFieldSet(this, _BaseWidget_tags, [...tags], "f");
+        // Add new CSS classes
+        for (const tag of __classPrivateFieldGet(this, _BaseWidget_tags, "f")) {
+            this.container.classList.add(toClassName(tag));
+        }
+    }
+    getTags() {
+        return [...__classPrivateFieldGet(this, _BaseWidget_tags, "f")];
+    }
     /**
      * Returns the ID of this widget in `container`. Adds a suffix to this' ID
      * if an item in `container` already has this' ID.
@@ -56,104 +100,110 @@ var BaseWidget = /** @class */ (function () {
      * `container = { 'foo': somethingNotThis, 'foo-1': somethingElseNotThis }`, this method
      * returns `foo-2` because elements with IDs `foo` and `foo-1` are already present in
      * `container`.
+     *
+     * If `this` is already in `container`, returns the id given to `this` in the container.
      */
-    BaseWidget.prototype.getUniqueIdIn = function (container) {
-        var id = this.getId();
-        var idCounter = 0;
+    getUniqueIdIn(container) {
+        let id = this.getId();
+        let idCounter = 0;
         while (id in container && container[id] !== this) {
             id = this.getId() + '-' + idCounter.toString();
             idCounter++;
         }
         return id;
-    };
+    }
     // Add content to the widget's associated dropdown menu.
     // Returns true if such a menu should be created, false otherwise.
-    BaseWidget.prototype.fillDropdown = function (dropdown) {
+    fillDropdown(dropdown) {
         if (Object.keys(this.subWidgets).length === 0) {
             return false;
         }
-        for (var widgetId in this.subWidgets) {
-            var widget = this.subWidgets[widgetId];
+        for (const widgetId in this.subWidgets) {
+            const widget = this.subWidgets[widgetId];
             widget.addTo(dropdown);
             widget.setIsToplevel(false);
         }
         return true;
-    };
-    BaseWidget.prototype.setupActionBtnClickListener = function (button) {
-        var _this = this;
-        var clickTriggers = { Enter: true, ' ': true, };
-        button.onkeydown = function (evt) {
-            var handled = false;
+    }
+    /** @deprecated Renamed to `setUpButtonEventListeners`. */
+    setupActionBtnClickListener(button) {
+        return this.setUpButtonEventListeners(button);
+    }
+    setUpButtonEventListeners(button) {
+        const clickTriggers = { Enter: true, ' ': true, };
+        button.onkeydown = (evt) => {
+            let handled = false;
             if (evt.key in clickTriggers) {
-                if (!_this.disabled) {
-                    _this.handleClick();
+                if (!this.disabled) {
+                    this.handleClick();
                     handled = true;
                 }
             }
             // If we didn't do anything with the event, send it to the editor.
             if (!handled) {
-                handled = _this.editor.toolController.dispatchInputEvent({
-                    kind: InputEvtType.KeyPressEvent,
-                    key: evt.key,
-                    ctrlKey: evt.ctrlKey || evt.metaKey,
-                    altKey: evt.altKey,
-                });
+                const editorEvent = keyPressEventFromHTMLEvent(evt);
+                handled = this.editor.toolController.dispatchInputEvent(editorEvent);
             }
             if (handled) {
                 evt.preventDefault();
             }
         };
-        button.onkeyup = function (evt) {
-            if (evt.key in clickTriggers) {
+        button.onkeyup = htmlEvent => {
+            if (htmlEvent.key in clickTriggers) {
                 return;
             }
-            var handled = _this.editor.toolController.dispatchInputEvent({
-                kind: InputEvtType.KeyUpEvent,
-                key: evt.key,
-                ctrlKey: evt.ctrlKey || evt.metaKey,
-                altKey: evt.altKey,
-            });
+            const event = keyUpEventFromHTMLEvent(htmlEvent);
+            const handled = this.editor.toolController.dispatchInputEvent(event);
             if (handled) {
-                evt.preventDefault();
+                htmlEvent.preventDefault();
             }
         };
-        button.onclick = function () {
-            if (!_this.disabled) {
-                _this.handleClick();
+        button.onclick = () => {
+            if (!this.disabled) {
+                this.handleClick();
             }
         };
-    };
+        // Prevent double-click zoom on some devices.
+        button.ondblclick = event => {
+            event.preventDefault();
+        };
+    }
     // Add a listener that is triggered when a key is pressed.
     // Listeners will fire regardless of whether this widget is selected and require that
     // {@link Editor.toolController} to have an enabled {@link ToolbarShortcutHandler} tool.
-    BaseWidget.prototype.onKeyPress = function (_event) {
+    onKeyPress(_event) {
         return false;
-    };
-    Object.defineProperty(BaseWidget.prototype, "hasDropdown", {
-        get: function () {
-            return __classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f");
-        },
-        enumerable: false,
-        configurable: true
-    });
+    }
+    get hasDropdown() {
+        return __classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f");
+    }
     // Add a widget to this' dropdown. Must be called before this.addTo.
-    BaseWidget.prototype.addSubWidget = function (widget) {
+    addSubWidget(widget) {
         // Generate a unique ID for the widget.
-        var id = widget.getUniqueIdIn(this.subWidgets);
+        const id = widget.getUniqueIdIn(this.subWidgets);
         this.subWidgets[id] = widget;
-    };
+    }
+    setLayoutManager(manager) {
+        if (manager === this.layoutManager) {
+            return;
+        }
+        this.layoutManager = manager;
+        if (this.container.parentElement) {
+            // Trigger a re-creation of this' content
+            this.addTo(this.container.parentElement);
+        }
+    }
     /**
      * Adds this to `parent`.
      * Returns the element that was just added to `parent`.
      * @internal
      */
-    BaseWidget.prototype.addTo = function (parent) {
-        var _this = this;
+    addTo(parent) {
         // Update title and icon
         this.icon = null;
         this.updateIcon();
         this.label.innerText = this.getTitle();
-        var longLabelCSSClass = 'long-label';
+        const longLabelCSSClass = 'long-label';
         if (this.label.innerText.length > 7) {
             this.label.classList.add(longLabelCSSClass);
         }
@@ -161,31 +211,41 @@ var BaseWidget = /** @class */ (function () {
             this.label.classList.remove(longLabelCSSClass);
         }
         // Click functionality
-        this.setupActionBtnClickListener(this.button);
+        this.setUpButtonEventListeners(this.button);
         // Clear anything already in this.container.
         this.container.replaceChildren();
         this.button.replaceChildren(this.icon, this.label);
         this.container.appendChild(this.button);
         // Clear the dropdownContainer in case this element is being moved to another
         // parent.
-        this.dropdownContainer.replaceChildren();
-        __classPrivateFieldSet(this, _BaseWidget_hasDropdown, this.fillDropdown(this.dropdownContainer), "f");
+        this.dropdownContent.replaceChildren();
+        __classPrivateFieldSet(this, _BaseWidget_hasDropdown, this.fillDropdown(this.dropdownContent), "f");
         if (__classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f")) {
+            this.button.classList.add('has-dropdown');
+            // We're re-creating the dropdown.
+            this.dropdown?.destroy();
             this.dropdownIcon = this.createDropdownIcon();
             this.button.appendChild(this.dropdownIcon);
-            this.container.appendChild(this.dropdownContainer);
-            if (this.toolbarWidgetToggleListener) {
-                this.toolbarWidgetToggleListener.remove();
-            }
-            this.toolbarWidgetToggleListener = this.editor.notifier.on(EditorEventType.ToolbarDropdownShown, function (evt) {
-                if (evt.kind === EditorEventType.ToolbarDropdownShown
-                    && evt.parentWidget !== _this
-                    // Don't hide if a submenu wash shown (it might be a submenu of
-                    // the current menu).
-                    && evt.parentWidget.toplevel) {
-                    _this.setDropdownVisible(false);
+            this.dropdown = this.layoutManager.createToolMenu({
+                target: this.button,
+                getTitle: () => this.getTitle(),
+                isToplevel: () => this.toplevel,
+            });
+            this.dropdown.visible.onUpdate(visible => {
+                if (visible) {
+                    this.container.classList.add('dropdownVisible');
+                }
+                else {
+                    this.container.classList.remove('dropdownVisible');
+                }
+                // Auto-focus this component's button when the dropdown hides --
+                // this ensures that keyboard focus goes to a reasonable location when
+                // the user closes a menu.
+                if (!visible) {
+                    this.focus();
                 }
             });
+            this.dropdown.appendChild(this.dropdownContent);
         }
         this.setDropdownVisible(false);
         if (this.container.parentElement) {
@@ -193,20 +253,36 @@ var BaseWidget = /** @class */ (function () {
         }
         parent.appendChild(this.container);
         return this.container;
-    };
-    BaseWidget.prototype.updateIcon = function () {
-        var _a, _b;
-        var newIcon = this.createIcon();
-        if (newIcon) {
-            (_a = this.icon) === null || _a === void 0 ? void 0 : _a.replaceWith(newIcon);
-            this.icon = newIcon;
-            this.icon.classList.add("".concat(toolbarCSSPrefix, "icon"));
+    }
+    focus() {
+        this.button.focus();
+    }
+    /**
+     * @internal
+     */
+    addCSSClassToContainer(className) {
+        this.container.classList.add(className);
+    }
+    removeCSSClassFromContainer(className) {
+        this.container.classList.remove(className);
+    }
+    remove() {
+        this.container.remove();
+    }
+    updateIcon() {
+        let newIcon = this.createIcon();
+        if (!newIcon) {
+            newIcon = document.createElement('div');
+            this.container.classList.add('no-icon');
         }
         else {
-            (_b = this.icon) === null || _b === void 0 ? void 0 : _b.remove();
+            this.container.classList.remove('no-icon');
         }
-    };
-    BaseWidget.prototype.setDisabled = function (disabled) {
+        this.icon?.replaceWith(newIcon);
+        this.icon = newIcon;
+        this.icon.classList.add(`${toolbarCSSPrefix}icon`);
+    }
+    setDisabled(disabled) {
         this.disabled = disabled;
         if (this.disabled) {
             this.button.classList.add('disabled');
@@ -216,9 +292,9 @@ var BaseWidget = /** @class */ (function () {
             this.button.classList.remove('disabled');
             this.button.removeAttribute('aria-disabled');
         }
-    };
-    BaseWidget.prototype.setSelected = function (selected) {
-        var currentlySelected = this.isSelected();
+    }
+    setSelected(selected) {
+        const currentlySelected = this.isSelected();
         if (currentlySelected === selected) {
             return;
         }
@@ -235,87 +311,63 @@ var BaseWidget = /** @class */ (function () {
             this.container.classList.remove('selected');
             this.button.setAttribute('aria-checked', 'false');
         }
-    };
-    BaseWidget.prototype.setDropdownVisible = function (visible) {
-        var _this = this;
-        var currentlyVisible = this.container.classList.contains('dropdownVisible');
-        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();
-        }
-        var animationDuration = 150; // ms
+    }
+    setDropdownVisible(visible) {
         if (visible) {
-            this.dropdownContainer.classList.remove('hidden');
-            this.container.classList.add('dropdownVisible');
-            this.editor.announceForAccessibility(this.localizationTable.dropdownShown(this.getTitle()));
-            this.editor.notifier.dispatch(EditorEventType.ToolbarDropdownShown, {
-                kind: EditorEventType.ToolbarDropdownShown,
-                parentWidget: this,
-            });
-            this.repositionDropdown();
+            this.dropdown?.requestShow();
         }
         else {
-            this.container.classList.remove('dropdownVisible');
-            this.editor.announceForAccessibility(this.localizationTable.dropdownHidden(this.getTitle()));
-            this.dropdownContainer.classList.add('hiding');
-            // Hide the dropdown *slightly* before the animation finishes. This
-            // prevents flickering in some browsers.
-            var hideDelay = animationDuration * 0.95;
-            this.hideDropdownTimeout = setTimeout(function () {
-                _this.dropdownContainer.classList.add('hidden');
-                _this.dropdownContainer.classList.remove('hiding');
-                _this.repositionDropdown();
-            }, hideDelay);
+            this.dropdown?.requestHide();
         }
-        // Animate
-        var animationName = "var(--dropdown-".concat(visible ? 'show' : 'hide', "-animation)");
-        this.dropdownContainer.style.animation = "".concat(animationDuration, "ms ease ").concat(animationName);
-    };
-    BaseWidget.prototype.canBeInOverflowMenu = function () {
-        return true;
-    };
-    BaseWidget.prototype.getButtonWidth = function () {
+    }
+    /**
+     * Only used by some layout managers.
+     * In those layout managers, makes this dropdown visible.
+     */
+    activateDropdown() {
+        this.dropdown?.onActivated();
+    }
+    /**
+     * Returns `true` if this widget must always be in a toplevel menu and not
+     * in a scrolling/overflow menu.
+     *
+     * This method can be overidden to override the default of `true`.
+     */
+    mustBeInToplevelMenu() {
+        return false;
+    }
+    /**
+     * Returns true iff this widget can be in a nontoplevel menu.
+     *
+     * @deprecated Use `!mustBeInToplevelMenu()` instead.
+     */
+    canBeInOverflowMenu() {
+        return !this.mustBeInToplevelMenu();
+    }
+    getButtonWidth() {
         return this.button.clientWidth;
-    };
-    BaseWidget.prototype.isHidden = function () {
+    }
+    isHidden() {
         return this.container.style.display === 'none';
-    };
-    BaseWidget.prototype.setHidden = function (hidden) {
+    }
+    setHidden(hidden) {
         this.container.style.display = hidden ? 'none' : '';
-    };
-    BaseWidget.prototype.repositionDropdown = function () {
-        var dropdownBBox = this.dropdownContainer.getBoundingClientRect();
-        var screenWidth = document.body.clientWidth;
-        if (dropdownBBox.left > screenWidth / 2) {
-            // Use .translate so as not to conflict with CSS animating the
-            // transform property.
-            this.dropdownContainer.style.translate = "calc(".concat(this.button.clientWidth + 'px', " - 100%) 0");
-        }
-        else {
-            this.dropdownContainer.style.translate = '';
-        }
-    };
+    }
     /** Set whether the widget is contained within another. @internal */
-    BaseWidget.prototype.setIsToplevel = function (toplevel) {
+    setIsToplevel(toplevel) {
         this.toplevel = toplevel;
-    };
-    BaseWidget.prototype.isDropdownVisible = function () {
-        return !this.dropdownContainer.classList.contains('hidden');
-    };
-    BaseWidget.prototype.isSelected = function () {
+    }
+    isDropdownVisible() {
+        return this.dropdown?.visible?.get() ?? false;
+    }
+    isSelected() {
         return this.container.classList.contains('selected');
-    };
-    BaseWidget.prototype.createDropdownIcon = function () {
-        var icon = this.editor.icons.makeDropdownIcon();
-        icon.classList.add("".concat(toolbarCSSPrefix, "showHideDropdownIcon"));
+    }
+    createDropdownIcon() {
+        const icon = this.editor.icons.makeDropdownIcon();
+        icon.classList.add(`${toolbarCSSPrefix}showHideDropdownIcon`);
         return icon;
-    };
+    }
     /**
      * Serialize state associated with this widget.
      * Override this method to allow saving/restoring from state on application load.
@@ -326,32 +378,31 @@ var BaseWidget = /** @class */ (function () {
      * Clients should not rely on the output from `saveState` being in any particular
      * format.
      */
-    BaseWidget.prototype.serializeState = function () {
-        var subwidgetState = {};
+    serializeState() {
+        const subwidgetState = {};
         // Save all subwidget state.
-        for (var subwidgetId in this.subWidgets) {
+        for (const subwidgetId in this.subWidgets) {
             subwidgetState[subwidgetId] = this.subWidgets[subwidgetId].serializeState();
         }
         return {
-            subwidgetState: subwidgetState,
+            subwidgetState,
         };
-    };
+    }
     /**
      * Restore widget state from serialized data. See also `saveState`.
      *
      * Overriders must call `super`.
      */
-    BaseWidget.prototype.deserializeFrom = function (state) {
+    deserializeFrom(state) {
         if (state.subwidgetState) {
             // Deserialize all subwidgets.
-            for (var subwidgetId in state.subwidgetState) {
+            for (const subwidgetId in state.subwidgetState) {
                 if (subwidgetId in this.subWidgets) {
                     this.subWidgets[subwidgetId].deserializeFrom(state.subwidgetState[subwidgetId]);
                 }
             }
         }
-    };
-    return BaseWidget;
-}());
-_BaseWidget_hasDropdown = new WeakMap();
+    }
+}
+_BaseWidget_hasDropdown = new WeakMap(), _BaseWidget_tags = new WeakMap();
 export default BaseWidget;