js-draw 0.25.0 → 1.0.0

package/dist/cjs/toolbar/widgets/SelectionToolWidget.js

@@ -1,199 +1,116 @@
 "use strict";
-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 __());
-    };
-})();
-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 __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var Color4_1 = require("../../Color4");
-var RestylableComponent_1 = require("../../components/RestylableComponent");
-var uniteCommands_1 = require("../../commands/uniteCommands");
-var types_1 = require("../../types");
-var makeColorInput_1 = require("../makeColorInput");
-var ActionButtonWidget_1 = require("./ActionButtonWidget");
-var BaseToolWidget_1 = require("./BaseToolWidget");
-var BaseWidget_1 = require("./BaseWidget");
-var keybindings_1 = require("./keybindings");
-var RestyleSelectionWidget = /** @class */ (function (_super) {
-    __extends(RestyleSelectionWidget, _super);
-    function RestyleSelectionWidget(editor, selectionTool, localizationTable) {
-        var _this = _super.call(this, editor, 'restyle-selection', localizationTable) || this;
-        _this.selectionTool = selectionTool;
-        _this.updateFormatData = function () { };
-        // Allow showing the dropdown even if this widget isn't selected yet
-        _this.container.classList.add('dropdownShowable');
-        _this.editor.notifier.on(types_1.EditorEventType.ToolUpdated, function (toolEvt) {
-            if (toolEvt.kind !== types_1.EditorEventType.ToolUpdated) {
-                throw new Error('Invalid event type!');
-            }
-            if (toolEvt.tool === _this.selectionTool) {
-                _this.updateFormatData();
-            }
-        });
-        return _this;
-    }
-    RestyleSelectionWidget.prototype.getTitle = function () {
-        return this.localizationTable.reformatSelection;
-    };
-    RestyleSelectionWidget.prototype.createIcon = function () {
-        return this.editor.icons.makeFormatSelectionIcon();
-    };
-    RestyleSelectionWidget.prototype.handleClick = function () {
-        this.setDropdownVisible(!this.isDropdownVisible());
-    };
-    RestyleSelectionWidget.prototype.fillDropdown = function (dropdown) {
-        var _this = this;
-        var container = document.createElement('div');
-        var colorRow = document.createElement('div');
-        var colorLabel = document.createElement('label');
-        var _a = (0, makeColorInput_1.default)(this.editor, function (color) {
-            var selection = _this.selectionTool.getSelection();
-            if (selection) {
-                var updateStyleCommands = [];
-                for (var _i = 0, _a = selection.getSelectedObjects(); _i < _a.length; _i++) {
-                    var elem = _a[_i];
-                    if ((0, RestylableComponent_1.isRestylableComponent)(elem)) {
-                        updateStyleCommands.push(elem.updateStyle({ color: color }));
-                    }
+const math_1 = require("@js-draw/math");
+const RestylableComponent_1 = require("../../components/RestylableComponent");
+const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
+const types_1 = require("../../types");
+const makeColorInput_1 = __importDefault(require("./components/makeColorInput"));
+const ActionButtonWidget_1 = __importDefault(require("./ActionButtonWidget"));
+const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
+const keybindings_1 = require("./keybindings");
+const makeSeparator_1 = __importDefault(require("./components/makeSeparator"));
+const constants_1 = require("../constants");
+const makeFormatMenu = (editor, selectionTool, localizationTable) => {
+    const container = document.createElement('div');
+    container.classList.add('selection-format-menu', `${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}indentedList`);
+    const colorRow = document.createElement('div');
+    const colorLabel = document.createElement('label');
+    const { input: colorInput, container: colorInputContainer, setValue: setColorInputValue } = (0, makeColorInput_1.default)(editor, color => {
+        const selection = selectionTool.getSelection();
+        if (selection) {
+            const updateStyleCommands = [];
+            for (const elem of selection.getSelectedObjects()) {
+                if ((0, RestylableComponent_1.isRestylableComponent)(elem)) {
+                    updateStyleCommands.push(elem.updateStyle({ color }));
                 }
-                var unitedCommand = (0, uniteCommands_1.default)(updateStyleCommands);
-                _this.editor.dispatch(unitedCommand);
             }
-        }), colorInput = _a[0], colorInputContainer = _a[1], setColorInputValue = _a[2];
-        colorLabel.innerText = this.localizationTable.colorLabel;
-        this.updateFormatData = function () {
-            var selection = _this.selectionTool.getSelection();
-            if (selection) {
-                colorInput.disabled = false;
-                var colors = [];
-                for (var _i = 0, _a = selection.getSelectedObjects(); _i < _a.length; _i++) {
-                    var elem = _a[_i];
-                    if ((0, RestylableComponent_1.isRestylableComponent)(elem)) {
-                        var color = elem.getStyle().color;
-                        if (color) {
-                            colors.push(color);
-                        }
+            const unitedCommand = (0, uniteCommands_1.default)(updateStyleCommands);
+            editor.dispatch(unitedCommand);
+        }
+    });
+    colorLabel.innerText = localizationTable.colorLabel;
+    const update = () => {
+        const selection = selectionTool.getSelection();
+        if (selection && selection.getSelectedItemCount() > 0) {
+            colorInput.disabled = false;
+            container.classList.remove('disabled');
+            const colors = [];
+            for (const elem of selection.getSelectedObjects()) {
+                if ((0, RestylableComponent_1.isRestylableComponent)(elem)) {
+                    const color = elem.getStyle().color;
+                    if (color) {
+                        colors.push(color);
                     }
                 }
-                setColorInputValue(Color4_1.default.average(colors));
-            }
-            else {
-                colorInput.disabled = true;
             }
-        };
-        colorRow.replaceChildren(colorLabel, colorInputContainer);
-        container.replaceChildren(colorRow);
-        dropdown.replaceChildren(container);
-        return true;
+            setColorInputValue(math_1.Color4.average(colors));
+        }
+        else {
+            colorInput.disabled = true;
+            container.classList.add('disabled');
+            setColorInputValue(math_1.Color4.transparent);
+        }
+    };
+    colorRow.replaceChildren(colorLabel, colorInputContainer);
+    container.replaceChildren(colorRow);
+    return {
+        addTo: (parent) => {
+            parent.appendChild(container);
+        },
+        update,
     };
-    return RestyleSelectionWidget;
-}(BaseWidget_1.default));
-var SelectionToolWidget = /** @class */ (function (_super) {
-    __extends(SelectionToolWidget, _super);
-    function SelectionToolWidget(editor, tool, localization) {
-        var _this = _super.call(this, editor, tool, 'selection-tool-widget', localization) || this;
-        _this.tool = tool;
-        var resizeButton = new ActionButtonWidget_1.default(editor, 'resize-btn', function () { return editor.icons.makeResizeViewportIcon(); }, _this.localizationTable.resizeImageToSelection, function () {
-            _this.resizeImageToSelection();
+};
+class SelectionToolWidget extends BaseToolWidget_1.default {
+    constructor(editor, tool, localization) {
+        super(editor, tool, 'selection-tool-widget', localization);
+        this.tool = tool;
+        this.updateFormatMenu = () => { };
+        const resizeButton = new ActionButtonWidget_1.default(editor, 'resize-btn', () => editor.icons.makeResizeImageToSelectionIcon(), this.localizationTable.resizeImageToSelection, () => {
+            this.resizeImageToSelection();
         }, localization);
-        var deleteButton = new ActionButtonWidget_1.default(editor, 'delete-btn', function () { return editor.icons.makeDeleteSelectionIcon(); }, _this.localizationTable.deleteSelection, function () {
-            var selection = _this.tool.getSelection();
-            _this.editor.dispatch(selection.deleteSelectedObjects());
-            _this.tool.clearSelection();
+        const deleteButton = new ActionButtonWidget_1.default(editor, 'delete-btn', () => editor.icons.makeDeleteSelectionIcon(), this.localizationTable.deleteSelection, () => {
+            const selection = this.tool.getSelection();
+            this.editor.dispatch(selection.deleteSelectedObjects());
+            this.tool.clearSelection();
         }, localization);
-        var duplicateButton = new ActionButtonWidget_1.default(editor, 'duplicate-btn', function () { return editor.icons.makeDuplicateSelectionIcon(); }, _this.localizationTable.duplicateSelection, function () { return __awaiter(_this, void 0, void 0, function () {
-            var selection, _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        selection = this.tool.getSelection();
-                        _b = (_a = this.editor).dispatch;
-                        return [4 /*yield*/, selection.duplicateSelectedObjects()];
-                    case 1:
-                        _b.apply(_a, [_c.sent()]);
-                        return [2 /*return*/];
-                }
-            });
-        }); }, localization);
-        var restyleButton = new RestyleSelectionWidget(editor, _this.tool, localization);
-        _this.addSubWidget(resizeButton);
-        _this.addSubWidget(deleteButton);
-        _this.addSubWidget(duplicateButton);
-        _this.addSubWidget(restyleButton);
-        var updateDisabled = function (disabled) {
+        const duplicateButton = new ActionButtonWidget_1.default(editor, 'duplicate-btn', () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, async () => {
+            const selection = this.tool.getSelection();
+            this.editor.dispatch(await selection.duplicateSelectedObjects());
+            this.setDropdownVisible(false);
+        }, localization);
+        this.addSubWidget(resizeButton);
+        this.addSubWidget(deleteButton);
+        this.addSubWidget(duplicateButton);
+        const updateDisabled = (disabled) => {
             resizeButton.setDisabled(disabled);
             deleteButton.setDisabled(disabled);
             duplicateButton.setDisabled(disabled);
-            restyleButton.setDisabled(disabled);
         };
         updateDisabled(true);
         // Enable/disable actions based on whether items are selected
-        _this.editor.notifier.on(types_1.EditorEventType.ToolUpdated, function (toolEvt) {
+        this.editor.notifier.on(types_1.EditorEventType.ToolUpdated, toolEvt => {
             if (toolEvt.kind !== types_1.EditorEventType.ToolUpdated) {
                 throw new Error('Invalid event type!');
             }
-            if (toolEvt.tool === _this.tool) {
-                var selection = _this.tool.getSelection();
-                var hasSelection = selection && selection.getSelectedItemCount() > 0;
+            if (toolEvt.tool === this.tool) {
+                const selection = this.tool.getSelection();
+                const hasSelection = selection && selection.getSelectedItemCount() > 0;
                 updateDisabled(!hasSelection);
+                this.updateFormatMenu();
             }
         });
-        return _this;
     }
-    SelectionToolWidget.prototype.resizeImageToSelection = function () {
-        var selection = this.tool.getSelection();
+    resizeImageToSelection() {
+        const selection = this.tool.getSelection();
         if (selection) {
             this.editor.dispatch(this.editor.setImportExportRect(selection.region));
         }
-    };
-    SelectionToolWidget.prototype.onKeyPress = function (event) {
-        var shortcuts = this.editor.shortcuts;
+    }
+    onKeyPress(event) {
+        const shortcuts = this.editor.shortcuts;
         // Resize image to selection:
         // Other keys are handled directly by the selection tool.
         if (shortcuts.matchesShortcut(keybindings_1.resizeImageToSelectionKeyboardShortcut, event)) {
@@ -201,17 +118,28 @@ var SelectionToolWidget = /** @class */ (function (_super) {
             return true;
         }
         // If we didn't handle the event, allow the superclass to handle it.
-        if (_super.prototype.onKeyPress.call(this, event)) {
+        if (super.onKeyPress(event)) {
             return true;
         }
         return false;
-    };
-    SelectionToolWidget.prototype.getTitle = function () {
+    }
+    getTitle() {
         return this.localizationTable.select;
-    };
-    SelectionToolWidget.prototype.createIcon = function () {
+    }
+    createIcon() {
         return this.editor.icons.makeSelectionIcon();
-    };
-    return SelectionToolWidget;
-}(BaseToolWidget_1.default));
+    }
+    fillDropdown(dropdown) {
+        super.fillDropdown(dropdown);
+        const controlsContainer = document.createElement('div');
+        controlsContainer.classList.add(`${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`);
+        dropdown.appendChild(controlsContainer);
+        (0, makeSeparator_1.default)(this.localizationTable.reformatSelection).addTo(controlsContainer);
+        const formatMenu = makeFormatMenu(this.editor, this.tool, this.localizationTable);
+        formatMenu.addTo(controlsContainer);
+        this.updateFormatMenu = () => formatMenu.update();
+        formatMenu.update();
+        return true;
+    }
+}
 exports.default = SelectionToolWidget;

package/dist/cjs/toolbar/widgets/TextToolWidget.js

@@ -1,76 +1,49 @@
 "use strict";
-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 __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var Color4_1 = require("../../Color4");
-var types_1 = require("../../types");
-var HTMLToolbar_1 = require("../HTMLToolbar");
-var makeColorInput_1 = require("../makeColorInput");
-var BaseToolWidget_1 = require("./BaseToolWidget");
-var TextToolWidget = /** @class */ (function (_super) {
-    __extends(TextToolWidget, _super);
-    function TextToolWidget(editor, tool, localization) {
-        var _this = _super.call(this, editor, tool, 'text-tool-widget', localization) || this;
-        _this.tool = tool;
-        _this.updateDropdownInputs = null;
-        editor.notifier.on(types_1.EditorEventType.ToolUpdated, function (evt) {
-            var _a;
+const math_1 = require("@js-draw/math");
+const types_1 = require("../../types");
+const constants_1 = require("../constants");
+const makeColorInput_1 = __importDefault(require("./components/makeColorInput"));
+const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
+class TextToolWidget extends BaseToolWidget_1.default {
+    constructor(editor, tool, localization) {
+        super(editor, tool, 'text-tool-widget', localization);
+        this.tool = tool;
+        this.updateDropdownInputs = null;
+        editor.notifier.on(types_1.EditorEventType.ToolUpdated, evt => {
             if (evt.kind === types_1.EditorEventType.ToolUpdated && evt.tool === tool) {
-                _this.updateIcon();
-                (_a = _this.updateDropdownInputs) === null || _a === void 0 ? void 0 : _a.call(_this);
+                this.updateIcon();
+                this.updateDropdownInputs?.();
             }
         });
-        return _this;
     }
-    TextToolWidget.prototype.getTitle = function () {
+    getTitle() {
         return this.targetTool.description;
-    };
-    TextToolWidget.prototype.createIcon = function () {
-        var textStyle = this.tool.getTextStyle();
+    }
+    createIcon() {
+        const textStyle = this.tool.getTextStyle();
         return this.editor.icons.makeTextIcon(textStyle);
-    };
-    TextToolWidget.prototype.fillDropdown = function (dropdown) {
-        var _this = this;
-        var container = document.createElement('div');
-        container.classList.add("".concat(HTMLToolbar_1.toolbarCSSPrefix, "spacedList"));
-        var fontRow = document.createElement('div');
-        var colorRow = document.createElement('div');
-        var sizeRow = document.createElement('div');
-        var fontInput = document.createElement('select');
-        var fontLabel = document.createElement('label');
-        var sizeInput = document.createElement('input');
-        var sizeLabel = document.createElement('label');
-        var _a = (0, makeColorInput_1.default)(this.editor, function (color) {
-            _this.tool.setColor(color);
-        }), colorInput = _a[0], colorInputContainer = _a[1], setColorInputValue = _a[2];
-        var colorLabel = document.createElement('label');
-        var fontsInInput = new Set();
-        var addFontToInput = function (fontName) {
-            var option = document.createElement('option');
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        container.classList.add(`${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`);
+        const fontRow = document.createElement('div');
+        const colorRow = document.createElement('div');
+        const sizeRow = document.createElement('div');
+        const fontInput = document.createElement('select');
+        const fontLabel = document.createElement('label');
+        const sizeInput = document.createElement('input');
+        const sizeLabel = document.createElement('label');
+        const { input: colorInput, container: colorInputContainer, setValue: setColorInputValue } = (0, makeColorInput_1.default)(this.editor, color => {
+            this.tool.setColor(color);
+        });
+        const colorLabel = document.createElement('label');
+        const fontsInInput = new Set();
+        const addFontToInput = (fontName) => {
+            const option = document.createElement('option');
             option.value = fontName;
             option.textContent = fontName;
             fontInput.appendChild(option);
@@ -82,22 +55,22 @@ var TextToolWidget = /** @class */ (function (_super) {
         fontLabel.innerText = this.localizationTable.fontLabel;
         colorLabel.innerText = this.localizationTable.colorLabel;
         sizeLabel.innerText = this.localizationTable.textSize;
-        colorInput.id = "".concat(HTMLToolbar_1.toolbarCSSPrefix, "-text-color-input-").concat(TextToolWidget.idCounter++);
+        colorInput.id = `${constants_1.toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
         colorLabel.setAttribute('for', colorInput.id);
-        sizeInput.id = "".concat(HTMLToolbar_1.toolbarCSSPrefix, "-text-size-input-").concat(TextToolWidget.idCounter++);
+        sizeInput.id = `${constants_1.toolbarCSSPrefix}-text-size-input-${TextToolWidget.idCounter++}`;
         sizeLabel.setAttribute('for', sizeInput.id);
         addFontToInput('monospace');
         addFontToInput('serif');
         addFontToInput('sans-serif');
-        fontInput.id = "".concat(HTMLToolbar_1.toolbarCSSPrefix, "-text-font-input-").concat(TextToolWidget.idCounter++);
+        fontInput.id = `${constants_1.toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
         fontLabel.setAttribute('for', fontInput.id);
-        fontInput.onchange = function () {
-            _this.tool.setFontFamily(fontInput.value);
+        fontInput.onchange = () => {
+            this.tool.setFontFamily(fontInput.value);
         };
-        sizeInput.onchange = function () {
-            var size = parseInt(sizeInput.value);
+        sizeInput.onchange = () => {
+            const size = parseInt(sizeInput.value);
             if (!isNaN(size) && size > 0) {
-                _this.tool.setFontSize(size);
+                this.tool.setFontSize(size);
             }
         };
         colorRow.appendChild(colorLabel);
@@ -106,37 +79,41 @@ var TextToolWidget = /** @class */ (function (_super) {
         fontRow.appendChild(fontInput);
         sizeRow.appendChild(sizeLabel);
         sizeRow.appendChild(sizeInput);
-        this.updateDropdownInputs = function () {
-            var style = _this.tool.getTextStyle();
+        this.updateDropdownInputs = () => {
+            const style = this.tool.getTextStyle();
             setColorInputValue(style.renderingStyle.fill);
             if (!fontsInInput.has(style.fontFamily)) {
                 addFontToInput(style.fontFamily);
             }
             fontInput.value = style.fontFamily;
-            sizeInput.value = "".concat(style.size);
+            sizeInput.value = `${style.size}`;
         };
         this.updateDropdownInputs();
         container.replaceChildren(colorRow, sizeRow, fontRow);
         dropdown.appendChild(container);
         return true;
-    };
-    TextToolWidget.prototype.serializeState = function () {
-        var textStyle = this.tool.getTextStyle();
-        return __assign(__assign({}, _super.prototype.serializeState.call(this)), { fontFamily: textStyle.fontFamily, textSize: textStyle.size, color: textStyle.renderingStyle.fill.toHexString() });
-    };
-    TextToolWidget.prototype.deserializeFrom = function (state) {
+    }
+    serializeState() {
+        const textStyle = this.tool.getTextStyle();
+        return {
+            ...super.serializeState(),
+            fontFamily: textStyle.fontFamily,
+            textSize: textStyle.size,
+            color: textStyle.renderingStyle.fill.toHexString(),
+        };
+    }
+    deserializeFrom(state) {
         if (state.fontFamily && typeof (state.fontFamily) === 'string') {
             this.tool.setFontFamily(state.fontFamily);
         }
         if (state.color && typeof (state.color) === 'string') {
-            this.tool.setColor(Color4_1.default.fromHex(state.color));
+            this.tool.setColor(math_1.Color4.fromHex(state.color));
         }
         if (state.textSize && typeof (state.textSize) === 'number') {
             this.tool.setFontSize(state.textSize);
         }
-        _super.prototype.deserializeFrom.call(this, state);
-    };
-    TextToolWidget.idCounter = 0;
-    return TextToolWidget;
-}(BaseToolWidget_1.default));
+        super.deserializeFrom(state);
+    }
+}
+TextToolWidget.idCounter = 0;
 exports.default = TextToolWidget;

package/dist/cjs/toolbar/widgets/components/makeColorInput.d.ts

@@ -0,0 +1,10 @@
+import { Color4 } from '@js-draw/math';
+import Editor from '../../../Editor';
+type OnColorChangeListener = (color: Color4) => void;
+export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => {
+    input: HTMLInputElement;
+    container: HTMLSpanElement;
+    setValue: (color: Color4 | string) => void;
+    closePicker: () => void;
+};
+export default makeColorInput;