js-draw 0.25.0 → 1.0.0

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

@@ -1,301 +1,223 @@
 "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 ArrowBuilder_1 = require("../../components/builders/ArrowBuilder");
-var FreehandLineBuilder_1 = require("../../components/builders/FreehandLineBuilder");
-var PressureSensitiveFreehandLineBuilder_1 = require("../../components/builders/PressureSensitiveFreehandLineBuilder");
-var LineBuilder_1 = require("../../components/builders/LineBuilder");
-var RectangleBuilder_1 = require("../../components/builders/RectangleBuilder");
-var CircleBuilder_1 = require("../../components/builders/CircleBuilder");
-var types_1 = require("../../types");
-var HTMLToolbar_1 = require("../HTMLToolbar");
-var makeColorInput_1 = require("../makeColorInput");
-var BaseToolWidget_1 = require("./BaseToolWidget");
-var Color4_1 = require("../../Color4");
-var keybindings_1 = require("./keybindings");
-var PenToolWidget = /** @class */ (function (_super) {
-    __extends(PenToolWidget, _super);
-    function PenToolWidget(editor, tool, localization) {
-        var _this = _super.call(this, editor, tool, 'pen', localization) || this;
-        _this.tool = tool;
-        _this.updateInputs = function () { };
+const ArrowBuilder_1 = require("../../components/builders/ArrowBuilder");
+const FreehandLineBuilder_1 = require("../../components/builders/FreehandLineBuilder");
+const PressureSensitiveFreehandLineBuilder_1 = require("../../components/builders/PressureSensitiveFreehandLineBuilder");
+const LineBuilder_1 = require("../../components/builders/LineBuilder");
+const RectangleBuilder_1 = require("../../components/builders/RectangleBuilder");
+const CircleBuilder_1 = require("../../components/builders/CircleBuilder");
+const types_1 = require("../../types");
+const makeColorInput_1 = __importDefault(require("./components/makeColorInput"));
+const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
+const math_1 = require("@js-draw/math");
+const keybindings_1 = require("./keybindings");
+const constants_1 = require("../constants");
+const makeThicknessSlider_1 = __importDefault(require("./components/makeThicknessSlider"));
+const makeGridSelector_1 = __importDefault(require("./components/makeGridSelector"));
+class PenToolWidget extends BaseToolWidget_1.default {
+    constructor(editor, tool, localization) {
+        super(editor, tool, 'pen', localization);
+        this.tool = tool;
+        this.updateInputs = () => { };
+        // Pen types that correspond to
+        this.shapelikeIDs = ['pressure-sensitive-pen', 'freehand-pen'];
         // Default pen types
-        _this.penTypes = [
+        this.penTypes = [
             {
-                name: _this.localizationTable.flatTipPen,
+                name: this.localizationTable.flatTipPen,
                 id: 'pressure-sensitive-pen',
                 factory: PressureSensitiveFreehandLineBuilder_1.makePressureSensitiveFreehandLineBuilder,
             },
             {
-                name: _this.localizationTable.roundedTipPen,
+                name: this.localizationTable.roundedTipPen,
                 id: 'freehand-pen',
                 factory: FreehandLineBuilder_1.makeFreehandLineBuilder,
             },
             {
-                name: _this.localizationTable.arrowPen,
+                name: this.localizationTable.arrowPen,
                 id: 'arrow',
+                isShapeBuilder: true,
                 factory: ArrowBuilder_1.makeArrowBuilder,
             },
             {
-                name: _this.localizationTable.linePen,
+                name: this.localizationTable.linePen,
                 id: 'line',
+                isShapeBuilder: true,
                 factory: LineBuilder_1.makeLineBuilder,
             },
             {
-                name: _this.localizationTable.filledRectanglePen,
+                name: this.localizationTable.filledRectanglePen,
                 id: 'filled-rectangle',
+                isShapeBuilder: true,
                 factory: RectangleBuilder_1.makeFilledRectangleBuilder,
             },
             {
-                name: _this.localizationTable.outlinedRectanglePen,
+                name: this.localizationTable.outlinedRectanglePen,
                 id: 'outlined-rectangle',
+                isShapeBuilder: true,
                 factory: RectangleBuilder_1.makeOutlinedRectangleBuilder,
             },
             {
-                name: _this.localizationTable.outlinedCirclePen,
+                name: this.localizationTable.outlinedCirclePen,
                 id: 'outlined-circle',
+                isShapeBuilder: true,
                 factory: CircleBuilder_1.makeOutlinedCircleBuilder,
             }
         ];
-        _this.editor.notifier.on(types_1.EditorEventType.ToolUpdated, function (toolEvt) {
+        this.editor.notifier.on(types_1.EditorEventType.ToolUpdated, toolEvt => {
             if (toolEvt.kind !== types_1.EditorEventType.ToolUpdated) {
                 throw new Error('Invalid event type!');
             }
             // The button icon may depend on tool properties.
-            if (toolEvt.tool === _this.tool) {
-                _this.updateIcon();
-                _this.updateInputs();
+            if (toolEvt.tool === this.tool) {
+                this.updateIcon();
+                this.updateInputs();
             }
         });
-        return _this;
     }
-    PenToolWidget.prototype.getTitle = function () {
+    getTitle() {
         return this.targetTool.description;
-    };
+    }
     // Return the index of this tool's stroke factory in the list of
     // all stroke factories.
     //
     // Returns -1 if the stroke factory is not in the list of all stroke factories.
-    PenToolWidget.prototype.getCurrentPenTypeIdx = function () {
-        var currentFactory = this.tool.getStrokeFactory();
-        for (var i = 0; i < this.penTypes.length; i++) {
+    getCurrentPenTypeIdx() {
+        const currentFactory = this.tool.getStrokeFactory();
+        for (let i = 0; i < this.penTypes.length; i++) {
             if (this.penTypes[i].factory === currentFactory) {
                 return i;
             }
         }
         return -1;
-    };
-    PenToolWidget.prototype.getCurrentPenType = function () {
-        for (var _i = 0, _a = this.penTypes; _i < _a.length; _i++) {
-            var penType = _a[_i];
+    }
+    getCurrentPenType() {
+        for (const penType of this.penTypes) {
             if (penType.factory === this.tool.getStrokeFactory()) {
                 return penType;
             }
         }
         return null;
-    };
-    PenToolWidget.prototype.createIconForRecord = function (record) {
-        var color = this.tool.getColor();
-        var strokeFactory = record === null || record === void 0 ? void 0 : record.factory;
+    }
+    createIconForRecord(record) {
+        const style = {
+            ...this.tool.getStyleValue().get(),
+        };
+        if (record?.factory) {
+            style.factory = record.factory;
+        }
+        const strokeFactory = record?.factory;
         if (!strokeFactory || strokeFactory === FreehandLineBuilder_1.makeFreehandLineBuilder || strokeFactory === PressureSensitiveFreehandLineBuilder_1.makePressureSensitiveFreehandLineBuilder) {
-            // Use a square-root scale to prevent the pen's tip from overflowing.
-            var scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
-            var roundedTip = strokeFactory === FreehandLineBuilder_1.makeFreehandLineBuilder;
-            return this.editor.icons.makePenIcon(scale, color.toHexString(), roundedTip);
+            return this.editor.icons.makePenIcon(style);
         }
         else {
-            var hasTransparency = color.a < 1;
-            return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory, hasTransparency);
+            return this.editor.icons.makeIconFromFactory(style);
         }
-    };
-    PenToolWidget.prototype.createIcon = function () {
+    }
+    createIcon() {
         return this.createIconForRecord(this.getCurrentPenType());
-    };
+    }
     // Creates a widget that allows selecting different pen types
-    PenToolWidget.prototype.createPenTypeSelector = function () {
-        var _this = this;
-        var outerContainer = document.createElement('div');
-        outerContainer.classList.add("".concat(HTMLToolbar_1.toolbarCSSPrefix, "pen-type-selector"));
-        var scrollingContainer = document.createElement('div');
-        scrollingContainer.setAttribute('role', 'menu');
-        scrollingContainer.id = "".concat(HTMLToolbar_1.toolbarCSSPrefix, "-pen-type-selector-id-").concat(PenToolWidget.idCounter++);
-        scrollingContainer.onwheel = function (event) {
-            var hasScroll = scrollingContainer.clientWidth !== scrollingContainer.scrollWidth
-                && event.deltaX !== 0;
-            var eventScrollsPastLeft = scrollingContainer.scrollLeft + event.deltaX <= 0;
-            var scrollRight = scrollingContainer.scrollLeft + scrollingContainer.clientWidth;
-            var eventScrollsPastRight = scrollRight + event.deltaX > scrollingContainer.scrollWidth;
-            // Stop the editor from receiving the event if it will scroll the pen type selector
-            // instead.
-            if (hasScroll && !eventScrollsPastLeft && !eventScrollsPastRight) {
-                event.stopPropagation();
-            }
-        };
-        var label = document.createElement('label');
-        label.innerText = this.localizationTable.selectPenType;
-        label.htmlFor = scrollingContainer.id;
-        outerContainer.appendChild(label);
-        // All buttons in a radiogroup need the same name attribute.
-        var radiogroupName = "".concat(HTMLToolbar_1.toolbarCSSPrefix, "-pen-type-selector-").concat(PenToolWidget.idCounter++);
-        var createTypeSelectorButton = function (record) {
-            var buttonContainer = document.createElement('div');
-            buttonContainer.classList.add('pen-type-button');
-            var button = document.createElement('input');
-            button.type = 'radio';
-            button.name = radiogroupName;
-            button.id = "".concat(HTMLToolbar_1.toolbarCSSPrefix, "-pen-type-button-").concat(PenToolWidget.idCounter++);
-            var labelContainer = document.createElement('label');
-            var rebuildLabel = function () {
-                var labelText = document.createElement('span');
-                var icon = _this.createIconForRecord(record);
-                icon.classList.add('icon');
-                // The title of the record
-                labelText.innerText = record.name;
-                labelContainer.htmlFor = button.id;
-                labelContainer.replaceChildren(icon, labelText);
+    createPenTypeSelector() {
+        const allChoices = this.penTypes.map((penType, index) => {
+            return {
+                id: index,
+                makeIcon: () => this.createIconForRecord(penType),
+                title: penType.name,
+                isShapeBuilder: penType.isShapeBuilder ?? false,
             };
-            rebuildLabel();
-            var updateButtonCSS = function () {
-                if (button.checked) {
-                    buttonContainer.classList.add('checked');
-                }
-                else {
-                    buttonContainer.classList.remove('checked');
-                }
-            };
-            button.oninput = function () {
-                // Setting the stroke factory fires an event that causes the value
-                // of this button to be set.
-                if (button.checked) {
-                    _this.tool.setStrokeFactory(record.factory);
-                }
-                updateButtonCSS();
-            };
-            buttonContainer.replaceChildren(button, labelContainer);
-            scrollingContainer.appendChild(buttonContainer);
-            // Set whether the button is checked, assuming the stroke factory associated
-            // with the button was set elsewhere.
-            var setChecked = function (checked) {
-                button.checked = checked;
-                updateButtonCSS();
-                if (checked) {
-                    button.scrollIntoView();
-                }
-            };
-            setChecked(false);
-            // Updates the factory's icon based on the current style of the tool.
-            var updateIcon = function () {
-                rebuildLabel();
-            };
-            return { setChecked: setChecked, updateIcon: updateIcon };
+        });
+        const penSelector = (0, makeGridSelector_1.default)(this.localizationTable.selectPenTip, this.getCurrentPenTypeIdx(), allChoices.filter(choice => !choice.isShapeBuilder));
+        const shapeSelector = (0, makeGridSelector_1.default)(this.localizationTable.selectShape, this.getCurrentPenTypeIdx(), allChoices.filter(choice => choice.isShapeBuilder));
+        const onSelectorUpdate = (newPenTypeIndex) => {
+            this.tool.setStrokeFactory(this.penTypes[newPenTypeIndex].factory);
         };
-        var buttons = [];
-        for (var _i = 0, _a = this.penTypes; _i < _a.length; _i++) {
-            var penType = _a[_i];
-            buttons.push(createTypeSelectorButton(penType));
-        }
-        // invariant: buttons.length = this.penTypes.length
-        outerContainer.appendChild(scrollingContainer);
+        penSelector.value.onUpdate(onSelectorUpdate);
+        shapeSelector.value.onUpdate(onSelectorUpdate);
         return {
-            setValue: function (penTypeIndex) {
-                // Select the value specified
-                if (penTypeIndex < 0 || penTypeIndex >= _this.penTypes.length) {
-                    console.error('Invalid pen type index', penTypeIndex);
-                    return;
-                }
-                for (var i = 0; i < buttons.length; i++) {
-                    buttons[i].setChecked(i === penTypeIndex);
-                }
+            setValue: (penTypeIndex) => {
+                penSelector.value.set(penTypeIndex);
+                shapeSelector.value.set(penTypeIndex);
             },
-            updateIcons: function () {
-                buttons.forEach(function (button) { return button.updateIcon(); });
+            updateIcons: () => {
+                penSelector.updateIcons();
+                shapeSelector.updateIcons();
             },
-            addTo: function (parent) {
-                parent.appendChild(outerContainer);
+            addTo: (parent) => {
+                penSelector.addTo(parent);
+                shapeSelector.addTo(parent);
             },
         };
-    };
-    PenToolWidget.prototype.fillDropdown = function (dropdown) {
-        var _this = this;
-        var container = document.createElement('div');
-        container.classList.add("".concat(HTMLToolbar_1.toolbarCSSPrefix, "spacedList"));
-        var thicknessRow = document.createElement('div');
-        // Thickness: Value of the input is squared to allow for finer control/larger values.
-        var thicknessLabel = document.createElement('label');
-        var thicknessInput = document.createElement('input');
-        var penTypeSelect = this.createPenTypeSelector();
-        // Give inputs IDs so we can label them with a <label for=...>Label text</label>
-        thicknessInput.id = "".concat(HTMLToolbar_1.toolbarCSSPrefix, "penThicknessInput").concat(PenToolWidget.idCounter++);
-        thicknessLabel.innerText = this.localizationTable.thicknessLabel;
-        thicknessLabel.setAttribute('for', thicknessInput.id);
-        // Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
-        var inverseThicknessInputFn = function (t) { return Math.log10(t); };
-        var thicknessInputFn = function (t) { return Math.pow(10, t); };
-        thicknessInput.type = 'range';
-        thicknessInput.min = "".concat(inverseThicknessInputFn(2));
-        thicknessInput.max = "".concat(inverseThicknessInputFn(400));
-        thicknessInput.step = '0.1';
-        thicknessInput.oninput = function () {
-            _this.tool.setThickness(thicknessInputFn(parseFloat(thicknessInput.value)));
+    }
+    setInputStabilizationEnabled(enabled) {
+        this.tool.setHasStabilization(enabled);
+    }
+    createStabilizationOption() {
+        const stabilizationOption = document.createElement('div');
+        const stabilizationCheckbox = document.createElement('input');
+        const stabilizationLabel = document.createElement('label');
+        stabilizationLabel.innerText = this.localizationTable.inputStabilization;
+        stabilizationCheckbox.type = 'checkbox';
+        stabilizationCheckbox.id = `${constants_1.toolbarCSSPrefix}-penInputStabilizationCheckbox-${PenToolWidget.idCounter++}`;
+        stabilizationLabel.htmlFor = stabilizationCheckbox.id;
+        stabilizationOption.replaceChildren(stabilizationLabel, stabilizationCheckbox);
+        stabilizationCheckbox.oninput = () => {
+            this.setInputStabilizationEnabled(stabilizationCheckbox.checked);
         };
-        thicknessRow.appendChild(thicknessLabel);
-        thicknessRow.appendChild(thicknessInput);
-        var colorRow = document.createElement('div');
-        var colorLabel = document.createElement('label');
-        var _a = (0, makeColorInput_1.default)(this.editor, function (color) {
-            _this.tool.setColor(color);
-        }), colorInput = _a[0], colorInputContainer = _a[1], setColorInputValue = _a[2];
-        colorInput.id = "".concat(HTMLToolbar_1.toolbarCSSPrefix, "colorInput").concat(PenToolWidget.idCounter++);
+        return {
+            update: () => {
+                stabilizationCheckbox.checked = !!this.tool.getInputMapper();
+            },
+            addTo: (parent) => {
+                parent.appendChild(stabilizationOption);
+            }
+        };
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        container.classList.add(`${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`);
+        // Thickness: Value of the input is squared to allow for finer control/larger values.
+        const { container: thicknessRow, setValue: setThickness } = (0, makeThicknessSlider_1.default)(this.editor, thickness => {
+            this.tool.setThickness(thickness);
+        });
+        const penTypeSelect = this.createPenTypeSelector();
+        const colorRow = document.createElement('div');
+        const colorLabel = document.createElement('label');
+        const { input: colorInput, container: colorInputContainer, setValue: setColorInputValue } = (0, makeColorInput_1.default)(this.editor, color => {
+            this.tool.setColor(color);
+        });
+        colorInput.id = `${constants_1.toolbarCSSPrefix}colorInput${PenToolWidget.idCounter++}`;
         colorLabel.innerText = this.localizationTable.colorLabel;
         colorLabel.setAttribute('for', colorInput.id);
         colorRow.appendChild(colorLabel);
         colorRow.appendChild(colorInputContainer);
-        this.updateInputs = function () {
-            setColorInputValue(_this.tool.getColor());
-            thicknessInput.value = inverseThicknessInputFn(_this.tool.getThickness()).toString();
+        const stabilizationOption = this.createStabilizationOption();
+        this.updateInputs = () => {
+            setColorInputValue(this.tool.getColor());
+            setThickness(this.tool.getThickness());
             penTypeSelect.updateIcons();
             // Update the selected stroke factory.
-            penTypeSelect.setValue(_this.getCurrentPenTypeIdx());
+            penTypeSelect.setValue(this.getCurrentPenTypeIdx());
+            stabilizationOption.update();
         };
         this.updateInputs();
         container.replaceChildren(colorRow, thicknessRow);
         penTypeSelect.addTo(container);
+        stabilizationOption.addTo(container);
         dropdown.replaceChildren(container);
         return true;
-    };
-    PenToolWidget.prototype.onKeyPress = function (event) {
+    }
+    onKeyPress(event) {
         if (!this.isSelected()) {
             return false;
         }
-        for (var i = 0; i < keybindings_1.selectStrokeTypeKeyboardShortcutIds.length; i++) {
-            var shortcut = keybindings_1.selectStrokeTypeKeyboardShortcutIds[i];
+        for (let i = 0; i < keybindings_1.selectStrokeTypeKeyboardShortcutIds.length; i++) {
+            const shortcut = keybindings_1.selectStrokeTypeKeyboardShortcutIds[i];
             if (this.editor.shortcuts.matchesShortcut(shortcut, event)) {
-                var penTypeIdx = i;
+                const penTypeIdx = i;
                 if (penTypeIdx < this.penTypes.length) {
                     this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
                     return true;
@@ -303,27 +225,32 @@ var PenToolWidget = /** @class */ (function (_super) {
             }
         }
         // Run any default actions registered by the parent class.
-        if (_super.prototype.onKeyPress.call(this, event)) {
+        if (super.onKeyPress(event)) {
             return true;
         }
         return false;
-    };
-    PenToolWidget.prototype.serializeState = function () {
-        var _a;
-        return __assign(__assign({}, _super.prototype.serializeState.call(this)), { color: this.tool.getColor().toHexString(), thickness: this.tool.getThickness(), strokeFactoryId: (_a = this.getCurrentPenType()) === null || _a === void 0 ? void 0 : _a.id });
-    };
-    PenToolWidget.prototype.deserializeFrom = function (state) {
-        _super.prototype.deserializeFrom.call(this, state);
-        var verifyPropertyType = function (propertyName, expectedType) {
-            var actualType = typeof (state[propertyName]);
+    }
+    serializeState() {
+        return {
+            ...super.serializeState(),
+            color: this.tool.getColor().toHexString(),
+            thickness: this.tool.getThickness(),
+            strokeFactoryId: this.getCurrentPenType()?.id,
+            inputStabilization: !!this.tool.getInputMapper(),
+        };
+    }
+    deserializeFrom(state) {
+        super.deserializeFrom(state);
+        const verifyPropertyType = (propertyName, expectedType) => {
+            const actualType = typeof (state[propertyName]);
             if (actualType !== expectedType) {
-                throw new Error("Deserializing property ".concat(propertyName, ": Invalid type. Expected ").concat(expectedType, ",") +
-                    " was ".concat(actualType, "."));
+                throw new Error(`Deserializing property ${propertyName}: Invalid type. Expected ${expectedType},` +
+                    ` was ${actualType}.`);
             }
         };
         if (state.color) {
             verifyPropertyType('color', 'string');
-            this.tool.setColor(Color4_1.default.fromHex(state.color));
+            this.tool.setColor(math_1.Color4.fromHex(state.color));
         }
         if (state.thickness) {
             verifyPropertyType('thickness', 'number');
@@ -331,18 +258,19 @@ var PenToolWidget = /** @class */ (function (_super) {
         }
         if (state.strokeFactoryId) {
             verifyPropertyType('strokeFactoryId', 'string');
-            var factoryId = state.strokeFactoryId;
-            for (var _i = 0, _a = this.penTypes; _i < _a.length; _i++) {
-                var penType = _a[_i];
+            const factoryId = state.strokeFactoryId;
+            for (const penType of this.penTypes) {
                 if (factoryId === penType.id) {
                     this.tool.setStrokeFactory(penType.factory);
                     break;
                 }
             }
         }
-    };
-    // A counter variable that ensures different HTML elements are given unique names/ids.
-    PenToolWidget.idCounter = 0;
-    return PenToolWidget;
-}(BaseToolWidget_1.default));
+        if (state.inputStabilization !== undefined) {
+            this.setInputStabilizationEnabled(!!state.inputStabilization);
+        }
+    }
+}
+// A counter variable that ensures different HTML elements are given unique names/ids.
+PenToolWidget.idCounter = 0;
 exports.default = PenToolWidget;

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

@@ -1,13 +1,15 @@
 import Editor from '../../Editor';
 import SelectionTool from '../../tools/SelectionTool/SelectionTool';
-import { KeyPressEvent } from '../../types';
+import { KeyPressEvent } from '../../inputEvents';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 export default class SelectionToolWidget extends BaseToolWidget {
     private tool;
+    private updateFormatMenu;
     constructor(editor: Editor, tool: SelectionTool, localization?: ToolbarLocalization);
     private resizeImageToSelection;
     protected onKeyPress(event: KeyPressEvent): boolean;
     protected getTitle(): string;
     protected createIcon(): Element;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
 }