js-draw 0.15.2 → 0.16.1

package/dist/src/toolbar/HTMLToolbar.js

@@ -14,14 +14,23 @@ 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';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
     /** @internal */
     constructor(editor, parent, localizationTable = defaultToolbarLocalization) {
         this.editor = editor;
         this.localizationTable = localizationTable;
-        this.widgets = {};
+        this.listeners = [];
+        // Flex-order of the next widget to be added.
+        this.widgetOrderCounter = 0;
+        this.widgetsById = {};
+        this.widgetList = [];
+        // Widget to toggle overflow menu.
+        this.overflowWidget = null;
         this.updateColoris = null;
+        this.reLayoutQueued = false;
         this.container = document.createElement('div');
         this.container.classList.add(`${toolbarCSSPrefix}root`);
         this.container.setAttribute('role', 'toolbar');
@@ -31,6 +40,15 @@ export default class HTMLToolbar {
             HTMLToolbar.colorisStarted = true;
         }
         this.setupColorPickers();
+        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.');
+        }
     }
     // @internal
     setupColorPickers() {
@@ -80,20 +98,84 @@ export default class HTMLToolbar {
                 initColoris();
             }
         };
-        this.editor.notifier.on(EditorEventType.ColorPickerToggled, event => {
+        this.listeners.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.
             closePickerOverlay.style.display = event.open ? 'block' : 'none';
-        });
+        }));
         // Add newly-selected colors to the swatch.
-        this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, event => {
+        this.listeners.push(this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, event => {
             if (event.kind === EditorEventType.ColorPickerColorSelected) {
                 addColorToSwatch(event.color.toHexString());
             }
-        });
+        }));
+    }
+    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;
+        };
+        let overflowWidgetsWidth = getTotalWidth(this.overflowWidget.getChildWidgets());
+        let shownWidgetWidth = getTotalWidth(this.widgetList) - 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 (shownWidgetWidth + overflowWidgetsWidth <= availableWidth) {
+            // 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();
+                }
+            }
+            this.overflowWidget.setHidden(true);
+            overflowWidgetsWidth = 0;
+            updatedChildren = true;
+        }
+        if (shownWidgetWidth >= availableWidth) {
+            // Move widgets to the overflow menu.
+            this.overflowWidget.setHidden(false);
+            // Start with the rightmost widget, move to the leftmost
+            for (let i = this.widgetList.length - 1; i >= 0 && shownWidgetWidth >= availableWidth; i--) {
+                const child = this.widgetList[i];
+                if (this.overflowWidget.hasAsChild(child)) {
+                    continue;
+                }
+                if (child.canBeInOverflowMenu()) {
+                    shownWidgetWidth -= child.getButtonWidth();
+                    this.overflowWidget.addToOverflow(child);
+                }
+            }
+            updatedChildren = true;
+        }
+        if (updatedChildren) {
+            this.setupColorPickers();
+        }
     }
     /**
      * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
@@ -108,12 +190,17 @@ export default class HTMLToolbar {
      */
     addWidget(widget) {
         // Prevent name collisions
-        const id = widget.getUniqueIdIn(this.widgets);
+        const id = widget.getUniqueIdIn(this.widgetsById);
         // Add the widget
-        this.widgets[id] = widget;
+        this.widgetsById[id] = widget;
+        this.widgetList.push(widget);
         // Add HTML elements.
-        widget.addTo(this.container);
+        const container = widget.addTo(this.container);
         this.setupColorPickers();
+        // 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();
     }
     /**
      * Adds a spacer.
@@ -148,12 +235,13 @@ export default class HTMLToolbar {
         if (options.maxSize) {
             spacer.style.maxWidth = options.maxSize;
         }
+        spacer.style.order = `${this.widgetOrderCounter++}`;
         this.container.appendChild(spacer);
     }
     serializeState() {
         const result = {};
-        for (const widgetId in this.widgets) {
-            result[widgetId] = this.widgets[widgetId].serializeState();
+        for (const widgetId in this.widgetsById) {
+            result[widgetId] = this.widgetsById[widgetId].serializeState();
         }
         return JSON.stringify(result);
     }
@@ -164,10 +252,10 @@ export default class HTMLToolbar {
     deserializeState(state) {
         const data = JSON.parse(state);
         for (const widgetId in data) {
-            if (!(widgetId in this.widgets)) {
+            if (!(widgetId in this.widgetsById)) {
                 console.warn(`Unable to deserialize widget ${widgetId} ­— no such widget.`);
             }
-            this.widgets[widgetId].deserializeFrom(data[widgetId]);
+            this.widgetsById[widgetId].deserializeFrom(data[widgetId]);
         }
     }
     /**
@@ -175,7 +263,7 @@ export default class HTMLToolbar {
      *
      * @return The added button.
      */
