virtual-tree-canvas 0.3.5 → 0.3.7

package/package.json

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

package/src/core/search-index.js

@@ -8,13 +8,21 @@ export class TreeSearchIndex {
 
   /** @param {import('./tree-model.js').TreeModel} model */
   rebuild(model) {
-    this.records = model.nodes.map((node) => ({
-      id: node.id,
-      label: (node.label ?? '').toLowerCase(),
-      path: (model.index.pathById.get(node.id) ?? '').toLowerCase(),
-      tags: (node.tags ?? []).join(' ').toLowerCase(),
-      type: (node.type ?? '').toLowerCase(),
-    }));
+    this.records = model.nodes.map((node) => {
+      const path = model.index.pathById.get(node.id) ?? '';
+      const searchId = searchableNodeId(node);
+      const record = {
+        id: node.id,
+        searchId: normalize(searchId),
+        label: normalize(node.label ?? ''),
+        path: normalize(path),
+        tags: normalize((node.tags ?? []).join(' ')),
+        type: normalize(node.type ?? ''),
+        value: normalize(searchableNodeValue(node)),
+      };
+      record.searchText = defaultSearchText(node, record);
+      return record;
+    });
   }
 
   /**
@@ -32,11 +40,16 @@ export class TreeSearchIndex {
     const fields = options.fields ?? ['label', 'id', 'path', 'tags', 'type'];
     const limit = options.limit ?? 100;
     const results = [];
+    const defaultFields = isDefaultSearchFields(fields);
     for (const record of this.records) {
-      for (const field of fields) {
-        if (String(record[field] ?? '').includes(q)) {
-          results.push(record.id);
-          break;
+      if (defaultFields) {
+        if (record.searchText.includes(q)) results.push(record.id);
+      } else {
+        for (const field of fields) {
+          if (searchFieldValue(record, field).includes(q)) {
+            results.push(record.id);
+            break;
+          }
         }
       }
       if (results.length >= limit) break;
@@ -68,3 +81,42 @@ export class TreeSearchIndex {
     this.lastQuery = '';
   }
 }
+
+function isDefaultSearchFields(fields) {
+  return fields.length === 5 && fields.includes('label') && fields.includes('id') && fields.includes('path') && fields.includes('tags') && fields.includes('type');
+}
+
+function searchFieldValue(record, field) {
+  if (field === 'id') return record.searchId || normalize(record.id);
+  return normalize(record[field] ?? '');
+}
+
+function searchableNodeId(node) {
+  if (node?.data?.inspector) return node.data.key ?? node.label ?? node.id;
+  return node?.id ?? '';
+}
+
+function searchableNodeValue(node) {
+  if (!node?.data?.inspector) return '';
+  return node.data.valueText ?? node.data.value ?? '';
+}
+
+function defaultSearchText(node, record) {
+  if (node?.data?.inspector) {
+    const data = node.data;
+    return normalize([
+      record.searchId,
+      node.label ?? '',
+      data.key ?? '',
+      data.valueText ?? '',
+      data.valueType ?? '',
+      record.tags,
+      record.type,
+    ].join(' '));
+  }
+  return normalize(`${record.searchId} ${record.label} ${record.path} ${record.tags} ${record.type}`);
+}
+
+function normalize(value) {
+  return String(value ?? '').toLowerCase();
+}

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

@@ -13,10 +13,17 @@ export class TreeViewViewport extends EventTarget {
     this.contentWidth = 1;
     this.contentHeight = 1;
     this.zoom = 1;
+    this.scrollbarSize = 0;
+    this.verticalScrollbarVisible = false;
+    this.horizontalScrollbarVisible = false;
+  }
+
+  get contentViewportWidth() {
+    return Math.max(1, this.viewportWidth - (this.verticalScrollbarVisible ? this.scrollbarSize : 0));
   }
 
   get rowViewportHeight() {
-    return Math.max(1, this.viewportHeight - this.headerHeight);
+    return Math.max(1, this.viewportHeight - this.headerHeight - (this.horizontalScrollbarVisible ? this.scrollbarSize : 0));
   }
 
   resize(width, height) {
@@ -33,6 +40,21 @@ export class TreeViewViewport extends EventTarget {
     this.dispatchEvent(new Event('change'));
   }
 
+  setScrollbarState({ size = this.scrollbarSize, vertical = this.verticalScrollbarVisible, horizontal = this.horizontalScrollbarVisible } = {}) {
+    const nextSize = Math.max(0, size);
+    const nextVertical = Boolean(vertical && nextSize > 0);
+    const nextHorizontal = Boolean(horizontal && nextSize > 0);
+    const changed =
+      this.scrollbarSize !== nextSize ||
+      this.verticalScrollbarVisible !== nextVertical ||
+      this.horizontalScrollbarVisible !== nextHorizontal;
+    this.scrollbarSize = nextSize;
+    this.verticalScrollbarVisible = nextVertical;
+    this.horizontalScrollbarVisible = nextHorizontal;
+    this.clamp();
+    return changed;
+  }
+
   scrollBy(dx, dy) {
     this.scrollX += dx;
     this.scrollY += dy;
@@ -61,7 +83,7 @@ export class TreeViewViewport extends EventTarget {
   }
 
   clamp() {
-    const maxX = Math.max(0, this.contentWidth - this.viewportWidth);
+    const maxX = Math.max(0, this.contentWidth - this.contentViewportWidth);
     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-operations.js

@@ -27,14 +27,18 @@ export function createWorkerTreeState(nodes) {
   const records = nodes.map((node) => {
     const path = pathById.get(node.id) ?? '';
     const tags = (node.tags ?? []).join(' ');
-    return {
+    const record = {
       id: node.id,
+      searchId: searchableNodeId(node),
       label: node.label ?? '',
       path,
       tags,
       type: node.type ?? '',
-      searchText: normalize(`${node.id} ${node.label ?? ''} ${path} ${tags} ${node.type ?? ''}`),
+      value: searchableNodeValue(node),
     };
+    record.searchText = defaultSearchText(node, record);
+    record.filterText = defaultFilterText(node, record);
+    return record;
   });
 
   return { nodes, idToIndex, childrenByParent, parentById, roots, pathById, records };
@@ -47,7 +51,7 @@ export function searchWorkerTree(state, query, { fields = ['label', 'id', 'path'
   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));
+    const matches = defaultFields ? record.searchText.includes(q) : fields.some((field) => searchFieldValue(record, field).includes(q));
     if (!matches) continue;
     results.push(record.id);
     if (results.length >= limit) break;
@@ -115,7 +119,7 @@ export function getIncludedIdsForQuery(state, query, candidateIds = null) {
   const records = candidateIds ? idsToRecords(state, candidateIds) : state.records;
 
   for (const record of records) {
-    if (!record.searchText.includes(q)) continue;
+    if (!(record.filterText ?? record.searchText).includes(q)) continue;
     matchingIds.push(record.id);
     let id = record.id;
     while (id !== null && id !== undefined && !includedIds.has(id)) {
@@ -152,3 +156,50 @@ function columnValue(node, columnId) {
 function normalize(value) {
   return String(value ?? '').toLowerCase();
 }
+
+function searchFieldValue(record, field) {
+  if (field === 'id') return normalize(record.searchId || record.id);
+  return normalize(record[field]);
+}
+
+function searchableNodeId(node) {
+  if (node?.data?.inspector) return node.data.key ?? node.label ?? node.id;
+  return node?.id ?? '';
+}
+
+function searchableNodeValue(node) {
+  if (!node?.data?.inspector) return '';
+  return node.data.valueText ?? node.data.value ?? '';
+}
+
+function defaultSearchText(node, record) {
+  if (node?.data?.inspector) {
+    const data = node.data;
+    return normalize([
+      record.searchId,
+      node.label ?? '',
+      data.key ?? '',
+      data.valueText ?? '',
+      data.valueType ?? '',
+      record.tags,
+      record.type,
+    ].join(' '));
+  }
+  return normalize(`${record.searchId} ${record.label} ${record.path} ${record.tags} ${record.type}`);
+}
+
+function defaultFilterText(node, record) {
+  if (node?.data?.inspector) {
+    const data = node.data;
+    return normalize([
+      node.label ?? '',
+      node.type ?? '',
+      data.path ?? '',
+      data.key ?? '',
+      data.valueText ?? '',
+      data.meta?.description ?? '',
+      ...Object.keys(data.meta?.options ?? {}),
+    ].join(' '));
+  }
+  return record.searchText;
+}

package/src/index.d.ts

@@ -62,6 +62,8 @@ export class TreeRowRenderer {
 
 export class TreeViewController {
   canvas?: HTMLCanvasElement;
+  inputController?: TreeViewInputController | null;
+  cellEditor?: CellEditorManager | null;
   viewport: {
     viewportWidth: number;
     viewportHeight: number;
@@ -72,6 +74,10 @@ export class TreeViewController {
   expansion: any;
   selection: any;
   constructor(options?: Record<string, any> & { nativeScrollbars?: boolean });
+  initialize(canvas: HTMLCanvasElement): this;
+  attachCellEditor(options?: { host?: HTMLElement | null }): CellEditorManager;
+  attachInput(options?: { cellEditor?: CellEditorManager | null }): TreeViewInputController;
+  destroy(): void;
   on(type: string, listener: (event: any) => void): any;
   off(type: string, listener: (event: any) => void): void;
   setData(nodes: TreeNode[]): void;
@@ -79,6 +85,7 @@ export class TreeViewController {
   setColumns(columns: Column[]): void;
   setDynamicState(patches: DynamicPatch[]): void;
   setTheme(theme: any): void;
+  setLayoutMetrics(options?: { rowHeight?: number; indentWidth?: number; headerHeight?: number }): void;
   resize(width: number, height: number): void;
   render(time?: number): void;
   renderMeasured(time?: number): any;
@@ -98,12 +105,12 @@ export class TreeViewController {
 }
 
 export class TreeViewInputController {
-  constructor(options?: Record<string, any>);
+  constructor(options: { controller: TreeViewController; cellEditor?: CellEditorManager | null });
   destroy(): void;
 }
 
 export class CellEditorManager {
-  constructor(options?: Record<string, any>);
+  constructor(options: { controller: TreeViewController; host?: HTMLElement | null });
   destroy(): void;
   close(): void;
 }

package/src/input/tree-view-input-controller.js

@@ -1,20 +1,15 @@
 export class TreeViewInputController {
   /**
    * @param {{
-   *   canvas: HTMLCanvasElement,
-   *   viewport: import('../core/tree-view-viewport.js').TreeViewViewport,
-   *   rowModel: import('../core/visible-row-model.js').VisibleRowModel,
-   *   expansion: import('../core/tree-expansion-manager.js').TreeExpansionManager,
-   *   selection: import('../core/selection-manager.js').TreeSelectionManager,
-   *   controller?: import('../tree-view-controller.js').TreeViewController,
-   *   onRowsChanged?: () => void,
-   *   onSelectionChanged?: () => void,
-   *   onHoverChanged?: (id: string | null) => void
+   *   controller: import('../tree-view-controller.js').TreeViewController,
+   *   cellEditor?: import('../inspector/cell-editor-manager.js').CellEditorManager | null
    * }} options
    */
   constructor(options) {
-    Object.assign(this, options);
-    this.anchorRowIndex = null;
+    if (!options?.controller) throw new TypeError('TreeViewInputController requires a TreeViewController');
+    if (!options.controller.canvas) throw new Error('TreeViewInputController requires an initialized TreeViewController canvas');
+    this.controller = options.controller;
+    this.canvas = options.controller.canvas;
     this.hoveredId = null;
     this.resizeDrag = null;
     this.cellEditor = options.cellEditor ?? null;
@@ -44,11 +39,7 @@ export class TreeViewInputController {
   #onWheel = (event) => {
     event.preventDefault();
     this.cellEditor?.close?.();
-    if (this.controller) {
-      this.controller.scrollBy(event.shiftKey ? event.deltaY : event.deltaX, event.deltaY);
-      return;
-    }
-    this.viewport.scrollBy(event.shiftKey ? event.deltaY : event.deltaX, event.deltaY);
+    this.controller.scrollBy(event.shiftKey ? event.deltaY : event.deltaX, event.deltaY);
   };
 
   #onMouseMove = (event) => {
@@ -56,7 +47,7 @@ export class TreeViewInputController {
       const rect = this.canvas.getBoundingClientRect();
       const clientX = event.clientX - rect.left;
       const nextWidth = this.resizeDrag.startWidth + (clientX - this.resizeDrag.startX);
-      this.controller?.resizeColumn(this.resizeDrag.columnId, nextWidth);
+      this.controller.resizeColumn(this.resizeDrag.columnId, nextWidth);
       event.preventDefault();
       return;
     }
@@ -67,19 +58,15 @@ export class TreeViewInputController {
     if (id === this.hoveredId && key === this.hoveredHitKey) return;
     this.hoveredId = id;
     this.hoveredHitKey = key;
-    if (this.controller?.setHoverHit) this.controller.setHoverHit(hit);
-    else this.controller?.setHover(id);
-    this.onHoverChanged?.(id);
+    this.controller.setHoverHit(hit);
   };
 
   #onMouseLeave = () => {
     if (!this.resizeDrag) this.canvas.style.cursor = '';
     this.hoveredId = null;
     this.hoveredHitKey = null;
-    this.controller?.setActiveHit?.(null);
-    if (this.controller?.setHoverHit) this.controller.setHoverHit(null);
-    else this.controller?.setHover(null);
-    this.onHoverChanged?.(null);
+    this.controller.setActiveHit(null);
+    this.controller.setHoverHit(null);
   };
 
   #onClick = (event) => {
@@ -88,43 +75,30 @@ export class TreeViewInputController {
     if (!hit) return;
     if (hit.area === 'header') {
       if (hit.part === 'filter' && this.cellEditor?.handleHeaderClick(event, hit)) return;
-      if (!this.resizeDrag && hit.part === 'label' && hit.column) this.controller?.sortBy(hit.column.id);
+      if (!this.resizeDrag && hit.part === 'label' && hit.column) this.controller.sortBy(hit.column.id);
       return;
     }
     if (hit.part === 'chevron' && hit.row.hasChildren) {
-      if (this.controller) {
-        this.controller.toggle(hit.row.nodeId);
-        this.onRowsChanged?.();
-        return;
-      }
-      this.expansion.toggle(hit.row.nodeId);
-      this.rowModel.rebuild();
-      this.viewport.setContentSize(this.rowModel.contentWidth, this.rowModel.contentHeight);
-      this.onRowsChanged?.();
+      this.controller.toggle(hit.row.nodeId);
       return;
     }
     if (this.cellEditor?.handleClick(event, hit)) return;
-    if (this.controller) {
-      this.controller.clickNode(hit.row.nodeId, {
-        shiftKey: event.shiftKey,
-        ctrlKey: event.ctrlKey,
-        metaKey: event.metaKey,
-        multi: this.canvas.dataset.multi === 'true',
-      });
-      this.onSelectionChanged?.();
-      return;
-    }
-    this.#selectRow(hit.row.rowIndex, event);
+    this.controller.clickNode(hit.row.nodeId, {
+      shiftKey: event.shiftKey,
+      ctrlKey: event.ctrlKey,
+      metaKey: event.metaKey,
+      multi: this.canvas.dataset.multi === 'true',
+    });
   };
 
   #onDoubleClick = (event) => {
     const hit = this.#hitTest(event);
-    if (hit?.area === 'row') this.controller?.doubleClickNode(hit.row.nodeId, event);
+    if (hit?.area === 'row') this.controller.doubleClickNode(hit.row.nodeId, event);
   };
 
   #onMouseDown = (event) => {
     const hit = this.#hitTest(event);
