js-draw 0.1.1 → 0.1.4

package/dist/src/toolbar/icons.js

@@ -0,0 +1,198 @@
+import EventDispatcher from '../EventDispatcher';
+import { Vec2 } from '../geometry/Vec2';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
+import Viewport from '../Viewport';
+const svgNamespace = 'http://www.w3.org/2000/svg';
+const primaryForegroundFill = `
+	style='fill: var(--primary-foreground-color);'
+`;
+const primaryForegroundStrokeFill = `
+	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
+`;
+export const makeUndoIcon = () => {
+    return makeRedoIcon(true);
+};
+export const makeRedoIcon = (mirror = false) => {
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    icon.innerHTML = `
+		<style>
+			.toolbar-svg-undo-redo-icon {
+				stroke: var(--primary-foreground-color);
+				stroke-width: 12;
+				stroke-linejoin: round;
+				stroke-linecap: round;
+				fill: none;
+
+				transform-origin: center;
+			}
+		</style>
+		<path
+			d='M20,20 A15,15 0 0 1 70,80 L80,90 L60,70 L65,90 L87,90 L65,80'
+			class='toolbar-svg-undo-redo-icon'
+			style='${mirror ? 'transform: scale(-1, 1);' : ''}'/>
+	`;
+    icon.setAttribute('viewBox', '0 0 100 100');
+    return icon;
+};
+export const makeDropdownIcon = () => {
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    icon.innerHTML = `
+	<g>
+		<path
+			d='M5,10 L50,90 L95,10 Z'
+			${primaryForegroundFill}
+		/>
+	</g>
+	`;
+    icon.setAttribute('viewBox', '0 0 100 100');
+    return icon;
+};
+export const makeEraserIcon = () => {
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    // Draw an eraser-like shape
+    icon.innerHTML = `
+	<g>
+		<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
+		<rect
+			x=10 y=10 width=80 height=50
+			${primaryForegroundFill}
+		/>
+	</g>
+	`;
+    icon.setAttribute('viewBox', '0 0 100 100');
+    return icon;
+};
+export const makeSelectionIcon = () => {
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    // Draw a cursor-like shape
+    icon.innerHTML = `
+	<g>
+		<rect x=10 y=10 width=70 height=70 fill='pink' stroke='black'/>
+		<rect x=75 y=75 width=10 height=10 fill='white' stroke='black'/>
+	</g>
+	`;
+    icon.setAttribute('viewBox', '0 0 100 100');
+    return icon;
+};
+export const makeHandToolIcon = () => {
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    // Draw a cursor-like shape
+    icon.innerHTML = `
+	<g>
+		<path d='
+			m 10,60
+			  5,30
+			H 90
+			V 30
+			C 90,20 75,20 75,30
+			V 60
+			  20
+			C 75,10 60,10 60,20
+			V 60
+			  15
+			C 60,5 45,5 45,15
+			V 60
+			  25
+			C 45,15 30,15 30,25
+			V 60
+			  75
+			L 25,60
+			C 20,45 10,50 10,60 
+			Z'
+			
+			fill='none'
+			style='
+				stroke: var(--primary-foreground-color);
+				stroke-width: 2;
+			'
+		/>
+	</g>
+	`;
+    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');
+    const halfThickness = tipThickness / 2;
+    // Draw a pen-like shape
+    const primaryStrokeTipPath = `M14,63 L${50 - halfThickness},95 L${50 + halfThickness},90 L88,60 Z`;
+    const backgroundStrokeTipPath = `M14,63 L${50 - halfThickness},85 L${50 + halfThickness},83 L88,60 Z`;
+    icon.innerHTML = `
+	<defs>
+		<pattern
+			id='checkerboard'
+			viewBox='0,0,10,10'
+			width='20%'
+			height='20%'
+			patternUnits='userSpaceOnUse'
+		>
+			<rect x=0 y=0 width=10 height=10 fill='white'/>
+			<rect x=0 y=0 width=5 height=5 fill='gray'/>
+			<rect x=5 y=5 width=5 height=5 fill='gray'/>
+		</pattern>
+	</defs>
+	<g>
+		<!-- Pen grip -->
+		<path
+			d='M10,10 L90,10 L90,60 L${50 + halfThickness},80 L${50 - halfThickness},80 L10,60 Z'
+			${primaryForegroundStrokeFill}
+		/>
+	</g>
+	<g>
+		<!-- Checkerboard background for slightly transparent pens -->
+		<path d='${backgroundStrokeTipPath}' fill='url(#checkerboard)'/>
+
+		<!-- Actual pen tip -->
+		<path
+			d='${primaryStrokeTipPath}'
+			fill='${color}'
+			stroke='${color}'
+		/>
+	</g>
+	`;
+    return icon;
+};
+export const makeIconFromFactory = (pen, factory) => {
+    const toolThickness = pen.getThickness();
+    const nowTime = (new Date()).getTime();
+    const startPoint = {
+        pos: Vec2.of(10, 10),
+        width: toolThickness / 5,
+        color: pen.getColor(),
+        time: nowTime - 100,
+    };
+    const endPoint = {
+        pos: Vec2.of(90, 90),
+        width: toolThickness / 5,
+        color: pen.getColor(),
+        time: nowTime,
+    };
+    const viewport = new Viewport(new EventDispatcher());
+    const builder = factory(startPoint, viewport);
+    builder.addPoint(endPoint);
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    icon.setAttribute('viewBox', '0 0 100 100');
+    viewport.updateScreenSize(Vec2.of(100, 100));
+    const renderer = new SVGRenderer(icon, viewport);
+    builder.preview(renderer);
+    return icon;
+};

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

