virtual-tree-canvas 0.1.0

package/src/core/viewport.js

@@ -0,0 +1,66 @@
+export class TreeViewport extends EventTarget {
+  constructor() {
+    super();
+    this.x = 0;
+    this.y = 0;
+    this.zoom = 1;
+    this.width = 1;
+    this.height = 1;
+    this.minZoom = 0.08;
+    this.maxZoom = 4;
+  }
+
+  resize(width, height) {
+    this.width = Math.max(1, width);
+    this.height = Math.max(1, height);
+    this.dispatchEvent(new Event('change'));
+  }
+
+  pan(dx, dy) {
+    this.x += dx / this.zoom;
+    this.y += dy / this.zoom;
+    this.dispatchEvent(new Event('change'));
+  }
+
+  zoomAt(screenX, screenY, factor) {
+    const before = this.screenToWorld(screenX, screenY);
+    this.zoom = clamp(this.zoom * factor, this.minZoom, this.maxZoom);
+    const after = this.screenToWorld(screenX, screenY);
+    this.x += before.x - after.x;
+    this.y += before.y - after.y;
+    this.dispatchEvent(new Event('change'));
+  }
+
+  focus(bounds) {
+    this.x = bounds.x + bounds.width / 2 - this.width / (2 * this.zoom);
+    this.y = bounds.y + bounds.height / 2 - this.height / (2 * this.zoom);
+    this.dispatchEvent(new Event('change'));
+  }
+
+  getWorldBounds(padding = 120) {
+    return {
+      x: this.x - padding / this.zoom,
+      y: this.y - padding / this.zoom,
+      width: this.width / this.zoom + (padding * 2) / this.zoom,
+      height: this.height / this.zoom + (padding * 2) / this.zoom,
+    };
+  }
+
+  screenToWorld(screenX, screenY) {
+    return {
+      x: this.x + screenX / this.zoom,
+      y: this.y + screenY / this.zoom,
+    };
+  }
+
+  worldToScreen(worldX, worldY) {
+    return {
+      x: (worldX - this.x) * this.zoom,
+      y: (worldY - this.y) * this.zoom,
+    };
+  }
+}
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}

package/src/core/visible-row-model.js

@@ -0,0 +1,137 @@
+/**
+ * @typedef {Object} TreeRow
+ * @property {string} nodeId
+ * @property {number} nodeIndex
+ * @property {number} depth
+ * @property {number} rowIndex
+ * @property {number} y
+ * @property {number} height
+ * @property {boolean} expanded
+ * @property {boolean} hasChildren
+ */
+
+export class VisibleRowModel extends EventTarget {
+  /**
+   * @param {{
+   *   model: import('./tree-model.js').TreeModel,
+   *   expansion: import('./tree-expansion-manager.js').TreeExpansionManager,
+   *   rowHeight?: number,
+   *   indentWidth?: number
+   * }} options
+   */
+  constructor({ model, expansion, rowHeight = 28, indentWidth = 18 }) {
+    super();
+    this.model = model;
+    this.expansion = expansion;
+    this.rowHeight = rowHeight;
+    this.indentWidth = indentWidth;
+    /** @type {TreeRow[]} */
+    this.rows = [];
+    /** @type {Map<string, number>} */
+    this.rowIndexById = new Map();
+    this.contentWidth = 0;
+    this.contentHeight = 0;
+    this.sortComparator = null;
+    this.filterPredicate = null;
+  }
+
+  setSortComparator(comparator) {
+    this.sortComparator = comparator;
+  }
+
+  setFilterPredicate(predicate) {
+    this.filterPredicate = predicate;
+  }
+
+  applyRows({ rows, contentHeight, contentWidth }) {
+    this.rows = rows;
+    this.rowIndexById.clear();
+    for (const row of rows) this.rowIndexById.set(row.nodeId, row.rowIndex);
+    this.contentHeight = contentHeight;
+    this.contentWidth = contentWidth;
+    this.dispatchEvent(new Event('change'));
+  }
+
+  rebuild() {
+    this.rows = [];
+    this.rowIndexById.clear();
+    let maxDepth = 0;
+    const includeCache = new Map();
+
+    const subtreeIncluded = (id) => {
+      if (!this.filterPredicate) return true;
+      if (includeCache.has(id)) return includeCache.get(id);
+      const node = this.model.index.getNode(id);
+      const state = this.model.dynamicState.get(id) ?? {};
+      const ownMatch = node ? this.filterPredicate(node, state) : false;
+      const childMatch = this.model.index.getChildren(id).some((childId) => subtreeIncluded(childId));
+      const included = ownMatch || childMatch;
+      includeCache.set(id, included);
+      return included;
+    };
+
+    const sortedChildren = (id) => {
+      const children = this.model.index.getChildren(id).filter((childId) => subtreeIncluded(childId));
+      if (!this.sortComparator) return children;
+      return children.slice().sort((aId, bId) => {
+        const a = this.model.index.getNode(aId);
+        const b = this.model.index.getNode(bId);
+        return this.sortComparator(a, b, aId, bId);
+      });
+    };
+
+    const visit = (id, depth) => {
+      if (!subtreeIncluded(id)) return;
+      const nodeIndex = this.model.index.idToIndex.get(id);
+      if (nodeIndex === undefined) return;
+      const hasChildren = this.expansion.hasChildren(id);
+      const expanded = this.expansion.isExpanded(id);
+      const rowIndex = this.rows.length;
+      this.rows.push({
+        nodeId: id,
+        nodeIndex,
+        depth,
+        rowIndex,
+        y: rowIndex * this.rowHeight,
+        height: this.rowHeight,
+        expanded,
+        hasChildren,
+      });
+      this.rowIndexById.set(id, rowIndex);
+      maxDepth = Math.max(maxDepth, depth);
+      if (!expanded && !this.filterPredicate) return;
+      for (const childId of sortedChildren(id)) visit(childId, depth + 1);
+    };
+
+    const roots = this.model.index.roots.filter((rootId) => subtreeIncluded(rootId));
+    if (this.sortComparator) {
+      roots.sort((aId, bId) => this.sortComparator(this.model.index.getNode(aId), this.model.index.getNode(bId), aId, bId));
+    }
+    for (const rootId of roots) visit(rootId, 0);
+    this.contentHeight = this.rows.length * this.rowHeight;
+    this.contentWidth = Math.max(640, (maxDepth + 1) * this.indentWidth + 520);
+    this.dispatchEvent(new Event('change'));
+  }
+
+  /** @param {string} id */
+  getRowById(id) {
+    const rowIndex = this.rowIndexById.get(id);
+    return rowIndex === undefined ? null : this.rows[rowIndex];
+  }
+
+  /** @param {number} rowIndex */
+  getRow(rowIndex) {
+    return this.rows[rowIndex] ?? null;
+  }
+
+  /**
+   * @param {import('./tree-view-viewport.js').TreeViewViewport} viewport
+   * @param {number} overscan
+   */
+  getVisibleRange(viewport, overscan = 6) {
+    const rowViewportHeight = viewport.rowViewportHeight ?? viewport.viewportHeight;
+    const first = Math.max(0, Math.floor(viewport.scrollY / this.rowHeight) - overscan);
+    const last = Math.min(this.rows.length - 1, Math.ceil((viewport.scrollY + rowViewportHeight) / this.rowHeight) + overscan);
+    return { first, last, count: last >= first ? last - first + 1 : 0 };
+  }
+}

package/src/index.js

@@ -0,0 +1,6 @@
+export * from './core/index.js';
+export * from './input/index.js';
+export * from './inspector/index.js';
+export * from './renderers/index.js';
+export * from './tree-view-controller.js';
+export * from './benchmark/index.js';

package/src/input/index.js

@@ -0,0 +1,2 @@
+export * from './pointer-controller.js';
+export * from './tree-view-input-controller.js';

package/src/input/pointer-controller.js