-    this.controller?.setActiveHit?.(hit);
+    this.controller.setActiveHit(hit);
     if (this.cellEditor?.handlePointerDown(event, hit)) {
       event.preventDefault();
       return;
@@ -143,103 +117,20 @@ export class TreeViewInputController {
   #onMouseUp = () => {
     this.resizeDrag = null;
     this.canvas.style.cursor = '';
-    this.controller?.setActiveHit?.(null);
+    this.controller.setActiveHit(null);
   };
 
   #onKeyDown = (event) => {
-    if (this.controller?.handleKey(event)) {
+    if (this.controller.handleKey(event)) {
       event.preventDefault();
-      this.onSelectionChanged?.();
-      return;
-    }
-    if (!this.rowModel.rows.length) return;
-    const currentRow = this.#focusedRowIndex();
-    let target = currentRow;
-    if (event.key === 'ArrowDown') target = Math.min(this.rowModel.rows.length - 1, currentRow + 1);
-    else if (event.key === 'ArrowUp') target = Math.max(0, currentRow - 1);
-    else if (event.key === 'Home') target = 0;
-    else if (event.key === 'End') target = this.rowModel.rows.length - 1;
-    else if (event.key === 'ArrowRight') {
-      const row = this.rowModel.getRow(currentRow);
-      if (row?.hasChildren && !row.expanded) this.#toggleAndRebuild(row.nodeId);
-      else if (row?.expanded) target = Math.min(this.rowModel.rows.length - 1, currentRow + 1);
-    } else if (event.key === 'ArrowLeft') {
-      const row = this.rowModel.getRow(currentRow);
-      if (row?.expanded) this.#toggleAndRebuild(row.nodeId);
-      else {
-        const node = row ? this.rowModel.model.index.getNode(row.nodeId) : null;
-        const parentRow = node?.parentId ? this.rowModel.getRowById(node.parentId) : null;
-        if (parentRow) target = parentRow.rowIndex;
-      }
-    } else if (event.key === 'Enter' || event.key === ' ') {
-      const row = this.rowModel.getRow(currentRow);
-      if (row) this.selection.toggle(row.nodeId);
-      this.onSelectionChanged?.();
-      event.preventDefault();
-      return;
-    } else return;
-
-    const row = this.rowModel.getRow(target);
-    if (row) {
-      this.selection.select(row.nodeId);
-      this.anchorRowIndex = target;
-      this.viewport.scrollRowIntoView(target);
-      this.onSelectionChanged?.();
     }
-    event.preventDefault();
   };
 
-  #selectRow(rowIndex, event) {
-    const row = this.rowModel.getRow(rowIndex);
-    if (!row) return;
-    if (event.shiftKey && this.anchorRowIndex !== null) {
-      this.selection.selected.clear();
-      const start = Math.min(this.anchorRowIndex, rowIndex);
-      const end = Math.max(this.anchorRowIndex, rowIndex);
-      for (let i = start; i <= end; i++) this.selection.selected.add(this.rowModel.rows[i].nodeId);
-      this.selection.focused = row.nodeId;
-      this.selection.dispatchEvent(new Event('change'));
-    } else if (event.ctrlKey || event.metaKey || this.canvas.dataset.multi === 'true') {
-      this.selection.toggle(row.nodeId);
-      this.anchorRowIndex = rowIndex;
-    } else {
-      this.selection.select(row.nodeId);
-      this.anchorRowIndex = rowIndex;
-    }
-    this.onSelectionChanged?.();
-  }
-
-  #focusedRowIndex() {
-    if (this.selection.focused) {
-      const row = this.rowModel.getRowById(this.selection.focused);
-      if (row) return row.rowIndex;
-    }
-    return Math.max(0, Math.floor(this.viewport.scrollY / this.rowModel.rowHeight));
-  }
-
-  #toggleAndRebuild(id) {
-    this.expansion.toggle(id);
-    this.rowModel.rebuild();
-    this.viewport.setContentSize(this.rowModel.contentWidth, this.rowModel.contentHeight);
-    this.onRowsChanged?.();
-  }
-
   #hitTest(event) {
     const rect = this.canvas.getBoundingClientRect();
     const clientX = event.clientX - rect.left;
     const clientY = event.clientY - rect.top;
