js-draw 0.18.1 → 0.19.0

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

@@ -0,0 +1,304 @@
+import  Mat33  from '../../math/Mat33.mjs';
+import  Path  from '../../math/Path.mjs';
+import  { toRoundedString }  from '../../math/rounding.mjs';
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  { svgAttributesDataKey, svgStyleAttributesDataKey }  from '../../SVGLoader.mjs';
+import  AbstractRenderer  from './AbstractRenderer.mjs';
+export const renderedStylesheetId = 'js-draw-style-sheet';
+const svgNameSpace = 'http://www.w3.org/2000/svg';
+/**
+ * Renders onto an `SVGElement`.
+ *
+ * @see {@link Editor.toSVG}
+ */
+export default class SVGRenderer extends AbstractRenderer {
+    /**
+     * Creates a renderer that renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
+     *
+     * `viewport` is used to determine the translation/rotation/scaling/output size of the rendered
+     * data.
+     */
+    constructor(elem, viewport, sanitize = false) {
+        super(viewport);
+        this.elem = elem;
+        this.sanitize = sanitize;
+        this.lastPathStyle = null;
+        this.lastPathString = [];
+        this.objectElems = null;
+        this.overwrittenAttrs = {};
+        this.textContainer = null;
+        this.textContainerTransform = null;
+        this.textParentStyle = null;
+        this.clear();
+        this.addStyleSheet();
+    }
+    addStyleSheet() {
+        if (!this.elem.querySelector(`#${renderedStylesheetId}`)) {
+            // Default to rounded strokes.
+            const styleSheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+            styleSheet.innerHTML = `
+				path {
+					stroke-linecap: round;
+					stroke-linejoin: round;
+				}
+
+				text {
+					white-space: pre;
+				}
+			`.replace(/\s+/g, '');
+            styleSheet.setAttribute('id', renderedStylesheetId);
+            this.elem.appendChild(styleSheet);
+        }
+    }
+    // Sets an attribute on the root SVG element.
+    setRootSVGAttribute(name, value) {
+        if (this.sanitize) {
+            return;
+        }
+        // Make the original value of the attribute restorable on clear
+        if (!(name in this.overwrittenAttrs)) {
+            this.overwrittenAttrs[name] = this.elem.getAttribute(name);
+        }
+        if (value !== null) {
+            this.elem.setAttribute(name, value);
+        }
+        else {
+            this.elem.removeAttribute(name);
+        }
+    }
+    displaySize() {
+        return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
+    }
+    clear() {
+        this.lastPathString = [];
+        if (!this.sanitize) {
+            // Restore all all attributes
+            for (const attrName in this.overwrittenAttrs) {
+                const value = this.overwrittenAttrs[attrName];
+                if (value) {
+                    this.elem.setAttribute(attrName, value);
+                }
+                else {
+                    this.elem.removeAttribute(attrName);
+                }
+            }
+            this.overwrittenAttrs = {};
+        }
+    }
+    // Push [this.fullPath] to the SVG
+    addPathToSVG() {
+        var _a;
+        if (!this.lastPathStyle || this.lastPathString.length === 0) {
+            return;
+        }
+        const pathElem = document.createElementNS(svgNameSpace, 'path');
+        pathElem.setAttribute('d', this.lastPathString.join(' '));
+        const style = this.lastPathStyle;
+        if (style.fill.a > 0) {
+            pathElem.setAttribute('fill', style.fill.toHexString());
+        }
+        else {
+            pathElem.setAttribute('fill', 'none');
+        }
+        if (style.stroke) {
+            pathElem.setAttribute('stroke', style.stroke.color.toHexString());
+            pathElem.setAttribute('stroke-width', toRoundedString(style.stroke.width));
+        }
+        this.elem.appendChild(pathElem);
+        (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
+    }
+    drawPath(pathSpec) {
+        var _a;
+        const style = pathSpec.style;
+        const path = Path.fromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
+        // Try to extend the previous path, if possible
+        if (!style.fill.eq((_a = this.lastPathStyle) === null || _a === void 0 ? void 0 : _a.fill) || this.lastPathString.length === 0) {
+            this.addPathToSVG();
+            this.lastPathStyle = style;
+            this.lastPathString = [];
+        }
+        this.lastPathString.push(path.toString());
+    }
+    // Apply [elemTransform] to [elem]. Uses both a `matrix` and `.x`, `.y` properties if `setXY` is true.
+    // Otherwise, just uses a `matrix`.
+    transformFrom(elemTransform, elem, inCanvasSpace = false, setXY = true) {
+        let transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
+        const translation = transform.transformVec2(Vec2.zero);
+        if (setXY) {
+            transform = transform.rightMul(Mat33.translation(translation.times(-1)));
+        }
+        if (!transform.eq(Mat33.identity)) {
+            elem.style.transform = `matrix(
+				${transform.a1}, ${transform.b1},
+				${transform.a2}, ${transform.b2},
+				${transform.a3}, ${transform.b3}
+			)`;
+        }
+        else {
+            elem.style.transform = '';
+        }
+        if (setXY) {
+            elem.setAttribute('x', `${toRoundedString(translation.x)}`);
+            elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+        }
+    }
+    drawText(text, transform, style) {
+        var _a;
+        const applyTextStyles = (elem, style) => {
+            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();
+                elem.style.strokeWidth = strokeStyle.width + 'px';
+            }
+        };
+        transform = this.getCanvasToScreenTransform().rightMul(transform);
+        if (!this.textContainer) {
+            const container = document.createElementNS(svgNameSpace, 'text');
+            container.appendChild(document.createTextNode(text));
+            // Don't set .x/.y properties (just use .style.transform).
+            // Child nodes aren't translated by .x/.y properties, but are by .style.transform.
+            const setXY = false;
+            this.transformFrom(transform, container, true, setXY);
+            applyTextStyles(container, style);
+            this.elem.appendChild(container);
+            (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(container);
+            if (this.objectLevel > 0) {
+                this.textContainer = container;
+                this.textContainerTransform = transform;
+                this.textParentStyle = style;
+            }
+        }
+        else {
+            const elem = document.createElementNS(svgNameSpace, 'tspan');
+            elem.appendChild(document.createTextNode(text));
+            this.textContainer.appendChild(elem);
+            // Make .x/.y relative to the parent.
+            transform = this.textContainerTransform.inverse().rightMul(transform);
+            // .style.transform does nothing to tspan elements. As such, we need to set x/y:
+            const translation = transform.transformVec2(Vec2.zero);
+            elem.setAttribute('x', `${toRoundedString(translation.x)}`);
+            elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+            applyTextStyles(elem, style);
+        }
+    }
+    drawImage(image) {
+        var _a, _b, _c, _d, _e, _f;
+        let label = (_b = (_a = image.label) !== null && _a !== void 0 ? _a : image.image.getAttribute('aria-label')) !== null && _b !== void 0 ? _b : '';
+        if (label === '') {
+            label = (_c = image.image.getAttribute('alt')) !== null && _c !== void 0 ? _c : '';
+        }
+        const svgImgElem = document.createElementNS(svgNameSpace, 'image');
+        svgImgElem.setAttribute('href', image.base64Url);
+        svgImgElem.setAttribute('width', (_d = image.image.getAttribute('width')) !== null && _d !== void 0 ? _d : '');
+        svgImgElem.setAttribute('height', (_e = image.image.getAttribute('height')) !== null && _e !== void 0 ? _e : '');
+        svgImgElem.setAttribute('aria-label', label);
+        this.transformFrom(image.transform, svgImgElem);
+        this.elem.appendChild(svgImgElem);
+        (_f = this.objectElems) === null || _f === void 0 ? void 0 : _f.push(svgImgElem);
+    }
+    startObject(boundingBox) {
+        super.startObject(boundingBox);
+        // Only accumulate a path within an object
+        this.lastPathString = [];
+        this.lastPathStyle = null;
+        this.textContainer = null;
+        this.textParentStyle = null;
+        this.objectElems = [];
+    }
+    endObject(loaderData, elemClassNames) {
+        var _a, _b;
+        super.endObject(loaderData);
+        // Don't extend paths across objects
+        this.addPathToSVG();
+        if (loaderData && !this.sanitize) {
+            // Restore any attributes unsupported by the app.
+            for (const elem of (_a = this.objectElems) !== null && _a !== void 0 ? _a : []) {
+                const attrs = loaderData[svgAttributesDataKey];
+                const styleAttrs = loaderData[svgStyleAttributesDataKey];
+                if (attrs) {
+                    for (const [attr, value] of attrs) {
+                        elem.setAttribute(attr, value);
+                    }
+                }
+                if (styleAttrs) {
+                    for (const attr of styleAttrs) {
+                        elem.style.setProperty(attr.key, attr.value, attr.priority);
+                    }
+                }
+            }
+        }
+        // Add class names to the object, if given.
+        if (elemClassNames) {
+            for (const elem of (_b = this.objectElems) !== null && _b !== void 0 ? _b : []) {
+                elem.classList.add(...elemClassNames);
+            }
+        }
+    }
+    // Not implemented -- use drawPath instead.
+    unimplementedMessage() { throw new Error('Not implemenented!'); }
+    beginPath(_startPoint) { this.unimplementedMessage(); }
+    endPath(_style) { this.unimplementedMessage(); }
+    lineTo(_point) { this.unimplementedMessage(); }
+    moveTo(_point) { this.unimplementedMessage(); }
+    traceCubicBezierCurve(_controlPoint1, _controlPoint2, _endPoint) { this.unimplementedMessage(); }
+    traceQuadraticBezierCurve(_controlPoint, _endPoint) { this.unimplementedMessage(); }
+    drawPoints(...points) {
+        points.map(point => {
+            const elem = document.createElementNS(svgNameSpace, 'circle');
+            elem.setAttribute('cx', `${point.x}`);
+            elem.setAttribute('cy', `${point.y}`);
+            elem.setAttribute('r', '15');
+            this.elem.appendChild(elem);
+        });
+    }
+    // Renders a **copy** of the given element.
+    drawSVGElem(elem) {
+        if (this.sanitize) {
+            return;
+        }
+        // Don't add multiple copies of the default stylesheet.
+        if (elem.tagName.toLowerCase() === 'style' && elem.getAttribute('id') === renderedStylesheetId) {
+            return;
+        }
+        this.elem.appendChild(elem.cloneNode(true));
+    }
+    isTooSmallToRender(_rect) {
+        return false;
+    }
+    // Creates a new SVG element and SVGRenerer with attributes set for the given Viewport.
+    static fromViewport(viewport, sanitize = true) {
+        const svgNameSpace = 'http://www.w3.org/2000/svg';
+        const result = document.createElementNS(svgNameSpace, 'svg');
+        const rect = viewport.getScreenRectSize();
+        // rect.x -> size of rect in x direction, rect.y -> size of rect in y direction.
+        result.setAttribute('viewBox', [0, 0, rect.x, rect.y].map(part => toRoundedString(part)).join(' '));
+        result.setAttribute('width', toRoundedString(rect.x));
+        result.setAttribute('height', toRoundedString(rect.y));
+        // Ensure the image can be identified as an SVG if downloaded.
+        // See https://jwatt.org/svg/authoring/
+        result.setAttribute('version', '1.1');
+        result.setAttribute('baseProfile', 'full');
+        result.setAttribute('xmlns', svgNameSpace);
+        return { element: result, renderer: new SVGRenderer(result, viewport, sanitize) };
+    }
+}

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

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

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

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

package/dist/mjs/src/testing/beforeEachFile.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/src/testing/beforeEachFile.mjs

@@ -0,0 +1,7 @@
+import  loadExpectExtensions  from './loadExpectExtensions.mjs';
+loadExpectExtensions();
+jest.useFakeTimers();
+// jsdom doesn't support HTMLCanvasElement#getContext — it logs an error
+// to the console. Make it return null so we can handle a non-existent Canvas
+// at runtime (e.g. use something else, if available).
+HTMLCanvasElement.prototype.getContext = () => null;

package/dist/mjs/src/testing/createEditor.d.ts

@@ -0,0 +1,4 @@
+import Editor from '../Editor';
+/** Creates an editor. Should only be used in test files. */
+declare const _default: () => Editor;
+export default _default;

package/dist/mjs/src/testing/createEditor.mjs

@@ -0,0 +1,9 @@
+import  { RenderingMode }  from '../rendering/Display.mjs';
+import  Editor  from '../Editor.mjs';
+/** Creates an editor. Should only be used in test files. */
+export default () => {
+    if (jest === undefined) {
+        throw new Error('Files in the testing/ folder should only be used in tests!');
+    }
+    return new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+};

package/dist/mjs/src/testing/lib.d.ts

@@ -0,0 +1,2 @@
+export { default as sendPenEvent } from './sendPenEvent';
+export { default as sendTouchEvent } from './sendTouchEvent';

package/dist/mjs/src/testing/lib.mjs

@@ -0,0 +1,2 @@
+export  { default as sendPenEvent }  from './sendPenEvent.mjs';
+export  { default as sendTouchEvent }  from './sendTouchEvent.mjs';

package/dist/mjs/src/testing/loadExpectExtensions.d.ts

@@ -0,0 +1,2 @@
+export declare const loadExpectExtensions: () => void;
+export default loadExpectExtensions;

package/dist/mjs/src/testing/loadExpectExtensions.mjs

@@ -0,0 +1,24 @@
+export const loadExpectExtensions = () => {
+    // Custom matchers. See
+    // https://jestjs.io/docs/expect#expectextendmatchers
+    expect.extend({
+        // Determine whether expected = actual based on the objects'
+        // .eq methods
+        objEq(actual, expected, ...eqArgs) {
+            let pass = false;
+            if ((expected !== null && expected !== void 0 ? expected : null) === null) {
+                pass = actual.eq(expected, ...eqArgs);
+            }
+            else {
+                pass = expected.eq(actual, ...eqArgs);
+            }
+            return {
+                pass,
+                message: () => {
+                    return `Expected ${pass ? '!' : ''}(${actual}).eq(${expected}). Options(${eqArgs})`;
+                },
+            };
+        },
+    });
+};
+export default loadExpectExtensions;

package/dist/mjs/src/testing/sendPenEvent.d.ts

@@ -0,0 +1,12 @@
+import Editor from '../Editor';
+import { Point2 } from '../math/Vec2';
+import Pointer from '../Pointer';
+import { InputEvtType } from '../types';
+/**
+ * Dispatch a pen event to the currently selected tool.
+ * Intended for unit tests.
+ *
+ * @see {@link sendTouchEvent}
+ */
+declare const sendPenEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]) => void;
+export default sendPenEvent;

