js-draw 0.25.1 → 1.0.0

package/dist/mjs/testing/sendTouchEvent.mjs

@@ -1,14 +1,5 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import  Pointer, { PointerDevice }  from '../Pointer.mjs';
-import  { InputEvtType }  from '../types.mjs';
+import  { InputEvtType }  from '../inputEvents.mjs';
 import  getUniquePointerId  from './getUniquePointerId.mjs';
 /**
  * Dispatch a touch event to the currently selected tool. Intended for unit tests.
@@ -46,17 +37,18 @@ import  getUniquePointerId  from './getUniquePointerId.mjs';
  * }
  * ```
  */
-var sendTouchEvent = function (editor, eventType, screenPos, allOtherPointers) {
-    var canvasPos = editor.viewport.screenToCanvas(screenPos);
+const sendTouchEvent = (editor, eventType, screenPos, allOtherPointers) => {
+    const canvasPos = editor.viewport.screenToCanvas(screenPos);
     // Get a unique ID for the main pointer
     // (try to use id=0, but don't use it if it's already in use).
-    var ptrId = getUniquePointerId(allOtherPointers !== null && allOtherPointers !== void 0 ? allOtherPointers : []);
-    var mainPointer = Pointer.ofCanvasPoint(canvasPos, eventType !== InputEvtType.PointerUpEvt, editor.viewport, ptrId, PointerDevice.Touch);
+    const ptrId = getUniquePointerId(allOtherPointers ?? []);
+    const mainPointer = Pointer.ofCanvasPoint(canvasPos, eventType !== InputEvtType.PointerUpEvt, editor.viewport, ptrId, PointerDevice.Touch);
     editor.toolController.dispatchInputEvent({
         kind: eventType,
-        allPointers: __spreadArray(__spreadArray([], (allOtherPointers !== null && allOtherPointers !== void 0 ? allOtherPointers : []), true), [
+        allPointers: [
+            ...(allOtherPointers ?? []),
             mainPointer,
-        ], false),
+        ],
         current: mainPointer,
     });
     return mainPointer;

package/dist/mjs/toolbar/AbstractToolbar.d.ts

@@ -0,0 +1,166 @@
+import Editor from '../Editor';
+import { ToolbarLocalization } from './localization';
+import { ActionButtonIcon } from './types';
+import BaseWidget, { ToolbarWidgetTag } from './widgets/BaseWidget';
+import { DispatcherEventListener } from '../EventDispatcher';
+export interface SpacerOptions {
+    grow: number;
+    minSize: string;
+    maxSize: string;
+}
+export default abstract class AbstractToolbar {
+    #private;
+    protected editor: Editor;
+    protected localizationTable: ToolbarLocalization;
+    private static colorisStarted;
+    /** @internal */
+    constructor(editor: Editor, localizationTable?: ToolbarLocalization);
+    private closeColorPickerOverlay;
+    private setupCloseColorPickerOverlay;
+    setupColorPickers(): void;
+    protected closeColorPickers(): void;
+    protected getWidgetUniqueId(widget: BaseWidget): string;
+    protected getWidgetFromId(id: string): BaseWidget | undefined;
+    /** Do **not** modify the return value. */
+    protected getAllWidgets(): Array<BaseWidget>;
+    /**
+     * Adds a spacer.
+     *
+     * **Toolbars can choose to ignore calls to `addSpacer`**.
+     *
+     * @example
+     * Adding a save button that moves to the very right edge of the toolbar
+     * while keeping the other buttons centered:
+     * ```ts
+     * const toolbar = editor.addToolbar(false);
+     *
+     * toolbar.addSpacer({ grow: 1 });
+     * toolbar.addDefaults();
+     * toolbar.addSpacer({ grow: 1 });
+     *
+     * toolbar.addActionButton({
+     * 	label: 'Save',
+     * 	icon: editor.icons.makeSaveIcon(),
+     * }, () => {
+     * 	  saveCallback();
+     * });
+     * ```
+     */
+    abstract addSpacer(options?: Partial<SpacerOptions>): void;
+    /**
+     * 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: BaseWidget): void;
+    /** Called by `addWidget`. Implement this to add a new widget to the toolbar. */
+    protected abstract addWidgetInternal(widget: BaseWidget): void;
+    /** Removes the given `widget` from this toolbar. */
+    removeWidget(widget: BaseWidget): void;
+    /** Called by `removeWidget`. Implement this to remove a new widget from the toolbar. */
+    protected abstract removeWidgetInternal(widget: BaseWidget): void;
+    private static rootToolbarId;
+    /** Returns a snapshot of the state of widgets in the toolbar. */
+    serializeState(): string;
+    /**
+     * Deserialize toolbar widgets from the given state.
+     * Assumes that toolbar widgets are in the same order as when state was serialized.
+     */
+    deserializeState(state: string): void;
+    /**
+     * 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`.
+     */
+    protected serializeInternal(): any;
+    /**
+     * Called by `deserializeState` with a version of the JSON outputted
+     * previously by `serializeInternal`.
+     */
+    protected deserializeInternal(_json: any): void;
+    /**
+     * Creates, but does not add, an action button to this container.
+     *
+     * @see
+     * {@link addActionButton}
+     */
+    protected makeActionButton(title: string | ActionButtonIcon, command: () => void, mustBeToplevel?: boolean): BaseWidget;
+    /**
+     * Adds an action button with `title` to this toolbar (or to the given `parent` element).
+     *
+     * @return The added button.
+     */
+    addActionButton(title: string | ActionButtonIcon, command: () => void, mustBeToplevel?: boolean): BaseWidget;
+    /**
+     * Like {@link addActionButton}, except associates `tags` with the button that allow
+     * different toolbar styles to give the button tag-dependent styles.
+     */
+    addTaggedActionButton(tags: (ToolbarWidgetTag | string)[], title: string | ActionButtonIcon, command: () => void, mustBeToplevel?: boolean): BaseWidget;
+    /**
+     * 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: () => void): BaseWidget;
+    /**
+     * 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: () => void): BaseWidget;
+    /**
+     * Adds undo and redo buttons that trigger the editor's built-in undo and redo
+     * functionality.
+     */
+    addUndoRedoButtons(undoFirst?: boolean): void;
+    /**
+     * Adds toolbar widgets based on the enabled tools.
+     */
+    addDefaultToolWidgets(): void;
+    addDefaultActionButtons(): void;
+    /**
+     * Adds both the default tool widgets and action buttons.
+     */
+    abstract addDefaults(): void;
+    /** Remove this toolbar from its container and clean up listeners. */
+    remove(): void;
+    /**
+     * Removes `listener` when {@link remove} is called.
+     */
+    protected manageListener(listener: DispatcherEventListener): void;
+    /**
+     * Internal logic for {@link remove}. Implementers should remove the toolbar
+     * from its container.
+     */
+    protected abstract onRemove(): void;
+}

package/dist/mjs/toolbar/AbstractToolbar.mjs

@@ -0,0 +1,405 @@
+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 _AbstractToolbar_listeners, _AbstractToolbar_widgetsById, _AbstractToolbar_widgetList, _AbstractToolbar_updateColoris;
+import  { EditorEventType }  from '../types.mjs';
+import { coloris, close as closeColoris, init as colorisInit } from '@melloware/coloris';
+import  { defaultToolbarLocalization }  from './localization.mjs';
+import  SelectionTool  from '../tools/SelectionTool/SelectionTool.mjs';
+import  PanZoomTool  from '../tools/PanZoom.mjs';
+import  TextTool  from '../tools/TextTool.mjs';
+import  EraserTool  from '../tools/Eraser.mjs';
+import  PenTool  from '../tools/Pen.mjs';
+import  PenToolWidget  from './widgets/PenToolWidget.mjs';
+import  EraserWidget  from './widgets/EraserToolWidget.mjs';
+import  SelectionToolWidget  from './widgets/SelectionToolWidget.mjs';
+import  TextToolWidget  from './widgets/TextToolWidget.mjs';
+import  HandToolWidget  from './widgets/HandToolWidget.mjs';
+import  { ToolbarWidgetTag }  from './widgets/BaseWidget.mjs';
+import  ActionButtonWidget  from './widgets/ActionButtonWidget.mjs';
+import  InsertImageWidget  from './widgets/InsertImageWidget.mjs';
+import  DocumentPropertiesWidget  from './widgets/DocumentPropertiesWidget.mjs';
+import { Color4 } from '@js-draw/math';
+import  { toolbarCSSPrefix }  from './constants.mjs';
+class AbstractToolbar {
+    /** @internal */
+    constructor(editor, localizationTable = 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) {
+            colorisInit();
+            AbstractToolbar.colorisStarted = true;
+        }
+        this.setupColorPickers();
+    }
+    setupCloseColorPickerOverlay() {
+        if (this.closeColorPickerOverlay)
+            return;
+        this.closeColorPickerOverlay = document.createElement('div');
+        this.closeColorPickerOverlay.className = `${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') {
+                closeColoris();
+            }
+            // 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 = [
+            Color4.red.toHexString(),
+            Color4.purple.toHexString(),
+            Color4.blue.toHexString(),
+            Color4.clay.toHexString(),
+            Color4.black.toHexString(),
+            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 {
+                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(EditorEventType.ColorPickerToggled, event => {
+            if (event.kind !== 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(EditorEventType.ColorPickerColorSelected, event => {
+            if (event.kind === EditorEventType.ColorPickerColorSelected) {
+                addColorToSwatch(event.color.toHexString());
+            }
+        }));
+    }
+    closeColorPickers() {
+        closeColoris?.();
+    }
+    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(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([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([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([
+                ToolbarWidgetTag.Undo,
+            ], {
+                label: this.localizationTable.undo,
+                icon: this.editor.icons.makeUndoIcon()
+            }, () => {
+                this.editor.history.undo();
+            });
+        };
+        const makeRedo = () => {
+            return this.addTaggedActionButton([
+                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(EditorEventType.UndoRedoStackUpdated, event => {
+            if (event.kind !== 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(PenTool)) {
+            const widget = new PenToolWidget(this.editor, tool, this.localizationTable);
+            this.addWidget(widget);
+        }
+        for (const tool of toolController.getMatchingTools(EraserTool)) {
+            this.addWidget(new EraserWidget(this.editor, tool, this.localizationTable));
+        }
+        for (const tool of toolController.getMatchingTools(SelectionTool)) {
+            this.addWidget(new SelectionToolWidget(this.editor, tool, this.localizationTable));
+        }
+        for (const tool of toolController.getMatchingTools(TextTool)) {
+            this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
+        }
+        const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
+        if (panZoomTool) {
+            this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
+        }
+        this.addWidget(new DocumentPropertiesWidget(this.editor, this.localizationTable));
+        this.addWidget(new InsertImageWidget(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--';
+export default AbstractToolbar;

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