js-draw 0.18.1 → 0.18.2

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

@@ -0,0 +1,120 @@
+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);
+        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();
+        }
+    }
+    setBackgroundColor(color) {
+        this.editor.dispatch(this.editor.setBackgroundColor(color));
+    }
+    getBackgroundColor() {
+        return this.editor.estimateBackgroundColor();
+    }
+    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');
+        container.classList.add(`${toolbarCSSPrefix}spacedList`);
+        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 = `${toolbarCSSPrefix}docPropertiesColorInput-${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 = `${toolbarCSSPrefix}docPropertiesDimensionRow-${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/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/mjs/src/toolbar/widgets/EraserToolWidget.mjs

@@ -0,0 +1,57 @@
+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);
+        this.tool = tool;
+        this.thicknessInput = null;
+        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+            if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === this.tool) {
+                this.updateInputs();
+                this.updateIcon();
+            }
+        });
+    }
+    getTitle() {
+        return this.localizationTable.eraser;
+    }
+    createIcon() {
+        return this.editor.icons.makeEraserIcon(this.tool.getThickness());
+    }
+    updateInputs() {
+        if (this.thicknessInput) {
+            this.thicknessInput.value = `${this.tool.getThickness()}`;
+        }
+    }
+    fillDropdown(dropdown) {
+        const thicknessLabel = document.createElement('label');
+        this.thicknessInput = document.createElement('input');
+        this.thicknessInput.type = 'range';
+        this.thicknessInput.min = '4';
+        this.thicknessInput.max = '40';
+        this.thicknessInput.oninput = () => {
+            this.tool.setThickness(parseFloat(this.thicknessInput.value));
+        };
+        this.thicknessInput.id = `${toolbarCSSPrefix}eraserThicknessInput${EraserToolWidget.nextThicknessInputId++}`;
+        thicknessLabel.innerText = this.localizationTable.thicknessLabel;
+        thicknessLabel.htmlFor = this.thicknessInput.id;
+        this.updateInputs();
+        dropdown.replaceChildren(thicknessLabel, this.thicknessInput);
+        return true;
+    }
+    serializeState() {
+        return Object.assign(Object.assign({}, super.serializeState()), { thickness: this.tool.getThickness() });
+    }
+    deserializeFrom(state) {
+        super.deserializeFrom(state);
+        if (state.thickness) {
+            const parsedThickness = parseFloat(state.thickness);
+            if (typeof parsedThickness !== 'number' || !isFinite(parsedThickness)) {
+                throw new Error(`Deserializing property ${parsedThickness} is not a number or is not finite.`);
+            }
+            this.tool.setThickness(parsedThickness);
+        }
+    }
+}
+EraserToolWidget.nextThicknessInputId = 0;

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/mjs/src/toolbar/widgets/HandToolWidget.mjs

