js-draw 0.0.9 → 0.1.1

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,13 +10,16 @@ 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;
     getDryInkRenderer(): AbstractRenderer;
     getWetInkRenderer(): AbstractRenderer;
     flatten(): 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');
@@ -82,6 +112,9 @@ export default class Display {
         this.dryInkRenderer.clear();
         return this.dryInkRenderer;
     }
+    setDraftMode(draftMode) {
+        this.dryInkRenderer.setDraftMode(draftMode);
+    }
     getDryInkRenderer() {
         return this.dryInkRenderer;
     }

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;
+}

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

@@ -0,0 +1,42 @@
+import Rect2 from '../../geometry/Rect2';
+import RenderingCacheNode from './RenderingCacheNode';
+import { CacheRecordManager } from './CacheRecordManager';
+export default class RenderingCache {
+    constructor(cacheProps) {
+        this.partialSharedState = {
+            props: cacheProps,
+            currentRenderingCycle: 0,
+        };
+        this.recordManager = new CacheRecordManager(this.partialSharedState);
+    }
+    getSharedState() {
+        return Object.assign(Object.assign({}, this.partialSharedState), { recordManager: this.recordManager });
+    }
+    render(screenRenderer, image, viewport) {
+        var _a;
+        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 = (_a = this.rootNode.smallestChildContaining(visibleRect)) !== null && _a !== void 0 ? _a : 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/dist/src/rendering/caching/RenderingCacheNode.d.ts

@@ -0,0 +1,28 @@
+import { ImageNode } from '../../EditorImage';
+import Rect2 from '../../geometry/Rect2';
+import Viewport from '../../Viewport';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import { CacheState } from './types';
+export default class RenderingCacheNode {
+    readonly region: Rect2;
+    private readonly cacheState;
+    private instantiatedChildren;
+    private parent;
+    private cachedRenderer;
+    private renderedIds;
+    private renderedMaxZIndex;
+    constructor(region: Rect2, cacheState: CacheState);
+    generateParent(): RenderingCacheNode;
+    private generateChildren;
+    private getChildren;
+    smallestChildContaining(rect: Rect2): RenderingCacheNode | null;
+    private renderingWouldBeHighEnoughResolution;
+    private allChildrenCanRender;
+    private computeSortedByLeafIds;
+    private idsOfIntersecting;
+    private renderingIsUpToDate;
+    renderItems(screenRenderer: AbstractRenderer, items: ImageNode[], viewport: Viewport): void;
+    private isEmpty;
+    private onRegionDealloc;
+    private checkRep;
+}

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

@@ -0,0 +1,301 @@
+// A cache record with sub-nodes.
+import Color4 from '../../Color4';
+import { sortLeavesByZIndex } from '../../EditorImage';
+import Rect2 from '../../geometry/Rect2';
+// 3x3 divisions for each node.
+const cacheDivisionSize = 3;
+// True: Show rendering updates.
+const debugMode = false;
+export default class RenderingCacheNode {
+    constructor(region, cacheState) {
+        this.region = region;
+        this.cacheState = cacheState;
+        // invariant: instantiatedChildren.length === 9
+        this.instantiatedChildren = [];
+        this.parent = null;
+        this.cachedRenderer = null;
+        // invariant: sortedInAscendingOrder(renderedIds)
+        this.renderedIds = [];
+        this.renderedMaxZIndex = null;
+    }
+    // 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.
+    generateParent() {
+        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.
+    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.
+    getChildren() {
+        this.checkRep();
+        this.generateChildren();
+        return this.instantiatedChildren;
+    }
+    smallestChildContaining(rect) {
+        var _a;
+        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 (_a = child.smallestChildContaining(rect)) !== null && _a !== void 0 ? _a : child;
+            }
+        }
+        return null;
+    }
+    // => [true] iff [this] can be rendered without too much scaling
+    renderingWouldBeHighEnoughResolution(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.
+    allChildrenCanRender(viewport, leavesSortedById) {
+        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;
+    }
+    computeSortedByLeafIds(leaves) {
+        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
+    idsOfIntersecting(nodes) {
+        const result = [];
+        for (const node of nodes) {
+            if (node.getBBox().intersects(this.region)) {
+                result.push(node.getId());
+            }
+        }
+        return result;
+    }
+    renderingIsUpToDate(sortedIds) {
+        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]
+    renderItems(screenRenderer, items, viewport) {
+        var _a, _b;
+        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 = 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();
+                            (_a = this.renderedMaxZIndex) !== null && _a !== void 0 ? _a : (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 {
+                    (_b = this.cachedRenderer) === null || _b === void 0 ? void 0 : _b.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.
+    isEmpty() {
+        if (this.cachedRenderer !== null) {
+            return false;
+        }
+        return this.instantiatedChildren.every(child => child.isEmpty());
+    }
+    onRegionDealloc() {
+        this.cachedRenderer = null;
+        if (this.isEmpty()) {
+            this.instantiatedChildren = [];
+        }
+    }
+    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');
+        }
+    }
+}