-    addActionButton(title, command) {
+    addActionButton(title, command, mustBeToplevel = true) {
         const titleString = typeof title === 'string' ? title : title.label;
         const widgetId = 'action-button';
         const makeIcon = () => {
@@ -184,7 +272,7 @@ export default class HTMLToolbar {
             }
             return title.icon;
         };
-        const widget = new ActionButtonWidget(this.editor, widgetId, makeIcon, titleString, command, this.editor.localization);
+        const widget = new ActionButtonWidget(this.editor, widgetId, makeIcon, titleString, command, this.editor.localization, mustBeToplevel);
         this.addWidget(widget);
         return widget;
     }
@@ -226,25 +314,52 @@ export default class HTMLToolbar {
         for (const tool of toolController.getMatchingTools(TextTool)) {
             this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
         }
-        this.addWidget(new InsertImageWidget(this.editor, this.localizationTable));
         const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
         if (panZoomTool) {
             this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
         }
+        this.addWidget(new InsertImageWidget(this.editor, this.localizationTable));
     }
     addDefaultActionButtons() {
+        this.addWidget(new DocumentPropertiesWidget(this.editor, this.localizationTable));
         this.addUndoRedoButtons();
     }
+    /**
+     * 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(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();
     }
+    remove() {
+        this.container.remove();
+        this.resizeObserver.disconnect();
+        for (const listener of this.listeners) {
+            listener.remove();
+        }
+    }
 }
 HTMLToolbar.colorisStarted = false;

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

@@ -57,4 +57,6 @@ export default class IconProvider {
     makePasteIcon(): IconType;
     makeDeleteSelectionIcon(): IconType;
     makeSaveIcon(): IconType;
+    makeConfigureDocumentIcon(): IconType;
+    makeOverflowIcon(): IconType;
 }

package/dist/src/toolbar/IconProvider.js

@@ -607,4 +607,48 @@ export default class IconProvider {
         svg.setAttribute('viewBox', '0 0 100 100');
         return svg;
     }
+    makeConfigureDocumentIcon() {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.innerHTML = `
+			<path
+				d='
+					M 5,5 V 95 H 95 V 5 Z m 5,5 H 90 V 90 H 10 Z
+					m 5,10 V 30 H 50 V 25 H 20 v -5 z
+					m 40,0 V 50 H 85 V 20 Z
+					m 2,2 H 83 V 39 L 77,28 70,42 64,35 57,45 Z
+					m 8.5,5 C 64.67,27 64,27.67 64,28.5 64,29.33 64.67,30 65.5,30 66.33,30 67,29.33 67,28.5 67,27.67 66.33,27 65.5,27 Z
+					M 15,40 v 5 h 35 v -5 z
+					m 0,15 v 5 h 70 v -5 z
+					m 0,15 v 5 h 70 v -5 z
+				'
+				style='fill: var(--icon-color);'
+			/>
+		`;
+        svg.setAttribute('viewBox', '0 0 100 100');
+        return svg;
+    }
+    makeOverflowIcon() {
+        return this.makeIconFromPath(`
+			M 15 40
+			A 12.5 12.5 0 0 0 2.5 52.5
+			A 12.5 12.5 0 0 0 15 65
+			A 12.5 12.5 0 0 0 27.5 52.5
+			A 12.5 12.5 0 0 0 15 40
+			z
+	
+			M 50 40
+			A 12.5 12.5 0 0 0 37.5 52.5
+			A 12.5 12.5 0 0 0 50 65
+			A 12.5 12.5 0 0 0 62.5 52.5
+			A 12.5 12.5 0 0 0 50 40
+			z
+			
+			M 85 40
+			A 12.5 12.5 0 0 0 72.5 52.5
+			A 12.5 12.5 0 0 0 85 65
+			A 12.5 12.5 0 0 0 97.5 52.5
+			A 12.5 12.5 0 0 0 85 40
+			z
+		`);
+    }
 }

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

@@ -33,6 +33,11 @@ export interface ToolbarLocalization {
     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;

package/dist/src/toolbar/localization.js

@@ -24,6 +24,11 @@ export const defaultToolbarLocalization = {
     pickColorFromScreen: 'Pick color from screen',
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
     selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
+    documentProperties: 'Document',
+    backgroundColor: 'Background Color: ',
+    imageWidthOption: 'Width: ',
+    imageHeightOption: 'Height: ',
+    toggleOverflow: 'More',
     touchPanning: 'Touchscreen panning',
     freehandPen: 'Freehand',
     pressureSensitiveFreehandPen: 'Freehand (pressure sensitive)',

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

@@ -5,9 +5,11 @@ export default class ActionButtonWidget extends BaseWidget {
     protected makeIcon: () => Element | null;
     protected title: string;
     protected clickAction: () => void;
-    constructor(editor: Editor, id: string, makeIcon: () => Element | null, title: string, clickAction: () => void, localizationTable?: ToolbarLocalization);
+    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

@@ -1,10 +1,11 @@
 import BaseWidget from './BaseWidget';
 export default class ActionButtonWidget extends BaseWidget {
-    constructor(editor, id, makeIcon, title, clickAction, localizationTable) {
+    constructor(editor, id, makeIcon, title, clickAction, localizationTable, mustBeToplevel = false) {
         super(editor, id, localizationTable);
         this.makeIcon = makeIcon;
         this.title = title;
         this.clickAction = clickAction;
+        this.mustBeToplevel = mustBeToplevel;
     }
     handleClick() {
         this.clickAction();
@@ -18,4 +19,7 @@ export default class ActionButtonWidget extends BaseWidget {
     fillDropdown(_dropdown) {
         return false;
     }
+    canBeInOverflowMenu() {
+        return !this.mustBeToplevel;
+    }
 }

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

@@ -7,5 +7,5 @@ export default abstract class BaseToolWidget extends BaseWidget {
     protected targetTool: BaseTool;
     constructor(editor: Editor, targetTool: BaseTool, id: string, localizationTable?: ToolbarLocalization);
     protected handleClick(): void;
-    addTo(parent: HTMLElement): void;
+    addTo(parent: HTMLElement): HTMLElement;
 }

package/dist/src/toolbar/widgets/BaseToolWidget.js

@@ -37,7 +37,8 @@ export default class BaseToolWidget extends BaseWidget {
         }
     }
     addTo(parent) {
-        super.addTo(parent);
+        const result = super.addTo(parent);
         this.setSelected(this.targetTool.isEnabled());
+        return result;
     }
 }

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

@@ -36,14 +36,19 @@ export default abstract class BaseWidget {
     protected abstract handleClick(): void;
     protected get hasDropdown(): boolean;
     protected addSubWidget(widget: BaseWidget): void;
-    addTo(parent: HTMLElement): 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 */
-    protected setIsToplevel(toplevel: boolean): void;
+    setIsToplevel(toplevel: boolean): void;
     protected isDropdownVisible(): boolean;
     protected isSelected(): boolean;
     private createDropdownIcon;

package/dist/src/toolbar/widgets/BaseWidget.js

@@ -22,6 +22,7 @@ export default class BaseWidget {
         // Maps subWidget IDs to subWidgets.
         this.subWidgets = {};
         this.toplevel = true;
+        this.toolbarWidgetToggleListener = null;
         this.localizationTable = localizationTable !== null && localizationTable !== void 0 ? localizationTable : editor.localization;
         this.icon = null;
         this.container = document.createElement('div');
@@ -135,12 +136,14 @@ export default class BaseWidget {
         this.subWidgets[id] = widget;
     }
     // Adds this to [parent]. This can only be called once for each ToolbarWidget.
+    // Returns the element that was just added to `parent`.
     // @internal
     addTo(parent) {
         this.label.innerText = this.getTitle();
         this.setupActionBtnClickListener(this.button);
         this.icon = null;
         this.updateIcon();
+        this.container.replaceChildren();
         this.button.replaceChildren(this.icon, this.label);
         this.container.appendChild(this.button);
         __classPrivateFieldSet(this, _BaseWidget_hasDropdown, this.fillDropdown(this.dropdownContainer), "f");
@@ -148,7 +151,10 @@ export default class BaseWidget {
             this.dropdownIcon = this.createDropdownIcon();
             this.button.appendChild(this.dropdownIcon);
             this.container.appendChild(this.dropdownContainer);
-            this.editor.notifier.on(EditorEventType.ToolbarDropdownShown, (evt) => {
+            if (this.toolbarWidgetToggleListener) {
+                this.toolbarWidgetToggleListener.remove();
+            }
+            this.toolbarWidgetToggleListener = this.editor.notifier.on(EditorEventType.ToolbarDropdownShown, (evt) => {
                 if (evt.kind === EditorEventType.ToolbarDropdownShown
                     && evt.parentWidget !== this
                     // Don't hide if a submenu wash shown (it might be a submenu of
@@ -159,7 +165,11 @@ export default class BaseWidget {
             });
         }
         this.setDropdownVisible(false);
+        if (this.container.parentElement) {
+            this.container.remove();
+        }
         parent.appendChild(this.container);
+        return this.container;
     }
     updateIcon() {
         var _a, _b;
@@ -219,6 +229,18 @@ export default class BaseWidget {
         }
         this.repositionDropdown();
     }
+    canBeInOverflowMenu() {
+        return true;
+    }
+    getButtonWidth() {
+        return this.button.clientWidth;
+    }
+    isHidden() {
+        return this.container.style.display === 'none';
+    }
+    setHidden(hidden) {
+        this.container.style.display = hidden ? 'none' : '';
+    }
     repositionDropdown() {
         const dropdownBBox = this.dropdownContainer.getBoundingClientRect();
         const screenWidth = document.body.clientWidth;

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

@@ -0,0 +1,19 @@
+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 getBackgroundElem;
+    private setBackgroundColor;
+    private getBackgroundColor;
+    private updateImportExportRectSize;
+    private static idCounter;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+}

package/dist/src/toolbar/widgets/DocumentPropertiesWidget.js

@@ -0,0 +1,135 @@
+import Color4 from '../../Color4';
+import ImageBackground from '../../components/ImageBackground';
+import { EditorImageEventType } from '../../EditorImage';
+import Rect2 from '../../math/Rect2';
+import { EditorEventType } from '../../types';
+import makeColorInput from '../makeColorInput';
+import BaseWidget from './BaseWidget';
+export default class DocumentPropertiesWidget extends BaseWidget {
+    constructor(editor, localizationTable) {
+        super(editor, 'zoom-widget', localizationTable);
+        this.updateDropdownContent = () => { };
+        this.dropdownUpdateQueued = false;
+        // Make it possible to open the dropdown, even if this widget isn't selected.
+        this.container.classList.add('dropdownShowable');
+        this.editor.notifier.on(EditorEventType.UndoRedoStackUpdated, () => {
+            this.queueDropdownUpdate();
+        });
+        this.editor.image.notifier.on(EditorImageEventType.ExportViewportChanged, () => {
+            this.queueDropdownUpdate();
+        });
+    }
+    getTitle() {
+        return this.localizationTable.documentProperties;
+    }
+    createIcon() {
+        return this.editor.icons.makeConfigureDocumentIcon();
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
+        this.queueDropdownUpdate();
+    }
+    queueDropdownUpdate() {
+        if (!this.dropdownUpdateQueued) {
+            requestAnimationFrame(() => this.updateDropdown());
+            this.dropdownUpdateQueued = true;
+        }
+    }
+    updateDropdown() {
+        this.dropdownUpdateQueued = false;
+        if (this.isDropdownVisible()) {
+            this.updateDropdownContent();
+        }
+    }
+    getBackgroundElem() {
+        const backgroundComponents = [];
+        for (const component of this.editor.image.getBackgroundComponents()) {
+            if (component instanceof ImageBackground) {
+                backgroundComponents.push(component);
+            }
+        }
+        if (backgroundComponents.length === 0) {
+            return null;
+        }
+        // Return the last background component in the list — the component with highest z-index.
+        return backgroundComponents[backgroundComponents.length - 1];
+    }
+    setBackgroundColor(color) {
+        this.editor.dispatch(this.editor.setBackgroundColor(color));
+    }
+    getBackgroundColor() {
+        var _a, _b;
+        const background = this.getBackgroundElem();
+        return (_b = (_a = background === null || background === void 0 ? void 0 : background.getStyle()) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : Color4.transparent;
+    }
+    updateImportExportRectSize(size) {
+        const filterDimension = (dim) => {
+            if (dim !== undefined && (!isFinite(dim) || dim <= 0)) {
+                dim = 100;
+            }
+            return dim;
+        };
+        const width = filterDimension(size.width);
+        const height = filterDimension(size.height);
+        const currentRect = this.editor.getImportExportRect();
+        const newRect = new Rect2(currentRect.x, currentRect.y, width !== null && width !== void 0 ? width : currentRect.w, height !== null && height !== void 0 ? height : currentRect.h);
+        this.editor.dispatch(this.editor.image.setImportExportRect(newRect));
+        this.editor.queueRerender();
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        const backgroundColorRow = document.createElement('div');
+        const backgroundColorLabel = document.createElement('label');
+        backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
+        const [colorInput, backgroundColorInputContainer, setBgColorInputValue] = makeColorInput(this.editor, color => {
+            if (!color.eq(this.getBackgroundColor())) {
+                this.setBackgroundColor(color);
+            }
+        });
+        colorInput.id = `document-properties-color-input-${DocumentPropertiesWidget.idCounter++}`;
+        backgroundColorLabel.htmlFor = colorInput.id;
+        backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
+        const addDimensionRow = (labelContent, onChange) => {
+            const row = document.createElement('div');
+            const label = document.createElement('label');
+            const spacer = document.createElement('span');
+            const input = document.createElement('input');
+            label.innerText = labelContent;
+            input.type = 'number';
+            input.min = '0';
+            input.id = `document-properties-dimension-row-${DocumentPropertiesWidget.idCounter++}`;
+            label.htmlFor = input.id;
+            spacer.style.flexGrow = '1';
+            input.style.flexGrow = '2';
+            input.style.width = '25px';
+            row.style.display = 'flex';
+            input.oninput = () => {
+                onChange(parseFloat(input.value));
+            };
+            row.replaceChildren(label, spacer, input);
+            return {
+                setValue: (value) => {
+                    input.value = value.toString();
+                },
+                element: row,
+            };
+        };
+        const imageWidthRow = addDimensionRow(this.localizationTable.imageWidthOption, (value) => {
+            this.updateImportExportRectSize({ width: value });
+        });
+        const imageHeightRow = addDimensionRow(this.localizationTable.imageHeightOption, (value) => {
+            this.updateImportExportRectSize({ height: value });
+        });
+        this.updateDropdownContent = () => {
+            setBgColorInputValue(this.getBackgroundColor());
+            const importExportRect = this.editor.getImportExportRect();
+            imageWidthRow.setValue(importExportRect.width);
+            imageHeightRow.setValue(importExportRect.height);
+        };
+        this.updateDropdownContent();
+        container.replaceChildren(backgroundColorRow, imageWidthRow.element, imageHeightRow.element);
+        dropdown.replaceChildren(container);
+        return true;
+    }
+}
+DocumentPropertiesWidget.idCounter = 0;

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