js-draw 0.0.1

package/src/rendering/CanvasRenderer.ts

@@ -0,0 +1,141 @@
+import Color4 from '../Color4';
+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';
+
+const minSquareCurveApproxDist = 25;
+export default class CanvasRenderer extends AbstractRenderer {
+	private ignoreObjectsAboveLevel: number|null = null;
+	private ignoringObject: boolean = false;
+
+	public constructor(private ctx: CanvasRenderingContext2D, viewport: Viewport) {
+		super(viewport);
+	}
+
+	public displaySize(): Vec2 {
+		return Vec2.of(
+			this.ctx.canvas.clientWidth,
+			this.ctx.canvas.clientHeight
+		);
+	}
+
+	public clear() {
+		this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+	}
+
+	protected beginPath(startPoint: Point2) {
+		startPoint = this.viewport.canvasToScreen(startPoint);
+
+		this.ctx.beginPath();
+		this.ctx.moveTo(startPoint.x, startPoint.y);
+	}
+
+	protected endPath(style: RenderingStyle) {
+		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();
+	}
+
+	protected lineTo(point: Point2) {
+		point = this.viewport.canvasToScreen(point);
+		this.ctx.lineTo(point.x, point.y);
+	}
+
+	protected moveTo(point: Point2) {
+		point = this.viewport.canvasToScreen(point);
+		this.ctx.moveTo(point.x, point.y);
+	}
+
+	protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2) {
+		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);
+		}
+	}
+
+	protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3) {
+		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
+			);
+		}
+	}
+
+	public drawPath(path: RenderablePathSpec) {
+		if (this.ignoringObject) {
+			return;
+		}
+
+		super.drawPath(path);
+	}
+
+	public startObject(boundingBox: Rect2) {
+		// 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);
+	}
+	public 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;
+		}
+	}
+
+	public drawPoints(...points: Point2[]) {
+		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/src/rendering/DummyRenderer.ts

@@ -0,0 +1,80 @@
+// Renderer that outputs nothing. Useful for automated tests.
+
+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 {
+	// Variables that track the state of what's been rendered
+	public clearedCount: number = 0;
+	public renderedPathCount: number = 0;
+	public lastFillStyle: RenderingStyle|null = null;
+	public lastPoint: Point2|null = null;
+	public objectNestingLevel: number = 0;
+
+	// List of points drawn since the last clear.
+	public pointBuffer: Point2[] = [];
+
+	public constructor(viewport: Viewport) {
+		super(viewport);
+	}
+
+	public displaySize(): Vec2 {
+		// Return a dummy
+		return Vec2.of(640, 480);
+	}
+
+	public 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}`
+			);
+		}
+	}
+	protected beginPath(startPoint: Vec3) {
+		this.lastPoint = startPoint;
+		this.pointBuffer.push(startPoint);
+	}
+	protected endPath(style: RenderingStyle) {
+		this.renderedPathCount++;
+		this.lastFillStyle = style;
+	}
+	protected lineTo(point: Vec3) {
+		this.lastPoint = point;
+		this.pointBuffer.push(point);
+	}
+	protected moveTo(point: Point2) {
+		this.lastPoint = point;
+		this.pointBuffer.push(point);
+	}
+	protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3) {
+		this.lastPoint = p3;
+		this.pointBuffer.push(p1, p2, p3);
+	}
+	protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3) {
+		this.lastPoint = endPoint;
+		this.pointBuffer.push(controlPoint, endPoint);
+	}
+	public drawPoints(..._points: Vec3[]) {
+		// drawPoints is intended for debugging.
+		// As such, it is unlikely to be the target of automated tests.
+	}
+
+	public startObject(boundingBox: Rect2) {
+		super.startObject(boundingBox);
+
+		this.objectNestingLevel += 1;
+	}
+	public endObject() {
+		super.endObject();
+
+		this.objectNestingLevel -= 1;
+	}
+}

package/src/rendering/SVGRenderer.ts

@@ -0,0 +1,159 @@
+
+import Path, { PathCommand, PathCommandType } from '../geometry/Path';
+import Rect2 from '../geometry/Rect2';
+import { Point2, Vec2 } from '../geometry/Vec2';
+import Viewport from '../Viewport';
+import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
+
+const svgNameSpace = 'http://www.w3.org/2000/svg';
+export default class SVGRenderer extends AbstractRenderer {
+	private currentPath: PathCommand[]|null;
+	private pathStart: Point2|null;
+
+	private lastPathStyle: RenderingStyle|null;
+	private lastPath: PathCommand[]|null;
+	private lastPathStart: Point2|null;
+
+	private mainGroup: SVGGElement;
+
+	public constructor(private elem: SVGSVGElement, viewport: Viewport) {
+		super(viewport);
+		this.clear();
+	}
+
+	public displaySize(): Vec2 {
+		return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
+	}
+
+	public clear() {
+		this.mainGroup = document.createElementNS(svgNameSpace, 'g');
+
+		// Remove all children
+		this.elem.replaceChildren(this.mainGroup);
+	}
+
+	protected beginPath(startPoint: Point2) {
+		this.currentPath = [];
+		this.pathStart = this.viewport.canvasToScreen(startPoint);
+		this.lastPathStart ??= this.pathStart;
+	}
+
+	protected endPath(style: RenderingStyle) {
+		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(this.lastPathStyle?.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
+	private 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);
+	}
+
+	public startObject(boundingBox: Rect2) {
+		super.startObject(boundingBox);
+
+		// Only accumulate a path within an object
+		this.lastPath = null;
+		this.lastPathStart = null;
+		this.lastPathStyle = null;
+	}
+
+	public endObject() {
+		super.endObject();
+
+		// Don't extend paths across objects
+		this.addPathToSVG();
+	}
+
+	protected lineTo(point: Point2) {
+		point = this.viewport.canvasToScreen(point);
+
+		this.currentPath!.push({
+			kind: PathCommandType.LineTo,
+			point,
+		});
+	}
+
+	protected moveTo(point: Point2) {
+		point = this.viewport.canvasToScreen(point);
+
+		this.currentPath!.push({
+			kind: PathCommandType.MoveTo,
+			point,
+		});
+	}
+
+	protected traceCubicBezierCurve(
+		controlPoint1: Point2, controlPoint2: Point2, endPoint: Point2
+	) {
+		controlPoint1 = this.viewport.canvasToScreen(controlPoint1);
+		controlPoint2 = this.viewport.canvasToScreen(controlPoint2);
+		endPoint = this.viewport.canvasToScreen(endPoint);
+
+		this.currentPath!.push({
+			kind: PathCommandType.CubicBezierTo,
+			controlPoint1,
+			controlPoint2,
+			endPoint,
+		});
+	}
+
+	protected traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2) {
+		controlPoint = this.viewport.canvasToScreen(controlPoint);
+		endPoint = this.viewport.canvasToScreen(endPoint);
+
+		this.currentPath!.push({
+			kind: PathCommandType.QuadraticBezierTo,
+			controlPoint,
+			endPoint,
+		});
+	}
+
+	public drawPoints(...points: Point2[]) {
+		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.
+	public drawSVGElem(elem: SVGElement) {
+		this.elem.appendChild(elem.cloneNode(true));
+	}
+}

package/src/testing/loadExpectExtensions.ts

@@ -0,0 +1,43 @@
+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: any, expected: any, ...eqArgs: any) {
+			let pass = false;
+			if ((expected ?? null) === null) {
+				pass = actual.eq(expected, ...eqArgs);
+			} else {
+				pass = expected.eq(actual, ...eqArgs);
+			}
+
+			return {
+				pass,
+				message: () => {
+					if (pass) {
+						return `Expected ${expected} not to .eq ${actual}. Options(${eqArgs})`;
+					}
+					return `Expected ${expected} to .eq ${actual}. Options(${eqArgs})`;
+				},
+			};
+		},
+	});
+};
+
+// Type declarations for custom matchers
+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;