js-draw 0.0.1

package/dist/src/EditorImage.js

@@ -0,0 +1,243 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _element, _applyByFlattening, _a;
+import Rect2 from './geometry/Rect2';
+// Handles lookup/storage of elements in the image
+export default class EditorImage {
+    constructor() {
+        this.root = new ImageNode();
+    }
+    addElement(elem) {
+        return this.root.addLeaf(elem);
+    }
+    // Returns the parent of the given element, if it exists.
+    findParent(elem) {
+        const candidates = this.root.getLeavesInRegion(elem.getBBox());
+        for (const candidate of candidates) {
+            if (candidate.getContent() === elem) {
+                return candidate;
+            }
+        }
+        return null;
+    }
+    sortLeaves(leaves) {
+        leaves.sort((a, b) => a.getContent().zIndex - b.getContent().zIndex);
+    }
+    render(renderer, viewport, minFraction = 0.001) {
+        // Don't render components that are < 0.1% of the viewport.
+        const leaves = this.root.getLeavesInRegion(viewport.visibleRect, minFraction);
+        this.sortLeaves(leaves);
+        for (const leaf of leaves) {
+            // Leaves by definition have content
+            leaf.getContent().render(renderer, viewport.visibleRect);
+        }
+    }
+    // Renders all nodes, even ones not within the viewport
+    renderAll(renderer) {
+        const leaves = this.root.getLeaves();
+        this.sortLeaves(leaves);
+        for (const leaf of leaves) {
+            leaf.getContent().render(renderer, leaf.getBBox());
+        }
+    }
+    getElementsIntersectingRegion(region) {
+        const leaves = this.root.getLeavesInRegion(region);
+        this.sortLeaves(leaves);
+        return leaves.map(leaf => leaf.getContent());
+    }
+}
+// A Command that can access private [EditorImage] functionality
+EditorImage.AddElementCommand = (_a = class {
+        // If [applyByFlattening], then the rendered content of this element
+        // is present on the display's wet ink canvas. As such, no re-render is necessary
+        // the first time this command is applied (the surfaces are joined instead).
+        constructor(element, applyByFlattening = false) {
+            _element.set(this, void 0);
+            _applyByFlattening.set(this, false);
+            __classPrivateFieldSet(this, _element, element, "f");
+            __classPrivateFieldSet(this, _applyByFlattening, applyByFlattening, "f");
+        }
+        apply(editor) {
+            editor.image.addElement(__classPrivateFieldGet(this, _element, "f"));
+            if (!__classPrivateFieldGet(this, _applyByFlattening, "f")) {
+                editor.queueRerender();
+            }
+            else {
+                __classPrivateFieldSet(this, _applyByFlattening, false, "f");
+                editor.display.flatten();
+            }
+        }
+        unapply(editor) {
+            const container = editor.image.findParent(__classPrivateFieldGet(this, _element, "f"));
+            container === null || container === void 0 ? void 0 : container.remove();
+            editor.queueRerender();
+        }
+        description(localization) {
+            return localization.addElementAction(__classPrivateFieldGet(this, _element, "f").description(localization));
+        }
+    },
+    _element = new WeakMap(),
+    _applyByFlattening = new WeakMap(),
+    _a);
+export class ImageNode {
+    constructor(parent = null) {
+        this.parent = parent;
+        this.targetChildCount = 30;
+        this.children = [];
+        this.bbox = Rect2.empty;
+        this.content = null;
+    }
+    getContent() {
+        return this.content;
+    }
+    getParent() {
+        return this.parent;
+    }
+    getChildrenInRegion(region) {
+        return this.children.filter(child => {
+            return child.getBBox().intersects(region);
+        });
+    }
+    // / Returns a list of `ImageNode`s with content (and thus no children).
+    getLeavesInRegion(region, minFractionOfRegion = 0) {
+        const result = [];
+        // Don't render if too small
+        if (this.bbox.maxDimension / region.maxDimension <= minFractionOfRegion) {
+            return [];
+        }
+        if (this.content !== null && this.getBBox().intersects(region)) {
+            result.push(this);
+        }
+        const children = this.getChildrenInRegion(region);
+        for (const child of children) {
+            result.push(...child.getLeavesInRegion(region, minFractionOfRegion));
+        }
+        return result;
+    }
+    // Returns a list of leaves with this as an ancestor.
+    // Like getLeavesInRegion, but does not check whether ancestors are in a given rectangle
+    getLeaves() {
+        if (this.content) {
+            return [this];
+        }
+        const result = [];
+        for (const child of this.children) {
+            result.push(...child.getLeaves());
+        }
+        return result;
+    }
+    addLeaf(leaf) {
+        if (this.content === null && this.children.length === 0) {
+            this.content = leaf;
+            this.recomputeBBox(true);
+            return this;
+        }
+        if (this.content !== null) {
+            console.assert(this.children.length === 0);
+            const contentNode = new ImageNode(this);
+            contentNode.content = this.content;
+            this.content = null;
+            this.children.push(contentNode);
+            contentNode.recomputeBBox(false);
+        }
+        // If this node is contained within the leaf, make this and the leaf
+        // share a parent.
+        const leafBBox = leaf.getBBox();
+        if (leafBBox.containsRect(this.getBBox())) {
+            // Create a node for this' children and for the new content..
+            const nodeForNewLeaf = new ImageNode(this);
+            const nodeForChildren = new ImageNode(this);
+            nodeForChildren.children = this.children;
+            this.children = [nodeForNewLeaf, nodeForChildren];
+            nodeForChildren.recomputeBBox(true);
+            return nodeForNewLeaf.addLeaf(leaf);
+        }
+        const containingNodes = this.children.filter(child => child.getBBox().containsRect(leafBBox));
+        // Does the leaf already fit within one of the children?
+        if (containingNodes.length > 0 && this.children.length >= this.targetChildCount) {
+            // Sort the containers in ascending order by area
+            containingNodes.sort((a, b) => a.getBBox().area - b.getBBox().area);
+            // Choose the smallest child that contains the new element.
+            const result = containingNodes[0].addLeaf(leaf);
+            result.rebalance();
+            return result;
+        }
+        const newNode = new ImageNode(this);
+        this.children.push(newNode);
+        newNode.content = leaf;
+        newNode.recomputeBBox(true);
+        return newNode;
+    }
+    getBBox() {
+        return this.bbox;
+    }
+    // Recomputes this' bounding box. If [bubbleUp], also recompute
+    // this' ancestors bounding boxes
+    recomputeBBox(bubbleUp) {
+        var _a;
+        const oldBBox = this.bbox;
+        if (this.content !== null) {
+            this.bbox = this.content.getBBox();
+        }
+        else {
+            this.bbox = Rect2.empty;
+            for (const child of this.children) {
+                this.bbox = this.bbox.union(child.getBBox());
+            }
+        }
+        if (bubbleUp && !oldBBox.eq(this.bbox)) {
+            (_a = this.parent) === null || _a === void 0 ? void 0 : _a.recomputeBBox(true);
+        }
+    }
+    rebalance() {
+        // If the current node is its parent's only child,
+        if (this.parent && this.parent.children.length === 1) {
+            console.assert(this.parent.content === null);
+            console.assert(this.parent.children[0] === this);
+            // Remove this' parent, if this' parent isn't the root.
+            const oldParent = this.parent;
+            if (oldParent.parent !== null) {
+                oldParent.children = [];
+                this.parent = oldParent.parent;
+                this.parent.children.push(this);
+                oldParent.parent = null;
+                this.parent.recomputeBBox(false);
+            }
+            else if (this.content === null) {
+                // Remove this and transfer this' children to the parent.
+                this.parent.children = this.children;
+                this.parent = null;
+            }
+        }
+    }
+    // Remove this node and all of its children
+    remove() {
+        if (!this.parent) {
+            this.content = null;
+            this.children = [];
+            return;
+        }
+        const oldChildCount = this.parent.children.length;
+        this.parent.children = this.parent.children.filter(node => {
+            return node !== this;
+        });
+        console.assert(this.parent.children.length === oldChildCount - 1);
+        this.parent.children.forEach(child => {
+            child.rebalance();
+        });
+        this.parent.recomputeBBox(true);
+        // Invalidate/disconnect this.
+        this.content = null;
+        this.parent = null;
+        this.children = [];
+    }
+}

