virtual-tree-canvas 0.1.0

package/src/core/tree-column-model.js

@@ -0,0 +1,151 @@
+export const builtInColumns = {
+  tree: {
+    id: 'name',
+    label: 'Name',
+    width: 320,
+    minWidth: 160,
+    align: 'left',
+    kind: 'tree',
+    value: (node) => node.label ?? node.id,
+  },
+  status: {
+    id: 'status',
+    label: 'Status',
+    width: 84,
+    minWidth: 64,
+    align: 'center',
+    kind: 'status',
+    value: (_node, state) => state.status ?? 0,
+  },
+  value: {
+    id: 'value',
+    label: 'Value',
+    width: 84,
+    minWidth: 56,
+    align: 'right',
+    kind: 'value',
+    value: (_node, state) => state.value ?? '',
+  },
+  progress: {
+    id: 'progress',
+    label: 'Progress',
+    width: 120,
+    minWidth: 80,
+    align: 'left',
+    kind: 'progress',
+    value: (_node, state) => state.progress ?? '',
+  },
+  type: {
+    id: 'type',
+    label: 'Type',
+    width: 110,
+    minWidth: 70,
+    align: 'left',
+    kind: 'type',
+    value: (node) => node.type ?? '',
+  },
+  updated: {
+    id: 'updated',
+    label: 'Updated',
+    width: 120,
+    minWidth: 84,
+    align: 'right',
+    kind: 'updated',
+    value: (_node, state) => state.updatedAt ?? '',
+  },
+};
+
+export class TreeColumnModel {
+  constructor(columns = [builtInColumns.tree]) {
+    this.columns = [];
+    this.contentWidth = 0;
+    this.sort = { columnId: null, direction: null };
+    this.setColumns(columns);
+  }
+
+  setColumns(columns = [builtInColumns.tree]) {
+    const normalized = columns.length ? columns : [builtInColumns.tree];
+    this.columns = normalized.map((column, index) => normalizeColumn(column, index));
+    if (!this.columns.some((column) => column.kind === 'tree' || column.kind === 'inspectorPane')) {
+      this.columns.unshift(normalizeColumn(builtInColumns.tree, 0));
+    }
+    this.#layout();
+  }
+
+  /** @param {number} x */
+  getColumnAt(x) {
+    return this.columns.find((column) => x >= column.x && x < column.x + column.width) ?? null;
+  }
+
+  getColumn(id) {
+    return this.columns.find((column) => column.id === id) ?? null;
+  }
+
+  resizeColumn(id, width) {
+    const column = this.getColumn(id);
+    if (!column) return false;
+    column.width = Math.max(column.minWidth, width);
+    this.#layout();
+    return true;
+  }
+
+  moveColumn(id, targetIndex) {
+    const currentIndex = this.columns.findIndex((column) => column.id === id);
+    if (currentIndex === -1) return false;
+    const [column] = this.columns.splice(currentIndex, 1);
+    const nextIndex = Math.max(0, Math.min(this.columns.length, targetIndex));
+    this.columns.splice(nextIndex, 0, column);
+    if (!this.columns.some((item) => item.kind === 'tree')) this.columns.unshift(normalizeColumn(builtInColumns.tree, 0));
+    this.#layout();
+    return true;
+  }
+
+  setSort(columnId, direction) {
+    if (columnId !== null && !this.getColumn(columnId)) return false;
+    this.sort = { columnId, direction };
+    return true;
+  }
+
+  getResizeHandleAt(x, tolerance = 5) {
+    return this.columns.find((column) => Math.abs(x - (column.x + column.width)) <= tolerance) ?? null;
+  }
+
+  #layout() {
+    let x = 0;
+    for (const column of this.columns) {
+      column.x = x;
+      x += column.width;
+    }
+    this.contentWidth = x;
+  }
+}
+
+export function defaultTreeTableColumns() {
+  return [
+    { ...builtInColumns.tree, id: 'name', label: 'Name', width: 340 },
+    builtInColumns.type,
+    builtInColumns.status,
+    builtInColumns.value,
+    builtInColumns.progress,
+    builtInColumns.updated,
+  ];
+}
+
+function normalizeColumn(column, index) {
+  const builtIn = typeof column === 'string' ? builtInColumns[column] : null;
+  const source = builtIn ?? column;
+  if (!source?.id) throw new Error(`Column at index ${index} is missing id`);
+  const width = Math.max(source.minWidth ?? 40, source.width ?? 120);
+  return {
+    id: source.id,
+    label: source.label ?? source.id,
+    width,
+    minWidth: source.minWidth ?? 40,
+    align: source.align ?? 'left',
+    kind: source.kind ?? (index === 0 ? 'tree' : 'text'),
+    sortable: source.sortable ?? true,
+    value: source.value ?? ((node) => node[source.id] ?? ''),
+    render: source.render,
+    x: 0,
+  };
+}

