js-draw 1.8.0 → 1.9.0

package/dist/cjs/SVGLoader.d.ts

@@ -18,7 +18,7 @@ export declare enum SVGLoaderLoadMethod {
 export interface SVGLoaderOptions {
     sanitize?: boolean;
     disableUnknownObjectWarnings?: boolean;
-    loadMethod?: 'iframe' | 'domparser';
+    loadMethod?: SVGLoaderLoadMethod;
 }
 export default class SVGLoader implements ImageLoader {
     private source;

package/dist/cjs/SVGLoader.js

@@ -35,6 +35,7 @@ const SVGGlobalAttributesObject_1 = __importDefault(require("./components/SVGGlo
 const TextComponent_1 = __importStar(require("./components/TextComponent"));
 const UnknownSVGObject_1 = __importDefault(require("./components/UnknownSVGObject"));
 const RenderablePathSpec_1 = require("./rendering/RenderablePathSpec");
+const SVGRenderer_1 = require("./rendering/renderers/SVGRenderer");
 // Size of a loaded image if no size is specified.
 exports.defaultSVGViewRect = new math_1.Rect2(0, 0, 500, 500);
 // Key to retrieve unrecognised attributes from an AbstractComponent
@@ -504,7 +505,13 @@ class SVGLoader {
                 this.updateSVGAttrs(node);
                 break;
             case 'style':
-                await this.addUnknownNode(node);
+                // Keeping unnecessary style sheets can cause the browser to keep all
+                // SVG elements *referenced* by the style sheet in some browsers.
+                //
+                // Only keep the style sheet if it won't be discarded on save.
+                if (node.getAttribute('id') !== SVGRenderer_1.renderedStylesheetId) {
+                    await this.addUnknownNode(node);
+                }
                 break;
             default:
                 if (!this.disableUnknownObjectWarnings) {
@@ -547,6 +554,7 @@ class SVGLoader {
             this.onDetermineExportRect?.(exports.defaultSVGViewRect);
         }
         this.onFinish?.();
+        this.onFinish = null;
     }
     /**
      * Create an `SVGLoader` from the content of an SVG image. SVGs are loaded within a sandboxed
@@ -558,7 +566,7 @@ class SVGLoader {
      * @param options - if `true` or `false`, treated as the `sanitize` option -- don't store unknown attributes.
      */
     static fromString(text, options = false) {
-        const domParserLoad = typeof options !== 'boolean' && options?.loadMethod === 'domparser';
+        const domParserLoad = typeof options !== 'boolean' && options?.loadMethod === SVGLoaderLoadMethod.DOMParser;
         const { svgElem, cleanUp } = (() => {
             // If the user requested an iframe load (the default) try to load with an iframe.
             // There are some cases (e.g. in a sandboxed iframe) where this doesn't work.
@@ -606,6 +614,7 @@ class SVGLoader {
                     const cleanUp = () => {
                         svgElem.remove();
                         sandbox.remove();
+                        sandbox.src = '';
                     };
                     return { svgElem, cleanUp };
                 }

package/dist/cjs/image/EditorImage.d.ts

@@ -123,8 +123,28 @@ export default class EditorImage {
      */
     private setExportRectDirectly;
     private onExportViewportChanged;
+    /**
+     * @internal
+     *
+     * Enables debug mode for **all** `EditorImage`s.
+     *
+     * **Only use for debugging**.
+     *
+     * @internal
+     */
+    setDebugMode(newDebugMode: boolean): void;
     private static SetImportExportRectCommand;
 }
+/**
+ * Determines the first index in `sortedLeaves` that needs to be rendered
+ * (based on occlusion -- everything before that index can be skipped and
+ * produce a visually-equivalent image).
+ *
+ * Does nothing if visibleRect is not provided
+ *
+ * @internal
+ */
+export declare const computeFirstIndexToRender: (sortedLeaves: Array<ImageNode>, visibleRect?: Rect2) => number;
 type TooSmallToRenderCheck = (rect: Rect2) => boolean;
 /**
  * Part of the Editor's image. Does not handle fullscreen/invisible components.

package/dist/cjs/image/EditorImage.js

@@ -31,7 +31,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 var _a, _b, _c;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RootImageNode = exports.ImageNode = exports.EditorImageEventType = exports.sortLeavesByZIndex = void 0;
+exports.RootImageNode = exports.ImageNode = exports.computeFirstIndexToRender = exports.EditorImageEventType = exports.sortLeavesByZIndex = void 0;
 const Viewport_1 = __importDefault(require("../Viewport"));
 const AbstractComponent_1 = __importStar(require("../components/AbstractComponent"));
 const math_1 = require("@js-draw/math");
@@ -49,7 +49,7 @@ var EditorImageEventType;
     EditorImageEventType[EditorImageEventType["ExportViewportChanged"] = 0] = "ExportViewportChanged";
     EditorImageEventType[EditorImageEventType["AutoresizeModeChanged"] = 1] = "AutoresizeModeChanged";
 })(EditorImageEventType || (exports.EditorImageEventType = EditorImageEventType = {}));
-const debugMode = false;
+let debugMode = false;
 // Handles lookup/storage of elements in the image
 class EditorImage {
     // @internal
@@ -301,6 +301,18 @@ class EditorImage {
             });
         }
     }
+    /**
+     * @internal
+     *
+     * Enables debug mode for **all** `EditorImage`s.
+     *
+     * **Only use for debugging**.
+     *
+     * @internal
+     */
+    setDebugMode(newDebugMode) {
+        debugMode = newDebugMode;
+    }
 }
 _a = EditorImage;
 // A Command that can access private [EditorImage] functionality
@@ -440,6 +452,31 @@ EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand
     })(),
     _c);
 exports.default = EditorImage;
+/**
+ * Determines the first index in `sortedLeaves` that needs to be rendered
+ * (based on occlusion -- everything before that index can be skipped and
+ * produce a visually-equivalent image).
+ *
+ * Does nothing if visibleRect is not provided
+ *
+ * @internal
+ */
+const computeFirstIndexToRender = (sortedLeaves, visibleRect) => {
+    let startIndex = 0;
+    if (visibleRect) {
+        for (let i = sortedLeaves.length - 1; i >= 1; i--) {
+            if (
+            // Check for occlusion
+            sortedLeaves[i].getBBox().containsRect(visibleRect)
+                && sortedLeaves[i].getContent()?.occludesEverythingBelowWhenRenderedInRect(visibleRect)) {
+                startIndex = i;
+                break;
+            }
+        }
+    }
+    return startIndex;
+};
+exports.computeFirstIndexToRender = computeFirstIndexToRender;
 /**
  * Part of the Editor's image. Does not handle fullscreen/invisible components.
  * @internal
@@ -696,15 +733,7 @@ class ImageNode {
         // If some components hide others (and we're permitted to simplify,
         // which is true in the case of visibleRect being defined), then only
         // draw the non-hidden components:
-        let startIndex = 0;
-        if (visibleRect) {
-            for (let i = leaves.length - 1; i >= 1; i--) {
-                if (leaves[i].getContent()?.occludesEverythingBelowWhenRenderedInRect(visibleRect)) {
-                    startIndex = i;
-                    break;
-                }
-            }
-        }
+        const startIndex = (0, exports.computeFirstIndexToRender)(leaves);
         for (let i = startIndex; i < leaves.length; i++) {
             const leaf = leaves[i];
             // Leaves by definition have content

package/dist/cjs/rendering/Display.d.ts

@@ -26,6 +26,7 @@ export default class Display {
     private textRenderer;
     private textRerenderOutput;
     private cache;
+    private devicePixelRatio;
     private resizeSurfacesCallback?;
     private flattenCallback?;
     /** @internal */
@@ -46,6 +47,14 @@ export default class Display {
     getColorAt: (_screenPos: Point2) => Color4 | null;
     private initializeCanvasRendering;
     private initializeTextRendering;
+    /**
+     * Sets the device-pixel-ratio.
+     *
+     * Intended for debugging. Users do not need to call this manually.
+     *
+     * @internal
+     */
+    setDevicePixelRatio(dpr: number): Promise<void> | undefined;
     /**
      * Rerenders the text-based display.
      * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.

package/dist/cjs/rendering/Display.js

@@ -34,6 +34,7 @@ class Display {
         this.editor = editor;
         this.parent = parent;
         this.textRerenderOutput = null;
+        this.devicePixelRatio = window.devicePixelRatio ?? 1;
         /**
          * @returns the color at the given point on the dry ink renderer, or `null` if `screenPos`
          * 	is not on the display.
@@ -118,16 +119,29 @@ class Display {
             this.parent.appendChild(wetInkCanvas);
         }
         this.resizeSurfacesCallback = () => {
+            const expectedWidth = (canvas) => {
+                return Math.ceil(canvas.clientWidth * this.devicePixelRatio);
+            };
+            const expectedHeight = (canvas) => {
+                return Math.ceil(canvas.clientHeight * this.devicePixelRatio);
+            };
             const hasSizeMismatch = (canvas) => {
-                return canvas.clientHeight !== canvas.height || canvas.clientWidth !== canvas.width;
+                return expectedHeight(canvas) !== canvas.height || expectedWidth(canvas) !== 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;
+                dryInkCanvas.width = expectedWidth(dryInkCanvas);
+                dryInkCanvas.height = expectedHeight(dryInkCanvas);
+                wetInkCanvas.width = expectedWidth(wetInkCanvas);
+                wetInkCanvas.height = expectedHeight(wetInkCanvas);
+                // Ensure correct drawing operations on high-resolution screens.
+                // See
+                // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#scaling_for_high_resolution_displays
+                wetInkCtx.resetTransform();
+                dryInkCtx.resetTransform();
+                dryInkCtx.scale(this.devicePixelRatio, this.devicePixelRatio);
+                wetInkCtx.scale(this.devicePixelRatio, this.devicePixelRatio);
                 this.editor.notifier.dispatch(types_1.EditorEventType.DisplayResized, {
                     kind: types_1.EditorEventType.DisplayResized,
                     newSize: math_1.Vec2.of(this.width, this.height),
@@ -136,7 +150,10 @@ class Display {
         };
         this.resizeSurfacesCallback();
         this.flattenCallback = () => {
+            dryInkCtx.save();
+            dryInkCtx.resetTransform();
             dryInkCtx.drawImage(wetInkCanvas, 0, 0);
+            dryInkCtx.restore();
         };
         this.getColorAt = (screenPos) => {
             const pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
@@ -162,6 +179,23 @@ class Display {
         textRendererOutputContainer.replaceChildren(rerenderButton, this.textRerenderOutput);
         this.editor.createHTMLOverlay(textRendererOutputContainer);
     }
+    /**
+     * Sets the device-pixel-ratio.
+     *
+     * Intended for debugging. Users do not need to call this manually.
+     *
+     * @internal
+     */
+    setDevicePixelRatio(dpr) {
+        const minDpr = 0.001;
+        const maxDpr = 10;
+        if (isFinite(dpr) && dpr >= minDpr && dpr <= maxDpr && dpr !== this.devicePixelRatio) {
+            this.devicePixelRatio = dpr;
+            this.resizeSurfacesCallback?.();
+            return this.editor.queueRerender();
+        }
+        return undefined;
+    }
     /**
      * Rerenders the text-based display.
      * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.

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

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CacheRecordManager = void 0;
 const CacheRecord_1 = __importDefault(require("./CacheRecord"));
-const debugMode = false;
 class CacheRecordManager {
     constructor(cacheProps) {
         // Fixed-size array: Cache blocks are assigned indicies into [cachedCanvases].
@@ -22,19 +21,19 @@ class CacheRecordManager {
             const record = new CacheRecord_1.default(onDealloc, this.cacheState);
             record.setRenderingRegion(drawTo);
             this.cacheRecords.push(record);
-            if (debugMode) {
+            if (this.cacheState.debugMode) {
                 console.log('[Cache] Cache spaces used: ', this.cacheRecords.length, ' of ', this.maxCanvases);
             }
             return record;
         }
         else {
             const lru = this.getLeastRecentlyUsedRecord();
-            if (debugMode) {
+            if (this.cacheState.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) {
+            if (this.cacheState.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!');
             }

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

@@ -9,4 +9,5 @@ export default class RenderingCache {
     constructor(cacheProps: CacheProps);
     render(screenRenderer: AbstractRenderer, image: ImageNode, viewport: Viewport): void;
     getDebugInfo(): string;
+    setIsDebugMode(debugMode: boolean): void;
 }

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

@@ -13,6 +13,7 @@ class RenderingCache {
             props: cacheProps,
             currentRenderingCycle: 0,
             recordManager: this.recordManager,
+            debugMode: false,
         };
         this.recordManager.setSharedState(this.sharedState);
     }
@@ -49,5 +50,8 @@ class RenderingCache {
     getDebugInfo() {
         return this.recordManager.getDebugInfo();
     }
+    setIsDebugMode(debugMode) {
+        this.sharedState.debugMode = debugMode;
+    }
 }
 exports.default = RenderingCache;

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

@@ -5,8 +5,6 @@ const EditorImage_1 = require("../../image/EditorImage");
 const math_1 = require("@js-draw/math");
 // 3x3 divisions for each node.
 const cacheDivisionSize = 3;
-// True: Show rendering updates.
-const debugMode = false;
 class RenderingCacheNode {
     constructor(region, cacheState) {
         this.region = region;
@@ -163,8 +161,8 @@ class RenderingCacheNode {
             items.forEach(item => item.render(screenRenderer, viewport.visibleRect));
             return;
         }
-        if (debugMode) {
-            screenRenderer.drawRect(this.region, 0.5 * viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.yellow });
+        if (this.cacheState.debugMode) {
+            screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.yellow });
         }
         // Could we render direclty from [this] or do we need to recurse?
         const couldRender = this.renderingWouldBeHighEnoughResolution(viewport);
@@ -199,7 +197,9 @@ class RenderingCacheNode {
                 }
                 let leafApproxRenderTime = 0;
                 for (const leaf of leavesByIds) {
-                    leafApproxRenderTime += leaf.getContent().getProportionalRenderingTime();
+                    if (!tooSmallToRender(leaf.getBBox())) {
+                        leafApproxRenderTime += leaf.getContent().getProportionalRenderingTime();
+                    }
                 }
                 // Is it worth it to render the items?
                 if (leafApproxRenderTime > this.cacheState.props.minProportionalRenderTimePerCache) {
@@ -235,26 +235,30 @@ class RenderingCacheNode {
                                     this.renderedMaxZIndex = zIndex;
                                 }
                             }
-                            if (debugMode) {
-                                screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.clay });
+                            if (this.cacheState.debugMode) {
+                                // Clay for adding new elements
+                                screenRenderer.drawRect(this.region, 2 * viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.clay });
                             }
                         }
                     }
-                    else if (debugMode) {
+                    else if (this.cacheState.debugMode) {
                         console.log('Decided on a full re-render. Reason: At least one of the following is false:', '\n leafIds.length > this.renderedIds.length: ', leafIds.length > this.renderedIds.length, '\n this.allRenderedIdsIn(leafIds): ', this.allRenderedIdsIn(leafIds), '\n this.renderedMaxZIndex !== null: ', this.renderedMaxZIndex !== null, '\n\nthis.rerenderedIds: ', this.renderedIds, ', leafIds: ', leafIds);
                     }
                     if (fullRerenderNeeded) {
                         thisRenderer = this.cachedRenderer.startRender();
                         thisRenderer.clear();
                         this.renderedMaxZIndex = null;
-                        for (const leaf of leaves) {
+                        const startIndex = (0, EditorImage_1.computeFirstIndexToRender)(leaves, this.region);
+                        for (let i = startIndex; i < leaves.length; i++) {
+                            const leaf = leaves[i];
                             const content = leaf.getContent();
                             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: math_1.Color4.red });
+                        if (this.cacheState.debugMode) {
+                            // Red for full rerender
+                            screenRenderer.drawRect(this.region, 3 * viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.red });
                         }
                     }
                     this.renderedIds = leafIds;
@@ -271,6 +275,10 @@ class RenderingCacheNode {
                         leaf.render(screenRenderer, this.region.intersection(viewport.visibleRect));
                     }
                     screenRenderer.endObject();
+                    if (this.cacheState.debugMode) {
+                        // Green for no cache needed render
+                        screenRenderer.drawRect(this.region, 2 * viewport.getSizeOfPixelOnCanvas(), { fill: math_1.Color4.green });
+                    }
                 }
             }
             else {

package/dist/cjs/rendering/caching/types.d.ts

@@ -16,4 +16,5 @@ export interface CacheState {
     currentRenderingCycle: number;
     props: CacheProps;
     recordManager: CacheRecordManager;
+    debugMode: boolean;
 }

package/dist/cjs/rendering/renderers/CanvasRenderer.js

@@ -82,7 +82,10 @@ class CanvasRenderer extends AbstractRenderer_1.default {
         return math_1.Vec2.of(this.ctx.canvas.clientWidth, this.ctx.canvas.clientHeight);
     }
     clear() {
+        this.ctx.save();
+        this.ctx.resetTransform();
         this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+        this.ctx.restore();
     }
     beginPath(startPoint) {
         startPoint = this.canvasToScreen(startPoint);

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    number: '1.8.0',
+    number: '1.9.0',
 };

package/dist/mjs/SVGLoader.d.ts

@@ -18,7 +18,7 @@ export declare enum SVGLoaderLoadMethod {
 export interface SVGLoaderOptions {
     sanitize?: boolean;
     disableUnknownObjectWarnings?: boolean;
-    loadMethod?: 'iframe' | 'domparser';
+    loadMethod?: SVGLoaderLoadMethod;
 }
 export default class SVGLoader implements ImageLoader {
     private source;

package/dist/mjs/SVGLoader.mjs

@@ -6,6 +6,7 @@ import  SVGGlobalAttributesObject  from './components/SVGGlobalAttributesObject.
 import  TextComponent, { TextTransformMode }  from './components/TextComponent.mjs';
 import  UnknownSVGObject  from './components/UnknownSVGObject.mjs';
 import  { pathToRenderable }  from './rendering/RenderablePathSpec.mjs';
+import  { renderedStylesheetId }  from './rendering/renderers/SVGRenderer.mjs';
 // Size of a loaded image if no size is specified.
 export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 // Key to retrieve unrecognised attributes from an AbstractComponent
@@ -475,7 +476,13 @@ export default class SVGLoader {
                 this.updateSVGAttrs(node);
                 break;
             case 'style':
-                await this.addUnknownNode(node);
+                // Keeping unnecessary style sheets can cause the browser to keep all
+                // SVG elements *referenced* by the style sheet in some browsers.
+                //
+                // Only keep the style sheet if it won't be discarded on save.
+                if (node.getAttribute('id') !== renderedStylesheetId) {
+                    await this.addUnknownNode(node);
+                }
                 break;
             default:
                 if (!this.disableUnknownObjectWarnings) {
@@ -518,6 +525,7 @@ export default class SVGLoader {
             this.onDetermineExportRect?.(defaultSVGViewRect);
         }
         this.onFinish?.();
+        this.onFinish = null;
     }
     /**
      * Create an `SVGLoader` from the content of an SVG image. SVGs are loaded within a sandboxed
@@ -529,7 +537,7 @@ export default class SVGLoader {
      * @param options - if `true` or `false`, treated as the `sanitize` option -- don't store unknown attributes.
      */
     static fromString(text, options = false) {
-        const domParserLoad = typeof options !== 'boolean' && options?.loadMethod === 'domparser';
+        const domParserLoad = typeof options !== 'boolean' && options?.loadMethod === SVGLoaderLoadMethod.DOMParser;
         const { svgElem, cleanUp } = (() => {
             // If the user requested an iframe load (the default) try to load with an iframe.
             // There are some cases (e.g. in a sandboxed iframe) where this doesn't work.
@@ -577,6 +585,7 @@ export default class SVGLoader {
                     const cleanUp = () => {
                         svgElem.remove();
                         sandbox.remove();
+                        sandbox.src = '';
                     };
                     return { svgElem, cleanUp };
                 }

package/dist/mjs/image/EditorImage.d.ts

@@ -123,8 +123,28 @@ export default class EditorImage {
      */
     private setExportRectDirectly;
     private onExportViewportChanged;
+    /**
+     * @internal
+     *
+     * Enables debug mode for **all** `EditorImage`s.
+     *
+     * **Only use for debugging**.
+     *
+     * @internal
+     */
+    setDebugMode(newDebugMode: boolean): void;
     private static SetImportExportRectCommand;
 }
+/**
+ * Determines the first index in `sortedLeaves` that needs to be rendered
+ * (based on occlusion -- everything before that index can be skipped and
+ * produce a visually-equivalent image).
+ *
+ * Does nothing if visibleRect is not provided
+ *
+ * @internal
+ */
+export declare const computeFirstIndexToRender: (sortedLeaves: Array<ImageNode>, visibleRect?: Rect2) => number;
 type TooSmallToRenderCheck = (rect: Rect2) => boolean;
 /**
  * Part of the Editor's image. Does not handle fullscreen/invisible components.

package/dist/mjs/image/EditorImage.mjs

@@ -19,7 +19,7 @@ export var EditorImageEventType;
     EditorImageEventType[EditorImageEventType["ExportViewportChanged"] = 0] = "ExportViewportChanged";
     EditorImageEventType[EditorImageEventType["AutoresizeModeChanged"] = 1] = "AutoresizeModeChanged";
 })(EditorImageEventType || (EditorImageEventType = {}));
-const debugMode = false;
+let debugMode = false;
 // Handles lookup/storage of elements in the image
 class EditorImage {
     // @internal
@@ -271,6 +271,18 @@ class EditorImage {
             });
         }
     }
+    /**
+     * @internal
+     *
+     * Enables debug mode for **all** `EditorImage`s.
+     *
+     * **Only use for debugging**.
+     *
+     * @internal
+     */
+    setDebugMode(newDebugMode) {
+        debugMode = newDebugMode;
+    }
 }
 _a = EditorImage;
 // A Command that can access private [EditorImage] functionality
@@ -410,6 +422,30 @@ EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand
     })(),
     _c);
 export default EditorImage;
+/**
+ * Determines the first index in `sortedLeaves` that needs to be rendered
+ * (based on occlusion -- everything before that index can be skipped and
+ * produce a visually-equivalent image).
+ *
+ * Does nothing if visibleRect is not provided
+ *
+ * @internal
+ */
+export const computeFirstIndexToRender = (sortedLeaves, visibleRect) => {
+    let startIndex = 0;
+    if (visibleRect) {
+        for (let i = sortedLeaves.length - 1; i >= 1; i--) {
+            if (
+            // Check for occlusion
+            sortedLeaves[i].getBBox().containsRect(visibleRect)
+                && sortedLeaves[i].getContent()?.occludesEverythingBelowWhenRenderedInRect(visibleRect)) {
+                startIndex = i;
+                break;
+            }
+        }
+    }
+    return startIndex;
+};
 /**
  * Part of the Editor's image. Does not handle fullscreen/invisible components.
  * @internal
@@ -666,15 +702,7 @@ export class ImageNode {
         // If some components hide others (and we're permitted to simplify,
         // which is true in the case of visibleRect being defined), then only
         // draw the non-hidden components:
-        let startIndex = 0;
-        if (visibleRect) {
-            for (let i = leaves.length - 1; i >= 1; i--) {
-                if (leaves[i].getContent()?.occludesEverythingBelowWhenRenderedInRect(visibleRect)) {
-                    startIndex = i;
-                    break;
-                }
-            }
-        }
+        const startIndex = computeFirstIndexToRender(leaves);
         for (let i = startIndex; i < leaves.length; i++) {
             const leaf = leaves[i];
             // Leaves by definition have content

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

@@ -26,6 +26,7 @@ export default class Display {
     private textRenderer;
     private textRerenderOutput;
     private cache;
+    private devicePixelRatio;
     private resizeSurfacesCallback?;
     private flattenCallback?;
     /** @internal */
@@ -46,6 +47,14 @@ export default class Display {
     getColorAt: (_screenPos: Point2) => Color4 | null;
     private initializeCanvasRendering;
     private initializeTextRendering;
+    /**
+     * Sets the device-pixel-ratio.
+     *
+     * Intended for debugging. Users do not need to call this manually.
+     *
+     * @internal
+     */
+    setDevicePixelRatio(dpr: number): Promise<void> | undefined;
     /**
      * Rerenders the text-based display.
      * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.