js-draw 0.17.3 → 0.18.0

package/dist/mjs/src/toolbar/HTMLToolbar.d.ts

@@ -0,0 +1,103 @@
+import Editor from '../Editor';
+import { ToolbarLocalization } from './localization';
+import { ActionButtonIcon } from './types';
+import BaseWidget from './widgets/BaseWidget';
+export declare const toolbarCSSPrefix = "toolbar-";
+interface SpacerOptions {
+    grow: number;
+    minSize: string;
+    maxSize: string;
+}
+export default class HTMLToolbar {
+    private editor;
+    private localizationTable;
+    private container;
+    private resizeObserver;
+    private listeners;
+    private widgetOrderCounter;
+    private widgetsById;
+    private widgetList;
+    private overflowWidget;
+    private static colorisStarted;
+    private updateColoris;
+    /** @internal */
+    constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
+    setupColorPickers(): void;
+    private reLayoutQueued;
+    private queueReLayout;
+    private reLayout;
+    /**
+     * 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;
+    /**
+     * Adds a spacer.
+     *
+     * @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();
+     * });
+     * ```
+     */
+    addSpacer(options?: Partial<SpacerOptions>): void;
+    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;
+    /**
+     * 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;
+    addUndoRedoButtons(): void;
+    addDefaultToolWidgets(): void;
+    addDefaultActionButtons(): 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;
+    remove(): void;
+}
+export {};

package/dist/{src/toolbar/HTMLToolbar.js → mjs/src/toolbar/HTMLToolbar.mjs}

@@ -1,21 +1,21 @@
-import { EditorEventType } from '../types';
+import  { EditorEventType }  from '../types.mjs';
 import { coloris, init as colorisInit } from '@melloware/coloris';
-import Color4 from '../Color4';
-import { defaultToolbarLocalization } from './localization';
-import SelectionTool from '../tools/SelectionTool/SelectionTool';
-import PanZoomTool from '../tools/PanZoom';
-import TextTool from '../tools/TextTool';
-import EraserTool from '../tools/Eraser';
-import PenTool from '../tools/Pen';
-import PenToolWidget from './widgets/PenToolWidget';
-import EraserWidget from './widgets/EraserToolWidget';
-import SelectionToolWidget from './widgets/SelectionToolWidget';
-import TextToolWidget from './widgets/TextToolWidget';
-import HandToolWidget from './widgets/HandToolWidget';
-import ActionButtonWidget from './widgets/ActionButtonWidget';
-import InsertImageWidget from './widgets/InsertImageWidget';
-import DocumentPropertiesWidget from './widgets/DocumentPropertiesWidget';
-import OverflowWidget from './widgets/OverflowWidget';
+import  Color4  from '../Color4.mjs';
+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  ActionButtonWidget  from './widgets/ActionButtonWidget.mjs';
+import  InsertImageWidget  from './widgets/InsertImageWidget.mjs';
+import  DocumentPropertiesWidget  from './widgets/DocumentPropertiesWidget.mjs';
+import  OverflowWidget  from './widgets/OverflowWidget.mjs';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
     /** @internal */

package/dist/mjs/src/toolbar/IconProvider.d.ts

@@ -0,0 +1,62 @@
+import Color4 from '../Color4';
+import { ComponentBuilderFactory } from '../components/builders/types';
+import TextStyle from '../rendering/TextRenderingStyle';
+import Pen from '../tools/Pen';
+export type IconType = HTMLImageElement | SVGElement;
+/**
+ * Provides icons that can be used in the toolbar, etc.
+ * Extend this class and override methods to customize icons.
+ *
+ * @example
+ * ```ts
+ * class CustomIconProvider extends jsdraw.IconProvider {
+ *     // Use '☺' instead of the default dropdown symbol.
+ *     public makeDropdownIcon() {
+ *         const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ *         icon.innerHTML = `
+ *             <text x='5' y='55' style='fill: var(--icon-color); font-size: 50pt;'>☺</text>
+ *         `;
+ *         icon.setAttribute('viewBox', '0 0 100 100');
+ *         return icon;
+ *     }
+ * }
+ *
+ * const icons = new CustomIconProvider();
+ * const editor = new jsdraw.Editor(document.body, {
+ *     iconProvider: icons,
+ * });
+ *
+ * // Add a toolbar that uses these icons
+ * editor.addToolbar();
+ * ```
+ */
+export default class IconProvider {
+    makeUndoIcon(): IconType;
+    makeRedoIcon(mirror?: boolean): IconType;
+    makeDropdownIcon(): IconType;
+    makeEraserIcon(eraserSize?: number): IconType;
+    makeSelectionIcon(): IconType;
+    /**
+     * @param pathData - SVG path data (e.g. `m10,10l30,30z`)
+     * @param fill - A valid CSS color (e.g. `var(--icon-color)` or `#f0f`). This can be `none`.
+     */
+    protected makeIconFromPath(pathData: string, fill?: string, strokeColor?: string, strokeWidth?: string): IconType;
+    makeHandToolIcon(): IconType;
+    makeTouchPanningIcon(): IconType;
+    makeAllDevicePanningIcon(): IconType;
+    makeZoomIcon(): IconType;
+    makeRotationLockIcon(): IconType;
+    makeInsertImageIcon(): IconType;
+    makeTextIcon(textStyle: TextStyle): IconType;
+    makePenIcon(strokeSize: number, color: string | Color4, rounded?: boolean): IconType;
+    makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
+    makePipetteIcon(color?: Color4): IconType;
+    makeFormatSelectionIcon(): IconType;
+    makeResizeViewportIcon(): IconType;
+    makeDuplicateSelectionIcon(): IconType;
+    makePasteIcon(): IconType;
+    makeDeleteSelectionIcon(): IconType;
+    makeSaveIcon(): IconType;
+    makeConfigureDocumentIcon(): IconType;
+    makeOverflowIcon(): IconType;
+}

package/dist/{src/toolbar/IconProvider.js → mjs/src/toolbar/IconProvider.mjs}

@@ -1,7 +1,7 @@
-import Color4 from '../Color4';
-import { Vec2 } from '../math/Vec2';
-import SVGRenderer from '../rendering/renderers/SVGRenderer';
-import Viewport from '../Viewport';
+import  Color4  from '../Color4.mjs';
+import  { Vec2 }  from '../math/Vec2.mjs';
+import  SVGRenderer  from '../rendering/renderers/SVGRenderer.mjs';
+import  Viewport  from '../Viewport.mjs';
 const svgNamespace = 'http://www.w3.org/2000/svg';
 const iconColorFill = `
 	style='fill: var(--icon-color);'

package/dist/mjs/src/toolbar/lib.mjs

@@ -0,0 +1,3 @@
+export  *  from './widgets/lib.mjs';
+export  *  from './makeColorInput.mjs';
+export  { default as IconProvider }  from './IconProvider.mjs';

package/dist/mjs/src/toolbar/localization.d.ts

@@ -0,0 +1,49 @@
+export interface ToolbarLocalization {
+    fontLabel: string;
+    textSize: string;
+    touchPanning: string;
+    lockRotation: string;
+    outlinedRectanglePen: string;
+    filledRectanglePen: string;
+    linePen: string;
+    arrowPen: string;
+    image: string;
+    inputAltText: string;
+    chooseFile: string;
+    cancel: string;
+    submit: string;
+    freehandPen: string;
+    pressureSensitiveFreehandPen: string;
+    selectObjectType: string;
+    colorLabel: string;
+    pen: string;
+    eraser: string;
+    select: string;
+    handTool: string;
+    thicknessLabel: string;
+    resizeImageToSelection: string;
+    deleteSelection: string;
+    duplicateSelection: string;
+    pickColorFromScreen: string;
+    clickToPickColorAnnouncement: string;
+    reformatSelection: string;
+    undo: string;
+    redo: string;
+    zoom: string;
+    resetView: string;
+    selectionToolKeyboardShortcuts: string;
+    paste: string;
+    documentProperties: string;
+    backgroundColor: string;
+    imageWidthOption: string;
+    imageHeightOption: string;
+    toggleOverflow: string;
+    errorImageHasZeroSize: string;
+    dropdownShown: (toolName: string) => string;
+    dropdownHidden: (toolName: string) => string;
+    zoomLevel: (zoomPercentage: number) => string;
+    colorChangedAnnouncement: (color: string) => string;
+    imageSize: (size: number, units: string) => string;
+    imageLoadError: (message: string) => string;
+}
+export declare const defaultToolbarLocalization: ToolbarLocalization;

package/dist/mjs/src/toolbar/makeColorInput.d.ts

@@ -0,0 +1,6 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+type OnColorChangeListener = (color: Color4) => void;
+type SetColorCallback = (color: Color4 | string) => void;
+export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => [HTMLInputElement, HTMLElement, SetColorCallback];
+export default makeColorInput;

package/dist/{src/toolbar/makeColorInput.js → mjs/src/toolbar/makeColorInput.mjs}

@@ -1,6 +1,6 @@
-import Color4 from '../Color4';
-import PipetteTool from '../tools/PipetteTool';
-import { EditorEventType } from '../types';
+import  Color4  from '../Color4.mjs';
+import  PipetteTool  from '../tools/PipetteTool.mjs';
+import  { EditorEventType }  from '../types.mjs';
 // Returns [ color input, input container, callback to change the color value ].
 export const makeColorInput = (editor, onColorChange) => {
     const colorInputContainer = document.createElement('span');

package/dist/mjs/src/toolbar/types.d.ts

@@ -0,0 +1,4 @@
+export interface ActionButtonIcon {
+    icon: Element;
+    label: string;
+}

package/dist/mjs/src/toolbar/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/mjs/src/toolbar/widgets/ActionButtonWidget.d.ts

@@ -0,0 +1,15 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+export default class ActionButtonWidget extends BaseWidget {
+    protected makeIcon: () => Element | null;
+    protected title: string;
+    protected clickAction: () => void;
+    protected mustBeToplevel: boolean;
+    constructor(editor: Editor, id: string, makeIcon: () => Element | null, title: string, clickAction: () => void, localizationTable?: ToolbarLocalization, mustBeToplevel?: boolean);
+    protected handleClick(): void;
+    protected getTitle(): string;
+    protected createIcon(): Element | null;
+    protected fillDropdown(_dropdown: HTMLElement): boolean;
+    canBeInOverflowMenu(): boolean;
+}

package/dist/{src/toolbar/widgets/ActionButtonWidget.js → mjs/src/toolbar/widgets/ActionButtonWidget.mjs}

@@ -1,4 +1,4 @@
-import BaseWidget from './BaseWidget';
+import  BaseWidget  from './BaseWidget.mjs';
 export default class ActionButtonWidget extends BaseWidget {
     constructor(editor, id, makeIcon, title, clickAction, localizationTable, mustBeToplevel = false) {
         super(editor, id, localizationTable);

package/dist/mjs/src/toolbar/widgets/BaseToolWidget.d.ts

@@ -0,0 +1,11 @@
+import Editor from '../../Editor';
+import BaseTool from '../../tools/BaseTool';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+export default abstract class BaseToolWidget extends BaseWidget {
+    protected editor: Editor;
+    protected targetTool: BaseTool;
+    constructor(editor: Editor, targetTool: BaseTool, id: string, localizationTable?: ToolbarLocalization);
+    protected handleClick(): void;
+    addTo(parent: HTMLElement): HTMLElement;
+}

package/dist/{src/toolbar/widgets/BaseToolWidget.js → mjs/src/toolbar/widgets/BaseToolWidget.mjs}

@@ -1,5 +1,5 @@
-import { EditorEventType } from '../../types';
-import BaseWidget from './BaseWidget';
+import  { EditorEventType }  from '../../types.mjs';
+import  BaseWidget  from './BaseWidget.mjs';
 export default class BaseToolWidget extends BaseWidget {
     constructor(editor, targetTool, id, localizationTable) {
         super(editor, id, localizationTable);

package/dist/mjs/src/toolbar/widgets/BaseWidget.d.ts

@@ -0,0 +1,72 @@
+import Editor from '../../Editor';
+import { KeyPressEvent } from '../../types';
+import { ToolbarLocalization } from '../localization';
+export type SavedToolbuttonState = Record<string, any>;
+export default abstract class BaseWidget {
+    #private;
+    protected editor: Editor;
+    protected id: string;
+    protected readonly container: HTMLElement;
+    private button;
+    private icon;
+    private dropdownContainer;
+    private dropdownIcon;
+    private label;
+    private disabled;
+    private subWidgets;
+    private toplevel;
+    protected readonly localizationTable: ToolbarLocalization;
+    constructor(editor: Editor, id: string, localizationTable?: ToolbarLocalization);
+    getId(): string;
+    /**
+     * Returns the ID of this widget in `container`. Adds a suffix to this' ID
+     * if an item in `container` already has this' ID.
+     *
+     * For example, if `this` has ID `foo` and if
+     * `container = { 'foo': somethingNotThis, 'foo-1': somethingElseNotThis }`, this method
+     * returns `foo-2` because elements with IDs `foo` and `foo-1` are already present in
+     * `container`.
+     */
+    getUniqueIdIn(container: Record<string, BaseWidget>): string;
+    protected abstract getTitle(): string;
+    protected abstract createIcon(): Element | null;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+    protected setupActionBtnClickListener(button: HTMLElement): void;
+    protected onKeyPress(_event: KeyPressEvent): boolean;
+    protected abstract handleClick(): void;
+    protected get hasDropdown(): boolean;
+    protected addSubWidget(widget: BaseWidget): void;
+    private toolbarWidgetToggleListener;
+    addTo(parent: HTMLElement): HTMLElement;
+    protected updateIcon(): void;
+    setDisabled(disabled: boolean): void;
+    setSelected(selected: boolean): void;
+    protected setDropdownVisible(visible: boolean): void;
+    canBeInOverflowMenu(): boolean;
+    getButtonWidth(): number;
+    isHidden(): boolean;
+    setHidden(hidden: boolean): void;
+    protected repositionDropdown(): void;
+    /** Set whether the widget is contained within another. @internal */
+    setIsToplevel(toplevel: boolean): void;
+    protected isDropdownVisible(): boolean;
+    protected isSelected(): boolean;
+    private createDropdownIcon;
+    /**
+     * Serialize state associated with this widget.
+     * Override this method to allow saving/restoring from state on application load.
+     *
+     * Overriders should call `super` and include the output of `super.serializeState` in
+     * the output dictionary.
+     *
+     * Clients should not rely on the output from `saveState` being in any particular
+     * format.
+     */
+    serializeState(): SavedToolbuttonState;
+    /**
+     * Restore widget state from serialized data. See also `saveState`.
+     *
+     * Overriders must call `super`.
+     */
+    deserializeFrom(state: SavedToolbuttonState): void;
+}

package/dist/{src/toolbar/widgets/BaseWidget.js → mjs/src/toolbar/widgets/BaseWidget.mjs}

@@ -10,9 +10,9 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _BaseWidget_hasDropdown;
-import ToolbarShortcutHandler from '../../tools/ToolbarShortcutHandler';
-import { EditorEventType, InputEvtType } from '../../types';
-import { toolbarCSSPrefix } from '../HTMLToolbar';
+import  ToolbarShortcutHandler  from '../../tools/ToolbarShortcutHandler.mjs';
+import  { EditorEventType, InputEvtType }  from '../../types.mjs';
+import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
 export default class BaseWidget {
     constructor(editor, id, localizationTable) {
         this.editor = editor;

package/dist/mjs/src/toolbar/widgets/DocumentPropertiesWidget.d.ts

@@ -0,0 +1,18 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+export default class DocumentPropertiesWidget extends BaseWidget {
+    private updateDropdownContent;
+    constructor(editor: Editor, localizationTable?: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element;
+    protected handleClick(): void;
+    private dropdownUpdateQueued;
+    private queueDropdownUpdate;
+    private updateDropdown;
+    private setBackgroundColor;
+    private getBackgroundColor;
+    private updateImportExportRectSize;
+    private static idCounter;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+}

package/dist/{src/toolbar/widgets/DocumentPropertiesWidget.js → mjs/src/toolbar/widgets/DocumentPropertiesWidget.mjs}

@@ -1,8 +1,9 @@
-import { EditorImageEventType } from '../../EditorImage';
-import Rect2 from '../../math/Rect2';
-import { EditorEventType } from '../../types';
-import makeColorInput from '../makeColorInput';
-import BaseWidget from './BaseWidget';
+import  { EditorImageEventType }  from '../../EditorImage.mjs';
+import  Rect2  from '../../math/Rect2.mjs';
+import  { EditorEventType }  from '../../types.mjs';
+import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
+import  makeColorInput  from '../makeColorInput.mjs';
+import  BaseWidget  from './BaseWidget.mjs';
 export default class DocumentPropertiesWidget extends BaseWidget {
     constructor(editor, localizationTable) {
         super(editor, 'zoom-widget', localizationTable);
@@ -61,6 +62,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
     }
     fillDropdown(dropdown) {
         const container = document.createElement('div');
+        container.classList.add(`${toolbarCSSPrefix}spacedList`);
         const backgroundColorRow = document.createElement('div');
         const backgroundColorLabel = document.createElement('label');
         backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
@@ -69,7 +71,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
                 this.setBackgroundColor(color);
             }
         });
-        colorInput.id = `document-properties-color-input-${DocumentPropertiesWidget.idCounter++}`;
+        colorInput.id = `${toolbarCSSPrefix}docPropertiesColorInput-${DocumentPropertiesWidget.idCounter++}`;
         backgroundColorLabel.htmlFor = colorInput.id;
         backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
         const addDimensionRow = (labelContent, onChange) => {
@@ -80,7 +82,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
             label.innerText = labelContent;
             input.type = 'number';
             input.min = '0';
-            input.id = `document-properties-dimension-row-${DocumentPropertiesWidget.idCounter++}`;
+            input.id = `${toolbarCSSPrefix}docPropertiesDimensionRow-${DocumentPropertiesWidget.idCounter++}`;
             label.htmlFor = input.id;
             spacer.style.flexGrow = '1';
             input.style.flexGrow = '2';

package/dist/mjs/src/toolbar/widgets/EraserToolWidget.d.ts

@@ -0,0 +1,17 @@
+import Editor from '../../Editor';
+import Eraser from '../../tools/Eraser';
+import { ToolbarLocalization } from '../localization';
+import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
+export default class EraserToolWidget extends BaseToolWidget {
+    private tool;
+    private thicknessInput;
+    constructor(editor: Editor, tool: Eraser, localizationTable?: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element;
+    private updateInputs;
+    private static nextThicknessInputId;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+    serializeState(): SavedToolbuttonState;
+    deserializeFrom(state: SavedToolbuttonState): void;
+}

package/dist/{src/toolbar/widgets/EraserToolWidget.js → mjs/src/toolbar/widgets/EraserToolWidget.mjs}

@@ -1,6 +1,6 @@
-import { EditorEventType } from '../../types';
-import { toolbarCSSPrefix } from '../HTMLToolbar';
-import BaseToolWidget from './BaseToolWidget';
+import  { EditorEventType }  from '../../types.mjs';
+import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
+import  BaseToolWidget  from './BaseToolWidget.mjs';
 export default class EraserToolWidget extends BaseToolWidget {
     constructor(editor, tool, localizationTable) {
         super(editor, tool, 'eraser-tool-widget', localizationTable);

package/dist/mjs/src/toolbar/widgets/HandToolWidget.d.ts

@@ -0,0 +1,17 @@
+import Editor from '../../Editor';
+import PanZoom from '../../tools/PanZoom';
+import { ToolbarLocalization } from '../localization';
+import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
+export default class HandToolWidget extends BaseToolWidget {
+    protected overridePanZoomTool: PanZoom;
+    private allowTogglingBaseTool;
+    constructor(editor: Editor, overridePanZoomTool: PanZoom, localizationTable: ToolbarLocalization);
+    private static getPrimaryHandTool;
+    protected getTitle(): string;
+    protected createIcon(): Element;
+    protected handleClick(): void;
+    setSelected(selected: boolean): void;
+    serializeState(): SavedToolbuttonState;
+    deserializeFrom(state: SavedToolbuttonState): void;
+}

package/dist/{src/toolbar/widgets/HandToolWidget.js → mjs/src/toolbar/widgets/HandToolWidget.mjs}

@@ -1,10 +1,10 @@
-import Mat33 from '../../math/Mat33';
-import PanZoom, { PanZoomMode } from '../../tools/PanZoom';
-import { EditorEventType } from '../../types';
-import Viewport from '../../Viewport';
-import { toolbarCSSPrefix } from '../HTMLToolbar';
-import BaseToolWidget from './BaseToolWidget';
-import BaseWidget from './BaseWidget';
+import  Mat33  from '../../math/Mat33.mjs';
+import  PanZoom, { PanZoomMode }  from '../../tools/PanZoom.mjs';
+import  { EditorEventType }  from '../../types.mjs';
+import  Viewport  from '../../Viewport.mjs';
+import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
+import  BaseToolWidget  from './BaseToolWidget.mjs';
+import  BaseWidget  from './BaseWidget.mjs';
 const makeZoomControl = (localizationTable, editor) => {
     const zoomLevelRow = document.createElement('div');
     const increaseButton = document.createElement('button');

package/dist/mjs/src/toolbar/widgets/InsertImageWidget.d.ts

@@ -0,0 +1,19 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import ActionButtonWidget from './ActionButtonWidget';
+export default class InsertImageWidget extends ActionButtonWidget {
+    private imageSelectionOverlay;
+    private imagePreview;
+    private imageFileInput;
+    private imageAltTextInput;
+    private statusView;
+    private imageBase64URL;
+    private submitButton;
+    constructor(editor: Editor, localization?: ToolbarLocalization);
+    private static nextInputId;
+    private fillOverlay;
+    private hideDialog;
+    private updateImageSizeDisplay;
+    private clearInputs;
+    private onClicked;
+}

package/dist/{src/toolbar/widgets/InsertImageWidget.js → mjs/src/toolbar/widgets/InsertImageWidget.mjs}

@@ -7,14 +7,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import ImageComponent from '../../components/ImageComponent';
-import Erase from '../../commands/Erase';
-import EditorImage from '../../EditorImage';
-import uniteCommands from '../../commands/uniteCommands';
-import SelectionTool from '../../tools/SelectionTool/SelectionTool';
-import Mat33 from '../../math/Mat33';
-import fileToBase64 from '../../util/fileToBase64';
-import ActionButtonWidget from './ActionButtonWidget';
+import  ImageComponent  from '../../components/ImageComponent.mjs';
+import  Erase  from '../../commands/Erase.mjs';
+import  EditorImage  from '../../EditorImage.mjs';
+import  uniteCommands  from '../../commands/uniteCommands.mjs';
+import  SelectionTool  from '../../tools/SelectionTool/SelectionTool.mjs';
+import  Mat33  from '../../math/Mat33.mjs';
+import  fileToBase64  from '../../util/fileToBase64.mjs';
+import  ActionButtonWidget  from './ActionButtonWidget.mjs';
 export default class InsertImageWidget extends ActionButtonWidget {
     constructor(editor, localization) {
         localization !== null && localization !== void 0 ? localization : (localization = editor.localization);

package/dist/mjs/src/toolbar/widgets/OverflowWidget.d.ts

@@ -0,0 +1,25 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+export default class OverflowWidget extends BaseWidget {
+    private overflowChildren;
+    private overflowContainer;
+    constructor(editor: Editor, localizationTable?: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element | null;
+    protected handleClick(): void;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+    /**
+     * Removes all `BaseWidget`s from this and returns them.
+     */
+    clearChildren(): BaseWidget[];
+    getChildWidgets(): BaseWidget[];
+    hasAsChild(widget: BaseWidget): boolean;
+    /**
+     * Adds `widget` to this.
+     * `widget`'s previous parent is still responsible
+     * for serializing/deserializing its state.
+     */
+    addToOverflow(widget: BaseWidget): void;
+    canBeInOverflowMenu(): boolean;
+}

package/dist/{src/toolbar/widgets/OverflowWidget.js → mjs/src/toolbar/widgets/OverflowWidget.mjs}

@@ -1,4 +1,4 @@
-import BaseWidget from './BaseWidget';
+import  BaseWidget  from './BaseWidget.mjs';
 export default class OverflowWidget extends BaseWidget {
     constructor(editor, localizationTable) {
         var _a;