package/src/core/tree-expansion-manager.js

@@ -0,0 +1,67 @@
+export class TreeExpansionManager extends EventTarget {
+  /** @param {import('./tree-model.js').TreeModel} model */
+  constructor(model) {
+    super();
+    this.model = model;
+  }
+
+  /** @param {string} id */
+  isExpanded(id) {
+    return this.model.expanded.has(id);
+  }
+
+  /** @param {string} id */
+  hasChildren(id) {
+    return this.model.index.getChildren(id).length > 0;
+  }
+
+  /** @param {string} id */
+  expand(id) {
+    if (!this.hasChildren(id) || this.model.expanded.has(id)) return false;
+    this.model.expanded.add(id);
+    this.dispatchEvent(new Event('change'));
+    return true;
+  }
+
+  /** @param {string} id */
+  collapse(id) {
+    if (!this.model.expanded.delete(id)) return false;
+    this.dispatchEvent(new Event('change'));
+    return true;
+  }
+
+  /** @param {string} id */
+  toggle(id) {
+    return this.isExpanded(id) ? this.collapse(id) : this.expand(id);
+  }
+
+  expandAll() {
+    for (const node of this.model.nodes) {
+      if (this.hasChildren(node.id)) this.model.expanded.add(node.id);
+    }
+    this.dispatchEvent(new Event('change'));
+  }
+
+  collapseAll() {
+    this.model.expanded.clear();
+    this.dispatchEvent(new Event('change'));
+  }
+
+  /** @param {number} maxDepth */
+  expandToDepth(maxDepth) {
+    this.model.expanded.clear();
+    const visit = (id, depth) => {
+      if (depth < maxDepth && this.hasChildren(id)) this.model.expanded.add(id);
+      for (const childId of this.model.index.getChildren(id)) visit(childId, depth + 1);
+    };
+    for (const rootId of this.model.index.roots) visit(rootId, 0);
+    this.dispatchEvent(new Event('change'));
+  }
+
+  /** @param {string} id */
+  expandAncestors(id) {
+    for (const ancestorId of this.model.index.getAncestors(id)) this.model.expanded.add(ancestorId);
+    this.dispatchEvent(new Event('change'));
+  }
+}
+

package/src/core/tree-index.js

