virtual-tree-canvas 0.1.0

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

@@ -0,0 +1,256 @@
+export class CellEditorManager {
+  constructor({ controller, canvas, host = null }) {
+    this.controller = controller;
+    this.canvas = canvas;
+    this.host = host ?? canvas.parentElement ?? document.body;
+    this.overlay = null;
+    this.rangeDrag = null;
+    this.onMouseMove = this.#onMouseMove.bind(this);
+    this.onMouseUp = this.#onMouseUp.bind(this);
+  }
+
+  destroy() {
+    this.#removeOverlay();
+    window.removeEventListener('mousemove', this.onMouseMove);
+    window.removeEventListener('mouseup', this.onMouseUp);
+  }
+
+  handlePointerDown(event, hit) {
+    if (!this.#isEditableHit(hit)) return false;
+    const data = hit.row ? this.controller.model.nodes[hit.row.nodeIndex]?.data : null;
+    if (!data || data.readonly || data.disabled) return false;
+    if (data.editorType === 'range' && hit.part !== 'number') {
+      this.rangeDrag = { hit, data };
+      this.#updateRangeFromEvent(event);
+      window.addEventListener('mousemove', this.onMouseMove);
+      window.addEventListener('mouseup', this.onMouseUp);
+      return true;
+    }
+    if (shouldOpenOverlayOnPointerDown(data, hit)) {
+      const node = this.controller.model.nodes[hit.row.nodeIndex];
+      this.#showOverlay(node, hit, { showPicker: true });
+      return true;
+    }
+    return false;
+  }
+
+  handleClick(event, hit) {
+    if (!this.#isEditableHit(hit)) return false;
+    const node = this.controller.model.nodes[hit.row.nodeIndex];
+    const data = node?.data;
+    if (!data || data.disabled) return false;
+    if (hit.part === 'arrayAdd') return this.controller.addInspectorArrayItem(node.id);
+    if (hit.part === 'arrayRemove') return this.controller.removeInspectorArrayItem(node.id);
+    if (data.editorType === 'button') return this.controller.triggerInspectorAction(node.id);
+    if (data.readonly) return false;
+    if (data.editorType === 'checkbox') {
+      this.controller.updateInspectorValue(node.id, !data.value, 'checkbox');
+      return true;
+    }
+    if (data.editorType === 'range' && hit.part !== 'number') return true;
+    if (this.overlay) return true;
+    this.#showOverlay(node, hit);
+    return true;
+  }
+
+  handleHeaderClick(_event, hit) {
+    if (hit?.area !== 'header' || hit.part !== 'filter') return false;
+    this.#showHeaderFilterOverlay(hit);
+    return true;
+  }
+
+  #showOverlay(node, hit, options = {}) {
+    this.#removeOverlay();
+    const data = node.data;
+    const rect = this.#overlayRect(hit);
+    const hostRect = this.host.getBoundingClientRect();
+    const element = createEditorElement(data);
+    Object.assign(element.style, {
+      position: 'absolute',
+      left: `${rect.x - hostRect.left}px`,
+      top: `${rect.y - hostRect.top}px`,
+      width: `${Math.max(24, rect.width)}px`,
+      height: `${Math.max(20, rect.height)}px`,
+      minWidth: '0',
+      maxWidth: `${Math.max(24, rect.width)}px`,
+      zIndex: 20,
+      boxSizing: 'border-box',
+      margin: '0',
+      outline: 'none',
+      border: '1px solid #38bdf8',
+      borderRadius: '3px',
+      background: '#0b1020',
+      color: '#e5e7eb',
+      font: '12px system-ui, sans-serif',
+      padding: data.editorType === 'color' ? '0 2px' : '0 6px',
+      textAlign: data.editorType === 'number' || data.editorType === 'range' ? 'right' : 'left',
+    });
+    const commit = () => {
+      const nextValue = parseEditorValue(element, data);
+      this.controller.updateInspectorValue(node.id, nextValue, data.editorType);
+      this.#removeOverlay();
+    };
+    element.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') commit();
+      else if (event.key === 'Escape') this.#removeOverlay();
+    });
+    element.addEventListener('blur', commit);
+    ensureOverlayHost(this.host);
+    this.host.append(element);
+    this.overlay = element;
+    element.focus();
+    element.select?.();
+    if (options.showPicker && element.showPicker) {
+      requestAnimationFrame(() => {
+        try {
+          element.showPicker();
+        } catch (_error) {
+          // Some browsers restrict showPicker to specific input types or gestures.
+        }
+      });
+    }
+  }
+
+  #showHeaderFilterOverlay(hit) {
+    this.#removeOverlay();
+    const rect = this.controller.getHeaderClientRect(hit);
+    const hostRect = this.host.getBoundingClientRect();
+    const element = document.createElement('input');
+    element.type = 'search';
+    element.value = this.controller.filterQuery ?? '';
+    element.placeholder = 'Filter inspector';
+    Object.assign(element.style, {
+      position: 'absolute',
+      left: `${rect.x - hostRect.left + 8}px`,
+      top: `${rect.y - hostRect.top + 5}px`,
+      width: `${Math.max(24, rect.width - 16)}px`,
+      height: `${Math.max(20, rect.height - 10)}px`,
+      minWidth: '0',
+      maxWidth: `${Math.max(24, rect.width - 16)}px`,
+      zIndex: 20,
+      boxSizing: 'border-box',
+      margin: '0',
+      outline: 'none',
+      border: '1px solid #38bdf8',
+      borderRadius: '4px',
+      background: '#0b1020',
+      color: '#e5e7eb',
+      font: '12px system-ui, sans-serif',
+      padding: '0 8px',
+    });
+    element.addEventListener('input', () => this.controller.setFilter(element.value));
+    element.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') this.#removeOverlay();
+      if (event.key === 'Enter') this.#removeOverlay();
+    });
+    element.addEventListener('blur', () => this.#removeOverlay());
+    ensureOverlayHost(this.host);
+    this.host.append(element);
+    this.overlay = element;
+    element.focus();
+    element.select();
+  }
+
+  #updateRangeFromEvent(event) {
+    const { hit, data } = this.rangeDrag;
+    const node = this.controller.model.nodes[hit.row.nodeIndex];
+    const rect = this.#rangeBarRect(hit);
+    const x = Math.max(0, Math.min(rect.width, event.clientX - rect.x));
+    const meta = data.meta ?? {};
+    const min = meta.min ?? 0;
+    const max = meta.max ?? 100;
+    const step = meta.step ?? (meta.integer ? 1 : 0);
+    let value = min + (x / Math.max(1, rect.width)) * (max - min);
+    if (step) value = Math.round(value / step) * step;
+    if (meta.integer) value = Math.round(value);
+    value = Math.max(min, Math.min(max, value));
+    this.controller.updateInspectorValue(node.id, value, 'range');
+  }
+
+  #onMouseMove(event) {
+    if (this.rangeDrag) this.#updateRangeFromEvent(event);
+  }
+
+  #onMouseUp() {
+    this.rangeDrag = null;
+    window.removeEventListener('mousemove', this.onMouseMove);
+    window.removeEventListener('mouseup', this.onMouseUp);
+  }
+
+  #isEditableHit(hit) {
+    return hit?.area === 'row' && (hit.column?.kind === 'inspectorValue' || hit.column?.kind === 'inspectorPane');
+  }
+
+  #overlayRect(hit) {
+    if (hit.column?.kind !== 'inspectorPane') return this.controller.getCellClientRect(hit);
+    const rect = this.controller.getCellClientRect(hit);
+    const editorLeft = Math.min(Math.max(210, rect.width * 0.42), rect.width - 180);
+    const editorWidth = Math.max(80, rect.width - editorLeft - 14);
+    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: editorWidth - 20, height: rect.height - 8 };
+  }
+
+  #rangeBarRect(hit) {
+    const rect = this.controller.getCellClientRect(hit);
+    if (hit.column?.kind === 'inspectorPane') {
+      const editorLeft = Math.min(Math.max(210, rect.width * 0.42), rect.width - 180);
+      const editorWidth = Math.max(80, rect.width - editorLeft - 14);
+      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 };
+  }
+
+  #removeOverlay() {
+    this.overlay?.remove();
+    this.overlay = null;
+  }
+}
+
+function createEditorElement(data) {
+  if (data.editorType === 'select') {
+    const select = document.createElement('select');
+    for (const [label, value] of Object.entries(data.meta.options ?? {})) {
+      const option = document.createElement('option');
+      option.textContent = label;
+      option.value = String(value);
+      option.selected = value === data.value;
+      select.append(option);
+    }
+    return select;
+  }
+  const input = document.createElement('input');
+  input.type = data.editorType === 'color' ? 'color' : data.editorType === 'number' || data.editorType === 'range' ? 'number' : 'text';
+  input.value = data.value ?? '';
+  if (data.meta.min !== undefined) input.min = data.meta.min;
+  if (data.meta.max !== undefined) input.max = data.meta.max;
+  if (data.meta.step !== undefined) input.step = data.meta.step;
+  return input;
+}
+
+function shouldOpenOverlayOnPointerDown(data, hit) {
+  if (data.readonly || data.disabled) return false;
+  if (data.editorType === 'range') return hit.part === 'number';
+  return data.editorType === 'text' || data.editorType === 'number' || data.editorType === 'select' || data.editorType === 'color';
+}
+
+function ensureOverlayHost(host) {
+  const style = getComputedStyle(host);
+  if (style.position === 'static') host.style.position = 'relative';
+  if (style.overflow === 'visible') host.style.overflow = 'hidden';
+}
+
+function parseEditorValue(element, data) {
+  if (data.editorType === 'number' || data.editorType === 'range') return data.meta.integer ? Number.parseInt(element.value, 10) : Number(element.value);
+  if (data.editorType === 'select') {
+    const values = Object.values(data.meta.options ?? {});
+    const match = values.find((value) => String(value) === element.value);
+    return match ?? element.value;
+  }
+  return element.value;
+}