@@ -0,0 +1,172 @@
+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');
+    const decreaseButton = document.createElement('button');
+    const resetViewButton = document.createElement('button');
+    const zoomLevelDisplay = document.createElement('span');
+    increaseButton.innerText = '+';
+    decreaseButton.innerText = '-';
+    resetViewButton.innerText = localizationTable.resetView;
+    zoomLevelRow.replaceChildren(zoomLevelDisplay, increaseButton, decreaseButton, resetViewButton);
+    zoomLevelRow.classList.add(`${toolbarCSSPrefix}zoomLevelEditor`);
+    zoomLevelDisplay.classList.add('zoomDisplay');
+    let lastZoom;
+    const updateZoomDisplay = () => {
+        let zoomLevel = editor.viewport.getScaleFactor() * 100;
+        if (zoomLevel > 0.1) {
+            zoomLevel = Math.round(zoomLevel * 10) / 10;
+        }
+        else {
+            zoomLevel = Math.round(zoomLevel * 1000) / 1000;
+        }
+        if (zoomLevel !== lastZoom) {
+            zoomLevelDisplay.innerText = localizationTable.zoomLevel(zoomLevel);
+            lastZoom = zoomLevel;
+        }
+    };
+    updateZoomDisplay();
+    editor.notifier.on(EditorEventType.ViewportChanged, (event) => {
+        if (event.kind === EditorEventType.ViewportChanged) {
+            updateZoomDisplay();
+            // Can't reset if already reset.
+            resetViewButton.disabled = event.newTransform.eq(Mat33.identity);
+        }
+    });
+    const zoomBy = (factor) => {
+        const screenCenter = editor.viewport.visibleRect.center;
+        const transformUpdate = Mat33.scaling2D(factor, screenCenter);
+        editor.dispatch(Viewport.transformBy(transformUpdate), false);
+    };
+    increaseButton.onclick = () => {
+        zoomBy(5.0 / 4);
+    };
+    decreaseButton.onclick = () => {
+        zoomBy(4.0 / 5);
+    };
+    resetViewButton.onclick = () => {
+        editor.dispatch(Viewport.transformBy(editor.viewport.canvasToScreenTransform.inverse()), true);
+    };
+    return zoomLevelRow;
+};
+class ZoomWidget extends BaseWidget {
+    constructor(editor, localizationTable) {
+        super(editor, 'zoom-widget', localizationTable);
+        // Make it possible to open the dropdown, even if this widget isn't selected.
+        this.container.classList.add('dropdownShowable');
+    }
+    getTitle() {
+        return this.localizationTable.zoom;
+    }
+    createIcon() {
+        return this.editor.icons.makeZoomIcon();
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
+    }
+    fillDropdown(dropdown) {
+        dropdown.replaceChildren(makeZoomControl(this.localizationTable, this.editor));
+        return true;
+    }
+}
+class HandModeWidget extends BaseWidget {
+    constructor(editor, tool, flag, makeIcon, title, localizationTable) {
+        super(editor, `pan-mode-${flag}`, localizationTable);
+        this.tool = tool;
+        this.flag = flag;
+        this.makeIcon = makeIcon;
+        this.title = title;
+        editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+            if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === tool) {
+                const allEnabled = !!(tool.getMode() & PanZoomMode.SinglePointerGestures);
+                this.setSelected(!!(tool.getMode() & flag) || allEnabled);
+                // Unless this widget toggles all single pointer gestures, toggling while
+                // single pointer gestures are enabled should have no effect
+                this.setDisabled(allEnabled && flag !== PanZoomMode.SinglePointerGestures);
+            }
+        });
+        this.setSelected(false);
+    }
+    setModeFlag(enabled) {
+        this.tool.setModeEnabled(this.flag, enabled);
+    }
+    handleClick() {
+        this.setModeFlag(!this.isSelected());
+    }
+    getTitle() {
+        return this.title;
+    }
+    createIcon() {
+        return this.makeIcon();
+    }
+    fillDropdown(_dropdown) {
+        return false;
+    }
+}
+export default class HandToolWidget extends BaseToolWidget {
+    constructor(editor, 
+    // Pan zoom tool that overrides all other tools (enabling this tool for a device
+    // causes that device to pan/zoom instead of interact with the primary tools)
+    overridePanZoomTool, localizationTable) {
+        const primaryHandTool = HandToolWidget.getPrimaryHandTool(editor.toolController);
+        const tool = primaryHandTool !== null && primaryHandTool !== void 0 ? primaryHandTool : overridePanZoomTool;
+        super(editor, tool, 'hand-tool-widget', localizationTable);
+        this.overridePanZoomTool = overridePanZoomTool;
+        // Only allow toggling a hand tool if we're using the primary hand tool and not the override
+        // hand tool for this button.
+        this.allowTogglingBaseTool = primaryHandTool !== null;
+        // Allow showing/hiding the dropdown, even if `overridePanZoomTool` isn't enabled.
+        if (!this.allowTogglingBaseTool) {
+            this.container.classList.add('dropdownShowable');
+        }
+        // Controls for the overriding hand tool.
+        const touchPanningWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
+        const rotationLockWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable);
+        this.addSubWidget(touchPanningWidget);
+        this.addSubWidget(rotationLockWidget);
+        this.addSubWidget(new ZoomWidget(editor, localizationTable));
+    }
+    static getPrimaryHandTool(toolController) {
+        const primaryPanZoomToolList = toolController.getPrimaryTools().filter(tool => tool instanceof PanZoom);
+        const primaryPanZoomTool = primaryPanZoomToolList[0];
+        return primaryPanZoomTool;
+    }
+    getTitle() {
+        return this.localizationTable.handTool;
+    }
+    createIcon() {
+        return this.editor.icons.makeHandToolIcon();
+    }
+    handleClick() {
+        if (this.allowTogglingBaseTool) {
+            super.handleClick();
+        }
+        else {
+            this.setDropdownVisible(!this.isDropdownVisible());
+        }
+    }
+    setSelected(selected) {
+        if (this.allowTogglingBaseTool) {
+            super.setSelected(selected);
+        }
+    }
+    serializeState() {
+        const toolMode = this.overridePanZoomTool.getMode();
+        return Object.assign(Object.assign({}, super.serializeState()), { touchPanning: toolMode & PanZoomMode.OneFingerTouchGestures, rotationLocked: toolMode & PanZoomMode.RotationLocked });
+    }
+    deserializeFrom(state) {
+        if (state.touchPanning !== undefined) {
+            this.overridePanZoomTool.setModeEnabled(PanZoomMode.OneFingerTouchGestures, state.touchPanning);
+        }
+        if (state.rotationLocked !== undefined) {
+            this.overridePanZoomTool.setModeEnabled(PanZoomMode.RotationLocked, state.rotationLocked);
+        }
+        super.deserializeFrom(state);
+    }
+}

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/mjs/src/toolbar/widgets/InsertImageWidget.mjs