package/dist/src/EventDispatcher.d.ts

@@ -0,0 +1,11 @@
+declare type CallbackHandler<EventType> = (data: EventType) => void;
+export default class EventDispatcher<EventKeyType extends string | symbol | number, EventMessageType> {
+    private listeners;
+    constructor();
+    dispatch(eventName: EventKeyType, event: EventMessageType): void;
+    on(eventName: EventKeyType, callback: CallbackHandler<EventMessageType>): {
+        remove: () => boolean;
+    };
+    off(eventName: EventKeyType, callback: CallbackHandler<EventMessageType>): void;
+}
+export {};

package/dist/src/EventDispatcher.js

@@ -0,0 +1,39 @@
+// Code shared with Joplin
+// EventKeyType is used to distinguish events (e.g. a 'ClickEvent' vs a 'TouchEvent')
+// while EventMessageType is the type of the data sent with an event (can be `void`)
+export default class EventDispatcher {
+    constructor() {
+        this.listeners = {};
+    }
+    dispatch(eventName, event) {
+        const listenerList = this.listeners[eventName];
+        if (listenerList) {
+            for (let i = 0; i < listenerList.length; i++) {
+                listenerList[i](event);
+            }
+        }
+    }
+    on(eventName, callback) {
+        if (!this.listeners[eventName])
+            this.listeners[eventName] = [];
+        this.listeners[eventName].push(callback);
+        return {
+            // Retuns false if the listener has already been removed, true otherwise.
+            remove: () => {
+                const originalListeners = this.listeners[eventName];
+                this.off(eventName, callback);
+                return originalListeners.length !== this.listeners[eventName].length;
+            },
+        };
+    }
+    // Equivalent to calling .remove() on the object returned by .on
+    off(eventName, callback) {
+        const listeners = this.listeners[eventName];
+        if (!listeners)
+            return;
+        // Replace the current list of listeners with a new, shortened list.
+        // This allows any iterators over this.listeners to continue iterating
+        // without skipping elements.
+        this.listeners[eventName] = listeners.filter(otherCallback => otherCallback !== callback);
+    }
+}