package/src/inspector/editor-resolver.js

@@ -0,0 +1,33 @@
+export function valueTypeOf(value) {
+  if (Array.isArray(value)) return 'array';
+  if (value === null) return 'null';
+  return typeof value === 'object' ? 'object' : typeof value;
+}
+
+export function resolveEditorType(value, meta = {}) {
+  const valueType = valueTypeOf(value);
+  if (meta.button) return 'button';
+  if (meta.options) return 'select';
+  if (meta.color) return 'color';
+  if (valueType === 'boolean') return 'checkbox';
+  if (valueType === 'number' && (meta.min !== undefined || meta.max !== undefined)) return 'range';
+  if (valueType === 'number') return 'number';
+  if (valueType === 'string') return 'text';
+  if (valueType === 'object') return 'group';
+  if (valueType === 'array') return 'array';
+  if (valueType === 'null') return 'text';
+  return 'readonly';
+}
+
+export function formatInspectorValue(value, meta = {}) {
+  if (meta.button) return meta.button;
+  if (meta.options) {
+    const match = Object.entries(meta.options).find(([, optionValue]) => optionValue === value);
+    if (match) return match[0];
+  }
+  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);
+  return String(value);
+}

package/src/inspector/index.js

@@ -0,0 +1,4 @@
+export * from './cell-editor-manager.js';
+export * from './editor-resolver.js';
+export * from './model-inspector-builder.js';
+export * from './model-path.js';

