js-draw 0.25.1 → 1.0.1

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

@@ -1,53 +1,54 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 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');
+const math_1 = require("@js-draw/math");
+const PanZoom_1 = __importStar(require("../../tools/PanZoom"));
+const types_1 = require("../../types");
+const Viewport_1 = __importDefault(require("../../Viewport"));
+const constants_1 = require("../constants");
+const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
+const BaseWidget_1 = __importDefault(require("./BaseWidget"));
+const makeSeparator_1 = __importDefault(require("./components/makeSeparator"));
+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(HTMLToolbar_1.toolbarCSSPrefix, "zoomLevelEditor"));
+    zoomLevelRow.classList.add(`${constants_1.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;
         }
@@ -60,152 +61,136 @@ var makeZoomControl = function (localizationTable, editor) {
         }
     };
     updateZoomDisplay();
-    editor.notifier.on(types_1.EditorEventType.ViewportChanged, function (event) {
+    editor.notifier.on(types_1.EditorEventType.ViewportChanged, (event) => {
         if (event.kind === types_1.EditorEventType.ViewportChanged) {
             updateZoomDisplay();
             // Can't reset if already reset.
-            resetViewButton.disabled = event.newTransform.eq(Mat33_1.default.identity);
+            resetViewButton.disabled = event.newTransform.eq(math_1.Mat33.identity);
         }
     });
-    var zoomBy = function (factor) {
-        var screenCenter = editor.viewport.visibleRect.center;
-        var transformUpdate = Mat33_1.default.scaling2D(factor, screenCenter);
+    const zoomBy = (factor) => {
+        const screenCenter = editor.viewport.visibleRect.center;
+        const transformUpdate = math_1.Mat33.scaling2D(factor, screenCenter);
         editor.dispatch(Viewport_1.default.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_1.default.transformBy(editor.viewport.canvasToScreenTransform.inverse()), true);
+    resetViewButton.onclick = () => {
+        const addToHistory = false;
+        editor.dispatch(Viewport_1.default.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_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) {
+class HandModeWidget extends BaseWidget_1.default {
+    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(types_1.EditorEventType.ToolUpdated, 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);
+                const 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.setDisabled(allEnabled && flag !== PanZoom_1.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_1.default));
-var HandToolWidget = /** @class */ (function (_super) {
-    __extends(HandToolWidget, _super);
-    function HandToolWidget(editor, 
+    }
+}
+class HandToolWidget extends BaseToolWidget_1.default {
+    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, 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];
+        const touchPanningWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoom_1.PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
+        const rotationLockWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoom_1.PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable);
+        this.addSubWidget(touchPanningWidget);
+        this.addSubWidget(rotationLockWidget);
+    }
+    static getPrimaryHandTool(toolController) {
+        const primaryPanZoomToolList = toolController.getPrimaryTools().filter(tool => tool instanceof PanZoom_1.default);
+        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(`${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`);
+        (0, makeSeparator_1.default)().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 & PanZoom_1.PanZoomMode.OneFingerTouchGestures, rotationLocked: toolMode & PanZoom_1.PanZoomMode.RotationLocked });
-    };
-    HandToolWidget.prototype.deserializeFrom = function (state) {
+    }
+    serializeState() {
+        const toolMode = this.overridePanZoomTool.getMode();
+        return {
+            ...super.serializeState(),
+            touchPanning: toolMode & PanZoom_1.PanZoomMode.OneFingerTouchGestures,
+            rotationLocked: toolMode & PanZoom_1.PanZoomMode.RotationLocked,
+        };
+    }
+    deserializeFrom(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));
+        super.deserializeFrom(state);
+    }
+}
 exports.default = HandToolWidget;

package/dist/cjs/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;
 }