js-draw 0.23.0 → 0.24.0

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

@@ -1,348 +0,0 @@
-"use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-var _BaseWidget_hasDropdown;
-Object.defineProperty(exports, "__esModule", { value: true });
-const ToolbarShortcutHandler_1 = __importDefault(require("../../tools/ToolbarShortcutHandler"));
-const types_1 = require("../../types");
-const HTMLToolbar_1 = require("../HTMLToolbar");
-class BaseWidget {
-    constructor(editor, id, localizationTable) {
-        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(`${HTMLToolbar_1.toolbarCSSPrefix}toolContainer`);
-        this.dropdownContainer = document.createElement('div');
-        this.dropdownContainer.classList.add(`${HTMLToolbar_1.toolbarCSSPrefix}dropdown`);
-        this.dropdownContainer.classList.add('hidden');
-        __classPrivateFieldSet(this, _BaseWidget_hasDropdown, false, "f");
-        this.button = document.createElement('div');
-        this.button.classList.add(`${HTMLToolbar_1.toolbarCSSPrefix}button`);
-        this.label = document.createElement('label');
-        this.button.setAttribute('role', 'button');
-        this.button.tabIndex = 0;
-        const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler_1.default);
-        // 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(event => this.onKeyPress(event));
-        }
-    }
-    getId() {
-        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`.
-     */
-    getUniqueIdIn(container) {
-        let id = this.getId();
-        let 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.
-    fillDropdown(dropdown) {
-        if (Object.keys(this.subWidgets).length === 0) {
-            return false;
-        }
-        for (const widgetId in this.subWidgets) {
-            const widget = this.subWidgets[widgetId];
-            widget.addTo(dropdown);
-            widget.setIsToplevel(false);
-        }
-        return true;
-    }
-    setupActionBtnClickListener(button) {
-        const clickTriggers = { Enter: true, ' ': true, };
-        button.onkeydown = (evt) => {
-            let 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: types_1.InputEvtType.KeyPressEvent,
-                    key: evt.key,
-                    ctrlKey: evt.ctrlKey || evt.metaKey,
-                    altKey: evt.altKey,
-                });
-            }
-            if (handled) {
-                evt.preventDefault();
-            }
-        };
-        button.onkeyup = evt => {
-            if (evt.key in clickTriggers) {
-                return;
-            }
-            const handled = this.editor.toolController.dispatchInputEvent({
-                kind: types_1.InputEvtType.KeyUpEvent,
-                key: evt.key,
-                ctrlKey: evt.ctrlKey || evt.metaKey,
-                altKey: evt.altKey,
-            });
-            if (handled) {
-                evt.preventDefault();
-            }
-        };
-        button.onclick = () => {
-            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.
-    onKeyPress(_event) {
-        return false;
-    }
-    get hasDropdown() {
-        return __classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f");
-    }
-    // Add a widget to this' dropdown. Must be called before this.addTo.
-    addSubWidget(widget) {
-        // Generate a unique ID for the widget.
-        const id = widget.getUniqueIdIn(this.subWidgets);
-        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) {
-        // Update title and icon
-        this.icon = null;
-        this.updateIcon();
-        this.label.innerText = this.getTitle();
-        const 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);
-        __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(types_1.EditorEventType.ToolbarDropdownShown, (evt) => {
-                if (evt.kind === types_1.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;
-    }
-    updateIcon() {
-        var _a, _b;
-        const newIcon = this.createIcon();
-        if (newIcon) {
-            (_a = this.icon) === null || _a === void 0 ? void 0 : _a.replaceWith(newIcon);
-            this.icon = newIcon;
-            this.icon.classList.add(`${HTMLToolbar_1.toolbarCSSPrefix}icon`);
-        }
-        else {
-            (_b = this.icon) === null || _b === void 0 ? void 0 : _b.remove();
-        }
-    }
-    setDisabled(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');
-        }
-    }
-    setSelected(selected) {
-        const 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');
-        }
-    }
-    setDropdownVisible(visible) {
-        const 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');
-        }
-        const 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(types_1.EditorEventType.ToolbarDropdownShown, {
-                kind: types_1.EditorEventType.ToolbarDropdownShown,
-                parentWidget: this,
-            });
-        }
-        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.
-            const hideDelay = animationDuration * 0.95;
-            this.hideDropdownTimeout = setTimeout(() => {
-                this.dropdownContainer.classList.add('hidden');
-                this.dropdownContainer.classList.remove('hiding');
-            }, hideDelay);
-        }
-        // Animate
-        const animationName = `var(--dropdown-${visible ? 'show' : 'hide'}-animation)`;
-        this.dropdownContainer.style.animation = `${animationDuration}ms ease ${animationName}`;
-        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;
-        if (dropdownBBox.left > screenWidth / 2) {
-            // Use .translate so as not to conflict with CSS animating the
-            // transform property.
-            this.dropdownContainer.style.translate = `calc(${this.button.clientWidth + 'px'} - 100%) 0`;
-        }
-        else {
-            this.dropdownContainer.style.transform = '';
-        }
-    }
-    /** Set whether the widget is contained within another. @internal */
-    setIsToplevel(toplevel) {
-        this.toplevel = toplevel;
-    }
-    isDropdownVisible() {
-        return !this.dropdownContainer.classList.contains('hidden');
-    }
-    isSelected() {
-        return this.container.classList.contains('selected');
-    }
-    createDropdownIcon() {
-        const icon = this.editor.icons.makeDropdownIcon();
-        icon.classList.add(`${HTMLToolbar_1.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.
-     */
-    serializeState() {
-        const subwidgetState = {};
-        // Save all subwidget state.
-        for (const subwidgetId in this.subWidgets) {
-            subwidgetState[subwidgetId] = this.subWidgets[subwidgetId].serializeState();
-        }
-        return {
-            subwidgetState,
-        };
-    }
-    /**
-     * Restore widget state from serialized data. See also `saveState`.
-     *
-     * Overriders must call `super`.
-     */
-    deserializeFrom(state) {
-        if (state.subwidgetState) {
-            // Deserialize all subwidgets.
-            for (const subwidgetId in state.subwidgetState) {
-                if (subwidgetId in this.subWidgets) {
-                    this.subWidgets[subwidgetId].deserializeFrom(state.subwidgetState[subwidgetId]);
-                }
-            }
-        }
-    }
-}
-exports.default = BaseWidget;
-_BaseWidget_hasDropdown = new WeakMap();

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;