package/src/inspector/model-inspector-builder.js

@@ -0,0 +1,139 @@
+import { formatInspectorValue, resolveEditorType, valueTypeOf } from './editor-resolver.js';
+import { joinPath, resolveMetaForPath } from './model-path.js';
+
+export class ModelInspectorBuilder {
+  build(model, meta = {}, options = {}) {
+    const nodes = [];
+    const context = {
+      meta,
+      enforceMeta: Boolean(options.enforceMeta),
+    };
+    if (options.flatRoot && model && typeof model === 'object' && !Array.isArray(model)) {
+      for (const [childKey, childValue] of Object.entries(model)) {
+        this.#visit({ nodes, value: childValue, key: childKey, path: childKey, parentId: null, context });
+      }
+      return nodes;
+    }
+    this.#visit({ nodes, value: model, key: 'model', path: '', parentId: null, context });
+    return nodes;
+  }
+
+  #visit({ nodes, value, key, path, parentId, context }) {
+    const { rule, hasMeta } = resolveMetaForPath(context.meta, path);
+    const valueType = valueTypeOf(value);
+    const editorType = resolveEditorType(value, rule);
+    const id = inspectorNodeId(path);
+    const label = rule.label ?? labelForKey(key, value, rule);
+    const structural = valueType === 'object' || valueType === 'array';
+    const metaDisabled = context.enforceMeta && !hasMeta && !structural;
+    nodes.push({
+      id,
+      parentId,
+      label,
+      type: inspectorNodeType(valueType, editorType),
+      data: {
+        inspector: true,
+        path,
+        key,
+        value,
+        valueText: formatInspectorValue(value, rule),
+        valueType,
+        editorType,
+        meta: rule,
+        hasMeta,
+        readonly: Boolean(rule.readonly || metaDisabled || editorType === 'readonly' || structural),
+        disabled: Boolean(rule.disabled || metaDisabled),
+      },
+    });
+
+    if (Array.isArray(value)) {
+      value.forEach((item, index) => {
+        const childPath = joinPath(path, index);
+        const { rule: itemRule } = resolveMetaForPath(context.meta, childPath);
+        const itemTitle = rule.itemTitle?.(index, item) ?? itemRule.label ?? `[${index}]`;
+        this.#visit({ nodes, value: item, key: itemTitle, path: childPath, parentId: id, context });
+      });
+    } else if (value && typeof value === 'object') {
+      for (const [childKey, childValue] of Object.entries(value)) {
+        this.#visit({ nodes, value: childValue, key: childKey, path: joinPath(path, childKey), parentId: id, context });
+      }
+    }
+  }
+}
+
+export function inspectorNodeId(path) {
+  return `model:${path || '$'}`;
+}
+
+export function inspectorColumns() {
+  return [
+    {
+      id: 'property',
+      label: 'Property',
+      width: 300,
+      minWidth: 160,
+      align: 'left',
+      kind: 'tree',
+      sortable: false,
+      value: (node) => node.label ?? node.id,
+    },
+    {
+      id: 'value',
+      label: 'Value',
+      width: 260,
+      minWidth: 140,
+      align: 'left',
+      kind: 'inspectorValue',
+      sortable: false,
+      value: (node) => node.data?.valueText ?? '',
+    },
+    {
+      id: 'type',
+      label: 'Type',
+      width: 96,
+      minWidth: 72,
+      align: 'left',
+      kind: 'inspectorType',
+      sortable: false,
+      value: (node) => node.data?.valueType ?? '',
+    },
+    {
+      id: 'description',
+      label: 'Description',
+      width: 220,
+      minWidth: 120,
+      align: 'left',
+      kind: 'inspectorDescription',
+      sortable: false,
+      value: (node) => node.data?.meta?.description ?? '',
+    },
+  ];
+}
+
+export function inspectorPaneColumns() {
+  return [
+    {
+      id: 'pane',
+      label: 'Inspector',
+      width: 560,
+      minWidth: 260,
+      align: 'left',
+      kind: 'inspectorPane',
+      sortable: false,
+      value: (node) => node.label ?? node.id,
+    },
+  ];
+}
+
+function labelForKey(key, value, meta) {
+  if (meta.label) return meta.label;
+  if (typeof key === 'number') return `[${key}]`;
+  return String(key);
+}
+
+function inspectorNodeType(valueType, editorType) {
+  if (valueType === 'array') return 'array';
+  if (valueType === 'object') return 'object';
+  if (editorType === 'button') return 'task';
+  return valueType;
+}

