js-draw 0.0.10 → 0.1.2

package/src/rendering/caching/RenderingCache.test.ts

@@ -0,0 +1,44 @@
+/* @jest-environment jsdom */
+
+import DummyRenderer from '../renderers/DummyRenderer';
+import { createCache } from './testUtils';
+import Stroke from '../../components/Stroke';
+import Path from '../../geometry/Path';
+import Color4 from '../../Color4';
+import EditorImage from '../../EditorImage';
+import Viewport from '../../Viewport';
+import Mat33 from '../../geometry/Mat33';
+
+describe('RenderingCache', () => {
+	const testPath = Path.fromString('M0,0 l100,500 l-20,20 L-100,-100');
+	const testStroke = new Stroke([ testPath.toRenderable({ fill: Color4.purple }) ]);
+
+	it('should create a root node large enough to contain the viewport', () => {
+		let lastRenderer: DummyRenderer|null = null;
+		let allocdRenderers: number = 0;
+
+		const { editor, cache } = createCache((renderer) => {
+			allocdRenderers ++;
+			lastRenderer = renderer;
+		});
+		const screenRenderer = editor.display.getDryInkRenderer() as DummyRenderer;
+
+		// No objects: Should not create a renderer.
+		expect(lastRenderer).toBeNull();
+		editor.image.renderWithCache(screenRenderer, cache, editor.viewport);
+		expect(lastRenderer).toBeNull();
+
+		editor.dispatch(new EditorImage.AddElementCommand(testStroke));
+		editor.image.renderWithCache(screenRenderer, cache, editor.viewport);
+
+		expect(allocdRenderers).toBeGreaterThanOrEqual(1);
+		expect(lastRenderer).not.toBeNull();
+		expect(lastRenderer!.renderedPathCount).toBe(1);
+
+		editor.dispatch(new Viewport.ViewportTransform(Mat33.scaling2D(0.1)));
+		editor.image.renderWithCache(screenRenderer, cache, editor.viewport);
+		expect(allocdRenderers).toBe(1);
+		expect(lastRenderer!.renderedPathCount).toBe(1);
+		expect(screenRenderer.renderedPathCount).toBeGreaterThanOrEqual(1);
+	});
+});

package/src/rendering/caching/RenderingCache.ts

@@ -0,0 +1,63 @@
+import { ImageNode } from '../../EditorImage';
+import Rect2 from '../../geometry/Rect2';
+import Viewport from '../../Viewport';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import RenderingCacheNode from './RenderingCacheNode';
+import { CacheRecordManager } from './CacheRecordManager';
+import { CacheProps, CacheState, PartialCacheState } from './types';
+
+export default class RenderingCache {
+	private partialSharedState: PartialCacheState;
+	private recordManager: CacheRecordManager;
+	private rootNode: RenderingCacheNode|null;
+
+	public constructor(cacheProps: CacheProps) {
+		this.partialSharedState = {
+			props: cacheProps,
+			currentRenderingCycle: 0,
+		};
+		this.recordManager = new CacheRecordManager(this.partialSharedState);
+	}
+
+	public getSharedState(): CacheState {
+		return {
+			...this.partialSharedState,
+			recordManager: this.recordManager,
+		};
+	}
+
+	public render(screenRenderer: AbstractRenderer, image: ImageNode, viewport: Viewport) {
+		const visibleRect = viewport.visibleRect;
+		this.partialSharedState.currentRenderingCycle ++;
+
+		// If we can't use the cache,
+		if (!this.partialSharedState.props.isOfCorrectType(screenRenderer)) {
+			image.render(screenRenderer, visibleRect);
+			return;
+		}
+
+		if (!this.rootNode) {
+			// Adjust the node so that it has the correct aspect ratio
+			const res = this.partialSharedState.props.blockResolution;
+
+			const topLeft = visibleRect.topLeft;
+			this.rootNode = new RenderingCacheNode(
+				new Rect2(topLeft.x, topLeft.y, res.x, res.y),
+				this.getSharedState()
+			);
+		}
+
+		while (!this.rootNode!.region.containsRect(visibleRect)) {
+			this.rootNode = this.rootNode!.generateParent();
+		}
+
+		this.rootNode = this.rootNode!.smallestChildContaining(visibleRect) ?? this.rootNode;
+
+		const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect));
+		if (visibleLeaves.length > this.partialSharedState.props.minComponentsToUseCache) {
+			this.rootNode!.renderItems(screenRenderer, [ image ], viewport);
+		} else {
+			image.render(screenRenderer, visibleRect);
+		}
+	}
+}