package/dist/src/Pointer.d.ts

@@ -0,0 +1,22 @@
+import { Point2 } from './geometry/Vec2';
+import Viewport from './Viewport';
+export declare enum PointerDevice {
+    Pen = 0,
+    Eraser = 1,
+    Touch = 2,
+    Mouse = 3,
+    Other = 4
+}
+export default class Pointer {
+    readonly screenPos: Point2;
+    readonly canvasPos: Point2;
+    readonly pressure: number | null;
+    readonly isPrimary: boolean;
+    readonly down: boolean;
+    readonly device: PointerDevice;
+    readonly id: number;
+    readonly timeStamp: number;
+    private constructor();
+    static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport): Pointer;
+    static ofCanvasPoint(canvasPos: Point2, isDown: boolean, viewport: Viewport, id?: number, device?: PointerDevice, isPrimary?: boolean, pressure?: number | null): Pointer;
+}

package/dist/src/Pointer.js

@@ -0,0 +1,57 @@
+import { Vec2 } from './geometry/Vec2';
+export var PointerDevice;
+(function (PointerDevice) {
+    PointerDevice[PointerDevice["Pen"] = 0] = "Pen";
+    PointerDevice[PointerDevice["Eraser"] = 1] = "Eraser";
+    PointerDevice[PointerDevice["Touch"] = 2] = "Touch";
+    PointerDevice[PointerDevice["Mouse"] = 3] = "Mouse";
+    PointerDevice[PointerDevice["Other"] = 4] = "Other";
+})(PointerDevice || (PointerDevice = {}));
+// Provides a snapshot containing information about a pointer. A Pointer
+// object is immutable --- it will not be updated when the pointer's information changes.
+export default class Pointer {
+    constructor(
+    // The (x, y) position of the pointer relative to the top-left corner
+    // of the visible canvas.
+    screenPos, 
+    // Position of the pointer relative to the top left corner of the drawing
+    // surface.
+    canvasPos, pressure, isPrimary, down, device, 
+    // Unique ID for the pointer
+    id, 
+    // Numeric timestamp (milliseconds, as from (new Date).getTime())
+    timeStamp) {
+        this.screenPos = screenPos;
+        this.canvasPos = canvasPos;
+        this.pressure = pressure;
+        this.isPrimary = isPrimary;
+        this.down = down;
+        this.device = device;
+        this.id = id;
+        this.timeStamp = timeStamp;
+    }
+    static ofEvent(evt, isDown, viewport) {
+        var _a, _b;
+        const screenPos = Vec2.of(evt.offsetX, evt.offsetY);
+        const pointerTypeToDevice = {
+            'mouse': PointerDevice.Mouse,
+            'pen': PointerDevice.Pen,
+            'touch': PointerDevice.Touch,
+        };
+        let device = (_a = pointerTypeToDevice[evt.pointerType]) !== null && _a !== void 0 ? _a : PointerDevice.Other;
+        const eraserButtonMask = 0x20;
+        if (device === PointerDevice.Pen && (evt.buttons & eraserButtonMask) !== 0) {
+            device = PointerDevice.Eraser;
+        }
+        const timeStamp = (new Date()).getTime();
+        const canvasPos = viewport.screenToCanvas(screenPos);
+        return new Pointer(screenPos, canvasPos, (_b = evt.pressure) !== null && _b !== void 0 ? _b : null, evt.isPrimary, isDown, device, evt.pointerId, timeStamp);
+    }
+    // Create a new Pointer from a point on the canvas.
+    // Intended for unit tests.
+    static ofCanvasPoint(canvasPos, isDown, viewport, id = 0, device = PointerDevice.Pen, isPrimary = true, pressure = null) {
+        const screenPos = viewport.canvasToScreen(canvasPos);
+        const timeStamp = (new Date()).getTime();
+        return new Pointer(screenPos, canvasPos, pressure, isPrimary, isDown, device, id, timeStamp);
+    }
+}

