js-draw 0.9.2 → 0.10.0

package/dist/src/Color4.d.ts

@@ -30,6 +30,7 @@ export default class Color4 {
      * ```
      */
     toHexString(): string;
+    toString(): string;
     static transparent: Color4;
     static red: Color4;
     static green: Color4;

package/dist/src/Color4.js

@@ -63,24 +63,40 @@ export default class Color4 {
         if (text.startsWith('#')) {
             return Color4.fromHex(text);
         }
-        else if (text === 'none' || text === 'transparent') {
+        if (text === 'none' || text === 'transparent') {
             return Color4.transparent;
         }
-        else {
-            // Otherwise, try to use an HTML5Canvas to determine the color
-            const canvas = document.createElement('canvas');
-            canvas.width = 1;
-            canvas.height = 1;
-            const ctx = canvas.getContext('2d');
-            ctx.fillStyle = text;
-            ctx.fillRect(0, 0, 1, 1);
-            const data = ctx.getImageData(0, 0, 1, 1);
-            const red = data.data[0] / 255;
-            const green = data.data[1] / 255;
-            const blue = data.data[2] / 255;
-            const alpha = data.data[3] / 255;
-            return Color4.ofRGBA(red, green, blue, alpha);
+        // rgba?: Match both rgb and rgba strings.
+        // ([,0-9.]+): Match any string of only numeric, '.' and ',' characters.
+        const rgbRegex = /^rgba?\(([,0-9.]+)\)$/i;
+        const rgbMatch = text.replace(/\s*/g, '').match(rgbRegex);
+        if (rgbMatch) {
+            const componentsListStr = rgbMatch[1];
+            const componentsList = JSON.parse(`[ ${componentsListStr} ]`);
+            if (componentsList.length === 3) {
+                return Color4.ofRGB(componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255);
+            }
+            else if (componentsList.length === 4) {
+                return Color4.ofRGBA(componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255, componentsList[3]);
+            }
+            else {
+                throw new Error(`RGB string, ${text}, has wrong number of components: ${componentsList.length}`);
+            }
         }
+        // Otherwise, try to use an HTMLCanvasElement to determine the color.
+        // Note: We may be unable to create an HTMLCanvasElement if running as a unit test.
+        const canvas = document.createElement('canvas');
+        canvas.width = 1;
+        canvas.height = 1;
+        const ctx = canvas.getContext('2d');
+        ctx.fillStyle = text;
+        ctx.fillRect(0, 0, 1, 1);
+        const data = ctx.getImageData(0, 0, 1, 1);
+        const red = data.data[0] / 255;
+        const green = data.data[1] / 255;
+        const blue = data.data[2] / 255;
+        const alpha = data.data[3] / 255;
+        return Color4.ofRGBA(red, green, blue, alpha);
     }
     /** @returns true if `this` and `other` are approximately equal. */
     eq(other) {
@@ -118,6 +134,9 @@ export default class Color4 {
         this.hexString = `#${red}${green}${blue}${alpha}`;
         return this.hexString;
     }
+    toString() {
+        return this.toHexString();
+    }
 }
 Color4.transparent = Color4.ofRGBA(0, 0, 0, 0);
 Color4.red = Color4.ofRGB(1.0, 0.0, 0.0);

package/dist/src/Editor.js

@@ -44,6 +44,7 @@ import getLocalizationTable from './localizations/getLocalizationTable';
 import IconProvider from './toolbar/IconProvider';
 import { toRoundedString } from './math/rounding';
 import CanvasRenderer from './rendering/renderers/CanvasRenderer';
