js-draw 0.25.1 → 1.0.0

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

@@ -1,196 +1,209 @@
 "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 __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 Erase_1 = require("../../commands/Erase");
-var uniteCommands_1 = require("../../commands/uniteCommands");
-var BackgroundComponent_1 = require("../../components/BackgroundComponent");
-var EditorImage_1 = require("../../EditorImage");
-var Rect2_1 = require("../../math/shapes/Rect2");
-var types_1 = require("../../types");
-var HTMLToolbar_1 = require("../HTMLToolbar");
-var makeColorInput_1 = require("../makeColorInput");
-var BaseWidget_1 = require("./BaseWidget");
-var DocumentPropertiesWidget = /** @class */ (function (_super) {
-    __extends(DocumentPropertiesWidget, _super);
-    function DocumentPropertiesWidget(editor, localizationTable) {
-        var _this = _super.call(this, editor, 'document-properties-widget', localizationTable) || this;
-        _this.updateDropdownContent = function () { };
-        _this.dropdownUpdateQueued = false;
+const Erase_1 = __importDefault(require("../../commands/Erase"));
+const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
+const BackgroundComponent_1 = __importStar(require("../../components/BackgroundComponent"));
+const EditorImage_1 = require("../../EditorImage");
+const math_1 = require("@js-draw/math");
+const types_1 = require("../../types");
+const constants_1 = require("../constants");
+const makeColorInput_1 = __importDefault(require("./components/makeColorInput"));
+const BaseWidget_1 = __importDefault(require("./BaseWidget"));
+class DocumentPropertiesWidget extends BaseWidget_1.default {
+    constructor(editor, localizationTable) {
+        super(editor, 'document-properties-widget', localizationTable);
+        this.updateDropdownContent = () => { };
+        this.dropdownUpdateQueued = false;
         // Make it possible to open the dropdown, even if this widget isn't selected.
-        _this.container.classList.add('dropdownShowable');
-        _this.editor.notifier.on(types_1.EditorEventType.UndoRedoStackUpdated, function () {
-            _this.queueDropdownUpdate();
+        this.container.classList.add('dropdownShowable');
+        this.editor.notifier.on(types_1.EditorEventType.UndoRedoStackUpdated, () => {
+            this.queueDropdownUpdate();
         });
-        _this.editor.image.notifier.on(EditorImage_1.EditorImageEventType.ExportViewportChanged, function () {
-            _this.queueDropdownUpdate();
+        this.editor.image.notifier.on(EditorImage_1.EditorImageEventType.ExportViewportChanged, () => {
+            this.queueDropdownUpdate();
         });
-        return _this;
     }
-    DocumentPropertiesWidget.prototype.getTitle = function () {
+    getTitle() {
         return this.localizationTable.documentProperties;
-    };
-    DocumentPropertiesWidget.prototype.createIcon = function () {
+    }
+    createIcon() {
         return this.editor.icons.makeConfigureDocumentIcon();
-    };
-    DocumentPropertiesWidget.prototype.handleClick = function () {
+    }
+    handleClick() {
         this.setDropdownVisible(!this.isDropdownVisible());
         this.queueDropdownUpdate();
-    };
-    DocumentPropertiesWidget.prototype.queueDropdownUpdate = function () {
-        var _this = this;
+    }
+    queueDropdownUpdate() {
         if (!this.dropdownUpdateQueued) {
-            requestAnimationFrame(function () { return _this.updateDropdown(); });
+            requestAnimationFrame(() => this.updateDropdown());
             this.dropdownUpdateQueued = true;
         }
-    };
-    DocumentPropertiesWidget.prototype.updateDropdown = function () {
+    }
+    updateDropdown() {
         this.dropdownUpdateQueued = false;
         if (this.isDropdownVisible()) {
             this.updateDropdownContent();
         }
-    };
-    DocumentPropertiesWidget.prototype.setBackgroundColor = function (color) {
+    }
+    setBackgroundColor(color) {
         this.editor.dispatch(this.editor.setBackgroundColor(color));
-    };
-    DocumentPropertiesWidget.prototype.getBackgroundColor = function () {
+    }
+    getBackgroundColor() {
         return this.editor.estimateBackgroundColor();
-    };
-    DocumentPropertiesWidget.prototype.removeBackgroundComponents = function () {
-        var previousBackgrounds = [];
-        for (var _i = 0, _a = this.editor.image.getBackgroundComponents(); _i < _a.length; _i++) {
-            var component = _a[_i];
+    }
+    removeBackgroundComponents() {
+        const previousBackgrounds = [];
+        for (const component of this.editor.image.getBackgroundComponents()) {
             if (component instanceof BackgroundComponent_1.default) {
                 previousBackgrounds.push(component);
             }
         }
         return new Erase_1.default(previousBackgrounds);
-    };
+    }
     /** Replace existing background components with a background of the given type. */
-    DocumentPropertiesWidget.prototype.setBackgroundType = function (backgroundType) {
-        var prevBackgroundColor = this.editor.estimateBackgroundColor();
-        var newBackground = new BackgroundComponent_1.default(backgroundType, prevBackgroundColor);
-        var addBackgroundCommand = this.editor.image.addElement(newBackground);
+    setBackgroundType(backgroundType) {
+        const prevBackgroundColor = this.editor.estimateBackgroundColor();
+        const newBackground = new BackgroundComponent_1.default(backgroundType, prevBackgroundColor);
+        const addBackgroundCommand = this.editor.image.addElement(newBackground);
         return (0, uniteCommands_1.default)([this.removeBackgroundComponents(), addBackgroundCommand]);
-    };
+    }
     /** Returns the type of the topmost background component */
-    DocumentPropertiesWidget.prototype.getBackgroundType = function () {
-        var backgroundComponents = this.editor.image.getBackgroundComponents();
-        for (var i = backgroundComponents.length - 1; i >= 0; i--) {
-            var component = backgroundComponents[i];
+    getBackgroundType() {
+        const backgroundComponents = this.editor.image.getBackgroundComponents();
+        for (let i = backgroundComponents.length - 1; i >= 0; i--) {
+            const component = backgroundComponents[i];
             if (component instanceof BackgroundComponent_1.default) {
                 return component.getBackgroundType();
             }
         }
         return BackgroundComponent_1.BackgroundType.None;
-    };
-    DocumentPropertiesWidget.prototype.updateImportExportRectSize = function (size) {
-        var filterDimension = function (dim) {
+    }
+    updateImportExportRectSize(size) {
+        const filterDimension = (dim) => {
             if (dim !== undefined && (!isFinite(dim) || dim <= 0)) {
                 dim = 100;
             }
             return dim;
         };
-        var width = filterDimension(size.width);
-        var height = filterDimension(size.height);
-        var currentRect = this.editor.getImportExportRect();
-        var newRect = new Rect2_1.default(currentRect.x, currentRect.y, width !== null && width !== void 0 ? width : currentRect.w, height !== null && height !== void 0 ? height : currentRect.h);
+        const width = filterDimension(size.width);
+        const height = filterDimension(size.height);
+        const currentRect = this.editor.getImportExportRect();
+        const newRect = new math_1.Rect2(currentRect.x, currentRect.y, width ?? currentRect.w, height ?? currentRect.h);
         this.editor.dispatch(this.editor.image.setImportExportRect(newRect));
         this.editor.queueRerender();
-    };
-    DocumentPropertiesWidget.prototype.fillDropdown = function (dropdown) {
-        var _this = this;
-        var container = document.createElement('div');
-        container.classList.add("".concat(HTMLToolbar_1.toolbarCSSPrefix, "spacedList"));
-        var backgroundColorRow = document.createElement('div');
-        var backgroundColorLabel = document.createElement('label');
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        container.classList.add(`${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`, `${constants_1.toolbarCSSPrefix}document-properties-widget`);
+        // Background color input
+        const backgroundColorRow = document.createElement('div');
+        const backgroundColorLabel = document.createElement('label');
         backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
-        var _a = (0, makeColorInput_1.default)(this.editor, function (color) {
-            if (!color.eq(_this.getBackgroundColor())) {
-                _this.setBackgroundColor(color);
+        const { input: colorInput, container: backgroundColorInputContainer, setValue: setBgColorInputValue } = (0, makeColorInput_1.default)(this.editor, color => {
+            if (!color.eq(this.getBackgroundColor())) {
+                this.setBackgroundColor(color);
             }
-        }), colorInput = _a[0], backgroundColorInputContainer = _a[1], setBgColorInputValue = _a[2];
-        colorInput.id = "".concat(HTMLToolbar_1.toolbarCSSPrefix, "docPropertiesColorInput-").concat(DocumentPropertiesWidget.idCounter++);
+        });
+        colorInput.id = `${constants_1.toolbarCSSPrefix}docPropertiesColorInput-${DocumentPropertiesWidget.idCounter++}`;
         backgroundColorLabel.htmlFor = colorInput.id;
         backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
-        var useGridRow = document.createElement('div');
-        var useGridLabel = document.createElement('label');
-        var useGridCheckbox = document.createElement('input');
-        useGridCheckbox.id = "".concat(HTMLToolbar_1.toolbarCSSPrefix, "docPropertiesUseGridCheckbox-").concat(DocumentPropertiesWidget.idCounter++);
+        // Background style selector
+        const useGridRow = document.createElement('div');
+        const useGridLabel = document.createElement('label');
+        const useGridCheckbox = document.createElement('input');
+        useGridCheckbox.id = `${constants_1.toolbarCSSPrefix}docPropertiesUseGridCheckbox-${DocumentPropertiesWidget.idCounter++}`;
         useGridLabel.htmlFor = useGridCheckbox.id;
         useGridCheckbox.type = 'checkbox';
         useGridLabel.innerText = this.localizationTable.useGridOption;
-        useGridCheckbox.oninput = function () {
-            var prevBackgroundType = _this.getBackgroundType();
-            var wasGrid = prevBackgroundType === BackgroundComponent_1.BackgroundType.Grid;
+        useGridCheckbox.oninput = () => {
+            const prevBackgroundType = this.getBackgroundType();
+            const wasGrid = prevBackgroundType === BackgroundComponent_1.BackgroundType.Grid;
             if (wasGrid === useGridCheckbox.checked) {
                 // Already the requested background type.
                 return;
             }
-            var newBackgroundType = BackgroundComponent_1.BackgroundType.SolidColor;
+            let newBackgroundType = BackgroundComponent_1.BackgroundType.SolidColor;
             if (useGridCheckbox.checked) {
                 newBackgroundType = BackgroundComponent_1.BackgroundType.Grid;
             }
-            _this.editor.dispatch(_this.setBackgroundType(newBackgroundType));
+            this.editor.dispatch(this.setBackgroundType(newBackgroundType));
         };
         useGridRow.replaceChildren(useGridLabel, useGridCheckbox);
-        var addDimensionRow = function (labelContent, onChange) {
-            var row = document.createElement('div');
-            var label = document.createElement('label');
-            var spacer = document.createElement('span');
-            var input = document.createElement('input');
+        // Adds a width/height input
+        const addDimensionRow = (labelContent, onChange) => {
+            const row = document.createElement('div');
+            const label = document.createElement('label');
+            const input = document.createElement('input');
             label.innerText = labelContent;
             input.type = 'number';
             input.min = '0';
-            input.id = "".concat(HTMLToolbar_1.toolbarCSSPrefix, "docPropertiesDimensionRow-").concat(DocumentPropertiesWidget.idCounter++);
+            input.id = `${constants_1.toolbarCSSPrefix}docPropertiesDimensionRow-${DocumentPropertiesWidget.idCounter++}`;
             label.htmlFor = input.id;
-            spacer.style.flexGrow = '1';
             input.style.flexGrow = '2';
             input.style.width = '25px';
             row.style.display = 'flex';
-            input.oninput = function () {
+            input.oninput = () => {
                 onChange(parseFloat(input.value));
             };
-            row.replaceChildren(label, spacer, input);
+            row.replaceChildren(label, input);
             return {
-                setValue: function (value) {
+                setValue: (value) => {
                     input.value = value.toString();
                 },
                 element: row,
             };
         };
-        var imageWidthRow = addDimensionRow(this.localizationTable.imageWidthOption, function (value) {
-            _this.updateImportExportRectSize({ width: value });
+        const imageWidthRow = addDimensionRow(this.localizationTable.imageWidthOption, (value) => {
+            this.updateImportExportRectSize({ width: value });
         });
-        var imageHeightRow = addDimensionRow(this.localizationTable.imageHeightOption, function (value) {
-            _this.updateImportExportRectSize({ height: value });
+        const imageHeightRow = addDimensionRow(this.localizationTable.imageHeightOption, (value) => {
+            this.updateImportExportRectSize({ height: value });
         });
-        this.updateDropdownContent = function () {
-            setBgColorInputValue(_this.getBackgroundColor());
-            var importExportRect = _this.editor.getImportExportRect();
+        // The "About..." button
+        const aboutButton = document.createElement('button');
+        aboutButton.classList.add('about-button');
+        aboutButton.innerText = this.localizationTable.about;
+        aboutButton.onclick = () => {
+            this.editor.showAboutDialog();
+        };
+        this.updateDropdownContent = () => {
+            setBgColorInputValue(this.getBackgroundColor());
+            const importExportRect = this.editor.getImportExportRect();
             imageWidthRow.setValue(importExportRect.width);
             imageHeightRow.setValue(importExportRect.height);
-            useGridCheckbox.checked = _this.getBackgroundType() === BackgroundComponent_1.BackgroundType.Grid;
+            useGridCheckbox.checked = this.getBackgroundType() === BackgroundComponent_1.BackgroundType.Grid;
         };
         this.updateDropdownContent();
-        container.replaceChildren(backgroundColorRow, useGridRow, imageWidthRow.element, imageHeightRow.element);
+        container.replaceChildren(backgroundColorRow, useGridRow, imageWidthRow.element, imageHeightRow.element, aboutButton);
         dropdown.replaceChildren(container);
         return true;
-    };
-    DocumentPropertiesWidget.idCounter = 0;
-    return DocumentPropertiesWidget;
-}(BaseWidget_1.default));
+    }
+}
+DocumentPropertiesWidget.idCounter = 0;
 exports.default = DocumentPropertiesWidget;

package/dist/cjs/toolbar/widgets/EraserToolWidget.d.ts

@@ -5,12 +5,10 @@ import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
 export default class EraserToolWidget extends BaseToolWidget {
     private tool;
-    private thicknessInput;
+    private updateInputs;
     constructor(editor: Editor, tool: Eraser, localizationTable?: ToolbarLocalization);
     protected getTitle(): string;
     protected createIcon(): Element;
-    private updateInputs;
-    private static nextThicknessInputId;
     protected fillDropdown(dropdown: HTMLElement): boolean;
     serializeState(): SavedToolbuttonState;
     deserializeFrom(state: SavedToolbuttonState): void;

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

@@ -1,90 +1,62 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 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();
+const types_1 = require("../../types");
+const constants_1 = require("../constants");
+const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
+const makeThicknessSlider_1 = __importDefault(require("./components/makeThicknessSlider"));
+class EraserToolWidget extends BaseToolWidget_1.default {
+    constructor(editor, tool, localizationTable) {
+        super(editor, tool, 'eraser-tool-widget', localizationTable);
+        this.tool = tool;
+        this.updateInputs = () => { };
+        this.editor.notifier.on(types_1.EditorEventType.ToolUpdated, toolEvt => {
+            if (toolEvt.kind === types_1.EditorEventType.ToolUpdated && toolEvt.tool === this.tool) {
+                this.updateInputs();
+                this.updateIcon();
             }
         });
-        return _this;
     }
-    EraserToolWidget.prototype.getTitle = function () {
+    getTitle() {
         return this.localizationTable.eraser;
-    };
-    EraserToolWidget.prototype.createIcon = function () {
+    }
+    createIcon() {
         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));
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        container.classList.add(`${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`);
+        const thicknessSlider = (0, makeThicknessSlider_1.default)(this.editor, thickness => {
+            this.tool.setThickness(thickness);
+        });
+        thicknessSlider.setBounds(10, 55);
+        this.updateInputs = () => {
+            thicknessSlider.setValue(this.tool.getThickness());
         };
-        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);
+        const spacer = document.createElement('div');
+        spacer.style.height = '5px';
+        container.replaceChildren(thicknessSlider.container, spacer);
+        dropdown.replaceChildren(container);
         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);
+    }
+    serializeState() {
+        return {
+            ...super.serializeState(),
+            thickness: this.tool.getThickness(),
+        };
+    }
+    deserializeFrom(state) {
+        super.deserializeFrom(state);
         if (state.thickness) {
-            var parsedThickness = parseFloat(state.thickness);
+            const 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."));
+                throw new Error(`Deserializing property ${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.d.ts

@@ -11,6 +11,7 @@ export default class HandToolWidget extends BaseToolWidget {
     protected getTitle(): string;
     protected createIcon(): Element;
     protected handleClick(): void;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
     setSelected(selected: boolean): void;
     serializeState(): SavedToolbuttonState;
     deserializeFrom(state: SavedToolbuttonState): void;