js-draw 0.1.2 → 0.1.5

package/dist/src/rendering/Display.js

@@ -3,6 +3,7 @@ import { EditorEventType } from '../types';
 import DummyRenderer from './renderers/DummyRenderer';
 import { Vec2 } from '../geometry/Vec2';
 import RenderingCache from './caching/RenderingCache';
+import TextOnlyRenderer from './renderers/TextOnlyRenderer';
 export var RenderingMode;
 (function (RenderingMode) {
     RenderingMode[RenderingMode["DummyRenderer"] = 0] = "DummyRenderer";
@@ -23,6 +24,8 @@ export default class Display {
         else {
             throw new Error(`Unknown rendering mode, ${mode}!`);
         }
+        this.textRenderer = new TextOnlyRenderer(editor.viewport, editor.localization);
+        this.initializeTextRendering();
         const cacheBlockResolution = Vec2.of(600, 600);
         this.cache = new RenderingCache({
             createRenderer: () => {
@@ -104,6 +107,22 @@ export default class Display {
             dryInkCtx.drawImage(wetInkCanvas, 0, 0);
         };
     }
+    initializeTextRendering() {
+        const textRendererOutputContainer = document.createElement('div');
+        textRendererOutputContainer.classList.add('textRendererOutputContainer');
+        const rerenderButton = document.createElement('button');
+        rerenderButton.classList.add('rerenderButton');
+        rerenderButton.innerText = this.editor.localization.rerenderAsText;
+        const rerenderOutput = document.createElement('div');
+        rerenderOutput.ariaLive = 'polite';
+        rerenderButton.onclick = () => {
+            this.textRenderer.clear();
+            this.editor.image.render(this.textRenderer, this.editor.viewport);
+            rerenderOutput.innerText = this.textRenderer.getDescription();
+        };
+        textRendererOutputContainer.replaceChildren(rerenderButton, rerenderOutput);
+        this.editor.createHTMLOverlay(textRendererOutputContainer);
+    }
     // Clears the drawing surfaces and otherwise prepares for a rerender.
     startRerender() {
         var _a;

package/dist/src/rendering/localization.d.ts

@@ -0,0 +1,5 @@
+export interface TextRendererLocalization {
+    textNode(content: string): string;
+    rerenderAsText: string;
+}
+export declare const defaultTextRendererLocalization: TextRendererLocalization;

package/dist/src/rendering/localization.js

@@ -0,0 +1,4 @@
+export const defaultTextRendererLocalization = {
+    textNode: (content) => `Text: ${content}`,
+    rerenderAsText: 'Re-render as text',
+};

package/dist/src/rendering/renderers/AbstractRenderer.d.ts

@@ -1,5 +1,6 @@
 import Color4 from '../../Color4';
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import { PathCommand } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
@@ -20,6 +21,7 @@ export interface RenderablePathSpec {
 export default abstract class AbstractRenderer {
     private viewport;
     private selfTransform;
+    private transformStack;
     protected constructor(viewport: Viewport);
     protected getViewport(): Viewport;
     abstract displaySize(): Vec2;
@@ -30,6 +32,7 @@ export default abstract class AbstractRenderer {
     protected abstract moveTo(point: Point2): void;
     protected abstract traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected abstract traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
+    abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
     abstract isTooSmallToRender(rect: Rect2): boolean;
     setDraftMode(_draftMode: boolean): void;
     protected objectLevel: number;
@@ -44,6 +47,8 @@ export default abstract class AbstractRenderer {
     canRenderFromWithoutDataLoss(_other: AbstractRenderer): boolean;
     renderFromOtherOfSameType(_renderTo: Mat33, other: AbstractRenderer): void;
     setTransform(transform: Mat33 | null): void;
+    pushTransform(transform: Mat33): void;
+    popTransform(): void;
     getCanvasToScreenTransform(): Mat33;
     canvasToScreen(vec: Vec2): Vec2;
     getSizeOfCanvasPixelOnScreen(): number;

package/dist/src/rendering/renderers/AbstractRenderer.js

@@ -11,6 +11,7 @@ export default class AbstractRenderer {
         this.viewport = viewport;
         // If null, this' transformation is linked to the Viewport
         this.selfTransform = null;
+        this.transformStack = [];
         this.objectLevel = 0;
         this.currentPaths = null;
     }
@@ -104,6 +105,17 @@ export default class AbstractRenderer {
     setTransform(transform) {
         this.selfTransform = transform;
     }
+    pushTransform(transform) {
+        this.transformStack.push(this.selfTransform);
+        this.setTransform(this.getCanvasToScreenTransform().rightMul(transform));
+    }
+    popTransform() {
+        var _a;
+        if (this.transformStack.length === 0) {
+            throw new Error('Unable to pop more transforms than have been pushed!');
+        }
+        this.setTransform((_a = this.transformStack.pop()) !== null && _a !== void 0 ? _a : null);
+    }
     // Get the matrix that transforms a vector on the canvas to a vector on this'
     // rendering target.
     getCanvasToScreenTransform() {

package/dist/src/rendering/renderers/CanvasRenderer.d.ts

@@ -1,3 +1,4 @@
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
@@ -12,6 +13,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     private minRenderSizeAnyDimen;
     private minRenderSizeBothDimens;
     constructor(ctx: CanvasRenderingContext2D, viewport: Viewport);
+    private transformBy;
     canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
     renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void;
     setDraftMode(draftMode: boolean): void;
@@ -24,6 +26,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPath(path: RenderablePathSpec): void;
+    drawText(text: string, transform: Mat33, style: TextStyle): void;
     private clipLevels;
     startObject(boundingBox: Rect2, clip: boolean): void;
     endObject(): void;

package/dist/src/rendering/renderers/CanvasRenderer.js

@@ -1,4 +1,5 @@
 import Color4 from '../../Color4';
+import Text from '../../components/Text';
 import { Vec2 } from '../../geometry/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
@@ -10,6 +11,16 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.clipLevels = [];
         this.setDraftMode(false);
     }
+    transformBy(transformBy) {
+        // From MDN, transform(a,b,c,d,e,f)
+        // takes input such that
+        // ⎡ a c e ⎤
+        // ⎢ b d f ⎥ transforms content drawn to [ctx].
+        // ⎣ 0 0 1 ⎦
+        this.ctx.transform(transformBy.a1, transformBy.b1, // a, b
+        transformBy.a2, transformBy.b2, // c, d
+        transformBy.a3, transformBy.b3);
+    }
     canRenderFromWithoutDataLoss(other) {
         return other instanceof CanvasRenderer;
     }
@@ -19,14 +30,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
         this.ctx.save();
-        // From MDN, transform(a,b,c,d,e,f)
-        // takes input such that
-        // ⎡ a c e ⎤
-        // ⎢ b d f ⎥ transforms content drawn to [ctx].
-        // ⎣ 0 0 1 ⎦
-        this.ctx.transform(transformBy.a1, transformBy.b1, // a, b
-        transformBy.a2, transformBy.b2, // c, d
-        transformBy.a3, transformBy.b3);
+        this.transformBy(transformBy);
         this.ctx.drawImage(other.ctx.canvas, 0, 0);
         this.ctx.restore();
     }
@@ -105,6 +109,22 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         super.drawPath(path);
     }
+    drawText(text, transform, style) {
+        this.ctx.save();
+        transform = this.getCanvasToScreenTransform().rightMul(transform);
+        this.transformBy(transform);
+        Text.applyTextStyles(this.ctx, style);
+        if (style.renderingStyle.fill.a !== 0) {
+            this.ctx.fillStyle = style.renderingStyle.fill.toHexString();
+            this.ctx.fillText(text, 0, 0);
+        }
+        if (style.renderingStyle.stroke) {
+            this.ctx.strokeStyle = style.renderingStyle.stroke.color.toHexString();
+            this.ctx.lineWidth = style.renderingStyle.stroke.width;
+            this.ctx.strokeText(text, 0, 0);
+        }
+        this.ctx.restore();
+    }
     startObject(boundingBox, clip) {
         if (this.isTooSmallToRender(boundingBox)) {
             this.ignoreObjectsAboveLevel = this.getNestingLevel();

package/dist/src/rendering/renderers/DummyRenderer.d.ts

@@ -1,3 +1,4 @@
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
@@ -10,6 +11,7 @@ export default class DummyRenderer extends AbstractRenderer {
     lastFillStyle: RenderingStyle | null;
     lastPoint: Point2 | null;
     objectNestingLevel: number;
+    lastText: string | null;
     pointBuffer: Point2[];
     constructor(viewport: Viewport);
     displaySize(): Vec2;
@@ -21,6 +23,7 @@ export default class DummyRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPoints(..._points: Vec3[]): void;
+    drawText(text: string, _transform: Mat33, _style: TextStyle): void;
     startObject(boundingBox: Rect2, _clip: boolean): void;
     endObject(): void;
     isTooSmallToRender(_rect: Rect2): boolean;

package/dist/src/rendering/renderers/DummyRenderer.js

@@ -10,6 +10,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.lastFillStyle = null;
         this.lastPoint = null;
         this.objectNestingLevel = 0;
+        this.lastText = null;
         // List of points drawn since the last clear.
         this.pointBuffer = [];
     }
@@ -28,6 +29,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.clearedCount++;
         this.renderedPathCount = 0;
         this.pointBuffer = [];
+        this.lastText = null;
         // Ensure all objects finished rendering
         if (this.objectNestingLevel > 0) {
             throw new Error(`Within an object while clearing! Nesting level: ${this.objectNestingLevel}`);
@@ -68,6 +70,9 @@ export default class DummyRenderer extends AbstractRenderer {
         // drawPoints is intended for debugging.
         // As such, it is unlikely to be the target of automated tests.
     }
+    drawText(text, _transform, _style) {
+        this.lastText = text;
+    }
     startObject(boundingBox, _clip) {
         super.startObject(boundingBox);
         this.objectNestingLevel += 1;

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -1,4 +1,6 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import { TextStyle } from '../../components/Text';
+import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import Viewport from '../../Viewport';
@@ -19,6 +21,7 @@ export default class SVGRenderer extends AbstractRenderer {
     protected beginPath(startPoint: Point2): void;
     protected endPath(style: RenderingStyle): void;
     private addPathToSVG;
+    drawText(text: string, transform: Mat33, style: TextStyle): void;
     startObject(boundingBox: Rect2): void;
     endObject(loaderData?: LoadSaveDataTable): void;
     protected lineTo(point: Point2): void;

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -1,6 +1,6 @@
 import Path, { PathCommandType } from '../../geometry/Path';
 import { Vec2 } from '../../geometry/Vec2';
-import { svgAttributesDataKey } from '../../SVGLoader';
+import { svgAttributesDataKey, svgStyleAttributesDataKey } from '../../SVGLoader';
 import AbstractRenderer from './AbstractRenderer';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
@@ -86,6 +86,29 @@ export default class SVGRenderer extends AbstractRenderer {
         this.elem.appendChild(pathElem);
         (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
     }
+    drawText(text, transform, style) {
+        var _a, _b, _c;
+        transform = this.getCanvasToScreenTransform().rightMul(transform);
+        const textElem = document.createElementNS(svgNameSpace, 'text');
+        textElem.appendChild(document.createTextNode(text));
+        textElem.style.transform = `matrix(
+			${transform.a1}, ${transform.b1},
+			${transform.a2}, ${transform.b2},
+			${transform.a3}, ${transform.b3}
+		)`;
+        textElem.style.fontFamily = style.fontFamily;
+        textElem.style.fontVariant = (_a = style.fontVariant) !== null && _a !== void 0 ? _a : '';
+        textElem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
+        textElem.style.fontSize = style.size + 'px';
+        textElem.style.fill = style.renderingStyle.fill.toHexString();
+        if (style.renderingStyle.stroke) {
+            const strokeStyle = style.renderingStyle.stroke;
+            textElem.style.stroke = strokeStyle.color.toHexString();
+            textElem.style.strokeWidth = strokeStyle.width + 'px';
+        }
+        this.elem.appendChild(textElem);
+        (_c = this.objectElems) === null || _c === void 0 ? void 0 : _c.push(textElem);
+    }
     startObject(boundingBox) {
         super.startObject(boundingBox);
         // Only accumulate a path within an object
@@ -103,11 +126,17 @@ export default class SVGRenderer extends AbstractRenderer {
             // Restore any attributes unsupported by the app.
             for (const elem of (_a = this.objectElems) !== null && _a !== void 0 ? _a : []) {
                 const attrs = loaderData[svgAttributesDataKey];
+                const styleAttrs = loaderData[svgStyleAttributesDataKey];
                 if (attrs) {
                     for (const [attr, value] of attrs) {
                         elem.setAttribute(attr, value);
                     }
                 }
+                if (styleAttrs) {
+                    for (const attr of styleAttrs) {
+                        elem.style.setProperty(attr.key, attr.value, attr.priority);
+                    }
+                }
             }
         }
     }

package/dist/src/rendering/renderers/TextOnlyRenderer.d.ts

@@ -0,0 +1,24 @@
+import { TextStyle } from '../../components/Text';
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/Rect2';
+import Vec3 from '../../geometry/Vec3';
+import Viewport from '../../Viewport';
+import { TextRendererLocalization } from '../localization';
+import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
+export default class TextOnlyRenderer extends AbstractRenderer {
+    private localizationTable;
+    private descriptionBuilder;
+    constructor(viewport: Viewport, localizationTable: TextRendererLocalization);
+    displaySize(): Vec3;
+    clear(): void;
+    getDescription(): string;
+    protected beginPath(_startPoint: Vec3): void;
+    protected endPath(_style: RenderingStyle): void;
+    protected lineTo(_point: Vec3): void;
+    protected moveTo(_point: Vec3): void;
+    protected traceCubicBezierCurve(_p1: Vec3, _p2: Vec3, _p3: Vec3): void;
+    protected traceQuadraticBezierCurve(_controlPoint: Vec3, _endPoint: Vec3): void;
+    drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    isTooSmallToRender(rect: Rect2): boolean;
+    drawPoints(..._points: Vec3[]): void;
+}

package/dist/src/rendering/renderers/TextOnlyRenderer.js

@@ -0,0 +1,40 @@
+import { Vec2 } from '../../geometry/Vec2';
+import AbstractRenderer from './AbstractRenderer';
+// Outputs a description of what was rendered.
+export default class TextOnlyRenderer extends AbstractRenderer {
+    constructor(viewport, localizationTable) {
+        super(viewport);
+        this.localizationTable = localizationTable;
+        this.descriptionBuilder = [];
+    }
+    displaySize() {
+        // We don't have a graphical display, export a reasonable size.
+        return Vec2.of(500, 500);
+    }
+    clear() {
+        this.descriptionBuilder = [];
+    }
+    getDescription() {
+        return this.descriptionBuilder.join('\n');
+    }
+    beginPath(_startPoint) {
+    }
+    endPath(_style) {
+    }
+    lineTo(_point) {
+    }
+    moveTo(_point) {
+    }
+    traceCubicBezierCurve(_p1, _p2, _p3) {
+    }
+    traceQuadraticBezierCurve(_controlPoint, _endPoint) {
+    }
+    drawText(text, _transform, _style) {
+        this.descriptionBuilder.push(this.localizationTable.textNode(text));
+    }
+    isTooSmallToRender(rect) {
+        return rect.maxDimension < 10 / this.getSizeOfCanvasPixelOnScreen();
+    }
+    drawPoints(..._points) {
+    }
+}

package/dist/src/testing/loadExpectExtensions.js

@@ -15,10 +15,7 @@ export const loadExpectExtensions = () => {
             return {
                 pass,
                 message: () => {
-                    if (pass) {
-                        return `Expected ${expected} not to .eq ${actual}. Options(${eqArgs})`;
-                    }
-                    return `Expected ${expected} to .eq ${actual}. Options(${eqArgs})`;
+                    return `Expected ${pass ? '!' : ''}(${actual}).eq(${expected}). Options(${eqArgs})`;
                 },
             };
         },

package/dist/src/toolbar/HTMLToolbar.js

@@ -10,10 +10,11 @@ import { makeArrowBuilder } from '../components/builders/ArrowBuilder';
 import { makeLineBuilder } from '../components/builders/LineBuilder';
 import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../components/builders/RectangleBuilder';
 import { defaultToolbarLocalization } from './localization';
-import { makeDropdownIcon, makeEraserIcon, makeIconFromFactory, makePenIcon, makeRedoIcon, makeSelectionIcon, makeHandToolIcon, makeUndoIcon } from './icons';
+import { makeDropdownIcon, makeEraserIcon, makeIconFromFactory, makePenIcon, makeRedoIcon, makeSelectionIcon, makeHandToolIcon, makeUndoIcon, makeTextIcon } from './icons';
 import PanZoom, { PanZoomMode } from '../tools/PanZoom';
 import Mat33 from '../geometry/Mat33';
 import Viewport from '../Viewport';
+import TextTool from '../tools/TextTool';
 const toolbarCSSPrefix = 'toolbar-';
 class ToolbarWidget {
     constructor(editor, targetTool, localizationTable) {
@@ -316,6 +317,76 @@ class HandToolWidget extends ToolbarWidget {
         this.setDropdownVisible(!this.isDropdownVisible());
     }
 }
+class TextToolWidget extends ToolbarWidget {
+    constructor(editor, tool, localization) {
+        super(editor, tool, localization);
+        this.tool = tool;
+        this.updateDropdownInputs = null;
+        editor.notifier.on(EditorEventType.ToolUpdated, evt => {
+            var _a;
+            if (evt.kind === EditorEventType.ToolUpdated && evt.tool === tool) {
+                this.updateIcon();
+                (_a = this.updateDropdownInputs) === null || _a === void 0 ? void 0 : _a.call(this);
+            }
+        });
+    }
+    getTitle() {
+        return this.targetTool.description;
+    }
+    createIcon() {
+        const textStyle = this.tool.getTextStyle();
+        return makeTextIcon(textStyle);
+    }
+    fillDropdown(dropdown) {
+        const fontRow = document.createElement('div');
+        const colorRow = document.createElement('div');
+        const fontInput = document.createElement('select');
+        const fontLabel = document.createElement('label');
+        const colorInput = document.createElement('input');
+        const colorLabel = document.createElement('label');
+        const fontsInInput = new Set();
+        const addFontToInput = (fontName) => {
+            const option = document.createElement('option');
+            option.value = fontName;
+            option.textContent = fontName;
+            fontInput.appendChild(option);
+            fontsInInput.add(fontName);
+        };
+        fontLabel.innerText = this.localizationTable.fontLabel;
+        colorLabel.innerText = this.localizationTable.colorLabel;
+        colorInput.classList.add('coloris_input');
+        colorInput.type = 'button';
+        colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
+        colorLabel.setAttribute('for', colorInput.id);
+        addFontToInput('monospace');
+        addFontToInput('serif');
+        addFontToInput('sans-serif');
+        fontInput.id = `${toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
+        fontLabel.setAttribute('for', fontInput.id);
+        fontInput.onchange = () => {
+            this.tool.setFontFamily(fontInput.value);
+        };
+        colorInput.oninput = () => {
+            this.tool.setColor(Color4.fromString(colorInput.value));
+        };
+        colorRow.appendChild(colorLabel);
+        colorRow.appendChild(colorInput);
+        fontRow.appendChild(fontLabel);
+        fontRow.appendChild(fontInput);
+        this.updateDropdownInputs = () => {
+            const style = this.tool.getTextStyle();
+            colorInput.value = style.renderingStyle.fill.toHexString();
+            if (!fontsInInput.has(style.fontFamily)) {
+                addFontToInput(style.fontFamily);
+            }
+            fontInput.value = style.fontFamily;
+        };
+        this.updateDropdownInputs();
+        dropdown.replaceChildren(colorRow, fontRow);
+        return true;
+    }
+}
+TextToolWidget.idCounter = 0;
 class PenWidget extends ToolbarWidget {
     constructor(editor, tool, localization, penTypes) {
         super(editor, tool, localization);
@@ -559,6 +630,12 @@ export default class HTMLToolbar {
             }
             (new SelectionWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
         }
+        for (const tool of toolController.getMatchingTools(ToolType.Text)) {
+            if (!(tool instanceof TextTool)) {
+                throw new Error('All text tools must have kind === ToolType.Text');
+            }
+            (new TextToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+        }
         for (const tool of toolController.getMatchingTools(ToolType.PanZoom)) {
             if (!(tool instanceof PanZoom)) {
                 throw new Error('All SelectionTools must have kind === ToolType.PanZoom');

package/dist/src/toolbar/icons.d.ts

@@ -1,4 +1,5 @@
 import { ComponentBuilderFactory } from '../components/builders/types';
+import { TextStyle } from '../components/Text';
 import Pen from '../tools/Pen';
 export declare const makeUndoIcon: () => SVGSVGElement;
 export declare const makeRedoIcon: (mirror?: boolean) => SVGSVGElement;
@@ -6,5 +7,6 @@ export declare const makeDropdownIcon: () => SVGSVGElement;
 export declare const makeEraserIcon: () => SVGSVGElement;
 export declare const makeSelectionIcon: () => SVGSVGElement;
 export declare const makeHandToolIcon: () => SVGSVGElement;
+export declare const makeTextIcon: (textStyle: TextStyle) => SVGSVGElement;
 export declare const makePenIcon: (tipThickness: number, color: string) => SVGSVGElement;
 export declare const makeIconFromFactory: (pen: Pen, factory: ComponentBuilderFactory) => SVGSVGElement;

package/dist/src/toolbar/icons.js

@@ -111,6 +111,24 @@ export const makeHandToolIcon = () => {
     icon.setAttribute('viewBox', '0 0 100 100');
     return icon;
 };
+export const makeTextIcon = (textStyle) => {
+    var _a, _b;
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    icon.setAttribute('viewBox', '0 0 100 100');
+    const textNode = document.createElementNS(svgNamespace, 'text');
+    textNode.appendChild(document.createTextNode('T'));
+    textNode.style.fontFamily = textStyle.fontFamily;
+    textNode.style.fontWeight = (_a = textStyle.fontWeight) !== null && _a !== void 0 ? _a : '';
+    textNode.style.fontVariant = (_b = textStyle.fontVariant) !== null && _b !== void 0 ? _b : '';
+    textNode.style.fill = textStyle.renderingStyle.fill.toHexString();
+    textNode.style.textAnchor = 'middle';
+    textNode.setAttribute('x', '50');
+    textNode.setAttribute('y', '75');
+    textNode.style.fontSize = '65px';
+    textNode.style.filter = 'drop-shadow(0px 0px 10px var(--primary-shadow-color))';
+    icon.appendChild(textNode);
+    return icon;
+};
 export const makePenIcon = (tipThickness, color) => {
     const icon = document.createElementNS(svgNamespace, 'svg');
     icon.setAttribute('viewBox', '0 0 100 100');

package/dist/src/toolbar/localization.d.ts

@@ -1,4 +1,5 @@
 export interface ToolbarLocalization {
+    fontLabel: string;
     anyDevicePanning: string;
     touchPanning: string;
     outlinedRectanglePen: string;

package/dist/src/toolbar/localization.js

@@ -5,6 +5,7 @@ export const defaultToolbarLocalization = {
     handTool: 'Pan',
     thicknessLabel: 'Thickness: ',
     colorLabel: 'Color: ',
+    fontLabel: 'Font: ',
     resizeImageToSelection: 'Resize image to selection',
     deleteSelection: 'Delete selection',
     undo: 'Undo',

package/dist/src/tools/SelectionTool.js

@@ -396,7 +396,7 @@ export default class SelectionTool extends BaseTool {
         if (hasSelection) {
             this.editor.announceForAccessibility(this.editor.localization.selectedElements(this.selectionBox.getSelectedItemCount()));
             const selectionRect = this.selectionBox.region;
-            this.editor.viewport.zoomTo(selectionRect).apply(this.editor);
+            this.editor.viewport.zoomTo(selectionRect, false).apply(this.editor);
         }
     }
     onPointerUp(event) {

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

@@ -0,0 +1,31 @@
+import Color4 from '../Color4';
+import { TextStyle } from '../components/Text';
+import Editor from '../Editor';
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import { ToolLocalization } from './localization';
+import { ToolType } from './ToolController';
+export default class TextTool extends BaseTool {
+    private editor;
+    private localizationTable;
+    kind: ToolType;
+    private textStyle;
+    private textEditOverlay;
+    private textInputElem;
+    private textTargetPosition;
+    private textMeasuringCtx;
+    private textRotation;
+    constructor(editor: Editor, description: string, localizationTable: ToolLocalization);
+    private getTextAscent;
+    private flushInput;
+    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(): TextStyle;
+}