package/src/inspector/model-path.js

@@ -0,0 +1,48 @@
+export function joinPath(parentPath, key) {
+  return parentPath ? `${parentPath}.${key}` : String(key);
+}
+
+export function splitPath(path) {
+  if (!path) return [];
+  return String(path).split('.').filter(Boolean).map((part) => (/^\d+$/.test(part) ? Number(part) : part));
+}
+
+export function getAtPath(model, path) {
+  let value = model;
+  for (const part of splitPath(path)) {
+    if (value == null) return undefined;
+    value = value[part];
+  }
+  return value;
+}
+
+export function setAtPath(model, path, nextValue) {
+  const parts = splitPath(path);
+  if (!parts.length) throw new Error('Cannot replace root model value through setAtPath');
+  let target = model;
+  for (let i = 0; i < parts.length - 1; i++) target = target[parts[i]];
+  const key = parts[parts.length - 1];
+  const oldValue = target[key];
+  target[key] = nextValue;
+  return oldValue;
+}
+
+export function wildcardPath(path) {
+  return String(path)
+    .split('.')
+    .map((part) => (/^\d+$/.test(part) ? '*' : part))
+    .join('.');
+}
+
+export function metaForPath(meta = {}, path) {
+  return resolveMetaForPath(meta, path).rule;
+}
+
+export function resolveMetaForPath(meta = {}, path) {
+  const exact = meta[path];
+  if (exact) return { rule: exact, hasMeta: true, source: path };
+  const wildcard = wildcardPath(path);
+  const wildcardRule = meta[wildcard];
+  if (wildcardRule) return { rule: wildcardRule, hasMeta: true, source: wildcard };
+  return { rule: {}, hasMeta: false, source: '' };
+}

package/src/renderers/canvas2d-renderer.js

