js-draw 0.23.1 → 0.24.0

package/dist/mjs/toolbar/widgets/PenToolWidget.mjs

@@ -0,0 +1,262 @@
+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);
+};
+import  { makeArrowBuilder }  from '../../components/builders/ArrowBuilder.mjs';
+import  { makeFreehandLineBuilder }  from '../../components/builders/FreehandLineBuilder.mjs';
+import  { makePressureSensitiveFreehandLineBuilder }  from '../../components/builders/PressureSensitiveFreehandLineBuilder.mjs';
+import  { makeLineBuilder }  from '../../components/builders/LineBuilder.mjs';
+import  { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder }  from '../../components/builders/RectangleBuilder.mjs';
+import  { makeOutlinedCircleBuilder }  from '../../components/builders/CircleBuilder.mjs';
+import  { EditorEventType }  from '../../types.mjs';
+import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
+import  makeColorInput  from '../makeColorInput.mjs';
+import  BaseToolWidget  from './BaseToolWidget.mjs';
+import  Color4  from '../../Color4.mjs';
+import  { selectStrokeTypeKeyboardShortcutIds }  from './keybindings.mjs';
+var PenToolWidget = /** @class */ (function (_super) {
+    __extends(PenToolWidget, _super);
+    function PenToolWidget(editor, tool, localization) {
+        var _this = _super.call(this, editor, tool, 'pen', localization) || this;
+        _this.tool = tool;
+        _this.updateInputs = function () { };
+        // Default pen types
+        _this.penTypes = [
+            {
+                name: _this.localizationTable.pressureSensitiveFreehandPen,
+                id: 'pressure-sensitive-pen',
+                factory: makePressureSensitiveFreehandLineBuilder,
+            },
+            {
+                name: _this.localizationTable.freehandPen,
+                id: 'freehand-pen',
+                factory: makeFreehandLineBuilder,
+            },
+            {
+                name: _this.localizationTable.arrowPen,
+                id: 'arrow',
+                factory: makeArrowBuilder,
+            },
+            {
+                name: _this.localizationTable.linePen,
+                id: 'line',
+                factory: makeLineBuilder,
+            },
+            {
+                name: _this.localizationTable.filledRectanglePen,
+                id: 'filled-rectangle',
+                factory: makeFilledRectangleBuilder,
+            },
+            {
+                name: _this.localizationTable.outlinedRectanglePen,
+                id: 'outlined-rectangle',
+                factory: makeOutlinedRectangleBuilder,
+            },
+            {
+                name: _this.localizationTable.outlinedCirclePen,
+                id: 'outlined-circle',
+                factory: makeOutlinedCircleBuilder,
+            }
+        ];
+        _this.editor.notifier.on(EditorEventType.ToolUpdated, function (toolEvt) {
+            if (toolEvt.kind !== EditorEventType.ToolUpdated) {
+                throw new Error('Invalid event type!');
+            }
+            // The button icon may depend on tool properties.
+            if (toolEvt.tool === _this.tool) {
+                _this.updateIcon();
+                _this.updateInputs();
+            }
+        });
+        return _this;
+    }
+    PenToolWidget.prototype.getTitle = function () {
+        return this.targetTool.description;
+    };
+    // Return the index of this tool's stroke factory in the list of
+    // all stroke factories.
+    //
+    // Returns -1 if the stroke factory is not in the list of all stroke factories.
+    PenToolWidget.prototype.getCurrentPenTypeIdx = function () {
+        var currentFactory = this.tool.getStrokeFactory();
+        for (var i = 0; i < this.penTypes.length; i++) {
+            if (this.penTypes[i].factory === currentFactory) {
+                return i;
+            }
+        }
+        return -1;
+    };
+    PenToolWidget.prototype.getCurrentPenType = function () {
+        for (var _i = 0, _a = this.penTypes; _i < _a.length; _i++) {
+            var penType = _a[_i];
+            if (penType.factory === this.tool.getStrokeFactory()) {
+                return penType;
+            }
+        }
+        return null;
+    };
+    PenToolWidget.prototype.createIcon = function () {
+        var strokeFactory = this.tool.getStrokeFactory();
+        if (strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
+            // Use a square-root scale to prevent the pen's tip from overflowing.
+            var scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
+            var color = this.tool.getColor();
+            var roundedTip = strokeFactory === makeFreehandLineBuilder;
+            return this.editor.icons.makePenIcon(scale, color.toHexString(), roundedTip);
+        }
+        else {
+            var strokeFactory_1 = this.tool.getStrokeFactory();
+            return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory_1);
+        }
+    };
+    PenToolWidget.prototype.fillDropdown = function (dropdown) {
+        var _this = this;
+        var container = document.createElement('div');
+        container.classList.add("".concat(toolbarCSSPrefix, "spacedList"));
+        var thicknessRow = document.createElement('div');
+        var objectTypeRow = document.createElement('div');
+        // Thickness: Value of the input is squared to allow for finer control/larger values.
+        var thicknessLabel = document.createElement('label');
+        var thicknessInput = document.createElement('input');
+        var objectSelectLabel = document.createElement('label');
+        var objectTypeSelect = document.createElement('select');
+        // Give inputs IDs so we can label them with a <label for=...>Label text</label>
+        thicknessInput.id = "".concat(toolbarCSSPrefix, "penThicknessInput").concat(PenToolWidget.idCounter++);
+        objectTypeSelect.id = "".concat(toolbarCSSPrefix, "penBuilderSelect").concat(PenToolWidget.idCounter++);
+        thicknessLabel.innerText = this.localizationTable.thicknessLabel;
+        thicknessLabel.setAttribute('for', thicknessInput.id);
+        objectSelectLabel.innerText = this.localizationTable.selectPenType;
+        objectSelectLabel.setAttribute('for', objectTypeSelect.id);
+        // Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
+        var inverseThicknessInputFn = function (t) { return Math.log10(t); };
+        var thicknessInputFn = function (t) { return Math.pow(10, t); };
+        thicknessInput.type = 'range';
+        thicknessInput.min = "".concat(inverseThicknessInputFn(2));
+        thicknessInput.max = "".concat(inverseThicknessInputFn(400));
+        thicknessInput.step = '0.1';
+        thicknessInput.oninput = function () {
+            _this.tool.setThickness(thicknessInputFn(parseFloat(thicknessInput.value)));
+        };
+        thicknessRow.appendChild(thicknessLabel);
+        thicknessRow.appendChild(thicknessInput);
+        objectTypeSelect.oninput = function () {
+            var penTypeIdx = parseInt(objectTypeSelect.value);
+            if (penTypeIdx < 0 || penTypeIdx >= _this.penTypes.length) {
+                console.error('Invalid pen type index', penTypeIdx);
+                return;
+            }
+            _this.tool.setStrokeFactory(_this.penTypes[penTypeIdx].factory);
+        };
+        objectTypeRow.appendChild(objectSelectLabel);
+        objectTypeRow.appendChild(objectTypeSelect);
+        var colorRow = document.createElement('div');
+        var colorLabel = document.createElement('label');
+        var _a = makeColorInput(this.editor, function (color) {
+            _this.tool.setColor(color);
+        }), colorInput = _a[0], colorInputContainer = _a[1], setColorInputValue = _a[2];
+        colorInput.id = "".concat(toolbarCSSPrefix, "colorInput").concat(PenToolWidget.idCounter++);
+        colorLabel.innerText = this.localizationTable.colorLabel;
+        colorLabel.setAttribute('for', colorInput.id);
+        colorRow.appendChild(colorLabel);
+        colorRow.appendChild(colorInputContainer);
+        this.updateInputs = function () {
+            setColorInputValue(_this.tool.getColor());
+            thicknessInput.value = inverseThicknessInputFn(_this.tool.getThickness()).toString();
+            // Update the list of stroke factories
+            objectTypeSelect.replaceChildren();
+            for (var i = 0; i < _this.penTypes.length; i++) {
+                var penType = _this.penTypes[i];
+                var option = document.createElement('option');
+                option.value = i.toString();
+                option.innerText = penType.name;
+                objectTypeSelect.appendChild(option);
+            }
+            // Update the selected stroke factory.
+            var strokeFactoryIdx = _this.getCurrentPenTypeIdx();
+            if (strokeFactoryIdx === -1) {
+                objectTypeSelect.value = '';
+            }
+            else {
+                objectTypeSelect.value = strokeFactoryIdx.toString();
+            }
+        };
+        this.updateInputs();
+        container.replaceChildren(colorRow, thicknessRow, objectTypeRow);
+        dropdown.replaceChildren(container);
+        return true;
+    };
+    PenToolWidget.prototype.onKeyPress = function (event) {
+        if (!this.isSelected()) {
+            return false;
+        }
+        for (var i = 0; i < selectStrokeTypeKeyboardShortcutIds.length; i++) {
+            var shortcut = selectStrokeTypeKeyboardShortcutIds[i];
+            if (this.editor.shortcuts.matchesShortcut(shortcut, event)) {
+                var penTypeIdx = i;
+                if (penTypeIdx < this.penTypes.length) {
+                    this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+    PenToolWidget.prototype.serializeState = function () {
+        var _a;
+        return __assign(__assign({}, _super.prototype.serializeState.call(this)), { color: this.tool.getColor().toHexString(), thickness: this.tool.getThickness(), strokeFactoryId: (_a = this.getCurrentPenType()) === null || _a === void 0 ? void 0 : _a.id });
+    };
+    PenToolWidget.prototype.deserializeFrom = function (state) {
+        _super.prototype.deserializeFrom.call(this, state);
+        var verifyPropertyType = function (propertyName, expectedType) {
+            var actualType = typeof (state[propertyName]);
+            if (actualType !== expectedType) {
+                throw new Error("Deserializing property ".concat(propertyName, ": Invalid type. Expected ").concat(expectedType, ",") +
+                    " was ".concat(actualType, "."));
+            }
+        };
+        if (state.color) {
+            verifyPropertyType('color', 'string');
+            this.tool.setColor(Color4.fromHex(state.color));
+        }
+        if (state.thickness) {
+            verifyPropertyType('thickness', 'number');
+            this.tool.setThickness(state.thickness);
+        }
+        if (state.strokeFactoryId) {
+            verifyPropertyType('strokeFactoryId', 'string');
+            var factoryId = state.strokeFactoryId;
+            for (var _i = 0, _a = this.penTypes; _i < _a.length; _i++) {
+                var penType = _a[_i];
+                if (factoryId === penType.id) {
+                    this.tool.setStrokeFactory(penType.factory);
+                    break;
+                }
+            }
+        }
+    };
+    PenToolWidget.idCounter = 0;
+    return PenToolWidget;
+}(BaseToolWidget));
+export default PenToolWidget;

package/dist/mjs/toolbar/widgets/SelectionToolWidget.mjs

@@ -0,0 +1,211 @@
+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 };
+    }
+};
+import  Color4  from '../../Color4.mjs';
+import  { isRestylableComponent }  from '../../components/RestylableComponent.mjs';
+import  uniteCommands  from '../../commands/uniteCommands.mjs';
+import  { EditorEventType }  from '../../types.mjs';
+import  makeColorInput  from '../makeColorInput.mjs';
+import  ActionButtonWidget  from './ActionButtonWidget.mjs';
+import  BaseToolWidget  from './BaseToolWidget.mjs';
+import  BaseWidget  from './BaseWidget.mjs';
+import  { resizeImageToSelectionKeyboardShortcut }  from './keybindings.mjs';
+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(EditorEventType.ToolUpdated, function (toolEvt) {
+            if (toolEvt.kind !== 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 = makeColorInput(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 (isRestylableComponent(elem)) {
+                        updateStyleCommands.push(elem.updateStyle({ color: color }));
+                    }
+                }
+                var unitedCommand = uniteCommands(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 (isRestylableComponent(elem)) {
+                        var color = elem.getStyle().color;
+                        if (color) {
+                            colors.push(color);
+                        }
+                    }
+                }
+                setColorInputValue(Color4.average(colors));
+            }
+            else {
+                colorInput.disabled = true;
+            }
+        };
+        colorRow.replaceChildren(colorLabel, colorInputContainer);
+        container.replaceChildren(colorRow);
+        dropdown.replaceChildren(container);
+        return true;
+    };
+    return RestyleSelectionWidget;
+}(BaseWidget));
+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(editor, 'resize-btn', function () { return editor.icons.makeResizeViewportIcon(); }, _this.localizationTable.resizeImageToSelection, function () {
+            _this.resizeImageToSelection();
+        }, localization);
+        var deleteButton = new ActionButtonWidget(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();
+        }, localization);
+        var duplicateButton = new ActionButtonWidget(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) {
+            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(EditorEventType.ToolUpdated, function (toolEvt) {
+            if (toolEvt.kind !== EditorEventType.ToolUpdated) {
+                throw new Error('Invalid event type!');
+            }
+            if (toolEvt.tool === _this.tool) {
+                var selection = _this.tool.getSelection();
+                var hasSelection = selection && selection.getSelectedItemCount() > 0;
+                updateDisabled(!hasSelection);
+            }
+        });
+        return _this;
+    }
+    SelectionToolWidget.prototype.resizeImageToSelection = function () {
+        var selection = this.tool.getSelection();
+        if (selection) {
+            this.editor.dispatch(this.editor.setImportExportRect(selection.region));
+        }
+    };
+    SelectionToolWidget.prototype.onKeyPress = function (event) {
+        var shortcuts = this.editor.shortcuts;
+        // Resize image to selection:
+        // Other keys are handled directly by the selection tool.
+        if (shortcuts.matchesShortcut(resizeImageToSelectionKeyboardShortcut, event)) {
+            this.resizeImageToSelection();
+            return true;
+        }
+        return false;
+    };
+    SelectionToolWidget.prototype.getTitle = function () {
+        return this.localizationTable.select;
+    };
+    SelectionToolWidget.prototype.createIcon = function () {
+        return this.editor.icons.makeSelectionIcon();
+    };
+    return SelectionToolWidget;
+}(BaseToolWidget));
+export default SelectionToolWidget;