@@ -0,0 +1,79 @@
+/**
+ * CPU index for structural tree queries. Rebuild this only on cold-path changes.
+ */
+export class TreeIndex {
+  constructor() {
+    /** @type {Map<string, number>} */
+    this.idToIndex = new Map();
+    /** @type {Map<string | null, string[]>} */
+    this.childrenByParent = new Map();
+    /** @type {string[]} */
+    this.roots = [];
+    /** @type {Array<import('./types.js').TreeNode>} */
+    this.nodes = [];
+    /** @type {Map<string, string>} */
+    this.pathById = new Map();
+  }
+
+  /**
+   * @param {Array<import('./types.js').TreeNode>} nodes
+   */
+  rebuild(nodes) {
+    this.idToIndex.clear();
+    this.childrenByParent.clear();
+    this.roots = [];
+    this.nodes = nodes;
+    this.pathById.clear();
+
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      if (!node?.id) throw new Error(`Tree node at index ${i} is missing id`);
+      if (this.idToIndex.has(node.id)) throw new Error(`Duplicate tree node id: ${node.id}`);
+      this.idToIndex.set(node.id, i);
+    }
+
+    for (const node of nodes) {
+      const parentId = node.parentId ?? null;
+      if (parentId !== null && !this.idToIndex.has(parentId)) {
+        throw new Error(`Parent ${parentId} for node ${node.id} does not exist`);
+      }
+      if (!this.childrenByParent.has(parentId)) this.childrenByParent.set(parentId, []);
+      this.childrenByParent.get(parentId).push(node.id);
+      if (parentId === null) this.roots.push(node.id);
+    }
+
+    for (const rootId of this.roots) this.#indexPaths(rootId, '');
+  }
+
+  /** @param {string} id */
+  getNode(id) {
+    const index = this.idToIndex.get(id);
+    return index === undefined ? null : this.nodes[index];
+  }
+
+  /** @param {string | null} parentId */
+  getChildren(parentId) {
+    return this.childrenByParent.get(parentId) ?? [];
+  }
+
+  /** @param {string} id */
+  getAncestors(id) {
+    const ancestors = [];
+    let node = this.getNode(id);
+    while (node?.parentId) {
+      ancestors.push(node.parentId);
+      node = this.getNode(node.parentId);
+    }
+    return ancestors;
+  }
+
+  #indexPaths(id, parentPath) {
+    const node = this.getNode(id);
+    if (!node) return;
+    const label = node.label || node.id;
+    const path = parentPath ? `${parentPath}/${label}` : label;
+    this.pathById.set(id, path);
+    for (const childId of this.getChildren(id)) this.#indexPaths(childId, path);
+  }
+}
+

package/src/core/tree-model.js

@@ -0,0 +1,80 @@
+import { TreeIndex } from './tree-index.js';
+
+/**
+ * Owns structural nodes, expanded state, and per-node dynamic state.
+ * Structural operations are cold-path; dynamic patches are hot-path.
+ */
+export class TreeModel extends EventTarget {
+  constructor() {
+    super();
+    /** @type {Array<import('./types.js').TreeNode>} */
+    this.nodes = [];
+    this.index = new TreeIndex();
+    /** @type {Map<string, import('./types.js').NodeDynamicState>} */
+    this.dynamicState = new Map();
+    /** @type {Set<string>} */
+    this.expanded = new Set();
+  }
+
+  /** @param {Array<import('./types.js').TreeNode>} nodes */
+  setTree(nodes) {
+    this.nodes = nodes.slice();
+    this.index.rebuild(this.nodes);
+    this.expanded = new Set(this.nodes.map((node) => node.id));
+    for (const node of this.nodes) {
+      if (!this.dynamicState.has(node.id)) this.dynamicState.set(node.id, { visible: true });
+    }
+    this.dispatchEvent(new Event('structurechange'));
+  }
+
+  /**
+   * @param {Array<import('./types.js').TreeNode>} nodes
+   */
+  addNodes(nodes) {
+    this.nodes = this.nodes.concat(nodes);
+    this.index.rebuild(this.nodes);
+    for (const node of nodes) this.dynamicState.set(node.id, { visible: true });
+    this.dispatchEvent(new Event('structurechange'));
+  }
+
+  /** @param {string[]} ids */
+  removeNodes(ids) {
+    const remove = new Set(ids);
+    this.nodes = this.nodes.filter((node) => !remove.has(node.id) && !remove.has(node.parentId ?? ''));
+    for (const id of remove) {
+      this.dynamicState.delete(id);
+      this.expanded.delete(id);
+    }
+    this.index.rebuild(this.nodes);
+    this.dispatchEvent(new Event('structurechange'));
+  }
+
+  /** @param {string} id */
+  expand(id) {
+    this.expanded.add(id);
+    this.dispatchEvent(new Event('structurechange'));
+  }
+
+  /** @param {string} id */
+  collapse(id) {
+    this.expanded.delete(id);
+    this.dispatchEvent(new Event('structurechange'));
+  }
+
+  /**
+   * @param {Array<import('./types.js').DynamicPatch>} patches
+   */
+  applyDynamicPatches(patches) {
+    for (const patch of patches) {
+      const current = this.dynamicState.get(patch.id);
+      if (!current) continue;
+      Object.assign(current, patch.state);
+    }
+  }
+
+  /** @param {string} id */
+  isVisibleByExpansion(id) {
+    const ancestors = this.index.getAncestors(id);
+    return ancestors.every((ancestorId) => this.expanded.has(ancestorId));
+  }
+}