package/dist/mjs/src/testing/sendPenEvent.mjs

@@ -0,0 +1,19 @@
+import  Pointer  from '../Pointer.mjs';
+import  { InputEvtType }  from '../types.mjs';
+/**
+ * Dispatch a pen event to the currently selected tool.
+ * Intended for unit tests.
+ *
+ * @see {@link sendTouchEvent}
+ */
+const sendPenEvent = (editor, eventType, point, allPointers) => {
+    const mainPointer = Pointer.ofCanvasPoint(point, eventType !== InputEvtType.PointerUpEvt, editor.viewport);
+    editor.toolController.dispatchInputEvent({
+        kind: eventType,
+        allPointers: allPointers !== null && allPointers !== void 0 ? allPointers : [
+            mainPointer,
+        ],
+        current: mainPointer,
+    });
+};
+export default sendPenEvent;

package/dist/mjs/src/testing/sendTouchEvent.d.ts

@@ -0,0 +1,42 @@
+import Editor from '../Editor';
+import { Vec2 } from '../math/Vec2';
+import Pointer from '../Pointer';
+import { InputEvtType } from '../types';
+/**
+ * Dispatch a touch event to the currently selected tool. Intended for unit tests.
+ *
+ * @see {@link sendPenEvent}
+ *
+ * @example
+ * **Simulating a horizontal swipe gesture:**
+ * ```ts
+ * sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+ * for (let i = 1; i <= 10; i++) {
+ *   jest.advanceTimersByTime(10);
+ *   sendTouchEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(i * 10, 0));
+ * }
+ * ```
+ *
+ * @example
+ * **Simulating a pinch gesture.** This example assumes that you're using [Jest with timer mocks enabled](https://jestjs.io/docs/timer-mocks).
+ * ```ts
+ * let firstPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+ * let secondPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(100, 0), [ firstPointer ]);
+ *
+ * // Simulate a pinch
+ * const maxIterations = 10;
+ * for (let i = 0; i < maxIterations; i++) {
+ *   // Use the unit testing framework's tool for increasing the current time
+ *   // returned by (new Date()).getTime(), etc.
+ *   jest.advanceTimersByTime(100);
+ *
+ *   const point1 = Vec2.of(-i * 5, 0);
+ *   const point2 = Vec2.of(i * 5 + 100, 0);
+ *
+ *   firstPointer = sendTouchEvent(editor, InputEvtType.PointerMoveEvt, point1, [ secondPointer ]);
+ *   secondPointer = sendTouchEvent(editor, InputEvtType.PointerMoveEvt, point2, [ firstPointer ]);
+ * }
+ * ```
+ */
+declare const sendTouchEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, screenPos: Vec2, allOtherPointers?: Pointer[]) => Pointer;
+export default sendTouchEvent;