@@ -0,0 +1,170 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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);
+        super(editor, 'insert-image-widget', () => editor.icons.makeInsertImageIcon(), localization.image, () => this.onClicked());
+        this.imageSelectionOverlay = document.createElement('div');
+        this.imageSelectionOverlay.classList.add('toolbar-image-selection-overlay');
+        this.fillOverlay();
+        this.editor.createHTMLOverlay(this.imageSelectionOverlay);
+        this.imageSelectionOverlay.style.display = 'none';
+    }
+    fillOverlay() {
+        const container = document.createElement('div');
+        const chooseImageRow = document.createElement('div');
+        const altTextRow = document.createElement('div');
+        this.imagePreview = document.createElement('img');
+        this.statusView = document.createElement('div');
+        const actionButtonRow = document.createElement('div');
+        actionButtonRow.classList.add('action-button-row');
+        this.submitButton = document.createElement('button');
+        const cancelButton = document.createElement('button');
+        this.imageFileInput = document.createElement('input');
+        this.imageAltTextInput = document.createElement('input');
+        const imageFileInputLabel = document.createElement('label');
+        const imageAltTextLabel = document.createElement('label');
+        const fileInputId = `insert-image-file-input-${InsertImageWidget.nextInputId++}`;
+        const altTextInputId = `insert-image-alt-text-input-${InsertImageWidget.nextInputId++}`;
+        this.imageFileInput.setAttribute('id', fileInputId);
+        this.imageAltTextInput.setAttribute('id', altTextInputId);
+        imageAltTextLabel.htmlFor = altTextInputId;
+        imageFileInputLabel.htmlFor = fileInputId;
+        this.imageFileInput.accept = 'image/*';
+        imageAltTextLabel.innerText = this.localizationTable.inputAltText;
+        imageFileInputLabel.innerText = this.localizationTable.chooseFile;
+        this.imageFileInput.type = 'file';
+        this.imageAltTextInput.type = 'text';
+        this.statusView.setAttribute('aria-live', 'polite');
+        cancelButton.innerText = this.localizationTable.cancel;
+        this.submitButton.innerText = this.localizationTable.submit;
+        this.imageFileInput.onchange = () => __awaiter(this, void 0, void 0, function* () {
+            if (this.imageFileInput.value === '' || !this.imageFileInput.files || !this.imageFileInput.files[0]) {
+                this.imagePreview.style.display = 'none';
+                this.submitButton.disabled = true;
+                return;
+            }
+            this.imagePreview.style.display = 'block';
+            const image = this.imageFileInput.files[0];
+            let data = null;
+            try {
+                data = yield fileToBase64(image);
+            }
+            catch (e) {
+                this.statusView.innerText = this.localizationTable.imageLoadError(e);
+            }
+            this.imageBase64URL = data;
+            if (data) {
+                this.imagePreview.src = data;
+                this.submitButton.disabled = false;
+                this.updateImageSizeDisplay();
+            }
+            else {
+                this.submitButton.disabled = true;
+                this.statusView.innerText = '';
+            }
+        });
+        cancelButton.onclick = () => {
+            this.hideDialog();
+        };
+        this.imageSelectionOverlay.onclick = (evt) => {
+            // If clicking on the backdrop
+            if (evt.target === this.imageSelectionOverlay) {
+                this.hideDialog();
+            }
+        };
+        chooseImageRow.replaceChildren(imageFileInputLabel, this.imageFileInput);
+        altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
+        actionButtonRow.replaceChildren(cancelButton, this.submitButton);
+        container.replaceChildren(chooseImageRow, altTextRow, this.imagePreview, this.statusView, actionButtonRow);
+        this.imageSelectionOverlay.replaceChildren(container);
+    }
+    hideDialog() {
+        this.imageSelectionOverlay.style.display = 'none';
+    }
+    updateImageSizeDisplay() {
+        var _a;
+        const imageData = (_a = this.imageBase64URL) !== null && _a !== void 0 ? _a : '';
+        const sizeInKiB = imageData.length / 1024;
+        const sizeInMiB = sizeInKiB / 1024;
+        let units = 'KiB';
+        let size = sizeInKiB;
+        if (sizeInMiB >= 1) {
+            size = sizeInMiB;
+            units = 'MiB';
+        }
+        this.statusView.innerText = this.localizationTable.imageSize(Math.round(size), units);
+    }
+    clearInputs() {
+        this.imageFileInput.value = '';
+        this.imageAltTextInput.value = '';
+        this.imagePreview.style.display = 'none';
+        this.submitButton.disabled = true;
+        this.statusView.innerText = '';
+    }
+    onClicked() {
+        var _a;
+        this.imageSelectionOverlay.style.display = '';
+        this.clearInputs();
+        this.imageFileInput.focus();
+        const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
+        const selectedObjects = selectionTools.map(tool => tool.getSelectedObjects()).flat();
+        let editingImage = null;
+        if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent) {
+            editingImage = selectedObjects[0];
+            this.imageAltTextInput.value = (_a = editingImage.getAltText()) !== null && _a !== void 0 ? _a : '';
+            this.imagePreview.style.display = 'block';
+            this.submitButton.disabled = false;
+            this.imageBase64URL = editingImage.getURL();
+            this.imagePreview.src = this.imageBase64URL;
+            this.updateImageSizeDisplay();
+        }
+        else {
+            selectionTools.forEach(tool => tool.clearSelection());
+        }
+        this.submitButton.onclick = () => __awaiter(this, void 0, void 0, function* () {
+            var _b;
+            if (!this.imageBase64URL) {
+                return;
+            }
+            const image = new Image();
+            image.src = this.imageBase64URL;
+            image.setAttribute('alt', this.imageAltTextInput.value);
+            const component = yield ImageComponent.fromImage(image, Mat33.identity);
+            if (component.getBBox().area === 0) {
+                this.statusView.innerText = this.localizationTable.errorImageHasZeroSize;
+                return;
+            }
+            this.imageSelectionOverlay.style.display = 'none';
+            if (editingImage) {
+                const eraseCommand = new Erase([editingImage]);
+                yield this.editor.dispatch(uniteCommands([
+                    EditorImage.addElement(component),
+                    component.transformBy(editingImage.getTransformation()),
+                    component.setZIndex(editingImage.getZIndex()),
+                    eraseCommand,
+                ]));
+                (_b = selectionTools[0]) === null || _b === void 0 ? void 0 : _b.setSelection([component]);
+            }
+            else {
+                yield this.editor.addAndCenterComponents([component]);
+            }
+        });
+    }
+}
+InsertImageWidget.nextInputId = 0;

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/mjs/src/toolbar/widgets/OverflowWidget.mjs