package/src/rendering/caching/RenderingCacheNode.ts

@@ -0,0 +1,378 @@
+
+// A cache record with sub-nodes.
+
+import Color4 from '../../Color4';
+import { ImageNode, sortLeavesByZIndex } from '../../EditorImage';
+import Rect2 from '../../geometry/Rect2';
+import Viewport from '../../Viewport';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import CacheRecord from './CacheRecord';
+import { CacheState } from './types';
+
+// 3x3 divisions for each node.
+const cacheDivisionSize = 3;
+
+// True: Show rendering updates.
+const debugMode = false;
+
+export default class RenderingCacheNode {
+	// invariant: instantiatedChildren.length === 9
+	private instantiatedChildren: RenderingCacheNode[] = [];
+	private parent: RenderingCacheNode|null = null;
+
+	private cachedRenderer: CacheRecord|null = null;
+	// invariant: sortedInAscendingOrder(renderedIds)
+	private renderedIds: Array<number> = [];
+	private renderedMaxZIndex: number|null = null;
+
+	public constructor(
+		public readonly region: Rect2, private readonly cacheState: CacheState
+	) {
+	}
+
+	// Creates a previous layer of the cache tree and adds this as a child near the
+	// center of the previous layer's children.
+	// Returns this' parent if it already exists.
+	public generateParent(): RenderingCacheNode {
+		if (this.parent) {
+			return this.parent;
+		}
+
+		const parentRegion = Rect2.fromCorners(
+			this.region.topLeft.minus(this.region.size),
+			this.region.bottomRight.plus(this.region.size)
+		);
+		const parent = new RenderingCacheNode(parentRegion, this.cacheState);
+		parent.generateChildren();
+
+		// Ensure the new node is matches the middle child's region.
+		const checkTolerance = this.region.maxDimension / 100;
+		const middleChildIdx = (parent.instantiatedChildren.length - 1) / 2;
+		if (!parent.instantiatedChildren[middleChildIdx].region.eq(this.region, checkTolerance)) {
+			console.error(parent.instantiatedChildren[middleChildIdx].region, '≠', this.region);
+			throw new Error('Logic error: [this] is not contained within its parent\'s center child');
+		}
+
+		// Replace the middle child
+		parent.instantiatedChildren[middleChildIdx] = this;
+		this.parent = parent;
+
+		return parent;
+	}
+
+	// Generates children, if missing.
+	private generateChildren() {
+		if (this.instantiatedChildren.length === 0) {
+			const childRects = this.region.divideIntoGrid(cacheDivisionSize, cacheDivisionSize);
+
+			for (const rect of childRects) {
+				const child = new RenderingCacheNode(rect, this.cacheState);
+				child.parent = this;
+				this.instantiatedChildren.push(child);
+			}
+		}
+		this.checkRep();
+	}
+
+	// Returns CacheNodes directly contained within this.
+	private getChildren(): RenderingCacheNode[] {
+		this.checkRep();
+		this.generateChildren();
+
+		return this.instantiatedChildren;
+	}
+
+	public smallestChildContaining(rect: Rect2): RenderingCacheNode|null {
+		const largerThanChildren = rect.maxDimension > this.region.maxDimension / cacheDivisionSize;
+		if (!this.region.containsRect(rect) || largerThanChildren) {
+			return null;
+		}
+
+		for (const child of this.getChildren()) {
+			if (child.region.containsRect(rect)) {
+				return child.smallestChildContaining(rect) ?? child;
+			}
+		}
+
+		return null;
+	}
+
+	// => [true] iff [this] can be rendered without too much scaling
+	private renderingWouldBeHighEnoughResolution(viewport: Viewport) {
+		// Determine how 1px in this corresponds to 1px on the canvas.
+		//  this.region.w is in canvas units. Thus,
+		const sizeOfThisPixelOnCanvas = this.region.w / this.cacheState.props.blockResolution.x;
+		const sizeOfThisPixelOnScreen = viewport.getScaleFactor() * sizeOfThisPixelOnCanvas;
+
+		if (sizeOfThisPixelOnScreen > this.cacheState.props.maxScale) {
+			return false;
+		}
+		return true;
+	}
+
+	// => [true] if all children of this can be rendered from their caches.
+	private allChildrenCanRender(viewport: Viewport, leavesSortedById: ImageNode[]) {
+		if (this.instantiatedChildren.length === 0) {
+			return false;
+		}
+
+		for (const child of this.instantiatedChildren) {
+			if (!child.region.intersects(viewport.visibleRect)) {
+				continue;
+			}
+
+			if (!child.renderingIsUpToDate(this.idsOfIntersecting(leavesSortedById))) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	private computeSortedByLeafIds(leaves: ImageNode[]) {
+		const ids = leaves.slice();
+		ids.sort((a, b) => a.getId() - b.getId());
+		return ids;
+	}
+
+	// Returns a list of the ids of the nodes intersecting this
+	private idsOfIntersecting(nodes: ImageNode[]) {
+		const result = [];
+		for (const node of nodes) {
+			if (node.getBBox().intersects(this.region)) {
+				result.push(node.getId());
+			}
+		}
+		return result;
+	}
+
+	private renderingIsUpToDate(sortedIds: number[]) {
+		if (this.cachedRenderer === null || sortedIds.length !== this.renderedIds.length) {
+			return false;
+		}
+
+		for (let i = 0; i < sortedIds.length; i++) {
+			if (sortedIds[i] !== this.renderedIds[i]) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	// Render all [items] within [viewport]
+	public renderItems(screenRenderer: AbstractRenderer, items: ImageNode[], viewport: Viewport) {
+		if (
+			!viewport.visibleRect.intersects(this.region)
+			|| items.length === 0
+		) {
+			return;
+		}
+
+		const newItems = [];
+		// Divide [items] until nodes are leaves or smaller than this
+		for (const item of items) {
+			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);
+			}
+		}
+		items = newItems;
+
+		// Can we cache at all?
+		if (!this.cacheState.props.isOfCorrectType(screenRenderer)) {
+			items.forEach(item => item.render(screenRenderer, viewport.visibleRect));
+			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) {
+			for (const child of this.getChildren()) {
+				child.renderItems(screenRenderer, items.filter(item => {
+					return item.getBBox().intersects(child.region);
+				}), viewport);
+			}
+		} else {
+			// Determine whether we already have rendered the items
+			const leaves = [];
+			for (const item of items) {
+				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);
+
+			// No intersecting leaves? No need to render
+			if (leavesByIds.length === 0) {
+				return;
+			}
+
+			const leafIds = leavesByIds.map(leaf => leaf.getId());
+
+			let thisRenderer;
+			if (!this.renderingIsUpToDate(leafIds)) {
+				if (this.allChildrenCanRender(viewport, leavesByIds)) {
+					for (const child of this.getChildren()) {
+						child.renderItems(screenRenderer, items, viewport);
+					}
+					return;
+				}
+
+				// Is it worth it to render the items?
+				// TODO: Replace this with something performace based.
+				// TODO: Determine whether it is 'worth it' to cache this depending on rendering time.
+				if (leavesByIds.length > this.cacheState.props.minComponentsPerCache) {
+					let fullRerenderNeeded = true;
+					if (!this.cachedRenderer) {
+						this.cachedRenderer = this.cacheState.recordManager.allocCanvas(
+							this.region,
+							() => this.onRegionDealloc()
+						);
+					} else if (leavesByIds.length > this.renderedIds.length && this.renderedMaxZIndex !== null) {
+						// We often don't need to do a full re-render even if something's changed.
+						// Check whether we can just draw on top of the existing cache.
+						const newLeaves = [];
+
+						let minNewZIndex: number|null = null;
+
+						for (let i = 0; i < leavesByIds.length; i++) {
+							const leaf = leavesByIds[i];
+							const content = leaf.getContent()!;
+
+							const zIndex = content.getZIndex();
+							if (i >= this.renderedIds.length || leaf.getId() !== this.renderedIds[i]) {
+								newLeaves.push(leaf);
+
+								if (minNewZIndex === null || zIndex < minNewZIndex) {
+									minNewZIndex = zIndex;
+								}
+							}
+						}
+
+						if (minNewZIndex !== null && minNewZIndex > this.renderedMaxZIndex!) {
+							fullRerenderNeeded = false;
+							thisRenderer = this.cachedRenderer.startRender();
+
+							// Looping is faster than re-sorting.
+							for (let i = 0; i < leaves.length; i++) {
+								const leaf = leaves[i];
+								const zIndex = leaf.getContent()!.getZIndex();
+
+								if (zIndex > this.renderedMaxZIndex) {
+									leaf.render(thisRenderer, this.region);
+									this.renderedMaxZIndex = zIndex;
+								}
+							}
+
+							if (debugMode) {
+								screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.clay });
+							}
+						}
+					}
+
+					if (fullRerenderNeeded) {
+						thisRenderer = this.cachedRenderer.startRender();
+						thisRenderer.clear();
+
+						this.renderedMaxZIndex = null;
+						for (const leaf of leaves) {
+							const content = leaf.getContent()!;
+							this.renderedMaxZIndex ??= content.getZIndex();
+							this.renderedMaxZIndex = Math.max(this.renderedMaxZIndex, content.getZIndex());
+		
+							leaf.render(thisRenderer, this.region);
+						}
+
+						if (debugMode) {
+							screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.red });
+						}
+					}
+					this.renderedIds = leafIds;
+				} else {
+					this.cachedRenderer?.dealloc();
+
+					// Slightly increase the clip region to prevent seams.
+					// Divide by two because grownBy expands the rectangle on all sides.
+					const pixelSize = viewport.getSizeOfPixelOnCanvas();
+					const expandedRegion = new Rect2(
+						this.region.x, this.region.y,
+						this.region.w + pixelSize, this.region.h + pixelSize
+					);
+
+					const clip = true;
+					screenRenderer.startObject(expandedRegion, clip);
+					for (const leaf of leaves) {
+						leaf.render(screenRenderer, this.region.intersection(viewport.visibleRect)!);
+					}
+
+					screenRenderer.endObject();
+				}
+			} else {
+				thisRenderer = this.cachedRenderer!.startRender();
+			}
+
+			if (thisRenderer) {
+				const transformMat = this.cachedRenderer!.getTransform(this.region).inverse();
+				screenRenderer.renderFromOtherOfSameType(transformMat, thisRenderer);
+			}
+
+			// Can we clean up this' children? (Are they unused?)
+			if (this.instantiatedChildren.every(child => child.isEmpty())) {
+				this.instantiatedChildren = [];
+			}
+		}
+
+		this.checkRep();
+	}
+
+	// Returns true iff this/its children have no cached state.
+	private isEmpty(): boolean {
+		if (this.cachedRenderer !== null) {
+			return false;
+		}
+
+		return this.instantiatedChildren.every(child => child.isEmpty());
+	}
+
+	private onRegionDealloc() {
+		this.cachedRenderer = null;
+		if (this.isEmpty()) {
+			this.instantiatedChildren = [];
+		}
+	}
+
+	private checkRep() {
+		if (this.instantiatedChildren.length !== cacheDivisionSize * cacheDivisionSize && this.instantiatedChildren.length !== 0) {
+			throw new Error('Repcheck: Wrong number of children');
+		}
+
+		if (this.renderedIds[1] !== undefined && this.renderedIds[0] >= this.renderedIds[1]) {
+			console.error(this.renderedIds);
+			throw new Error('Repcheck: First two ids are not in ascending order!');
+		}
+
+		for (const child of this.instantiatedChildren) {
+			if (child.parent !== this) {
+				throw new Error('Children should be linked to their parents!');
+			}
+		}
+
+		if (this.cachedRenderer && !this.cachedRenderer.isAllocd()) {
+			throw new Error('this\' cachedRenderer != null, but is dealloc\'d');
+		}
+	}
+}