+import untilNextAnimationFrame from './util/untilNextAnimationFrame';
 // { @inheritDoc Editor! }
 export class Editor {
     /**
@@ -676,9 +677,7 @@ export class Editor {
                 if (countProcessed % 500 === 0) {
                     this.showLoadingWarning(countProcessed / totalToProcess);
                     this.rerender();
-                    return new Promise(resolve => {
-                        requestAnimationFrame(() => resolve());
-                    });
+                    return untilNextAnimationFrame();
                 }
                 return null;
             }, (importExportRect) => {

package/dist/src/SVGLoader.js

@@ -34,12 +34,14 @@ export default class SVGLoader {
         this.processedCount = 0;
         this.totalToProcess = 0;
     }
-    getStyle(node) {
-        var _a, _b, _c;
+    // If [computedStyles] is given, it is preferred to directly accessing node's style object.
+    getStyle(node, computedStyles) {
+        var _a, _b, _c, _d, _f, _g;
         const style = {
             fill: Color4.transparent,
         };
-        const fillAttribute = (_a = node.getAttribute('fill')) !== null && _a !== void 0 ? _a : node.style.fill;
+        // If possible, use computedStyles (allows property inheritance).
+        const fillAttribute = (_b = (_a = node.getAttribute('fill')) !== null && _a !== void 0 ? _a : computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.fill) !== null && _b !== void 0 ? _b : node.style.fill;
         if (fillAttribute) {
             try {
                 style.fill = Color4.fromString(fillAttribute);
@@ -48,18 +50,21 @@ export default class SVGLoader {
                 console.error('Unknown fill color,', fillAttribute);
             }
         }
-        const strokeAttribute = (_b = node.getAttribute('stroke')) !== null && _b !== void 0 ? _b : node.style.stroke;
-        const strokeWidthAttr = (_c = node.getAttribute('stroke-width')) !== null && _c !== void 0 ? _c : node.style.strokeWidth;
-        if (strokeAttribute) {
+        const strokeAttribute = (_d = (_c = node.getAttribute('stroke')) !== null && _c !== void 0 ? _c : computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.stroke) !== null && _d !== void 0 ? _d : node.style.stroke;
+        const strokeWidthAttr = (_g = (_f = node.getAttribute('stroke-width')) !== null && _f !== void 0 ? _f : computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.strokeWidth) !== null && _g !== void 0 ? _g : node.style.strokeWidth;
+        if (strokeAttribute && strokeWidthAttr) {
             try {
                 let width = parseFloat(strokeWidthAttr !== null && strokeWidthAttr !== void 0 ? strokeWidthAttr : '1');
                 if (!isFinite(width)) {
                     width = 0;
                 }
-                style.stroke = {
-                    width,
-                    color: Color4.fromString(strokeAttribute),
-                };
+                const strokeColor = Color4.fromString(strokeAttribute);
+                if (strokeColor.a > 0) {
+                    style.stroke = {
+                        width,
+                        color: strokeColor,
+                    };
+                }
             }
             catch (e) {
                 console.error('Error parsing stroke data:', e);
@@ -188,6 +193,10 @@ export default class SVGLoader {
                 throw new Error(`Unrecognized text child node: ${child}.`);
             }
         }
+        // If no content, the content is an empty string.
+        if (contentList.length === 0) {
+            contentList.push('');
+        }
         // Compute styles.
         const computedStyles = window.getComputedStyle(elem);
         const fontSizeMatch = /^([-0-9.e]+)px/i.exec(computedStyles.fontSize);
@@ -204,7 +213,7 @@ export default class SVGLoader {
         const style = {
             size: fontSize,
             fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
-            renderingStyle: this.getStyle(elem),
+            renderingStyle: this.getStyle(elem, computedStyles),
         };
         const supportedAttrs = [];
         const transform = this.getTransform(elem, supportedAttrs, computedStyles);
@@ -297,6 +306,9 @@ export default class SVGLoader {
                     this.updateViewBox(node);
                     this.updateSVGAttrs(node);
                     break;
+                case 'style':
+                    this.addUnknownNode(node);
+                    break;
                 default:
                     console.warn('Unknown SVG element,', node);
                     if (!(node instanceof SVGElement)) {
@@ -361,6 +373,8 @@ export default class SVGLoader {
 			<html>
 				<head>
 					<title>SVG Loading Sandbox</title>
+					<meta name='viewport' conent='width=device-width,initial-scale=1.0'/>
+					<meta charset='utf-8'/>
 				</head>
 				<body>
 					<script>

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 / 2),
             }
         };
     }
@@ -76,13 +76,21 @@ export default class FreehandLineBuilder {
         this.curveFitter.finalizeCurrentCurve();
         return this.previewStroke();
     }
-    roundPoint(point) {
-        let minFit = Math.min(this.minFitAllowed, this.averageWidth / 2);
+    getMinFit() {
+        let minFit = Math.min(this.minFitAllowed, this.averageWidth / 5);
         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) {
@@ -90,7 +98,7 @@ export default class FreehandLineBuilder {
             if (!this.isFirstSegment) {
                 return [];
             }
-            const width = Viewport.roundPoint(this.startPoint.width / 3.5, Math.min(this.minFitAllowed, this.startPoint.width / 4));
+            const width = Viewport.roundPoint(this.startPoint.width / 9, Math.min(this.minFitAllowed, this.startPoint.width / 5));
             const center = this.roundPoint(this.startPoint.pos);
             // Start on the right, cycle clockwise:
             //    |

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

@@ -141,7 +141,7 @@ export default class PressureSensitiveFreehandLineBuilder {
         return this.previewStroke();
     }
     roundPoint(point) {
-        let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 2);
+        let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 3);
         if (minFit < 1e-10) {
             minFit = this.minFitAllowed;
         }

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

@@ -24,6 +24,7 @@ export default class SVGRenderer extends AbstractRenderer {
     private transformFrom;
     private textContainer;
     private textContainerTransform;
+    private textParentStyle;
     drawText(text: string, transform: Mat33, style: TextStyle): void;
     drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2): void;

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

@@ -18,6 +18,7 @@ export default class SVGRenderer extends AbstractRenderer {
         this.overwrittenAttrs = {};
         this.textContainer = null;
         this.textContainerTransform = null;
+        this.textParentStyle = null;
         this.clear();
         this.addStyleSheet();
     }
@@ -87,7 +88,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);
@@ -130,12 +131,26 @@ export default class SVGRenderer extends AbstractRenderer {
     drawText(text, transform, style) {
         var _a;
         const applyTextStyles = (elem, style) => {
-            var _a, _b;
-            elem.style.fontFamily = style.fontFamily;
-            elem.style.fontVariant = (_a = style.fontVariant) !== null && _a !== void 0 ? _a : '';
-            elem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
-            elem.style.fontSize = style.size + 'px';
-            elem.style.fill = style.renderingStyle.fill.toHexString();
+            var _a, _b, _c, _d, _e, _f;
+            if (style.fontFamily !== ((_a = this.textParentStyle) === null || _a === void 0 ? void 0 : _a.fontFamily)) {
+                elem.style.fontFamily = style.fontFamily;
+            }
+            if (style.fontVariant !== ((_b = this.textParentStyle) === null || _b === void 0 ? void 0 : _b.fontVariant)) {
+                elem.style.fontVariant = (_c = style.fontVariant) !== null && _c !== void 0 ? _c : '';
+            }
+            if (style.fontWeight !== ((_d = this.textParentStyle) === null || _d === void 0 ? void 0 : _d.fontWeight)) {
+                elem.style.fontWeight = (_e = style.fontWeight) !== null && _e !== void 0 ? _e : '';
+            }
+            if (style.size !== ((_f = this.textParentStyle) === null || _f === void 0 ? void 0 : _f.size)) {
+                elem.style.fontSize = style.size + 'px';
+            }
+            const fillString = style.renderingStyle.fill.toHexString();
+            // TODO: Uncomment at some future major version release --- currently causes incompatibility due
+            //       to an SVG parsing bug in older versions.
+            //const parentFillString = this.textParentStyle?.renderingStyle?.fill?.toHexString();
+            //if (fillString !== parentFillString) {
+            elem.style.fill = fillString;
+            //}
             if (style.renderingStyle.stroke) {
                 const strokeStyle = style.renderingStyle.stroke;
                 elem.style.stroke = strokeStyle.color.toHexString();
@@ -156,6 +171,7 @@ export default class SVGRenderer extends AbstractRenderer {
             if (this.objectLevel > 0) {
                 this.textContainer = container;
                 this.textContainerTransform = transform;
+                this.textParentStyle = style;
             }
         }
         else {
@@ -188,6 +204,7 @@ export default class SVGRenderer extends AbstractRenderer {
         this.lastPathString = [];
         this.lastPathStyle = null;
         this.textContainer = null;
+        this.textParentStyle = null;
         this.objectElems = [];
     }
     endObject(loaderData) {

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

@@ -16,7 +16,12 @@ export default class HTMLToolbar {
     addWidget(widget: BaseWidget): void;
     serializeState(): string;
     deserializeState(state: string): void;
-    addActionButton(title: string | ActionButtonIcon, command: () => void, parent?: Element): HTMLButtonElement;
+    /**
+     * Adds an action button with `title` to this toolbar (or to the given `parent` element).
+     *
+     * @return The added button.
+     */
+    addActionButton(title: string | ActionButtonIcon, command: () => void): BaseWidget;
     addUndoRedoButtons(): void;
     addDefaultToolWidgets(): void;
     addDefaultActionButtons(): void;

package/dist/src/toolbar/HTMLToolbar.js

@@ -12,6 +12,7 @@ import EraserWidget from './widgets/EraserToolWidget';
 import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
+import { ActionButtonWidget } from './lib';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
     /** @internal */
@@ -122,49 +123,45 @@ export default class HTMLToolbar {
             this.widgets[widgetId].deserializeFrom(data[widgetId]);
         }
     }
