virtual-tree-canvas 0.4.0 → 0.6.0

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,7 +10,8 @@ export class TreeRowRenderer {
     this.scene = null;
     this.iconRegistry = iconRegistry ?? new IconRegistry();
     this.renderedRows = 0;
-    this.iconRenderQueued = false;
+    this.iconRenderFrame = null;
+    this.invalidate = null;
     this.preparedIconThemeKey = null;
     this.stopIconListener = this.iconRegistry.onChange?.(() => this.#scheduleIconRender()) ?? null;
   }
@@ -25,7 +27,15 @@ export class TreeRowRenderer {
     this.scene = scene;
   }
 
+  setInvalidationHandler(invalidate) { this.invalidate = invalidate; }
+
   destroy() {
+    if (this.iconRenderFrame !== null) {
+      const view = this.canvas?.ownerDocument?.defaultView ?? globalThis;
+      (view.cancelAnimationFrame?.bind(view) ?? clearTimeout)(this.iconRenderFrame);
+    }
+    this.iconRenderFrame = null;
+    this.invalidate = null;
     this.stopIconListener?.();
     this.stopIconListener = null;
     this.canvas = null;
@@ -64,15 +74,18 @@ export class TreeRowRenderer {
     this.#drawHeader(ctx);
     this.#drawRows(ctx);
     this.#drawStickyRows(ctx);
+    this.#drawRowDrop(ctx);
     ctx.restore();
   }
 
   #scheduleIconRender() {
-    if (this.iconRenderQueued) return;
-    this.iconRenderQueued = true;
-    const schedule = globalThis.requestAnimationFrame ?? ((callback) => setTimeout(callback, 0));
-    schedule(() => {
-      this.iconRenderQueued = false;
+    if (!this.canvas) return;
+    if (this.invalidate) return this.invalidate();
+    if (this.iconRenderFrame !== null) return;
+    const view = this.canvas.ownerDocument?.defaultView ?? globalThis;
+    const schedule = view.requestAnimationFrame?.bind(view) ?? (callback => setTimeout(callback, 0));
+    this.iconRenderFrame = schedule(() => {
+      this.iconRenderFrame = null;
       this.render();
     });
   }
@@ -106,7 +119,7 @@ export class TreeRowRenderer {
     ctx.textBaseline = 'middle';
 
     for (const column of columns) {
-      if (headerFilter && column.kind === 'inspectorPane') {
+      if (headerFilter && column === columns.find(item => item.kind !== 'rowOrder')) {
         this.#drawHeaderFilter(ctx, column, viewport, theme, filterQuery);
       } else {
         ctx.fillStyle = colors.textMuted;
@@ -144,7 +157,7 @@ export class TreeRowRenderer {
     ctx.strokeStyle = colors.border;
     ctx.stroke();
     ctx.fillStyle = filterQuery ? colors.text : colors.textMuted;
-    drawTruncatedText(ctx, filterQuery || 'Filter inspector', x + 8, viewport.headerHeight / 2, width - 16);
+    drawTruncatedText(ctx, filterQuery || 'Filter rows', x + 8, viewport.headerHeight / 2, width - 16);
   }
 
   #drawSortIndicator(ctx, x, y, direction, theme) {
@@ -267,7 +280,8 @@ export class TreeRowRenderer {
       cell.column.render(ctx, cell);
       return;
     }
-    if (cell.column.kind === 'tree') this.#drawTreeCell(ctx, cell);
+    if (cell.column.kind === 'rowOrder') this.#drawRowOrder(ctx, cell);
+    else if (cell.column.kind === 'tree') this.#drawTreeCell(ctx, cell);
     else if (cell.column.kind === 'inspectorPane') this.#drawInspectorPaneCell(ctx, cell);
     else if (cell.column.kind === 'inspectorValue') this.#drawInspectorValueCell(ctx, cell);
     else if (cell.column.kind === 'inspectorType') this.#drawInspectorTypeCell(ctx, cell);
@@ -277,6 +291,42 @@ export class TreeRowRenderer {
     else this.#drawTextCell(ctx, cell);
   }
 
+  #drawRowOrder(ctx, { node, row, rect, theme }) {
+    const siblings = this.scene.childrenByParent?.get(node.parentId ?? null) ?? [];
+    const enabled = this.scene.canReorderRows && siblings.length > 1;
+    const cy = rect.y + row.height / 2;
+    ctx.save();
+    ctx.strokeStyle = theme.colors.textMuted;
+    ctx.fillStyle = theme.colors.textMuted;
+    ctx.lineWidth = 1.5;
+    ctx.globalAlpha = enabled ? 1 : 0.3;
+    for (const dx of [10, 14]) for (const dy of [-4, 0, 4]) ctx.fillRect(rect.x + dx, cy + dy, 1.5, 1.5);
+    for (const [center, direction, available] of [[36, -1, siblings[0] !== node.id], [60, 1, siblings.at(-1) !== node.id]]) {
+      ctx.globalAlpha = enabled && available ? 1 : 0.3;
+      ctx.beginPath();
+      ctx.moveTo(rect.x + center - 4, cy - direction * 2);
+      ctx.lineTo(rect.x + center, cy + direction * 2);
+      ctx.lineTo(rect.x + center + 4, cy - direction * 2);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  #drawRowDrop(ctx) {
+    const { rowDrop, viewport, theme } = this.scene;
+    if (!rowDrop) return;
+    const y = viewport.headerHeight + rowDrop.y - viewport.scrollY;
+    if (y < viewport.headerHeight || y > viewport.headerHeight + viewport.rowViewportHeight) return;
+    ctx.save();
+    ctx.strokeStyle = theme.colors.focus;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(3, y);
+    ctx.lineTo(viewport.contentViewportWidth - 3, y);
+    ctx.stroke();
+    ctx.restore();
+  }
+
   #drawInspectorPaneCell(ctx, { node, row, rect, theme, style, hovered, hoverPart, activePart }) {
     const visibleRight = this.scene.viewport.scrollX + (this.scene.viewport.contentViewportWidth ?? this.scene.viewport.viewportWidth);
     rect = { ...rect, width: Math.max(1, Math.min(rect.x + rect.width, visibleRight) - rect.x) };
@@ -344,13 +394,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 +444,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 +499,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),