js-draw 0.25.1 → 1.0.0

package/dist/mjs/toolbar/widgets/InsertImageWidget.mjs

@@ -1,244 +1,176 @@
-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  ImageComponent  from '../../components/ImageComponent.mjs';
 import  Erase  from '../../commands/Erase.mjs';
 import  EditorImage  from '../../EditorImage.mjs';
 import  uniteCommands  from '../../commands/uniteCommands.mjs';
 import  SelectionTool  from '../../tools/SelectionTool/SelectionTool.mjs';
-import  Mat33  from '../../math/Mat33.mjs';
+import { Mat33 } from '@js-draw/math';
 import  fileToBase64  from '../../util/fileToBase64.mjs';
-import  ActionButtonWidget  from './ActionButtonWidget.mjs';
-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;
+import  BaseWidget  from './BaseWidget.mjs';
+import  { EditorEventType }  from '../../types.mjs';
+import  { toolbarCSSPrefix }  from '../constants.mjs';
+import  makeFileInput  from './components/makeFileInput.mjs';
+class InsertImageWidget extends BaseWidget {
+    constructor(editor, localization) {
+        localization ??= editor.localization;
+        super(editor, 'insert-image-widget', localization);
+        // Make the dropdown showable
+        this.container.classList.add('dropdownShowable');
+        editor.notifier.on(EditorEventType.SelectionUpdated, event => {
+            if (event.kind === EditorEventType.SelectionUpdated && this.isDropdownVisible()) {
+                this.updateInputs();
+            }
+        });
+    }
+    getTitle() {
+        return this.localizationTable.image;
+    }
+    createIcon() {
+        return this.editor.icons.makeInsertImageIcon();
+    }
+    setDropdownVisible(visible) {
+        super.setDropdownVisible(visible);
+        // Update the dropdown just before showing.
+        if (this.isDropdownVisible()) {
+            this.updateInputs();
+        }
     }
-    InsertImageWidget.prototype.fillOverlay = function () {
-        var _this = this;
-        var container = document.createElement('div');
-        var chooseImageRow = document.createElement('div');
-        var altTextRow = document.createElement('div');
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        container.classList.add('insert-image-widget-dropdown-content', `${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`);
+        const { container: chooseImageRow, selectedFiles, } = makeFileInput(this.localizationTable.chooseFile, this.editor, 'image/*');
+        const altTextRow = document.createElement('div');
         this.imagePreview = document.createElement('img');
         this.statusView = document.createElement('div');
-        var actionButtonRow = document.createElement('div');
+        const 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.selectedFiles = selectedFiles;
         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);
+        // Label the alt text input
+        const imageAltTextLabel = document.createElement('label');
+        const altTextInputId = `insert-image-alt-text-input-${InsertImageWidget.nextInputId++}`;
         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*/, fileToBase64(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();
+        this.selectedFiles.onUpdateAndNow(async (files) => {
+            if (files.length === 0) {
+                this.imagePreview.style.display = 'none';
+                this.submitButton.disabled = true;
+                this.submitButton.style.display = 'none';
+                return;
             }
-        };
-        chooseImageRow.replaceChildren(imageFileInputLabel, this.imageFileInput);
+            this.imagePreview.style.display = 'block';
+            const image = files[0];
+            let data = null;
+            try {
+                data = await fileToBase64(image);
+            }
+            catch (e) {
+                this.statusView.innerText = this.localizationTable.imageLoadError(e);
+            }
+            this.imageBase64URL = data;
+            if (data) {
+                this.imagePreview.src = data;
+                this.submitButton.disabled = false;
+                this.submitButton.style.display = '';
+                this.updateImageSizeDisplay();
+            }
+            else {
+                this.submitButton.disabled = true;
+                this.submitButton.style.display = 'none';
+                this.statusView.innerText = '';
+            }
+        });
         altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
-        actionButtonRow.replaceChildren(cancelButton, this.submitButton);
+        actionButtonRow.replaceChildren(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;
+        dropdown.replaceChildren(container);
+        return true;
+    }
+    hideDialog() {
+        this.setDropdownVisible(false);
+    }
+    updateImageSizeDisplay() {
+        const imageData = this.imageBase64URL ?? '';
+        const sizeInKiB = imageData.length / 1024;
+        const sizeInMiB = sizeInKiB / 1024;
+        let units = 'KiB';
+        let 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);
-        var selectedObjects = selectionTools.map(function (tool) { return tool.getSelectedObjects(); }).flat();
-        var editingImage = null;
+    }
+    updateInputs() {
+        const resetInputs = () => {
+            this.selectedFiles?.set([]);
+            this.imageAltTextInput.value = '';
+            this.imagePreview.style.display = 'none';
+            this.submitButton.disabled = true;
+            this.statusView.innerText = '';
+            this.submitButton.style.display = '';
+            this.imageAltTextInput.oninput = null;
+        };
+        resetInputs();
+        const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
+        const selectedObjects = selectionTools.map(tool => tool.getSelectedObjects()).flat();
+        // Check: Is there a selected image that can be edited?
+        let editingImage = null;
         if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent) {
             editingImage = selectedObjects[0];
-            this.imageAltTextInput.value = (_a = editingImage.getAltText()) !== null && _a !== void 0 ? _a : '';
+            this.imageAltTextInput.value = editingImage.getAltText() ?? '';
             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(); });