package/dist/src/SVGLoader.d.ts

@@ -0,0 +1,21 @@
+import Rect2 from './geometry/Rect2';
+import { ComponentAddedListener, ImageLoader, OnProgressListener } from './types';
+export declare const defaultSVGViewRect: Rect2;
+export default class SVGLoader implements ImageLoader {
+    private source;
+    private onFinish?;
+    private onAddComponent;
+    private onProgress;
+    private processedCount;
+    private totalToProcess;
+    private rootViewBox;
+    private constructor();
+    private getStyle;
+    private strokeDataFromElem;
+    private addPath;
+    private addUnknownNode;
+    private updateViewBox;
+    private visit;
+    start(onAddComponent: ComponentAddedListener, onProgress: OnProgressListener): Promise<Rect2>;
+    static fromString(text: string): SVGLoader;
+}

package/dist/src/SVGLoader.js

@@ -0,0 +1,204 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import Color4 from './Color4';
+import Stroke from './components/Stroke';
+import UnknownSVGObject from './components/UnknownSVGObject';
+import Path from './geometry/Path';
+import Rect2 from './geometry/Rect2';
+// Size of a loaded image if no size is specified.
+export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
+export default class SVGLoader {
+    constructor(source, onFinish) {
+        this.source = source;
+        this.onFinish = onFinish;
+        this.onAddComponent = null;
+        this.onProgress = null;
+        this.processedCount = 0;
+        this.totalToProcess = 0;
+    }
+    getStyle(node) {
+        var _a, _b, _c;
+        const style = {
+            fill: Color4.transparent,
+        };
+        const fillAttribute = (_a = node.getAttribute('fill')) !== null && _a !== void 0 ? _a : node.style.fill;
+        if (fillAttribute) {
+            try {
+                style.fill = Color4.fromString(fillAttribute);
+            }
+            catch (e) {
+                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) {
+            try {
+                let width = parseFloat(strokeWidthAttr !== null && strokeWidthAttr !== void 0 ? strokeWidthAttr : '1');
+                if (!isFinite(width)) {
+                    width = 0;
+                }
+                style.stroke = {
+                    width,
+                    color: Color4.fromString(strokeAttribute),
+                };
+            }
+            catch (e) {
+                console.error('Error parsing stroke data:', e);
+            }
+        }
+        return style;
+    }
+    strokeDataFromElem(node) {
+        var _a;
+        const result = [];
+        const pathData = (_a = node.getAttribute('d')) !== null && _a !== void 0 ? _a : '';
+        const style = this.getStyle(node);
+        // Break the path into chunks at each moveTo ('M') command:
+        const parts = pathData.split('M');
+        let isFirst = true;
+        for (const part of parts) {
+            if (part !== '') {
+                // We split the path by moveTo commands, so add the 'M' back in
+                // if it was present.
+                const current = !isFirst ? `M${part}` : part;
+                const path = Path.fromString(current);
+                const spec = path.toRenderable(style);
+                result.push(spec);
+            }
+            isFirst = false;
+        }
+        return result;
+    }
+    // Adds a stroke with a single path
+    addPath(node) {
+        var _a;
+        let elem;
+        try {
+            const strokeData = this.strokeDataFromElem(node);
+            elem = new Stroke(strokeData);
+        }
+        catch (e) {
+            console.error('Invalid path in node', node, '\nError:', e, '\nAdding as an unknown object.');
+            elem = new UnknownSVGObject(node);
+        }
+        (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, elem);
+    }
+    addUnknownNode(node) {
+        var _a;
+        const component = new UnknownSVGObject(node);
+        (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, component);
+    }
+    updateViewBox(node) {
+        const viewBoxAttr = node.getAttribute('viewBox');
+        if (this.rootViewBox || !viewBoxAttr) {
+            return;
+        }
+        const components = viewBoxAttr.split(/[ \t,]/);
+        const x = parseFloat(components[0]);
+        const y = parseFloat(components[1]);
+        const width = parseFloat(components[2]);
+        const height = parseFloat(components[3]);
+        if (isNaN(x) || isNaN(y) || isNaN(width) || isNaN(height)) {
+            return;
+        }
+        this.rootViewBox = new Rect2(x, y, width, height);
+    }
+    visit(node) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.totalToProcess += node.childElementCount;
+            switch (node.tagName.toLowerCase()) {
+                case 'g':
+                    // Continue -- visit the node's children.
+                    break;
+                case 'path':
+                    this.addPath(node);
+                    break;
+                case 'svg':
+                    this.updateViewBox(node);
+                    break;
+                default:
+                    console.warn('Unknown SVG element,', node);
+                    if (!(node instanceof SVGElement)) {
+                        console.warn('Element', node, 'is not an SVGElement! Continuing anyway.');
+                    }
+                    this.addUnknownNode(node);
+                    return;
+            }
+            for (const child of node.children) {
+                yield this.visit(child);
+            }
+            this.processedCount++;
+            yield ((_a = this.onProgress) === null || _a === void 0 ? void 0 : _a.call(this, this.processedCount, this.totalToProcess));
+        });
+    }
+    start(onAddComponent, onProgress) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.onAddComponent = onAddComponent;
+            this.onProgress = onProgress;
+            // Estimate the number of tags to process.
+            this.totalToProcess = this.source.childElementCount;
+            this.processedCount = 0;
+            this.rootViewBox = null;
+            yield this.visit(this.source);
+            const viewBox = this.rootViewBox;
+            let result = defaultSVGViewRect;
+            if (viewBox) {
+                result = Rect2.of(viewBox);
+            }
+            (_a = this.onFinish) === null || _a === void 0 ? void 0 : _a.call(this);
+            return result;
+        });
+    }
+    // TODO: Handling unsafe data! Tripple-check that this is secure!
+    static fromString(text) {
+        var _a, _b;
+        const sandbox = document.createElement('iframe');
+        sandbox.src = 'about:blank';
+        sandbox.setAttribute('sandbox', 'allow-same-origin');
+        sandbox.setAttribute('csp', 'default-src \'about:blank\'');
+        sandbox.style.display = 'none';
+        // Required to access the frame's DOM. See https://stackoverflow.com/a/17777943/17055750
+        document.body.appendChild(sandbox);
+        if (!sandbox.hasAttribute('sandbox')) {
+            sandbox.remove();
+            throw new Error('SVG loading iframe is not sandboxed.');
+        }
+        // Try running JavaScript within the iframe
+        const sandboxDoc = (_b = (_a = sandbox.contentWindow) === null || _a === void 0 ? void 0 : _a.document) !== null && _b !== void 0 ? _b : sandbox.contentDocument;
+        if (sandboxDoc == null)
+            throw new Error('Unable to open a sandboxed iframe!');
+        sandboxDoc.open();
+        sandboxDoc.write(`
+			<!DOCTYPE html>
+			<html>
+				<head>
+					<title>SVG Loading Sandbox</title>
+				</head>
+				<body>
+					<script>
+						console.error('JavaScript should not be able to run here!');
+						throw new Error(
+							'The SVG sandbox is broken! Please double-check the sandboxing setting.'
+						);
+					</script>
+				</body>
+			</html>
+		`);
+        sandboxDoc.close();
+        const svgElem = sandboxDoc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svgElem.innerHTML = text;
+        return new SVGLoader(svgElem, () => {
+            sandbox.remove();
+        });
+    }
+}

package/dist/src/StrokeBuilder.d.ts

@@ -0,0 +1,35 @@
+import Color4 from './Color4';
+import { RenderablePathSpec } from './rendering/AbstractRenderer';
+import { Point2 } from './geometry/Vec2';
+import Rect2 from './geometry/Rect2';
+import Stroke from './components/Stroke';
+export interface StrokeDataPoint {
+    pos: Point2;
+    width: number;
+    time: number;
+    color: Color4;
+}
+export default class StrokeBuilder {
+    private startPoint;
+    private minFitAllowed;
+    private maxFitAllowed;
+    private segments;
+    private buffer;
+    private lastPoint;
+    private lastExitingVec;
+    private currentCurve;
+    private curveStartWidth;
+    private curveEndWidth;
+    private momentum;
+    private bbox;
+    constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number);
+    getBBox(): Rect2;
+    private getRenderingStyle;
+    preview(): RenderablePathSpec[];
+    build(): Stroke;
+    private roundPoint;
+    private finalizeCurrentCurve;
+    private currentSegmentToPath;
+    private computeExitingVec;
+    addPoint(newPoint: StrokeDataPoint): void;
+}