js-draw 0.0.10 → 0.1.0

package/src/{Display.ts → rendering/Display.ts}

@@ -1,9 +1,10 @@
-import AbstractRenderer from './rendering/AbstractRenderer';
-import CanvasRenderer from './rendering/CanvasRenderer';
-import { Editor } from './Editor';
-import { EditorEventType } from './types';
-import DummyRenderer from './rendering/DummyRenderer';
-import { Vec2 } from './geometry/Vec2';
+import AbstractRenderer from './renderers/AbstractRenderer';
+import CanvasRenderer from './renderers/CanvasRenderer';
+import { Editor } from '../Editor';
+import { EditorEventType } from '../types';
+import DummyRenderer from './renderers/DummyRenderer';
+import { Vec2 } from '../geometry/Vec2';
+import RenderingCache from './caching/RenderingCache';
 
 export enum RenderingMode {
 	DummyRenderer,
@@ -14,6 +15,7 @@ export enum RenderingMode {
 export default class Display {
 	private dryInkRenderer: AbstractRenderer;
 	private wetInkRenderer: AbstractRenderer;
+	private cache: RenderingCache;
 	private resizeSurfacesCallback?: ()=> void;
 	private flattenCallback?: ()=> void;
 
@@ -29,6 +31,32 @@ export default class Display {
 			throw new Error(`Unknown rendering mode, ${mode}!`);
 		}
 
+		const cacheBlockResolution = Vec2.of(500, 500);
+		this.cache = new RenderingCache({
+			createRenderer: () => {
+				if (mode === RenderingMode.DummyRenderer) {
+					return new DummyRenderer(editor.viewport);
+				} else if (mode !== RenderingMode.CanvasRenderer) {
+					throw new Error('Unspported rendering mode');
+				}
+
+				// Make the canvas slightly larger than each cache block to prevent
+				// seams.
+				const canvas = document.createElement('canvas');
+				canvas.width = cacheBlockResolution.x + 1;
+				canvas.height = cacheBlockResolution.y + 1;
+				const ctx = canvas.getContext('2d');
+
+				return new CanvasRenderer(ctx!, editor.viewport);
+			},
+			isOfCorrectType: (renderer) => {
+				return this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
+			},
+			blockResolution: cacheBlockResolution,
+			cacheSize: 500 * 500 * 4 * 200,
+			maxScale: 1.4,
+			minComponentsPerCache: 10,
+		});
 
 		this.editor.notifier.on(EditorEventType.DisplayResized, event => {
 			if (event.kind !== EditorEventType.DisplayResized) {
@@ -50,6 +78,10 @@ export default class Display {
 		return this.dryInkRenderer.displaySize().y;
 	}
 
+	public getCache() {
+		return this.cache;
+	}
+
 	private initializeCanvasRendering() {
 		const dryInkCanvas = document.createElement('canvas');
 		const wetInkCanvas = document.createElement('canvas');

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

@@ -0,0 +1,49 @@
+/* @jest-environment jsdom */
+
+import Rect2 from '../../geometry/Rect2';
+import { Vec2 } from '../../geometry/Vec2';
+import CacheRecord from './CacheRecord';
+import { createCache } from './testUtils';
+
+describe('CacheRecord', () => {
+	describe('should map points in the cache renderer\'s region to the cache renderer', () => {
+		const blockResolution = Vec2.of(500, 500);
+		const { cache } = createCache(undefined, {
+			blockResolution,
+		});
+		const state = cache.getSharedState();
+
+		const record = new CacheRecord(() => {}, state);
+
+		describe('region has top left at (0, 0)', () => {
+			it('region as big as the cache block', () => {
+				const transform = record.getTransform(
+					new Rect2(0, 0, 500, 500)
+				);
+				expect(transform.transformVec2(Vec2.unitX)).toMatchObject(Vec2.unitX);
+				expect(transform.transformVec2(Vec2.unitY)).toMatchObject(Vec2.unitY);
+			});
+
+			it('region twice as big as cache block', () => {
+				const transform = record.getTransform(
+					new Rect2(0, 0, 1000, 1000)
+				);
+
+				// A size-one vector on the screen corresponds to a size 1/2 vector on the
+				// cached surface.
+				expect(transform.transformVec2(Vec2.unitX)).toMatchObject(Vec2.of(0.5, 0));
+				expect(transform.transformVec2(Vec2.unitY)).toMatchObject(Vec2.of(0, 0.5));
+			});
+		});
+
+		describe('region has top left at (100, 100)', () => {
+			it('region as big as the cache block', () => {
+				const transform = record.getTransform(
+					new Rect2(100, 100, 500, 500)
+				);
+				expect(transform.transformVec2(Vec2.of(100, 100))).toMatchObject(Vec2.zero);
+				expect(transform.transformVec2(Vec2.of(500, 500))).toMatchObject(Vec2.of(400, 400));
+			});
+		});
+	});
+});

package/src/rendering/caching/CacheRecord.ts

@@ -0,0 +1,72 @@
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import { BeforeDeallocCallback, CacheState } from './types';
+
+// Represents a cached renderer/canvas
+// This is not a [CacheNode] -- it handles cached renderers and does not have sub-renderers.
+
+export default class CacheRecord {
+	private renderer: AbstractRenderer;
+	private lastUsedCycle: number;
+	private allocd: boolean = false;
+
+	public constructor(
+		private onBeforeDeallocCallback: BeforeDeallocCallback|null,
+		private cacheState: CacheState,
+	) {
+		this.renderer = cacheState.props.createRenderer();
+		this.lastUsedCycle = -1;
+		this.allocd = true;
+	}
+
+	public startRender(): AbstractRenderer {
+		this.lastUsedCycle = this.cacheState.currentRenderingCycle++;
+		if (!this.allocd) {
+			throw new Error('Only alloc\'d canvases can be rendered to');
+		}
+		return this.renderer;
+	}
+
+	public dealloc() {
+		this.onBeforeDeallocCallback?.();
+		this.allocd = false;
+		this.onBeforeDeallocCallback = null;
+		this.lastUsedCycle = 0;
+	}
+
+	public isAllocd() {
+		return this.allocd;
+	}
+
+	public realloc(newDeallocCallback: BeforeDeallocCallback) {
+		if (this.allocd) {
+			this.dealloc();
+		}
+		this.allocd = true;
+		this.onBeforeDeallocCallback = newDeallocCallback;
+	}
+
+	public getLastUsedCycle(): number {
+		return this.lastUsedCycle;
+	}
+
+	// Returns the transformation that maps [drawTo] to this' renderable region
+	// (i.e. a [cacheProps.blockResolution]-sized rectangle with top left at (0, 0))
+	public getTransform(drawTo: Rect2): Mat33 {
+		const transform = Mat33.scaling2D(
+			this.cacheState.props.blockResolution.x / drawTo.size.x
+		).rightMul(
+			Mat33.translation(drawTo.topLeft.times(-1))
+		);
+
+		return transform;
+	}
+
+	public setRenderingRegion(drawTo: Rect2) {
+		this.renderer.setTransform(
+			// Invert to map objects instead of the viewport
+			this.getTransform(drawTo)
+		);
+	}
+}

package/src/rendering/caching/CacheRecordManager.ts

@@ -0,0 +1,55 @@
+import { BeforeDeallocCallback, PartialCacheState } from './types';
+import CacheRecord from './CacheRecord';
+import Rect2 from '../../geometry/Rect2';
+
+
+export class CacheRecordManager {
+	// Fixed-size array: Cache blocks are assigned indicies into [cachedCanvases].
+	private cacheRecords: CacheRecord[] = [];
+	private maxCanvases: number;
+
+	public constructor(private readonly cacheState: PartialCacheState) {
+		const cacheProps = cacheState.props;
+		this.maxCanvases = Math.ceil(
+			// Assuming four components per pixel:
+			cacheProps.cacheSize / 4 / cacheProps.blockResolution.x / cacheProps.blockResolution.y
+		);
+	}
+
+	public allocCanvas(drawTo: Rect2, onDealloc: BeforeDeallocCallback): CacheRecord {
+		if (this.cacheRecords.length < this.maxCanvases) {
+			const record: CacheRecord = new CacheRecord(
+				onDealloc,
+				{
+					...this.cacheState,
+					recordManager: this,
+				},
+			);
+			record.setRenderingRegion(drawTo);
+			this.cacheRecords.push(record);
+
+			return record;
+		} else {
+			const lru = this.getLeastRecentlyUsedRecord()!;
+			lru.realloc(onDealloc);
+			lru.setRenderingRegion(drawTo);
+			return lru;
+		}
+	}
+
+	// Returns null if there are no cache records. Returns an unalloc'd record if one exists.
+	private getLeastRecentlyUsedRecord(): CacheRecord|null {
+		let lruSoFar: CacheRecord|null = null;
+		for (const rec of this.cacheRecords) {
+			if (!rec.isAllocd()) {
+				return rec;
+			}
+
+			if (!lruSoFar || rec.getLastUsedCycle() < lruSoFar.getLastUsedCycle()) {
+				lruSoFar = rec;
+			}
+		}
+
+		return lruSoFar;
+	}
+}

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');
+	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,56 @@
+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) {
+			// Ensure that the node is just big enough to contain the entire viewport.
+			const rootNodeSize = visibleRect.maxDimension;
+			const topLeft = visibleRect.topLeft;
+			this.rootNode = new RenderingCacheNode(
+				new Rect2(topLeft.x, topLeft.y, rootNodeSize, rootNodeSize),
+				this.getSharedState()
+			);
+		}
+
+		while (!this.rootNode!.region.containsRect(visibleRect)) {
+			this.rootNode = this.rootNode!.generateParent();
+		}
+
+		this.rootNode = this.rootNode!.smallestChildContaining(visibleRect) ?? this.rootNode;
+        this.rootNode!.renderItems(screenRenderer, [ image ], viewport);
+	}
+}