js-draw 0.23.0 → 0.24.0

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

@@ -0,0 +1,78 @@
+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;
+    /**
+     * Adds this to `parent`.
+     * Returns the element that was just added to `parent`.
+     * @internal
+     */
+    addTo(parent: HTMLElement): HTMLElement;
+    protected updateIcon(): void;
+    setDisabled(disabled: boolean): void;
+    setSelected(selected: boolean): void;
+    private hideDropdownTimeout;
+    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/mjs/toolbar/widgets/BaseWidget.mjs

@@ -0,0 +1,357 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _BaseWidget_hasDropdown;
+import  ToolbarShortcutHandler  from '../../tools/ToolbarShortcutHandler.mjs';
+import  { EditorEventType, InputEvtType }  from '../../types.mjs';
+import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
+var BaseWidget = /** @class */ (function () {
+    function BaseWidget(editor, id, localizationTable) {
+        var _this = this;
+        this.editor = editor;
+        this.id = id;
+        _BaseWidget_hasDropdown.set(this, void 0);
+        this.disabled = false;
+        // Maps subWidget IDs to subWidgets.
+        this.subWidgets = {};
+        this.toplevel = true;
+        this.toolbarWidgetToggleListener = null;
+        this.hideDropdownTimeout = null;
+        this.localizationTable = localizationTable !== null && localizationTable !== void 0 ? localizationTable : editor.localization;
+        this.icon = null;
+        this.container = document.createElement('div');
+        this.container.classList.add("".concat(toolbarCSSPrefix, "toolContainer"));
+        this.dropdownContainer = document.createElement('div');
+        this.dropdownContainer.classList.add("".concat(toolbarCSSPrefix, "dropdown"));
+        this.dropdownContainer.classList.add('hidden');
+        __classPrivateFieldSet(this, _BaseWidget_hasDropdown, false, "f");
+        this.button = document.createElement('div');
+        this.button.classList.add("".concat(toolbarCSSPrefix, "button"));
+        this.label = document.createElement('label');
+        this.button.setAttribute('role', 'button');
+        this.button.tabIndex = 0;
+        var toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler);
+        // If the onKeyPress function has been extended and the editor is configured to send keypress events to
+        // toolbar widgets,
+        if (toolbarShortcutHandlers.length > 0 && this.onKeyPress !== BaseWidget.prototype.onKeyPress) {
+            toolbarShortcutHandlers[0].registerListener(function (event) { return _this.onKeyPress(event); });
+        }
+    }
+    BaseWidget.prototype.getId = function () {
+        return this.id;
+    };
+    /**
+     * 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`.
+     */
+    BaseWidget.prototype.getUniqueIdIn = function (container) {
+        var id = this.getId();
+        var idCounter = 0;
+        while (id in container && container[id] !== this) {
+            id = this.getId() + '-' + idCounter.toString();
+            idCounter++;
+        }
+        return id;
+    };
+    // Add content to the widget's associated dropdown menu.
+    // Returns true if such a menu should be created, false otherwise.
+    BaseWidget.prototype.fillDropdown = function (dropdown) {
+        if (Object.keys(this.subWidgets).length === 0) {
+            return false;
+        }
+        for (var widgetId in this.subWidgets) {
+            var widget = this.subWidgets[widgetId];
+            widget.addTo(dropdown);
+            widget.setIsToplevel(false);
+        }
+        return true;
+    };
+    BaseWidget.prototype.setupActionBtnClickListener = function (button) {
+        var _this = this;
+        var clickTriggers = { Enter: true, ' ': true, };
+        button.onkeydown = function (evt) {
+            var handled = false;
+            if (evt.key in clickTriggers) {
+                if (!_this.disabled) {
+                    _this.handleClick();
+                    handled = true;
+                }
+            }
+            // If we didn't do anything with the event, send it to the editor.
+            if (!handled) {
+                handled = _this.editor.toolController.dispatchInputEvent({
+                    kind: InputEvtType.KeyPressEvent,
+                    key: evt.key,
+                    ctrlKey: evt.ctrlKey || evt.metaKey,
+                    altKey: evt.altKey,
+                });
+            }
+            if (handled) {
+                evt.preventDefault();
+            }
+        };
+        button.onkeyup = function (evt) {
+            if (evt.key in clickTriggers) {
+                return;
+            }
+            var handled = _this.editor.toolController.dispatchInputEvent({
+                kind: InputEvtType.KeyUpEvent,
+                key: evt.key,
+                ctrlKey: evt.ctrlKey || evt.metaKey,
+                altKey: evt.altKey,
+            });
+            if (handled) {
+                evt.preventDefault();
+            }
+        };
+        button.onclick = function () {
+            if (!_this.disabled) {
+                _this.handleClick();
+            }
+        };
+    };
+    // Add a listener that is triggered when a key is pressed.
+    // Listeners will fire regardless of whether this widget is selected and require that
+    // {@link Editor.toolController} to have an enabled {@link ToolbarShortcutHandler} tool.
+    BaseWidget.prototype.onKeyPress = function (_event) {
+        return false;
+    };
+    Object.defineProperty(BaseWidget.prototype, "hasDropdown", {
+        get: function () {
+            return __classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // Add a widget to this' dropdown. Must be called before this.addTo.
+    BaseWidget.prototype.addSubWidget = function (widget) {
+        // Generate a unique ID for the widget.
+        var id = widget.getUniqueIdIn(this.subWidgets);
+        this.subWidgets[id] = widget;
+    };
+    /**
+     * Adds this to `parent`.
+     * Returns the element that was just added to `parent`.
+     * @internal
+     */
+    BaseWidget.prototype.addTo = function (parent) {
+        var _this = this;
+        // Update title and icon
+        this.icon = null;
+        this.updateIcon();
+        this.label.innerText = this.getTitle();
+        var longLabelCSSClass = 'long-label';
+        if (this.label.innerText.length > 7) {
+            this.label.classList.add(longLabelCSSClass);
+        }
+        else {
+            this.label.classList.remove(longLabelCSSClass);
+        }
+        // Click functionality
+        this.setupActionBtnClickListener(this.button);
+        // Clear anything already in this.container.
+        this.container.replaceChildren();
+        this.button.replaceChildren(this.icon, this.label);
+        this.container.appendChild(this.button);
+        // Clear the dropdownContainer in case this element is being moved to another
+        // parent.
+        this.dropdownContainer.replaceChildren();
+        __classPrivateFieldSet(this, _BaseWidget_hasDropdown, this.fillDropdown(this.dropdownContainer), "f");
+        if (__classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f")) {
+            this.dropdownIcon = this.createDropdownIcon();
+            this.button.appendChild(this.dropdownIcon);
+            this.container.appendChild(this.dropdownContainer);
+            if (this.toolbarWidgetToggleListener) {
+                this.toolbarWidgetToggleListener.remove();
+            }
+            this.toolbarWidgetToggleListener = this.editor.notifier.on(EditorEventType.ToolbarDropdownShown, function (evt) {
+                if (evt.kind === EditorEventType.ToolbarDropdownShown
+                    && evt.parentWidget !== _this
+                    // Don't hide if a submenu wash shown (it might be a submenu of
+                    // the current menu).
+                    && evt.parentWidget.toplevel) {
+                    _this.setDropdownVisible(false);
+                }
+            });
+        }
+        this.setDropdownVisible(false);
+        if (this.container.parentElement) {
+            this.container.remove();
+        }
+        parent.appendChild(this.container);
+        return this.container;
+    };
+    BaseWidget.prototype.updateIcon = function () {
+        var _a, _b;
+        var newIcon = this.createIcon();
+        if (newIcon) {
+            (_a = this.icon) === null || _a === void 0 ? void 0 : _a.replaceWith(newIcon);
+            this.icon = newIcon;
+            this.icon.classList.add("".concat(toolbarCSSPrefix, "icon"));
+        }
+        else {
+            (_b = this.icon) === null || _b === void 0 ? void 0 : _b.remove();
+        }
+    };
+    BaseWidget.prototype.setDisabled = function (disabled) {
+        this.disabled = disabled;
+        if (this.disabled) {
+            this.button.classList.add('disabled');
+            this.button.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            this.button.classList.remove('disabled');
+            this.button.removeAttribute('aria-disabled');
+        }
+    };
+    BaseWidget.prototype.setSelected = function (selected) {
+        var currentlySelected = this.isSelected();
+        if (currentlySelected === selected) {
+            return;
+        }
+        // Ensure that accessibility tools check and read the value of
+        // aria-checked.
+        // TODO: Ensure that 'role' is set to 'switch' by default for selectable
+        //       buttons.
+        this.button.setAttribute('role', 'switch');
+        if (selected) {
+            this.container.classList.add('selected');
+            this.button.setAttribute('aria-checked', 'true');
+        }
+        else {
+            this.container.classList.remove('selected');
+            this.button.setAttribute('aria-checked', 'false');
+        }
+    };
+    BaseWidget.prototype.setDropdownVisible = function (visible) {
+        var _this = this;
+        var currentlyVisible = this.container.classList.contains('dropdownVisible');
+        if (currentlyVisible === visible) {
+            return;
+        }
+        // If waiting to hide the dropdown, cancel it.
+        if (this.hideDropdownTimeout) {
+            clearTimeout(this.hideDropdownTimeout);
+            this.hideDropdownTimeout = null;
+            this.dropdownContainer.classList.remove('hiding');
+            this.repositionDropdown();
+        }
+        var animationDuration = 150; // ms
+        if (visible) {
+            this.dropdownContainer.classList.remove('hidden');
+            this.container.classList.add('dropdownVisible');
+            this.editor.announceForAccessibility(this.localizationTable.dropdownShown(this.getTitle()));
+            this.editor.notifier.dispatch(EditorEventType.ToolbarDropdownShown, {
+                kind: EditorEventType.ToolbarDropdownShown,
+                parentWidget: this,
+            });
+            this.repositionDropdown();
+        }
+        else {
+            this.container.classList.remove('dropdownVisible');
+            this.editor.announceForAccessibility(this.localizationTable.dropdownHidden(this.getTitle()));
+            this.dropdownContainer.classList.add('hiding');
+            // Hide the dropdown *slightly* before the animation finishes. This
+            // prevents flickering in some browsers.
+            var hideDelay = animationDuration * 0.95;
+            this.hideDropdownTimeout = setTimeout(function () {
+                _this.dropdownContainer.classList.add('hidden');
+                _this.dropdownContainer.classList.remove('hiding');
+                _this.repositionDropdown();
+            }, hideDelay);
+        }
+        // Animate
+        var animationName = "var(--dropdown-".concat(visible ? 'show' : 'hide', "-animation)");
+        this.dropdownContainer.style.animation = "".concat(animationDuration, "ms ease ").concat(animationName);
+    };
+    BaseWidget.prototype.canBeInOverflowMenu = function () {
+        return true;
+    };
+    BaseWidget.prototype.getButtonWidth = function () {
+        return this.button.clientWidth;
+    };
+    BaseWidget.prototype.isHidden = function () {
+        return this.container.style.display === 'none';
+    };
+    BaseWidget.prototype.setHidden = function (hidden) {
+        this.container.style.display = hidden ? 'none' : '';
+    };
+    BaseWidget.prototype.repositionDropdown = function () {
+        var dropdownBBox = this.dropdownContainer.getBoundingClientRect();
+        var screenWidth = document.body.clientWidth;
+        if (dropdownBBox.left > screenWidth / 2) {
+            // Use .translate so as not to conflict with CSS animating the
+            // transform property.
+            this.dropdownContainer.style.translate = "calc(".concat(this.button.clientWidth + 'px', " - 100%) 0");
+        }
+        else {
+            this.dropdownContainer.style.translate = '';
+        }
+    };
+    /** Set whether the widget is contained within another. @internal */
+    BaseWidget.prototype.setIsToplevel = function (toplevel) {
+        this.toplevel = toplevel;
+    };
+    BaseWidget.prototype.isDropdownVisible = function () {
+        return !this.dropdownContainer.classList.contains('hidden');
+    };
+    BaseWidget.prototype.isSelected = function () {
+        return this.container.classList.contains('selected');
+    };
+    BaseWidget.prototype.createDropdownIcon = function () {
+        var icon = this.editor.icons.makeDropdownIcon();
+        icon.classList.add("".concat(toolbarCSSPrefix, "showHideDropdownIcon"));
+        return icon;
+    };
+    /**
+     * 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.
+     */
+    BaseWidget.prototype.serializeState = function () {
+        var subwidgetState = {};
+        // Save all subwidget state.
+        for (var subwidgetId in this.subWidgets) {
+            subwidgetState[subwidgetId] = this.subWidgets[subwidgetId].serializeState();
+        }
+        return {
+            subwidgetState: subwidgetState,
+        };
+    };
+    /**
+     * Restore widget state from serialized data. See also `saveState`.
+     *
+     * Overriders must call `super`.
+     */
+    BaseWidget.prototype.deserializeFrom = function (state) {
+        if (state.subwidgetState) {
+            // Deserialize all subwidgets.
+            for (var subwidgetId in state.subwidgetState) {
+                if (subwidgetId in this.subWidgets) {
+                    this.subWidgets[subwidgetId].deserializeFrom(state.subwidgetState[subwidgetId]);
+                }
+            }
+        }
+    };
+    return BaseWidget;
+}());
+_BaseWidget_hasDropdown = new WeakMap();
+export default BaseWidget;

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

@@ -0,0 +1,194 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import  Erase  from '../../commands/Erase.mjs';
+import  uniteCommands  from '../../commands/uniteCommands.mjs';
+import  BackgroundComponent, { BackgroundType }  from '../../components/BackgroundComponent.mjs';
+import  { EditorImageEventType }  from '../../EditorImage.mjs';
+import  Rect2  from '../../math/shapes/Rect2.mjs';
+import  { EditorEventType }  from '../../types.mjs';
+import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
+import  makeColorInput  from '../makeColorInput.mjs';
+import  BaseWidget  from './BaseWidget.mjs';
+var DocumentPropertiesWidget = /** @class */ (function (_super) {
+    __extends(DocumentPropertiesWidget, _super);
+    function DocumentPropertiesWidget(editor, localizationTable) {
+        var _this = _super.call(this, editor, 'document-properties-widget', localizationTable) || this;
+        _this.updateDropdownContent = function () { };
+        _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, function () {
+            _this.queueDropdownUpdate();
+        });
+        _this.editor.image.notifier.on(EditorImageEventType.ExportViewportChanged, function () {
+            _this.queueDropdownUpdate();
+        });
+        return _this;
+    }
+    DocumentPropertiesWidget.prototype.getTitle = function () {
+        return this.localizationTable.documentProperties;
+    };
+    DocumentPropertiesWidget.prototype.createIcon = function () {
+        return this.editor.icons.makeConfigureDocumentIcon();
+    };
+    DocumentPropertiesWidget.prototype.handleClick = function () {
+        this.setDropdownVisible(!this.isDropdownVisible());
+        this.queueDropdownUpdate();
+    };
+    DocumentPropertiesWidget.prototype.queueDropdownUpdate = function () {
+        var _this = this;
+        if (!this.dropdownUpdateQueued) {
+            requestAnimationFrame(function () { return _this.updateDropdown(); });
+            this.dropdownUpdateQueued = true;
+        }
+    };
+    DocumentPropertiesWidget.prototype.updateDropdown = function () {
+        this.dropdownUpdateQueued = false;
+        if (this.isDropdownVisible()) {
+            this.updateDropdownContent();
+        }
+    };
+    DocumentPropertiesWidget.prototype.setBackgroundColor = function (color) {
+        this.editor.dispatch(this.editor.setBackgroundColor(color));
+    };
+    DocumentPropertiesWidget.prototype.getBackgroundColor = function () {
+        return this.editor.estimateBackgroundColor();
+    };
+    DocumentPropertiesWidget.prototype.removeBackgroundComponents = function () {
+        var previousBackgrounds = [];
+        for (var _i = 0, _a = this.editor.image.getBackgroundComponents(); _i < _a.length; _i++) {
+            var component = _a[_i];
+            if (component instanceof BackgroundComponent) {
+                previousBackgrounds.push(component);
+            }
+        }
+        return new Erase(previousBackgrounds);
+    };
+    /** Replace existing background components with a background of the given type. */
+    DocumentPropertiesWidget.prototype.setBackgroundType = function (backgroundType) {
+        var prevBackgroundColor = this.editor.estimateBackgroundColor();
+        var newBackground = new BackgroundComponent(backgroundType, prevBackgroundColor);
+        var addBackgroundCommand = this.editor.image.addElement(newBackground);
+        return uniteCommands([this.removeBackgroundComponents(), addBackgroundCommand]);
+    };
+    /** Returns the type of the topmost background component */
+    DocumentPropertiesWidget.prototype.getBackgroundType = function () {
+        var backgroundComponents = this.editor.image.getBackgroundComponents();
+        for (var i = backgroundComponents.length - 1; i >= 0; i--) {
+            var component = backgroundComponents[i];
+            if (component instanceof BackgroundComponent) {
+                return component.getBackgroundType();
+            }
+        }
+        return BackgroundType.None;
+    };
+    DocumentPropertiesWidget.prototype.updateImportExportRectSize = function (size) {
+        var filterDimension = function (dim) {
+            if (dim !== undefined && (!isFinite(dim) || dim <= 0)) {
+                dim = 100;
+            }
+            return dim;
+        };
+        var width = filterDimension(size.width);
+        var height = filterDimension(size.height);
+        var currentRect = this.editor.getImportExportRect();
+        var 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();
+    };
+    DocumentPropertiesWidget.prototype.fillDropdown = function (dropdown) {
+        var _this = this;
+        var container = document.createElement('div');
+        container.classList.add("".concat(toolbarCSSPrefix, "spacedList"));
+        var backgroundColorRow = document.createElement('div');
+        var backgroundColorLabel = document.createElement('label');
+        backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
+        var _a = makeColorInput(this.editor, function (color) {
+            if (!color.eq(_this.getBackgroundColor())) {
+                _this.setBackgroundColor(color);
+            }
+        }), colorInput = _a[0], backgroundColorInputContainer = _a[1], setBgColorInputValue = _a[2];
+        colorInput.id = "".concat(toolbarCSSPrefix, "docPropertiesColorInput-").concat(DocumentPropertiesWidget.idCounter++);
+        backgroundColorLabel.htmlFor = colorInput.id;
+        backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
+        var useGridRow = document.createElement('div');
+        var useGridLabel = document.createElement('label');
+        var useGridCheckbox = document.createElement('input');
+        useGridCheckbox.id = "".concat(toolbarCSSPrefix, "docPropertiesUseGridCheckbox-").concat(DocumentPropertiesWidget.idCounter++);
+        useGridLabel.htmlFor = useGridCheckbox.id;
+        useGridCheckbox.type = 'checkbox';
+        useGridLabel.innerText = this.localizationTable.useGridOption;
+        useGridCheckbox.oninput = function () {
+            var prevBackgroundType = _this.getBackgroundType();
+            var wasGrid = prevBackgroundType === BackgroundType.Grid;
+            if (wasGrid === useGridCheckbox.checked) {
+                // Already the requested background type.
+                return;
+            }
+            var newBackgroundType = BackgroundType.SolidColor;
+            if (useGridCheckbox.checked) {
+                newBackgroundType = BackgroundType.Grid;
+            }
+            _this.editor.dispatch(_this.setBackgroundType(newBackgroundType));
+        };
+        useGridRow.replaceChildren(useGridLabel, useGridCheckbox);
+        var addDimensionRow = function (labelContent, onChange) {
+            var row = document.createElement('div');
+            var label = document.createElement('label');
+            var spacer = document.createElement('span');
+            var input = document.createElement('input');
+            label.innerText = labelContent;
+            input.type = 'number';
+            input.min = '0';
+            input.id = "".concat(toolbarCSSPrefix, "docPropertiesDimensionRow-").concat(DocumentPropertiesWidget.idCounter++);
+            label.htmlFor = input.id;
+            spacer.style.flexGrow = '1';
+            input.style.flexGrow = '2';
+            input.style.width = '25px';
+            row.style.display = 'flex';
+            input.oninput = function () {
+                onChange(parseFloat(input.value));
+            };
+            row.replaceChildren(label, spacer, input);
+            return {
+                setValue: function (value) {
+                    input.value = value.toString();
+                },
+                element: row,
+            };
+        };
+        var imageWidthRow = addDimensionRow(this.localizationTable.imageWidthOption, function (value) {
+            _this.updateImportExportRectSize({ width: value });
+        });
+        var imageHeightRow = addDimensionRow(this.localizationTable.imageHeightOption, function (value) {
+            _this.updateImportExportRectSize({ height: value });
+        });
+        this.updateDropdownContent = function () {
+            setBgColorInputValue(_this.getBackgroundColor());
+            var importExportRect = _this.editor.getImportExportRect();
+            imageWidthRow.setValue(importExportRect.width);
+            imageHeightRow.setValue(importExportRect.height);
+            useGridCheckbox.checked = _this.getBackgroundType() === BackgroundType.Grid;
+        };
+        this.updateDropdownContent();
+        container.replaceChildren(backgroundColorRow, useGridRow, imageWidthRow.element, imageHeightRow.element);
+        dropdown.replaceChildren(container);
+        return true;
+    };
+    DocumentPropertiesWidget.idCounter = 0;
+    return DocumentPropertiesWidget;
+}(BaseWidget));
+export default DocumentPropertiesWidget;