js-draw 0.23.0 → 0.24.0

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

@@ -0,0 +1,90 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var types_1 = require("../../types");
+var HTMLToolbar_1 = require("../HTMLToolbar");
+var BaseToolWidget_1 = require("./BaseToolWidget");
+var EraserToolWidget = /** @class */ (function (_super) {
+    __extends(EraserToolWidget, _super);
+    function EraserToolWidget(editor, tool, localizationTable) {
+        var _this = _super.call(this, editor, tool, 'eraser-tool-widget', localizationTable) || this;
+        _this.tool = tool;
+        _this.thicknessInput = null;
+        _this.editor.notifier.on(types_1.EditorEventType.ToolUpdated, function (toolEvt) {
+            if (toolEvt.kind === types_1.EditorEventType.ToolUpdated && toolEvt.tool === _this.tool) {
+                _this.updateInputs();
+                _this.updateIcon();
+            }
+        });
+        return _this;
+    }
+    EraserToolWidget.prototype.getTitle = function () {
+        return this.localizationTable.eraser;
+    };
+    EraserToolWidget.prototype.createIcon = function () {
+        return this.editor.icons.makeEraserIcon(this.tool.getThickness());
+    };
+    EraserToolWidget.prototype.updateInputs = function () {
+        if (this.thicknessInput) {
+            this.thicknessInput.value = "".concat(this.tool.getThickness());
+        }
+    };
+    EraserToolWidget.prototype.fillDropdown = function (dropdown) {
+        var _this = this;
+        var thicknessLabel = document.createElement('label');
+        this.thicknessInput = document.createElement('input');
+        this.thicknessInput.type = 'range';
+        this.thicknessInput.min = '4';
+        this.thicknessInput.max = '40';
+        this.thicknessInput.oninput = function () {
+            _this.tool.setThickness(parseFloat(_this.thicknessInput.value));
+        };
+        this.thicknessInput.id = "".concat(HTMLToolbar_1.toolbarCSSPrefix, "eraserThicknessInput").concat(EraserToolWidget.nextThicknessInputId++);
+        thicknessLabel.innerText = this.localizationTable.thicknessLabel;
+        thicknessLabel.htmlFor = this.thicknessInput.id;
+        this.updateInputs();
+        dropdown.replaceChildren(thicknessLabel, this.thicknessInput);
+        return true;
+    };
+    EraserToolWidget.prototype.serializeState = function () {
+        return __assign(__assign({}, _super.prototype.serializeState.call(this)), { thickness: this.tool.getThickness() });
+    };
+    EraserToolWidget.prototype.deserializeFrom = function (state) {
+        _super.prototype.deserializeFrom.call(this, state);
+        if (state.thickness) {
+            var parsedThickness = parseFloat(state.thickness);
+            if (typeof parsedThickness !== 'number' || !isFinite(parsedThickness)) {
+                throw new Error("Deserializing property ".concat(parsedThickness, " is not a number or is not finite."));
+            }
+            this.tool.setThickness(parsedThickness);
+        }
+    };
+    EraserToolWidget.nextThicknessInputId = 0;
+    return EraserToolWidget;
+}(BaseToolWidget_1.default));
+exports.default = EraserToolWidget;

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

