js-draw 0.9.1 → 0.9.3

package/dist/src/Editor.d.ts

@@ -29,8 +29,8 @@ import Pointer from './Pointer';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import IconProvider from './toolbar/IconProvider';
-declare type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
-declare type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
+type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
+type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
 export interface EditorSettings {
     /** Defaults to `RenderingMode.CanvasRenderer` */
     renderingMode: RenderingMode;
@@ -199,7 +199,6 @@ export declare class Editor {
     sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
     toDataURL(format?: 'image/png' | 'image/jpeg' | 'image/webp'): string;
     toSVG(): SVGElement;
-    private renderAllWithTransform;
     loadFrom(loader: ImageLoader): Promise<void>;
     getImportExportRect(): Rect2;
     setImportExportRect(imageRect: Rect2): Command;

package/dist/src/Editor.js

@@ -639,8 +639,7 @@ export class Editor {
         canvas.height = resolution.y;
         const ctx = canvas.getContext('2d');
         const renderer = new CanvasRenderer(ctx, this.importExportViewport);
-        // Render everything with no transform (0,0) should be (0,0) in the output image
-        this.renderAllWithTransform(renderer, this.importExportViewport, Mat33.identity);
+        this.image.renderAll(renderer);
         const dataURL = canvas.toDataURL(format);
         return dataURL;
     }
@@ -649,7 +648,12 @@ export class Editor {
         const svgNameSpace = 'http://www.w3.org/2000/svg';
         const result = document.createElementNS(svgNameSpace, 'svg');
         const renderer = new SVGRenderer(result, importExportViewport);
-        this.renderAllWithTransform(renderer, importExportViewport);
+        const origTransform = this.importExportViewport.canvasToScreenTransform;
+        // Render with (0,0) at (0,0) — we'll handle translation with
+        // the viewBox property.
+        importExportViewport.resetTransform(Mat33.identity);
+        this.image.renderAll(renderer);
+        importExportViewport.resetTransform(origTransform);
         // Just show the main region
         const rect = importExportViewport.visibleRect;
         result.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(part => toRoundedString(part)).join(' '));
@@ -662,18 +666,6 @@ export class Editor {
         result.setAttribute('xmlns', svgNameSpace);
         return result;
     }
-    // Renders everything in this' image to `renderer`, but first transforming the given `viewport`
-    // such that its transform is `transform`. The given `viewport`'s transform is restored before this method
-    // returns.
-    //
-    // For example, rendering with `transform = Mat33.identity` *sets* `viewport`'s transform to `Mat33.identity`,
-    // renders everything in this' image to `renderer`, then restores `viewport`'s transform to whatever it was before.
-    renderAllWithTransform(renderer, viewport, transform = Mat33.identity) {
-        const origTransform = this.importExportViewport.canvasToScreenTransform;
-        viewport.resetTransform(transform);
-        this.image.renderAll(renderer);
-        viewport.resetTransform(origTransform);
-    }
     loadFrom(loader) {
         return __awaiter(this, void 0, void 0, function* () {
             this.showLoadingWarning(0);

package/dist/src/EditorImage.d.ts

@@ -27,7 +27,7 @@ export default class EditorImage {
     static addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
     private static AddElementCommand;
 }
-declare type TooSmallToRenderCheck = (rect: Rect2) => boolean;
+type TooSmallToRenderCheck = (rect: Rect2) => boolean;
 /** Part of the Editor's image. @internal */
 export declare class ImageNode {
     private parent;

package/dist/src/EventDispatcher.d.ts

@@ -15,7 +15,7 @@
  *
  * @packageDocumentation
  */
-declare type CallbackHandler<EventType> = (data: EventType) => void;
+type CallbackHandler<EventType> = (data: EventType) => void;
 export default class EventDispatcher<EventKeyType extends string | symbol | number, EventMessageType> {
     private listeners;
     constructor();

package/dist/src/SVGLoader.d.ts

@@ -3,8 +3,8 @@ import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnP
 export declare const defaultSVGViewRect: Rect2;
 export declare const svgAttributesDataKey = "svgAttrs";
 export declare const svgStyleAttributesDataKey = "svgStyleAttrs";
-export declare type SVGLoaderUnknownAttribute = [string, string];
-export declare type SVGLoaderUnknownStyleAttribute = {
+export type SVGLoaderUnknownAttribute = [string, string];
+export type SVGLoaderUnknownStyleAttribute = {
     key: string;
     value: string;
     priority?: string;

package/dist/src/SVGLoader.js

@@ -11,7 +11,7 @@ import Color4 from './Color4';
 import ImageComponent from './components/ImageComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
-import TextComponent from './components/Text';
+import TextComponent from './components/TextComponent';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Mat33 from './math/Mat33';
 import Path from './math/Path';

package/dist/src/UndoRedoHistory.d.ts

@@ -1,7 +1,7 @@
 import Editor from './Editor';
 import Command from './commands/Command';
-declare type AnnounceRedoCallback = (command: Command) => void;
-declare type AnnounceUndoCallback = (command: Command) => void;
+type AnnounceRedoCallback = (command: Command) => void;
+type AnnounceUndoCallback = (command: Command) => void;
 declare class UndoRedoHistory {
     private readonly editor;
     private announceRedoCallback;

package/dist/src/Viewport.d.ts

@@ -4,7 +4,7 @@ import Rect2 from './math/Rect2';
 import { Point2, Vec2 } from './math/Vec2';
 import { StrokeDataPoint } from './types';
 import { EditorNotifier } from './types';
-declare type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
+type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
 export declare abstract class ViewportTransform extends Command {
     abstract readonly transform: Mat33;
 }

package/dist/src/Viewport.js

@@ -128,9 +128,7 @@ export class Viewport {
         // Ensure that toMakeVisible is at least 1/3rd of the visible region.
         const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 1 / 3;
         if ((largerThanTarget && allowZoomOut) || (muchSmallerThanTarget && allowZoomIn)) {
-            // If larger than the target, ensure that the longest axis is visible.
-            // If smaller, shrink the visible rectangle as much as possible
-            const multiplier = (largerThanTarget ? Math.max : Math.min)(toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h);
+            const multiplier = Math.max(toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h);
             const visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);
             const viewportContentTransform = visibleRectTransform.inverse();
             transform = transform.rightMul(viewportContentTransform);

package/dist/src/commands/Command.d.ts

@@ -1,8 +1,8 @@
 import Editor from '../Editor';
 import { EditorLocalization } from '../localization';
 export declare abstract class Command {
-    abstract apply(editor: Editor): void;
-    abstract unapply(editor: Editor): void;
+    abstract apply(editor: Editor): Promise<void> | void;
+    abstract unapply(editor: Editor): Promise<void> | void;
     onDrop(_editor: Editor): void;
     abstract description(editor: Editor, localizationTable: EditorLocalization): string;
     static union(a: Command, b: Command): Command;

package/dist/src/commands/SerializableCommand.d.ts

@@ -1,6 +1,6 @@
 import Editor from '../Editor';
 import Command from './Command';
-export declare type DeserializationCallback = (data: Record<string, any> | any[], editor: Editor) => SerializableCommand;
+export type DeserializationCallback = (data: Record<string, any> | any[], editor: Editor) => SerializableCommand;
 export default abstract class SerializableCommand extends Command {
     private commandTypeId;
     constructor(commandTypeId: string);

package/dist/src/commands/uniteCommands.js

@@ -6,24 +6,33 @@ class NonSerializableUnion extends Command {
         this.commands = commands;
         this.applyChunkSize = applyChunkSize;
     }
+    static waitForAll(commands) {
+        // If any are Promises...
+        if (commands.some(command => command && command['then'])) {
+            console.log('waiting...');
+            // Wait for all commands to finish.
+            return Promise.all(commands)
+                // Ensure we return a Promise<void> and not a Promise<void[]>
+                .then(() => { });
+        }
+        return;
+    }
     apply(editor) {
         if (this.applyChunkSize === undefined) {
-            for (const command of this.commands) {
-                command.apply(editor);
-            }
+            const results = this.commands.map(cmd => cmd.apply(editor));
+            return NonSerializableUnion.waitForAll(results);
         }
         else {
-            editor.asyncApplyCommands(this.commands, this.applyChunkSize);
+            return editor.asyncApplyCommands(this.commands, this.applyChunkSize);
         }
     }
     unapply(editor) {
         if (this.applyChunkSize === undefined) {
-            for (const command of this.commands) {
-                command.unapply(editor);
-            }
+            const results = this.commands.map(cmd => cmd.unapply(editor));
+            return NonSerializableUnion.waitForAll(results);
         }
         else {
-            editor.asyncUnapplyCommands(this.commands, this.applyChunkSize);
+            return editor.asyncUnapplyCommands(this.commands, this.applyChunkSize);
         }
     }
     description(editor, localizationTable) {
@@ -63,10 +72,10 @@ class SerializableUnion extends SerializableCommand {
         };
     }
     apply(editor) {
-        this.nonserializableCommand.apply(editor);
+        return this.nonserializableCommand.apply(editor);
     }
     unapply(editor) {
-        this.nonserializableCommand.unapply(editor);
+        return this.nonserializableCommand.unapply(editor);
     }
     description(editor, localizationTable) {
         return this.nonserializableCommand.description(editor, localizationTable);

package/dist/src/components/AbstractComponent.d.ts

@@ -4,9 +4,9 @@ import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
-export declare type LoadSaveData = (string[] | Record<symbol, string | number>);
-export declare type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
-export declare type DeserializeCallback = (data: string) => AbstractComponent;
+export type LoadSaveData = (string[] | Record<symbol, string | number>);
+export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
+export type DeserializeCallback = (data: string) => AbstractComponent;
 export default abstract class AbstractComponent {
     private readonly componentKind;
     protected lastChangedTime: number;

package/dist/src/components/SVGGlobalAttributesObject.d.ts

@@ -4,7 +4,7 @@ import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
-declare type GlobalAttrsList = Array<[string, string | null]>;
+type GlobalAttrsList = Array<[string, string | null]>;
 export default class SVGGlobalAttributesObject extends AbstractComponent {
     private readonly attrs;
     protected contentBBox: Rect2;

package/dist/src/components/builders/FreehandLineBuilder.d.ts

@@ -24,7 +24,9 @@ export default class FreehandLineBuilder implements ComponentBuilder {
     private previewStroke;
     preview(renderer: AbstractRenderer): void;
     build(): Stroke;
+    private getMinFit;
     private roundPoint;
+    private roundDistance;
     private curveToPathCommands;
     private addCurve;
     addPoint(newPoint: StrokeDataPoint): void;

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -33,7 +33,7 @@ export default class FreehandLineBuilder {
             fill: Color4.transparent,
             stroke: {
                 color: this.startPoint.color,
-                width: this.averageWidth,
+                width: this.roundDistance(this.averageWidth),
             }
         };
     }
@@ -76,13 +76,21 @@ export default class FreehandLineBuilder {
         this.curveFitter.finalizeCurrentCurve();
         return this.previewStroke();
     }
-    roundPoint(point) {
+    getMinFit() {
         let minFit = Math.min(this.minFitAllowed, this.averageWidth / 2);
         if (minFit < 1e-10) {
             minFit = this.minFitAllowed;
         }
+        return minFit;
+    }
+    roundPoint(point) {
+        const minFit = this.getMinFit();
         return Viewport.roundPoint(point, minFit);
     }
+    roundDistance(dist) {
+        const minFit = this.getMinFit();
+        return Viewport.roundPoint(dist, minFit);
+    }
     curveToPathCommands(curve) {
         // Case where no points have been added
         if (!curve) {

package/dist/src/components/builders/types.d.ts

@@ -9,4 +9,4 @@ export interface ComponentBuilder {
     preview(renderer: AbstractRenderer): void;
     addPoint(point: StrokeDataPoint): void;
 }
-export declare type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport) => ComponentBuilder;
+export type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport) => ComponentBuilder;

package/dist/src/components/lib.d.ts

@@ -5,6 +5,6 @@ export { default as StrokeSmoother, Curve as StrokeSmootherCurve } from './util/
 export * from './AbstractComponent';
 export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
-import TextComponent from './Text';
+import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 export { Stroke, TextComponent as Text, TextComponent as TextComponent, Stroke as StrokeComponent, ImageComponent, };

package/dist/src/components/lib.js

@@ -5,6 +5,6 @@ export { default as StrokeSmoother } from './util/StrokeSmoother';
 export * from './AbstractComponent';
 export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
-import TextComponent from './Text';
+import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 export { Stroke, TextComponent as Text, TextComponent as TextComponent, Stroke as StrokeComponent, ImageComponent, };

package/dist/src/components/util/StrokeSmoother.d.ts

@@ -8,7 +8,7 @@ export interface Curve {
     endWidth: number;
     endPoint: Vec2;
 }
-declare type OnCurveAddedCallback = (curve: Curve | null) => void;
+type OnCurveAddedCallback = (curve: Curve | null) => void;
 export declare class StrokeSmoother {
     private startPoint;
     private minFitAllowed;

package/dist/src/math/Mat33.d.ts

@@ -1,6 +1,6 @@
 import { Point2, Vec2 } from './Vec2';
 import Vec3 from './Vec3';
-export declare type Mat33Array = [
+export type Mat33Array = [
     number,
     number,
     number,

package/dist/src/math/Path.d.ts

@@ -30,7 +30,7 @@ export interface MoveToPathCommand {
     kind: PathCommandType.MoveTo;
     point: Point2;
 }
-export declare type PathCommand = CubicBezierPathCommand | LinePathCommand | QuadraticBezierPathCommand | MoveToPathCommand;
+export type PathCommand = CubicBezierPathCommand | LinePathCommand | QuadraticBezierPathCommand | MoveToPathCommand;
 interface IntersectionResult {
     curve: LineSegment2 | Bezier;
     parameterValue: number;

package/dist/src/math/Vec2.d.ts

@@ -9,5 +9,5 @@ export declare namespace Vec2 {
     const unitY: Vec3;
     const zero: Vec3;
 }
-export declare type Point2 = Vec3;
-export declare type Vec2 = Vec3;
+export type Point2 = Vec3;
+export type Vec2 = Vec3;

package/dist/src/rendering/caching/testUtils.d.ts

@@ -1,7 +1,7 @@
 import DummyRenderer from '../renderers/DummyRenderer';
 import RenderingCache from './RenderingCache';
 import { CacheProps } from './types';
-declare type RenderAllocCallback = (renderer: DummyRenderer) => void;
+type RenderAllocCallback = (renderer: DummyRenderer) => void;
 export declare const createCache: (onRenderAlloc?: RenderAllocCallback, cacheOptions?: Partial<CacheProps>) => {
     cache: RenderingCache;
     editor: import("../../Editor").Editor;

package/dist/src/rendering/caching/types.d.ts

@@ -1,8 +1,8 @@
 import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { CacheRecordManager } from './CacheRecordManager';
-export declare type CacheAddress = number;
-export declare type BeforeDeallocCallback = () => void;
+export type CacheAddress = number;
+export type BeforeDeallocCallback = () => void;
 export interface CacheProps {
     createRenderer(): AbstractRenderer;
     isOfCorrectType(renderer: AbstractRenderer): boolean;

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

@@ -1,5 +1,5 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Path, { PathCommand } from '../../math/Path';
 import Rect2 from '../../math/Rect2';

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

@@ -1,4 +1,4 @@
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';

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

@@ -1,5 +1,5 @@
 import Color4 from '../../Color4';
-import TextComponent from '../../components/Text';
+import TextComponent from '../../components/TextComponent';
 import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {

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

@@ -1,4 +1,4 @@
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';

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

@@ -1,5 +1,5 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';

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

@@ -87,7 +87,7 @@ export default class SVGRenderer extends AbstractRenderer {
         }
         if (style.stroke) {
             pathElem.setAttribute('stroke', style.stroke.color.toHexString());
-            pathElem.setAttribute('stroke-width', style.stroke.width.toString());
+            pathElem.setAttribute('stroke-width', toRoundedString(style.stroke.width));
         }
         this.elem.appendChild(pathElem);
         (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);

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

@@ -1,4 +1,4 @@
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import Vec3 from '../../math/Vec3';

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

@@ -22,8 +22,8 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     getDescription() {
         return [
             this.localizationTable.pathNodeCount(this.pathCount),
-            ...(this.textNodeCount > 0 ? this.localizationTable.textNodeCount(this.textNodeCount) : []),
-            ...(this.imageNodeCount > 0 ? this.localizationTable.imageNodeCount(this.imageNodeCount) : []),
+            ...(this.textNodeCount > 0 ? [this.localizationTable.textNodeCount(this.textNodeCount)] : []),
+            ...(this.imageNodeCount > 0 ? [this.localizationTable.imageNodeCount(this.imageNodeCount)] : []),
             ...this.descriptionBuilder
         ].join('\n');
     }

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

@@ -1,8 +1,8 @@
 import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
-import { TextStyle } from '../components/Text';
+import { TextStyle } from '../components/TextComponent';
 import Pen from '../tools/Pen';
-declare type IconType = SVGSVGElement | HTMLImageElement;
+type IconType = SVGSVGElement | HTMLImageElement;
 export default class IconProvider {
     makeUndoIcon(): IconType;
     makeRedoIcon(mirror?: boolean): IconType;

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

@@ -1,5 +1,6 @@
 export interface ToolbarLocalization {
     fontLabel: string;
+    textSize: string;
     touchPanning: string;
     lockRotation: string;
     outlinedRectanglePen: string;

package/dist/src/toolbar/localization.js

@@ -8,6 +8,7 @@ export const defaultToolbarLocalization = {
     thicknessLabel: 'Thickness: ',
     colorLabel: 'Color: ',
     fontLabel: 'Font: ',
+    textSize: 'Size: ',
     resizeImageToSelection: 'Resize image to selection',
     deleteSelection: 'Delete selection',
     duplicateSelection: 'Duplicate selection',

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

@@ -1,6 +1,6 @@
 import Color4 from '../Color4';
 import Editor from '../Editor';
-declare type OnColorChangeListener = (color: Color4) => void;
-declare type SetColorCallback = (color: Color4 | string) => void;
+type OnColorChangeListener = (color: Color4) => void;
+type SetColorCallback = (color: Color4 | string) => void;
 export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => [HTMLInputElement, HTMLElement, SetColorCallback];
 export default makeColorInput;

package/dist/src/toolbar/widgets/BaseWidget.d.ts

@@ -1,7 +1,7 @@
 import Editor from '../../Editor';
 import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
-export declare type SavedToolbuttonState = Record<string, any>;
+export type SavedToolbuttonState = Record<string, any>;
 export default abstract class BaseWidget {
     #private;
     protected editor: Editor;

package/dist/src/toolbar/widgets/TextToolWidget.js

@@ -26,8 +26,11 @@ export default class TextToolWidget extends BaseToolWidget {
     fillDropdown(dropdown) {
         const fontRow = document.createElement('div');
         const colorRow = document.createElement('div');
+        const sizeRow = document.createElement('div');
         const fontInput = document.createElement('select');
         const fontLabel = document.createElement('label');
+        const sizeInput = document.createElement('input');
+        const sizeLabel = document.createElement('label');
         const [colorInput, colorInputContainer, setColorInputValue] = makeColorInput(this.editor, color => {
             this.tool.setColor(color);
         });
@@ -40,10 +43,16 @@ export default class TextToolWidget extends BaseToolWidget {
             fontInput.appendChild(option);
             fontsInInput.add(fontName);
         };
+        sizeInput.setAttribute('type', 'number');
+        sizeInput.min = '1';
+        sizeInput.max = '128';
         fontLabel.innerText = this.localizationTable.fontLabel;
         colorLabel.innerText = this.localizationTable.colorLabel;
+        sizeLabel.innerText = this.localizationTable.textSize;
         colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
         colorLabel.setAttribute('for', colorInput.id);
+        sizeInput.id = `${toolbarCSSPrefix}-text-size-input-${TextToolWidget.idCounter++}`;
+        sizeLabel.setAttribute('for', sizeInput.id);
         addFontToInput('monospace');
         addFontToInput('serif');
         addFontToInput('sans-serif');
@@ -52,10 +61,18 @@ export default class TextToolWidget extends BaseToolWidget {
         fontInput.onchange = () => {
             this.tool.setFontFamily(fontInput.value);
         };
+        sizeInput.onchange = () => {
+            const size = parseInt(sizeInput.value);
+            if (!isNaN(size) && size > 0) {
+                this.tool.setFontSize(size);
+            }
+        };
         colorRow.appendChild(colorLabel);
         colorRow.appendChild(colorInputContainer);
         fontRow.appendChild(fontLabel);
         fontRow.appendChild(fontInput);
+        sizeRow.appendChild(sizeLabel);
+        sizeRow.appendChild(sizeInput);
         this.updateDropdownInputs = () => {
             const style = this.tool.getTextStyle();
             setColorInputValue(style.renderingStyle.fill);
@@ -63,14 +80,15 @@ export default class TextToolWidget extends BaseToolWidget {
                 addFontToInput(style.fontFamily);
             }
             fontInput.value = style.fontFamily;
+            sizeInput.value = `${style.size}`;
         };
         this.updateDropdownInputs();
-        dropdown.replaceChildren(colorRow, fontRow);
+        dropdown.replaceChildren(colorRow, sizeRow, fontRow);
         return true;
     }
     serializeState() {
         const textStyle = this.tool.getTextStyle();
-        return Object.assign(Object.assign({}, super.serializeState()), { fontFamily: textStyle.fontFamily, color: textStyle.renderingStyle.fill.toHexString() });
+        return Object.assign(Object.assign({}, super.serializeState()), { fontFamily: textStyle.fontFamily, textSize: textStyle.size, color: textStyle.renderingStyle.fill.toHexString() });
     }
     deserializeFrom(state) {
         if (state.fontFamily && typeof (state.fontFamily) === 'string') {
@@ -79,6 +97,9 @@ export default class TextToolWidget extends BaseToolWidget {
         if (state.color && typeof (state.color) === 'string') {
             this.tool.setColor(Color4.fromHex(state.color));
         }
+        if (state.textSize && typeof (state.textSize) === 'number') {
+            this.tool.setFontSize(state.textSize);
+        }
         super.deserializeFrom(state);
     }
 }

package/dist/src/tools/BaseTool.js

@@ -1,15 +1,15 @@
 import { EditorEventType } from '../types';
 export default class BaseTool {
+    onPointerDown(_event) { return false; }
+    onPointerMove(_event) { }
+    onPointerUp(_event) { }
+    onGestureCancel() { }
     constructor(notifier, description) {
         this.notifier = notifier;
         this.description = description;
         this.enabled = true;
         this.group = null;
     }
-    onPointerDown(_event) { return false; }
-    onPointerMove(_event) { }
-    onPointerUp(_event) { }
-    onGestureCancel() { }
     onWheel(_event) {
         return false;
     }

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

@@ -0,0 +1,21 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+export declare const cssPrefix = "find-tool";
+export default class FindTool extends BaseTool {
+    private editor;
+    private overlay;
+    private searchInput;
+    private currentMatchIdx;
+    constructor(editor: Editor);
+    private getMatches;
+    private focusCurrentMatch;
+    private toNextMatch;
+    private toPrevMatch;
+    private fillOverlay;
+    private isVisible;
+    private setVisible;
+    private toggleVisible;
+    onKeyPress(event: KeyPressEvent): boolean;
+    setEnabled(enabled: boolean): void;
+}