js-draw 0.1.1 → 0.1.4

package/src/rendering/renderers/CanvasRenderer.ts

@@ -1,4 +1,5 @@
 import Color4 from '../../Color4';
+import Text, { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
@@ -26,16 +27,7 @@ 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();
+	private transformBy(transformBy: Mat33) {
 		// From MDN, transform(a,b,c,d,e,f)
 		// takes input such that
 		// ⎡ a c e ⎤
@@ -46,6 +38,19 @@ export default class CanvasRenderer extends AbstractRenderer {
 			transformBy.a2, transformBy.b2, // c, d
 			transformBy.a3, transformBy.b3, // e, f 
 		);
+	}
+
+	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();
+		this.transformBy(transformBy);
 		this.ctx.drawImage(other.ctx.canvas, 0, 0);
 		this.ctx.restore();
 	}
@@ -143,6 +148,25 @@ export default class CanvasRenderer extends AbstractRenderer {
 		super.drawPath(path);
 	}
 
+	public drawText(text: string, transform: Mat33, style: TextStyle): void {
+		this.ctx.save();
+		transform = this.getCanvasToScreenTransform().rightMul(transform);
+		this.transformBy(transform);
+		Text.applyTextStyles(this.ctx, style);
+
+		if (style.renderingStyle.fill.a !== 0) {
+			this.ctx.fillStyle = style.renderingStyle.fill.toHexString();
+			this.ctx.fillText(text, 0, 0);
+		}
+		if (style.renderingStyle.stroke) {
+			this.ctx.strokeStyle = style.renderingStyle.stroke.color.toHexString();
+			this.ctx.lineWidth = style.renderingStyle.stroke.width;
+			this.ctx.strokeText(text, 0, 0);
+		}
+
+		this.ctx.restore();
+	}
+
 	private clipLevels: number[] = [];
 	public startObject(boundingBox: Rect2, clip: boolean) {
 		if (this.isTooSmallToRender(boundingBox)) {

package/src/rendering/renderers/DummyRenderer.ts

@@ -1,5 +1,6 @@
 // Renderer that outputs nothing. Useful for automated tests.
 
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
@@ -14,6 +15,7 @@ export default class DummyRenderer extends AbstractRenderer {
 	public lastFillStyle: RenderingStyle|null = null;
 	public lastPoint: Point2|null = null;
 	public objectNestingLevel: number = 0;
+	public lastText: string|null = null;
 
 	// List of points drawn since the last clear.
 	public pointBuffer: Point2[] = [];
@@ -40,6 +42,7 @@ export default class DummyRenderer extends AbstractRenderer {
 		this.clearedCount ++;
 		this.renderedPathCount = 0;
 		this.pointBuffer = [];
+		this.lastText = null;
 
 		// Ensure all objects finished rendering
 		if (this.objectNestingLevel > 0) {
@@ -88,6 +91,11 @@ export default class DummyRenderer extends AbstractRenderer {
 		// As such, it is unlikely to be the target of automated tests.
 	}
 
+
+	public drawText(text: string, _transform: Mat33, _style: TextStyle): void {
+		this.lastText = text;
+	}
+
 	public startObject(boundingBox: Rect2, _clip: boolean) {
 		super.startObject(boundingBox);
 

package/src/rendering/renderers/SVGRenderer.ts

@@ -1,7 +1,11 @@
 
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import { TextStyle } from '../../components/Text';
+import Mat33 from '../../geometry/Mat33';
 import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
+import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
 
@@ -13,8 +17,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 +45,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,9 +56,6 @@ export default class SVGRenderer extends AbstractRenderer {
 			}
 		}
 		this.overwrittenAttrs = {};
-
-		// Remove all children
-		this.elem.replaceChildren(this.mainGroup);
 	}
 
 	protected beginPath(startPoint: Point2) {
@@ -106,7 +105,34 @@ 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 drawText(text: string, transform: Mat33, style: TextStyle): void {
+		transform = this.getCanvasToScreenTransform().rightMul(transform);
+
+		const textElem = document.createElementNS(svgNameSpace, 'text');
+		textElem.appendChild(document.createTextNode(text));
+		textElem.style.transform = `matrix(
+			${transform.a1}, ${transform.b1},
+			${transform.a2}, ${transform.b2},
+			${transform.a3}, ${transform.b3}
+		)`;
+		textElem.style.fontFamily = style.fontFamily;
+		textElem.style.fontVariant = style.fontVariant ?? '';
+		textElem.style.fontWeight = style.fontWeight ?? '';
+		textElem.style.fontSize = style.size + 'px';
+		textElem.style.fill = style.renderingStyle.fill.toHexString();
+
+		if (style.renderingStyle.stroke) {
+			const strokeStyle = style.renderingStyle.stroke;
+			textElem.style.stroke = strokeStyle.color.toHexString();
+			textElem.style.strokeWidth = strokeStyle.width + 'px';
+		}
+
+		this.elem.appendChild(textElem);
+		this.objectElems?.push(textElem);
 	}
 
 	public startObject(boundingBox: Rect2) {
@@ -116,13 +142,34 @@ 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;
+				const styleAttrs = loaderData[svgStyleAttributesDataKey] as SVGLoaderUnknownStyleAttribute[]|undefined;
+
+				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);
+					}
+				}
+			}
+		}
 	}
 
 	protected lineTo(point: Point2) {
@@ -175,7 +222,7 @@ 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);
 		});
 	}
 

package/src/testing/loadExpectExtensions.ts

@@ -15,10 +15,7 @@ export const loadExpectExtensions = () => {
 			return {
 				pass,
 				message: () => {
-					if (pass) {
-						return `Expected ${expected} not to .eq ${actual}. Options(${eqArgs})`;
-					}
-					return `Expected ${expected} to .eq ${actual}. Options(${eqArgs})`;
+					return `Expected ${pass ? '!' : ''}(${actual}).eq(${expected}). Options(${eqArgs})`;
 				},
 			};
 		},