@@ -0,0 +1,211 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Mat33_1 = require("../../math/Mat33");
+var PanZoom_1 = require("../../tools/PanZoom");
+var types_1 = require("../../types");
+var Viewport_1 = require("../../Viewport");
+var HTMLToolbar_1 = require("../HTMLToolbar");
+var BaseToolWidget_1 = require("./BaseToolWidget");
+var BaseWidget_1 = require("./BaseWidget");
+var makeZoomControl = function (localizationTable, editor) {
+    var zoomLevelRow = document.createElement('div');
+    var increaseButton = document.createElement('button');
+    var decreaseButton = document.createElement('button');
+    var resetViewButton = document.createElement('button');
+    var zoomLevelDisplay = document.createElement('span');
+    increaseButton.innerText = '+';
+    decreaseButton.innerText = '-';
+    resetViewButton.innerText = localizationTable.resetView;
+    zoomLevelRow.replaceChildren(zoomLevelDisplay, increaseButton, decreaseButton, resetViewButton);
+    zoomLevelRow.classList.add("".concat(HTMLToolbar_1.toolbarCSSPrefix, "zoomLevelEditor"));
+    zoomLevelDisplay.classList.add('zoomDisplay');
+    var lastZoom;
+    var updateZoomDisplay = function () {
+        var zoomLevel = editor.viewport.getScaleFactor() * 100;
+        if (zoomLevel > 0.1) {
+            zoomLevel = Math.round(zoomLevel * 10) / 10;
+        }
+        else {
+            zoomLevel = Math.round(zoomLevel * 1000) / 1000;
+        }
+        if (zoomLevel !== lastZoom) {
+            zoomLevelDisplay.innerText = localizationTable.zoomLevel(zoomLevel);
+            lastZoom = zoomLevel;
+        }
+    };
+    updateZoomDisplay();
+    editor.notifier.on(types_1.EditorEventType.ViewportChanged, function (event) {
+        if (event.kind === types_1.EditorEventType.ViewportChanged) {
+            updateZoomDisplay();
+            // Can't reset if already reset.
+            resetViewButton.disabled = event.newTransform.eq(Mat33_1.default.identity);
+        }
+    });
+    var zoomBy = function (factor) {
+        var screenCenter = editor.viewport.visibleRect.center;
+        var transformUpdate = Mat33_1.default.scaling2D(factor, screenCenter);
+        editor.dispatch(Viewport_1.default.transformBy(transformUpdate), false);
+    };
+    increaseButton.onclick = function () {
+        zoomBy(5.0 / 4);
+    };
+    decreaseButton.onclick = function () {
+        zoomBy(4.0 / 5);
+    };
+    resetViewButton.onclick = function () {
+        editor.dispatch(Viewport_1.default.transformBy(editor.viewport.canvasToScreenTransform.inverse()), true);
+    };
+    return zoomLevelRow;
+};
+var ZoomWidget = /** @class */ (function (_super) {
+    __extends(ZoomWidget, _super);
+    function ZoomWidget(editor, localizationTable) {
+        var _this = _super.call(this, editor, 'zoom-widget', localizationTable) || this;
+        // Make it possible to open the dropdown, even if this widget isn't selected.
+        _this.container.classList.add('dropdownShowable');
+        return _this;
+    }
+    ZoomWidget.prototype.getTitle = function () {
+        return this.localizationTable.zoom;
+    };
+    ZoomWidget.prototype.createIcon = function () {
+        return this.editor.icons.makeZoomIcon();
+    };
+    ZoomWidget.prototype.handleClick = function () {
+        this.setDropdownVisible(!this.isDropdownVisible());
+    };
+    ZoomWidget.prototype.fillDropdown = function (dropdown) {
+        dropdown.replaceChildren(makeZoomControl(this.localizationTable, this.editor));
+        return true;
+    };
+    return ZoomWidget;
+}(BaseWidget_1.default));
+var HandModeWidget = /** @class */ (function (_super) {
+    __extends(HandModeWidget, _super);
+    function HandModeWidget(editor, tool, flag, makeIcon, title, localizationTable) {
+        var _this = _super.call(this, editor, "pan-mode-".concat(flag), localizationTable) || this;
+        _this.tool = tool;
+        _this.flag = flag;
+        _this.makeIcon = makeIcon;
+        _this.title = title;
+        editor.notifier.on(types_1.EditorEventType.ToolUpdated, function (toolEvt) {
+            if (toolEvt.kind === types_1.EditorEventType.ToolUpdated && toolEvt.tool === tool) {
+                var allEnabled = !!(tool.getMode() & PanZoom_1.PanZoomMode.SinglePointerGestures);
+                _this.setSelected(!!(tool.getMode() & flag) || allEnabled);
+                // Unless this widget toggles all single pointer gestures, toggling while
+                // single pointer gestures are enabled should have no effect
+                _this.setDisabled(allEnabled && flag !== PanZoom_1.PanZoomMode.SinglePointerGestures);
+            }
+        });
+        _this.setSelected(false);
+        return _this;
+    }
+    HandModeWidget.prototype.setModeFlag = function (enabled) {
+        this.tool.setModeEnabled(this.flag, enabled);
+    };
+    HandModeWidget.prototype.handleClick = function () {
+        this.setModeFlag(!this.isSelected());
+    };
+    HandModeWidget.prototype.getTitle = function () {
+        return this.title;
+    };
+    HandModeWidget.prototype.createIcon = function () {
+        return this.makeIcon();
+    };
+    HandModeWidget.prototype.fillDropdown = function (_dropdown) {
+        return false;
+    };
+    return HandModeWidget;
+}(BaseWidget_1.default));
+var HandToolWidget = /** @class */ (function (_super) {
+    __extends(HandToolWidget, _super);
+    function HandToolWidget(editor, 
+    // Pan zoom tool that overrides all other tools (enabling this tool for a device
+    // causes that device to pan/zoom instead of interact with the primary tools)
+    overridePanZoomTool, localizationTable) {
+        var _this = this;
+        var primaryHandTool = HandToolWidget.getPrimaryHandTool(editor.toolController);
+        var tool = primaryHandTool !== null && primaryHandTool !== void 0 ? primaryHandTool : overridePanZoomTool;
+        _this = _super.call(this, editor, tool, 'hand-tool-widget', localizationTable) || this;
+        _this.overridePanZoomTool = overridePanZoomTool;
+        // Only allow toggling a hand tool if we're using the primary hand tool and not the override
+        // hand tool for this button.
+        _this.allowTogglingBaseTool = primaryHandTool !== null;
+        // Allow showing/hiding the dropdown, even if `overridePanZoomTool` isn't enabled.
+        if (!_this.allowTogglingBaseTool) {
+            _this.container.classList.add('dropdownShowable');
+        }
+        // Controls for the overriding hand tool.
+        var touchPanningWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoom_1.PanZoomMode.OneFingerTouchGestures, function () { return _this.editor.icons.makeTouchPanningIcon(); }, localizationTable.touchPanning, localizationTable);
+        var rotationLockWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoom_1.PanZoomMode.RotationLocked, function () { return _this.editor.icons.makeRotationLockIcon(); }, localizationTable.lockRotation, localizationTable);
+        _this.addSubWidget(touchPanningWidget);
+        _this.addSubWidget(rotationLockWidget);
+        _this.addSubWidget(new ZoomWidget(editor, localizationTable));
+        return _this;
+    }
+    HandToolWidget.getPrimaryHandTool = function (toolController) {
+        var primaryPanZoomToolList = toolController.getPrimaryTools().filter(function (tool) { return tool instanceof PanZoom_1.default; });
+        var primaryPanZoomTool = primaryPanZoomToolList[0];
+        return primaryPanZoomTool;
+    };
+    HandToolWidget.prototype.getTitle = function () {
+        return this.localizationTable.handTool;
+    };
+    HandToolWidget.prototype.createIcon = function () {
+        return this.editor.icons.makeHandToolIcon();
+    };
+    HandToolWidget.prototype.handleClick = function () {
+        if (this.allowTogglingBaseTool) {
+            _super.prototype.handleClick.call(this);
+        }
+        else {
+            this.setDropdownVisible(!this.isDropdownVisible());
+        }
+    };
+    HandToolWidget.prototype.setSelected = function (selected) {
+        if (this.allowTogglingBaseTool) {
+            _super.prototype.setSelected.call(this, selected);
+        }
+    };
+    HandToolWidget.prototype.serializeState = function () {
+        var toolMode = this.overridePanZoomTool.getMode();
+        return __assign(__assign({}, _super.prototype.serializeState.call(this)), { touchPanning: toolMode & PanZoom_1.PanZoomMode.OneFingerTouchGestures, rotationLocked: toolMode & PanZoom_1.PanZoomMode.RotationLocked });
+    };
+    HandToolWidget.prototype.deserializeFrom = function (state) {
+        if (state.touchPanning !== undefined) {
+            this.overridePanZoomTool.setModeEnabled(PanZoom_1.PanZoomMode.OneFingerTouchGestures, state.touchPanning);
+        }
+        if (state.rotationLocked !== undefined) {
+            this.overridePanZoomTool.setModeEnabled(PanZoom_1.PanZoomMode.RotationLocked, state.rotationLocked);
+        }
+        _super.prototype.deserializeFrom.call(this, state);
+    };
+    return HandToolWidget;
+}(BaseToolWidget_1.default));
+exports.default = HandToolWidget;

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

