virtual-tree-canvas 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-tree-canvas",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "High-performance Canvas2D virtual tree/table widget for very large hierarchical datasets.",
   "type": "module",
   "main": "./src/index.js",

package/src/renderers/canvas2d-renderer.js

@@ -28,19 +28,21 @@ export class Canvas2DRenderer {
     if (!this.canvas || !this.ctx || !this.scene) return;
     const { viewport } = frameState;
     const dpr = Math.max(1, window.devicePixelRatio || 1);
-    const width = Math.floor(this.canvas.clientWidth * dpr);
-    const height = Math.floor(this.canvas.clientHeight * dpr);
+    const viewportWidth = Math.max(0, viewport.viewportWidth);
+    const viewportHeight = Math.max(0, viewport.viewportHeight);
+    if (viewportWidth <= 0 || viewportHeight <= 0) return;
+    const width = Math.floor(viewportWidth * dpr);
+    const height = Math.floor(viewportHeight * dpr);
     if (this.canvas.width !== width || this.canvas.height !== height) {
       this.canvas.width = width;
       this.canvas.height = height;
-      viewport.resize(this.canvas.clientWidth, this.canvas.clientHeight);
     }
 
     const ctx = this.ctx;
     const theme = this.themeManager?.get() ?? {};
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.fillStyle = theme.background ?? '#101419';
-    ctx.fillRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
+    ctx.fillRect(0, 0, viewportWidth, viewportHeight);
 
     this.visibleNodeIndices = cullLayoutNodes(this.scene.layout.nodes, viewport.getWorldBounds());
     const visibleSet = new Set(this.visibleNodeIndices);

package/src/renderers/tree-row-renderer.js

@@ -35,19 +35,21 @@ export class TreeRowRenderer {
     if (!this.canvas || !this.ctx || !this.scene) return;
     const { viewport, theme } = this.scene;
     const dpr = Math.max(1, window.devicePixelRatio || 1);
-    const width = Math.floor(this.canvas.clientWidth * dpr);
-    const height = Math.floor(this.canvas.clientHeight * dpr);
+    const viewportWidth = Math.max(0, viewport.viewportWidth);
+    const viewportHeight = Math.max(0, viewport.viewportHeight);
+    if (viewportWidth <= 0 || viewportHeight <= 0) return;
+    const width = Math.floor(viewportWidth * dpr);
+    const height = Math.floor(viewportHeight * dpr);
     if (this.canvas.width !== width || this.canvas.height !== height) {
       this.canvas.width = width;
       this.canvas.height = height;
-      viewport.resize(this.canvas.clientWidth, this.canvas.clientHeight);
     }
 
     const ctx = this.ctx;
     const colors = theme.colors;
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.fillStyle = colors.background;
-    ctx.fillRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
+    ctx.fillRect(0, 0, viewportWidth, viewportHeight);
 
     ctx.save();
     ctx.translate(viewport.renderInsetX ?? 0, viewport.renderInsetY ?? 0);

package/src/tree-view-controller.js

@@ -63,6 +63,7 @@ export class TreeViewController {
     this.canvas = canvas;
     this.renderer.initialize(canvas);
     this.renderer.setScene(this.scene);
+    this.#observeCanvasSize();
     return this;
   }
 
@@ -564,7 +565,6 @@ export class TreeViewController {
   }
 
   renderMeasured(time = performance.now()) {
-    this.#syncViewportFromCanvas();
     const sceneStart = performance.now();
     this.scene = this.createRenderScene();
     const sceneMs = performance.now() - sceneStart;
@@ -830,15 +830,16 @@ export class TreeViewController {
     return Math.max(0, Math.floor(this.viewport.scrollY / this.rowModel.rowHeight));
   }
 
-  #syncViewportFromCanvas() {
-    if (!this.canvas) return;
-    const width = this.canvas.clientWidth;
-    const height = this.canvas.clientHeight;
-    if (width > 0 && height > 0 && (this.viewport.viewportWidth !== width || this.viewport.viewportHeight !== height)) {
-      this.viewport.resize(width, height);
-      this.#fitInspectorPaneColumn(width);
-      this.#syncContentSize();
-    }
+  #observeCanvasSize() {
+    if (!this.canvas || typeof ResizeObserver === 'undefined') return;
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      const width = Math.floor(entry?.contentRect?.width ?? 0);
+      const height = Math.floor(entry?.contentRect?.height ?? 0);
+      if (width > 0 && height > 0) this.resize(width, height);
+    });
+    this.#resizeObserver.observe(this.canvas);
   }
 
   #computeInspectorPaneLabelEnd(visibleRange) {
@@ -901,6 +902,8 @@ export class TreeViewController {
     this.#rebuildRows();
     if (focusId) this.focusedId = focusId;
   }
+
+  #resizeObserver = null;
 }
 
 function inspectorPaneLayout(width, depth = 0, indentWidth = 18, editorType = '', labelEnd = 0) {