js-draw 0.0.10 → 0.1.2

package/src/geometry/Path.ts

@@ -1,5 +1,5 @@
 import { Bezier } from 'bezier-js';
-import { RenderingStyle, RenderablePathSpec } from '../rendering/AbstractRenderer';
+import { RenderingStyle, RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
 import LineSegment2 from './LineSegment2';
 import Mat33 from './Mat33';
 import Rect2 from './Rect2';
@@ -288,8 +288,8 @@ export default class Path {
 		const toRoundedString = (num: number): string => {
 			// Try to remove rounding errors. If the number ends in at least three/four zeroes
 			// (or nines) just one or two digits, it's probably a rounding error.
-			const fixRoundingUpExp = /^([-]?\d*\.?\d*[1-9.])0{4,}\d$/;
-			const hasRoundingDownExp = /^([-]?)(\d*)\.(\d*9{4,}\d)$/;
+			const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d$/;
+			const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,}\d)$/;
 
 			let text = num.toString();
 			if (text.indexOf('.') === -1) {
@@ -314,7 +314,11 @@ export default class Path {
 			}
 
 			text = text.replace(fixRoundingUpExp, '$1');
-			// Remove trailing period (if it exists)
+
+			// Remove trailing zeroes
+			text = text.replace(/([.][^0]*)0+$/, '$1');
+
+			// Remove trailing period
 			return text.replace(/[.]$/, '');
 		};
 
@@ -367,6 +371,7 @@ export default class Path {
 
 		let lastPos: Point2 = Vec2.zero;
 		let firstPos: Point2|null = null;
+		let startPos: Point2|null = null;
 		let isFirstCommand: boolean = true;
 		const commands: PathCommand[] = [];
 
@@ -409,19 +414,67 @@ export default class Path {
 				endPoint,
 			});
 		};
+		const commandArgCounts: Record<string, number> = {
+			'm': 1,
+			'l': 1,
+			'c': 3,
+			'q': 2,
+			'z': 0,
+			'h': 1,
+			'v': 1,
+		};
 
 		// Each command: Command character followed by anything that isn't a command character
