js-draw 0.23.1 → 0.24.0

package/dist/mjs/tools/SoundUITool.mjs

@@ -0,0 +1,180 @@
+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 __());
+    };
+})();
+import  Color4  from '../Color4.mjs';
+import  LineSegment2  from '../math/shapes/LineSegment2.mjs';
+import  BaseTool  from './BaseTool.mjs';
+var SoundFeedback = /** @class */ (function () {
+    function SoundFeedback() {
+        this.closed = false;
+        // No AudioContext? Exit!
+        if (!window.AudioContext) {
+            console.warn('Accessibility sound UI: Unable to open AudioContext.');
+            this.closed = true;
+            return;
+        }
+        this.ctx = new AudioContext();
+        // Color oscillator and gain
+        this.colorOscHue = this.ctx.createOscillator();
+        this.colorOscValue = this.ctx.createOscillator();
+        this.colorOscSaturation = this.ctx.createOscillator();
+        this.colorOscHue.type = 'triangle';
+        this.colorOscSaturation.type = 'sine';
+        this.colorOscValue.type = 'sawtooth';
+        this.valueGain = this.ctx.createGain();
+        this.colorOscValue.connect(this.valueGain);
+        this.valueGain.gain.setValueAtTime(0.18, this.ctx.currentTime);
+        this.colorGain = this.ctx.createGain();
+        this.colorOscHue.connect(this.colorGain);
+        this.valueGain.connect(this.colorGain);
+        this.colorOscSaturation.connect(this.colorGain);
+        this.colorGain.connect(this.ctx.destination);
+        // Boundary oscillator and gain
+        this.boundaryGain = this.ctx.createGain();
+        this.boundaryOsc = this.ctx.createOscillator();
+        this.boundaryOsc.type = 'sawtooth';
+        this.boundaryGain.gain.setValueAtTime(0, this.ctx.currentTime);
+        this.boundaryOsc.connect(this.boundaryGain);
+        this.boundaryGain.connect(this.ctx.destination);
+        // Prepare for the first announcement/feedback.
+        this.colorOscHue.start();
+        this.colorOscSaturation.start();
+        this.colorOscValue.start();
+        this.boundaryOsc.start();
+        this.pause();
+    }
+    SoundFeedback.prototype.pause = function () {
+        if (this.closed)
+            return;
+        this.colorGain.gain.setValueAtTime(0, this.ctx.currentTime);
+        void this.ctx.suspend();
+    };
+    SoundFeedback.prototype.play = function () {
+        if (this.closed)
+            return;
+        void this.ctx.resume();
+    };
+    SoundFeedback.prototype.setColor = function (color) {
+        var hsv = color.asHSV();
+        // Choose frequencies that roughly correspond to hue, saturation, and value.
+        var hueFrequency = (-Math.cos(hsv.x / 2)) * 220 + 440;
+        var saturationFrequency = hsv.y * 440 + 220;
+        var valueFrequency = (hsv.z + 0.1) * 440;
+        // Sigmoid with maximum 0.25 * alpha.
+        // Louder for greater value.
+        var gain = 0.25 * Math.min(1, color.a) / (1 + Math.exp(-(hsv.z - 0.5) * 3));
+        this.colorOscHue.frequency.setValueAtTime(hueFrequency, this.ctx.currentTime);
+        this.colorOscSaturation.frequency.setValueAtTime(saturationFrequency, this.ctx.currentTime);
+        this.colorOscValue.frequency.setValueAtTime(valueFrequency, this.ctx.currentTime);
+        this.valueGain.gain.setValueAtTime((1 - hsv.z) * 0.4, this.ctx.currentTime);
+        this.colorGain.gain.setValueAtTime(gain, this.ctx.currentTime);
+    };
+    SoundFeedback.prototype.announceBoundaryCross = function (boundaryCrossCount) {
+        this.boundaryGain.gain.cancelScheduledValues(this.ctx.currentTime);
+        this.boundaryGain.gain.setValueAtTime(0, this.ctx.currentTime);
+        this.boundaryGain.gain.linearRampToValueAtTime(0.018, this.ctx.currentTime + 0.1);
+        this.boundaryOsc.frequency.setValueAtTime(440 + Math.atan(boundaryCrossCount / 2) * 100, this.ctx.currentTime);
+        this.boundaryGain.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 0.25);
+    };
+    SoundFeedback.prototype.close = function () {
+        this.ctx.close();
+        this.closed = true;
+    };
+    return SoundFeedback;
+}());
+/**
+ * This tool, when enabled, plays a sound representing the color of the portion of the display
+ * currently under the cursor. This tool adds a button that can be navigated to with the tab key
+ * that enables/disables the tool.
+ *
+ * This allows the user to explore the content of the display without a working screen.
+ */
+var SoundUITool = /** @class */ (function (_super) {
+    __extends(SoundUITool, _super);
+    function SoundUITool(editor, description) {
+        var _this = _super.call(this, editor.notifier, description) || this;
+        _this.editor = editor;
+        _this.soundFeedback = null;
+        // Create a screen-reader-usable method of toggling the tool:
+        _this.toggleButtonContainer = document.createElement('div');
+        _this.toggleButtonContainer.classList.add('js-draw-sound-ui-toggle');
+        _this.toggleButton = document.createElement('button');
+        _this.toggleButton.onclick = function () {
+            _this.setEnabled(!_this.isEnabled());
+        };
+        _this.toggleButtonContainer.appendChild(_this.toggleButton);
+        _this.updateToggleButtonText();
+        editor.createHTMLOverlay(_this.toggleButtonContainer);
+        return _this;
+    }
+    SoundUITool.prototype.updateToggleButtonText = function () {
+        var containerEnabledClass = 'sound-ui-tool-enabled';
+        if (this.isEnabled()) {
+            this.toggleButton.innerText = this.editor.localization.disableAccessibilityExploreTool;
+            this.toggleButtonContainer.classList.add(containerEnabledClass);
+        }
+        else {
+            this.toggleButton.innerText = this.editor.localization.enableAccessibilityExploreTool;
+            this.toggleButtonContainer.classList.remove(containerEnabledClass);
+        }
+    };
+    SoundUITool.prototype.setEnabled = function (enabled) {
+        var _a;
+        _super.prototype.setEnabled.call(this, enabled);
+        if (!enabled) {
+            (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.close();
+            this.soundFeedback = null;
+        }
+        this.updateToggleButtonText();
+    };
+    SoundUITool.prototype.onPointerDown = function (_a) {
+        var _b, _c, _d;
+        var current = _a.current, allPointers = _a.allPointers;
+        if (!this.soundFeedback) {
+            this.soundFeedback = new SoundFeedback();
+        }
+        // Allow two-finger gestures to move the screen.
+        if (allPointers.length >= 2) {
+            return false;
+        }
+        // Accept multiple cursors -- some screen readers require multiple (touch) pointers to interact with
+        // an image instead of using the built-in navigation features.
+        (_b = this.soundFeedback) === null || _b === void 0 ? void 0 : _b.play();
+        (_c = this.soundFeedback) === null || _c === void 0 ? void 0 : _c.setColor((_d = this.editor.display.getColorAt(current.screenPos)) !== null && _d !== void 0 ? _d : Color4.black);
+        this.lastPointerPos = current.canvasPos;
+        return true;
+    };
+    SoundUITool.prototype.onPointerMove = function (_a) {
+        var _b, _c, _d;
+        var current = _a.current;
+        (_b = this.soundFeedback) === null || _b === void 0 ? void 0 : _b.setColor((_c = this.editor.display.getColorAt(current.screenPos)) !== null && _c !== void 0 ? _c : Color4.black);
+        var pointerMotionLine = new LineSegment2(this.lastPointerPos, current.canvasPos);
+        var collisions = this.editor.image.getElementsIntersectingRegion(pointerMotionLine.bbox).filter(function (component) { return component.intersects(pointerMotionLine); });
+        this.lastPointerPos = current.canvasPos;
+        if (collisions.length > 0) {
+            (_d = this.soundFeedback) === null || _d === void 0 ? void 0 : _d.announceBoundaryCross(collisions.length);
+        }
+    };
+    SoundUITool.prototype.onPointerUp = function (_event) {
+        var _a;
+        (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.pause();
+    };
+    SoundUITool.prototype.onGestureCancel = function () {
+        var _a;
+        (_a = this.soundFeedback) === null || _a === void 0 ? void 0 : _a.pause();
+    };
+    return SoundUITool;
+}(BaseTool));
+export default SoundUITool;

package/dist/mjs/tools/TextTool.d.ts

@@ -0,0 +1,34 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import { ToolLocalization } from './localization';
+import TextRenderingStyle from '../rendering/TextRenderingStyle';
+export default class TextTool extends BaseTool {
+    private editor;
+    private localizationTable;
+    private textStyle;
+    private textEditOverlay;
+    private textInputElem;
+    private textTargetPosition;
+    private textMeasuringCtx;
+    private textRotation;
+    private textScale;
+    private removeExistingCommand;
+    constructor(editor: Editor, description: string, localizationTable: ToolLocalization);
+    private initTextMeasuringCanvas;
+    private getTextAscent;
+    private flushInput;
+    private getTextScaleMatrix;
+    private updateTextInput;
+    private startTextInput;
+    setEnabled(enabled: boolean): void;
+    onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onGestureCancel(): void;
+    private dispatchUpdateEvent;
+    setFontFamily(fontFamily: string): void;
+    setColor(color: Color4): void;
+    setFontSize(size: number): void;
+    getTextStyle(): TextRenderingStyle;
+    private setTextStyle;
+}

package/dist/mjs/tools/TextTool.mjs

@@ -0,0 +1,282 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import  Color4  from '../Color4.mjs';
+import  TextComponent  from '../components/TextComponent.mjs';
+import  EditorImage  from '../EditorImage.mjs';
+import  Rect2  from '../math/shapes/Rect2.mjs';
+import  Mat33  from '../math/Mat33.mjs';
+import  { Vec2 }  from '../math/Vec2.mjs';
+import  { PointerDevice }  from '../Pointer.mjs';
+import  { EditorEventType }  from '../types.mjs';
+import  BaseTool  from './BaseTool.mjs';
+import  Erase  from '../commands/Erase.mjs';
+import  uniteCommands  from '../commands/uniteCommands.mjs';
+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.of(1, 1);
+        _this.removeExistingCommand = null;
+        _this.textStyle = {
+            size: 32,
+            fontFamily: 'sans-serif',
+            renderingStyle: {
+                fill: 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(EditorEventType.ViewportChanged, function () { return _this.updateTextInput(); });
+        return _this;
+    }
+    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;
+        this.initTextMeasuringCanvas();
+        if (this.textMeasuringCtx) {
+            this.textMeasuringCtx.textBaseline = 'alphabetic';
+            TextComponent.applyTextStyles(this.textMeasuringCtx, style);
+            var measurement = this.textMeasuringCtx.measureText(text);
+            return (_a = measurement.fontBoundingBoxAscent) !== null && _a !== void 0 ? _a : 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; }
+        if (this.textInputElem && this.textTargetPosition) {
+            var 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;
+                this.textInputElem = null;
+                input.remove();
+            }
+            if (content === '') {
+                return;
+            }
+            var textTransform = Mat33.translation(this.textTargetPosition).rightMul(this.getTextScaleMatrix()).rightMul(Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())).rightMul(Mat33.zRotation(this.textRotation));
+            var textComponent = TextComponent.fromLines(content.split('\n'), textTransform, this.textStyle);
+            var action = EditorImage.addElement(textComponent);
+            if (this.removeExistingCommand) {
+                // Unapply so that `removeExistingCommand` can be added to the undo stack.
+                this.removeExistingCommand.unapply(this.editor);
+                this.editor.dispatch(uniteCommands([this.removeExistingCommand, action]));
+                this.removeExistingCommand = null;
+            }
+            else {
+                this.editor.dispatch(action);
+            }
+        }
+    };
+    TextTool.prototype.getTextScaleMatrix = function () {
+        return Mat33.scaling2D(this.textScale.times(1 / this.editor.viewport.getSizeOfPixelOnCanvas()));
+    };
+    TextTool.prototype.updateTextInput = function () {
+        var _a, _b, _c, _d;
+        if (!this.textInputElem || !this.textTargetPosition) {
+            (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.remove();
+            return;
+        }
+        var viewport = this.editor.viewport;
+        var 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.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.margin = '0';
+        this.textInputElem.style.width = "".concat(this.textInputElem.scrollWidth, "px");
+        this.textInputElem.style.height = "".concat(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();
+        this.textInputElem.style.transform =
+            "".concat(scale.toCSSMatrix(), " rotate(").concat(rotation * 180 / Math.PI, "deg) translate(0, ").concat(-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;
+        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.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");
+            }
+        };
+        this.textInputElem.onblur = function () {
+            // 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();
+            }, 0);
+        };
+        this.textInputElem.onkeyup = function (evt) {
+            var _a, _b;
+            if (evt.key === 'Enter' && !evt.shiftKey) {
+                _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.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);
+        if (!enabled) {
+            this.flushInput();
+        }
+        this.textEditOverlay.style.display = enabled ? 'block' : 'none';
+    };
+    TextTool.prototype.onPointerDown = function (_a) {
+        var current = _a.current, allPointers = _a.allPointers;
+        if (current.device === PointerDevice.Eraser) {
+            return false;
+        }
+        if (allPointers.length === 1) {
+            // Are we clicking on a text node?
+            var canvasPos = current.canvasPos;
+            var halfTestRegionSize = Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+            var testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
+            var targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
+            var targetTextNodes = targetNodes.filter(function (node) { return node instanceof TextComponent; });
+            // 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); });
+            // End any TextNodes we're currently editing.
+            this.flushInput();
+            if (targetTextNodes.length > 0) {
+                var targetNode = targetTextNodes[targetTextNodes.length - 1];
+                this.setTextStyle(targetNode.getTextStyle());
+                // Create and temporarily apply removeExistingCommand.
+                this.removeExistingCommand = new Erase([targetNode]);
+                this.removeExistingCommand.apply(this.editor);
+                this.startTextInput(targetNode.getBaselinePos(), targetNode.getText());
+                var transform = targetNode.getTransform();
+                this.textRotation = transform.transformVec3(Vec2.unitX).angle();
+                var scaleFactor = transform.transformVec3(Vec2.unitX).magnitude();
+                this.textScale = Vec2.of(1, 1).times(scaleFactor);
+                this.updateTextInput();
+            }
+            else {
+                this.removeExistingCommand = null;
+                this.startTextInput(current.canvasPos, '');
+            }
+            return true;
+        }
+        return false;
+    };
+    TextTool.prototype.onGestureCancel = function () {
+        this.flushInput();
+        this.editor.focus();
+    };
+    TextTool.prototype.dispatchUpdateEvent = function () {
+        this.updateTextInput();
+        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+            kind: EditorEventType.ToolUpdated,
+            tool: this,
+        });
+    };
+    TextTool.prototype.setFontFamily = function (fontFamily) {
+        if (fontFamily !== this.textStyle.fontFamily) {
+            this.textStyle = __assign(__assign({}, this.textStyle), { fontFamily: fontFamily });
+            this.dispatchUpdateEvent();
+        }
+    };
+    TextTool.prototype.setColor = function (color) {
+        if (!color.eq(this.textStyle.renderingStyle.fill)) {
+            this.textStyle = __assign(__assign({}, this.textStyle), { renderingStyle: __assign(__assign({}, this.textStyle.renderingStyle), { fill: color }) });
+            this.dispatchUpdateEvent();
+        }
+    };
+    TextTool.prototype.setFontSize = function (size) {
+        if (size !== this.textStyle.size) {
+            this.textStyle = __assign(__assign({}, this.textStyle), { size: size });
+            this.dispatchUpdateEvent();
+        }
+    };
+    TextTool.prototype.getTextStyle = function () {
+        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));
+export default TextTool;

