js-draw 0.0.1

package/dist/src/geometry/Vec3.js

@@ -0,0 +1,98 @@
+// A vector with three components. Can also be used to represent a two-component vector
+export default class Vec3 {
+    constructor(x, y, z) {
+        this.x = x;
+        this.y = y;
+        this.z = z;
+    }
+    // Returns the x, y components of this
+    get xy() {
+        // Useful for APIs that behave differently if .z is present.
+        return {
+            x: this.x,
+            y: this.y,
+        };
+    }
+    static of(x, y, z) {
+        return new Vec3(x, y, z);
+    }
+    // Returns this' [idx]th component
+    at(idx) {
+        if (idx === 0)
+            return this.x;
+        if (idx === 1)
+            return this.y;
+        if (idx === 2)
+            return this.z;
+        throw new Error(`${idx} out of bounds!`);
+    }
+    magnitude() {
+        return Math.sqrt(this.dot(this));
+    }
+    magnitudeSquared() {
+        return this.dot(this);
+    }
+    // Return this' angle in the XY plane (treats this as a Vec2)
+    angle() {
+        return Math.atan2(this.y, this.x);
+    }
+    normalized() {
+        const norm = this.magnitude();
+        return Vec3.of(this.x / norm, this.y / norm, this.z / norm);
+    }
+    times(c) {
+        return Vec3.of(this.x * c, this.y * c, this.z * c);
+    }
+    plus(v) {
+        return Vec3.of(this.x + v.x, this.y + v.y, this.z + v.z);
+    }
+    minus(v) {
+        return this.plus(v.times(-1));
+    }
+    dot(other) {
+        return this.x * other.x + this.y * other.y + this.z * other.z;
+    }
+    cross(other) {
+        // | i  j  k |
+        // | x1 y1 z1| = (i)(y1z2 - y2z1) - (j)(x1z2 - x2z1) + (k)(x1y2 - x2y1)
+        // | x2 y2 z2|
+        return Vec3.of(this.y * other.z - other.y * this.z, other.x * this.z - this.x * other.z, this.x * other.y - other.x * this.y);
+    }
+    // Returns this plus a vector of length [distance] in [direction]
+    extend(distance, direction) {
+        return this.plus(direction.normalized().times(distance));
+    }
+    // Returns a vector [fractionTo] of the way to target from this.
+    lerp(target, fractionTo) {
+        return this.times(1 - fractionTo).plus(target.times(fractionTo));
+    }
+    // [zip] Maps a component of this and a corresponding component of
+    // [other] to a component of the output vector.
+    zip(other, zip) {
+        return Vec3.of(zip(other.x, this.x), zip(other.y, this.y), zip(other.z, this.z));
+    }
+    // Returns a vector with each component acted on by [fn]
+    map(fn) {
+        return Vec3.of(fn(this.x), fn(this.y), fn(this.z));
+    }
+    asArray() {
+        return [this.x, this.y, this.z];
+    }
+    // [fuzz] The maximum difference between two components for this and [other]
+    // to be considered equal.
+    eq(other, fuzz) {
+        for (let i = 0; i < 3; i++) {
+            if (Math.abs(other.at(i) - this.at(i)) > fuzz) {
+                return false;
+            }
+        }
+        return true;
+    }
+    toString() {
+        return `Vec(${this.x}, ${this.y}, ${this.z})`;
+    }
+}
+Vec3.unitX = Vec3.of(1, 0, 0);
+Vec3.unitY = Vec3.of(0, 1, 0);
+Vec3.unitZ = Vec3.of(0, 0, 1);
+Vec3.zero = Vec3.of(0, 0, 0);

package/dist/src/localization.d.ts

@@ -0,0 +1,12 @@
+import { CommandLocalization } from './commands/localization';
+import { ImageComponentLocalization } from './components/localization';
+import { ToolbarLocalization } from './toolbar/types';
+import { ToolLocalization } from './tools/localization';
+export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization {
+    undoAnnouncement: (actionDescription: string) => string;
+    redoAnnouncement: (actionDescription: string) => string;
+    doneLoading: string;
+    loading: (percentage: number) => string;
+    imageEditor: string;
+}
+export declare const defaultEditorLocalization: EditorLocalization;

package/dist/src/localization.js