@@ -0,0 +1,71 @@
+import  BaseWidget  from './BaseWidget.mjs';
+export default class OverflowWidget extends BaseWidget {
+    constructor(editor, localizationTable) {
+        var _a;
+        super(editor, 'overflow-widget', localizationTable);
+        this.overflowChildren = [];
+        this.container.classList.add('toolbar-overflow-widget');
+        // Make the dropdown openable
+        this.container.classList.add('dropdownShowable');
+        (_a = this.overflowContainer) !== null && _a !== void 0 ? _a : (this.overflowContainer = document.createElement('div'));
+    }
+    getTitle() {
+        return this.localizationTable.toggleOverflow;
+    }
+    createIcon() {
+        return this.editor.icons.makeOverflowIcon();
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
+    }
+    fillDropdown(dropdown) {
+        var _a;
+        (_a = this.overflowContainer) !== null && _a !== void 0 ? _a : (this.overflowContainer = document.createElement('div'));
+        if (this.overflowContainer.parentElement) {
+            this.overflowContainer.remove();
+        }
+        this.overflowContainer.classList.add('toolbar-overflow-widget-overflow-list');
+        dropdown.appendChild(this.overflowContainer);
+        return true;
+    }
+    /**
+     * Removes all `BaseWidget`s from this and returns them.
+     */
+    clearChildren() {
+        this.overflowContainer.replaceChildren();
+        this.container.classList.remove('horizontal');
+        const overflowChildren = this.overflowChildren;
+        this.overflowChildren = [];
+        return overflowChildren;
+    }
+    getChildWidgets() {
+        return [...this.overflowChildren];
+    }
+    hasAsChild(widget) {
+        for (const otherWidget of this.overflowChildren) {
+            if (widget === otherWidget) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Adds `widget` to this.
+     * `widget`'s previous parent is still responsible
+     * for serializing/deserializing its state.
+     */
+    addToOverflow(widget) {
+        this.overflowChildren.push(widget);
+        widget.addTo(this.overflowContainer);
+        widget.setIsToplevel(false);
+        // Switch to a horizontal layout if enough children
+        if (this.overflowChildren.length > 2) {
+            this.container.classList.add('horizontal');
+        }
+    }
+    // This always returns false.
+    // Don't try to move the overflow menu to itself.
+    canBeInOverflowMenu() {
+        return false;
+    }
+}