virtual-tree-canvas 0.5.0 → 0.7.0

package/src/tree-view-controller.js

@@ -1,3 +1,9 @@
+import { treeCellLayout } from './core/tree-cell-layout.js';
+import { inspectorPaneLayout } from './inspector/pane-layout.js';
+import { RowActions } from './input/row-actions.js';
+import { validateTreeViewOptions } from './core/view-options.js';
+import { RowReorderInput } from './input/row-reorder-input.js';
+import { TreeTooltip } from './input/tree-tooltip.js';
 import {
   EventEmitter,
   IconRegistry,
@@ -14,12 +20,17 @@ import {
 } from './core/index.js';
 import { numericLayout } from './inspector/numeric-layout.js';
 import { CellEditorManager } from './inspector/cell-editor-manager.js';
-import { formatInspectorValue, getAtPath, inspectorColumns, inspectorPaneColumns, ModelInspectorBuilder, setAtPath } from './inspector/index.js';
+import { formatInspectorValue, getAtPath, inspectorNodeId, 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 {
   constructor(options = {}) {
+    validateTreeViewOptions(options);
+    this.layoutOverrides = { rowHeight: options.rowHeight, indentWidth: options.indentWidth };
+    this.rawNodes = new Map();
+    this.editable = options.editable !== false;
+    this.destroyed = false;
     this.events = new EventEmitter();
     this.model = new TreeModel();
     this.expansion = new TreeExpansionManager(this.model);
@@ -37,11 +48,21 @@ export class TreeViewController {
     this.viewport.renderInsetX = options.renderInsetX ?? 0;
     this.viewport.renderInsetY = options.renderInsetY ?? 0;
     this.columnModel = new TreeColumnModel(options.columns);
+    this.rowActions = options.rowActions ?? [];
+    this.rowDrag = options.rowDrag ?? null;
+    this.columnModel.setRowActions(this.rowActions.length);
+    this.rowReorder = Boolean(options.rowReorder);
+    this.columnModel.setRowReorder(this.rowReorder);
+    this.rowDrop = null;
+    this.autoRender = Boolean(options.autoRender);
+    this.renderFrame = null;
+    this.tooltipEnabled = Boolean(options.tooltip);
+    this.host = options.host ?? null;
     this.searchIndex = new TreeSearchIndex();
     this.selection = new TreeSelectionManager();
     this.patchBatcher = new PatchBatcher();
-    this.themeManager = options.themeManager ?? new ThemeManager();
-    this.iconRegistry = options.iconRegistry ?? new IconRegistry();
+    this.themeManager = options.themeManager ?? new ThemeManager(options.theme);
+    this.iconRegistry = options.iconRegistry ?? new IconRegistry({ iconsBaseUrl: options.iconsBaseUrl });
     this.renderer = options.renderer ?? new TreeRowRenderer({ themeManager: this.themeManager, iconRegistry: this.iconRegistry });
     this.nativeScrollbars = options.nativeScrollbars !== false;
     this.initialExpandDepth = options.initialExpandDepth ?? 1;
@@ -64,10 +85,17 @@ export class TreeViewController {
     this.inspector = null;
     this.inputController = null;
     this.cellEditor = null;
+    const initialTheme = this.themeManager.get();
+    this.rowModel.rowHeight = this.viewport.rowHeight = options.rowHeight ?? initialTheme.rowHeight;
+    this.rowModel.indentWidth = this.viewport.indentWidth = options.indentWidth ?? initialTheme.indentWidth;
     this.scene = this.createRenderScene();
+    this.renderer.setInvalidationHandler?.(() => this.requestRender(true));
 
+    for (const type of ['viewportchange', 'columnschange', 'sortchange', 'filterchange', 'themechange', 'layoutchange', 'expand', 'collapse', 'searchchange', 'nodehover', 'selectionchange', 'focuschange', 'rowreorder', 'rowdrag', 'rowreorderchange', 'modelchange']) {
+      this.events.on(type, () => this.requestRender());
+    }
     if (options.canvas) this.initialize(options.canvas);
-    if (options.editable !== false && (options.host || options.editable)) this.attachCellEditor({ host: options.host });
+    if (options.canvas && (options.host || options.editable)) this.attachCellEditor({ host: options.host });
     if (options.canvas && options.input !== false) this.attachInput();
   }
 
@@ -78,9 +106,13 @@ export class TreeViewController {
     this.canvas = canvas;
     this.renderer.initialize(canvas);
     this.renderer.setScene(this.scene);
+    this.actionOverlay?.destroy();
+    this.actionOverlay = canvas.ownerDocument?.createElement && canvas.parentElement ? new RowActions(this) : null;
     this.#resizeToCanvasClientSize();
     this.#observeCanvasSize();
     this.#setupNativeScrollbars();
+    if (this.tooltipEnabled) this.attachTooltip({ host: this.host });
+    this.requestRender();
     return this;
   }
 
@@ -91,12 +123,48 @@ export class TreeViewController {
       controller: this,
       host: options.host,
     });
+    this.cellEditor.setEditable(this.editable);
+    if (this.inputController) this.inputController.cellEditor = this.cellEditor;
     return this.cellEditor;
   }
 
+  setRowActions(actions) {
+    validateTreeViewOptions({ rowActions: actions });
+    this.rowActions = actions;
+    this.columnModel.setRowActions(actions.length);
+    this.columnModel.setRowReorder(this.rowReorder && !this.inspector);
+    this.#syncContentSize();
+    this.requestRender();
+  }
+
+  setRowDrag(resolver) {
+    validateTreeViewOptions({ rowDrag: resolver });
+    this.rowReorderInput?.cancel();
+    this.rowDrag = resolver;
+    this.rowReorderInput?.syncMode();
+  }
+
+  setEditable(enabled) {
+    validateTreeViewOptions({ editable: enabled });
+    if (this.editable === enabled) return;
+    this.editable = enabled;
+    if (!this.cellEditor && this.canvas) this.attachCellEditor({ host: this.host });
+    this.cellEditor?.setEditable(enabled);
+    this.events.emit('editablechange', { editable: enabled });
+    this.requestRender();
+  }
+
+  setInitialExpandDepth(depth) {
+    validateTreeViewOptions({ initialExpandDepth: depth });
+    this.initialExpandDepth = depth;
+  }
+
+
   attachInput(options = {}) {
     if (!this.canvas) throw new Error('TreeViewController.attachInput requires an initialized canvas');
     this.inputController?.destroy?.();
+    this.rowReorderInput?.destroy();
+    this.rowReorderInput = new RowReorderInput(this);
     this.inputController = new TreeViewInputController({
       controller: this,
       cellEditor: options.cellEditor ?? this.cellEditor,
@@ -105,6 +173,13 @@ export class TreeViewController {
   }
 
   destroy() {
+    this.destroyed = true;
+    this.actionOverlay?.destroy();
+    this.rowReorderInput?.destroy();
+    this.rowReorderInput = null;
+    this.tooltip?.destroy();
+    this.tooltip = null;
+    this.cancelRender();
     this.inputController?.destroy?.();
     this.cellEditor?.destroy?.();
     this.disableWorkers();
@@ -116,6 +191,7 @@ export class TreeViewController {
     this.cellEditor = null;
     this.renderer?.destroy?.();
     this.canvas = null;
+    this.events.listeners.clear();
   }
 
   on(type, listener) {
@@ -126,23 +202,162 @@ export class TreeViewController {
     this.events.off(type, listener);
   }
 
-  setData(nodes) {
+  setData(nodes, options = {}) {
+    if (!Array.isArray(nodes)) throw new TypeError('nodes must be an array');
+    validateTreeViewOptions({ iconResolver: options.iconResolver ?? null });
+    const resolved = resolveNodeIcons(nodes, options.iconResolver);
+    this.closeEditor();
+    this.rawNodes = new Map(nodes.map(node => [node.id, node]));
+    nodes = resolved;
+    const preserveExpansion = !this.inspector;
     this.inspector = null;
-    if (this.columnModel.columns.length === 1 && this.columnModel.columns[0]?.kind === 'inspectorPane') {
+    this.columnModel.setRowReorder(this.rowReorder);
+    if (this.columnModel.columns.some(column => column.kind?.startsWith('inspector'))) {
       this.columnModel.setColumns([]);
     }
+    this.#replaceTree(nodes, preserveExpansion);
+    this.searchIndex.rebuild(this.model);
+    this.workerClient?.setData(this.model.nodes);
+    this.#rebuildRows();
+    this.events.emit('datachange', {});
+  }
+
+  #replaceTree(nodes, preserveExpansion) {
+    const branches = preserveExpansion ? this.model.nodes.filter(node => this.expansion.hasChildren(node.id)).map(node => node.id) : [];
+    const expanded = new Set(this.model.expanded);
     this.model.setTree(nodes);
     this.expansion.expandToDepth(this.initialExpandDepth);
+    for (const id of branches) {
+      if (!this.model.index.getNode(id)) continue;
+      if (expanded.has(id)) this.model.expanded.add(id);
+      else this.model.expanded.delete(id);
+    }
+  }
+
+  setIconResolver(resolver) {
+    validateTreeViewOptions({ iconResolver: resolver });
+    if (this.inspector) return;
+    const source = this.model.nodes.map(node => this.rawNodes.get(node.id) ?? node);
+    const nodes = resolveNodeIcons(source, resolver);
+    this.model.nodes = nodes;
+    this.model.index.rebuild(nodes);
     this.searchIndex.rebuild(this.model);
+    this.workerClient?.setData(nodes);
+    this.#rebuildRows();
+  }
+
+  setHeaderFilter(enabled) {
+    if (this.headerFilter !== Boolean(enabled)) this.closeEditor();
+    this.headerFilter = Boolean(enabled);
+    this.requestRender();
+  }
+
+  setInspectorOptions(options = {}) {
+    validateTreeViewOptions(options);
+    if (!this.inspector) return;
+    for (const key of ['filter', 'markUpdated']) {
+      if (options[key] !== undefined) this.inspector.options[key] = options[key];
+    }
+    this.requestRender();
+  }
+
+  setRowReorder(enabled) {
+    validateTreeViewOptions({ rowReorder: enabled });
+    this.rowReorder = Boolean(enabled);
+    this.rowDrop = null;
+    this.columnModel.setRowReorder(this.rowReorder && !this.inspector);
+    this.#syncContentSize();
+    this.events.emit('rowreorderchange', { enabled: this.rowReorder });
+  }
+
+  canReorderRows(nodeId) {
+    return this.rowReorder && !this.inspector && !this.columnModel.sort.direction && !this.rowModel.filterPredicate
+      && (nodeId == null || this.model.index.getNode(nodeId)?.reorderable !== false);
+  }
+
+  getRowOrder(parentId = null) {
+    return this.model.index.getChildren(parentId).slice();
+  }
+
+  moveRow(nodeId, targetIndex, options = {}) {
+    if (!this.canReorderRows(nodeId)) return false;
+    const anchorId = this.rowModel.getRow(this.anchorRowIndex)?.nodeId;
+    const detail = this.model.moveNode(nodeId, targetIndex);
+    if (!detail) return false;
+    this.workerRevision++;
     this.workerClient?.setData(this.model.nodes);
+    this.searchIndex.rebuild(this.model);
     this.#rebuildRows();
+    this.anchorRowIndex = this.rowModel.getRowById(anchorId)?.rowIndex ?? null;
+    this.focusedId = nodeId;
+    this.selection.focused = nodeId;
+    this.cellEditor?.close?.();
+    this.scrollToNode(nodeId);
+    this.events.emit('rowreorder', { ...detail, source: options.source ?? 'api' });
+    this.events.emit('focuschange', { nodeId });
+    return true;
+  }
+
+  moveRowBy(nodeId, offset, options = {}) {
+    const node = this.model.index.getNode(nodeId);
+    if (!node || !Number.isInteger(offset)) return false;
+    const siblings = this.model.index.getChildren(node.parentId ?? null);
+    return this.moveRow(nodeId, siblings.indexOf(nodeId) + offset, options);
+  }
+
+  getRowDropTarget(nodeId, clientX, clientY) {
+    if (!this.canReorderRows(nodeId)) return null;
+    const x = clientX - this.viewport.renderInsetX;
+    const y = clientY - this.viewport.renderInsetY;
+    if (x < 0 || x >= this.viewport.contentViewportWidth || y < this.viewport.headerHeight
+        || y >= this.viewport.headerHeight + this.viewport.rowViewportHeight) return null;
+    const contentY = y - this.viewport.headerHeight + this.viewport.scrollY;
+    const row = this.rowModel.getRow(Math.min(this.rowModel.rows.length - 1, Math.floor(contentY / this.rowModel.rowHeight)));
+    const source = this.model.index.getNode(nodeId);
+    const target = row && this.model.index.getNode(row.nodeId);
+    if (!source || !target || (source.parentId ?? null) !== (target.parentId ?? null)) return null;
+    const siblings = this.model.index.getChildren(source.parentId ?? null);
+    const after = contentY >= row.y + row.height / 2;
+    const from = siblings.indexOf(nodeId);
+    let index = siblings.indexOf(target.id) + Number(after);
+    if (index > from) index--;
+    return index === from ? null : { nodeId, targetId: target.id, index, y: row.y + (after ? row.height : 0) };
+  }
+
+  setRowDrop(target) {
+    this.rowDrop = target;
+    this.events.emit('rowdrag', { target });
+  }
+
+  requestRender(force = false) {
+    if (this.destroyed || (!this.autoRender && !force) || !this.canvas || this.renderFrame !== null) return;
+    const view = this.canvas.ownerDocument?.defaultView ?? globalThis;
+    const schedule = view.requestAnimationFrame?.bind(view) ?? (callback => setTimeout(callback, 0));
+    this.renderFrame = schedule(() => {
+      this.renderFrame = null;
+      if (this.canvas) this.render();
+    });
+  }
+
+  cancelRender() {
+    if (this.renderFrame === null) return;
+    const view = this.canvas?.ownerDocument?.defaultView ?? globalThis;
+    (view.cancelAnimationFrame?.bind(view) ?? clearTimeout)(this.renderFrame);
+    this.renderFrame = null;
+  }
+
+  attachTooltip(options = {}) {
+    this.tooltip?.destroy();
+    this.tooltip = new TreeTooltip({ controller: this, host: options.host ?? this.canvas?.parentElement });
+    return this.tooltip;
   }
 
   setModel(model, meta = {}, options = {}) {
+    validateTreeViewOptions({ ...options, mode: 'inspector', model, meta, presentation: options.presentation ?? options.mode ?? 'table' });
+    this.columnModel.setRowReorder(false);
     const builder = new ModelInspectorBuilder();
     const presentation = options.presentation ?? options.mode ?? 'table';
-    const previousExpanded = new Set(this.model.expanded);
-    const shouldPreserveExpansion = Boolean(this.inspector);
+    const preserveExpansion = Boolean(this.inspector);
     const inspectorOptions = {
       presentation,
       flatRoot: Boolean(options.flatRoot),
@@ -151,17 +366,21 @@ export class TreeViewController {
       markUpdated: options.markUpdated !== false,
     };
     const nodes = builder.build(model, meta, inspectorOptions);
+    const sameLayout = this.inspector?.presentation === presentation &&
+      nodes.length === this.model.nodes.length && nodes.every((node, index) => node.id === this.model.nodes[index].id);
+    if (!sameLayout) this.closeEditor();
+    else this.cellEditor?.reconcile(nodes);
+    this.rawNodes.clear();
     this.inspector = { model, meta, builder, presentation, options: inspectorOptions };
-    this.setColumns(presentation === 'pane' ? inspectorPaneColumns() : inspectorColumns());
-    this.model.setTree(nodes);
-    if (shouldPreserveExpansion) this.#restoreExpansion(previousExpanded);
-    else this.expansion.expandToDepth(this.initialExpandDepth);
+    if (!sameLayout) this.setColumns(presentation === 'pane' ? inspectorPaneColumns() : inspectorColumns());
+    this.#replaceTree(nodes, preserveExpansion);
     this.searchIndex.rebuild(this.model);
     this.#rebuildRows();
+    this.events.emit('datachange', {});
     this.events.emit('modelchange', { model, meta, structural: true });
   }
 
-  updateInspectorValue(nodeId, newValue, editorType = 'unknown') {
+  updateInspectorValue(nodeId, newValue, editorType = 'unknown', options = {}) {
     const node = this.model.index.getNode(nodeId);
     if (!node?.data?.inspector || !this.inspector) return false;
     const data = node.data;
@@ -175,17 +394,25 @@ export class TreeViewController {
     if (this.inspector.options.markUpdated !== false) {
       this.setDynamicState([{ id: nodeId, state: { updated: true } }]);
     }
-    const detail = { path: data.path, oldValue, newValue, nodeId, editorType };
-    this.events.emit('valuechange', detail);
-    this.events.emit('modelchange', { model: this.inspector.model, path: data.path, oldValue, newValue, nodeId });
+    const detail = { path: data.path, oldValue, newValue, nodeId, editorType, model: this.inspector.model, source: options.source ?? 'user' };
+    if (options.emit !== false) {
+      this.events.emit('valuechange', detail);
+      this.events.emit('modelchange', { ...detail });
+    }
+    this.requestRender();
     return true;
   }
 
+  setInspectorValue(path, value, options = {}) {
+    if (typeof path !== 'string') throw new TypeError('path must be a string');
+    return this.updateInspectorValue(inspectorNodeId(path === '$' ? '' : path), value, 'api', { ...options, source: 'api' });
+  }
+
   triggerInspectorAction(nodeId) {
     const node = this.model.index.getNode(nodeId);
     if (!node?.data?.inspector) return false;
     const label = node.data.meta?.button ?? node.label;
-    this.events.emit('action', { path: node.data.path, label, nodeId });
+    this.events.emit('action', { path: node.data.path, label, nodeId, model: this.inspector?.model, source: 'user' });
     return true;
   }
 
@@ -230,7 +457,11 @@ export class TreeViewController {
   }
 
   setColumns(columns) {
+    if (columns == null) columns = this.inspector ? (this.inspector.presentation === 'pane' ? inspectorPaneColumns() : inspectorColumns()) : [];
+    if (!Array.isArray(columns)) throw new TypeError('columns must be an array or null');
+    this.closeEditor();
     this.columnModel.setColumns(columns);
+    this.columnModel.setRowReorder(this.rowReorder && !this.inspector);
     this.#syncContentSize();
     this.events.emit('columnschange', { columns: this.columnModel.columns });
   }
@@ -281,6 +512,8 @@ export class TreeViewController {
   }
 
   setFilter(queryOrPredicate = '', options = {}) {
+    if (typeof queryOrPredicate !== 'string' && typeof queryOrPredicate !== 'function') throw new TypeError('filter must be a string or predicate');
+    if (this.cellEditor?.overlayKind !== 'filter') this.closeEditor();
     this.filterQuery = typeof queryOrPredicate === 'string' ? queryOrPredicate : '';
     this.filterOptions = typeof queryOrPredicate === 'string'
       ? { caseSensitive: Boolean(options.caseSensitive), wholeWord: Boolean(options.wholeWord) }
@@ -320,10 +553,12 @@ export class TreeViewController {
   }
 
   setDynamicState(patches) {
+    if (!Array.isArray(patches)) throw new TypeError('patches must be an array');
     this.lastPatchCount = patches.length;
     this.lastDirtyNodeCount = new Set(patches.map((patch) => patch.id)).size;
     this.model.applyDynamicPatches(patches);
     this.renderer.updateDynamicState(patches);
+    this.requestRender();
   }
 
   setTheme(theme) {
@@ -331,11 +566,10 @@ export class TreeViewController {
     const beforeIndentWidth = this.rowModel.indentWidth;
     this.themeManager.setTheme(theme);
     const nextTheme = this.themeManager.get();
-    this.rowModel.rowHeight = nextTheme.rowHeight;
-    this.rowModel.indentWidth = nextTheme.indentWidth;
-    this.viewport.rowHeight = nextTheme.rowHeight;
-    this.viewport.indentWidth = nextTheme.indentWidth;
-    if (beforeRowHeight !== nextTheme.rowHeight || beforeIndentWidth !== nextTheme.indentWidth) {
+    this.rowModel.rowHeight = this.viewport.rowHeight = this.layoutOverrides.rowHeight ?? nextTheme.rowHeight;
+    this.rowModel.indentWidth = this.viewport.indentWidth = this.layoutOverrides.indentWidth ?? nextTheme.indentWidth;
+    if (beforeRowHeight !== this.rowModel.rowHeight || beforeIndentWidth !== this.rowModel.indentWidth) {
+      this.closeEditor();
       this.#rebuildRows();
     }
     this.#nativeScroll?.applyTheme?.(nextTheme);
@@ -343,13 +577,17 @@ export class TreeViewController {
   }
 
   setLayoutMetrics(options = {}) {
-    const rowHeight = options.rowHeight ?? this.rowModel.rowHeight;
-    const indentWidth = options.indentWidth ?? this.rowModel.indentWidth;
+    const rowHeight = Object.hasOwn(options, 'rowHeight') ? options.rowHeight ?? this.themeManager.get().rowHeight : this.rowModel.rowHeight;
+    const indentWidth = Object.hasOwn(options, 'indentWidth') ? options.indentWidth ?? this.themeManager.get().indentWidth : this.rowModel.indentWidth;
     const headerHeight = options.headerHeight ?? this.viewport.headerHeight;
     assertPositiveNumber(rowHeight, 'rowHeight');
     assertPositiveNumber(indentWidth, 'indentWidth');
     assertNonNegativeNumber(headerHeight, 'headerHeight');
+    for (const key of ['rowHeight', 'indentWidth']) {
+      if (Object.hasOwn(options, key)) this.layoutOverrides[key] = options[key];
+    }
     const rowsChanged = this.rowModel.rowHeight !== rowHeight || this.rowModel.indentWidth !== indentWidth;
+    if (rowsChanged || headerHeight !== this.viewport.headerHeight) this.closeEditor();
     this.rowModel.rowHeight = rowHeight;
     this.rowModel.indentWidth = indentWidth;
     this.viewport.rowHeight = rowHeight;
@@ -543,6 +781,7 @@ export class TreeViewController {
   }
 
   setSelection(ids) {
+    if (!Array.isArray(ids)) throw new TypeError('ids must be an array');
     this.selection.selected.clear();
     for (const id of ids) this.selection.selected.add(id);
     this.selection.focused = ids[ids.length - 1] ?? null;
@@ -578,6 +817,7 @@ export class TreeViewController {
     if (this.activeId === nodeId && this.activePart === part) return;
     this.activeId = nodeId;
     this.activePart = part;
+    this.requestRender();
   }
 
   clickNode(nodeId, event = {}) {
@@ -621,6 +861,11 @@ export class TreeViewController {
 
   handleKey(event) {
     if (!this.rowModel.rows.length) return false;
+    if (this.rowReorder && event.altKey && ['ArrowUp', 'ArrowDown'].includes(event.key)) {
+      const id = this.focusedId ?? this.rowModel.getRow(this.#focusedRowIndex())?.nodeId;
+      this.moveRowBy(id, event.key === 'ArrowUp' ? -1 : 1, { source: 'keyboard' });
+      return true;
+    }
     if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
       this.selection.selected.clear();
       for (const row of this.rowModel.rows) this.selection.selected.add(row.nodeId);
@@ -684,6 +929,7 @@ export class TreeViewController {
     this.renderer.setScene(this.scene);
     const renderStart = performance.now();
     this.renderer.render(this.scene, time);
+    this.actionOverlay?.render(this.scene);
     const renderMs = performance.now() - renderStart;
     this.lastRenderedRows = this.renderer.renderedRows ?? 0;
     return { scene: this.scene, sceneMs, renderMs, renderedRows: this.lastRenderedRows };
@@ -692,9 +938,14 @@ export class TreeViewController {
   createRenderScene() {
     const visibleRange = this.rowModel.getVisibleRange(this.viewport, 4);
     return {
+      rowDrag: this.rowDrag,
+      rowReorder: this.rowReorder,
+      canReorderRows: this.canReorderRows(),
+      rowDrop: this.rowDrop,
+      childrenByParent: this.model.index.childrenByParent,
       rows: this.rowModel.rows,
       visibleRange,
-      stickyRows: this.rowModel.getStickyRows(this.viewport),
+      stickyRows: this.rowReorder ? [] : this.rowModel.getStickyRows(this.viewport),
       viewport: this.viewport,
       columns: this.columnModel.columns,
       theme: this.themeManager.get(),
@@ -711,12 +962,13 @@ export class TreeViewController {
       sortValues: this.sortValueSnapshot ? Array.from(this.sortValueSnapshot) : null,
       inspectorPaneLabelEnd: this.#computeInspectorPaneLabelEnd(visibleRange),
       filterQuery: this.filterQuery,
-      headerFilter: Boolean(this.inspector?.options?.filter),
+      headerFilter: this.headerFilter ?? Boolean(this.inspector?.options?.filter),
       stats: this.getStats(),
     };
   }
 
   closeEditor() {
+    this.cellEditor?.close?.();
     this.events.emit('editorclose', {});
   }
 
@@ -730,7 +982,7 @@ export class TreeViewController {
       const resizeColumn = this.columnModel.getResizeHandleAt(x);
       if (resizeColumn) return { area: 'header', part: 'resize', column: resizeColumn, x, y: localY };
       const column = this.columnModel.getColumnAt(x);
-      if (column?.kind === 'inspectorPane' && this.inspector?.options?.filter) {
+      if (column && (this.headerFilter ?? Boolean(this.inspector?.options?.filter)) && column === this.columnModel.columns.find(item => item.kind !== 'rowOrder' && item.id !== '__vtc_actions')) {
         return { area: 'header', part: 'filter', column, x, y: localY };
       }
       return column ? { area: 'header', part: 'label', column, x, y: localY } : { area: 'header', part: 'header', column: null, x, y: localY };
@@ -744,6 +996,10 @@ export class TreeViewController {
     const column = this.columnModel.getColumnAt(x);
     if (!column) return { area: 'row', part: 'row', row, column: null, x, y: rowY };
 
+    if (column.kind === 'rowOrder') {
+      const offset = x - column.x;
+      return { area: 'row', part: offset < 24 ? 'rowDrag' : offset < 48 ? 'rowUp' : 'rowDown', row, column, x, y: rowY };
+    }
     let part = 'cell';
     if (column.kind === 'inspectorPane') {
       const localX = x - column.x;
@@ -775,10 +1031,10 @@ export class TreeViewController {
       }
     } else if (column.kind === 'tree') {
       const localX = x - column.x;
-      const treeX = row.depth * this.rowModel.indentWidth;
-      if (localX >= treeX + 4 && localX <= treeX + 22) part = 'chevron';
-      else if (localX >= treeX + 26 && localX <= treeX + 44) part = 'icon';
-      else if (localX >= treeX + 48) part = 'label';
+      const layout = treeCellLayout(row.depth, this.rowModel.indentWidth, this.model.index.childrenByParent.size > 1);
+      if (row.hasChildren && localX >= layout.chevronX - 6 && localX <= layout.chevronX + 12) part = 'chevron';
+      else if (localX >= layout.iconX - 1 && localX <= layout.iconX + 17) part = 'icon';
+      else if (localX >= layout.labelX - 2) part = 'label';
       else part = 'cell';
     } else if (column.kind === 'inspectorValue') {
       part = this.#inspectorEditorPart(row, x - column.x, column.width);
@@ -856,7 +1112,7 @@ export class TreeViewController {
         width = Math.max(0, layout.editorWidth - 20);
       }
     } else if (hit.column.kind === 'tree') {
-      const labelX = hit.row.depth * this.rowModel.indentWidth + 50;
+      const { labelX } = treeCellLayout(hit.row.depth, this.rowModel.indentWidth, this.model.index.childrenByParent.size > 1);
       text = node.label ?? node.id;
       width = Math.max(0, hit.column.width - labelX - 6);
     } else if (hit.column.kind === 'inspectorValue') {
@@ -870,7 +1126,7 @@ export class TreeViewController {
       width = Math.max(0, hit.column.width - 20);
     } else if (typeof hit.column.value === 'function') {
       const value = hit.column.value(node, state);
-      text = value == null ? '' : String(value);
+      text = hit.column.format ? hit.column.format(value, node, state) : value == null ? '' : String(value);
       width = Math.max(0, hit.column.width - 20);
     }
 
@@ -880,6 +1136,7 @@ export class TreeViewController {
   }
 
   resize(width, height) {
+    if (width !== this.viewport.viewportWidth || height !== this.viewport.viewportHeight) this.closeEditor();
     this.viewport.resize(width, height);
     this.#fitInspectorPaneColumn(width);
     this.#syncContentSize();
@@ -921,6 +1178,7 @@ export class TreeViewController {
     this.#syncContentSize();
     this.#restoreScrollAnchor(scrollAnchor);
     this.rebuildCount++;
+    this.requestRender();
   }
 
   #syncContentSize() {
@@ -938,13 +1196,6 @@ export class TreeViewController {
     this.setDynamicState(this.patchBatcher.flush());
   }
 
-  #restoreExpansion(expandedIds) {
-    this.model.expanded.clear();
-    for (const id of expandedIds) {
-      if (this.model.index.getNode(id) && this.expansion.hasChildren(id)) this.model.expanded.add(id);
-    }
-  }
-
   #focusedRowIndex() {
     if (this.focusedId) {
       const row = this.rowModel.getRowById(this.focusedId);
@@ -960,7 +1211,10 @@ export class TreeViewController {
       const entry = entries[0];
       const width = Math.floor(entry?.contentRect?.width ?? 0);
       const height = Math.floor(entry?.contentRect?.height ?? 0);
-      if (width > 0 && height > 0) this.resize(width, height);
+      if (width > 0 && height > 0) {
+        this.resize(width, height);
+        if (this.autoRender) { this.cancelRender(); this.render(); }
+      }
     });
     this.#resizeObserver.observe(this.canvas);
   }
@@ -1151,7 +1405,9 @@ export class TreeViewController {
   }
 
   #fitInspectorPaneColumn(width) {
-    const column = this.columnModel.columns.length === 1 ? this.columnModel.columns[0] : null;
+    const columns = this.columnModel.columns.filter(c => !['__vtc_actions', '__vtc_row_order'].includes(c.id));
+    const column = columns.length === 1 ? columns[0] : null;
+    width -= this.columnModel.columns.filter(c => !columns.includes(c)).reduce((sum, c) => sum + c.width, 0);
     if (column?.kind !== 'inspectorPane' && column?.kind !== 'tree') return;
     if (column.kind === 'inspectorPane' && this.inspector?.options?.presentation !== 'pane') return;
     const nextWidth = Math.max(column.minWidth, Math.floor(width));
@@ -1356,21 +1612,6 @@ function assertNonNegativeNumber(value, name) {
   }
 }
 
-function inspectorPaneLayout(width, depth = 0, indentWidth = 18, editorType = '', labelEnd = 0) {
-  const safeWidth = Math.max(1, width);
-  const rightPadding = 14;
-  if (editorType === 'checkbox') {
-    const editorWidth = 34;
-    return { editorLeft: Math.max(64, safeWidth - rightPadding - editorWidth), editorWidth };
-  }
-  const minEditor = Math.min(170, Math.max(96, safeWidth * 0.45));
-  const minLabelEnd = Math.max(88, depth * indentWidth + 104);
-  const preferredLeft = Math.max(minLabelEnd, labelEnd, safeWidth * 0.32);
-  const maxLeft = Math.max(64, safeWidth - rightPadding - minEditor);
-  const editorLeft = Math.max(64, Math.min(preferredLeft, maxLeft));
-  const editorWidth = Math.max(56, safeWidth - rightPadding - editorLeft);
-  return { editorLeft, editorWidth };
-}
 
 function createDefaultArrayItem(meta = {}) {
   if (meta.itemFactory) return meta.itemFactory();
@@ -1450,3 +1691,14 @@ function isProbablyTruncated(text, width) {
 function now() {
   return globalThis.performance?.now?.() ?? Date.now();
 }
+
+function resolveNodeIcons(nodes, resolver) {
+  if (!resolver) return nodes;
+  return nodes.map(node => {
+    const visual = resolver(node);
+    if (typeof visual === 'string') return { ...node, icon: visual };
+    if (!visual || typeof visual !== 'object') return node;
+    if ((visual.id !== undefined && visual.id !== node.id) || (visual.parentId !== undefined && visual.parentId !== node.parentId)) throw new TypeError('iconResolver cannot change node identity or parent');
+    return { ...node, ...visual };
+  });
+}