js-draw 0.0.10 → 0.1.2

package/src/rendering/{CanvasRenderer.ts → renderers/CanvasRenderer.ts}

@@ -1,8 +1,9 @@
-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 Color4 from '../../Color4';
+import Mat33 from '../../geometry/Mat33';
+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 {
@@ -25,6 +26,30 @@ export default class CanvasRenderer extends AbstractRenderer {
 		this.setDraftMode(false);
 	}
 
+	public canRenderFromWithoutDataLoss(other: AbstractRenderer) {
+		return other instanceof CanvasRenderer;
+	}
+
+	public renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void {
+		if (!(other instanceof CanvasRenderer)) {
+			throw new Error(`${other} cannot be rendered onto ${this}`);
+		}
+		transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
+		this.ctx.save();
+		// From MDN, transform(a,b,c,d,e,f)
+		// takes input such that
+		// ⎡ a c e ⎤
+		// ⎢ b d f ⎥ transforms content drawn to [ctx].
+		// ⎣ 0 0 1 ⎦
+		this.ctx.transform(
+			transformBy.a1, transformBy.b1, // a, b
+			transformBy.a2, transformBy.b2, // c, d
+			transformBy.a3, transformBy.b3, // e, f 
+		);
+		this.ctx.drawImage(other.ctx.canvas, 0, 0);
+		this.ctx.restore();
+	}
+
 	// Set parameters for lower/higher quality rendering
 	public setDraftMode(draftMode: boolean) {
 		if (draftMode) {
@@ -50,7 +75,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 	}
 
 	protected beginPath(startPoint: Point2) {
-		startPoint = this.viewport.canvasToScreen(startPoint);
+		startPoint = this.canvasToScreen(startPoint);
 
 		this.ctx.beginPath();
 		this.ctx.moveTo(startPoint.x, startPoint.y);
@@ -62,7 +87,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 
 		if (style.stroke) {
 			this.ctx.strokeStyle = style.stroke.color.toHexString();
-			this.ctx.lineWidth = this.viewport.getScaleFactor() * style.stroke.width;
+			this.ctx.lineWidth = this.getSizeOfCanvasPixelOnScreen() * style.stroke.width;
 			this.ctx.stroke();
 		}
 
@@ -70,19 +95,19 @@ export default class CanvasRenderer extends AbstractRenderer {
 	}
 
 	protected lineTo(point: Point2) {
-		point = this.viewport.canvasToScreen(point);
+		point = this.canvasToScreen(point);
 		this.ctx.lineTo(point.x, point.y);
 	}
 
 	protected moveTo(point: Point2) {
-		point = this.viewport.canvasToScreen(point);
+		point = this.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);
+		p1 = this.canvasToScreen(p1);
+		p2 = this.canvasToScreen(p2);
+		p3 = this.canvasToScreen(p3);
 
 		// Approximate the curve if small enough.
 		const delta1 = p2.minus(p1);
@@ -96,8 +121,8 @@ export default class CanvasRenderer extends AbstractRenderer {
 	}
 
 	protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3) {
-		controlPoint = this.viewport.canvasToScreen(controlPoint);
-		endPoint = this.viewport.canvasToScreen(endPoint);
+		controlPoint = this.canvasToScreen(controlPoint);
+		endPoint = this.canvasToScreen(endPoint);
 
 		// Approximate the curve with a line if small enough
 		const delta = controlPoint.minus(endPoint);
@@ -118,23 +143,35 @@ export default class CanvasRenderer extends AbstractRenderer {
 		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 bothDimenMinSize = this.minRenderSizeBothDimens;
-		const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
-		const anyDimenMinSize = this.minRenderSizeAnyDimen;
-		const anyTooSmall = Math.abs(diagonal.x) < anyDimenMinSize || Math.abs(diagonal.y) < anyDimenMinSize;
-
-		if (bothTooSmall || anyTooSmall) {
+	private clipLevels: number[] = [];
+	public startObject(boundingBox: Rect2, clip: boolean) {
+		if (this.isTooSmallToRender(boundingBox)) {
 			this.ignoreObjectsAboveLevel = this.getNestingLevel();
 			this.ignoringObject = true;
 		}
 
 		super.startObject(boundingBox);
+
+		if (!this.ignoringObject && clip) {
+			this.clipLevels.push(this.objectLevel);
+			this.ctx.save();
+			this.ctx.beginPath();
+			for (const corner of boundingBox.corners) {
+				const screenCorner = this.canvasToScreen(corner);
+				this.ctx.lineTo(screenCorner.x, screenCorner.y);
+			}
+			this.ctx.clip();
+		}
 	}
+
 	public endObject() {
+		if (!this.ignoringObject && this.clipLevels.length > 0) {
+			if (this.clipLevels[this.clipLevels.length - 1] === this.objectLevel) {
+				this.ctx.restore();
+				this.clipLevels.pop();
+			}
+		}
+
 		super.endObject();
 
 		// If exiting an object with a too-small-to-draw bounding box,
@@ -148,7 +185,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 		const pointRadius = 10;
 
 		for (let i = 0; i < points.length; i++) {
-			const point = this.viewport.canvasToScreen(points[i]);
+			const point = this.canvasToScreen(points[i]);
 
 			this.ctx.beginPath();
 			this.ctx.arc(point.x, point.y, pointRadius, 0, Math.PI * 2);
@@ -167,4 +204,16 @@ export default class CanvasRenderer extends AbstractRenderer {
 			this.ctx.fillText(`${i}`, point.x, point.y, pointRadius * 2);
 		}
 	}
+
+	public isTooSmallToRender(rect: Rect2): boolean {
+		// Should we ignore all objects within this object's bbox?
+		const diagonal = this.getCanvasToScreenTransform().transformVec3(rect.size);
+
+		const bothDimenMinSize = this.minRenderSizeBothDimens;
+		const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
+		const anyDimenMinSize = this.minRenderSizeAnyDimen;
+		const anyTooSmall = Math.abs(diagonal.x) < anyDimenMinSize || Math.abs(diagonal.y) < anyDimenMinSize;
+		
+		return bothTooSmall || anyTooSmall;
+	}
 }

package/src/rendering/renderers/DummyRenderer.test.ts

@@ -0,0 +1,43 @@
+
+import EventDispatcher from '../../EventDispatcher';
+import Mat33 from '../../geometry/Mat33';
+import { Vec2 } from '../../geometry/Vec2';
+import Viewport from '../../Viewport';
+import DummyRenderer from './DummyRenderer';
+
+const makeRenderer = (): [DummyRenderer, Viewport] => {
+	const viewport = new Viewport(new EventDispatcher());
+	return [ new DummyRenderer(viewport), viewport ];
+};
+
+describe('DummyRenderer', () => {
+	it('should correctly calculate the size of a pixel on the screen', () => {
+		const [ renderer, viewport ] = makeRenderer();
+		viewport.updateScreenSize(Vec2.of(100, 100));
+		viewport.resetTransform(Mat33.identity);
+
+		expect(1/viewport.getScaleFactor()).toBe(1);
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(1);
+
+		// Updating the translation matrix shouldn't affect the size of a pixel on the
+		// screen.
+		renderer.setTransform(Mat33.translation(Vec2.of(-1, -2)));
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(1);
+		viewport.resetTransform(Mat33.translation(Vec2.of(3, 4)));
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(1);
+
+		// Scale objects by a factor of 2 when drawing
+		renderer.setTransform(Mat33.scaling2D(2));
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(2);
+		viewport.resetTransform(Mat33.scaling2D(0.5));
+
+		// When a renderer transform is set, **only** the renderer transform should be used.
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(2);
+		renderer.setTransform(null);
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(0.5);
+
+		// Rotating should not affect the size of a pixel
+		renderer.setTransform(Mat33.zRotation(Math.PI / 4).rightMul(Mat33.scaling2D(4)));
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(4);
+	});
+});

package/src/rendering/{DummyRenderer.ts → renderers/DummyRenderer.ts}

@@ -1,9 +1,10 @@
 // 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 Mat33 from '../../geometry/Mat33';
+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 {
@@ -22,8 +23,17 @@ export default class DummyRenderer extends AbstractRenderer {
 	}
 
 	public displaySize(): Vec2 {
-		// Return a dummy
-		return Vec2.of(640, 480);
+		// Do we have a stored viewport size?
+		const viewportSize = this.getViewport().getResolution();
+
+		// Don't use a 0x0 viewport — DummyRenderer is often used
+		// for tests that run without a display, so pretend we have a
+		// reasonable-sized display.
+		if (viewportSize.x === 0 || viewportSize.y === 0) {
+			return Vec2.of(640, 480);
+		}
+
+		return viewportSize;
 	}
 
 	public clear() {
@@ -47,18 +57,29 @@ export default class DummyRenderer extends AbstractRenderer {
 		this.lastFillStyle = style;
 	}
 	protected lineTo(point: Vec3) {
+		point = this.canvasToScreen(point);
+
 		this.lastPoint = point;
 		this.pointBuffer.push(point);
 	}
 	protected moveTo(point: Point2) {
+		point = this.canvasToScreen(point);
+
 		this.lastPoint = point;
 		this.pointBuffer.push(point);
 	}
 	protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3) {
+		p1 = this.canvasToScreen(p1);
+		p2 = this.canvasToScreen(p2);
+		p3 = this.canvasToScreen(p3);
+
 		this.lastPoint = p3;
 		this.pointBuffer.push(p1, p2, p3);
 	}
 	protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3) {
+		controlPoint = this.canvasToScreen(controlPoint);
+		endPoint = this.canvasToScreen(endPoint);
+
 		this.lastPoint = endPoint;
 		this.pointBuffer.push(controlPoint, endPoint);
 	}
@@ -67,7 +88,7 @@ export default class DummyRenderer extends AbstractRenderer {
 		// As such, it is unlikely to be the target of automated tests.
 	}
 
-	public startObject(boundingBox: Rect2) {
+	public startObject(boundingBox: Rect2, _clip: boolean) {
 		super.startObject(boundingBox);
 
 		this.objectNestingLevel += 1;
@@ -77,4 +98,26 @@ export default class DummyRenderer extends AbstractRenderer {
 
 		this.objectNestingLevel -= 1;
 	}
+
+	public isTooSmallToRender(_rect: Rect2): boolean {
+		return false;
+	}
+
+
+	public canRenderFromWithoutDataLoss(other: AbstractRenderer) {
+		return other instanceof DummyRenderer;
+	}
+
+	public renderFromOtherOfSameType(transform: Mat33, other: AbstractRenderer): void {
+		if (!(other instanceof DummyRenderer)) {
+			throw new Error(`${other} cannot be rendered onto ${this}`);
+		}
+
+		this.renderedPathCount += other.renderedPathCount;
+		this.lastFillStyle = other.lastFillStyle;
+		this.lastPoint = other.lastPoint;
+		this.pointBuffer.push(...other.pointBuffer.map(point => {
+			return transform.transformVec2(point);
+		}));
+	}
 }

package/src/rendering/{SVGRenderer.ts → renderers/SVGRenderer.ts}

@@ -1,8 +1,10 @@
 
-import Path, { PathCommand, PathCommandType } from '../geometry/Path';
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Viewport from '../Viewport';
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import { svgAttributesDataKey, SVGLoaderUnknownAttribute } from '../../SVGLoader';
+import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
 
 const svgNameSpace = 'http://www.w3.org/2000/svg';
@@ -13,8 +15,8 @@ export default class SVGRenderer extends AbstractRenderer {
 	private lastPathStyle: RenderingStyle|null;
 	private lastPath: PathCommand[]|null;
 	private lastPathStart: Point2|null;
+	private objectElems: SVGElement[]|null = null;
 
-	private mainGroup: SVGGElement;
 	private overwrittenAttrs: Record<string, string|null> = {};
 
 	public constructor(private elem: SVGSVGElement, viewport: Viewport) {
@@ -41,8 +43,6 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	public clear() {
-		this.mainGroup = document.createElementNS(svgNameSpace, 'g');
-
 		// Restore all alltributes
 		for (const attrName in this.overwrittenAttrs) {
 			const value = this.overwrittenAttrs[attrName];
@@ -54,14 +54,11 @@ export default class SVGRenderer extends AbstractRenderer {
 			}
 		}
 		this.overwrittenAttrs = {};
-
-		// Remove all children
-		this.elem.replaceChildren(this.mainGroup);
 	}
 
 	protected beginPath(startPoint: Point2) {
 		this.currentPath = [];
-		this.pathStart = this.viewport.canvasToScreen(startPoint);
+		this.pathStart = this.canvasToScreen(startPoint);
 		this.lastPathStart ??= this.pathStart;
 	}
 
@@ -106,7 +103,8 @@ export default class SVGRenderer extends AbstractRenderer {
 			pathElem.setAttribute('stroke-width', style.stroke.width.toString());
 		}
 
-		this.mainGroup.appendChild(pathElem);
+		this.elem.appendChild(pathElem);
+		this.objectElems?.push(pathElem);
 	}
 
 	public startObject(boundingBox: Rect2) {
@@ -116,17 +114,31 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.lastPath = null;
 		this.lastPathStart = null;
 		this.lastPathStyle = null;
+		this.objectElems = [];
 	}
 
-	public endObject() {
-		super.endObject();
+	public endObject(loaderData?: LoadSaveDataTable) {
+		super.endObject(loaderData);
 
 		// Don't extend paths across objects
 		this.addPathToSVG();
+
+		if (loaderData) {
+			// Restore any attributes unsupported by the app.
+			for (const elem of this.objectElems ?? []) {
+				const attrs = loaderData[svgAttributesDataKey] as SVGLoaderUnknownAttribute[]|undefined;
+
+				if (attrs) {
+					for (const [ attr, value ] of attrs) {
+						elem.setAttribute(attr, value);
+					}
+				}
+			}
+		}
 	}
 
 	protected lineTo(point: Point2) {
-		point = this.viewport.canvasToScreen(point);
+		point = this.canvasToScreen(point);
 
 		this.currentPath!.push({
 			kind: PathCommandType.LineTo,
@@ -135,7 +147,7 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	protected moveTo(point: Point2) {
-		point = this.viewport.canvasToScreen(point);
+		point = this.canvasToScreen(point);
 
 		this.currentPath!.push({
 			kind: PathCommandType.MoveTo,
@@ -146,9 +158,9 @@ export default class SVGRenderer extends AbstractRenderer {
 	protected traceCubicBezierCurve(
 		controlPoint1: Point2, controlPoint2: Point2, endPoint: Point2
 	) {
-		controlPoint1 = this.viewport.canvasToScreen(controlPoint1);
-		controlPoint2 = this.viewport.canvasToScreen(controlPoint2);
-		endPoint = this.viewport.canvasToScreen(endPoint);
+		controlPoint1 = this.canvasToScreen(controlPoint1);
+		controlPoint2 = this.canvasToScreen(controlPoint2);
+		endPoint = this.canvasToScreen(endPoint);
 
 		this.currentPath!.push({
 			kind: PathCommandType.CubicBezierTo,
@@ -159,8 +171,8 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	protected traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2) {
-		controlPoint = this.viewport.canvasToScreen(controlPoint);
-		endPoint = this.viewport.canvasToScreen(endPoint);
+		controlPoint = this.canvasToScreen(controlPoint);
+		endPoint = this.canvasToScreen(endPoint);
 
 		this.currentPath!.push({
 			kind: PathCommandType.QuadraticBezierTo,
@@ -175,12 +187,16 @@ export default class SVGRenderer extends AbstractRenderer {
 			elem.setAttribute('cx', `${point.x}`);
 			elem.setAttribute('cy', `${point.y}`);
 			elem.setAttribute('r', '15');
-			this.mainGroup.appendChild(elem);
+			this.elem.appendChild(elem);
 		});
 	}
 
-	// Renders a copy of the given element.
+	// Renders a **copy** of the given element.
 	public drawSVGElem(elem: SVGElement) {
 		this.elem.appendChild(elem.cloneNode(true));
 	}
+
+	public isTooSmallToRender(_rect: Rect2): boolean {
+		return false;
+	}
 }

package/src/testing/createEditor.ts

@@ -1,4 +1,4 @@
-import { RenderingMode } from '../Display';
+import { RenderingMode } from '../rendering/Display';
 import Editor from '../Editor';
 
 export default () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });