virtual-tree-canvas 0.3.5 → 0.3.6

package/package.json

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

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);

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);
   }
@@ -1201,6 +1261,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;