-		const commandExp = /([MmZzLlHhVvCcSsQqTtAa])\s*([^a-zA-Z]*)/g;
+		const commandExp = /([MZLHVCSQTA])\s*([^MZLHVCSQTA]*)/ig;
 		let current;
 		while ((current = commandExp.exec(pathString)) !== null) {
-			const argParts = current[2].trim().split(/[^0-9.-]/).filter(
+			const argParts = current[2].trim().split(/[^0-9Ee.-]/).filter(
 				part => part.length > 0
-			);
-			const numericArgs = argParts.map(arg => parseFloat(arg));
+			).reduce((accumualtor: string[], current: string): string[] => {
+				// As of 09/2022, iOS Safari doesn't support support lookbehind in regular
+				// expressions. As such, we need an alternative.
+				// Because '-' can be used as a path separator, unless preceeded by an 'e' (as in 1e-5),
+				// we need special cases:
+				current = current.replace(/([^eE])[-]/g, '$1 -');
+				const parts = current.split(' -');
+				if (parts[0] !== '') {
+					accumualtor.push(parts[0]);
+				}
+				accumualtor.push(...parts.slice(1).map(part => `-${part}`));
+				return accumualtor;
+			}, []);
+
+			let numericArgs = argParts.map(arg => parseFloat(arg));
+
+			let commandChar = current[1].toLowerCase();
+			let uppercaseCommand = current[1] !== commandChar;
+
+			// Convert commands that don't take points into commands that do.
+			if (commandChar === 'v' || commandChar === 'h') {
+				numericArgs = numericArgs.reduce((accumulator: number[], current: number): number[] => {
+					if (commandChar === 'v') {
+						return accumulator.concat(uppercaseCommand ? lastPos.x : 0, current);
+					} else {
+						return accumulator.concat(current, uppercaseCommand ? lastPos.y : 0);
+					}
+				}, []);
+				commandChar = 'l';
+			} else if (commandChar === 'z') {
+				if (firstPos) {
+					numericArgs = [ firstPos.x, firstPos.y ];
+					firstPos = lastPos;
+				} else {
+					continue;
+				}
 
-			const commandChar = current[1];
-			const uppercaseCommand = commandChar !== commandChar.toLowerCase();
-			const args = numericArgs.reduce((
+				// 'z' always acts like an uppercase lineTo(startPos)
+				uppercaseCommand = true;
+				commandChar = 'l';
+			}
+
+
+			const commandArgCount: number = commandArgCounts[commandChar] ?? 0;
+			const allArgs = numericArgs.reduce((
 				accumulator: Point2[], current, index, parts
 			): Point2[] => {
 				if (index % 2 !== 0) {
@@ -431,82 +484,65 @@ export default class Path {
 				} else {
 					return accumulator;
 				}
-			}, []).map((coordinate: Vec2): Point2 => {
+			}, []).map((coordinate, index): Point2 => {
 				// Lowercase commands are relative, uppercase commands use absolute
 				// positioning
+				let newPos;
 				if (uppercaseCommand) {
-					lastPos = coordinate;
-					return coordinate;
+					newPos = coordinate;
 				} else {
-					lastPos = lastPos.plus(coordinate);
-					return lastPos;
+					newPos = lastPos.plus(coordinate);
 				}
-			});
 
-			let expectedPointArgCount;
-
-			switch (commandChar.toLowerCase()) {
-			case 'm':
-				expectedPointArgCount = 1;
-				moveTo(args[0]);
-				break;
-			case 'l':
-				expectedPointArgCount = 1;
-				lineTo(args[0]);
-				break;
-			case 'z':
-				expectedPointArgCount = 0;
-				// firstPos can be null if the stroke data is just 'z'.
-				if (firstPos) {
-					lineTo(firstPos);
+				if ((index + 1) % commandArgCount === 0) {
+					lastPos = newPos;
 				}
-				break;
-			case 'c':
-				expectedPointArgCount = 3;
-				cubicBezierTo(args[0], args[1], args[2]);
-				break;
-			case 'q':
-				expectedPointArgCount = 2;
-				quadraticBeierTo(args[0], args[1]);
-				break;
 
-			// Horizontal line
-			case 'h':
-				expectedPointArgCount = 0;
-
-				if (uppercaseCommand) {
-					lineTo(Vec2.of(numericArgs[0], lastPos.y));
-				} else {
-					lineTo(lastPos.plus(Vec2.of(numericArgs[0], 0)));
-				}
-				break;
+				return newPos;
+			});
+	
+			if (allArgs.length % commandArgCount !== 0) {
+				throw new Error([
+					`Incorrect number of arguments: got ${JSON.stringify(allArgs)} with a length of ${allArgs.length} ≠ ${commandArgCount}k, k ∈ ℤ.`,
+					`The number of arguments to ${commandChar} must be a multiple of ${commandArgCount}!`,
+					`Command: ${current[0]}`,
+				].join('\n'));
+			}
 
-			// Vertical line
-			case 'v':
-				expectedPointArgCount = 0;
+			for (let argPos = 0; argPos < allArgs.length; argPos += commandArgCount) {
+				const args = allArgs.slice(argPos, argPos + commandArgCount);
 
-				if (uppercaseCommand) {
-					lineTo(Vec2.of(lastPos.x, numericArgs[1]));
-				} else {
-					lineTo(lastPos.plus(Vec2.of(0, numericArgs[1])));
+				switch (commandChar.toLowerCase()) {
+				case 'm':
+					if (argPos === 0) {
+						moveTo(args[0]);
+					} else {
+						lineTo(args[0]);
+					}
+					break;
+				case 'l':
+					lineTo(args[0]);
+					break;
+				case 'c':
+					cubicBezierTo(args[0], args[1], args[2]);
+					break;
+				case 'q':
+					quadraticBeierTo(args[0], args[1]);
+					break;
+				default:
+					throw new Error(`Unknown path command ${commandChar}`);
 				}
-				break;
-			default:
-				throw new Error(`Unknown path command ${commandChar}`);
-			}
 
-			if (args.length !== expectedPointArgCount) {
-				throw new Error(`
-					Incorrect number of arguments: got ${JSON.stringify(args)} with a length of ${args.length} ≠ ${expectedPointArgCount}.
-				`.trim());
+				isFirstCommand = false;
 			}
 
-			if (args.length > 0) {
-				firstPos ??= args[0];
+			if (allArgs.length > 0) {
+				firstPos ??= allArgs[0];
+				startPos ??= firstPos;
+				lastPos = allArgs[allArgs.length - 1];
 			}
-			isFirstCommand = false;
 		}
 
-		return new Path(firstPos ?? Vec2.zero, commands);
+		return new Path(startPos ?? Vec2.zero, commands);
 	}
 }

package/src/geometry/Rect2.test.ts

@@ -6,8 +6,8 @@ import Mat33 from './Mat33';
 
 loadExpectExtensions();
 
-describe('Rect2 tests', () => {
-	it('Positive width, height', () => {
+describe('Rect2', () => {
+	it('width, height should always be positive', () => {
 		expect(new Rect2(-1, -2, -3, 4)).objEq(new Rect2(-4, -2, 3, 4));
 		expect(new Rect2(0, 0, 0, 0).size).objEq(Vec2.zero);
 		expect(Rect2.fromCorners(
@@ -19,7 +19,7 @@ describe('Rect2 tests', () => {
 		));
 	});
 
-	it('Bounding box', () => {
+	it('bounding boxes should be correctly computed', () => {
 		expect(Rect2.bboxOf([
 			Vec2.zero,
 		])).objEq(Rect2.empty);
@@ -42,14 +42,14 @@ describe('Rect2 tests', () => {
 		));
 	});
 
-	it('"union"ing', () => {
+	it('"union"s should contain both composite rectangles.', () => {
 		expect(new Rect2(0, 0, 1, 1).union(new Rect2(1, 1, 2, 2))).objEq(
 			new Rect2(0, 0, 3, 3)
 		);
 		expect(Rect2.empty.union(Rect2.empty)).objEq(Rect2.empty);
 	});
 
-	it('contains', () => {
+	it('should contain points that are within a rectangle', () => {
 		expect(new Rect2(-1, -1, 2, 2).containsPoint(Vec2.zero)).toBe(true);
 		expect(new Rect2(-1, -1, 0, 0).containsPoint(Vec2.zero)).toBe(false);
 		expect(new Rect2(1, 2, 3, 4).containsRect(Rect2.empty)).toBe(false);
@@ -67,14 +67,15 @@ describe('Rect2 tests', () => {
 		expect(Rect2.empty.containsRect(new Rect2(-1, -1, 3, 3))).toBe(false);
 	});
 
-	it('Intersection testing', () => {
+	it('intersecting rectangles should be identified as intersecting', () => {
 		expect(new Rect2(-1, -1, 2, 2).intersects(Rect2.empty)).toBe(true);
 		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0, 0, 1, 1))).toBe(true);
 		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0, 0, 10, 10))).toBe(true);
 		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(3, 3, 10, 10))).toBe(false);
+		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0.2, 0.1, 0, 0))).toBe(true);
 	});
 
-	it('Computing intersections', () => {
+	it('intersecting rectangles should have their intersections correctly computed', () => {
 		expect(new Rect2(-1, -1, 2, 2).intersection(Rect2.empty)).objEq(Rect2.empty);
 		expect(new Rect2(-1, -1, 2, 2).intersection(new Rect2(0, 0, 3, 3))).objEq(
 			new Rect2(0, 0, 1, 1)
@@ -93,7 +94,7 @@ describe('Rect2 tests', () => {
 		expect(transformedBBox.containsRect(rect)).toBe(true);
 	});
 
-	describe('Grown to include a point', () => {
+	describe('should correctly expand to include a given point', () => {
 		it('Growing an empty rectange to include (1, 0)', () => {
 			const originalRect = Rect2.empty;
 			const grownRect = originalRect.grownToPoint(Vec2.unitX);
@@ -118,4 +119,42 @@ describe('Rect2 tests', () => {
 			expect(grown).objEq(new Rect2(0, 0, 2, 2));
 		});
 	});
+
+	describe('divideIntoGrid', () => {
+		it('division of unit square', () => {
+			expect(Rect2.unitSquare.divideIntoGrid(2, 2)).toMatchObject(
+				[
+					new Rect2(0, 0, 0.5, 0.5), new Rect2(0.5, 0, 0.5, 0.5),
+					new Rect2(0, 0.5, 0.5, 0.5), new Rect2(0.5, 0.5, 0.5, 0.5),
+				]
+			);
+			expect(Rect2.unitSquare.divideIntoGrid(0, 0).length).toBe(0);
+			expect(Rect2.unitSquare.divideIntoGrid(100, 0).length).toBe(0);
+			expect(Rect2.unitSquare.divideIntoGrid(4, 1)).toMatchObject(
+				[
+					new Rect2(0, 0, 0.25, 1), new Rect2(0.25, 0, 0.25, 1),
+					new Rect2(0.5, 0, 0.25, 1), new Rect2(0.75, 0, 0.25, 1),
+				]
+			);
+		});
+		it('division of translated square', () => {
+			expect(new Rect2(3, -3, 4, 4).divideIntoGrid(2, 1)).toMatchObject(
+				[
+					new Rect2(3, -3, 2, 4), new Rect2(5, -3, 2, 4),
+				]
+			);
+		});
+		it('division of empty square', () => {
+			expect(Rect2.empty.divideIntoGrid(1000, 10000).length).toBe(1);
+		});
+	});
+
+	it('division of rectangle', () => {
+		expect(new Rect2(0, 0, 2, 1).divideIntoGrid(2, 2)).toMatchObject(
+			[
+				new Rect2(0, 0, 1, 0.5), new Rect2(1, 0, 1, 0.5),
+				new Rect2(0, 0.5, 1, 0.5), new Rect2(1, 0.5, 1, 0.5),
+			]
+		);
+	});
 });

package/src/geometry/Rect2.ts

@@ -67,22 +67,39 @@ export default class Rect2 {
 	}
 
 	public intersects(other: Rect2): boolean {
-		return this.intersection(other) !== null;
+		// Project along x/y axes.
+		const thisMinX = this.x;
+		const thisMaxX = thisMinX + this.w;
+		const otherMinX = other.x;
+		const otherMaxX = other.x + other.w;
+
+		if (thisMaxX < otherMinX || thisMinX > otherMaxX) {
+			return false;
+		}
+
+
+		const thisMinY = this.y;
+		const thisMaxY = thisMinY + this.h;
+		const otherMinY = other.y;
+		const otherMaxY = other.y + other.h;
+
+		if (thisMaxY < otherMinY || thisMinY > otherMaxY) {
+			return false;
+		}
+
+		return true;
 	}
 
 	// Returns the overlap of this and [other], or null, if no such
-	// /         overlap exists
+	//          overlap exists
 	public intersection(other: Rect2): Rect2|null {
-		const topLeft = this.topLeft.zip(other.topLeft, Math.max);
-		const bottomRight = this.bottomRight.zip(other.bottomRight, Math.min);
-
-		// The intersection can't be outside of this rectangle
-		if (!this.containsPoint(topLeft) || !this.containsPoint(bottomRight)) {
-			return null;
-		} else if (!other.containsPoint(topLeft) || !other.containsPoint(bottomRight)) {
+		if (!this.intersects(other)) {
 			return null;
 		}
 
+		const topLeft = this.topLeft.zip(other.topLeft, Math.max);
+		const bottomRight = this.bottomRight.zip(other.bottomRight, Math.min);
+
 		return Rect2.fromCorners(topLeft, bottomRight);
 	}
 
@@ -97,6 +114,37 @@ export default class Rect2 {
 		);
 	}
 
+	// Returns a the subdivision of this into [columns] columns
+	// and [rows] rows. For example,
+	//	 Rect2.unitSquare.divideIntoGrid(2, 2)
+	//		-> [ Rect2(0, 0, 0.5, 0.5), Rect2(0.5, 0, 0.5, 0.5), Rect2(0, 0.5, 0.5, 0.5), Rect2(0.5, 0.5, 0.5, 0.5) ]
+	// The rectangles are ordered in row-major order.
+	public divideIntoGrid(columns: number, rows: number): Rect2[] {
+		const result: Rect2[] = [];
+		if (columns <= 0 || rows <= 0) {
+			return result;
+		}
+
+		const eachRectWidth = this.w / columns;
+		const eachRectHeight = this.h / rows;
+
+		if (eachRectWidth === 0) {
+			columns = 1;
+		}
+		if (eachRectHeight === 0) {
+			rows = 1;
+		}
+
+		for (let j = 0; j < rows; j++) {
+			for (let i = 0; i < columns; i++) {
+				const x = eachRectWidth * i + this.x;
+				const y = eachRectHeight * j + this.y;
+				result.push(new Rect2(x, y, eachRectWidth, eachRectHeight));
+			}
+		}
+		return result;
+	}
+
 	// Returns a rectangle containing this and [point].
 	// [margin] is the minimum distance between the new point and the edge
 	// of the resultant rectangle.

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,33 @@ export default class Display {
 			throw new Error(`Unknown rendering mode, ${mode}!`);
 		}
 
+		const cacheBlockResolution = Vec2.of(600, 600);
+		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.5,
+			minComponentsPerCache: 50,
+			minComponentsToUseCache: 120,
+		});
 
 		this.editor.notifier.on(EditorEventType.DisplayResized, event => {
 			if (event.kind !== EditorEventType.DisplayResized) {
@@ -50,6 +79,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,73 @@
+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;
+		this.lastUsedCycle = this.cacheState.currentRenderingCycle;
+	}
+
+	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,45 @@
+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 {
+		this.cacheRecords.sort((a, b) => a.getLastUsedCycle() - b.getLastUsedCycle());
+		return this.cacheRecords[0];
+	}
+}