js-draw 0.18.1 → 0.18.2

package/dist/mjs/src/math/rounding.mjs

@@ -0,0 +1,128 @@
+// @packageDocumentation @internal
+// Clean up stringified numbers
+export const cleanUpNumber = (text) => {
+    // Regular expression substitions can be somewhat expensive. Only do them
+    // if necessary.
+    if (text.indexOf('e') > 0) {
+        // Round to zero.
+        if (text.match(/[eE][-]\d{2,}$/)) {
+            return '0';
+        }
+    }
+    const lastChar = text.charAt(text.length - 1);
+    if (lastChar === '0' || lastChar === '.') {
+        // Remove trailing zeroes
+        text = text.replace(/([.]\d*[^0]+)0+$/, '$1');
+        text = text.replace(/[.]0+$/, '.');
+        // Remove trailing period
+        text = text.replace(/[.]$/, '');
+    }
+    const firstChar = text.charAt(0);
+    if (firstChar === '0' || firstChar === '-') {
+        // Remove unnecessary leading zeroes.
+        text = text.replace(/^(0+)[.]/, '.');
+        text = text.replace(/^-(0+)[.]/, '-.');
+        text = text.replace(/^(-?)0+$/, '$10');
+    }
+    if (text === '-0') {
+        return '0';
+    }
+    return text;
+};
+export const toRoundedString = (num) => {
+    // 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{3,})0{4,}\d{1,4}$/;
+    const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,})\d{1,4}$/;
+    let text = num.toString(10);
+    if (text.indexOf('.') === -1) {
+        return text;
+    }
+    const roundingDownMatch = hasRoundingDownExp.exec(text);
+    if (roundingDownMatch) {
+        const negativeSign = roundingDownMatch[1];
+        const postDecimalString = roundingDownMatch[3];
+        const lastDigit = parseInt(postDecimalString.charAt(postDecimalString.length - 1), 10);
+        const postDecimal = parseInt(postDecimalString, 10);
+        const preDecimal = parseInt(roundingDownMatch[2], 10);
+        const origPostDecimalString = roundingDownMatch[3];
+        let newPostDecimal = (postDecimal + 10 - lastDigit).toString();
+        let carry = 0;
+        if (newPostDecimal.length > postDecimal.toString().length) {
+            // Left-shift
+            newPostDecimal = newPostDecimal.substring(1);
+            carry = 1;
+        }
+        // parseInt(...).toString() removes leading zeroes. Add them back.
+        while (newPostDecimal.length < origPostDecimalString.length) {
+            newPostDecimal = carry.toString(10) + newPostDecimal;
+            carry = 0;
+        }
+        text = `${negativeSign + (preDecimal + carry).toString()}.${newPostDecimal}`;
+    }
+    text = text.replace(fixRoundingUpExp, '$1');
+    return cleanUpNumber(text);
+};
+const numberExp = /^([-]?)(\d*)[.](\d+)$/;
+export const getLenAfterDecimal = (numberAsString) => {
+    const numberMatch = numberExp.exec(numberAsString);
+    if (!numberMatch) {
+        // If not a match, either the number is exponential notation (or is something
+        // like NaN or Infinity)
+        if (numberAsString.search(/[eE]/) !== -1 || /^[a-zA-Z]+$/.exec(numberAsString)) {
+            return -1;
+            // Or it has no decimal point
+        }
+        else {
+            return 0;
+        }
+    }
+    const afterDecimalLen = numberMatch[3].length;
+    return afterDecimalLen;
+};
+// [reference] should be a string representation of a base-10 number (no exponential (e.g. 10e10))
+export const toStringOfSamePrecision = (num, ...references) => {
+    const text = num.toString(10);
+    const textMatch = numberExp.exec(text);
+    if (!textMatch) {
+        return text;
+    }
+    let decimalPlaces = -1;
+    for (const reference of references) {
+        decimalPlaces = Math.max(getLenAfterDecimal(reference), decimalPlaces);
+    }
+    if (decimalPlaces === -1) {
+        return toRoundedString(num);
+    }
+    // Make text's after decimal length match [afterDecimalLen].
+    let postDecimal = textMatch[3].substring(0, decimalPlaces);
+    let preDecimal = textMatch[2];
+    const nextDigit = textMatch[3].charAt(decimalPlaces);
+    if (nextDigit !== '') {
+        const asNumber = parseInt(nextDigit, 10);
+        if (asNumber >= 5) {
+            // Don't attempt to parseInt() an empty string.
+            if (postDecimal.length > 0) {
+                const leadingZeroMatch = /^(0+)(\d*)$/.exec(postDecimal);
+                let leadingZeroes = '';
+                let postLeading = postDecimal;
+                if (leadingZeroMatch) {
+                    leadingZeroes = leadingZeroMatch[1];
+                    postLeading = leadingZeroMatch[2];
+                }
+                postDecimal = (parseInt(postDecimal) + 1).toString();
+                // If postDecimal got longer, remove leading zeroes if possible
+                if (postDecimal.length > postLeading.length && leadingZeroes.length > 0) {
+                    leadingZeroes = leadingZeroes.substring(1);
+                }
+                postDecimal = leadingZeroes + postDecimal;
+            }
+            if (postDecimal.length === 0 || postDecimal.length > decimalPlaces) {
+                preDecimal = (parseInt(preDecimal) + 1).toString();
+                postDecimal = postDecimal.substring(1);
+            }
+        }
+    }
+    const negativeSign = textMatch[1];
+    return cleanUpNumber(`${negativeSign}${preDecimal}.${postDecimal}`);
+};

