js-draw 0.25.0 → 1.0.0

package/dist/cjs/tools/TextTool.js

@@ -1,105 +1,103 @@
 "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 Color4_1 = require("../Color4");
-var TextComponent_1 = require("../components/TextComponent");
-var EditorImage_1 = require("../EditorImage");
-var Rect2_1 = require("../math/shapes/Rect2");
-var Mat33_1 = require("../math/Mat33");
-var Vec2_1 = require("../math/Vec2");
-var Pointer_1 = require("../Pointer");
-var types_1 = require("../types");
-var BaseTool_1 = require("./BaseTool");
-var Erase_1 = require("../commands/Erase");
-var uniteCommands_1 = require("../commands/uniteCommands");
-var overlayCSSClass = 'textEditorOverlay';
-var TextTool = /** @class */ (function (_super) {
-    __extends(TextTool, _super);
-    function TextTool(editor, description, localizationTable) {
-        var _this = _super.call(this, editor.notifier, description) || this;
-        _this.editor = editor;
-        _this.localizationTable = localizationTable;
-        _this.textInputElem = null;
-        _this.textTargetPosition = null;
-        _this.textMeasuringCtx = null;
-        _this.textScale = Vec2_1.Vec2.of(1, 1);
-        _this.removeExistingCommand = null;
-        _this.textStyle = {
+const TextComponent_1 = __importDefault(require("../components/TextComponent"));
+const EditorImage_1 = __importDefault(require("../EditorImage"));
+const math_1 = require("@js-draw/math");
+const Pointer_1 = require("../Pointer");
+const types_1 = require("../types");
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+const Erase_1 = __importDefault(require("../commands/Erase"));
+const uniteCommands_1 = __importDefault(require("../commands/uniteCommands"));
+const ReactiveValue_1 = require("../util/ReactiveValue");
+const overlayCSSClass = 'textEditorOverlay';
+class TextTool extends BaseTool_1.default {
+    constructor(editor, description, localizationTable) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.localizationTable = localizationTable;
+        this.textInputElem = null;
+        this.textTargetPosition = null;
+        this.textMeasuringCtx = null;
+        this.textScale = math_1.Vec2.of(1, 1);
+        this.removeExistingCommand = null;
+        this.textStyleValue = ReactiveValue_1.ReactiveValue.fromInitialValue({
             size: 32,
             fontFamily: 'sans-serif',
             renderingStyle: {
-                fill: Color4_1.default.purple,
+                fill: math_1.Color4.purple,
             },
-        };
-        _this.textEditOverlay = document.createElement('div');
-        _this.textEditOverlay.classList.add(overlayCSSClass);
-        _this.editor.addStyleSheet("\n\t\t\t.".concat(overlayCSSClass, " {\n\t\t\t\theight: 0;\n\t\t\t\toverflow: visible;\n\t\t\t}\n\n\t\t\t.").concat(overlayCSSClass, " textarea {\n\t\t\t\tbackground-color: rgba(0, 0, 0, 0);\n\n\t\t\t\twhite-space: pre;\n\t\t\t\toverflow: hidden;\n\n\t\t\t\tpadding: 0;\n\t\t\t\tmargin: 0;\n\t\t\t\tborder: none;\n\t\t\t\tpadding: 0;\n\n\t\t\t\tmin-width: 100px;\n\t\t\t\tmin-height: 1.1em;\n\t\t\t}\n\t\t"));
-        _this.editor.createHTMLOverlay(_this.textEditOverlay);
-        _this.editor.notifier.on(types_1.EditorEventType.ViewportChanged, function () { return _this.updateTextInput(); });
-        return _this;
+        });
+        this.textStyleValue.onUpdateAndNow(() => {
+            this.textStyle = this.textStyleValue.get();
+            this.updateTextInput();
+            this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
+                kind: types_1.EditorEventType.ToolUpdated,
+                tool: this,
+            });
+        });
+        this.textEditOverlay = document.createElement('div');
+        this.textEditOverlay.classList.add(overlayCSSClass);
+        this.editor.addStyleSheet(`
+			.${overlayCSSClass} {
+				height: 0;
+				overflow: visible;
+			}
+
+			.${overlayCSSClass} textarea {
+				background-color: rgba(0, 0, 0, 0);
+
+				white-space: pre;
+				overflow: hidden;
+
+				padding: 0;
+				margin: 0;
+				border: none;
+				padding: 0;
+
+				min-width: 100px;
+				min-height: 1.1em;
+			}
+		`);
+        this.editor.createHTMLOverlay(this.textEditOverlay);
+        this.editor.notifier.on(types_1.EditorEventType.ViewportChanged, () => this.updateTextInput());
+    }
+    initTextMeasuringCanvas() {
+        this.textMeasuringCtx ??= document.createElement('canvas').getContext('2d');
     }
-    TextTool.prototype.initTextMeasuringCanvas = function () {
-        var _a;
-        (_a = this.textMeasuringCtx) !== null && _a !== void 0 ? _a : (this.textMeasuringCtx = document.createElement('canvas').getContext('2d'));
-    };
-    TextTool.prototype.getTextAscent = function (text, style) {
-        var _a;
+    getTextAscent(text, style) {
         this.initTextMeasuringCanvas();
         if (this.textMeasuringCtx) {
             this.textMeasuringCtx.textBaseline = 'alphabetic';
             TextComponent_1.default.applyTextStyles(this.textMeasuringCtx, style);
-            var measurement = this.textMeasuringCtx.measureText(text);
-            return (_a = measurement.fontBoundingBoxAscent) !== null && _a !== void 0 ? _a : measurement.actualBoundingBoxAscent;
+            const measurement = this.textMeasuringCtx.measureText(text);
+            return measurement.fontBoundingBoxAscent ?? measurement.actualBoundingBoxAscent;
         }
         // Estimate
         return style.size * 2 / 3;
-    };
+    }
     // Take input from this' textInputElem and add it to the EditorImage.
     // If [removeInput], the HTML input element is removed. Otherwise, its value
     // is cleared.
-    TextTool.prototype.flushInput = function (removeInput) {
-        if (removeInput === void 0) { removeInput = true; }
+    flushInput(removeInput = true) {
         if (this.textInputElem && this.textTargetPosition) {
-            var content = this.textInputElem.value.trimEnd();
+            const content = this.textInputElem.value.trimEnd();
             this.textInputElem.value = '';
             if (removeInput) {
                 // In some browsers, .remove() triggers a .blur event (synchronously).
                 // Clear this.textInputElem before removal
-                var input = this.textInputElem;
+                const input = this.textInputElem;
                 this.textInputElem = null;
                 input.remove();
             }
             if (content === '') {
                 return;
             }
-            var textTransform = Mat33_1.default.translation(this.textTargetPosition).rightMul(this.getTextScaleMatrix()).rightMul(Mat33_1.default.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())).rightMul(Mat33_1.default.zRotation(this.textRotation));
-            var textComponent = TextComponent_1.default.fromLines(content.split('\n'), textTransform, this.textStyle);
-            var action = EditorImage_1.default.addElement(textComponent);
+            const textTransform = math_1.Mat33.translation(this.textTargetPosition).rightMul(this.getTextScaleMatrix()).rightMul(math_1.Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())).rightMul(math_1.Mat33.zRotation(this.textRotation));
+            const textComponent = TextComponent_1.default.fromLines(content.split('\n'), textTransform, this.textStyle);
+            const action = EditorImage_1.default.addElement(textComponent);
             if (this.removeExistingCommand) {
                 // Unapply so that `removeExistingCommand` can be added to the undo stack.
                 this.removeExistingCommand.unapply(this.editor);
@@ -110,128 +108,124 @@ var TextTool = /** @class */ (function (_super) {
                 this.editor.dispatch(action);
             }
         }
-    };
-    TextTool.prototype.getTextScaleMatrix = function () {
-        return Mat33_1.default.scaling2D(this.textScale.times(1 / this.editor.viewport.getSizeOfPixelOnCanvas()));
-    };
-    TextTool.prototype.updateTextInput = function () {
-        var _a, _b, _c, _d;
+    }
+    getTextScaleMatrix() {
+        return math_1.Mat33.scaling2D(this.textScale.times(1 / this.editor.viewport.getSizeOfPixelOnCanvas()));
+    }
+    updateTextInput() {
         if (!this.textInputElem || !this.textTargetPosition) {
-            (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.remove();
+            this.textInputElem?.remove();
             return;
         }
-        var viewport = this.editor.viewport;
-        var textScreenPos = viewport.canvasToScreen(this.textTargetPosition);
+        const viewport = this.editor.viewport;
+        const textScreenPos = viewport.canvasToScreen(this.textTargetPosition);
         this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
         this.textInputElem.style.fontFamily = this.textStyle.fontFamily;
-        this.textInputElem.style.fontStyle = (_b = this.textStyle.fontStyle) !== null && _b !== void 0 ? _b : '';
-        this.textInputElem.style.fontVariant = (_c = this.textStyle.fontVariant) !== null && _c !== void 0 ? _c : '';
-        this.textInputElem.style.fontWeight = (_d = this.textStyle.fontWeight) !== null && _d !== void 0 ? _d : '';
-        this.textInputElem.style.fontSize = "".concat(this.textStyle.size, "px");
+        this.textInputElem.style.fontStyle = this.textStyle.fontStyle ?? '';
+        this.textInputElem.style.fontVariant = this.textStyle.fontVariant ?? '';
+        this.textInputElem.style.fontWeight = this.textStyle.fontWeight ?? '';
+        this.textInputElem.style.fontSize = `${this.textStyle.size}px`;
         this.textInputElem.style.color = this.textStyle.renderingStyle.fill.toHexString();
         this.textInputElem.style.position = 'relative';
-        this.textInputElem.style.left = "".concat(textScreenPos.x, "px");
-        this.textInputElem.style.top = "".concat(textScreenPos.y, "px");
+        this.textInputElem.style.left = `${textScreenPos.x}px`;
+        this.textInputElem.style.top = `${textScreenPos.y}px`;
         this.textInputElem.style.margin = '0';
-        this.textInputElem.style.width = "".concat(this.textInputElem.scrollWidth, "px");
-        this.textInputElem.style.height = "".concat(this.textInputElem.scrollHeight, "px");
+        this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
+        this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
         // Get the ascent based on the font, using a string of characters
         // that is tall in most fonts.
-        var tallText = 'Testing!';
-        var ascent = this.getTextAscent(tallText, this.textStyle);
-        var vertAdjust = ascent;
-        var rotation = this.textRotation + viewport.getRotationAngle();
-        var scale = this.getTextScaleMatrix();
+        const tallText = 'Testing!';
+        const ascent = this.getTextAscent(tallText, this.textStyle);
+        const vertAdjust = ascent;
+        const rotation = this.textRotation + viewport.getRotationAngle();
+        const scale = this.getTextScaleMatrix();
         this.textInputElem.style.transform =
-            "".concat(scale.toCSSMatrix(), " rotate(").concat(rotation * 180 / Math.PI, "deg) translate(0, ").concat(-vertAdjust, "px)");
+            `${scale.toCSSMatrix()} rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-vertAdjust}px)`;
         this.textInputElem.style.transformOrigin = 'top left';
         // Match the line height of default rendered text.
-        var lineHeight = Math.floor(this.textStyle.size);
-        this.textInputElem.style.lineHeight = "".concat(lineHeight, "px");
-    };
-    TextTool.prototype.startTextInput = function (textCanvasPos, initialText) {
-        var _this = this;
+        const lineHeight = Math.floor(this.textStyle.size);
+        this.textInputElem.style.lineHeight = `${lineHeight}px`;
+    }
+    startTextInput(textCanvasPos, initialText) {
         this.flushInput();
         this.textInputElem = document.createElement('textarea');
         this.textInputElem.value = initialText;
         this.textInputElem.style.display = 'inline-block';
         this.textTargetPosition = this.editor.viewport.roundPoint(textCanvasPos);
         this.textRotation = -this.editor.viewport.getRotationAngle();
-        this.textScale = Vec2_1.Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+        this.textScale = math_1.Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
         this.updateTextInput();
         // Update the input size/position/etc. after the placeHolder has had time to appear.
-        setTimeout(function () { return _this.updateTextInput(); }, 0);
-        this.textInputElem.oninput = function () {
-            if (_this.textInputElem) {
-                _this.textInputElem.style.width = "".concat(_this.textInputElem.scrollWidth, "px");
-                _this.textInputElem.style.height = "".concat(_this.textInputElem.scrollHeight, "px");
+        setTimeout(() => this.updateTextInput(), 0);
+        this.textInputElem.oninput = () => {
+            if (this.textInputElem) {
+                this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
+                this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
             }
         };
-        this.textInputElem.onblur = function () {
+        this.textInputElem.onblur = () => {
             // Delay removing the input -- flushInput may be called within a blur()
             // event handler
-            var removeInput = false;
-            var input = _this.textInputElem;
-            _this.flushInput(removeInput);
-            _this.textInputElem = null;
-            setTimeout(function () {
-                input === null || input === void 0 ? void 0 : input.remove();
+            const removeInput = false;
+            const input = this.textInputElem;
+            this.flushInput(removeInput);
+            this.textInputElem = null;
+            setTimeout(() => {
+                input?.remove();
             }, 0);
         };
-        this.textInputElem.onkeyup = function (evt) {
-            var _a, _b;
+        this.textInputElem.onkeyup = (evt) => {
             if (evt.key === 'Enter' && !evt.shiftKey) {
-                _this.flushInput();
-                _this.editor.focus();
+                this.flushInput();
+                this.editor.focus();
             }
             else if (evt.key === 'Escape') {
                 // Cancel input.
-                (_a = _this.textInputElem) === null || _a === void 0 ? void 0 : _a.remove();
-                _this.textInputElem = null;
-                _this.editor.focus();
-                (_b = _this.removeExistingCommand) === null || _b === void 0 ? void 0 : _b.unapply(_this.editor);
-                _this.removeExistingCommand = null;
+                this.textInputElem?.remove();
+                this.textInputElem = null;
+                this.editor.focus();
+                this.removeExistingCommand?.unapply(this.editor);
+                this.removeExistingCommand = null;
             }
         };
         this.textEditOverlay.replaceChildren(this.textInputElem);
-        setTimeout(function () { var _a; return (_a = _this.textInputElem) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
-    };
-    TextTool.prototype.setEnabled = function (enabled) {
-        _super.prototype.setEnabled.call(this, enabled);
+        setTimeout(() => this.textInputElem?.focus(), 0);
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
         if (!enabled) {
             this.flushInput();
         }
         this.textEditOverlay.style.display = enabled ? 'block' : 'none';
-    };
-    TextTool.prototype.onPointerDown = function (_a) {
-        var current = _a.current, allPointers = _a.allPointers;
+    }
+    onPointerDown({ current, allPointers }) {
         if (current.device === Pointer_1.PointerDevice.Eraser) {
             return false;
         }
         if (allPointers.length === 1) {
             // Are we clicking on a text node?
-            var canvasPos = current.canvasPos;
-            var halfTestRegionSize = Vec2_1.Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
-            var testRegion = Rect2_1.default.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
-            var targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
-            var targetTextNodes = targetNodes.filter(function (node) { return node instanceof TextComponent_1.default; });
+            const canvasPos = current.canvasPos;
+            const halfTestRegionSize = math_1.Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+            const testRegion = math_1.Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
+            const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
+            let targetTextNodes = targetNodes.filter(node => node instanceof TextComponent_1.default);
             // Don't try to edit text nodes that contain the viewport (this allows us
             // to zoom in on text nodes and add text on top of them.)
-            var visibleRect_1 = this.editor.viewport.visibleRect;
-            targetTextNodes = targetTextNodes.filter(function (node) { return !node.getBBox().containsRect(visibleRect_1); });
+            const visibleRect = this.editor.viewport.visibleRect;
+            targetTextNodes = targetTextNodes.filter(node => !node.getBBox().containsRect(visibleRect));
             // End any TextNodes we're currently editing.
             this.flushInput();
             if (targetTextNodes.length > 0) {
-                var targetNode = targetTextNodes[targetTextNodes.length - 1];
+                const targetNode = targetTextNodes[targetTextNodes.length - 1];
                 this.setTextStyle(targetNode.getTextStyle());
                 // Create and temporarily apply removeExistingCommand.
                 this.removeExistingCommand = new Erase_1.default([targetNode]);
                 this.removeExistingCommand.apply(this.editor);
                 this.startTextInput(targetNode.getBaselinePos(), targetNode.getText());
-                var transform = targetNode.getTransform();
-                this.textRotation = transform.transformVec3(Vec2_1.Vec2.unitX).angle();
-                var scaleFactor = transform.transformVec3(Vec2_1.Vec2.unitX).magnitude();
-                this.textScale = Vec2_1.Vec2.of(1, 1).times(scaleFactor);
+                const transform = targetNode.getTransform();
+                this.textRotation = transform.transformVec3(math_1.Vec2.unitX).angle();
+                const scaleFactor = transform.transformVec3(math_1.Vec2.unitX).magnitude();
+                this.textScale = math_1.Vec2.of(1, 1).times(scaleFactor);
                 this.updateTextInput();
             }
             else {
@@ -241,44 +235,46 @@ var TextTool = /** @class */ (function (_super) {
             return true;
         }
         return false;
-    };
-    TextTool.prototype.onGestureCancel = function () {
+    }
+    onGestureCancel() {
         this.flushInput();
         this.editor.focus();
-    };
-    TextTool.prototype.dispatchUpdateEvent = function () {
-        this.updateTextInput();
-        this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
-            kind: types_1.EditorEventType.ToolUpdated,
-            tool: this,
-        });
-    };
-    TextTool.prototype.setFontFamily = function (fontFamily) {
+    }
+    setFontFamily(fontFamily) {
         if (fontFamily !== this.textStyle.fontFamily) {
-            this.textStyle = __assign(__assign({}, this.textStyle), { fontFamily: fontFamily });
-            this.dispatchUpdateEvent();
+            this.textStyleValue.set({
+                ...this.textStyle,
+                fontFamily: fontFamily,
+            });
         }
-    };
-    TextTool.prototype.setColor = function (color) {
+    }
+    setColor(color) {
         if (!color.eq(this.textStyle.renderingStyle.fill)) {
-            this.textStyle = __assign(__assign({}, this.textStyle), { renderingStyle: __assign(__assign({}, this.textStyle.renderingStyle), { fill: color }) });
-            this.dispatchUpdateEvent();
+            this.textStyleValue.set({
+                ...this.textStyle,
+                renderingStyle: {
+                    ...this.textStyle.renderingStyle,
+                    fill: color,
+                },
+            });
         }
-    };
-    TextTool.prototype.setFontSize = function (size) {
+    }
+    setFontSize(size) {
         if (size !== this.textStyle.size) {
-            this.textStyle = __assign(__assign({}, this.textStyle), { size: size });
-            this.dispatchUpdateEvent();
+            this.textStyleValue.set({
+                ...this.textStyle,
+                size,
+            });
         }
-    };
-    TextTool.prototype.getTextStyle = function () {
+    }
+    getTextStyle() {
         return this.textStyle;
-    };
-    TextTool.prototype.setTextStyle = function (style) {
-        // Copy the style — we may change parts of it.
-        this.textStyle = __assign(__assign({}, style), { renderingStyle: __assign({}, style.renderingStyle) });
-        this.dispatchUpdateEvent();
-    };
-    return TextTool;
-}(BaseTool_1.default));
+    }
+    getStyleValue() {
+        return this.textStyleValue;
+    }
+    setTextStyle(style) {
+        this.textStyleValue.set(style);
+    }
+}
 exports.default = TextTool;

package/dist/cjs/tools/ToolController.d.ts

@@ -1,18 +1,32 @@
-import { InputEvt } from '../types';
 import Editor from '../Editor';
 import BaseTool from './BaseTool';
 import ToolEnabledGroup from './ToolEnabledGroup';
 import { ToolLocalization } from './localization';
-export default class ToolController {
+import InputMapper, { InputEventListener } from './InputFilter/InputMapper';
+import { InputEvt } from '../inputEvents';
+export default class ToolController implements InputEventListener {
     private tools;
     private activeTool;
     private primaryToolGroup;
+    private inputPipeline;
     /** @internal */
     constructor(editor: Editor, localization: ToolLocalization);
     setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup): void;
     addPrimaryTool(tool: BaseTool): void;
     getPrimaryTools(): BaseTool[];
     addTool(tool: BaseTool): void;
+    private onEventInternal;
+    /** Alias for {@link dispatchInputEvent}. */
+    onEvent(event: InputEvt): boolean;
     dispatchInputEvent(event: InputEvt): boolean;
+    /**
+     * Adds a new `InputMapper` to this' input pipeline.
+     *
+     * A `mapper` is really a relation that maps each event to no, one,
+     * or many other events.
+     *
+     * @see {@link InputMapper}.
+     */
+    addInputMapper(mapper: InputMapper): void;
     getMatchingTools<Type extends BaseTool>(type: new (...args: any[]) => Type): Type[];
 }