package/dist/mjs/src/testing/sendTouchEvent.mjs

@@ -0,0 +1,62 @@
+import  Pointer, { PointerDevice }  from '../Pointer.mjs';
+import  { InputEvtType }  from '../types.mjs';
+/**
+ * Dispatch a touch event to the currently selected tool. Intended for unit tests.
+ *
+ * @see {@link sendPenEvent}
+ *
+ * @example
+ * **Simulating a horizontal swipe gesture:**
+ * ```ts
+ * sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+ * for (let i = 1; i <= 10; i++) {
+ *   jest.advanceTimersByTime(10);
+ *   sendTouchEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(i * 10, 0));
+ * }
+ * ```
+ *
+ * @example
+ * **Simulating a pinch gesture.** This example assumes that you're using [Jest with timer mocks enabled](https://jestjs.io/docs/timer-mocks).
+ * ```ts
+ * let firstPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+ * let secondPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(100, 0), [ firstPointer ]);
+ *
+ * // Simulate a pinch
+ * const maxIterations = 10;
+ * for (let i = 0; i < maxIterations; i++) {
+ *   // Use the unit testing framework's tool for increasing the current time
+ *   // returned by (new Date()).getTime(), etc.
+ *   jest.advanceTimersByTime(100);
+ *
+ *   const point1 = Vec2.of(-i * 5, 0);
+ *   const point2 = Vec2.of(i * 5 + 100, 0);
+ *
+ *   firstPointer = sendTouchEvent(editor, InputEvtType.PointerMoveEvt, point1, [ secondPointer ]);
+ *   secondPointer = sendTouchEvent(editor, InputEvtType.PointerMoveEvt, point2, [ firstPointer ]);
+ * }
+ * ```
+ */
+const sendTouchEvent = (editor, eventType, screenPos, allOtherPointers) => {
+    const canvasPos = editor.viewport.screenToCanvas(screenPos);
+    let ptrId = 0;
+    let maxPtrId = 0;
+    // Get a unique ID for the main pointer
+    // (try to use id=0, but don't use it if it's already in use).
+    for (const pointer of allOtherPointers !== null && allOtherPointers !== void 0 ? allOtherPointers : []) {
+        maxPtrId = Math.max(pointer.id, maxPtrId);
+        if (pointer.id === ptrId) {
+            ptrId = maxPtrId + 1;
+        }
+    }
+    const mainPointer = Pointer.ofCanvasPoint(canvasPos, eventType !== InputEvtType.PointerUpEvt, editor.viewport, ptrId, PointerDevice.Touch);
+    editor.toolController.dispatchInputEvent({
+        kind: eventType,
+        allPointers: [
+            ...(allOtherPointers !== null && allOtherPointers !== void 0 ? allOtherPointers : []),
+            mainPointer,
+        ],
+        current: mainPointer,
+    });
+    return mainPointer;
+};
+export default sendTouchEvent;