package/dist/mjs/src/rendering/Display.d.ts

@@ -0,0 +1,75 @@
+import AbstractRenderer from './renderers/AbstractRenderer';
+import { Editor } from '../Editor';
+import { Point2 } from '../math/Vec2';
+import RenderingCache from './caching/RenderingCache';
+import Color4 from '../Color4';
+export declare enum RenderingMode {
+    DummyRenderer = 0,
+    CanvasRenderer = 1
+}
+/**
+ * Handles `HTMLCanvasElement`s (or other drawing surfaces if being used) used to display the editor's contents.
+ *
+ * @example
+ * ```
+ * const editor = new Editor(document.body);
+ * const w = editor.display.width;
+ * const h = editor.display.height;
+ * const center = Vec2.of(w / 2, h / 2);
+ * const colorAtCenter = editor.display.getColorAt(center);
+ * ```
+ */
+export default class Display {
+    private editor;
+    private parent;
+    private dryInkRenderer;
+    private wetInkRenderer;
+    private textRenderer;
+    private textRerenderOutput;
+    private cache;
+    private resizeSurfacesCallback?;
+    private flattenCallback?;
+    /** @internal */
+    constructor(editor: Editor, mode: RenderingMode, parent: HTMLElement | null);
+    /**
+     * @returns the visible width of the display (e.g. how much
+     * space the display's element takes up in the x direction
+     * in the DOM).
+     */
+    get width(): number;
+    get height(): number;
+    /** @internal */
+    getCache(): RenderingCache;
+    /**
+     * @returns the color at the given point on the dry ink renderer, or `null` if `screenPos`
+     * 	is not on the display.
+     */
+    getColorAt: (_screenPos: Point2) => Color4 | null;
+    private initializeCanvasRendering;
+    private initializeTextRendering;
+    /**
+     * Rerenders the text-based display.
+     * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.
+     */
+    rerenderAsText(): void;
+    /**
+     * Clears the drawing surfaces and otherwise prepares for a rerender.
+     *
+     * @returns the dry ink renderer.
+     */
+    startRerender(): AbstractRenderer;
+    /**
+     * If `draftMode`, the dry ink renderer is configured to render
+     * low-quality output.
+     */
+    setDraftMode(draftMode: boolean): void;
+    /** @internal */
+    getDryInkRenderer(): AbstractRenderer;
+    /**
+     * @returns The renderer used for showing action previews (e.g. an unfinished stroke).
+     * The `wetInkRenderer`'s surface is stacked above the `dryInkRenderer`'s.
+     */
+    getWetInkRenderer(): AbstractRenderer;
+    /** Re-renders the contents of the wetInkRenderer onto the dryInkRenderer. */
+    flatten(): void;
+}

package/dist/mjs/src/rendering/Display.mjs