@@ -1,4 +1,7 @@
 export interface ToolbarLocalization {
+    fontLabel: string;
+    anyDevicePanning: string;
+    touchPanning: string;
     outlinedRectanglePen: string;
     filledRectanglePen: string;
     linePen: string;
@@ -9,7 +12,7 @@ export interface ToolbarLocalization {
     pen: string;
     eraser: string;
     select: string;
-    touchDrawing: string;
+    handTool: string;
     thicknessLabel: string;
     resizeImageToSelection: string;
     deleteSelection: string;
@@ -17,5 +20,6 @@ export interface ToolbarLocalization {
     redo: string;
     dropdownShown: (toolName: string) => string;
     dropdownHidden: (toolName: string) => string;
+    zoomLevel: (zoomPercentage: number) => string;
 }
 export declare const defaultToolbarLocalization: ToolbarLocalization;

package/dist/src/toolbar/localization.js

@@ -2,14 +2,17 @@ export const defaultToolbarLocalization = {
     pen: 'Pen',
     eraser: 'Eraser',
     select: 'Select',
-    touchDrawing: 'Touch Drawing',
+    handTool: 'Pan',
     thicknessLabel: 'Thickness: ',
     colorLabel: 'Color: ',
+    fontLabel: 'Font: ',
     resizeImageToSelection: 'Resize image to selection',
     deleteSelection: 'Delete selection',
     undo: 'Undo',
     redo: 'Redo',
     selectObjectType: 'Object type: ',
+    touchPanning: 'Touchscreen panning',
+    anyDevicePanning: 'Any device panning',
     freehandPen: 'Freehand',
     arrowPen: 'Arrow',
     linePen: 'Line',
@@ -17,4 +20,5 @@ export const defaultToolbarLocalization = {
     filledRectanglePen: 'Filled rectangle',
     dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
     dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
+    zoomLevel: (zoomPercent) => `Zoom: ${zoomPercent}%`,
 };

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

@@ -2,3 +2,7 @@ export declare enum ToolbarButtonType {
     ToggleButton = 0,
     ActionButton = 1
 }
+export interface ActionButtonIcon {
+    icon: Element;
+    label: string;
+}

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

@@ -11,22 +11,23 @@ interface PinchData {
     dist: number;
 }
 export declare enum PanZoomMode {
-    OneFingerGestures = 1,
-    TwoFingerGestures = 2,
-    AnyDevice = 4
+    OneFingerTouchGestures = 1,
+    TwoFingerTouchGestures = 2,
+    RightClickDrags = 4,
+    SinglePointerGestures = 8
 }
 export default class PanZoom extends BaseTool {
     private editor;
     private mode;
-    readonly kind: ToolType.PanZoom | ToolType.TouchPanZoom;
+    readonly kind: ToolType.PanZoom;
     private transform;
     private lastAngle;
     private lastDist;
     private lastScreenCenter;
     constructor(editor: Editor, mode: PanZoomMode, description: string);
     computePinchData(p1: Pointer, p2: Pointer): PinchData;
-    private pointersHaveCorrectDeviceType;
-    onPointerDown({ allPointers }: PointerEvt): boolean;
+    private allPointersAreOfType;
+    onPointerDown({ allPointers: pointers }: PointerEvt): boolean;
     private getCenterDelta;
     private handleTwoFingerMove;
     private handleOneFingerMove;
@@ -36,5 +37,7 @@ export default class PanZoom extends BaseTool {
     private updateTransform;
     onWheel({ delta, screenPos }: WheelEvt): boolean;
     onKeyPress({ key }: KeyPressEvent): boolean;
+    setMode(mode: PanZoomMode): void;
+    getMode(): PanZoomMode;
 }
 export {};

package/dist/src/tools/PanZoom.js

@@ -2,17 +2,16 @@ import Mat33 from '../geometry/Mat33';
 import { Vec2 } from '../geometry/Vec2';
 import Vec3 from '../geometry/Vec3';
 import { PointerDevice } from '../Pointer';
+import { EditorEventType } from '../types';
 import { Viewport } from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 export var PanZoomMode;
 (function (PanZoomMode) {
-    // Handle one-pointer gestures (touchscreen only unless AnyDevice is set)
-    PanZoomMode[PanZoomMode["OneFingerGestures"] = 1] = "OneFingerGestures";
-    // Handle two-pointer gestures (touchscreen only unless AnyDevice is set)
-    PanZoomMode[PanZoomMode["TwoFingerGestures"] = 2] = "TwoFingerGestures";
-    // / Handle gestures from any device, rather than just touch
-    PanZoomMode[PanZoomMode["AnyDevice"] = 4] = "AnyDevice";
+    PanZoomMode[PanZoomMode["OneFingerTouchGestures"] = 1] = "OneFingerTouchGestures";
+    PanZoomMode[PanZoomMode["TwoFingerTouchGestures"] = 2] = "TwoFingerTouchGestures";
+    PanZoomMode[PanZoomMode["RightClickDrags"] = 4] = "RightClickDrags";
+    PanZoomMode[PanZoomMode["SinglePointerGestures"] = 8] = "SinglePointerGestures";
 })(PanZoomMode || (PanZoomMode = {}));
 export default class PanZoom extends BaseTool {
     constructor(editor, mode, description) {
@@ -21,9 +20,6 @@ export default class PanZoom extends BaseTool {
         this.mode = mode;
         this.kind = ToolType.PanZoom;
         this.transform = null;
-        if (mode === PanZoomMode.OneFingerGestures) {
-            this.kind = ToolType.TouchPanZoom;
-        }
     }
     // Returns information about the pointers in a gesture
     computePinchData(p1, p2) {
@@ -34,24 +30,25 @@ export default class PanZoom extends BaseTool {
         const screenCenter = p2.screenPos.plus(p1.screenPos).times(0.5);
         return { canvasCenter, screenCenter, angle, dist };
     }
-    pointersHaveCorrectDeviceType(pointers) {
-        return this.mode & PanZoomMode.AnyDevice || pointers.every(pointer => pointer.device === PointerDevice.Touch);
+    allPointersAreOfType(pointers, kind) {
+        return pointers.every(pointer => pointer.device === kind);
     }
-    onPointerDown({ allPointers }) {
+    onPointerDown({ allPointers: pointers }) {
         var _a;
         let handlingGesture = false;
-        if (!this.pointersHaveCorrectDeviceType(allPointers)) {
-            handlingGesture = false;
-        }
-        else if (allPointers.length === 2 && this.mode & PanZoomMode.TwoFingerGestures) {
-            const { screenCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
+        const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
+        const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
+        if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
+            const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
             this.lastAngle = angle;
             this.lastDist = dist;
             this.lastScreenCenter = screenCenter;
             handlingGesture = true;
         }
-        else if (allPointers.length === 1 && this.mode & PanZoomMode.OneFingerGestures) {
-            this.lastScreenCenter = allPointers[0].screenPos;
+        else if (pointers.length === 1 && ((this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
+            || (isRightClick && this.mode & PanZoomMode.RightClickDrags)
+            || (this.mode & PanZoomMode.SinglePointerGestures))) {
+            this.lastScreenCenter = pointers[0].screenPos;
             handlingGesture = true;
         }
         if (handlingGesture) {
@@ -87,10 +84,10 @@ export default class PanZoom extends BaseTool {
         var _a;
         (_a = this.transform) !== null && _a !== void 0 ? _a : (this.transform = new Viewport.ViewportTransform(Mat33.identity));
         const lastTransform = this.transform;
-        if (allPointers.length === 2 && this.mode & PanZoomMode.TwoFingerGestures) {
+        if (allPointers.length === 2) {
             this.handleTwoFingerMove(allPointers);
         }
-        else if (allPointers.length === 1 && this.mode & PanZoomMode.OneFingerGestures) {
+        else if (allPointers.length === 1) {
             this.handleOneFingerMove(allPointers[0]);
         }
         lastTransform.unapply(this.editor);
@@ -191,4 +188,16 @@ export default class PanZoom extends BaseTool {
         this.updateTransform(transformUpdate);
         return true;
     }
+    setMode(mode) {
+        if (mode !== this.mode) {
+            this.mode = mode;
+            this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+                kind: EditorEventType.ToolUpdated,
+                tool: this,
+            });
+        }
+    }
+    getMode() {
+        return this.mode;
+    }
 }

package/dist/src/tools/Pen.js

@@ -66,9 +66,14 @@ export default class Pen extends BaseTool {
         if (this.builder && current.isPrimary) {
             const stroke = this.builder.build();
             this.previewStroke();
-            const canFlatten = true;
-            const action = new EditorImage.AddElementCommand(stroke, canFlatten);
-            this.editor.dispatch(action);
+            if (stroke.getBBox().area > 0) {
+                const canFlatten = true;
+                const action = new EditorImage.AddElementCommand(stroke, canFlatten);
+                this.editor.dispatch(action);
+            }
+            else {
+                console.warn('Pen: Not adding empty stroke', stroke, 'to the canvas.');
+            }
         }
         this.builder = null;
         this.editor.clearWetInk();

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,30 @@
+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;
+    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;
+}

package/dist/src/tools/TextTool.js

@@ -0,0 +1,173 @@
+import Color4 from '../Color4';
+import Text from '../components/Text';
+import EditorImage from '../EditorImage';
+import Mat33 from '../geometry/Mat33';
+import { PointerDevice } from '../Pointer';
+import { EditorEventType } from '../types';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+const overlayCssClass = 'textEditorOverlay';
+export default class TextTool extends BaseTool {
+    constructor(editor, description, localizationTable) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.localizationTable = localizationTable;
+        this.kind = ToolType.Text;
+        this.textInputElem = null;
+        this.textTargetPosition = null;
+        this.textMeasuringCtx = 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(`
+			.${overlayCssClass} {
+				height: 0;
+				overflow: visible;
+			}
+
+			.${overlayCssClass} input {
+				background-color: rgba(0, 0, 0, 0);
+				border: none;
+				padding: 0;
+			}
+		`);
+        this.editor.createHTMLOverlay(this.textEditOverlay);
+        this.editor.notifier.on(EditorEventType.ViewportChanged, () => this.updateTextInput());
+    }
+    getTextAscent(text, style) {
+        var _a;
+        (_a = this.textMeasuringCtx) !== null && _a !== void 0 ? _a : (this.textMeasuringCtx = document.createElement('canvas').getContext('2d'));
+        if (this.textMeasuringCtx) {
+            Text.applyTextStyles(this.textMeasuringCtx, style);
+            return this.textMeasuringCtx.measureText(text).actualBoundingBoxAscent;
+        }
+        // Estimate
+        return style.size * 2 / 3;
+    }
+    flushInput() {
+        if (this.textInputElem && this.textTargetPosition) {
+            const content = this.textInputElem.value;
+            this.textInputElem.remove();
+            this.textInputElem = null;
+            if (content === '') {
+                return;
+            }
+            const textTransform = Mat33.translation(this.textTargetPosition).rightMul(Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas()));
+            const textComponent = new Text([content], textTransform, this.textStyle);
+            const action = new EditorImage.AddElementCommand(textComponent);
+            this.editor.dispatch(action);
+        }
+    }
+    updateTextInput() {
+        var _a, _b, _c;
+        if (!this.textInputElem || !this.textTargetPosition) {
+            (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.remove();
+            return;
+        }
+        const viewport = this.editor.viewport;
+        const textScreenPos = this.editor.viewport.canvasToScreen(this.textTargetPosition);
+        this.textInputElem.type = 'text';
+        this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
+        this.textInputElem.style.fontFamily = this.textStyle.fontFamily;
+        this.textInputElem.style.fontVariant = (_b = this.textStyle.fontVariant) !== null && _b !== void 0 ? _b : '';
+        this.textInputElem.style.fontWeight = (_c = this.textStyle.fontWeight) !== null && _c !== void 0 ? _c : '';
+        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 = `${textScreenPos.x}px`;
+        this.textInputElem.style.top = `${textScreenPos.y}px`;
+        this.textInputElem.style.margin = '0';
+        const rotation = viewport.getRotationAngle();
+        const ascent = this.getTextAscent(this.textInputElem.value || 'W', this.textStyle);
+        this.textInputElem.style.transform = `rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-ascent}px)`;
+        this.textInputElem.style.transformOrigin = 'top left';
+    }
+    startTextInput(textCanvasPos, initialText) {
+        this.flushInput();
+        this.textInputElem = document.createElement('input');
+        this.textInputElem.value = initialText;
+        this.textTargetPosition = textCanvasPos;
+        this.updateTextInput();
+        this.textInputElem.oninput = () => {
+            var _a;
+            if (this.textInputElem) {
+                this.textInputElem.size = ((_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.value.length) || 10;
+            }
+        };
+        this.textInputElem.onblur = () => {
+            // Don't remove the input within the context of a blur event handler.
+            // Doing so causes errors.
+            setTimeout(() => this.flushInput(), 0);
+        };
+        this.textInputElem.onkeyup = (evt) => {
+            var _a;
+            if (evt.key === 'Enter') {
+                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();
+            }
+        };
+        this.textEditOverlay.replaceChildren(this.textInputElem);
+        setTimeout(() => { var _a; return (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        if (!enabled) {
+            this.flushInput();
+        }
+        this.textEditOverlay.style.display = enabled ? 'block' : 'none';
+    }
+    onPointerDown({ current, allPointers }) {
+        if (current.device === PointerDevice.Eraser) {
+            return false;
+        }
+        if (allPointers.length === 1) {
+            this.startTextInput(current.canvasPos, '');
+            return true;
+        }
+        return false;
+    }
+    onGestureCancel() {
+        this.flushInput();
+        this.editor.focus();
+    }
+    dispatchUpdateEvent() {
+        this.updateTextInput();
+        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+            kind: EditorEventType.ToolUpdated,
+            tool: this,
+        });
+    }
+    setFontFamily(fontFamily) {
+        if (fontFamily !== this.textStyle.fontFamily) {
+            this.textStyle = Object.assign(Object.assign({}, this.textStyle), { fontFamily: fontFamily });
+            this.dispatchUpdateEvent();
+        }
+    }
+    setColor(color) {
+        if (!color.eq(this.textStyle.renderingStyle.fill)) {
+            this.textStyle = Object.assign(Object.assign({}, this.textStyle), { renderingStyle: Object.assign(Object.assign({}, this.textStyle.renderingStyle), { fill: color }) });
+            this.dispatchUpdateEvent();
+        }
+    }
+    setFontSize(size) {
+        if (size !== this.textStyle.size) {
+            this.textStyle = Object.assign(Object.assign({}, this.textStyle), { size });
+            this.dispatchUpdateEvent();
+        }
+    }
+    getTextStyle() {
+        return this.textStyle;
+    }
+}

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

@@ -3,11 +3,11 @@ import Editor from '../Editor';
 import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
 export declare enum ToolType {
-    TouchPanZoom = 0,
-    Pen = 1,
-    Selection = 2,
-    Eraser = 3,
-    PanZoom = 4,
+    Pen = 0,
+    Selection = 1,
+    Eraser = 2,
+    PanZoom = 3,
+    Text = 4,
     UndoRedoShortcut = 5
 }
 export default class ToolController {