js-draw 0.25.1 → 1.0.0

package/dist/mjs/toolbar/widgets/HandToolWidget.mjs

@@ -1,51 +1,26 @@
-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  Mat33  from '../../math/Mat33.mjs';
+import { Mat33 } from '@js-draw/math';
 import  PanZoom, { PanZoomMode }  from '../../tools/PanZoom.mjs';
 import  { EditorEventType }  from '../../types.mjs';
 import  Viewport  from '../../Viewport.mjs';
-import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
+import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
 import  BaseWidget  from './BaseWidget.mjs';
-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');
+import  makeSeparator  from './components/makeSeparator.mjs';
+const makeZoomControl = (localizationTable, editor) => {
+    const zoomLevelRow = document.createElement('div');
+    const increaseButton = document.createElement('button');
+    const decreaseButton = document.createElement('button');
+    const resetViewButton = document.createElement('button');
+    const zoomLevelDisplay = document.createElement('span');
     increaseButton.innerText = '+';
     decreaseButton.innerText = '-';
     resetViewButton.innerText = localizationTable.resetView;
     zoomLevelRow.replaceChildren(zoomLevelDisplay, increaseButton, decreaseButton, resetViewButton);
-    zoomLevelRow.classList.add("".concat(toolbarCSSPrefix, "zoomLevelEditor"));
+    zoomLevelRow.classList.add(`${toolbarCSSPrefix}zoomLevelEditor`);
     zoomLevelDisplay.classList.add('zoomDisplay');
-    var lastZoom;
-    var updateZoomDisplay = function () {
-        var zoomLevel = editor.viewport.getScaleFactor() * 100;
+    let lastZoom;
+    const updateZoomDisplay = () => {
+        let zoomLevel = editor.viewport.getScaleFactor() * 100;
         if (zoomLevel > 0.1) {
             zoomLevel = Math.round(zoomLevel * 10) / 10;
         }
@@ -58,152 +33,135 @@ var makeZoomControl = function (localizationTable, editor) {
         }
     };
     updateZoomDisplay();
-    editor.notifier.on(EditorEventType.ViewportChanged, function (event) {
+    editor.notifier.on(EditorEventType.ViewportChanged, (event) => {
         if (event.kind === EditorEventType.ViewportChanged) {
             updateZoomDisplay();
             // Can't reset if already reset.
             resetViewButton.disabled = event.newTransform.eq(Mat33.identity);
         }
     });
-    var zoomBy = function (factor) {
-        var screenCenter = editor.viewport.visibleRect.center;
-        var transformUpdate = Mat33.scaling2D(factor, screenCenter);
+    const zoomBy = (factor) => {
+        const screenCenter = editor.viewport.visibleRect.center;
+        const transformUpdate = Mat33.scaling2D(factor, screenCenter);
         editor.dispatch(Viewport.transformBy(transformUpdate), false);
     };
-    increaseButton.onclick = function () {
+    increaseButton.onclick = () => {
         zoomBy(5.0 / 4);
     };
-    decreaseButton.onclick = function () {
+    decreaseButton.onclick = () => {
         zoomBy(4.0 / 5);
     };
-    resetViewButton.onclick = function () {
-        editor.dispatch(Viewport.transformBy(editor.viewport.canvasToScreenTransform.inverse()), true);
+    resetViewButton.onclick = () => {
+        const addToHistory = false;
+        editor.dispatch(Viewport.transformBy(editor.viewport.canvasToScreenTransform.inverse()), addToHistory);
     };
     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));
-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(EditorEventType.ToolUpdated, function (toolEvt) {
+class HandModeWidget extends BaseWidget {
+    constructor(editor, tool, flag, makeIcon, title, localizationTable) {
+        super(editor, `pan-mode-${flag}`, localizationTable);
+        this.tool = tool;
+        this.flag = flag;
+        this.makeIcon = makeIcon;
+        this.title = title;
+        editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
             if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === tool) {
-                var allEnabled = !!(tool.getMode() & PanZoomMode.SinglePointerGestures);
-                _this.setSelected(!!(tool.getMode() & flag) || allEnabled);
+                const allEnabled = !!(tool.getMode() & 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 !== PanZoomMode.SinglePointerGestures);
+                this.setDisabled(allEnabled && flag !== PanZoomMode.SinglePointerGestures);
             }
         });
-        _this.setSelected(false);
-        return _this;
+        this.setSelected(false);
     }
-    HandModeWidget.prototype.setModeFlag = function (enabled) {
+    setModeFlag(enabled) {
         this.tool.setModeEnabled(this.flag, enabled);
-    };
-    HandModeWidget.prototype.handleClick = function () {
+    }
+    handleClick() {
         this.setModeFlag(!this.isSelected());
-    };
-    HandModeWidget.prototype.getTitle = function () {
+    }
+    getTitle() {
         return this.title;
-    };
-    HandModeWidget.prototype.createIcon = function () {
+    }
+    createIcon() {
         return this.makeIcon();
-    };
-    HandModeWidget.prototype.fillDropdown = function (_dropdown) {
+    }
+    fillDropdown(_dropdown) {
         return false;
-    };
-    return HandModeWidget;
-}(BaseWidget));
-var HandToolWidget = /** @class */ (function (_super) {
-    __extends(HandToolWidget, _super);
-    function HandToolWidget(editor, 
+    }
+}
+export default class HandToolWidget extends BaseToolWidget {
+    constructor(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;
+        const primaryHandTool = HandToolWidget.getPrimaryHandTool(editor.toolController);
+        const tool = primaryHandTool ?? overridePanZoomTool;
+        super(editor, tool, 'hand-tool-widget', localizationTable);
+        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;
+        this.allowTogglingBaseTool = primaryHandTool !== null;
         // Allow showing/hiding the dropdown, even if `overridePanZoomTool` isn't enabled.
-        if (!_this.allowTogglingBaseTool) {
-            _this.container.classList.add('dropdownShowable');
+        if (!this.allowTogglingBaseTool) {
+            this.container.classList.add('dropdownShowable');
         }
         // Controls for the overriding hand tool.
-        var touchPanningWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoomMode.OneFingerTouchGestures, function () { return _this.editor.icons.makeTouchPanningIcon(); }, localizationTable.touchPanning, localizationTable);
-        var rotationLockWidget = new HandModeWidget(editor, overridePanZoomTool, 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;
+        const touchPanningWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
+        const rotationLockWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable);
+        this.addSubWidget(touchPanningWidget);
+        this.addSubWidget(rotationLockWidget);
     }
-    HandToolWidget.getPrimaryHandTool = function (toolController) {
-        var primaryPanZoomToolList = toolController.getPrimaryTools().filter(function (tool) { return tool instanceof PanZoom; });
-        var primaryPanZoomTool = primaryPanZoomToolList[0];
+    static getPrimaryHandTool(toolController) {
+        const primaryPanZoomToolList = toolController.getPrimaryTools().filter(tool => tool instanceof PanZoom);
+        const primaryPanZoomTool = primaryPanZoomToolList[0];
         return primaryPanZoomTool;
-    };
-    HandToolWidget.prototype.getTitle = function () {
+    }
+    getTitle() {
         return this.localizationTable.handTool;
-    };
-    HandToolWidget.prototype.createIcon = function () {
+    }
+    createIcon() {
         return this.editor.icons.makeHandToolIcon();
-    };
-    HandToolWidget.prototype.handleClick = function () {
+    }
+    handleClick() {
         if (this.allowTogglingBaseTool) {
-            _super.prototype.handleClick.call(this);
+            super.handleClick();
         }
         else {
             this.setDropdownVisible(!this.isDropdownVisible());
         }
-    };
-    HandToolWidget.prototype.setSelected = function (selected) {
+    }
+    fillDropdown(dropdown) {
+        super.fillDropdown(dropdown);
+        // The container for all actions that come after the toolbar buttons.
+        const nonbuttonActionContainer = document.createElement('div');
+        nonbuttonActionContainer.classList.add(`${toolbarCSSPrefix}nonbutton-controls-main-list`);
+        makeSeparator().addTo(nonbuttonActionContainer);
+        nonbuttonActionContainer.appendChild(makeZoomControl(this.localizationTable, this.editor));
+        dropdown.appendChild(nonbuttonActionContainer);
+        return true;
+    }
+    setSelected(selected) {
         if (this.allowTogglingBaseTool) {
-            _super.prototype.setSelected.call(this, selected);
+            super.setSelected(selected);
         }
-    };
-    HandToolWidget.prototype.serializeState = function () {
-        var toolMode = this.overridePanZoomTool.getMode();
-        return __assign(__assign({}, _super.prototype.serializeState.call(this)), { touchPanning: toolMode & PanZoomMode.OneFingerTouchGestures, rotationLocked: toolMode & PanZoomMode.RotationLocked });
-    };
-    HandToolWidget.prototype.deserializeFrom = function (state) {
+    }
+    serializeState() {
+        const toolMode = this.overridePanZoomTool.getMode();
+        return {
+            ...super.serializeState(),
+            touchPanning: toolMode & PanZoomMode.OneFingerTouchGestures,
+            rotationLocked: toolMode & PanZoomMode.RotationLocked,
+        };
+    }
+    deserializeFrom(state) {
         if (state.touchPanning !== undefined) {
             this.overridePanZoomTool.setModeEnabled(PanZoomMode.OneFingerTouchGestures, state.touchPanning);
         }
         if (state.rotationLocked !== undefined) {
             this.overridePanZoomTool.setModeEnabled(PanZoomMode.RotationLocked, state.rotationLocked);
         }
-        _super.prototype.deserializeFrom.call(this, state);
-    };
-    return HandToolWidget;
-}(BaseToolWidget));
-export default HandToolWidget;
+        super.deserializeFrom(state);
+    }
+}

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

@@ -1,19 +1,21 @@
 import Editor from '../../Editor';
 import { ToolbarLocalization } from '../localization';
-import ActionButtonWidget from './ActionButtonWidget';
-export default class InsertImageWidget extends ActionButtonWidget {
-    private imageSelectionOverlay;
+import BaseWidget from './BaseWidget';
+export default class InsertImageWidget extends BaseWidget {
     private imagePreview;
-    private imageFileInput;
+    private selectedFiles;
     private imageAltTextInput;
     private statusView;
     private imageBase64URL;
     private submitButton;
     constructor(editor: Editor, localization?: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element | null;
+    protected setDropdownVisible(visible: boolean): void;
+    protected handleClick(): void;
     private static nextInputId;
-    private fillOverlay;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
     private hideDialog;
     private updateImageSizeDisplay;
-    private clearInputs;
-    private onClicked;
+    private updateInputs;
 }