@@ -0,0 +1,66 @@
+export class PointerController {
+  constructor({ canvas, viewport, renderer, onHover, onClick }) {
+    this.canvas = canvas;
+    this.viewport = viewport;
+    this.renderer = renderer;
+    this.onHover = onHover;
+    this.onClick = onClick;
+    this.dragging = false;
+    this.lastX = 0;
+    this.lastY = 0;
+    this.downX = 0;
+    this.downY = 0;
+
+    canvas.addEventListener('pointerdown', this.#onPointerDown);
+    canvas.addEventListener('pointermove', this.#onPointerMove);
+    canvas.addEventListener('pointerup', this.#onPointerUp);
+    canvas.addEventListener('pointercancel', this.#onPointerUp);
+    canvas.addEventListener('wheel', this.#onWheel, { passive: false });
+  }
+
+  destroy() {
+    this.canvas.removeEventListener('pointerdown', this.#onPointerDown);
+    this.canvas.removeEventListener('pointermove', this.#onPointerMove);
+    this.canvas.removeEventListener('pointerup', this.#onPointerUp);
+    this.canvas.removeEventListener('pointercancel', this.#onPointerUp);
+    this.canvas.removeEventListener('wheel', this.#onWheel);
+  }
+
+  #onPointerDown = (event) => {
+    this.dragging = true;
+    this.lastX = event.clientX;
+    this.lastY = event.clientY;
+    this.downX = event.clientX;
+    this.downY = event.clientY;
+    this.canvas.setPointerCapture(event.pointerId);
+  };
+
+  #onPointerMove = (event) => {
+    const rect = this.canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    if (this.dragging && event.buttons === 1) {
+      this.viewport.pan(this.lastX - event.clientX, this.lastY - event.clientY);
+    }
+    this.lastX = event.clientX;
+    this.lastY = event.clientY;
+    const world = this.viewport.screenToWorld(x, y);
+    this.onHover?.(this.renderer.pick?.(world.x, world.y) ?? null);
+  };
+
+  #onPointerUp = (event) => {
+    const moved = Math.hypot(event.clientX - this.downX, event.clientY - this.downY);
+    this.dragging = false;
+    const rect = this.canvas.getBoundingClientRect();
+    const world = this.viewport.screenToWorld(event.clientX - rect.left, event.clientY - rect.top);
+    const id = this.renderer.pick?.(world.x, world.y) ?? null;
+    if (id && moved < 4) this.onClick?.(id, event);
+  };
+
+  #onWheel = (event) => {
+    event.preventDefault();
+    const rect = this.canvas.getBoundingClientRect();
+    const factor = Math.exp(-event.deltaY * 0.0012);
+    this.viewport.zoomAt(event.clientX - rect.left, event.clientY - rect.top, factor);
+  };
+}

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

@@ -0,0 +1,235 @@
+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
+   * }} options
+   */
+  constructor(options) {
+    Object.assign(this, options);
+    this.anchorRowIndex = null;
+    this.hoveredId = null;
+    this.resizeDrag = null;
+    this.cellEditor = options.cellEditor ?? null;
+    this.canvas.tabIndex = 0;
+
+    this.canvas.addEventListener('wheel', this.#onWheel, { passive: false });
+    this.canvas.addEventListener('mousedown', this.#onMouseDown);
+    this.canvas.addEventListener('mousemove', this.#onMouseMove);
+    window.addEventListener('mouseup', this.#onMouseUp);
+    this.canvas.addEventListener('mouseleave', this.#onMouseLeave);
+    this.canvas.addEventListener('click', this.#onClick);
+    this.canvas.addEventListener('dblclick', this.#onDoubleClick);
+    this.canvas.addEventListener('keydown', this.#onKeyDown);
+  }
+
+  destroy() {
+    this.canvas.removeEventListener('wheel', this.#onWheel);
+    this.canvas.removeEventListener('mousedown', this.#onMouseDown);
+    this.canvas.removeEventListener('mousemove', this.#onMouseMove);
+    window.removeEventListener('mouseup', this.#onMouseUp);
+    this.canvas.removeEventListener('mouseleave', this.#onMouseLeave);
+    this.canvas.removeEventListener('click', this.#onClick);
+    this.canvas.removeEventListener('dblclick', this.#onDoubleClick);
+    this.canvas.removeEventListener('keydown', this.#onKeyDown);
+  }
+
+  #onWheel = (event) => {
+    event.preventDefault();
+    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);
+  };
+
+  #onMouseMove = (event) => {
+    if (this.resizeDrag) {
+      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);
+      event.preventDefault();
+      return;
+    }
+    const hit = this.#hitTest(event);
+    this.canvas.style.cursor = hit?.area === 'header' && hit.part === 'resize' ? 'col-resize' : '';
+    const id = hit?.row?.nodeId ?? null;
+    if (id === this.hoveredId) return;
+    this.hoveredId = id;
+    this.controller?.setHover(id);
+    this.onHoverChanged?.(id);
+  };
+
+  #onMouseLeave = () => {
+    if (!this.resizeDrag) this.canvas.style.cursor = '';
+    this.hoveredId = null;
+    this.controller?.setHover(null);
+    this.onHoverChanged?.(null);
+  };
+
+  #onClick = (event) => {
+    this.canvas.focus();
+    const hit = this.#hitTest(event);
+    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);
+      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?.();
+      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);
+  };
+
+  #onDoubleClick = (event) => {
+    const hit = this.#hitTest(event);
+    if (hit?.area === 'row') this.controller?.doubleClickNode(hit.row.nodeId, event);
+  };
+
+  #onMouseDown = (event) => {
+    const hit = this.#hitTest(event);
+    if (this.cellEditor?.handlePointerDown(event, hit)) {
+      event.preventDefault();
+      return;
+    }
+    if (hit?.area !== 'header' || hit.part !== 'resize' || !hit.column) return;
+    const rect = this.canvas.getBoundingClientRect();
+    this.resizeDrag = {
+      columnId: hit.column.id,
+      startX: event.clientX - rect.left,
+      startWidth: hit.column.width,
+    };
+    this.canvas.style.cursor = 'col-resize';
+    event.preventDefault();
+  };
+
+  #onMouseUp = () => {
+    this.resizeDrag = null;
+    this.canvas.style.cursor = '';
+  };
+
+  #onKeyDown = (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 };
+  }
+}