@@ -0,0 +1,246 @@
+"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 };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ImageComponent_1 = require("../../components/ImageComponent");
+var Erase_1 = require("../../commands/Erase");
+var EditorImage_1 = require("../../EditorImage");
+var uniteCommands_1 = require("../../commands/uniteCommands");
+var SelectionTool_1 = require("../../tools/SelectionTool/SelectionTool");
+var Mat33_1 = require("../../math/Mat33");
+var fileToBase64_1 = require("../../util/fileToBase64");
+var ActionButtonWidget_1 = require("./ActionButtonWidget");
+var InsertImageWidget = /** @class */ (function (_super) {
+    __extends(InsertImageWidget, _super);
+    function InsertImageWidget(editor, localization) {
+        var _this = this;
+        localization !== null && localization !== void 0 ? localization : (localization = editor.localization);
+        _this = _super.call(this, editor, 'insert-image-widget', function () { return editor.icons.makeInsertImageIcon(); }, localization.image, function () { return _this.onClicked(); }) || this;
+        _this.imageSelectionOverlay = document.createElement('div');
+        _this.imageSelectionOverlay.classList.add('toolbar-image-selection-overlay');
+        _this.fillOverlay();
+        _this.editor.createHTMLOverlay(_this.imageSelectionOverlay);
+        _this.imageSelectionOverlay.style.display = 'none';
+        return _this;
+    }
+    InsertImageWidget.prototype.fillOverlay = function () {
+        var _this = this;
+        var container = document.createElement('div');
+        var chooseImageRow = document.createElement('div');
+        var altTextRow = document.createElement('div');
+        this.imagePreview = document.createElement('img');
+        this.statusView = document.createElement('div');
+        var actionButtonRow = document.createElement('div');
+        actionButtonRow.classList.add('action-button-row');
+        this.submitButton = document.createElement('button');
+        var cancelButton = document.createElement('button');
+        this.imageFileInput = document.createElement('input');
+        this.imageAltTextInput = document.createElement('input');
+        var imageFileInputLabel = document.createElement('label');
+        var imageAltTextLabel = document.createElement('label');
+        var fileInputId = "insert-image-file-input-".concat(InsertImageWidget.nextInputId++);
+        var altTextInputId = "insert-image-alt-text-input-".concat(InsertImageWidget.nextInputId++);
+        this.imageFileInput.setAttribute('id', fileInputId);
+        this.imageAltTextInput.setAttribute('id', altTextInputId);
+        imageAltTextLabel.htmlFor = altTextInputId;
+        imageFileInputLabel.htmlFor = fileInputId;
+        this.imageFileInput.accept = 'image/*';
+        imageAltTextLabel.innerText = this.localizationTable.inputAltText;
+        imageFileInputLabel.innerText = this.localizationTable.chooseFile;
+        this.imageFileInput.type = 'file';
+        this.imageAltTextInput.type = 'text';
+        this.statusView.setAttribute('aria-live', 'polite');
+        cancelButton.innerText = this.localizationTable.cancel;
+        this.submitButton.innerText = this.localizationTable.submit;
+        this.imageFileInput.onchange = function () { return __awaiter(_this, void 0, void 0, function () {
+            var image, data, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.imageFileInput.value === '' || !this.imageFileInput.files || !this.imageFileInput.files[0]) {
+                            this.imagePreview.style.display = 'none';
+                            this.submitButton.disabled = true;
+                            return [2 /*return*/];
+                        }
+                        this.imagePreview.style.display = 'block';
+                        image = this.imageFileInput.files[0];
+                        data = null;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, (0, fileToBase64_1.default)(image)];
+                    case 2:
+                        data = _a.sent();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_1 = _a.sent();
+                        this.statusView.innerText = this.localizationTable.imageLoadError(e_1);
+                        return [3 /*break*/, 4];
+                    case 4:
+                        this.imageBase64URL = data;
+                        if (data) {
+                            this.imagePreview.src = data;
+                            this.submitButton.disabled = false;
+                            this.updateImageSizeDisplay();
+                        }
+                        else {
+                            this.submitButton.disabled = true;
+                            this.statusView.innerText = '';
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        cancelButton.onclick = function () {
+            _this.hideDialog();
+        };
+        this.imageSelectionOverlay.onclick = function (evt) {
+            // If clicking on the backdrop
+            if (evt.target === _this.imageSelectionOverlay) {
+                _this.hideDialog();
+            }
+        };
+        chooseImageRow.replaceChildren(imageFileInputLabel, this.imageFileInput);
+        altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
+        actionButtonRow.replaceChildren(cancelButton, this.submitButton);
+        container.replaceChildren(chooseImageRow, altTextRow, this.imagePreview, this.statusView, actionButtonRow);
+        this.imageSelectionOverlay.replaceChildren(container);
+    };
+    InsertImageWidget.prototype.hideDialog = function () {
+        this.imageSelectionOverlay.style.display = 'none';
+    };
+    InsertImageWidget.prototype.updateImageSizeDisplay = function () {
+        var _a;
+        var imageData = (_a = this.imageBase64URL) !== null && _a !== void 0 ? _a : '';
+        var sizeInKiB = imageData.length / 1024;
+        var sizeInMiB = sizeInKiB / 1024;
+        var units = 'KiB';
+        var size = sizeInKiB;
+        if (sizeInMiB >= 1) {
+            size = sizeInMiB;
+            units = 'MiB';
+        }
+        this.statusView.innerText = this.localizationTable.imageSize(Math.round(size), units);
+    };
+    InsertImageWidget.prototype.clearInputs = function () {
+        this.imageFileInput.value = '';
+        this.imageAltTextInput.value = '';
+        this.imagePreview.style.display = 'none';
+        this.submitButton.disabled = true;
+        this.statusView.innerText = '';
+    };
+    InsertImageWidget.prototype.onClicked = function () {
+        var _this = this;
+        var _a;
+        this.imageSelectionOverlay.style.display = '';
+        this.clearInputs();
+        this.imageFileInput.focus();
+        var selectionTools = this.editor.toolController.getMatchingTools(SelectionTool_1.default);
+        var selectedObjects = selectionTools.map(function (tool) { return tool.getSelectedObjects(); }).flat();
+        var editingImage = null;
+        if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent_1.default) {
+            editingImage = selectedObjects[0];
+            this.imageAltTextInput.value = (_a = editingImage.getAltText()) !== null && _a !== void 0 ? _a : '';
+            this.imagePreview.style.display = 'block';
+            this.submitButton.disabled = false;
+            this.imageBase64URL = editingImage.getURL();
+            this.imagePreview.src = this.imageBase64URL;
+            this.updateImageSizeDisplay();
+        }
+        else {
+            selectionTools.forEach(function (tool) { return tool.clearSelection(); });
+        }
+        this.submitButton.onclick = function () { return __awaiter(_this, void 0, void 0, function () {
+            var image, component, eraseCommand;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!this.imageBase64URL) {
+                            return [2 /*return*/];
+                        }
+                        image = new Image();
+                        image.src = this.imageBase64URL;
+                        image.setAttribute('alt', this.imageAltTextInput.value);
+                        return [4 /*yield*/, ImageComponent_1.default.fromImage(image, Mat33_1.default.identity)];
+                    case 1:
+                        component = _b.sent();
+                        if (component.getBBox().area === 0) {
+                            this.statusView.innerText = this.localizationTable.errorImageHasZeroSize;
+                            return [2 /*return*/];
+                        }
+                        this.imageSelectionOverlay.style.display = 'none';
+                        if (!editingImage) return [3 /*break*/, 3];
+                        eraseCommand = new Erase_1.default([editingImage]);
+                        return [4 /*yield*/, this.editor.dispatch((0, uniteCommands_1.default)([
+                                EditorImage_1.default.addElement(component),
+                                component.transformBy(editingImage.getTransformation()),
+                                component.setZIndex(editingImage.getZIndex()),
+                                eraseCommand,
+                            ]))];
+                    case 2:
+                        _b.sent();
+                        (_a = selectionTools[0]) === null || _a === void 0 ? void 0 : _a.setSelection([component]);
+                        return [3 /*break*/, 5];
+                    case 3: return [4 /*yield*/, this.editor.addAndCenterComponents([component])];
+                    case 4:
+                        _b.sent();
+                        _b.label = 5;
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
+    };
+    InsertImageWidget.nextInputId = 0;
+    return InsertImageWidget;
+}(ActionButtonWidget_1.default));
+exports.default = InsertImageWidget;

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

@@ -0,0 +1,103 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var BaseWidget_1 = require("./BaseWidget");
+var OverflowWidget = /** @class */ (function (_super) {
+    __extends(OverflowWidget, _super);
+    function OverflowWidget(editor, localizationTable) {
+        var _this = this;
+        var _a;
+        _this = _super.call(this, editor, 'overflow-widget', localizationTable) || this;
+        _this.overflowChildren = [];
+        _this.container.classList.add('toolbar-overflow-widget');
+        // Make the dropdown openable
+        _this.container.classList.add('dropdownShowable');
+        (_a = _this.overflowContainer) !== null && _a !== void 0 ? _a : (_this.overflowContainer = document.createElement('div'));
+        return _this;
+    }
+    OverflowWidget.prototype.getTitle = function () {
+        return this.localizationTable.toggleOverflow;
+    };
+    OverflowWidget.prototype.createIcon = function () {
+        return this.editor.icons.makeOverflowIcon();
+    };
+    OverflowWidget.prototype.handleClick = function () {
+        this.setDropdownVisible(!this.isDropdownVisible());
+    };
+    OverflowWidget.prototype.fillDropdown = function (dropdown) {
+        var _a;
+        (_a = this.overflowContainer) !== null && _a !== void 0 ? _a : (this.overflowContainer = document.createElement('div'));
+        if (this.overflowContainer.parentElement) {
+            this.overflowContainer.remove();
+        }
+        this.overflowContainer.classList.add('toolbar-overflow-widget-overflow-list');
+        dropdown.appendChild(this.overflowContainer);
+        return true;
+    };
+    /**
+     * Removes all `BaseWidget`s from this and returns them.
+     */
+    OverflowWidget.prototype.clearChildren = function () {
+        this.overflowContainer.replaceChildren();
+        this.container.classList.remove('horizontal');
+        var overflowChildren = this.overflowChildren;
+        this.overflowChildren = [];
+        return overflowChildren;
+    };
+    OverflowWidget.prototype.getChildWidgets = function () {
+        return __spreadArray([], this.overflowChildren, true);
+    };
+    OverflowWidget.prototype.hasAsChild = function (widget) {
+        for (var _i = 0, _a = this.overflowChildren; _i < _a.length; _i++) {
+            var otherWidget = _a[_i];
+            if (widget === otherWidget) {
+                return true;
+            }
+        }
+        return false;
+    };
+    /**
+     * Adds `widget` to this.
+     * `widget`'s previous parent is still responsible
+     * for serializing/deserializing its state.
+     */
+    OverflowWidget.prototype.addToOverflow = function (widget) {
+        this.overflowChildren.push(widget);
+        widget.addTo(this.overflowContainer);
+        widget.setIsToplevel(false);
+        // Switch to a horizontal layout if enough children
+        if (this.overflowChildren.length > 2) {
+            this.container.classList.add('horizontal');
+        }
+    };
+    // This always returns false.
+    // Don't try to move the overflow menu to itself.
+    OverflowWidget.prototype.canBeInOverflowMenu = function () {
+        return false;
+    };
+    return OverflowWidget;
+}(BaseWidget_1.default));
+exports.default = OverflowWidget;