package/src/rendering/caching/testUtils.ts

@@ -0,0 +1,35 @@
+import { Vec2 } from '../../geometry/Vec2';
+import DummyRenderer from '../renderers/DummyRenderer';
+import createEditor from '../../testing/createEditor';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import RenderingCache from './RenderingCache';
+import { CacheProps } from './types';
+
+type RenderAllocCallback = (renderer: DummyRenderer)=> void;
+
+// Override any default test options with [cacheOptions]
+export const createCache = (onRenderAlloc?: RenderAllocCallback, cacheOptions?: Partial<CacheProps>) => {
+	const editor = createEditor();
+
+	const cache = new RenderingCache({
+		createRenderer() {
+			const renderer = new DummyRenderer(editor.viewport);
+			onRenderAlloc?.(renderer);
+			return renderer;
+		},
+		isOfCorrectType(renderer: AbstractRenderer) {
+			return renderer instanceof DummyRenderer;
+		},
+		blockResolution: Vec2.of(500, 500),
+		cacheSize: 500 * 10 * 4,
+		maxScale: 2,
+		minComponentsPerCache: 0,
+		minComponentsToUseCache: 0,
+		...cacheOptions
+	});
+
+	return {
+		cache,
+		editor
+	};
+};

package/src/rendering/caching/types.ts