package/dist/mjs/toolbar/widgets/TextToolWidget.mjs

@@ -0,0 +1,140 @@
+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);
+};
+import  Color4  from '../../Color4.mjs';
+import  { EditorEventType }  from '../../types.mjs';
+import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
+import  makeColorInput  from '../makeColorInput.mjs';
+import  BaseToolWidget  from './BaseToolWidget.mjs';
+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(EditorEventType.ToolUpdated, function (evt) {
+            var _a;
+            if (evt.kind === EditorEventType.ToolUpdated && evt.tool === tool) {
+                _this.updateIcon();
+                (_a = _this.updateDropdownInputs) === null || _a === void 0 ? void 0 : _a.call(_this);
+            }
+        });
+        return _this;
+    }
+    TextToolWidget.prototype.getTitle = function () {
+        return this.targetTool.description;
+    };
+    TextToolWidget.prototype.createIcon = function () {
+        var 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(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 = makeColorInput(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');
+            option.value = fontName;
+            option.textContent = fontName;
+            fontInput.appendChild(option);
+            fontsInInput.add(fontName);
+        };
+        sizeInput.setAttribute('type', 'number');
+        sizeInput.min = '1';
+        sizeInput.max = '128';
+        fontLabel.innerText = this.localizationTable.fontLabel;
+        colorLabel.innerText = this.localizationTable.colorLabel;
+        sizeLabel.innerText = this.localizationTable.textSize;
+        colorInput.id = "".concat(toolbarCSSPrefix, "-text-color-input-").concat(TextToolWidget.idCounter++);
+        colorLabel.setAttribute('for', colorInput.id);
+        sizeInput.id = "".concat(toolbarCSSPrefix, "-text-size-input-").concat(TextToolWidget.idCounter++);
+        sizeLabel.setAttribute('for', sizeInput.id);
+        addFontToInput('monospace');
+        addFontToInput('serif');
+        addFontToInput('sans-serif');
+        fontInput.id = "".concat(toolbarCSSPrefix, "-text-font-input-").concat(TextToolWidget.idCounter++);
+        fontLabel.setAttribute('for', fontInput.id);
+        fontInput.onchange = function () {
+            _this.tool.setFontFamily(fontInput.value);
+        };
+        sizeInput.onchange = function () {
+            var size = parseInt(sizeInput.value);
+            if (!isNaN(size) && size > 0) {
+                _this.tool.setFontSize(size);
+            }
+        };
+        colorRow.appendChild(colorLabel);
+        colorRow.appendChild(colorInputContainer);
+        fontRow.appendChild(fontLabel);
+        fontRow.appendChild(fontInput);
+        sizeRow.appendChild(sizeLabel);
+        sizeRow.appendChild(sizeInput);
+        this.updateDropdownInputs = function () {
+            var 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);
+        };
+        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) {
+        if (state.fontFamily && typeof (state.fontFamily) === 'string') {
+            this.tool.setFontFamily(state.fontFamily);
+        }
+        if (state.color && typeof (state.color) === 'string') {
+            this.tool.setColor(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));
+export default TextToolWidget;

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

@@ -0,0 +1,2 @@
+export declare const resizeImageToSelectionKeyboardShortcut = "jsdraw.toolbar.SelectionTool.resizeImageToSelection";
+export declare const selectStrokeTypeKeyboardShortcutIds: string[];

package/dist/mjs/toolbar/widgets/keybindings.mjs

@@ -0,0 +1,10 @@
+import  KeyboardShortcutManager  from '../../shortcuts/KeyboardShortcutManager.mjs';
+// Selection
+export var resizeImageToSelectionKeyboardShortcut = 'jsdraw.toolbar.SelectionTool.resizeImageToSelection';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(resizeImageToSelectionKeyboardShortcut, ['ctrlOrMeta+r'], 'Resize image to selection');
+// Pen tool
+export var selectStrokeTypeKeyboardShortcutIds = [1, 2, 3, 4, 5, 6, 7].map(function (id) { return "jsdraw.toolbar.PenTool.select-pen-".concat(id); });
+for (var i = 0; i < selectStrokeTypeKeyboardShortcutIds.length; i++) {
+    var id = selectStrokeTypeKeyboardShortcutIds[i];
+    KeyboardShortcutManager.registerDefaultKeyboardShortcut(id, ["ctrlOrMeta+".concat((i + 1))], 'Select pen style ' + (i + 1));
+}