virtual-tree-canvas 0.4.0 → 0.5.0

package/README.md

@@ -197,7 +197,7 @@ tree.setModel(
   {
     'sensor.range': { min: 0, max: 120, step: 1, integer: true },
     'sensor.mode': { options: { Search: 'search', Track: 'track' } },
-    'tracks.*.speed': { min: 0, max: 900, step: 5 },
+    'tracks.*.speed': { min: 0, max: 900, step: 5, unit: 'm/s', precision: 2 },
     'tracks.*.id': { readonly: true },
   },
   { presentation: 'pane', flatRoot: true },
@@ -209,6 +209,15 @@ Choose `presentation: 'pane'` for a compact folder-and-controls view, or
 Editors are inferred from data and metadata: checkbox, range, number, text,
 select, colour, button, object and array.
 
+Numeric metadata supports `unit` (a display-only string suffix) and `precision`
+(decimal places, 0–20). The unit has a reserved slot beside the number in both
+pane and table presentations, including range sliders. It stays visible while
+editing; the editor receives the full original numeric value and emits a number.
+Precision changes display only, not stored values, limits or step size. Omit both
+options to keep the existing formatting. Invalid precision values are ignored.
+Customize the suffix with `theme.unitFont` and `theme.colors.unit` (defaults to
+`textMuted`). Long units are truncated to fit the available cell width.
+
 Listen for user edits and actions with `valuechange`, `modelchange` and
 `action` events.
 

package/package.json

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

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/index.d.ts

@@ -33,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;

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;
@@ -344,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') {
@@ -385,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) {
@@ -432,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';
@@ -789,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';