package/dist/mjs/tools/ToolController.mjs

@@ -0,0 +1,177 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import  { InputEvtType, EditorEventType }  from '../types.mjs';
+import  PanZoom, { PanZoomMode }  from './PanZoom.mjs';
+import  Pen  from './Pen.mjs';
+import  ToolEnabledGroup  from './ToolEnabledGroup.mjs';
+import  Eraser  from './Eraser.mjs';
+import  SelectionTool  from './SelectionTool/SelectionTool.mjs';
+import  Color4  from '../Color4.mjs';
+import  UndoRedoShortcut  from './UndoRedoShortcut.mjs';
+import  TextTool  from './TextTool.mjs';
+import  PipetteTool  from './PipetteTool.mjs';
+import  ToolSwitcherShortcut  from './ToolSwitcherShortcut.mjs';
+import  PasteHandler  from './PasteHandler.mjs';
+import  ToolbarShortcutHandler  from './ToolbarShortcutHandler.mjs';
+import  { makePressureSensitiveFreehandLineBuilder }  from '../components/builders/PressureSensitiveFreehandLineBuilder.mjs';
+import  FindTool  from './FindTool.mjs';
+import  SelectAllShortcutHandler  from './SelectionTool/SelectAllShortcutHandler.mjs';
+import  SoundUITool  from './SoundUITool.mjs';
+var ToolController = /** @class */ (function () {
+    /** @internal */
+    function ToolController(editor, localization) {
+        this.activeTool = null;
+        var primaryToolGroup = new ToolEnabledGroup();
+        this.primaryToolGroup = primaryToolGroup;
+        var panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
+        var keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
+        var primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 8 });
+        var primaryTools = [
+            // Three pens
+            primaryPenTool,
+            new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 }),
+            // Highlighter-like pen with width=40
+            new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 40 }, makePressureSensitiveFreehandLineBuilder),
+            new Eraser(editor, localization.eraserTool),
+            new SelectionTool(editor, localization.selectionTool),
+            new TextTool(editor, localization.textTool, localization),
+            new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning),
+        ];
+        // Accessibility tools
+        var soundExplorer = new SoundUITool(editor, localization.soundExplorer);
+        soundExplorer.setEnabled(false);
+        this.tools = __spreadArray(__spreadArray([
+            new PipetteTool(editor, localization.pipetteTool),
+            soundExplorer,
+            panZoomTool
+        ], primaryTools, true), [
+            keyboardPanZoomTool,
+            new UndoRedoShortcut(editor),
+            new ToolbarShortcutHandler(editor),
+            new ToolSwitcherShortcut(editor),
+            new FindTool(editor),
+            new PasteHandler(editor),
+            new SelectAllShortcutHandler(editor),
+        ], false);
+        primaryTools.forEach(function (tool) { return tool.setToolGroup(primaryToolGroup); });
+        panZoomTool.setEnabled(true);
+        primaryPenTool.setEnabled(true);
+        editor.notifier.on(EditorEventType.ToolEnabled, function (event) {
+            if (event.kind === EditorEventType.ToolEnabled) {
+                editor.announceForAccessibility(localization.toolEnabledAnnouncement(event.tool.description));
+            }
+        });
+        editor.notifier.on(EditorEventType.ToolDisabled, function (event) {
+            if (event.kind === EditorEventType.ToolDisabled) {
+                editor.announceForAccessibility(localization.toolDisabledAnnouncement(event.tool.description));
+            }
+        });
+        this.activeTool = null;
+    }
+    // Replaces the current set of tools with `tools`. This should only be done before
+    // the creation of the app's toolbar (if using `HTMLToolbar`).
+    ToolController.prototype.setTools = function (tools, primaryToolGroup) {
+        this.tools = tools;
+        this.primaryToolGroup = primaryToolGroup !== null && primaryToolGroup !== void 0 ? primaryToolGroup : new ToolEnabledGroup();
+    };
+    // Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
+    // This should be called before creating the app's toolbar.
+    ToolController.prototype.addPrimaryTool = function (tool) {
+        tool.setToolGroup(this.primaryToolGroup);
+        if (tool.isEnabled()) {
+            this.primaryToolGroup.notifyEnabled(tool);
+        }
+        this.addTool(tool);
+    };
+    ToolController.prototype.getPrimaryTools = function () {
+        var _this = this;
+        return this.tools.filter(function (tool) {
+            return tool.getToolGroup() === _this.primaryToolGroup;
+        });
+    };
+    // Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
+    // This should be called before creating the app's toolbar.
+    ToolController.prototype.addTool = function (tool) {
+        this.tools.push(tool);
+    };
+    // Returns true if the event was handled
+    ToolController.prototype.dispatchInputEvent = function (event) {
+        var _a, _b;
+        var handled = false;
+        if (event.kind === InputEvtType.PointerDownEvt) {
+            for (var _i = 0, _c = this.tools; _i < _c.length; _i++) {
+                var tool = _c[_i];
+                if (tool.isEnabled() && tool.onPointerDown(event)) {
+                    if (this.activeTool !== tool) {
+                        (_a = this.activeTool) === null || _a === void 0 ? void 0 : _a.onGestureCancel();
+                    }
+                    this.activeTool = tool;
+                    handled = true;
+                    break;
+                }
+            }
+        }
+        else if (event.kind === InputEvtType.PointerUpEvt) {
+            (_b = this.activeTool) === null || _b === void 0 ? void 0 : _b.onPointerUp(event);
+            this.activeTool = null;
+            handled = true;
+        }
+        else if (event.kind === InputEvtType.PointerMoveEvt) {
+            if (this.activeTool !== null) {
+                this.activeTool.onPointerMove(event);
+                handled = true;
+            }
+        }
+        else if (event.kind === InputEvtType.GestureCancelEvt) {
+            if (this.activeTool !== null) {
+                this.activeTool.onGestureCancel();
+                this.activeTool = null;
+            }
+        }
+        else {
+            var allCasesHandledGuard = void 0;
+            for (var _d = 0, _e = this.tools; _d < _e.length; _d++) {
+                var tool = _e[_d];
+                if (!tool.isEnabled()) {
+                    continue;
+                }
+                switch (event.kind) {
+                    case InputEvtType.KeyPressEvent:
+                        handled = tool.onKeyPress(event);
+                        break;
+                    case InputEvtType.KeyUpEvent:
+                        handled = tool.onKeyUp(event);
+                        break;
+                    case InputEvtType.WheelEvt:
+                        handled = tool.onWheel(event);
+                        break;
+                    case InputEvtType.CopyEvent:
+                        handled = tool.onCopy(event);
+                        break;
+                    case InputEvtType.PasteEvent:
+                        handled = tool.onPaste(event);
+                        break;
+                    default:
+                        allCasesHandledGuard = event;
+                        return allCasesHandledGuard;
+                }
+                if (handled) {
+                    break;
+                }
+            }
+        }
+        return handled;
+    };
+    ToolController.prototype.getMatchingTools = function (type) {
+        return this.tools.filter(function (tool) { return tool instanceof type; });
+    };
+    return ToolController;
+}());
+export default ToolController;