-    if (this.controller) return this.controller.hitTest(clientX, clientY);
-    const x = clientX + this.viewport.scrollX;
-    const y = clientY - (this.viewport.headerHeight ?? 0) + this.viewport.scrollY;
-    if (clientY < (this.viewport.headerHeight ?? 0)) return { area: 'header', part: 'header', x, y: clientY };
-    const rowIndex = Math.floor(y / this.rowModel.rowHeight);
-    const row = this.rowModel.getRow(rowIndex);
-    if (!row) return null;
-    const rowX = row.depth * this.rowModel.indentWidth;
-    const chevronLeft = rowX + 4;
-    const chevronRight = chevronLeft + 18;
-    const part = x >= chevronLeft && x <= chevronRight ? 'chevron' : x <= rowX + 42 ? 'icon' : 'body';
-    return { area: 'row', row, x, y, part };
+    return this.controller.hitTest(clientX, clientY);
   }
 }
 

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

@@ -1,8 +1,10 @@
 export class CellEditorManager {
-  constructor({ controller, canvas, host = null }) {
+  constructor({ controller, host = null }) {
+    if (!controller) throw new TypeError('CellEditorManager requires a TreeViewController');
+    if (!controller.canvas) throw new Error('CellEditorManager requires an initialized TreeViewController canvas');
     this.controller = controller;
-    this.canvas = canvas;
-    this.host = host ?? canvas.parentElement ?? document.body;
+    this.canvas = controller.canvas;
+    this.host = host ?? controller.canvas.parentElement ?? document.body;
     this.overlay = null;
     this.rangeDrag = null;
     this.onMouseMove = this.#onMouseMove.bind(this);
@@ -139,7 +141,7 @@ export class CellEditorManager {
     const rect = this.#clampRectToHost({
       x: headerRect.x + 8,
       y: headerRect.y + 5,
-      width: Math.max(24, Math.min(headerRect.width, this.controller.viewport.viewportWidth) - 16),
+      width: Math.max(24, Math.min(headerRect.width, this.controller.viewport.contentViewportWidth) - 16),
       height: Math.max(20, headerRect.height - 10),
     }, 0);
     const hostRect = this.host.getBoundingClientRect();
@@ -212,7 +214,7 @@ export class CellEditorManager {
   #overlayRect(hit) {
     if (hit.column?.kind !== 'inspectorPane') return this.controller.getCellClientRect(hit);
     const rect = this.controller.getCellClientRect(hit);
-    const visibleWidth = Math.max(1, Math.min(rect.width, this.controller.viewport.viewportWidth));
+    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') {
@@ -225,7 +227,7 @@ export class CellEditorManager {
   #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.viewportWidth));
+      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));

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

@@ -58,9 +58,13 @@ export class TreeRowRenderer {
     const { viewport, columns, theme, sort, headerFilter, filterQuery } = this.scene;
     if (viewport.headerHeight <= 0) return;
     const colors = theme.colors;
+    const visibleWidth = viewport.contentViewportWidth ?? viewport.viewportWidth;
     ctx.save();
     ctx.fillStyle = colors.row;
     ctx.fillRect(0, 0, viewport.viewportWidth, viewport.headerHeight);
+    ctx.beginPath();
+    ctx.rect(0, 0, visibleWidth, viewport.headerHeight);
+    ctx.clip();
     ctx.translate(-viewport.scrollX, 0);
     ctx.font = theme.font;
     ctx.textBaseline = 'middle';
@@ -86,7 +90,7 @@ export class TreeRowRenderer {
     ctx.strokeStyle = colors.border;
     ctx.beginPath();
     ctx.moveTo(0, viewport.headerHeight + 0.5);
-    ctx.lineTo(viewport.viewportWidth, viewport.headerHeight + 0.5);
+    ctx.lineTo(visibleWidth, viewport.headerHeight + 0.5);
     ctx.stroke();
   }
 
@@ -94,7 +98,7 @@ export class TreeRowRenderer {
     const colors = theme.colors;
     const x = column.x + 8;
     const y = 5;
-    const visibleRight = viewport.scrollX + viewport.viewportWidth;
+    const visibleRight = viewport.scrollX + (viewport.contentViewportWidth ?? viewport.viewportWidth);
     const visibleWidth = Math.max(1, Math.min(column.x + column.width, visibleRight) - column.x);
     const width = Math.max(40, visibleWidth - 16);
     const height = Math.max(18, viewport.headerHeight - 10);
@@ -126,9 +130,10 @@ export class TreeRowRenderer {
   #drawRows(ctx) {
     const { rows, visibleRange, viewport } = this.scene;
     this.renderedRows = visibleRange.count;
+    const visibleWidth = viewport.contentViewportWidth ?? viewport.viewportWidth;
     ctx.save();
     ctx.beginPath();
-    ctx.rect(0, viewport.headerHeight, viewport.viewportWidth, viewport.rowViewportHeight);
+    ctx.rect(0, viewport.headerHeight, visibleWidth, viewport.rowViewportHeight);
     ctx.clip();
     ctx.translate(-viewport.scrollX, viewport.headerHeight - viewport.scrollY);
     for (let i = visibleRange.first; i <= visibleRange.last; i++) {
@@ -150,7 +155,7 @@ export class TreeRowRenderer {
     const focused = focusNodeId === row.nodeId;
     const y = row.y;
     const visibleX = viewport.scrollX;
-    const visibleWidth = viewport.viewportWidth;
+    const visibleWidth = viewport.contentViewportWidth ?? viewport.viewportWidth;
 
     ctx.fillStyle = selected ? colors.rowSelected : highlighted ? colors.rowHighlighted : hovered ? colors.rowHover : colors.row;
     ctx.fillRect(visibleX, y, visibleWidth, row.height);
@@ -209,7 +214,7 @@ export class TreeRowRenderer {
   }
 
   #drawInspectorPaneCell(ctx, { node, row, rect, theme, style, hovered, hoverPart, activePart }) {
-    const visibleRight = this.scene.viewport.scrollX + this.scene.viewport.viewportWidth;
+    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) };
     const data = node.data ?? {};
     const colors = theme.colors;

package/src/tree-view-controller.js

@@ -12,7 +12,9 @@ import {
   TreeViewViewport,
   VisibleRowModel,
 } from './core/index.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';
 import { TreeRowRenderer } from './renderers/index.js';
 
 export class TreeViewController {
@@ -58,12 +60,19 @@ export class TreeViewController {
     this.workerRevision = 0;
     this.sortValueSnapshot = null;
     this.inspector = null;
+    this.inputController = null;
+    this.cellEditor = null;
     this.scene = this.createRenderScene();
 
     if (options.canvas) this.initialize(options.canvas);
+    if (options.editable !== false && (options.host || options.editable)) this.attachCellEditor({ host: options.host });
+    if (options.canvas && options.input !== false) this.attachInput();
   }
 
   initialize(canvas) {
+    if (!canvas || typeof canvas.getContext !== 'function') {
+      throw new TypeError('TreeViewController.initialize requires an HTMLCanvasElement');
+    }
     this.canvas = canvas;
     this.renderer.initialize(canvas);
     this.renderer.setScene(this.scene);
@@ -73,6 +82,39 @@ export class TreeViewController {
     return this;
   }
 
+  attachCellEditor(options = {}) {
+    if (!this.canvas) throw new Error('TreeViewController.attachCellEditor requires an initialized canvas');
+    this.cellEditor?.destroy?.();
+    this.cellEditor = new CellEditorManager({
+      controller: this,
+      host: options.host,
+    });
+    return this.cellEditor;
+  }
+
+  attachInput(options = {}) {
+    if (!this.canvas) throw new Error('TreeViewController.attachInput requires an initialized canvas');
+    this.inputController?.destroy?.();
+    this.inputController = new TreeViewInputController({
+      controller: this,
+      cellEditor: options.cellEditor ?? this.cellEditor,
+    });
+    return this.inputController;
+  }
+
+  destroy() {
+    this.inputController?.destroy?.();
+    this.cellEditor?.destroy?.();
+    this.disableWorkers();
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.#nativeScroll?.destroy?.();
+    this.#nativeScroll = null;
+    this.inputController = null;
+    this.cellEditor = null;
+    this.canvas = null;
+  }
+
   on(type, listener) {
     return this.events.on(type, listener);
   }
@@ -287,6 +329,24 @@ export class TreeViewController {
     this.events.emit('themechange', { theme: nextTheme });
   }
 
+  setLayoutMetrics(options = {}) {
+    const rowHeight = options.rowHeight ?? this.rowModel.rowHeight;
+    const indentWidth = options.indentWidth ?? this.rowModel.indentWidth;
+    const headerHeight = options.headerHeight ?? this.viewport.headerHeight;
+    assertPositiveNumber(rowHeight, 'rowHeight');
+    assertPositiveNumber(indentWidth, 'indentWidth');
+    assertNonNegativeNumber(headerHeight, 'headerHeight');
+    const rowsChanged = this.rowModel.rowHeight !== rowHeight || this.rowModel.indentWidth !== indentWidth;
+    this.rowModel.rowHeight = rowHeight;
+    this.rowModel.indentWidth = indentWidth;
+    this.viewport.rowHeight = rowHeight;
+    this.viewport.indentWidth = indentWidth;
+    this.viewport.headerHeight = headerHeight;
+    if (rowsChanged) this.#rebuildRows();
+    else this.#syncContentSize();
+    this.events.emit('layoutchange', this.getViewportState());
+  }
+
   registerIcon(name, imageOrUrl) {
     return this.iconRegistry.register(name, imageOrUrl);
   }
@@ -640,6 +700,7 @@ export class TreeViewController {
     const localX = clientX - (this.viewport.renderInsetX ?? 0);
     const localY = clientY - (this.viewport.renderInsetY ?? 0);
     if (localX < 0 || localY < 0) return null;
+    if (localX >= this.viewport.contentViewportWidth) return null;
     const x = localX + this.viewport.scrollX;
     if (localY < this.viewport.headerHeight) {
       const resizeColumn = this.columnModel.getResizeHandleAt(x);
@@ -651,6 +712,7 @@ export class TreeViewController {
       return column ? { area: 'header', part: 'label', column, x, y: localY } : { area: 'header', part: 'header', column: null, x, y: localY };
     }
 
+    if (localY >= this.viewport.headerHeight + this.viewport.rowViewportHeight) return null;
     const rowY = localY - this.viewport.headerHeight + this.viewport.scrollY;
     const rowIndex = Math.floor(rowY / this.rowModel.rowHeight);
     const row = this.rowModel.getRow(rowIndex);
@@ -716,7 +778,7 @@ export class TreeViewController {
   }
 
   #visibleInspectorPaneWidth(column) {
-    return Math.max(1, Math.min(column.width, this.viewport.scrollX + this.viewport.viewportWidth - column.x));
+    return Math.max(1, Math.min(column.width, this.viewport.scrollX + this.viewport.contentViewportWidth - column.x));
   }
 
   getInspectorPaneLayout(width, row = null, editorType = '') {
@@ -737,10 +799,11 @@ export class TreeViewController {
   getHeaderClientRect(hit) {
     if (!hit?.column || !this.canvas) return { x: 0, y: 0, width: 0, height: 0 };
     const rect = this.canvas.getBoundingClientRect();
+    const visibleWidth = Math.max(0, this.viewport.contentViewportWidth - Math.max(0, hit.column.x - this.viewport.scrollX));
     return {
       x: rect.left + (this.viewport.renderInsetX ?? 0) + hit.column.x - this.viewport.scrollX,
       y: rect.top + (this.viewport.renderInsetY ?? 0),
-      width: hit.column.width,
+      width: Math.min(hit.column.width, visibleWidth || hit.column.width),
       height: this.viewport.headerHeight,
     };
   }
@@ -838,7 +901,9 @@ export class TreeViewController {
   }
 
   #syncContentSize() {
-    if (this.viewport.viewportWidth > 1) this.#fitInspectorPaneColumn(this.viewport.viewportWidth);
+    this.#syncScrollbarState(this.columnModel.contentWidth, this.rowModel.contentHeight);
+    if (this.viewport.viewportWidth > 1) this.#fitInspectorPaneColumn(this.viewport.contentViewportWidth);
+    this.#syncScrollbarState(this.columnModel.contentWidth, this.rowModel.contentHeight);
     this.viewport.setContentSize(this.columnModel.contentWidth, this.rowModel.contentHeight);
   }
 
@@ -913,12 +978,13 @@ export class TreeViewController {
     applyNativeScrollbarTheme([vertical, horizontal, corner], this.themeManager.get());
 
     const size = nativeScrollbarSize();
+    this.#nativeScrollbarSize = size;
     Object.assign(vertical.style, {
       position: 'absolute',
-      top: `${this.viewport.headerHeight}px`,
-      right: '0',
-      bottom: '0',
+      top: '0',
+      left: '0',
       width: `${size}px`,
+      height: '1px',
       overflowX: 'hidden',
       overflowY: 'auto',
       zIndex: '4',
@@ -926,8 +992,8 @@ export class TreeViewController {
     Object.assign(horizontal.style, {
       position: 'absolute',
       left: '0',
-      right: '0',
-      bottom: '0',
+      top: '0',
+      width: '1px',
       height: `${size}px`,
       overflowX: 'auto',
       overflowY: 'hidden',
@@ -935,8 +1001,8 @@ export class TreeViewController {
     });
     Object.assign(corner.style, {
       position: 'absolute',
-      right: '0',
-      bottom: '0',
+      left: '0',
+      top: '0',
       width: `${size}px`,
       height: `${size}px`,
       zIndex: '4',
@@ -958,17 +1024,24 @@ export class TreeViewController {
 
     let syncing = false;
     const sync = () => {
-      const maxX = Math.max(0, this.viewport.contentWidth - this.viewport.viewportWidth);
+      this.#syncScrollbarState(this.viewport.contentWidth, this.viewport.contentHeight);
+      const maxX = Math.max(0, this.viewport.contentWidth - this.viewport.contentViewportWidth);
       const maxY = Math.max(0, this.viewport.contentHeight - this.viewport.rowViewportHeight);
       const showX = maxX > 0;
       const showY = maxY > 0;
+      const canvasMetrics = this.#canvasHostMetrics();
 
       vertical.style.display = showY ? 'block' : 'none';
       horizontal.style.display = showX ? 'block' : 'none';
       corner.style.display = showX && showY ? 'block' : 'none';
-      vertical.style.bottom = showX ? `${size}px` : '0';
-      horizontal.style.right = showY ? `${size}px` : '0';
-      vertical.style.top = `${this.viewport.headerHeight}px`;
+      vertical.style.left = `${canvasMetrics.left + canvasMetrics.width - size}px`;
+      vertical.style.top = `${canvasMetrics.top + this.viewport.headerHeight}px`;
+      vertical.style.height = `${Math.max(1, canvasMetrics.height - this.viewport.headerHeight - (showX ? size : 0))}px`;
+      horizontal.style.left = `${canvasMetrics.left}px`;
+      horizontal.style.top = `${canvasMetrics.top + canvasMetrics.height - size}px`;
+      horizontal.style.width = `${Math.max(1, canvasMetrics.width - (showY ? size : 0))}px`;
+      corner.style.left = `${canvasMetrics.left + canvasMetrics.width - size}px`;
+      corner.style.top = `${canvasMetrics.top + canvasMetrics.height - size}px`;
 
       verticalSpacer.style.height = `${Math.ceil(maxY + vertical.clientHeight)}px`;
       horizontalSpacer.style.width = `${Math.ceil(maxX + horizontal.clientWidth)}px`;
@@ -1005,11 +1078,37 @@ export class TreeViewController {
         vertical.remove();
         horizontal.remove();
         corner.remove();
+        this.#nativeScrollbarSize = 0;
+        this.viewport.setScrollbarState({ size: 0, vertical: false, horizontal: false });
         if (hostPositionChanged) host.style.position = previousHostPosition;
       },
     };
   }
 
+  #syncScrollbarState(contentWidth, contentHeight) {
+    const size = this.nativeScrollbars ? this.#nativeScrollbarSize : 0;
+    if (!size) {
+      this.viewport.setScrollbarState({ size: 0, vertical: false, horizontal: false });
+      return;
+    }
+    let availableWidth = this.viewport.viewportWidth;
+    let availableRowHeight = Math.max(1, this.viewport.viewportHeight - this.viewport.headerHeight);
+    let showY = contentHeight > availableRowHeight;
+    let showX = contentWidth > availableWidth;
+    if (showY && contentWidth > Math.max(1, availableWidth - size)) showX = true;
+    if (showX && contentHeight > Math.max(1, availableRowHeight - size)) showY = true;
+    this.viewport.setScrollbarState({ size, vertical: showY, horizontal: showX });
+  }
+
+  #canvasHostMetrics() {
+    if (!this.canvas) return { left: 0, top: 0, width: this.viewport.viewportWidth, height: this.viewport.viewportHeight };
+    const left = Number.isFinite(this.canvas.offsetLeft) ? this.canvas.offsetLeft : 0;
+    const top = Number.isFinite(this.canvas.offsetTop) ? this.canvas.offsetTop : 0;
+    const width = Math.max(1, Math.floor(this.canvas.clientWidth || this.canvas.getBoundingClientRect?.().width || this.viewport.viewportWidth));
+    const height = Math.max(1, Math.floor(this.canvas.clientHeight || this.canvas.getBoundingClientRect?.().height || this.viewport.viewportHeight));
+    return { left, top, width, height };
+  }
+
   #computeInspectorPaneLabelEnd(visibleRange) {
     const column = this.columnModel.columns.find((item) => item.kind === 'inspectorPane');
     if (!column) return 0;
@@ -1073,6 +1172,7 @@ export class TreeViewController {
 
   #resizeObserver = null;
   #nativeScroll = null;
+  #nativeScrollbarSize = 0;
 }
 
 const NATIVE_SCROLLBAR_STYLE_ID = 'virtual-tree-canvas-native-scrollbar-style';
@@ -1201,6 +1301,18 @@ function nativeScrollbarSize() {
   return size;
 }
 
+function assertPositiveNumber(value, name) {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
+    throw new TypeError(`${name} must be a positive number`);
+  }
+}
+
+function assertNonNegativeNumber(value, name) {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value < 0) {
+    throw new TypeError(`${name} must be a non-negative number`);
+  }
+}
+
 function inspectorPaneLayout(width, depth = 0, indentWidth = 18, editorType = '', labelEnd = 0) {
   const safeWidth = Math.max(1, width);
   const rightPadding = 14;