@@ -0,0 +1,39 @@
+import { Vec2 } from '../../geometry/Vec2';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import { CacheRecordManager } from './CacheRecordManager';
+
+
+export type CacheAddress = number;
+export type BeforeDeallocCallback = ()=>void;
+
+
+export interface CacheProps {
+    createRenderer(): AbstractRenderer;
+    // Returns whether the cache can be rendered onto [renderer].
+    isOfCorrectType(renderer: AbstractRenderer): boolean;
+
+    blockResolution: Vec2;
+    cacheSize: number;
+
+    // Maximum amount a cached image can be scaled without a re-render
+    // (larger numbers = blurrier, but faster)
+    maxScale: number;
+
+    // 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,
+// we need to separate partial/non-partial state.
+export interface PartialCacheState {
+    currentRenderingCycle: number;
+    props: CacheProps;
+}
+
+export interface CacheState extends PartialCacheState {
+    recordManager: CacheRecordManager;
+}

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

@@ -1,8 +1,10 @@
-import Color4 from '../Color4';
-import Path, { PathCommand, PathCommandType } from '../geometry/Path';
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Viewport from '../Viewport';
+import Color4 from '../../Color4';
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import Mat33 from '../../geometry/Mat33';
+import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Viewport from '../../Viewport';
 
 export interface RenderingStyle {
 	fill: Color4;
@@ -25,7 +27,14 @@ const stylesEqual = (a: RenderingStyle, b: RenderingStyle) => {
 };
 
 export default abstract class AbstractRenderer {
-	protected constructor(protected viewport: Viewport) { }
+	// If null, this' transformation is linked to the Viewport
+	private selfTransform: Mat33|null = null;
+
+	protected constructor(private viewport: Viewport) { }
+
+	// this.canvasToScreen, etc. should be used instead of the corresponding
+	// methods on Viewport.
+	protected getViewport(): Viewport { return this.viewport; }
 
 	// Returns the size of the rendered region of this on
 	// the display (in pixels).
@@ -43,9 +52,13 @@ export default abstract class AbstractRenderer {
 		controlPoint: Point2, endPoint: Point2,
 	): void;
 
+	// Returns true iff the given rectangle is so small, rendering anything within
+	// it has no effect on the image.
+	public abstract isTooSmallToRender(rect: Rect2): boolean;
+
 	public setDraftMode(_draftMode: boolean) { }
 
-	private objectLevel: number = 0;
+	protected objectLevel: number = 0;
 	private currentPaths: RenderablePathSpec[]|null = null;
 	private flushPath() {
 		if (!this.currentPaths) {
@@ -110,12 +123,13 @@ export default abstract class AbstractRenderer {
 	}
 
 	// Note the start/end of an object with the given bounding box.
-	public startObject(_boundingBox: Rect2) {
+	// Renderers are not required to support [clip]
+	public startObject(_boundingBox: Rect2, _clip?: boolean) {
 		this.currentPaths = [];
 		this.objectLevel ++;
 	}
 
-	public endObject() {
+	public endObject(_loaderData?: LoadSaveDataTable) {
 		// Render the paths all at once
 		this.flushPath();
 		this.currentPaths = null;
@@ -134,4 +148,38 @@ export default abstract class AbstractRenderer {
 
 	// Draw a representation of [points]. Intended for debugging.
 	public abstract drawPoints(...points: Point2[]): void;
+
+
+	// Returns true iff other can be rendered onto this without data loss.
+	public canRenderFromWithoutDataLoss(_other: AbstractRenderer): boolean {
+		return false;
+	}
+
+	// MUST throw if other and this are not of the same base class.
+	public renderFromOtherOfSameType(_renderTo: Mat33, other: AbstractRenderer) {
+		throw new Error(`Unable to render from ${other}: Not implemented`);
+	}
+
+	// Set a transformation to apply to things before rendering,
+	// replacing the viewport's transform.
+	public setTransform(transform: Mat33|null) {
+		this.selfTransform = transform;
+	}
+
+	// Get the matrix that transforms a vector on the canvas to a vector on this'
+	// rendering target.
+	public getCanvasToScreenTransform(): Mat33 {
+		if (this.selfTransform) {
+			return this.selfTransform;
+		}
+		return this.viewport.canvasToScreenTransform;
+	}
+
+	public canvasToScreen(vec: Vec2): Vec2 {
+		return this.getCanvasToScreenTransform().transformVec2(vec);
+	}
+
+	public getSizeOfCanvasPixelOnScreen(): number {
+		return this.getCanvasToScreenTransform().transformVec3(Vec2.unitX).length();
+	}
 }