@@ -0,0 +1,120 @@
+import { cullLayoutNodes } from '../core/culling.js';
+
+export class Canvas2DRenderer {
+  constructor({ themeManager } = {}) {
+    this.canvas = null;
+    this.ctx = null;
+    this.scene = null;
+    this.themeManager = themeManager;
+    this.visibleNodeIndices = [];
+  }
+
+  /** @param {HTMLCanvasElement} canvas */
+  initialize(canvas) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d', { alpha: false });
+    if (!this.ctx) throw new Error('Canvas2D context is not available');
+  }
+
+  setScene(scene) {
+    this.scene = scene;
+  }
+
+  updateDynamicState(_patches) {
+    // Canvas2D reads model.dynamicState directly. Dynamic patches must not rebuild layout.
+  }
+
+  render(frameState) {
+    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);
+    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);
+
+    this.visibleNodeIndices = cullLayoutNodes(this.scene.layout.nodes, viewport.getWorldBounds());
+    const visibleSet = new Set(this.visibleNodeIndices);
+
+    ctx.save();
+    ctx.scale(viewport.zoom, viewport.zoom);
+    ctx.translate(-viewport.x, -viewport.y);
+    this.#drawEdges(ctx, visibleSet, theme);
+    this.#drawNodes(ctx, theme, viewport.zoom);
+    ctx.restore();
+
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.fillStyle = theme.mutedLabel ?? '#9ba8b3';
+    ctx.font = '12px system-ui, sans-serif';
+    ctx.fillText(`${this.scene.layout.nodes.length.toLocaleString()} nodes / ${this.visibleNodeIndices.length.toLocaleString()} visible`, 12, 20);
+  }
+
+  #drawEdges(ctx, visibleSet, theme) {
+    const nodes = this.scene.layout.nodes;
+    ctx.strokeStyle = theme.edge ?? '#51606d';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    for (const edge of this.scene.layout.edges) {
+      if (!visibleSet.has(edge.sourceIndex) && !visibleSet.has(edge.targetIndex)) continue;
+      const source = nodes[edge.sourceIndex];
+      const target = nodes[edge.targetIndex];
+      ctx.moveTo(source.x + source.width, source.y + source.height / 2);
+      ctx.lineTo(target.x, target.y + target.height / 2);
+    }
+    ctx.stroke();
+  }
+
+  #drawNodes(ctx, theme, zoom) {
+    const model = this.scene.model;
+    for (const index of this.visibleNodeIndices) {
+      const node = this.scene.layout.nodes[index];
+      const state = this.scene.dynamicState.get(node.id) ?? {};
+      if (state.visible === false) continue;
+      const structural = model.index.getNode(node.id);
+      const fill = state.color ?? theme.nodeFill ?? '#202a33';
+
+      ctx.fillStyle = fill;
+      ctx.strokeStyle = state.selected ? theme.selected : state.highlighted ? theme.highlighted : theme.nodeStroke;
+      ctx.lineWidth = state.selected || state.highlighted ? 2 / zoom : 1 / zoom;
+      ctx.beginPath();
+      ctx.roundRect(node.x, node.y, node.width, node.height, 4);
+      ctx.fill();
+      ctx.stroke();
+
+      if (state.progress !== undefined) {
+        ctx.fillStyle = theme.progress ?? '#42d392';
+        ctx.fillRect(node.x, node.y + node.height - 3, node.width * clamp01(state.progress), 3);
+      }
+
+      if (zoom >= 0.28) {
+        ctx.fillStyle = theme.label ?? '#eef3f7';
+        ctx.font = `${Math.max(9, Math.min(12, 12 / Math.sqrt(zoom)))}px system-ui, sans-serif`;
+        ctx.textBaseline = 'middle';
+        const label = structural?.label ?? node.id;
+        ctx.fillText(label, node.x + 8, node.y + node.height / 2, node.width - 14);
+      }
+    }
+  }
+
+  pick(worldX, worldY) {
+    if (!this.scene) return null;
+    for (let i = this.visibleNodeIndices.length - 1; i >= 0; i--) {
+      const node = this.scene.layout.nodes[this.visibleNodeIndices[i]];
+      if (worldX >= node.x && worldX <= node.x + node.width && worldY >= node.y && worldY <= node.y + node.height) return node.id;
+    }
+    return null;
+  }
+}
+
+function clamp01(value) {
+  return Math.max(0, Math.min(1, value));
+}

package/src/renderers/index.js

@@ -0,0 +1,3 @@
+export * from './canvas2d-renderer.js';
+export * from './renderer.js';
+export * from './tree-row-renderer.js';

package/src/renderers/renderer.js

@@ -0,0 +1,10 @@
+/**
+ * @typedef {Object} Renderer
+ * @property {(canvas: HTMLCanvasElement) => Promise<void> | void} initialize
+ * @property {(scene: any) => void} setScene
+ * @property {(patches: Array<import('../core/types.js').DynamicPatch>) => void} updateDynamicState
+ * @property {(frameState: any) => void} render
+ */
+
+export class RendererNotImplemented extends Error {}
+