package/src/core/tree-view-viewport.js

@@ -0,0 +1,69 @@
+export class TreeViewViewport extends EventTarget {
+  constructor({ rowHeight = 28, indentWidth = 18, headerHeight = 28 } = {}) {
+    super();
+    this.rowHeight = rowHeight;
+    this.indentWidth = indentWidth;
+    this.headerHeight = headerHeight;
+    this.renderInsetX = 0;
+    this.renderInsetY = 0;
+    this.scrollX = 0;
+    this.scrollY = 0;
+    this.viewportWidth = 1;
+    this.viewportHeight = 1;
+    this.contentWidth = 1;
+    this.contentHeight = 1;
+    this.zoom = 1;
+  }
+
+  get rowViewportHeight() {
+    return Math.max(1, this.viewportHeight - this.headerHeight);
+  }
+
+  resize(width, height) {
+    this.viewportWidth = Math.max(1, width);
+    this.viewportHeight = Math.max(1, height);
+    this.clamp();
+    this.dispatchEvent(new Event('change'));
+  }
+
+  setContentSize(width, height) {
+    this.contentWidth = Math.max(1, width);
+    this.contentHeight = Math.max(1, height);
+    this.clamp();
+    this.dispatchEvent(new Event('change'));
+  }
+
+  scrollBy(dx, dy) {
+    this.scrollX += dx;
+    this.scrollY += dy;
+    this.clamp();
+    this.dispatchEvent(new Event('change'));
+  }
+
+  scrollTo(x, y) {
+    this.scrollX = x;
+    this.scrollY = y;
+    this.clamp();
+    this.dispatchEvent(new Event('change'));
+  }
+
+  /** @param {number} rowIndex @param {'start' | 'center' | 'end' | 'nearest'} align */
+  scrollRowIntoView(rowIndex, align = 'nearest') {
+    const rowTop = rowIndex * this.rowHeight;
+    const rowBottom = rowTop + this.rowHeight;
+    if (align === 'start') this.scrollY = rowTop;
+    else if (align === 'center') this.scrollY = rowTop - (this.rowViewportHeight - this.rowHeight) / 2;
+    else if (align === 'end') this.scrollY = rowBottom - this.rowViewportHeight;
+    else if (rowTop < this.scrollY) this.scrollY = rowTop;
+    else if (rowBottom > this.scrollY + this.rowViewportHeight) this.scrollY = rowBottom - this.rowViewportHeight;
+    this.clamp();
+    this.dispatchEvent(new Event('change'));
+  }
+
+  clamp() {
+    const maxX = Math.max(0, this.contentWidth - this.viewportWidth);
+    const maxY = Math.max(0, this.contentHeight - this.rowViewportHeight);
+    this.scrollX = Math.max(0, Math.min(maxX, this.scrollX));
+    this.scrollY = Math.max(0, Math.min(maxY, this.scrollY));
+  }
+}

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

@@ -0,0 +1,50 @@
+export class TreeWorkerClient {
+  constructor(workerUrl = new URL('../workers/tree-worker.js', import.meta.url)) {
+    if (typeof Worker === 'undefined') throw new Error('Worker is not available');
+    this.worker = new Worker(workerUrl, { type: 'module' });
+    this.nextId = 1;
+    this.pending = new Map();
+    this.ready = Promise.resolve();
+    this.worker.addEventListener('message', this.#onMessage);
+  }
+
+  setData(nodes) {
+    this.ready = this.#request('setData', { nodes });
+    return this.ready;
+  }
+
+  async search(query, options = {}) {
+    await this.ready;
+    return this.#request('search', { query, options });
+  }
+
+  async rebuildRows(options = {}) {
+    await this.ready;
+    return this.#request('rebuildRows', options);
+  }
+
+  destroy() {
+    for (const { reject } of this.pending.values()) reject(new Error('Tree worker destroyed'));
+    this.pending.clear();
+    this.worker.removeEventListener('message', this.#onMessage);
+    this.worker.terminate();
+  }
+
+  #request(type, payload) {
+    const id = this.nextId++;
+    const promise = new Promise((resolve, reject) => {
+      this.pending.set(id, { resolve, reject });
+    });
+    this.worker.postMessage({ id, type, payload });
+    return promise;
+  }
+
+  #onMessage = (event) => {
+    const { id, ok, result, error } = event.data ?? {};
+    const pending = this.pending.get(id);
+    if (!pending) return;
+    this.pending.delete(id);
+    if (ok) pending.resolve(result);
+    else pending.reject(new Error(error || 'Tree worker request failed'));
+  };
+}

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

