js-draw 0.23.1 → 0.24.0

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

@@ -1,201 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const Erase_1 = __importDefault(require("../../commands/Erase"));
-const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
-const BackgroundComponent_1 = __importStar(require("../../components/BackgroundComponent"));
-const EditorImage_1 = require("../../EditorImage");
-const Rect2_1 = __importDefault(require("../../math/Rect2"));
-const types_1 = require("../../types");
-const HTMLToolbar_1 = require("../HTMLToolbar");
-const makeColorInput_1 = __importDefault(require("../makeColorInput"));
-const BaseWidget_1 = __importDefault(require("./BaseWidget"));
-class DocumentPropertiesWidget extends BaseWidget_1.default {
-    constructor(editor, localizationTable) {
-        super(editor, 'document-properties-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(types_1.EditorEventType.UndoRedoStackUpdated, () => {
-            this.queueDropdownUpdate();
-        });
-        this.editor.image.notifier.on(EditorImage_1.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();
-    }
-    removeBackgroundComponents() {
-        const previousBackgrounds = [];
-        for (const component of this.editor.image.getBackgroundComponents()) {
-            if (component instanceof BackgroundComponent_1.default) {
-                previousBackgrounds.push(component);
-            }
-        }
-        return new Erase_1.default(previousBackgrounds);
-    }
-    /** Replace existing background components with a background of the given type. */
-    setBackgroundType(backgroundType) {
-        const prevBackgroundColor = this.editor.estimateBackgroundColor();
-        const newBackground = new BackgroundComponent_1.default(backgroundType, prevBackgroundColor);
-        const addBackgroundCommand = this.editor.image.addElement(newBackground);
-        return (0, uniteCommands_1.default)([this.removeBackgroundComponents(), addBackgroundCommand]);
-    }
-    /** Returns the type of the topmost background component */
-    getBackgroundType() {
-        const backgroundComponents = this.editor.image.getBackgroundComponents();
-        for (let i = backgroundComponents.length - 1; i >= 0; i--) {
-            const component = backgroundComponents[i];
-            if (component instanceof BackgroundComponent_1.default) {
-                return component.getBackgroundType();
-            }
-        }
-        return BackgroundComponent_1.BackgroundType.None;
-    }
-    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_1.default(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(`${HTMLToolbar_1.toolbarCSSPrefix}spacedList`);
-        const backgroundColorRow = document.createElement('div');
-        const backgroundColorLabel = document.createElement('label');
-        backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
-        const [colorInput, backgroundColorInputContainer, setBgColorInputValue] = (0, makeColorInput_1.default)(this.editor, color => {
-            if (!color.eq(this.getBackgroundColor())) {
-                this.setBackgroundColor(color);
-            }
-        });
-        colorInput.id = `${HTMLToolbar_1.toolbarCSSPrefix}docPropertiesColorInput-${DocumentPropertiesWidget.idCounter++}`;
-        backgroundColorLabel.htmlFor = colorInput.id;
-        backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
-        const useGridRow = document.createElement('div');
-        const useGridLabel = document.createElement('label');
-        const useGridCheckbox = document.createElement('input');
-        useGridCheckbox.id = `${HTMLToolbar_1.toolbarCSSPrefix}docPropertiesUseGridCheckbox-${DocumentPropertiesWidget.idCounter++}`;
-        useGridLabel.htmlFor = useGridCheckbox.id;
-        useGridCheckbox.type = 'checkbox';
-        useGridLabel.innerText = this.localizationTable.useGridOption;
-        useGridCheckbox.oninput = () => {
-            const prevBackgroundType = this.getBackgroundType();
-            const wasGrid = prevBackgroundType === BackgroundComponent_1.BackgroundType.Grid;
-            if (wasGrid === useGridCheckbox.checked) {
-                // Already the requested background type.
-                return;
-            }
-            let newBackgroundType = BackgroundComponent_1.BackgroundType.SolidColor;
-            if (useGridCheckbox.checked) {
-                newBackgroundType = BackgroundComponent_1.BackgroundType.Grid;
-            }
-            this.editor.dispatch(this.setBackgroundType(newBackgroundType));
-        };
-        useGridRow.replaceChildren(useGridLabel, useGridCheckbox);
-        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 = `${HTMLToolbar_1.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);
-            useGridCheckbox.checked = this.getBackgroundType() === BackgroundComponent_1.BackgroundType.Grid;
-        };
-        this.updateDropdownContent();
-        container.replaceChildren(backgroundColorRow, useGridRow, imageWidthRow.element, imageHeightRow.element);
-        dropdown.replaceChildren(container);
-        return true;
-    }
-}
-DocumentPropertiesWidget.idCounter = 0;
-exports.default = DocumentPropertiesWidget;

package/dist/cjs/src/toolbar/widgets/EraserToolWidget.js

@@ -1,63 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const types_1 = require("../../types");
-const HTMLToolbar_1 = require("../HTMLToolbar");
-const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
-class EraserToolWidget extends BaseToolWidget_1.default {
-    constructor(editor, tool, localizationTable) {
-        super(editor, tool, 'eraser-tool-widget', localizationTable);
-        this.tool = tool;
-        this.thicknessInput = null;
-        this.editor.notifier.on(types_1.EditorEventType.ToolUpdated, toolEvt => {
-            if (toolEvt.kind === types_1.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 = `${HTMLToolbar_1.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;
-exports.default = EraserToolWidget;

package/dist/cjs/src/toolbar/widgets/HandToolWidget.js

@@ -1,201 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const Mat33_1 = __importDefault(require("../../math/Mat33"));
-const PanZoom_1 = __importStar(require("../../tools/PanZoom"));
-const types_1 = require("../../types");
-const Viewport_1 = __importDefault(require("../../Viewport"));
-const HTMLToolbar_1 = require("../HTMLToolbar");
-const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
-const BaseWidget_1 = __importDefault(require("./BaseWidget"));
-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(`${HTMLToolbar_1.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(types_1.EditorEventType.ViewportChanged, (event) => {
-        if (event.kind === types_1.EditorEventType.ViewportChanged) {
-            updateZoomDisplay();
-            // Can't reset if already reset.
-            resetViewButton.disabled = event.newTransform.eq(Mat33_1.default.identity);
-        }
-    });
-    const zoomBy = (factor) => {
-        const screenCenter = editor.viewport.visibleRect.center;
-        const transformUpdate = Mat33_1.default.scaling2D(factor, screenCenter);
-        editor.dispatch(Viewport_1.default.transformBy(transformUpdate), false);
-    };
-    increaseButton.onclick = () => {
-        zoomBy(5.0 / 4);
-    };
-    decreaseButton.onclick = () => {
-        zoomBy(4.0 / 5);
-    };
-    resetViewButton.onclick = () => {
-        editor.dispatch(Viewport_1.default.transformBy(editor.viewport.canvasToScreenTransform.inverse()), true);
-    };
-    return zoomLevelRow;
-};
-class ZoomWidget extends BaseWidget_1.default {
-    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_1.default {
-    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(types_1.EditorEventType.ToolUpdated, toolEvt => {
-            if (toolEvt.kind === types_1.EditorEventType.ToolUpdated && toolEvt.tool === tool) {
-                const allEnabled = !!(tool.getMode() & PanZoom_1.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 !== PanZoom_1.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;
-    }
-}
-class HandToolWidget extends BaseToolWidget_1.default {
-    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, PanZoom_1.PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
-        const rotationLockWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoom_1.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_1.default);
-        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 & PanZoom_1.PanZoomMode.OneFingerTouchGestures, rotationLocked: toolMode & PanZoom_1.PanZoomMode.RotationLocked });
-    }
-    deserializeFrom(state) {
-        if (state.touchPanning !== undefined) {
-            this.overridePanZoomTool.setModeEnabled(PanZoom_1.PanZoomMode.OneFingerTouchGestures, state.touchPanning);
-        }
-        if (state.rotationLocked !== undefined) {
-            this.overridePanZoomTool.setModeEnabled(PanZoom_1.PanZoomMode.RotationLocked, state.rotationLocked);
-        }
-        super.deserializeFrom(state);
-    }
-}
-exports.default = HandToolWidget;

package/dist/cjs/src/toolbar/widgets/InsertImageWidget.js

@@ -1,176 +0,0 @@
-"use strict";
-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());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const ImageComponent_1 = __importDefault(require("../../components/ImageComponent"));
-const Erase_1 = __importDefault(require("../../commands/Erase"));
-const EditorImage_1 = __importDefault(require("../../EditorImage"));
-const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
-const SelectionTool_1 = __importDefault(require("../../tools/SelectionTool/SelectionTool"));
-const Mat33_1 = __importDefault(require("../../math/Mat33"));
-const fileToBase64_1 = __importDefault(require("../../util/fileToBase64"));
-const ActionButtonWidget_1 = __importDefault(require("./ActionButtonWidget"));
-class InsertImageWidget extends ActionButtonWidget_1.default {
-    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 (0, fileToBase64_1.default)(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_1.default);
-        const selectedObjects = selectionTools.map(tool => tool.getSelectedObjects()).flat();
-        let editingImage = null;
-        if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent_1.default) {
-            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_1.default.fromImage(image, Mat33_1.default.identity);
-            if (component.getBBox().area === 0) {
-                this.statusView.innerText = this.localizationTable.errorImageHasZeroSize;
-                return;
-            }
-            this.imageSelectionOverlay.style.display = 'none';
-            if (editingImage) {
-                const eraseCommand = new Erase_1.default([editingImage]);
-                yield this.editor.dispatch((0, uniteCommands_1.default)([
-                    EditorImage_1.default.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;
-exports.default = InsertImageWidget;