virtual-tree-canvas 0.3.9 → 0.5.0

package/src/core/theme-manager.js

@@ -2,6 +2,7 @@ export const darkTheme = {
   rowHeight: 28,
   indentWidth: 18,
   font: '12px Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
+  unitFont: '11px ui-monospace, SFMono-Regular, Consolas, monospace',
   monoFont: '12px "JetBrains Mono", "Cascadia Mono", "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace',
   colors: {
     background: '#0a0f1c',

package/src/core/tree-worker-client.js

@@ -6,6 +6,8 @@ export class TreeWorkerClient {
     this.pending = new Map();
     this.ready = Promise.resolve();
     this.worker.addEventListener('message', this.#onMessage);
+    this.worker.addEventListener('error', this.#onError);
+    this.worker.addEventListener('messageerror', this.#onMessageError);
   }
 
   setData(nodes) {
@@ -27,6 +29,8 @@ export class TreeWorkerClient {
     for (const { reject } of this.pending.values()) reject(new Error('Tree worker destroyed'));
     this.pending.clear();
     this.worker.removeEventListener('message', this.#onMessage);
+    this.worker.removeEventListener('error', this.#onError);
+    this.worker.removeEventListener('messageerror', this.#onMessageError);
     this.worker.terminate();
   }
 
@@ -47,4 +51,17 @@ export class TreeWorkerClient {
     if (ok) pending.resolve(result);
     else pending.reject(new Error(error || 'Tree worker request failed'));
   };
+
+  #onError = (event) => {
+    this.#rejectPending(new Error(event.message || 'Tree worker failed'));
+  };
+
+  #onMessageError = () => {
+    this.#rejectPending(new Error('Tree worker returned an unreadable message'));
+  };
+
+  #rejectPending(error) {
+    for (const { reject } of this.pending.values()) reject(error);
+    this.pending.clear();
+  }
 }

package/src/index.d.ts

@@ -1,5 +1,17 @@
 export type TreeViewAlign = 'start' | 'center' | 'end' | 'nearest';
 
+export type IconDrawFunction = (ctx: CanvasRenderingContext2D, x: number, y: number, size: number, color: string) => void;
+export type IconSource = string | CanvasImageSource | IconDrawFunction;
+
+export class IconRegistry {
+  constructor(options?: { pixelRatio?: number });
+  register(name: string, icon: IconSource): any;
+  get(name: string): any;
+  onChange(listener: () => void): () => void;
+  prepare(options?: { icons?: Iterable<string>; size?: number; color?: string; pixelRatio?: number }): Promise<any[]>;
+  draw(ctx: CanvasRenderingContext2D, name: string, x: number, y: number, size: number, color: string): void;
+}
+
 export type TreeNode = {
   id: string;
   parentId?: string | null;
@@ -21,6 +33,10 @@ export type MetaRule = {
   max?: number;
   step?: number;
   integer?: boolean;
+  /** Display-only suffix for numeric values. Never appended to the model value. */
+  unit?: string;
+  /** Display decimal places (0–20). Editing retains the original precision. */
+  precision?: number;
   readonly?: boolean;
   disabled?: boolean;
   updated?: boolean;
@@ -86,6 +102,7 @@ export class TreeViewController {
   setDynamicState(patches: DynamicPatch[]): void;
   setTheme(theme: any): void;
   setLayoutMetrics(options?: { rowHeight?: number; indentWidth?: number; headerHeight?: number }): void;
+  registerIcon(name: string, icon: IconSource): any;
   resize(width: number, height: number): void;
   render(time?: number): void;
   renderMeasured(time?: number): any;

package/src/inspector/cell-editor-manager.js

@@ -1,3 +1,5 @@
+import { numericLayout } from './numeric-layout.js';
+
 export class CellEditorManager {
   constructor({ controller, host = null }) {
     if (!controller) throw new TypeError('CellEditorManager requires a TreeViewController');
@@ -81,6 +83,7 @@ export class CellEditorManager {
     const hostRect = this.host.getBoundingClientRect();
     const element = createEditorElement(data);
     element.className = `vtc-editor vtc-editor-${data.editorType}`;
+    element.setAttribute('aria-label', [node.label, numericLayout(rect.width, data).unit].filter(Boolean).join(' '));
     Object.assign(element.style, {
       position: 'absolute',
       left: `${rect.x - hostRect.left}px`,
@@ -208,34 +211,36 @@ export class CellEditorManager {
   }
 
   #isEditableHit(hit) {
-    return hit?.area === 'row' && (hit.column?.kind === 'inspectorValue' || hit.column?.kind === 'inspectorPane');
+    return hit?.area === 'row' && hit.part !== 'unit' && (hit.column?.kind === 'inspectorValue' || hit.column?.kind === 'inspectorPane');
   }
 
-  #overlayRect(hit) {
-    if (hit.column?.kind !== 'inspectorPane') return this.controller.getCellClientRect(hit);
+  #editorContentRect(hit) {
     const rect = this.controller.getCellClientRect(hit);
+    if (hit.column?.kind !== 'inspectorPane') {
+      return { x: rect.x + 10, y: rect.y + 4, width: Math.max(24, rect.width - 20), height: rect.height - 8 };
+    }
     const visibleWidth = Math.max(1, Math.min(rect.width, this.controller.viewport.contentViewportWidth));
     const data = this.controller.model.nodes[hit.row.nodeIndex]?.data ?? {};
     const { editorLeft, editorWidth } = this.controller.getInspectorPaneLayout(visibleWidth, hit.row, data.editorType);
-    if (hit.part === 'number') {
-      const valueWidth = Math.min(64, Math.max(42, (editorWidth - 20) * 0.28));
-      return { x: rect.x + editorLeft + editorWidth - valueWidth - 10, y: rect.y + 4, width: valueWidth, height: rect.height - 8 };
+    return { x: rect.x + editorLeft + 10, y: rect.y + 4, width: Math.max(24, editorWidth - 20), height: rect.height - 8 };
+  }
+
+  #overlayRect(hit) {
+    const data = this.controller.model.nodes[hit.row.nodeIndex]?.data ?? {};
+    const rect = this.#editorContentRect(hit);
+    const layout = numericLayout(rect.width, data);
+    if (hit.part === 'number' && data.editorType === 'range') {
+      return { ...rect, x: rect.x + layout.numberLeft, width: layout.valueWidth };
     }
-    return { x: rect.x + editorLeft + 10, y: rect.y + 4, width: editorWidth - 20, height: rect.height - 8 };
+    if (layout.unit) return { ...rect, width: layout.contentWidth };
+    if (hit.column?.kind !== 'inspectorPane') return this.controller.getCellClientRect(hit);
+    return rect;
   }
 
   #rangeBarRect(hit) {
-    const rect = this.controller.getCellClientRect(hit);
-    if (hit.column?.kind === 'inspectorPane') {
-      const visibleWidth = Math.max(1, Math.min(rect.width, this.controller.viewport.contentViewportWidth));
-      const data = this.controller.model.nodes[hit.row.nodeIndex]?.data ?? {};
-      const { editorLeft, editorWidth } = this.controller.getInspectorPaneLayout(visibleWidth, hit.row, data.editorType);
-      const valueWidth = Math.min(64, Math.max(42, (editorWidth - 20) * 0.28));
-      const barWidth = Math.max(24, editorWidth - 20 - valueWidth - 8);
-      return { x: rect.x + editorLeft + 10, y: rect.y + rect.height / 2 - 4, width: barWidth, height: 8 };
-    }
-    const valueWidth = Math.min(64, Math.max(42, (rect.width - 20) * 0.28));
-    return { x: rect.x + 10, y: rect.y + rect.height / 2 - 4, width: Math.max(24, rect.width - 20 - valueWidth - 8), height: 8 };
+    const data = this.controller.model.nodes[hit.row.nodeIndex]?.data ?? {};
+    const rect = this.#editorContentRect(hit);
+    return { ...rect, y: rect.y + rect.height / 2 - 4, width: numericLayout(rect.width, data).barWidth, height: 8 };
   }
 
   #clampRectToHost(rect, inset = 0) {

package/src/inspector/editor-resolver.js

@@ -28,6 +28,11 @@ export function formatInspectorValue(value, meta = {}) {
   if (value === null) return 'null';
   if (value === undefined) return 'undefined';
   if (typeof value === 'object') return Array.isArray(value) ? `Array(${value.length})` : 'Object';
-  if (typeof value === 'number') return Number.isInteger(value) ? String(value) : String(Math.round(value * 1000) / 1000);
+  if (typeof value === 'number') {
+    if (Number.isFinite(value) && Number.isInteger(meta.precision) && meta.precision >= 0 && meta.precision <= 20) {
+      return value.toFixed(meta.precision);
+    }
+    return Number.isInteger(value) ? String(value) : String(Math.round(value * 1000) / 1000);
+  }
   return String(value);
 }

package/src/inspector/numeric-layout.js

@@ -0,0 +1,16 @@
+/** Shared geometry for canvas drawing, hit testing and the numeric editor. */
+export function numericLayout(width, data = {}) {
+  width = Math.max(0, width);
+  const numeric = typeof data.value === 'number' && !data.meta?.options && !data.meta?.button;
+  const unit = numeric && typeof data.meta?.unit === 'string' ? data.meta.unit.trim() : '';
+  // Reserve a stable slot: changes to the number must not move the unit.
+  const gap = unit ? 6 : 0;
+  const unitWidth = unit ? Math.min(Math.max(24, [...unit].length * 7), 96, Math.max(0, width - 48)) : 0;
+  const contentWidth = Math.max(0, width - unitWidth - gap);
+  const valueWidth = Math.min(64, Math.max(42, contentWidth * 0.28), Math.max(0, contentWidth - 32));
+  return {
+    unit, unitWidth, unitLeft: contentWidth + gap, contentWidth,
+    valueWidth, numberLeft: contentWidth - valueWidth,
+    barWidth: Math.max(0, contentWidth - valueWidth - 8),
+  };
+}

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

@@ -1,3 +1,4 @@
+import { numericLayout } from '../inspector/numeric-layout.js';
 import { IconRegistry } from '../core/icon-registry.js';
 
 const DISABLED_ALPHA = 0.72;
@@ -9,6 +10,9 @@ export class TreeRowRenderer {
     this.scene = null;
     this.iconRegistry = iconRegistry ?? new IconRegistry();
     this.renderedRows = 0;
+    this.iconRenderQueued = false;
+    this.preparedIconThemeKey = null;
+    this.stopIconListener = this.iconRegistry.onChange?.(() => this.#scheduleIconRender()) ?? null;
   }
 
   /** @param {HTMLCanvasElement} canvas */
@@ -22,6 +26,14 @@ export class TreeRowRenderer {
     this.scene = scene;
   }
 
+  destroy() {
+    this.stopIconListener?.();
+    this.stopIconListener = null;
+    this.canvas = null;
+    this.ctx = null;
+    this.scene = null;
+  }
+
   updateDynamicState(_patches) {
     // Canvas2D reads the state map directly; patches still stay on the hot path.
   }
@@ -43,6 +55,7 @@ export class TreeRowRenderer {
 
     const ctx = this.ctx;
     const colors = theme.colors;
+    this.#prepareThemeIcons(theme, dpr);
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.fillStyle = colors.background;
     ctx.fillRect(0, 0, viewportWidth, viewportHeight);
@@ -55,6 +68,29 @@ export class TreeRowRenderer {
     ctx.restore();
   }
 
+  #scheduleIconRender() {
+    if (this.iconRenderQueued) return;
+    this.iconRenderQueued = true;
+    const schedule = globalThis.requestAnimationFrame ?? ((callback) => setTimeout(callback, 0));
+    schedule(() => {
+      this.iconRenderQueued = false;
+      this.render();
+    });
+  }
+
+  #prepareThemeIcons(theme, pixelRatio) {
+    const iconColors = new Map([['placeholder', theme.colors.textMuted]]);
+    for (const style of Object.values(theme.types ?? {})) {
+      if (style?.icon) iconColors.set(style.icon, style.color ?? theme.colors.progressFill);
+    }
+    const key = `${pixelRatio}|${[...iconColors].map(([icon, color]) => `${icon}:${color}`).join(',')}`;
+    if (key === this.preparedIconThemeKey) return;
+    this.preparedIconThemeKey = key;
+    for (const [icon, color] of iconColors) {
+      this.iconRegistry.prepare?.({ icons: [icon], size: 15, color, pixelRatio });
+    }
+  }
+
   #drawHeader(ctx) {
     const { viewport, columns, theme, sort, headerFilter, filterQuery } = this.scene;
     if (viewport.headerHeight <= 0) return;
@@ -309,13 +345,22 @@ export class TreeRowRenderer {
     const readonly = data.readonly;
     const x = rect.x + 10;
     const y = rect.y + 5;
-    const width = Math.max(24, rect.width - 20);
+    const fullWidth = Math.max(24, rect.width - 20);
+    const numeric = numericLayout(fullWidth, data);
+    const width = numeric.contentWidth;
     const height = rect.height - 10;
     ctx.font = theme.font;
     ctx.textBaseline = 'middle';
     ctx.textAlign = 'left';
     ctx.globalAlpha = disabled ? DISABLED_ALPHA : 1;
 
+    if (numeric.unit && numeric.unitWidth) {
+      ctx.font = theme.unitFont ?? theme.monoFont ?? theme.font;
+      ctx.fillStyle = theme.colors.unit ?? theme.colors.textMuted;
+      drawTruncatedText(ctx, numeric.unit, x + numeric.unitLeft, rect.y + rect.height / 2, numeric.unitWidth);
+      ctx.font = theme.font;
+    }
+
     if (data.editorType === 'checkbox') {
       this.#drawCheckbox(ctx, x, rect.y + rect.height / 2 - 8, Boolean(data.value), theme);
     } else if (data.editorType === 'range') {
@@ -350,7 +395,15 @@ export class TreeRowRenderer {
       this.#drawMutedText(ctx, data.valueText, x + 8, rect.y + rect.height / 2, selectWidth - 30, theme);
       this.#drawSelectChevron(ctx, x + selectWidth - 18, rect.y + rect.height / 2, theme, disabled);
     } else {
-      this.#drawMutedText(ctx, data.valueText, x, rect.y + rect.height / 2, width, theme, readonly);
+      if (numeric.unit) {
+        ctx.font = theme.monoFont ?? theme.font;
+        ctx.fillStyle = readonly ? theme.colors.textMuted : theme.colors.text;
+        ctx.textAlign = 'right';
+        drawTruncatedText(ctx, data.valueText, x + width, rect.y + rect.height / 2, width);
+        ctx.textAlign = 'left';
+      } else {
+        this.#drawMutedText(ctx, data.valueText, x, rect.y + rect.height / 2, width, theme, readonly);
+      }
     }
 
     if (meta.updated && !suppressUpdatedMarker) {
@@ -397,9 +450,8 @@ export class TreeRowRenderer {
     const max = meta.max ?? 100;
     const value = typeof data.value === 'number' ? data.value : min;
     const ratio = max === min ? 0 : clamp01((value - min) / (max - min));
-    const valueWidth = Math.min(64, Math.max(42, width * 0.28));
+    const { valueWidth, barWidth } = numericLayout(width);
     const gap = 8;
-    const barWidth = Math.max(24, width - valueWidth - gap);
     this.#drawMeterBar(ctx, x, y + 0.5, barWidth, 7, ratio, theme.colors.progressFill, theme);
     this.#drawControlSurface(ctx, x + barWidth + gap, y - 6, valueWidth, 20, theme, {
       hovered: Boolean(state.hoveredNumber),

package/src/tree-view-controller.js

@@ -12,6 +12,7 @@ import {
   TreeViewViewport,
   VisibleRowModel,
 } from './core/index.js';
+import { numericLayout } from './inspector/numeric-layout.js';
 import { CellEditorManager } from './inspector/cell-editor-manager.js';
 import { formatInspectorValue, getAtPath, inspectorColumns, inspectorPaneColumns, ModelInspectorBuilder, setAtPath } from './inspector/index.js';
 import { TreeViewInputController } from './input/tree-view-input-controller.js';
@@ -113,6 +114,7 @@ export class TreeViewController {
     this.#nativeScroll = null;
     this.inputController = null;
     this.cellEditor = null;
+    this.renderer?.destroy?.();
     this.canvas = null;
   }
 
@@ -212,8 +214,14 @@ export class TreeViewController {
 
   enableWorkers(workerUrl) {
     if (this.workerClient) return Promise.resolve(this);
-    this.workerClient = new TreeWorkerClient(workerUrl);
-    return this.workerClient.setData(this.model.nodes).then(() => this);
+    const client = new TreeWorkerClient(workerUrl);
+    this.workerClient = client;
+    return client.setData(this.model.nodes)
+      .then(() => this)
+      .catch((error) => {
+        if (this.workerClient === client) this.disableWorkers();
+        throw error;
+      });
   }
 
   disableWorkers() {
@@ -782,11 +790,11 @@ export class TreeViewController {
     const node = this.model.nodes[row.nodeIndex];
     const data = node?.data;
     if (!data?.inspector) return 'cell';
+    const numeric = numericLayout(Math.max(24, editorWidth - 20), data);
+    if (numeric.unit && localEditorX >= 10 + numeric.unitLeft) return 'unit';
     if (data.editorType === 'checkbox') return 'checkbox';
     if (data.editorType === 'range') {
-      const width = Math.max(24, editorWidth - 20);
-      const valueWidth = Math.min(64, Math.max(42, width * 0.28));
-      const numberLeft = editorWidth - valueWidth - 10;
+      const numberLeft = 10 + numeric.numberLeft;
       return localEditorX >= numberLeft ? 'number' : 'range';
     }
     if (data.editorType === 'button') return 'button';