-    addActionButton(title, command, parent) {
-        const button = document.createElement('button');
-        button.classList.add(`${toolbarCSSPrefix}button`);
-        if (typeof title === 'string') {
-            button.innerText = title;
-        }
-        else {
-            const iconElem = title.icon.cloneNode(true);
-            const labelElem = document.createElement('label');
-            // Use the label to describe the icon -- no additional description should be necessary.
-            iconElem.setAttribute('alt', '');
-            labelElem.innerText = title.label;
-            iconElem.classList.add('toolbar-icon');
-            button.replaceChildren(iconElem, labelElem);
-        }
-        button.onclick = command;
-        (parent !== null && parent !== void 0 ? parent : this.container).appendChild(button);
-        return button;
+    /**
+     * Adds an action button with `title` to this toolbar (or to the given `parent` element).
+     *
+     * @return The added button.
+     */
+    addActionButton(title, command) {
+        const titleString = typeof title === 'string' ? title : title.label;
+        const widgetId = 'action-button';
+        const makeIcon = () => {
+            if (typeof title === 'string') {
+                return null;
+            }
+            return title.icon;
+        };
+        const widget = new ActionButtonWidget(this.editor, widgetId, makeIcon, titleString, command, this.editor.localization);
+        this.addWidget(widget);
+        return widget;
     }
     addUndoRedoButtons() {
-        const undoRedoGroup = document.createElement('div');
-        undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
         const undoButton = this.addActionButton({
             label: this.localizationTable.undo,
             icon: this.editor.icons.makeUndoIcon()
         }, () => {
             this.editor.history.undo();
-        }, undoRedoGroup);
+        });
         const redoButton = this.addActionButton({
             label: this.localizationTable.redo,
             icon: this.editor.icons.makeRedoIcon(),
         }, () => {
             this.editor.history.redo();
-        }, undoRedoGroup);
-        this.container.appendChild(undoRedoGroup);
-        undoButton.disabled = true;
-        redoButton.disabled = true;
+        });
+        undoButton.setDisabled(true);
+        redoButton.setDisabled(true);
         this.editor.notifier.on(EditorEventType.UndoRedoStackUpdated, event => {
             if (event.kind !== EditorEventType.UndoRedoStackUpdated) {
                 throw new Error('Wrong event type!');
             }
-            undoButton.disabled = event.undoStackSize === 0;
-            redoButton.disabled = event.redoStackSize === 0;
+            undoButton.setDisabled(event.undoStackSize === 0);
+            redoButton.setDisabled(event.redoStackSize === 0);
         });
     }
     addDefaultToolWidgets() {

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/widgets/ActionButtonWidget.d.ts

@@ -2,12 +2,12 @@ import Editor from '../../Editor';
 import { ToolbarLocalization } from '../localization';
 import BaseWidget from './BaseWidget';
 export default class ActionButtonWidget extends BaseWidget {
-    protected makeIcon: () => Element;
+    protected makeIcon: () => Element | null;
     protected title: string;
     protected clickAction: () => void;
-    constructor(editor: Editor, id: string, makeIcon: () => Element, title: string, clickAction: () => void, localizationTable?: ToolbarLocalization);
+    constructor(editor: Editor, id: string, makeIcon: () => Element | null, title: string, clickAction: () => void, localizationTable?: ToolbarLocalization);
     protected handleClick(): void;
     protected getTitle(): string;
-    protected createIcon(): Element;
+    protected createIcon(): Element | null;
     protected fillDropdown(_dropdown: HTMLElement): boolean;
 }

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

@@ -29,7 +29,7 @@ export default abstract class BaseWidget {
      */
     getUniqueIdIn(container: Record<string, BaseWidget>): string;
     protected abstract getTitle(): string;
-    protected abstract createIcon(): Element;
+    protected abstract createIcon(): Element | null;
     protected fillDropdown(dropdown: HTMLElement): boolean;
     protected setupActionBtnClickListener(button: HTMLElement): void;
     protected onKeyPress(_event: KeyPressEvent): boolean;

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

@@ -156,11 +156,16 @@ export default class BaseWidget {
         parent.appendChild(this.container);
     }
     updateIcon() {
-        var _a;
+        var _a, _b;
         const newIcon = this.createIcon();
-        (_a = this.icon) === null || _a === void 0 ? void 0 : _a.replaceWith(newIcon);
-        this.icon = newIcon;
-        this.icon.classList.add(`${toolbarCSSPrefix}icon`);
+        if (newIcon) {
+            (_a = this.icon) === null || _a === void 0 ? void 0 : _a.replaceWith(newIcon);
+            this.icon = newIcon;
+            this.icon.classList.add(`${toolbarCSSPrefix}icon`);
+        }
+        else {
+            (_b = this.icon) === null || _b === void 0 ? void 0 : _b.remove();
+        }
     }
     setDisabled(disabled) {
         this.disabled = disabled;

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/PanZoom.d.ts

@@ -24,15 +24,19 @@ export default class PanZoom extends BaseTool {
     private lastAngle;
     private lastDist;
     private lastScreenCenter;
+    private lastTimestamp;
+    private inertialScroller;
+    private velocity;
     constructor(editor: Editor, mode: PanZoomMode, description: string);
     computePinchData(p1: Pointer, p2: Pointer): PinchData;
     private allPointersAreOfType;
     onPointerDown({ allPointers: pointers }: PointerEvt): boolean;
+    private updateVelocity;
     private getCenterDelta;
     private handleTwoFingerMove;
     private handleOneFingerMove;
     onPointerMove({ allPointers }: PointerEvt): void;
-    onPointerUp(_event: PointerEvt): void;
+    onPointerUp(event: PointerEvt): void;
     onGestureCancel(): void;
     private updateTransform;
     onWheel({ delta, screenPos }: WheelEvt): boolean;