js-draw 0.9.3 → 0.10.1

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.js

@@ -77,7 +77,7 @@ export default class FreehandLineBuilder {
         return this.previewStroke();
     }
     getMinFit() {
-        let minFit = Math.min(this.minFitAllowed, this.averageWidth / 2);
+        let minFit = Math.min(this.minFitAllowed, this.averageWidth / 3);
         if (minFit < 1e-10) {
             minFit = this.minFitAllowed;
         }
@@ -98,7 +98,8 @@ 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));
+            // Make the circle small -- because of the stroke style, we'll be drawing a stroke around it.
+            const width = Viewport.roundPoint(this.averageWidth / 10, Math.min(this.minFitAllowed, this.averageWidth / 10));
             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;
         }
@@ -209,7 +209,7 @@ export default class PressureSensitiveFreehandLineBuilder {
             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 / 2.2, Math.min(this.minFitAllowed, this.startPoint.width / 4));
             const center = this.roundPoint(this.startPoint.pos);
             // Start on the right, cycle clockwise:
             //    |

package/dist/src/components/util/StrokeSmoother.js

@@ -113,7 +113,7 @@ export class StrokeSmoother {
         const lastPoint = (_a = this.lastPoint) !== null && _a !== void 0 ? _a : newPoint;
         this.lastPoint = newPoint;
         this.buffer.push(newPoint.pos);
-        const pointRadius = newPoint.width / 2;
+        const pointRadius = newPoint.width;
         const prevEndWidth = this.curveEndWidth;
         this.curveEndWidth = pointRadius;
         if (this.isFirstSegment) {
@@ -128,7 +128,7 @@ export class StrokeSmoother {
             const p3 = newPoint.pos;
             // Quadratic Bézier curve
             this.currentCurve = new Bezier(p1.xy, p2.xy, p3.xy);
-            this.curveStartWidth = lastPoint.width / 2;
+            this.curveStartWidth = lastPoint.width;
             console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
         }
         // If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
@@ -190,7 +190,7 @@ export class StrokeSmoother {
             }
             return true;
         };
-        if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth) {
+        if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth / 2) {
             if (!curveMatchesPoints(this.currentCurve)) {
                 // Use a curve that better fits the points
                 this.currentCurve = prevCurve;

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();
     }
@@ -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/IconProvider.d.ts

@@ -20,7 +20,7 @@ export default class IconProvider {
     makeZoomIcon(): IconType;
     makeRotationLockIcon(): IconType;
     makeTextIcon(textStyle: TextStyle): IconType;
-    makePenIcon(tipThickness: number, color: string | Color4): IconType;
+    makePenIcon(tipThickness: number, color: string | Color4, roundedTip?: boolean): IconType;
     makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
     makePipetteIcon(color?: Color4): IconType;
     makeResizeViewportIcon(): IconType;

package/dist/src/toolbar/IconProvider.js

@@ -302,7 +302,7 @@ export default class IconProvider {
         icon.appendChild(textNode);
         return icon;
     }
-    makePenIcon(tipThickness, color) {
+    makePenIcon(tipThickness, color, roundedTip) {
         if (color instanceof Color4) {
             color = color.toHexString();
         }
@@ -310,8 +310,16 @@ export default class IconProvider {
         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`;
+        const penTipLeft = 50 - halfThickness;
+        const penTipRight = 50 + halfThickness;
+        let tipCenterPrimaryPath = `L${penTipLeft},95 L${penTipRight},90`;
+        let tipCenterBackgroundPath = `L${penTipLeft},85 L${penTipRight},83`;
+        if (roundedTip) {
+            tipCenterPrimaryPath = `L${penTipLeft},95 q${halfThickness},10 ${2 * halfThickness},-5`;
+            tipCenterBackgroundPath = `L${penTipLeft},87 q${halfThickness},10 ${2 * halfThickness},-3`;
+        }
+        const primaryStrokeTipPath = `M14,63 ${tipCenterPrimaryPath} L88,60 Z`;
+        const backgroundStrokeTipPath = `M14,63 ${tipCenterBackgroundPath} L88,60 Z`;
         icon.innerHTML = `
 		<defs>
 			${checkerboardPatternDef}

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/PenToolWidget.js

@@ -87,7 +87,8 @@ export default class PenToolWidget extends BaseToolWidget {
             // Use a square-root scale to prevent the pen's tip from overflowing.
             const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
             const color = this.tool.getColor();
-            return this.editor.icons.makePenIcon(scale, color.toHexString());
+            const roundedTip = strokeFactory === makeFreehandLineBuilder;
+            return this.editor.icons.makePenIcon(scale, color.toHexString(), roundedTip);
         }
         else {
             const strokeFactory = this.tool.getStrokeFactory();

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;