@@ -0,0 +1,207 @@
+import  CanvasRenderer  from './renderers/CanvasRenderer.mjs';
+import  { EditorEventType }  from '../types.mjs';
+import  DummyRenderer  from './renderers/DummyRenderer.mjs';
+import  { Vec2 }  from '../math/Vec2.mjs';
+import  RenderingCache  from './caching/RenderingCache.mjs';
+import  TextOnlyRenderer  from './renderers/TextOnlyRenderer.mjs';
+import  Color4  from '../Color4.mjs';
+export var RenderingMode;
+(function (RenderingMode) {
+    RenderingMode[RenderingMode["DummyRenderer"] = 0] = "DummyRenderer";
+    RenderingMode[RenderingMode["CanvasRenderer"] = 1] = "CanvasRenderer";
+    // SVGRenderer is not supported by the main display
+})(RenderingMode || (RenderingMode = {}));
+/**
+ * Handles `HTMLCanvasElement`s (or other drawing surfaces if being used) used to display the editor's contents.
+ *
+ * @example
+ * ```
+ * const editor = new Editor(document.body);
+ * const w = editor.display.width;
+ * const h = editor.display.height;
+ * const center = Vec2.of(w / 2, h / 2);
+ * const colorAtCenter = editor.display.getColorAt(center);
+ * ```
+ */
+export default class Display {
+    /** @internal */
+    constructor(editor, mode, parent) {
+        this.editor = editor;
+        this.parent = parent;
+        this.textRerenderOutput = null;
+        /**
+         * @returns the color at the given point on the dry ink renderer, or `null` if `screenPos`
+         * 	is not on the display.
+         */
+        this.getColorAt = (_screenPos) => {
+            return null;
+        };
+        if (mode === RenderingMode.CanvasRenderer) {
+            this.initializeCanvasRendering();
+        }
+        else if (mode === RenderingMode.DummyRenderer) {
+            this.dryInkRenderer = new DummyRenderer(editor.viewport);
+            this.wetInkRenderer = new DummyRenderer(editor.viewport);
+        }
+        else {
+            throw new Error(`Unknown rendering mode, ${mode}!`);
+        }
+        this.textRenderer = new TextOnlyRenderer(editor.viewport, editor.localization);
+        this.initializeTextRendering();
+        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: 600 * 600 * 4 * 90,
+            maxScale: 1.3,
+            // Require about 20 strokes with 4 parts each to cache an image in one of the
+            // parts of the cache grid.
+            minProportionalRenderTimePerCache: 20 * 4,
+            // Require about 105 strokes with 4 parts each to use the cache at all.
+            minProportionalRenderTimeToUseCache: 105 * 4,
+        });
+        this.editor.notifier.on(EditorEventType.DisplayResized, event => {
+            var _a;
+            if (event.kind !== EditorEventType.DisplayResized) {
+                throw new Error('Mismatched event.kinds!');
+            }
+            (_a = this.resizeSurfacesCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        });
+    }
+    /**
+     * @returns the visible width of the display (e.g. how much
+     * space the display's element takes up in the x direction
+     * in the DOM).
+     */
+    get width() {
+        return this.dryInkRenderer.displaySize().x;
+    }
+    get height() {
+        return this.dryInkRenderer.displaySize().y;
+    }
+    /** @internal */
+    getCache() {
+        return this.cache;
+    }
+    initializeCanvasRendering() {
+        const dryInkCanvas = document.createElement('canvas');
+        const wetInkCanvas = document.createElement('canvas');
+        const dryInkCtx = dryInkCanvas.getContext('2d');
+        const wetInkCtx = wetInkCanvas.getContext('2d');
+        this.dryInkRenderer = new CanvasRenderer(dryInkCtx, this.editor.viewport);
+        this.wetInkRenderer = new CanvasRenderer(wetInkCtx, this.editor.viewport);
+        dryInkCanvas.className = 'dryInkCanvas';
+        wetInkCanvas.className = 'wetInkCanvas';
+        if (this.parent) {
+            this.parent.appendChild(dryInkCanvas);
+            this.parent.appendChild(wetInkCanvas);
+        }
+        this.resizeSurfacesCallback = () => {
+            const hasSizeMismatch = (canvas) => {
+                return canvas.clientHeight !== canvas.height || canvas.clientWidth !== canvas.width;
+            };
+            // Ensure that the drawing surfaces sizes match the
+            // canvas' sizes to prevent stretching.
+            if (hasSizeMismatch(dryInkCanvas) || hasSizeMismatch(wetInkCanvas)) {
+                dryInkCanvas.width = dryInkCanvas.clientWidth;
+                dryInkCanvas.height = dryInkCanvas.clientHeight;
+                wetInkCanvas.width = wetInkCanvas.clientWidth;
+                wetInkCanvas.height = wetInkCanvas.clientHeight;
+                this.editor.notifier.dispatch(EditorEventType.DisplayResized, {
+                    kind: EditorEventType.DisplayResized,
+                    newSize: Vec2.of(this.width, this.height),
+                });
+            }
+        };
+        this.resizeSurfacesCallback();
+        this.flattenCallback = () => {
+            dryInkCtx.drawImage(wetInkCanvas, 0, 0);
+        };
+        this.getColorAt = (screenPos) => {
+            const pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
+            const data = pixel === null || pixel === void 0 ? void 0 : pixel.data;
+            if (data) {
+                const color = Color4.ofRGBA(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);
+                return color;
+            }
+            return null;
+        };
+    }
+    initializeTextRendering() {
+        const textRendererOutputContainer = document.createElement('div');
+        textRendererOutputContainer.classList.add('textRendererOutputContainer');
+        const rerenderButton = document.createElement('button');
+        rerenderButton.classList.add('rerenderButton');
+        rerenderButton.innerText = this.editor.localization.rerenderAsText;
+        this.textRerenderOutput = document.createElement('div');
+        this.textRerenderOutput.setAttribute('aria-live', 'polite');
+        rerenderButton.onclick = () => {
+            this.rerenderAsText();
+        };
+        textRendererOutputContainer.replaceChildren(rerenderButton, this.textRerenderOutput);
+        this.editor.createHTMLOverlay(textRendererOutputContainer);
+    }
+    /**
+     * Rerenders the text-based display.
+     * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.
+     */
+    rerenderAsText() {
+        this.textRenderer.clear();
+        this.editor.image.render(this.textRenderer, this.editor.viewport);
+        if (this.textRerenderOutput) {
+            this.textRerenderOutput.innerText = this.textRenderer.getDescription();
+        }
+    }
+    /**
+     * Clears the drawing surfaces and otherwise prepares for a rerender.
+     *
+     * @returns the dry ink renderer.
+     */
+    startRerender() {
+        var _a;
+        (_a = this.resizeSurfacesCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.wetInkRenderer.clear();
+        this.dryInkRenderer.clear();
+        return this.dryInkRenderer;
+    }
+    /**
+     * If `draftMode`, the dry ink renderer is configured to render
+     * low-quality output.
+     */
+    setDraftMode(draftMode) {
+        this.dryInkRenderer.setDraftMode(draftMode);
+    }
+    /** @internal */
+    getDryInkRenderer() {
+        return this.dryInkRenderer;
+    }
+    /**
+     * @returns The renderer used for showing action previews (e.g. an unfinished stroke).
+     * The `wetInkRenderer`'s surface is stacked above the `dryInkRenderer`'s.
+     */
+    getWetInkRenderer() {
+        return this.wetInkRenderer;
+    }
+    /** Re-renders the contents of the wetInkRenderer onto the dryInkRenderer. */
+    flatten() {
+        var _a;
+        (_a = this.flattenCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+}

package/dist/mjs/src/rendering/RenderingStyle.d.ts

@@ -0,0 +1,31 @@
+import Color4 from '../Color4';
+interface RenderingStyle {
+    fill: Color4;
+    stroke?: {
+        color: Color4;
+        width: number;
+    };
+}
+export default RenderingStyle;
+export declare const cloneStyle: (style: RenderingStyle) => {
+    fill: Color4;
+    stroke: {
+        color: Color4;
+        width: number;
+    } | undefined;
+};
+export declare const stylesEqual: (a: RenderingStyle, b: RenderingStyle) => boolean;
+export declare const styleToJSON: (style: RenderingStyle) => {
+    fill: string;
+    stroke: {
+        color: string;
+        width: number;
+    } | undefined;
+};
+export declare const styleFromJSON: (json: Record<string, any>) => {
+    fill: Color4;
+    stroke: {
+        color: Color4;
+        width: any;
+    } | undefined;
+};

package/dist/mjs/src/rendering/RenderingStyle.mjs

@@ -0,0 +1,38 @@
+import  Color4  from '../Color4.mjs';
+export const cloneStyle = (style) => {
+    return {
+        fill: style.fill,
+        stroke: style.stroke ? Object.assign({}, style.stroke) : undefined,
+    };
+};
+export const stylesEqual = (a, b) => {
+    var _a, _b, _c, _d, _e, _f;
+    const result = a === b || (a.fill.eq(b.fill)
+        && (a.stroke == undefined) === (b.stroke == undefined)
+        && ((_d = (_b = (_a = a.stroke) === null || _a === void 0 ? void 0 : _a.color) === null || _b === void 0 ? void 0 : _b.eq((_c = b.stroke) === null || _c === void 0 ? void 0 : _c.color)) !== null && _d !== void 0 ? _d : true)
+        && ((_e = a.stroke) === null || _e === void 0 ? void 0 : _e.width) === ((_f = b.stroke) === null || _f === void 0 ? void 0 : _f.width));
+    // Map undefined/null -> false
+    return result !== null && result !== void 0 ? result : false;
+};
+// Returns an object that can be converted to a JSON string with
+// JSON.stringify.
+export const styleToJSON = (style) => {
+    const stroke = !style.stroke ? undefined : {
+        color: style.stroke.color.toHexString(),
+        width: style.stroke.width,
+    };
+    return {
+        fill: style.fill.toHexString(),
+        stroke,
+    };
+};
+export const styleFromJSON = (json) => {
+    const stroke = json.stroke ? {
+        color: Color4.fromHex(json.stroke.color),
+        width: json.stroke.width,
+    } : undefined;
+    return {
+        fill: Color4.fromHex(json.fill),
+        stroke,
+    };
+};

package/dist/mjs/src/rendering/TextRenderingStyle.d.ts

@@ -0,0 +1,36 @@
+import RenderingStyle from './RenderingStyle';
+export interface TextStyle {
+    size: number;
+    fontFamily: string;
+    fontWeight?: string;
+    fontVariant?: string;
+    renderingStyle: RenderingStyle;
+}
+export default TextStyle;
+export declare const cloneTextStyle: (style: TextStyle) => {
+    renderingStyle: {
+        fill: import("../Color4").default;
+        stroke: {
+            color: import("../Color4").default;
+            width: number;
+        } | undefined;
+    };
+    size: number;
+    fontFamily: string;
+    fontWeight?: string | undefined;
+    fontVariant?: string | undefined;
+};
+export declare const textStyleFromJSON: (json: any) => TextStyle;
+export declare const textStyleToJSON: (style: TextStyle) => {
+    renderingStyle: {
+        fill: string;
+        stroke: {
+            color: string;
+            width: number;
+        } | undefined;
+    };
+    size: number;
+    fontFamily: string;
+    fontWeight?: string | undefined;
+    fontVariant?: string | undefined;
+};

package/dist/mjs/src/rendering/TextRenderingStyle.mjs

@@ -0,0 +1,23 @@
+import  { cloneStyle, styleFromJSON, styleToJSON }  from './RenderingStyle.mjs';
+export const cloneTextStyle = (style) => {
+    return Object.assign(Object.assign({}, style), { renderingStyle: cloneStyle(style.renderingStyle) });
+};
+export const textStyleFromJSON = (json) => {
+    if (typeof json === 'string') {
+        json = JSON.parse(json);
+    }
+    if (typeof (json.fontFamily) !== 'string') {
+        throw new Error('Serialized textStyle missing string fontFamily attribute!');
+    }
+    const style = {
+        renderingStyle: styleFromJSON(json.renderingStyle),
+        size: json.size,
+        fontWeight: json.fontWeight,
+        fontVariant: json.fontVariant,
+        fontFamily: json.fontFamily,
+    };
+    return style;
+};
+export const textStyleToJSON = (style) => {
+    return Object.assign(Object.assign({}, style), { renderingStyle: styleToJSON(style.renderingStyle) });
+};

package/dist/mjs/src/rendering/caching/CacheRecord.d.ts

@@ -0,0 +1,20 @@
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import { BeforeDeallocCallback, CacheState } from './types';
+export default class CacheRecord {
+    private onBeforeDeallocCallback;
+    private cacheState;
+    private renderer;
+    private lastUsedCycle;
+    private allocd;
+    allocCount: number;
+    constructor(onBeforeDeallocCallback: BeforeDeallocCallback | null, cacheState: CacheState);
+    startRender(): AbstractRenderer;
+    dealloc(): void;
+    isAllocd(): boolean;
+    realloc(newDeallocCallback: BeforeDeallocCallback): void;
+    getLastUsedCycle(): number;
+    getTransform(drawTo: Rect2): Mat33;
+    setRenderingRegion(drawTo: Rect2): void;
+}

package/dist/mjs/src/rendering/caching/CacheRecord.mjs

@@ -0,0 +1,55 @@
+import  Mat33  from '../../math/Mat33.mjs';
+// Represents a cached renderer/canvas
+// This is not a [CacheNode] -- it handles cached renderers and does not have sub-renderers.
+export default class CacheRecord {
+    constructor(onBeforeDeallocCallback, cacheState) {
+        this.onBeforeDeallocCallback = onBeforeDeallocCallback;
+        this.cacheState = cacheState;
+        this.allocd = false;
+        // For debugging
+        this.allocCount = 0;
+        this.renderer = cacheState.props.createRenderer();
+        this.lastUsedCycle = -1;
+        this.allocd = true;
+    }
+    startRender() {
+        this.lastUsedCycle = this.cacheState.currentRenderingCycle;
+        if (!this.allocd) {
+            throw new Error('Only alloc\'d canvases can be rendered to');
+        }
+        return this.renderer;
+    }
+    dealloc() {
+        var _a;
+        (_a = this.onBeforeDeallocCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.allocd = false;
+        this.onBeforeDeallocCallback = null;
+        this.lastUsedCycle = 0;
+    }
+    isAllocd() {
+        return this.allocd;
+    }
+    realloc(newDeallocCallback) {
+        if (this.allocd) {
+            this.dealloc();
+        }
+        this.allocd = true;
+        this.onBeforeDeallocCallback = newDeallocCallback;
+        this.lastUsedCycle = this.cacheState.currentRenderingCycle;
+        this.allocCount++;
+    }
+    getLastUsedCycle() {
+        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))
+    getTransform(drawTo) {
+        const transform = Mat33.scaling2D(this.cacheState.props.blockResolution.x / drawTo.size.x).rightMul(Mat33.translation(drawTo.topLeft.times(-1)));
+        return transform;
+    }
+    setRenderingRegion(drawTo) {
+        this.renderer.setTransform(
+        // Invert to map objects instead of the viewport
+        this.getTransform(drawTo));
+    }
+}

package/dist/mjs/src/rendering/caching/CacheRecordManager.d.ts

@@ -0,0 +1,12 @@
+import { BeforeDeallocCallback, CacheProps, CacheState } from './types';
+import CacheRecord from './CacheRecord';
+import Rect2 from '../../math/Rect2';
+export declare class CacheRecordManager {
+    private cacheRecords;
+    private maxCanvases;
+    private cacheState;
+    constructor(cacheProps: CacheProps);
+    setSharedState(state: CacheState): void;
+    allocCanvas(drawTo: Rect2, onDealloc: BeforeDeallocCallback): CacheRecord;
+    private getLeastRecentlyUsedRecord;
+}

package/dist/mjs/src/rendering/caching/CacheRecordManager.mjs

@@ -0,0 +1,43 @@
+import  CacheRecord  from './CacheRecord.mjs';
+const debugMode = false;
+export class CacheRecordManager {
+    constructor(cacheProps) {
+        // Fixed-size array: Cache blocks are assigned indicies into [cachedCanvases].
+        this.cacheRecords = [];
+        this.maxCanvases = Math.ceil(
+        // Assuming four components per pixel:
+        cacheProps.cacheSize / 4 / cacheProps.blockResolution.x / cacheProps.blockResolution.y);
+    }
+    setSharedState(state) {
+        this.cacheState = state;
+    }
+    allocCanvas(drawTo, onDealloc) {
+        if (this.cacheRecords.length < this.maxCanvases) {
+            const record = new CacheRecord(onDealloc, this.cacheState);
+            record.setRenderingRegion(drawTo);
+            this.cacheRecords.push(record);
+            if (debugMode) {
+                console.log('[Cache] Cache spaces used: ', this.cacheRecords.length, ' of ', this.maxCanvases);
+            }
+            return record;
+        }
+        else {
+            const lru = this.getLeastRecentlyUsedRecord();
+            if (debugMode) {
+                console.log('[Cache] Re-alloc. Times allocated: ', lru.allocCount, '\nLast used cycle: ', lru.getLastUsedCycle(), '\nCurrent cycle: ', this.cacheState.currentRenderingCycle);
+            }
+            lru.realloc(onDealloc);
+            lru.setRenderingRegion(drawTo);
+            if (debugMode) {
+                console.log('[Cache] Now re-alloc\'d. Last used cycle: ', lru.getLastUsedCycle());
+                console.assert(lru['cacheState'] === this.cacheState, '[Cache] Unequal cache states! cacheState should be a shared object!');
+            }
+            return lru;
+        }
+    }
+    // Returns null if there are no cache records. Returns an unalloc'd record if one exists.
+    getLeastRecentlyUsedRecord() {
+        this.cacheRecords.sort((a, b) => a.getLastUsedCycle() - b.getLastUsedCycle());
+        return this.cacheRecords[0];
+    }
+}