virtual-tree-canvas 0.2.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-tree-canvas",
-  "version": "0.2.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/core/icon-registry.js

@@ -385,27 +385,38 @@ function drawSituation(ctx, x, y, size, color) {
 function drawDamage(ctx, x, y, size, color) {
   const cx = x + size * 0.5;
   const cy = y + size * 0.52;
-  ctx.strokeStyle = color;
-  ctx.fillStyle = color;
-  ctx.lineWidth = 1.4;
+  const r = size * 0.42;
 
   ctx.beginPath();
   ctx.moveTo(cx, y + 1);
-  ctx.lineTo(x + size * 0.9, y + size * 0.34);
-  ctx.lineTo(x + size * 0.68, y + size * 0.42);
-  ctx.lineTo(x + size - 1, y + size * 0.64);
-  ctx.lineTo(x + size * 0.62, y + size * 0.6);
-  ctx.lineTo(x + size * 0.72, y + size - 1);
-  ctx.lineTo(cx, y + size * 0.72);
-  ctx.lineTo(x + size * 0.28, y + size - 1);
-  ctx.lineTo(x + size * 0.38, y + size * 0.6);
-  ctx.lineTo(x + 1, y + size * 0.64);
-  ctx.lineTo(x + size * 0.32, y + size * 0.42);
-  ctx.lineTo(x + size * 0.1, y + size * 0.34);
+  ctx.lineTo(cx + r * 0.28, cy - r * 0.28);
+  ctx.lineTo(x + size - 1, y + size * 0.2);
+  ctx.lineTo(cx + r * 0.55, cy + r * 0.05);
+  ctx.lineTo(x + size * 0.92, y + size * 0.76);
+  ctx.lineTo(cx + r * 0.22, cy + r * 0.32);
+  ctx.lineTo(cx + r * 0.08, y + size - 1);
+  ctx.lineTo(cx - r * 0.18, cy + r * 0.34);
+  ctx.lineTo(x + size * 0.14, y + size * 0.86);
+  ctx.lineTo(cx - r * 0.42, cy + r * 0.12);
+  ctx.lineTo(x + 1, y + size * 0.38);
+  ctx.lineTo(cx - r * 0.3, cy - r * 0.18);
   ctx.closePath();
-  ctx.stroke();
+  ctx.fillStyle = color;
+  ctx.fill();
 
+  ctx.fillStyle = '#fff7ed';
   ctx.beginPath();
-  ctx.arc(cx, cy, size * 0.12, 0, Math.PI * 2);
+  ctx.arc(cx, cy, size * 0.13, 0, Math.PI * 2);
   ctx.fill();
+
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.1;
+  ctx.beginPath();
+  ctx.moveTo(x + size * 0.08, y + size * 0.08);
+  ctx.lineTo(x + size * 0.2, y + size * 0.2);
+  ctx.moveTo(x + size * 0.84, y + size * 0.88);
+  ctx.lineTo(x + size * 0.94, y + size * 0.98);
+  ctx.moveTo(x + size * 0.9, y + size * 0.06);
+  ctx.lineTo(x + size * 0.82, y + size * 0.18);
+  ctx.stroke();
 }

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

@@ -1,5 +1,9 @@
 import { IconRegistry } from '../core/icon-registry.js';
 
+const DISABLED_ALPHA = 0.72;
+const SCROLL_INDICATOR_HOLD_MS = 1600;
+const SCROLL_INDICATOR_FADE_MS = 700;
+
 export class TreeRowRenderer {
   constructor({ iconRegistry } = {}) {
     this.canvas = null;
@@ -7,6 +11,8 @@ export class TreeRowRenderer {
     this.scene = null;
     this.iconRegistry = iconRegistry ?? new IconRegistry();
     this.renderedRows = 0;
+    this.scrollIndicatorState = null;
+    this.scrollIndicatorVisibleUntil = 0;
   }
 
   /** @param {HTMLCanvasElement} canvas */
@@ -24,30 +30,32 @@ export class TreeRowRenderer {
     // Canvas2D reads the state map directly; patches still stay on the hot path.
   }
 
-  render(scene) {
+  render(scene, time = performance.now()) {
     if (scene?.rows) this.scene = scene;
     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);
     this.#drawHeader(ctx);
     this.#drawRows(ctx);
-    this.#drawScrollIndicator(ctx);
+    this.#drawScrollIndicator(ctx, time);
     ctx.restore();
   }
 
@@ -119,10 +127,12 @@ export class TreeRowRenderer {
     ctx.restore();
   }
 
-  #drawScrollIndicator(ctx) {
-    const { viewport, theme } = this.scene;
+  #drawScrollIndicator(ctx, time) {
+    const { viewport, theme, rows } = this.scene;
     const maxY = Math.max(0, viewport.contentHeight - viewport.rowViewportHeight);
     if (maxY <= 0 || viewport.viewportHeight <= viewport.headerHeight + 12) return;
+    const alpha = this.#scrollIndicatorAlpha(viewport, rows?.length ?? 0, time);
+    if (alpha <= 0) return;
 
     const trackTop = viewport.headerHeight + 4;
     const trackHeight = Math.max(1, viewport.viewportHeight - viewport.headerHeight - 8);
@@ -133,14 +143,14 @@ export class TreeRowRenderer {
     ctx.save();
     ctx.lineCap = 'round';
     ctx.lineWidth = 2;
-    ctx.globalAlpha = 0.28;
+    ctx.globalAlpha = 0.28 * alpha;
     ctx.strokeStyle = theme.colors.guide;
     ctx.beginPath();
     ctx.moveTo(x, trackTop);
     ctx.lineTo(x, trackTop + trackHeight);
     ctx.stroke();
 
-    ctx.globalAlpha = 0.9;
+    ctx.globalAlpha = 0.9 * alpha;
     ctx.strokeStyle = theme.colors.focus;
     ctx.beginPath();
     ctx.moveTo(x, thumbY);
@@ -149,6 +159,24 @@ export class TreeRowRenderer {
     ctx.restore();
   }
 
+  #scrollIndicatorAlpha(viewport, rowCount, time) {
+    const nextState = {
+      scrollY: viewport.scrollY,
+      contentHeight: viewport.contentHeight,
+      rowViewportHeight: viewport.rowViewportHeight,
+      viewportHeight: viewport.viewportHeight,
+      rowCount,
+    };
+    if (!sameScrollIndicatorState(this.scrollIndicatorState, nextState)) {
+      this.scrollIndicatorState = nextState;
+      this.scrollIndicatorVisibleUntil = time + SCROLL_INDICATOR_HOLD_MS;
+      return 1;
+    }
+    if (time <= this.scrollIndicatorVisibleUntil) return 1;
+    const fade = 1 - ((time - this.scrollIndicatorVisibleUntil) / SCROLL_INDICATOR_FADE_MS);
+    return clamp01(fade);
+  }
+
   #drawRow(ctx, row) {
     const { columns, nodes, dynamicState, selection, hoverNodeId, focusNodeId, searchMatches, theme, viewport } = this.scene;
     const node = nodes[row.nodeIndex];
@@ -226,8 +254,16 @@ export class TreeRowRenderer {
     ctx.font = theme.font;
     ctx.textBaseline = 'middle';
     ctx.textAlign = 'left';
-    ctx.globalAlpha = data.disabled ? 0.45 : 1;
+    ctx.globalAlpha = data.disabled ? DISABLED_ALPHA : 1;
     ctx.fillStyle = data.valueType === 'object' || data.valueType === 'array' ? colors.text : colors.textMuted;
+
+    if (data.valueType === 'object') {
+      drawTruncatedText(ctx, node.label ?? node.id, labelX, cy, Math.max(20, rect.x + rect.width - labelX - 8));
+      if (data.meta?.updated) this.#drawUpdatedMarker(ctx, row, theme);
+      ctx.globalAlpha = 1;
+      return;
+    }
+
     const layout = inspectorPaneLayout(rect.width, row.depth, theme.indentWidth, data.editorType, this.scene.inspectorPaneLabelEnd);
     drawTruncatedText(ctx, node.label ?? node.id, labelX, cy, Math.max(20, rect.x + layout.editorLeft - labelX - 8));
 
@@ -238,8 +274,6 @@ export class TreeRowRenderer {
       drawTruncatedText(ctx, data.valueText, editorX, cy, Math.max(20, editorWidth - 58));
       this.#drawSmallButton(ctx, rect.x + rect.width - 54, rect.y + 5, 22, rect.height - 10, '+', theme);
       this.#drawSmallButton(ctx, rect.x + rect.width - 28, rect.y + 5, 22, rect.height - 10, '-', theme);
-    } else if (data.valueType === 'object') {
-      // Pane mode uses object rows as folders; the label is enough.
     } else {
       this.#drawInspectorValueCell(ctx, {
         node,
@@ -264,7 +298,7 @@ export class TreeRowRenderer {
     ctx.font = theme.font;
     ctx.textBaseline = 'middle';
     ctx.textAlign = 'left';
-    ctx.globalAlpha = disabled ? 0.45 : 1;
+    ctx.globalAlpha = disabled ? DISABLED_ALPHA : 1;
 
     if (data.editorType === 'checkbox') {
       this.#drawCheckbox(ctx, x, rect.y + rect.height / 2 - 7, Boolean(data.value), theme);
@@ -475,6 +509,15 @@ function resolveNodeStyle(theme, node, state = {}) {
   };
 }
 
+function sameScrollIndicatorState(a, b) {
+  return Boolean(a) &&
+    a.scrollY === b.scrollY &&
+    a.contentHeight === b.contentHeight &&
+    a.rowViewportHeight === b.rowViewportHeight &&
+    a.viewportHeight === b.viewportHeight &&
+    a.rowCount === b.rowCount;
+}
+
 function inspectorPaneLayout(width, depth = 0, indentWidth = 18, editorType = '', labelEnd = 0) {
   const safeWidth = Math.max(1, width);
   const rightPadding = 14;

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;
   }
 
@@ -76,6 +77,9 @@ export class TreeViewController {
 
   setData(nodes) {
     this.inspector = null;
+    if (this.columnModel.columns.length === 1 && this.columnModel.columns[0]?.kind === 'inspectorPane') {
+      this.columnModel.setColumns([]);
+    }
     this.model.setTree(nodes);
     this.expansion.expandToDepth(this.initialExpandDepth);
     this.searchIndex.rebuild(this.model);
@@ -561,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;
@@ -626,6 +629,11 @@ export class TreeViewController {
     if (column.kind === 'inspectorPane') {
       const localX = x - column.x;
       const node = this.model.nodes[row.nodeIndex];
+      if (node?.data?.valueType === 'object') {
+        const treeX = row.depth * this.rowModel.indentWidth;
+        part = localX >= treeX + 4 && localX <= treeX + 22 ? 'chevron' : 'label';
+        return { area: 'row', part, row, column, x, y: rowY };
+      }
       if (node?.data?.valueType === 'array') {
         if (localX >= column.width - 54 && localX <= column.width - 32) part = 'arrayAdd';
         else if (localX >= column.width - 28 && localX <= column.width - 6) part = 'arrayRemove';
@@ -718,7 +726,7 @@ export class TreeViewController {
       if (hit.part === 'label' || hit.part === 'chevron') {
         const labelX = hit.row.depth * this.rowModel.indentWidth + (hit.row.hasChildren ? 28 : 24);
         text = node.label ?? node.id;
-        width = Math.max(0, layout.editorLeft - labelX - 8);
+        width = data.valueType === 'object' ? Math.max(0, visibleWidth - labelX - 8) : Math.max(0, layout.editorLeft - labelX - 8);
       } else if (hit.part === 'arrayAdd' || hit.part === 'arrayRemove') {
         return null;
       } else {
@@ -795,6 +803,7 @@ export class TreeViewController {
   }
 
   #syncContentSize() {
+    if (this.viewport.viewportWidth > 1) this.#fitInspectorPaneColumn(this.viewport.viewportWidth);
     this.viewport.setContentSize(this.columnModel.contentWidth, this.rowModel.contentHeight);
   }
 
@@ -821,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) {
@@ -841,6 +851,7 @@ export class TreeViewController {
       if (!row) continue;
       const node = this.model.nodes[row.nodeIndex];
       if (!node) continue;
+      if (node.data?.valueType === 'object') continue;
       const indentX = row.depth * this.rowModel.indentWidth;
       const labelX = indentX + (row.hasChildren ? 28 : 24);
       const labelWidth = String(node.label ?? node.id ?? '').length * 6.4;
@@ -891,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) {