@@ -0,0 +1,152 @@
+export function createWorkerTreeState(nodes) {
+  const idToIndex = new Map();
+  const childrenByParent = new Map();
+  const parentById = new Map();
+  const roots = [];
+  const pathById = new Map();
+
+  for (let i = 0; i < nodes.length; i++) idToIndex.set(nodes[i].id, i);
+  for (const node of nodes) {
+    const parentId = node.parentId ?? null;
+    parentById.set(node.id, parentId);
+    if (!childrenByParent.has(parentId)) childrenByParent.set(parentId, []);
+    childrenByParent.get(parentId).push(node.id);
+    if (parentId === null) roots.push(node.id);
+  }
+
+  const indexPaths = (id, parentPath) => {
+    const node = nodes[idToIndex.get(id)];
+    if (!node) return;
+    const label = node.label || node.id;
+    const path = parentPath ? `${parentPath}/${label}` : label;
+    pathById.set(id, path);
+    for (const childId of childrenByParent.get(id) ?? []) indexPaths(childId, path);
+  };
+  for (const rootId of roots) indexPaths(rootId, '');
+
+  const records = nodes.map((node) => {
+    const path = pathById.get(node.id) ?? '';
+    const tags = (node.tags ?? []).join(' ');
+    return {
+      id: node.id,
+      label: node.label ?? '',
+      path,
+      tags,
+      type: node.type ?? '',
+      searchText: normalize(`${node.id} ${node.label ?? ''} ${path} ${tags} ${node.type ?? ''}`),
+    };
+  });
+
+  return { nodes, idToIndex, childrenByParent, parentById, roots, pathById, records };
+}
+
+export function searchWorkerTree(state, query, { fields = ['label', 'id', 'path', 'tags', 'type'], limit = 500 } = {}) {
+  const q = normalize(query);
+  if (!q) return [];
+  const results = [];
+  const defaultFields = fields.length === 5 && fields.includes('label') && fields.includes('id') && fields.includes('path') && fields.includes('tags') && fields.includes('type');
+
+  for (const record of state.records) {
+    const matches = defaultFields ? record.searchText.includes(q) : fields.some((field) => normalize(record[field]).includes(q));
+    if (!matches) continue;
+    results.push(record.id);
+    if (results.length >= limit) break;
+  }
+  return results;
+}
+
+export function rebuildWorkerRows(state, options = {}) {
+  const rowHeight = options.rowHeight ?? 28;
+  const indentWidth = options.indentWidth ?? 18;
+  const expanded = new Set(options.expandedIds ?? []);
+  const query = normalize(options.filterQuery ?? '');
+  const sort = options.sort ?? { columnId: null, direction: null };
+  const sortValues = options.sortValues ? new Map(options.sortValues) : null;
+  const includedIds = options.includedIds ? new Set(options.includedIds) : query ? getIncludedIdsForQuery(state, query).includedIds : null;
+  const rows = [];
+  let maxDepth = 0;
+
+  const hasChildren = (id) => (state.childrenByParent.get(id) ?? []).length > 0;
+  const nodeForId = (id) => state.nodes[state.idToIndex.get(id)];
+  const isIncluded = (id) => !includedIds || includedIds.has(id);
+
+  const sortIds = (ids) => {
+    const filtered = includedIds ? ids.filter((id) => includedIds.has(id)) : ids;
+    if (!sort.columnId || !sort.direction) return filtered;
+    const direction = sort.direction === 'desc' ? -1 : 1;
+    return filtered.slice().sort((aId, bId) => compareNodes(nodeForId(aId), nodeForId(bId), sort.columnId, sortValues) * direction);
+  };
+
+  const visit = (id, depth) => {
+    if (!isIncluded(id)) return;
+    const nodeIndex = state.idToIndex.get(id);
+    if (nodeIndex === undefined) return;
+    const expandedRow = expanded.has(id);
+    const rowIndex = rows.length;
+    rows.push({
+      nodeId: id,
+      nodeIndex,
+      depth,
+      rowIndex,
+      y: rowIndex * rowHeight,
+      height: rowHeight,
+      expanded: expandedRow,
+      hasChildren: hasChildren(id),
+    });
+    maxDepth = Math.max(maxDepth, depth);
+    if (!expandedRow && !query) return;
+    for (const childId of sortIds(state.childrenByParent.get(id) ?? [])) visit(childId, depth + 1);
+  };
+
+  for (const rootId of sortIds(state.roots)) visit(rootId, 0);
+  return {
+    rows,
+    contentHeight: rows.length * rowHeight,
+    contentWidth: Math.max(640, (maxDepth + 1) * indentWidth + 520),
+  };
+}
+
+export function getIncludedIdsForQuery(state, query, candidateIds = null) {
+  const q = normalize(query);
+  const includedIds = new Set();
+  const matchingIds = [];
+  const records = candidateIds ? idsToRecords(state, candidateIds) : state.records;
+
+  for (const record of records) {
+    if (!record.searchText.includes(q)) continue;
+    matchingIds.push(record.id);
+    let id = record.id;
+    while (id !== null && id !== undefined && !includedIds.has(id)) {
+      includedIds.add(id);
+      id = state.parentById.get(id) ?? null;
+    }
+  }
+  return { matchingIds, includedIds };
+}
+
+function idsToRecords(state, ids) {
+  const records = [];
+  for (const id of ids) {
+    const index = state.idToIndex.get(id);
+    if (index !== undefined) records.push(state.records[index]);
+  }
+  return records;
+}
+
+function compareNodes(a, b, columnId, sortValues = null) {
+  const aValue = sortValues ? sortValues.get(a?.id) : columnValue(a, columnId);
+  const bValue = sortValues ? sortValues.get(b?.id) : columnValue(b, columnId);
+  if (typeof aValue === 'number' && typeof bValue === 'number') return aValue - bValue;
+  return String(aValue ?? '').localeCompare(String(bValue ?? ''), undefined, { numeric: true, sensitivity: 'base' });
+}
+
+function columnValue(node, columnId) {
+  if (!node) return '';
+  if (columnId === 'name') return node.label ?? node.id;
+  if (columnId === 'type') return node.type ?? '';
+  return node[columnId] ?? '';
+}
+
+function normalize(value) {
+  return String(value ?? '').toLowerCase();
+}

package/src/core/types.js

@@ -0,0 +1,44 @@
+/**
+ * @typedef {Object} TreeNode
+ * @property {string} id
+ * @property {string | null} [parentId]
+ * @property {string} [label]
+ * @property {string} [type]
+ * @property {string} [icon]
+ * @property {string} [image]
+ * @property {string[]} [tags]
+ * @property {any} [data]
+ */
+
+/**
+ * @typedef {Object} NodeDynamicState
+ * @property {number} [value]
+ * @property {number | string} [status]
+ * @property {number} [progress]
+ * @property {number} [pulse]
+ * @property {string} [color]
+ * @property {boolean} [selected]
+ * @property {boolean} [highlighted]
+ * @property {boolean} [visible]
+ */
+
+/**
+ * @typedef {Object} LayoutNode
+ * @property {number} index
+ * @property {string} id
+ * @property {number} parentIndex
+ * @property {number} x
+ * @property {number} y
+ * @property {number} width
+ * @property {number} height
+ * @property {number} depth
+ * @property {number} iconIndex
+ * @property {number} typeIndex
+ */
+
+/**
+ * @typedef {Object} DynamicPatch
+ * @property {string} id
+ * @property {NodeDynamicState} state
+ */
+