js-draw 0.25.1 → 1.0.0

package/dist/cjs/toolbar/AbstractToolbar.js

@@ -0,0 +1,410 @@
+"use strict";
+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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _AbstractToolbar_listeners, _AbstractToolbar_widgetsById, _AbstractToolbar_widgetList, _AbstractToolbar_updateColoris;
+Object.defineProperty(exports, "__esModule", { value: true });
+const types_1 = require("../types");
+const coloris_1 = require("@melloware/coloris");
+const localization_1 = require("./localization");
+const SelectionTool_1 = __importDefault(require("../tools/SelectionTool/SelectionTool"));
+const PanZoom_1 = __importDefault(require("../tools/PanZoom"));
+const TextTool_1 = __importDefault(require("../tools/TextTool"));
+const Eraser_1 = __importDefault(require("../tools/Eraser"));
+const Pen_1 = __importDefault(require("../tools/Pen"));
+const PenToolWidget_1 = __importDefault(require("./widgets/PenToolWidget"));
+const EraserToolWidget_1 = __importDefault(require("./widgets/EraserToolWidget"));
+const SelectionToolWidget_1 = __importDefault(require("./widgets/SelectionToolWidget"));
+const TextToolWidget_1 = __importDefault(require("./widgets/TextToolWidget"));
+const HandToolWidget_1 = __importDefault(require("./widgets/HandToolWidget"));
+const BaseWidget_1 = require("./widgets/BaseWidget");
+const ActionButtonWidget_1 = __importDefault(require("./widgets/ActionButtonWidget"));
+const InsertImageWidget_1 = __importDefault(require("./widgets/InsertImageWidget"));
+const DocumentPropertiesWidget_1 = __importDefault(require("./widgets/DocumentPropertiesWidget"));
+const math_1 = require("@js-draw/math");
+const constants_1 = require("./constants");
+class AbstractToolbar {
+    /** @internal */
+    constructor(editor, localizationTable = localization_1.defaultToolbarLocalization) {
+        this.editor = editor;
+        this.localizationTable = localizationTable;
+        _AbstractToolbar_listeners.set(this, []);
+        _AbstractToolbar_widgetsById.set(this, {});
+        _AbstractToolbar_widgetList.set(this, []);
+        _AbstractToolbar_updateColoris.set(this, null);
+        this.closeColorPickerOverlay = null;
+        if (!AbstractToolbar.colorisStarted) {
+            (0, coloris_1.init)();
+            AbstractToolbar.colorisStarted = true;
+        }
+        this.setupColorPickers();
+    }
+    setupCloseColorPickerOverlay() {
+        if (this.closeColorPickerOverlay)
+            return;
+        this.closeColorPickerOverlay = document.createElement('div');
+        this.closeColorPickerOverlay.className = `${constants_1.toolbarCSSPrefix}closeColorPickerOverlay`;
+        this.editor.createHTMLOverlay(this.closeColorPickerOverlay);
+        // Hide the color picker when attempting to draw on the overlay.
+        __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f").push(this.editor.handlePointerEventsExceptClicksFrom(this.closeColorPickerOverlay, (eventName) => {
+            if (eventName === 'pointerdown') {
+                (0, coloris_1.close)();
+            }
+            // Transfer focus to the editor to allow keyboard events to be handled.
+            if (eventName === 'pointerup') {
+                this.editor.focus();
+            }
+            // Send the event to the editor
+            return true;
+        }));
+    }
+    // @internal
+    setupColorPickers() {
+        // Much of the setup only needs to be done once.
+        if (__classPrivateFieldGet(this, _AbstractToolbar_updateColoris, "f")) {
+            __classPrivateFieldGet(this, _AbstractToolbar_updateColoris, "f").call(this);
+            return;
+        }
+        this.setupCloseColorPickerOverlay();
+        const maxSwatchLen = 12;
+        const swatches = [
+            math_1.Color4.red.toHexString(),
+            math_1.Color4.purple.toHexString(),
+            math_1.Color4.blue.toHexString(),
+            math_1.Color4.clay.toHexString(),
+            math_1.Color4.black.toHexString(),
+            math_1.Color4.white.toHexString(),
+        ];
+        const presetColorEnd = swatches.length;
+        // Keeps track of whether a Coloris initialization is scheduled.
+        let colorisInitScheduled = false;
+        // (Re)init Coloris -- update the swatches list.
+        const initColoris = () => {
+            try {
+                (0, coloris_1.coloris)({
+                    el: '.coloris_input',
+                    format: 'hex',
+                    selectInput: false,
+                    focusInput: false,
+                    themeMode: 'auto',
+                    swatches,
+                });
+            }
+            catch (err) {
+                console.warn('Failed to initialize Coloris. Error: ', err);
+                // Try again --- a known issue is that Coloris fails to load if the document
+                // isn't ready.
+                if (!colorisInitScheduled) {
+                    colorisInitScheduled = true;
+                    // Wait to initialize after the document has loaded
+                    document.addEventListener('load', () => {
+                        initColoris();
+                    }, { once: true });
+                }
+            }
+        };
+        initColoris();
+        __classPrivateFieldSet(this, _AbstractToolbar_updateColoris, initColoris, "f");
+        const addColorToSwatch = (newColor) => {
+            let alreadyPresent = false;
+            for (const color of swatches) {
+                if (color === newColor) {
+                    alreadyPresent = true;
+                }
+            }
+            if (!alreadyPresent) {
+                swatches.push(newColor);
+                if (swatches.length > maxSwatchLen) {
+                    swatches.splice(presetColorEnd, 1);
+                }
+                initColoris();
+            }
+        };
+        __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f").push(this.editor.notifier.on(types_1.EditorEventType.ColorPickerToggled, event => {
+            if (event.kind !== types_1.EditorEventType.ColorPickerToggled) {
+                return;
+            }
+            // Show/hide the overlay. Making the overlay visible gives users a surface to click
+            // on that shows/hides the color picker.
+            if (this.closeColorPickerOverlay) {
+                this.closeColorPickerOverlay.style.display = event.open ? 'block' : 'none';
+            }
+        }));
+        // Add newly-selected colors to the swatch.
+        __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f").push(this.editor.notifier.on(types_1.EditorEventType.ColorPickerColorSelected, event => {
+            if (event.kind === types_1.EditorEventType.ColorPickerColorSelected) {
+                addColorToSwatch(event.color.toHexString());
+            }
+        }));
+    }
+    closeColorPickers() {
+        (0, coloris_1.close)?.();
+    }
+    getWidgetUniqueId(widget) {
+        return widget.getUniqueIdIn(__classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f"));
+    }
+    getWidgetFromId(id) {
+        return __classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f")[id];
+    }
+    /** Do **not** modify the return value. */
+    getAllWidgets() {
+        return __classPrivateFieldGet(this, _AbstractToolbar_widgetList, "f");
+    }
+    /**
+     * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
+     * (i.e. its `addTo` method should not have been called).
+     *
+     * @example
+     * ```ts
+     * const toolbar = editor.addToolbar();
+     * const insertImageWidget = new InsertImageWidget(editor);
+     * toolbar.addWidget(insertImageWidget);
+     * ```
+     */
+    addWidget(widget) {
+        // Prevent name collisions
+        const id = widget.getUniqueIdIn(__classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f"));
+        // Add the widget
+        __classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f")[id] = widget;
+        __classPrivateFieldGet(this, _AbstractToolbar_widgetList, "f").push(widget);
+        this.addWidgetInternal(widget);
+        this.setupColorPickers();
+    }
+    /** Removes the given `widget` from this toolbar. */
+    removeWidget(widget) {
+        const id = widget.getUniqueIdIn(__classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f"));
+        this.removeWidgetInternal(widget);
+        delete __classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f")[id];
+        __classPrivateFieldSet(this, _AbstractToolbar_widgetList, __classPrivateFieldGet(this, _AbstractToolbar_widgetList, "f").filter(otherWidget => otherWidget !== widget), "f");
+    }
+    /** Returns a snapshot of the state of widgets in the toolbar. */
+    serializeState() {
+        const result = {};
+        for (const widgetId in __classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f")) {
+            result[widgetId] = __classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f")[widgetId].serializeState();
+        }
+        result[AbstractToolbar.rootToolbarId] = this.serializeInternal();
+        return JSON.stringify(result);
+    }
+    /**
+     * Deserialize toolbar widgets from the given state.
+     * Assumes that toolbar widgets are in the same order as when state was serialized.
+     */
+    deserializeState(state) {
+        const data = JSON.parse(state);
+        const rootId = AbstractToolbar.rootToolbarId;
+        this.deserializeInternal(data[rootId]);
+        for (const widgetId in data) {
+            if (widgetId === rootId) {
+                continue;
+            }
+            if (!(widgetId in __classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f"))) {
+                console.warn(`Unable to deserialize widget ${widgetId} ­— no such widget.`);
+                continue;
+            }
+            __classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f")[widgetId].deserializeFrom(data[widgetId]);
+        }
+    }
+    /**
+     * Called by `serializeState` to attach any additional JSONifyable data
+     * to the serialized result.
+     *
+     * @reutrns an object that can be converted to JSON with `JSON.stringify`.
+     */
+    serializeInternal() { }
+    /**
+     * Called by `deserializeState` with a version of the JSON outputted
+     * previously by `serializeInternal`.
+     */
+    deserializeInternal(_json) { }
+    /**
+     * Creates, but does not add, an action button to this container.
+     *
+     * @see
+     * {@link addActionButton}
+     */
+    makeActionButton(title, command, mustBeToplevel = true) {
+        const titleString = typeof title === 'string' ? title : title.label;
+        const widgetId = 'action-button';
+        const makeIcon = () => {
+            if (typeof title === 'string') {
+                return null;
+            }
+            return title.icon;
+        };
+        const widget = new ActionButtonWidget_1.default(this.editor, widgetId, makeIcon, titleString, command, this.editor.localization, mustBeToplevel);
+        return widget;
+    }
+    /**
+     * Adds an action button with `title` to this toolbar (or to the given `parent` element).
+     *
+     * @return The added button.
+     */
+    addActionButton(title, command, mustBeToplevel = true) {
+        const widget = this.makeActionButton(title, command, mustBeToplevel);
+        this.addWidget(widget);
+        return widget;
+    }
+    /**
+     * Like {@link addActionButton}, except associates `tags` with the button that allow
+     * different toolbar styles to give the button tag-dependent styles.
+     */
+    addTaggedActionButton(tags, title, command, mustBeToplevel = true) {
+        const widget = this.makeActionButton(title, command, mustBeToplevel);
+        widget.setTags(tags);
+        this.addWidget(widget);
+        return widget;
+    }
+    /**
+     * Adds a save button that, when clicked, calls `saveCallback`.
+     *
+     * **Note**: This is equivalent to
+     * ```ts
+     * const tags = [
+     *   ToolbarWidgetTag.Save,
+     * ];
+     * toolbar.addTaggedActionButton(tags, {
+     *   label: editor.localization.save,
+     *   icon: editor.icons.makeSaveIcon(),
+     * }, () => {
+     *   saveCallback();
+     * });
+     * ```
+     *
+     * @final
+     */
+    addSaveButton(saveCallback) {
+        return this.addTaggedActionButton([BaseWidget_1.ToolbarWidgetTag.Save], {
+            label: this.editor.localization.save,
+            icon: this.editor.icons.makeSaveIcon(),
+        }, () => {
+            saveCallback();
+        });
+    }
+    /**
+     * Adds an "Exit" button that, when clicked, calls `exitCallback`.
+     *
+     * **Note**: This is equivalent to
+     * ```ts
+     * toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
+     *   label: this.editor.localization.exit,
+     *   icon: this.editor.icons.makeCloseIcon(),
+     * }, () => {
+     *   exitCallback();
+     * });
+     * ```
+     *
+     * @final
+     */
+    addExitButton(exitCallback) {
+        return this.addTaggedActionButton([BaseWidget_1.ToolbarWidgetTag.Exit], {
+            label: this.editor.localization.exit,
+            icon: this.editor.icons.makeCloseIcon(),
+        }, () => {
+            exitCallback();
+        });
+    }
+    /**
+     * Adds undo and redo buttons that trigger the editor's built-in undo and redo
+     * functionality.
+     */
+    addUndoRedoButtons(undoFirst = true) {
+        const makeUndo = () => {
+            return this.addTaggedActionButton([
+                BaseWidget_1.ToolbarWidgetTag.Undo,
+            ], {
+                label: this.localizationTable.undo,
+                icon: this.editor.icons.makeUndoIcon()
+            }, () => {
+                this.editor.history.undo();
+            });
+        };
+        const makeRedo = () => {
+            return this.addTaggedActionButton([
+                BaseWidget_1.ToolbarWidgetTag.Redo,
+            ], {
+                label: this.localizationTable.redo,
+                icon: this.editor.icons.makeRedoIcon(),
+            }, () => {
+                this.editor.history.redo();
+            });
+        };
+        let undoButton;
+        let redoButton;
+        if (undoFirst) {
+            undoButton = makeUndo();
+            redoButton = makeRedo();
+        }
+        else {
+            redoButton = makeRedo();
+            undoButton = makeUndo();
+        }
+        undoButton.setDisabled(true);
+        redoButton.setDisabled(true);
+        this.editor.notifier.on(types_1.EditorEventType.UndoRedoStackUpdated, event => {
+            if (event.kind !== types_1.EditorEventType.UndoRedoStackUpdated) {
+                throw new Error('Wrong event type!');
+            }
+            undoButton.setDisabled(event.undoStackSize === 0);
+            redoButton.setDisabled(event.redoStackSize === 0);
+        });
+    }
+    /**
+     * Adds toolbar widgets based on the enabled tools.
+     */
+    addDefaultToolWidgets() {
+        const toolController = this.editor.toolController;
+        for (const tool of toolController.getMatchingTools(Pen_1.default)) {
+            const widget = new PenToolWidget_1.default(this.editor, tool, this.localizationTable);
+            this.addWidget(widget);
+        }
+        for (const tool of toolController.getMatchingTools(Eraser_1.default)) {
+            this.addWidget(new EraserToolWidget_1.default(this.editor, tool, this.localizationTable));
+        }
+        for (const tool of toolController.getMatchingTools(SelectionTool_1.default)) {
+            this.addWidget(new SelectionToolWidget_1.default(this.editor, tool, this.localizationTable));
+        }
+        for (const tool of toolController.getMatchingTools(TextTool_1.default)) {
+            this.addWidget(new TextToolWidget_1.default(this.editor, tool, this.localizationTable));
+        }
+        const panZoomTool = toolController.getMatchingTools(PanZoom_1.default)[0];
+        if (panZoomTool) {
+            this.addWidget(new HandToolWidget_1.default(this.editor, panZoomTool, this.localizationTable));
+        }
+        this.addWidget(new DocumentPropertiesWidget_1.default(this.editor, this.localizationTable));
+        this.addWidget(new InsertImageWidget_1.default(this.editor, this.localizationTable));
+    }
+    addDefaultActionButtons() {
+        this.addUndoRedoButtons();
+    }
+    /** Remove this toolbar from its container and clean up listeners. */
+    remove() {
+        this.closeColorPickerOverlay?.remove();
+        for (const listener of __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f")) {
+            listener.remove();
+        }
+        __classPrivateFieldSet(this, _AbstractToolbar_listeners, [], "f");
+        this.onRemove();
+    }
+    /**
+     * Removes `listener` when {@link remove} is called.
+     */
+    manageListener(listener) {
+        __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f").push(listener);
+    }
+}
+_AbstractToolbar_listeners = new WeakMap(), _AbstractToolbar_widgetsById = new WeakMap(), _AbstractToolbar_widgetList = new WeakMap(), _AbstractToolbar_updateColoris = new WeakMap();
+AbstractToolbar.colorisStarted = false;
+AbstractToolbar.rootToolbarId = 'root-toolbar--';
+exports.default = AbstractToolbar;

package/dist/cjs/toolbar/DropdownToolbar.d.ts

@@ -0,0 +1,43 @@
+import Editor from '../Editor';
+import { ToolbarLocalization } from './localization';
+import BaseWidget from './widgets/BaseWidget';
+import AbstractToolbar, { SpacerOptions } from './AbstractToolbar';
+export declare const makeDropdownToolbar: (editor: Editor) => AbstractToolbar;
+export default class DropdownToolbar extends AbstractToolbar {
+    protected container: HTMLElement;
+    private resizeObserver;
+    private widgetOrderCounter;
+    private overflowWidget;
+    /** @internal */
+    constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
+    private reLayoutQueued;
+    private queueReLayout;
+    private reLayout;
+    protected addWidgetInternal(widget: BaseWidget): void;
+    protected removeWidgetInternal(widget: BaseWidget): void;
+    addSpacer(options?: Partial<SpacerOptions>): void;
+    /**
+     * Adds a widget that toggles the overflow menu. Call `addOverflowWidget` to ensure
+     * that this widget is in the correct space (if shown).
+     *
+     * @example
+     * ```ts
+     * toolbar.addDefaultToolWidgets();
+     * toolbar.addOverflowWidget();
+     * toolbar.addDefaultActionButtons();
+     * ```
+     * shows the overflow widget between the default tool widgets and the default action buttons,
+     * if shown.
+     */
+    addOverflowWidget(): void;
+    /**
+     * Adds both the default tool widgets and action buttons. Equivalent to
+     * ```ts
+     * toolbar.addDefaultToolWidgets();
+     * toolbar.addOverflowWidget();
+     * toolbar.addDefaultActionButtons();
+     * ```
+     */
+    addDefaults(): void;
+    protected onRemove(): void;
+}

package/dist/cjs/toolbar/DropdownToolbar.js

@@ -0,0 +1,176 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeDropdownToolbar = void 0;
+const localization_1 = require("./localization");
+const OverflowWidget_1 = __importDefault(require("./widgets/OverflowWidget"));
+const AbstractToolbar_1 = __importDefault(require("./AbstractToolbar"));
+const constants_1 = require("./constants");
+const makeDropdownToolbar = (editor) => {
+    return new DropdownToolbar(editor, editor.getRootElement());
+};
+exports.makeDropdownToolbar = makeDropdownToolbar;
+class DropdownToolbar extends AbstractToolbar_1.default {
+    /** @internal */
+    constructor(editor, parent, localizationTable = localization_1.defaultToolbarLocalization) {
+        super(editor, localizationTable);
+        // Flex-order of the next widget to be added.
+        this.widgetOrderCounter = 0;
+        // Widget to toggle overflow menu.
+        this.overflowWidget = null;
+        this.reLayoutQueued = false;
+        this.container = document.createElement('div');
+        this.container.classList.add(`${constants_1.toolbarCSSPrefix}root`);
+        this.container.classList.add(`${constants_1.toolbarCSSPrefix}element`);
+        this.container.classList.add(`${constants_1.toolbarCSSPrefix}dropdown-toolbar`);
+        this.container.setAttribute('role', 'toolbar');
+        parent.appendChild(this.container);
+        if ('ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver((_entries) => {
+                this.reLayout();
+            });
+            this.resizeObserver.observe(this.container);
+        }
+        else {
+            console.warn('ResizeObserver not supported. Toolbar will not resize.');
+        }
+    }
+    queueReLayout() {
+        if (!this.reLayoutQueued) {
+            this.reLayoutQueued = true;
+            requestAnimationFrame(() => this.reLayout());
+        }
+    }
+    reLayout() {
+        this.reLayoutQueued = false;
+        if (!this.overflowWidget) {
+            return;
+        }
+        const getTotalWidth = (widgetList) => {
+            let totalWidth = 0;
+            for (const widget of widgetList) {
+                if (!widget.isHidden()) {
+                    totalWidth += widget.getButtonWidth();
+                }
+            }
+            return totalWidth;
+        };
+        // Returns true if there is enough empty space to move the first child
+        // from the overflow menu to the main menu.
+        const canRemoveFirstChildFromOverflow = (freeSpaceInMainMenu) => {
+            const overflowChildren = this.overflowWidget?.getChildWidgets() ?? [];
+            if (overflowChildren.length === 0) {
+                return false;
+            }
+            return overflowChildren[0].getButtonWidth() <= freeSpaceInMainMenu;
+        };
+        const allWidgets = this.getAllWidgets();
+        let overflowWidgetsWidth = getTotalWidth(this.overflowWidget.getChildWidgets());
+        let shownWidgetWidth = getTotalWidth(allWidgets) - overflowWidgetsWidth;
+        let availableWidth = this.container.clientWidth * 0.87;
+        // If on a device that has enough vertical space, allow
+        // showing two rows of buttons.
+        // TODO: Fix magic numbers
+        if (window.innerHeight > availableWidth * 1.75) {
+            availableWidth *= 1.75;
+        }
+        let updatedChildren = false;
+        // If we can remove at least one child from the overflow menu,
+        if (canRemoveFirstChildFromOverflow(availableWidth - shownWidgetWidth)) {
+            // Move widgets to the main menu.
+            const overflowChildren = this.overflowWidget.clearChildren();
+            for (const child of overflowChildren) {
+                child.addTo(this.container);
+                child.setIsToplevel(true);
+                if (!child.isHidden()) {
+                    shownWidgetWidth += child.getButtonWidth();
+                }
+            }
+            overflowWidgetsWidth = 0;
+            updatedChildren = true;
+        }
+        if (shownWidgetWidth >= availableWidth) {
+            // Move widgets to the overflow menu.
+            // Start with the rightmost widget, move to the leftmost
+            for (let i = allWidgets.length - 1; i >= 0 && shownWidgetWidth >= availableWidth; i--) {
+                const child = allWidgets[i];
+                if (this.overflowWidget.hasAsChild(child)) {
+                    continue;
+                }
+                if (child.canBeInOverflowMenu()) {
+                    shownWidgetWidth -= child.getButtonWidth();
+                    this.overflowWidget.addToOverflow(child);
+                }
+            }
+            updatedChildren = true;
+        }
+        // Hide/show the overflow widget.
+        this.overflowWidget.setHidden(this.overflowWidget.getChildWidgets().length === 0);
+        if (updatedChildren) {
+            this.setupColorPickers();
+        }
+    }
+    addWidgetInternal(widget) {
+        const container = widget.addTo(this.container);
+        // Ensure that the widget gets displayed in the correct
+        // place in the toolbar, even if it's removed and re-added.
+        container.style.order = `${this.widgetOrderCounter++}`;
+        this.queueReLayout();
+    }
+    removeWidgetInternal(widget) {
+        widget.remove();
+        this.queueReLayout();
+    }
+    addSpacer(options = {}) {
+        const spacer = document.createElement('div');
+        spacer.classList.add(`${constants_1.toolbarCSSPrefix}spacer`);
+        if (options.grow) {
+            spacer.style.flexGrow = `${options.grow}`;
+        }
+        if (options.minSize) {
+            spacer.style.minWidth = options.minSize;
+        }
+        if (options.maxSize) {
+            spacer.style.maxWidth = options.maxSize;
+        }
+        spacer.style.order = `${this.widgetOrderCounter++}`;
+        this.container.appendChild(spacer);
+    }
+    /**
+     * Adds a widget that toggles the overflow menu. Call `addOverflowWidget` to ensure
+     * that this widget is in the correct space (if shown).
+     *
+     * @example
+     * ```ts
+     * toolbar.addDefaultToolWidgets();
+     * toolbar.addOverflowWidget();
+     * toolbar.addDefaultActionButtons();
+     * ```
+     * shows the overflow widget between the default tool widgets and the default action buttons,
+     * if shown.
+     */
+    addOverflowWidget() {
+        this.overflowWidget = new OverflowWidget_1.default(this.editor, this.localizationTable);
+        this.addWidget(this.overflowWidget);
+    }
+    /**
+     * Adds both the default tool widgets and action buttons. Equivalent to
+     * ```ts
+     * toolbar.addDefaultToolWidgets();
+     * toolbar.addOverflowWidget();
+     * toolbar.addDefaultActionButtons();
+     * ```
+     */
+    addDefaults() {
+        this.addDefaultToolWidgets();
+        this.addOverflowWidget();
+        this.addDefaultActionButtons();
+    }
+    onRemove() {
+        this.container.remove();
+        this.resizeObserver.disconnect();
+    }
+}
+exports.default = DropdownToolbar;

package/dist/cjs/toolbar/EdgeToolbar.d.ts

@@ -0,0 +1,47 @@
+import Editor from '../Editor';
+import { ToolbarLocalization } from './localization';
+import BaseWidget from './widgets/BaseWidget';
+import AbstractToolbar, { SpacerOptions } from './AbstractToolbar';
+export declare const makeEdgeToolbar: (editor: Editor) => AbstractToolbar;
+export default class EdgeToolbar extends AbstractToolbar {
+    private toolbarContainer;
+    private toolbarActionRow;
+    private toolbarToolRow;
+    private toolRowResizeObserver;
+    private menuContainer;
+    private sidebarContainer;
+    private sidebarContent;
+    private closeButton;
+    private layoutManager;
+    private sidebarVisible;
+    private sidebarY;
+    private sidebarTitle;
+    /** @internal */
+    constructor(editor: Editor, parent: HTMLElement, localizationTable: ToolbarLocalization);
+    private listenForVisibilityChanges;
+    private onToolbarRowResize;
+    addSpacer(_options?: Partial<SpacerOptions> | undefined): void;
+    addUndoRedoButtons(): void;
+    addDefaults(): void;
+    private updateWidgetCSSClasses;
+    protected addWidgetInternal(widget: BaseWidget): void;
+    protected removeWidgetInternal(widget: BaseWidget): void;
+    protected onRemove(): void;
+    private initDragListeners;
+    /**
+     * Updates the position of this menu **during** a drag. After a drag ends,
+     * {@link finalizeDrag} should be called.
+     */
+    private handleDrag;
+    /** Returns `this.sidebarY` rounded to a valid value. */
+    private snappedSidebarY;
+    /**
+     * Moves the menu to a valid location or closes it, depending on
+     * the position set by the drag.
+     */
+    private finalizeDrag;
+    protected serializeInternal(): {
+        menuSizeY: number;
+    };
+    protected deserializeInternal(json: any): void;
+}