@@ -0,0 +1,5 @@
+import { defaultCommandLocalization } from './commands/localization';
+import { defaultComponentLocalization } from './components/localization';
+import HTMLToolbar from './toolbar/HTMLToolbar';
+import { defaultToolLocalization } from './tools/localization';
+export const defaultEditorLocalization = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, HTMLToolbar.defaultLocalization), defaultToolLocalization), defaultCommandLocalization), defaultComponentLocalization), { loading: (percentage) => `Loading ${percentage}%...`, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`, redoAnnouncement: (commandDescription) => `Redid ${commandDescription}` });

package/dist/src/main.d.ts

@@ -0,0 +1,3 @@
+import './editorStyles';
+import Editor from './Editor';
+export { Editor };

package/dist/src/main.js

@@ -0,0 +1,4 @@
+// Main entrypoint for bundled content
+import './editorStyles';
+import Editor from './Editor';
+export { Editor };

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

@@ -0,0 +1,38 @@
+import Color4 from '../Color4';
+import { PathCommand } from '../geometry/Path';
+import Rect2 from '../geometry/Rect2';
+import { Point2, Vec2 } from '../geometry/Vec2';
+import Viewport from '../Viewport';
+export interface RenderingStyle {
+    fill: Color4;
+    stroke?: {
+        color: Color4;
+        width: number;
+    };
+}
+export interface RenderablePathSpec {
+    startPoint: Point2;
+    commands: PathCommand[];
+    style: RenderingStyle;
+}
+export default abstract class AbstractRenderer {
+    protected viewport: Viewport;
+    protected constructor(viewport: Viewport);
+    abstract displaySize(): Vec2;
+    abstract clear(): void;
+    protected abstract beginPath(startPoint: Point2): void;
+    protected abstract endPath(style: RenderingStyle): void;
+    protected abstract lineTo(point: Point2): void;
+    protected abstract moveTo(point: Point2): void;
+    protected abstract traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
+    protected abstract traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
+    private objectLevel;
+    private currentPaths;
+    private flushPath;
+    drawPath(path: RenderablePathSpec): void;
+    drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void;
+    startObject(_boundingBox: Rect2): void;
+    endObject(): void;
+    protected getNestingLevel(): number;
+    abstract drawPoints(...points: Point2[]): void;
+}

package/dist/src/rendering/AbstractRenderer.js

@@ -0,0 +1,108 @@
+import { PathCommandType } from '../geometry/Path';
+import Rect2 from '../geometry/Rect2';
+import { Vec2 } from '../geometry/Vec2';
+const stylesEqual = (a, b) => {
+    var _a, _b, _c, _d, _e;
+    return a === b || (a.fill.eq(b.fill)
+        && ((_b = (_a = a.stroke) === null || _a === void 0 ? void 0 : _a.color) === null || _b === void 0 ? void 0 : _b.eq((_c = b.stroke) === null || _c === void 0 ? void 0 : _c.color))
+        && ((_d = a.stroke) === null || _d === void 0 ? void 0 : _d.width) === ((_e = b.stroke) === null || _e === void 0 ? void 0 : _e.width));
+};
+export default class AbstractRenderer {
+    constructor(viewport) {
+        this.viewport = viewport;
+        this.objectLevel = 0;
+        this.currentPaths = null;
+    }
+    flushPath() {
+        if (!this.currentPaths) {
+            return;
+        }
+        let lastStyle = null;
+        for (const path of this.currentPaths) {
+            const { startPoint, commands, style } = path;
+            if (!lastStyle || !stylesEqual(lastStyle, style)) {
+                if (lastStyle) {
+                    this.endPath(lastStyle);
+                }
+                this.beginPath(startPoint);
+                lastStyle = style;
+            }
+            else {
+                this.moveTo(startPoint);
+            }
+            for (const command of commands) {
+                if (command.kind === PathCommandType.LineTo) {
+                    this.lineTo(command.point);
+                }
+                else if (command.kind === PathCommandType.MoveTo) {
+                    this.moveTo(command.point);
+                }
+                else if (command.kind === PathCommandType.CubicBezierTo) {
+                    this.traceCubicBezierCurve(command.controlPoint1, command.controlPoint2, command.endPoint);
+                }
+                else if (command.kind === PathCommandType.QuadraticBezierTo) {
+                    this.traceQuadraticBezierCurve(command.controlPoint, command.endPoint);
+                }
+            }
+        }
+        if (lastStyle) {
+            this.endPath(lastStyle);
+        }
+    }
+    drawPath(path) {
+        // If we're being called outside of an object,
+        // we can't delay rendering
+        if (this.objectLevel === 0) {
+            this.currentPaths = [path];
+            this.flushPath();
+            this.currentPaths = null;
+        }
+        else {
+            // Otherwise, don't render paths all at once. This prevents faint lines between
+            // segments of the same stroke from being visible.
+            this.currentPaths.push(path);
+        }
+    }
+    // Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill]
+    drawRect(rect, lineWidth, lineFill) {
+        const commands = [];
+        // Vector from the top left corner or bottom right corner to the edge of the
+        // stroked region.
+        const cornerToEdge = Vec2.of(lineWidth, lineWidth).times(0.5);
+        const innerRect = Rect2.fromCorners(rect.topLeft.plus(cornerToEdge), rect.bottomRight.minus(cornerToEdge));
+        const outerRect = Rect2.fromCorners(rect.topLeft.minus(cornerToEdge), rect.bottomRight.plus(cornerToEdge));
+        const corners = [
+            innerRect.corners[3],
+            ...innerRect.corners,
+            ...outerRect.corners.reverse(),
+        ];
+        for (const corner of corners) {
+            commands.push({
+                kind: PathCommandType.LineTo,
+                point: corner,
+            });
+        }
+        this.drawPath({
+            startPoint: outerRect.corners[3],
+            commands,
+            style: lineFill,
+        });
+    }
+    // Note the start/end of an object with the given bounding box.
+    startObject(_boundingBox) {
+        this.currentPaths = [];
+        this.objectLevel++;
+    }
+    endObject() {
+        // Render the paths all at once
+        this.flushPath();
+        this.currentPaths = null;
+        this.objectLevel--;
+        if (this.objectLevel < 0) {
+            throw new Error('More objects have ended than have been started (negative object nesting level)!');
+        }
+    }
+    getNestingLevel() {
+        return this.objectLevel;
+    }
+}

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

@@ -0,0 +1,23 @@
+import Rect2 from '../geometry/Rect2';
+import { Point2, Vec2 } from '../geometry/Vec2';
+import Vec3 from '../geometry/Vec3';
+import Viewport from '../Viewport';
+import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from './AbstractRenderer';
+export default class CanvasRenderer extends AbstractRenderer {
+    private ctx;
+    private ignoreObjectsAboveLevel;
+    private ignoringObject;
+    constructor(ctx: CanvasRenderingContext2D, viewport: Viewport);
+    displaySize(): Vec2;
+    clear(): void;
+    protected beginPath(startPoint: Point2): void;
+    protected endPath(style: RenderingStyle): void;
+    protected lineTo(point: Point2): void;
+    protected moveTo(point: Point2): void;
+    protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
+    protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
+    drawPath(path: RenderablePathSpec): void;
+    startObject(boundingBox: Rect2): void;
+    endObject(): void;
+    drawPoints(...points: Point2[]): void;
+}

package/dist/src/rendering/CanvasRenderer.js

@@ -0,0 +1,108 @@
+import Color4 from '../Color4';
+import { Vec2 } from '../geometry/Vec2';
+import AbstractRenderer from './AbstractRenderer';
+const minSquareCurveApproxDist = 25;
+export default class CanvasRenderer extends AbstractRenderer {
+    constructor(ctx, viewport) {
+        super(viewport);
+        this.ctx = ctx;
+        this.ignoreObjectsAboveLevel = null;
+        this.ignoringObject = false;
+    }
+    displaySize() {
+        return Vec2.of(this.ctx.canvas.clientWidth, this.ctx.canvas.clientHeight);
+    }
+    clear() {
+        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+    }
+    beginPath(startPoint) {
+        startPoint = this.viewport.canvasToScreen(startPoint);
+        this.ctx.beginPath();
+        this.ctx.moveTo(startPoint.x, startPoint.y);
+    }
+    endPath(style) {
+        this.ctx.fillStyle = style.fill.toHexString();
+        this.ctx.fill();
+        if (style.stroke) {
+            this.ctx.strokeStyle = style.stroke.color.toHexString();
+            this.ctx.lineWidth = this.viewport.getScaleFactor() * style.stroke.width;
+            this.ctx.stroke();
+        }
+        this.ctx.closePath();
+    }
+    lineTo(point) {
+        point = this.viewport.canvasToScreen(point);
+        this.ctx.lineTo(point.x, point.y);
+    }
+    moveTo(point) {
+        point = this.viewport.canvasToScreen(point);
+        this.ctx.moveTo(point.x, point.y);
+    }
+    traceCubicBezierCurve(p1, p2, p3) {
+        p1 = this.viewport.canvasToScreen(p1);
+        p2 = this.viewport.canvasToScreen(p2);
+        p3 = this.viewport.canvasToScreen(p3);
+        // Approximate the curve if small enough.
+        const delta1 = p2.minus(p1);
+        const delta2 = p3.minus(p2);
+        if (delta1.magnitudeSquared() < minSquareCurveApproxDist
+            && delta2.magnitudeSquared() < minSquareCurveApproxDist) {
+            this.ctx.lineTo(p3.x, p3.y);
+        }
+        else {
+            this.ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
+        }
+    }
+    traceQuadraticBezierCurve(controlPoint, endPoint) {
+        controlPoint = this.viewport.canvasToScreen(controlPoint);
+        endPoint = this.viewport.canvasToScreen(endPoint);
+        // Approximate the curve with a line if small enough
+        const delta = controlPoint.minus(endPoint);
+        if (delta.magnitudeSquared() < minSquareCurveApproxDist) {
+            this.ctx.lineTo(endPoint.x, endPoint.y);
+        }
+        else {
+            this.ctx.quadraticCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
+        }
+    }
+    drawPath(path) {
+        if (this.ignoringObject) {
+            return;
+        }
+        super.drawPath(path);
+    }
+    startObject(boundingBox) {
+        // Should we ignore all objects within this object's bbox?
+        const diagonal = this.viewport.canvasToScreenTransform.transformVec3(boundingBox.size);
+        const minRenderSize = 4;
+        if (Math.abs(diagonal.x) < minRenderSize && Math.abs(diagonal.y) < minRenderSize) {
+            this.ignoreObjectsAboveLevel = this.getNestingLevel();
+            this.ignoringObject = true;
+        }
+        super.startObject(boundingBox);
+    }
+    endObject() {
+        super.endObject();
+        // If exiting an object with a too-small-to-draw bounding box,
+        if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
+            this.ignoreObjectsAboveLevel = null;
+            this.ignoringObject = false;
+        }
+    }
+    drawPoints(...points) {
+        const pointRadius = 10;
+        for (let i = 0; i < points.length; i++) {
+            const point = this.viewport.canvasToScreen(points[i]);
+            this.ctx.beginPath();
+            this.ctx.arc(point.x, point.y, pointRadius, 0, Math.PI * 2);
+            this.ctx.fillStyle = Color4.ofRGBA(0.5 + Math.sin(i) / 2, 1.0, 0.5 + Math.cos(i * 0.2) / 4, 0.5).toHexString();
+            this.ctx.fill();
+            this.ctx.stroke();
+            this.ctx.closePath();
+            this.ctx.textAlign = 'center';
+            this.ctx.textBaseline = 'middle';
+            this.ctx.fillStyle = 'black';
+            this.ctx.fillText(`${i}`, point.x, point.y, pointRadius * 2);
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+import Rect2 from '../geometry/Rect2';
+import { Point2, Vec2 } from '../geometry/Vec2';
+import Vec3 from '../geometry/Vec3';
+import Viewport from '../Viewport';
+import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
+export default class DummyRenderer extends AbstractRenderer {
+    clearedCount: number;
+    renderedPathCount: number;
+    lastFillStyle: RenderingStyle | null;
+    lastPoint: Point2 | null;
+    objectNestingLevel: number;
+    pointBuffer: Point2[];
+    constructor(viewport: Viewport);
+    displaySize(): Vec2;
+    clear(): void;
+    protected beginPath(startPoint: Vec3): void;
+    protected endPath(style: RenderingStyle): void;
+    protected lineTo(point: Vec3): void;
+    protected moveTo(point: Point2): void;
+    protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3): void;
+    protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
+    drawPoints(..._points: Vec3[]): void;
+    startObject(boundingBox: Rect2): void;
+    endObject(): void;
+}

package/dist/src/rendering/DummyRenderer.js

@@ -0,0 +1,65 @@
+// Renderer that outputs nothing. Useful for automated tests.
+import { Vec2 } from '../geometry/Vec2';
+import AbstractRenderer from './AbstractRenderer';
+export default class DummyRenderer extends AbstractRenderer {
+    constructor(viewport) {
+        super(viewport);
+        // Variables that track the state of what's been rendered
+        this.clearedCount = 0;
+        this.renderedPathCount = 0;
+        this.lastFillStyle = null;
+        this.lastPoint = null;
+        this.objectNestingLevel = 0;
+        // List of points drawn since the last clear.
+        this.pointBuffer = [];
+    }
+    displaySize() {
+        // Return a dummy
+        return Vec2.of(640, 480);
+    }
+    clear() {
+        this.clearedCount++;
+        this.renderedPathCount = 0;
+        this.pointBuffer = [];
+        // Ensure all objects finished rendering
+        if (this.objectNestingLevel > 0) {
+            throw new Error(`Within an object while clearing! Nesting level: ${this.objectNestingLevel}`);
+        }
+    }
+    beginPath(startPoint) {
+        this.lastPoint = startPoint;
+        this.pointBuffer.push(startPoint);
+    }
+    endPath(style) {
+        this.renderedPathCount++;
+        this.lastFillStyle = style;
+    }
+    lineTo(point) {
+        this.lastPoint = point;
+        this.pointBuffer.push(point);
+    }
+    moveTo(point) {
+        this.lastPoint = point;
+        this.pointBuffer.push(point);
+    }
+    traceCubicBezierCurve(p1, p2, p3) {
+        this.lastPoint = p3;
+        this.pointBuffer.push(p1, p2, p3);
+    }
+    traceQuadraticBezierCurve(controlPoint, endPoint) {
+        this.lastPoint = endPoint;
+        this.pointBuffer.push(controlPoint, endPoint);
+    }
+    drawPoints(..._points) {
+        // drawPoints is intended for debugging.
+        // As such, it is unlikely to be the target of automated tests.
+    }
+    startObject(boundingBox) {
+        super.startObject(boundingBox);
+        this.objectNestingLevel += 1;
+    }
+    endObject() {
+        super.endObject();
+        this.objectNestingLevel -= 1;
+    }
+}

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

@@ -0,0 +1,27 @@
+import Rect2 from '../geometry/Rect2';
+import { Point2, Vec2 } from '../geometry/Vec2';
+import Viewport from '../Viewport';
+import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
+export default class SVGRenderer extends AbstractRenderer {
+    private elem;
+    private currentPath;
+    private pathStart;
+    private lastPathStyle;
+    private lastPath;
+    private lastPathStart;
+    private mainGroup;
+    constructor(elem: SVGSVGElement, viewport: Viewport);
+    displaySize(): Vec2;
+    clear(): void;
+    protected beginPath(startPoint: Point2): void;
+    protected endPath(style: RenderingStyle): void;
+    private addPathToSVG;
+    startObject(boundingBox: Rect2): void;
+    endObject(): void;
+    protected lineTo(point: Point2): void;
+    protected moveTo(point: Point2): void;
+    protected traceCubicBezierCurve(controlPoint1: Point2, controlPoint2: Point2, endPoint: Point2): void;
+    protected traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
+    drawPoints(...points: Point2[]): void;
+    drawSVGElem(elem: SVGElement): void;
+}

package/dist/src/rendering/SVGRenderer.js

@@ -0,0 +1,122 @@
+import Path, { PathCommandType } from '../geometry/Path';
+import { Vec2 } from '../geometry/Vec2';
+import AbstractRenderer from './AbstractRenderer';
+const svgNameSpace = 'http://www.w3.org/2000/svg';
+export default class SVGRenderer extends AbstractRenderer {
+    constructor(elem, viewport) {
+        super(viewport);
+        this.elem = elem;
+        this.clear();
+    }
+    displaySize() {
+        return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
+    }
+    clear() {
+        this.mainGroup = document.createElementNS(svgNameSpace, 'g');
+        // Remove all children
+        this.elem.replaceChildren(this.mainGroup);
+    }
+    beginPath(startPoint) {
+        var _a;
+        this.currentPath = [];
+        this.pathStart = this.viewport.canvasToScreen(startPoint);
+        (_a = this.lastPathStart) !== null && _a !== void 0 ? _a : (this.lastPathStart = this.pathStart);
+    }
+    endPath(style) {
+        var _a;
+        if (this.currentPath == null) {
+            throw new Error('No path exists to end! Make sure beginPath was called!');
+        }
+        // Try to extend the previous path, if possible
+        if (style.fill.eq((_a = this.lastPathStyle) === null || _a === void 0 ? void 0 : _a.fill) && this.lastPath != null) {
+            this.lastPath.push({
+                kind: PathCommandType.MoveTo,
+                point: this.pathStart,
+            }, ...this.currentPath);
+            this.pathStart = null;
+            this.currentPath = null;
+        }
+        else {
+            this.addPathToSVG();
+            this.lastPathStart = this.pathStart;
+            this.lastPathStyle = style;
+            this.lastPath = this.currentPath;
+            this.pathStart = null;
+            this.currentPath = null;
+        }
+    }
+    // Push [this.fullPath] to the SVG
+    addPathToSVG() {
+        if (!this.lastPathStyle || !this.lastPath) {
+            return;
+        }
+        const pathElem = document.createElementNS(svgNameSpace, 'path');
+        pathElem.setAttribute('d', Path.toString(this.lastPathStart, this.lastPath));
+        const style = this.lastPathStyle;
+        pathElem.setAttribute('fill', style.fill.toHexString());
+        if (style.stroke) {
+            pathElem.setAttribute('stroke', style.stroke.color.toHexString());
+            pathElem.setAttribute('stroke-width', style.stroke.width.toString());
+        }
+        this.mainGroup.appendChild(pathElem);
+    }
+    startObject(boundingBox) {
+        super.startObject(boundingBox);
+        // Only accumulate a path within an object
+        this.lastPath = null;
+        this.lastPathStart = null;
+        this.lastPathStyle = null;
+    }
+    endObject() {
+        super.endObject();
+        // Don't extend paths across objects
+        this.addPathToSVG();
+    }
+    lineTo(point) {
+        point = this.viewport.canvasToScreen(point);
+        this.currentPath.push({
+            kind: PathCommandType.LineTo,
+            point,
+        });
+    }
+    moveTo(point) {
+        point = this.viewport.canvasToScreen(point);
+        this.currentPath.push({
+            kind: PathCommandType.MoveTo,
+            point,
+        });
+    }
+    traceCubicBezierCurve(controlPoint1, controlPoint2, endPoint) {
+        controlPoint1 = this.viewport.canvasToScreen(controlPoint1);
+        controlPoint2 = this.viewport.canvasToScreen(controlPoint2);
+        endPoint = this.viewport.canvasToScreen(endPoint);
+        this.currentPath.push({
+            kind: PathCommandType.CubicBezierTo,
+            controlPoint1,
+            controlPoint2,
+            endPoint,
+        });
+    }
+    traceQuadraticBezierCurve(controlPoint, endPoint) {
+        controlPoint = this.viewport.canvasToScreen(controlPoint);
+        endPoint = this.viewport.canvasToScreen(endPoint);
+        this.currentPath.push({
+            kind: PathCommandType.QuadraticBezierTo,
+            controlPoint,
+            endPoint,
+        });
+    }
+    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.mainGroup.appendChild(elem);
+        });
+    }
+    // Renders a copy of the given element.
+    drawSVGElem(elem) {
+        this.elem.appendChild(elem.cloneNode(true));
+    }
+}

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

@@ -0,0 +1,17 @@
+export declare const loadExpectExtensions: () => void;
+export interface CustomMatchers<R = unknown> {
+    objEq(expected: {
+        eq: (other: any, ...args: any) => boolean;
+    }, ...opts: any): R;
+}
+declare global {
+    export namespace jest {
+        interface Expect extends CustomMatchers {
+        }
+        interface Matchers<R> extends CustomMatchers<R> {
+        }
+        interface AsyncAsymmetricMatchers extends CustomMatchers {
+        }
+    }
+}
+export default loadExpectExtensions;