+        else if (selectedObjects.length > 0) {
+            // If not, clear the selection.
+            selectionTools.forEach(tool => 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.fromImage(image, Mat33.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([editingImage]);
-                        return [4 /*yield*/, this.editor.dispatch(uniteCommands([
-                                EditorImage.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));
+        // Show the submit button only when there is data to submit.
+        this.submitButton.style.display = 'none';
+        this.imageAltTextInput.oninput = () => {
+            if (this.imagePreview.src?.length > 0) {
+                this.submitButton.style.display = '';
+            }
+        };
+        this.submitButton.onclick = async () => {
+            if (!this.imageBase64URL) {
+                return;
+            }
+            const image = new Image();
+            image.src = this.imageBase64URL;
+            image.setAttribute('alt', this.imageAltTextInput.value);
+            const component = await ImageComponent.fromImage(image, Mat33.identity);
+            if (component.getBBox().area === 0) {
+                this.statusView.innerText = this.localizationTable.errorImageHasZeroSize;
+                return;
+            }
+            this.hideDialog();
+            if (editingImage) {
+                const eraseCommand = new Erase([editingImage]);
+                await this.editor.dispatch(uniteCommands([
+                    EditorImage.addElement(component),
+                    component.transformBy(editingImage.getTransformation()),
+                    component.setZIndex(editingImage.getZIndex()),
+                    eraseCommand,
+                ]));
+                selectionTools[0]?.setSelection([component]);
+            }
+            else {
+                await this.editor.addAndCenterComponents([component]);
+            }
+        };
+    }
+}
+InsertImageWidget.nextInputId = 0;
 export default InsertImageWidget;

package/dist/mjs/toolbar/widgets/OverflowWidget.mjs

@@ -1,88 +1,58 @@
-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));
-};
 import  BaseWidget  from './BaseWidget.mjs';
-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');
+export default class OverflowWidget extends BaseWidget {
+    constructor(editor, localizationTable) {
+        super(editor, 'overflow-widget', localizationTable);
+        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;
+        this.container.classList.add('dropdownShowable');
+        this.overflowContainer ??= document.createElement('div');
     }
-    OverflowWidget.prototype.getTitle = function () {
+    getTitle() {
         return this.localizationTable.toggleOverflow;
-    };
-    OverflowWidget.prototype.createIcon = function () {
+    }
+    createIcon() {
         return this.editor.icons.makeOverflowIcon();
-    };
-    OverflowWidget.prototype.handleClick = function () {
+    }
+    handleClick() {
         this.setDropdownVisible(!this.isDropdownVisible());
-    };
-    OverflowWidget.prototype.fillDropdown = function (dropdown) {
-        var _a;
-        (_a = this.overflowContainer) !== null && _a !== void 0 ? _a : (this.overflowContainer = document.createElement('div'));
+    }
+    fillDropdown(dropdown) {
+        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 () {
+    clearChildren() {
         this.overflowContainer.replaceChildren();
         this.container.classList.remove('horizontal');
-        var overflowChildren = this.overflowChildren;
+        const 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];
+    }
+    getChildWidgets() {
+        return [...this.overflowChildren];
+    }
+    hasAsChild(widget) {
+        for (const otherWidget of this.overflowChildren) {
             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) {
+    addToOverflow(widget) {
         this.overflowChildren.push(widget);
         widget.addTo(this.overflowContainer);
         widget.setIsToplevel(false);
@@ -90,12 +60,10 @@ var OverflowWidget = /** @class */ (function (_super) {
         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 () {
+    canBeInOverflowMenu() {
         return false;
-    };
-    return OverflowWidget;
-}(BaseWidget));
-export default OverflowWidget;
+    }
+}

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

@@ -1,19 +1,21 @@
 import { ComponentBuilderFactory } from '../../components/builders/types';
 import Editor from '../../Editor';
 import Pen from '../../tools/Pen';
-import { KeyPressEvent } from '../../types';
+import { KeyPressEvent } from '../../inputEvents';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
 export interface PenTypeRecord {
     name: string;
     id: string;
+    isShapeBuilder?: boolean;
     factory: ComponentBuilderFactory;
 }
 export default class PenToolWidget extends BaseToolWidget {
     private tool;
     private updateInputs;
     protected penTypes: PenTypeRecord[];
+    protected shapelikeIDs: string[];
     private static idCounter;
     constructor(editor: Editor, tool: Pen, localization?: ToolbarLocalization);
     protected getTitle(): string;
@@ -22,6 +24,11 @@ export default class PenToolWidget extends BaseToolWidget {
     private createIconForRecord;
     protected createIcon(): Element;
     private createPenTypeSelector;
+    private setInputStabilizationEnabled;
+    protected createStabilizationOption(): {
+        update: () => void;
+        addTo: (parent: HTMLElement) => void;
+    };
     protected fillDropdown(dropdown: HTMLElement): boolean;
     protected onKeyPress(event: KeyPressEvent): boolean;
     serializeState(): SavedToolbuttonState;