js-draw 0.1.0 → 0.1.3

package/src/rendering/caching/RenderingCacheNode.ts

@@ -172,7 +172,12 @@ export default class RenderingCacheNode {
 		const newItems = [];
 		// Divide [items] until nodes are leaves or smaller than this
 		for (const item of items) {
-			if (item.getBBox().maxDimension >= this.region.maxDimension) {
+			const bbox = item.getBBox();
+			if (!bbox.intersects(this.region)) {
+				continue;
+			}
+
+			if (bbox.maxDimension >= this.region.maxDimension) {
 				newItems.push(...item.getChildrenOrSelfIntersectingRegion(this.region));
 			} else {
 				newItems.push(item);
@@ -186,6 +191,10 @@ export default class RenderingCacheNode {
 			return;
 		}
 
+		if (debugMode) {
+			screenRenderer.drawRect(this.region, 0.5 * viewport.getSizeOfPixelOnCanvas(), { fill: Color4.yellow });
+		}
+
 		// Could we render direclty from [this] or do we need to recurse?
 		const couldRender = this.renderingWouldBeHighEnoughResolution(viewport);
 		if (!couldRender) {
@@ -198,7 +207,11 @@ export default class RenderingCacheNode {
 			// Determine whether we already have rendered the items
 			const leaves = [];
 			for (const item of items) {
-				leaves.push(...item.getLeavesIntersectingRegion(this.region));
+				leaves.push(
+					...item.getLeavesIntersectingRegion(
+						this.region, rect => rect.w / this.region.w < 2 / this.cacheState.props.blockResolution.x,
+					)
+				);
 			}
 			sortLeavesByZIndex(leaves);
 			const leavesByIds = this.computeSortedByLeafIds(leaves);
@@ -266,7 +279,7 @@ export default class RenderingCacheNode {
 							}
 
 							if (debugMode) {
-								screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.yellow });
+								screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.clay });
 							}
 						}
 					}

package/src/rendering/caching/testUtils.ts

@@ -24,6 +24,7 @@ export const createCache = (onRenderAlloc?: RenderAllocCallback, cacheOptions?:
 		cacheSize: 500 * 10 * 4,
 		maxScale: 2,
 		minComponentsPerCache: 0,
+		minComponentsToUseCache: 0,
 		...cacheOptions
 	});
 

package/src/rendering/caching/types.ts

@@ -21,6 +21,10 @@ export interface CacheProps {
 
     // Minimum component count to cache, rather than just re-render each time.
     minComponentsPerCache: number;
+
+    // Minimum number of strokes/etc. to use the cache to render, isntead of
+    // rendering directly.
+    minComponentsToUseCache: number;
 }
 
 // CacheRecordManager relies on a partial copy of the shared state. Thus,

package/src/rendering/renderers/AbstractRenderer.ts

@@ -1,4 +1,6 @@
 import Color4 from '../../Color4';
+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';
@@ -28,6 +30,7 @@ const stylesEqual = (a: RenderingStyle, b: RenderingStyle) => {
 export default abstract class AbstractRenderer {
 	// If null, this' transformation is linked to the Viewport
 	private selfTransform: Mat33|null = null;
+	private transformStack: Array<Mat33|null> = [];
 
 	protected constructor(private viewport: Viewport) { }
 
@@ -50,6 +53,7 @@ export default abstract class AbstractRenderer {
 	protected abstract traceQuadraticBezierCurve(
 		controlPoint: Point2, endPoint: Point2,
 	): void;
+	public abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
 
 	// Returns true iff the given rectangle is so small, rendering anything within
 	// it has no effect on the image.
@@ -128,7 +132,7 @@ export default abstract class AbstractRenderer {
 		this.objectLevel ++;
 	}
 
-	public endObject() {
+	public endObject(_loaderData?: LoadSaveDataTable) {
 		// Render the paths all at once
 		this.flushPath();
 		this.currentPaths = null;
@@ -165,6 +169,19 @@ export default abstract class AbstractRenderer {
 		this.selfTransform = transform;
 	}
 
+	public pushTransform(transform: Mat33) {
+		this.transformStack.push(this.selfTransform);
+		this.setTransform(this.getCanvasToScreenTransform().rightMul(transform));
+	}
+
+	public popTransform() {
+		if (this.transformStack.length === 0) {
+			throw new Error('Unable to pop more transforms than have been pushed!');
+		}
+
+		this.setTransform(this.transformStack.pop() ?? null);
+	}
+
 	// Get the matrix that transforms a vector on the canvas to a vector on this'
 	// rendering target.
 	public getCanvasToScreenTransform(): Mat33 {

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})`;
 				},
 			};
 		},