js-draw 0.0.10 → 0.1.2

package/dist/src/components/Stroke.js

@@ -41,7 +41,7 @@ export default class Stroke extends AbstractComponent {
                 canvas.drawPath(part);
             }
         }
-        canvas.endObject();
+        canvas.endObject(this.getLoadSaveData());
     }
     // Grows the bounding box for a given stroke part based on that part's style.
     bboxForPart(origBBox, style) {

package/dist/src/components/UnknownSVGObject.d.ts

@@ -1,7 +1,7 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 export default class UnknownSVGObject extends AbstractComponent {

package/dist/src/components/UnknownSVGObject.js

@@ -1,5 +1,5 @@
 import Rect2 from '../geometry/Rect2';
-import SVGRenderer from '../rendering/SVGRenderer';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
 export default class UnknownSVGObject extends AbstractComponent {
     constructor(svgObject) {

package/dist/src/components/builders/ArrowBuilder.d.ts

@@ -1,5 +1,5 @@
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';

package/dist/src/components/builders/FreehandLineBuilder.d.ts

@@ -1,4 +1,4 @@
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import Rect2 from '../../geometry/Rect2';
 import Stroke from '../Stroke';
 import { StrokeDataPoint } from '../../types';

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -160,7 +160,7 @@ export default class FreehandLineBuilder {
         const upperBoundary = computeBoundaryCurve(1, halfVec);
         const lowerBoundary = computeBoundaryCurve(-1, halfVec);
         // If the boundaries have two intersections, increasing the half vector's length could fix this.
-        if (upperBoundary.intersects(lowerBoundary).length === 2) {
+        if (upperBoundary.intersects(lowerBoundary).length > 0) {
             halfVec = halfVec.times(2);
         }
         const pathCommands = [

package/dist/src/components/builders/LineBuilder.d.ts

@@ -1,5 +1,5 @@
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';

package/dist/src/components/builders/RectangleBuilder.d.ts

@@ -1,5 +1,5 @@
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';

package/dist/src/components/builders/types.d.ts

@@ -1,5 +1,5 @@
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';

package/dist/src/geometry/Mat33.js

@@ -4,6 +4,9 @@ import Vec3 from './Vec3';
 // a two-dimensional affine transformation. (An affine transformation scales/rotates/shears
 // **and** translates while a linear transformation just scales/rotates/shears).
 export default class Mat33 {
+    // ⎡ a1 a2 a3 ⎤
+    // ⎢ b1 b2 b3 ⎥
+    // ⎣ c1 c2 c3 ⎦
     constructor(a1, a2, a3, b1, b2, b3, c1, c2, c3) {
         this.a1 = a1;
         this.a2 = a2;

package/dist/src/geometry/Path.d.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';

package/dist/src/geometry/Path.js

@@ -208,8 +208,8 @@ export default class Path {
         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*[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) {
                 return text;
@@ -230,7 +230,9 @@ export default class Path {
                 text = `${negativeSign + (preDecimal + carry).toString()}.${newPostDecimal}`;
             }
             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(/[.]$/, '');
         };
         const addCommand = (command, ...points) => {
@@ -273,10 +275,12 @@ export default class Path {
         // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
         // and
         // https://www.w3.org/TR/SVG2/paths.html
+        var _a;
         // Remove linebreaks
         pathString = pathString.split('\n').join(' ');
         let lastPos = Vec2.zero;
         let firstPos = null;
+        let startPos = null;
         let isFirstCommand = true;
         const commands = [];
         const moveTo = (point) => {
@@ -315,15 +319,61 @@ export default class Path {
                 endPoint,
             });
         };
+        const commandArgCounts = {
+            '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(part => part.length > 0);
-            const numericArgs = argParts.map(arg => parseFloat(arg));
-            const commandChar = current[1];
-            const uppercaseCommand = commandChar !== commandChar.toLowerCase();
-            const args = numericArgs.reduce((accumulator, current, index, parts) => {
+            const argParts = current[2].trim().split(/[^0-9Ee.-]/).filter(part => part.length > 0).reduce((accumualtor, current) => {
+                // 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, current) => {
+                    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;
+                }
+                // 'z' always acts like an uppercase lineTo(startPos)
+                uppercaseCommand = true;
+                commandChar = 'l';
+            }
+            const commandArgCount = (_a = commandArgCounts[commandChar]) !== null && _a !== void 0 ? _a : 0;
+            const allArgs = numericArgs.reduce((accumulator, current, index, parts) => {
                 if (index % 2 !== 0) {
                     const currentAsFloat = current;
                     const prevAsFloat = parts[index - 1];
@@ -332,76 +382,59 @@ export default class Path {
                 else {
                     return accumulator;
                 }
-            }, []).map((coordinate) => {
+            }, []).map((coordinate, index) => {
                 // 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);
+                }
+                if ((index + 1) % commandArgCount === 0) {
+                    lastPos = newPos;
                 }
+                return newPos;
             });
-            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);
-                    }
-                    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;
-                // Vertical line
-                case 'v':
-                    expectedPointArgCount = 0;
-                    if (uppercaseCommand) {
-                        lineTo(Vec2.of(lastPos.x, numericArgs[1]));
-                    }
-                    else {
-                        lineTo(lastPos.plus(Vec2.of(0, numericArgs[1])));
-                    }
-                    break;
-                default:
-                    throw new Error(`Unknown path command ${commandChar}`);
+            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'));
             }
-            if (args.length !== expectedPointArgCount) {
-                throw new Error(`
-					Incorrect number of arguments: got ${JSON.stringify(args)} with a length of ${args.length} ≠ ${expectedPointArgCount}.
-				`.trim());
+            for (let argPos = 0; argPos < allArgs.length; argPos += commandArgCount) {
+                const args = allArgs.slice(argPos, argPos + commandArgCount);
+                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}`);
+                }
+                isFirstCommand = false;
             }
-            if (args.length > 0) {
-                firstPos !== null && firstPos !== void 0 ? firstPos : (firstPos = args[0]);
+            if (allArgs.length > 0) {
+                firstPos !== null && firstPos !== void 0 ? firstPos : (firstPos = allArgs[0]);
+                startPos !== null && startPos !== void 0 ? startPos : (startPos = firstPos);
+                lastPos = allArgs[allArgs.length - 1];
             }
-            isFirstCommand = false;
         }
-        return new Path(firstPos !== null && firstPos !== void 0 ? firstPos : Vec2.zero, commands);
+        return new Path(startPos !== null && startPos !== void 0 ? startPos : Vec2.zero, commands);
     }
 }

package/dist/src/geometry/Rect2.d.ts

@@ -27,6 +27,7 @@ export default class Rect2 {
     intersects(other: Rect2): boolean;
     intersection(other: Rect2): Rect2 | null;
     union(other: Rect2): Rect2;
+    divideIntoGrid(columns: number, rows: number): Rect2[];
     grownToPoint(point: Point2, margin?: number): Rect2;
     grownBy(margin: number): Rect2;
     get corners(): Point2[];

package/dist/src/geometry/Rect2.js

@@ -38,20 +38,31 @@ export default class Rect2 {
             && this.bottomRight.y >= other.bottomRight.y;
     }
     intersects(other) {
-        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
     intersection(other) {
-        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);
     }
     // Returns a new rectangle containing both [this] and [other].
@@ -60,6 +71,33 @@ export default class Rect2 {
         const bottomRight = this.bottomRight.zip(other.bottomRight, Math.max);
         return Rect2.fromCorners(topLeft, bottomRight);
     }
+    // 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.
+    divideIntoGrid(columns, rows) {
+        const result = [];
+        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/dist/src/{Display.d.ts → rendering/Display.d.ts}

@@ -1,5 +1,6 @@
-import AbstractRenderer from './rendering/AbstractRenderer';
-import { Editor } from './Editor';
+import AbstractRenderer from './renderers/AbstractRenderer';
+import { Editor } from '../Editor';
+import RenderingCache from './caching/RenderingCache';
 export declare enum RenderingMode {
     DummyRenderer = 0,
     CanvasRenderer = 1
@@ -9,11 +10,13 @@ export default class Display {
     private parent;
     private dryInkRenderer;
     private wetInkRenderer;
+    private cache;
     private resizeSurfacesCallback?;
     private flattenCallback?;
     constructor(editor: Editor, mode: RenderingMode, parent: HTMLElement | null);
     get width(): number;
     get height(): number;
+    getCache(): RenderingCache;
     private initializeCanvasRendering;
     startRerender(): AbstractRenderer;
     setDraftMode(draftMode: boolean): void;

package/dist/src/{Display.js → rendering/Display.js}

@@ -1,7 +1,8 @@
-import CanvasRenderer from './rendering/CanvasRenderer';
-import { EditorEventType } from './types';
-import DummyRenderer from './rendering/DummyRenderer';
-import { Vec2 } from './geometry/Vec2';
+import CanvasRenderer from './renderers/CanvasRenderer';
+import { EditorEventType } from '../types';
+import DummyRenderer from './renderers/DummyRenderer';
+import { Vec2 } from '../geometry/Vec2';
+import RenderingCache from './caching/RenderingCache';
 export var RenderingMode;
 (function (RenderingMode) {
     RenderingMode[RenderingMode["DummyRenderer"] = 0] = "DummyRenderer";
@@ -22,6 +23,32 @@ export default class Display {
         else {
             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 => {
             var _a;
             if (event.kind !== EditorEventType.DisplayResized) {
@@ -39,6 +66,9 @@ export default class Display {
     get height() {
         return this.dryInkRenderer.displaySize().y;
     }
+    getCache() {
+        return this.cache;
+    }
     initializeCanvasRendering() {
         const dryInkCanvas = document.createElement('canvas');
         const wetInkCanvas = document.createElement('canvas');

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

@@ -0,0 +1,19 @@
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/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;
+    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/src/rendering/caching/CacheRecord.js

@@ -0,0 +1,52 @@
+import Mat33 from '../../geometry/Mat33';
+// 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;
+        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;
+    }
+    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/src/rendering/caching/CacheRecordManager.d.ts

@@ -0,0 +1,11 @@
+import { BeforeDeallocCallback, PartialCacheState } from './types';
+import CacheRecord from './CacheRecord';
+import Rect2 from '../../geometry/Rect2';
+export declare class CacheRecordManager {
+    private readonly cacheState;
+    private cacheRecords;
+    private maxCanvases;
+    constructor(cacheState: PartialCacheState);
+    allocCanvas(drawTo: Rect2, onDealloc: BeforeDeallocCallback): CacheRecord;
+    private getLeastRecentlyUsedRecord;
+}

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

@@ -0,0 +1,31 @@
+import CacheRecord from './CacheRecord';
+export class CacheRecordManager {
+    constructor(cacheState) {
+        this.cacheState = cacheState;
+        // Fixed-size array: Cache blocks are assigned indicies into [cachedCanvases].
+        this.cacheRecords = [];
+        const cacheProps = cacheState.props;
+        this.maxCanvases = Math.ceil(
+        // Assuming four components per pixel:
+        cacheProps.cacheSize / 4 / cacheProps.blockResolution.x / cacheProps.blockResolution.y);
+    }
+    allocCanvas(drawTo, onDealloc) {
+        if (this.cacheRecords.length < this.maxCanvases) {
+            const record = new CacheRecord(onDealloc, Object.assign(Object.assign({}, 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.
+    getLeastRecentlyUsedRecord() {
+        this.cacheRecords.sort((a, b) => a.getLastUsedCycle() - b.getLastUsedCycle());
+        return this.cacheRecords[0];
+    }
+}

package/dist/src/rendering/caching/RenderingCache.d.ts

@@ -0,0 +1,12 @@
+import { ImageNode } from '../../EditorImage';
+import Viewport from '../../Viewport';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import { CacheProps, CacheState } from './types';
+export default class RenderingCache {
+    private partialSharedState;
+    private recordManager;
+    private rootNode;
+    constructor(cacheProps: CacheProps);
+    getSharedState(): CacheState;
+    render(screenRenderer: AbstractRenderer, image: ImageNode, viewport: Viewport): void;
+}