virtual-tree-canvas 0.6.0 → 0.7.1

package/src/tree-view.js

@@ -1,10 +1,16 @@
 import { TreeViewController } from './tree-view-controller.js';
 import { TreeFilterBar } from './input/tree-filter-bar.js';
-import { treeViewDefaults, treeViewOptionNames, validateTreeViewOptions } from './core/view-options.js';
+import {
+  treeViewDefaults,
+  treeViewOptionNames,
+  validateTreeViewOptions
+} from './core/view-options.js';
 import { resolveTheme } from './core/theme-manager.js';
 import { treeViewStyles } from './view/styles.js';
 
-/** Mount a tree or inspector with a canvas, filter controls and editors. */
+/**
+ * Mount a tree or inspector with a canvas, filter controls and editors.
+ */
 export class TreeView {
   constructor(host, options = {}) {
     if (!host?.ownerDocument) throw new TypeError('TreeView requires an HTMLElement host');
@@ -18,7 +24,12 @@ export class TreeView {
     this.scheduled = false;
     this.pending = null;
     this.refreshPending = true;
-    this.options = { ...treeViewDefaults, nodes: [], model: {}, meta: {} };
+    this.options = {
+      ...treeViewDefaults,
+      nodes: [],
+      model: {},
+      meta: {}
+    };
     this.element = this.document.createElement('div');
     this.element.className = 'vtc-view';
     const style = this.document.createElement('style');
@@ -31,9 +42,13 @@ export class TreeView {
     this.element.append(style, this.canvasHost);
     host.append(this.element);
     this._controller = new TreeViewController({
-      canvas: this.canvas, host: this.canvasHost, autoRender: true, tooltip: true,
-      iconsBaseUrl: options.iconsBaseUrl, iconRegistry: options.iconRegistry,
-      nativeScrollbars: options.nativeScrollbars,
+      canvas: this.canvas,
+      host: this.canvasHost,
+      autoRender: true,
+      tooltip: true,
+      iconsBaseUrl: options.iconsBaseUrl,
+      iconRegistry: options.iconRegistry,
+      nativeScrollbars: options.nativeScrollbars
     });
     this.filterBar = new TreeFilterBar(this._controller, this.document);
     this.element.insertBefore(this.filterBar.element, this.canvasHost);
@@ -45,19 +60,28 @@ export class TreeView {
     this.document.fonts?.ready.then(this.refreshFont);
   }
 
-  get controller() { this.flush(); return this._controller; }
+  get controller() {
+    this.flush();
+    return this._controller;
+  }
 
-  /** Merge options; several changes in one task are applied once. */
+  /**
+   * Merge options; several changes in one task are applied once.
+   */
   configure(patch) {
     if (this.destroyed) throw new Error('TreeView has been destroyed');
     validateTreeViewOptions(patch);
     if (Object.hasOwn(patch, 'theme')) resolveTheme(patch.theme);
-    const next = { ...(this.pending ?? this.options) };
+    const next = {
+      ...(this.pending ?? this.options)
+    };
     for (const key of treeViewOptionNames) if (Object.hasOwn(patch, key)) next[key] = patch[key];
     this.pending = next;
     if (!this.scheduled) {
       this.scheduled = true;
-      queueMicrotask(() => { if (!this.destroyed) this.flush(); });
+      queueMicrotask(() => {
+        if (!this.destroyed) this.flush();
+      });
     }
     return this;
   }
@@ -65,108 +89,247 @@ export class TreeView {
   flush() {
     if (this.destroyed || this.flushing || !this.pending) return;
     this.scheduled = false;
-    const next = this.pending, previous = this.options;
-    const changed = key => !Object.is(next[key], previous[key]);
-    const replaceData = this.refreshPending || changed('mode') ||
-      (next.mode === 'tree' ? changed('nodes') : changed('model') || changed('meta') || changed('presentation') || changed('flatRoot') || changed('enforceMeta'));
+    const next = this.pending,
+      previous = this.options;
+    const changed = (key) => !Object.is(next[key], previous[key]);
+    const replaceData =
+      this.refreshPending ||
+      changed('mode') ||
+      (next.mode === 'tree'
+        ? changed('nodes')
+        : changed('model') ||
+          changed('meta') ||
+          changed('presentation') ||
+          changed('flatRoot') ||
+          changed('enforceMeta'));
     this.pending = null;
     this.refreshPending = false;
     this.options = next;
     this.flushing = true;
     const controller = this._controller;
     try {
+      controller.flushDynamicState();
       if (changed('initialExpandDepth')) controller.setInitialExpandDepth(next.initialExpandDepth);
-      if (changed('rowHeight') || changed('indentWidth')) controller.setLayoutMetrics({ rowHeight: next.rowHeight, indentWidth: next.indentWidth });
+      if (changed('rowHeight') || changed('indentWidth'))
+        controller.setLayoutMetrics({
+          rowHeight: next.rowHeight,
+          indentWidth: next.indentWidth
+        });
       if (changed('theme') || changed('fontFamily')) this.applyTheme();
       if (changed('editable')) controller.setEditable(next.editable);
+      if (changed('rowActions')) controller.setRowActions(next.rowActions);
+      if (changed('rowDrag')) controller.setRowDrag(next.rowDrag);
       if (changed('rowReorder')) controller.setRowReorder(next.rowReorder);
       if (replaceData) {
-        if (next.mode === 'tree') controller.setData(next.nodes ?? [], { iconResolver: next.iconResolver });
-        else controller.setModel(next.model, next.meta ?? {}, { presentation: next.presentation, flatRoot: next.flatRoot, enforceMeta: next.enforceMeta, markUpdated: next.markUpdated });
+        if (next.mode === 'tree')
+          controller.setData(next.nodes ?? [], {
+            iconResolver: next.iconResolver
+          });
+        else
+          controller.setModel(next.model, next.meta ?? {}, {
+            presentation: next.presentation,
+            flatRoot: next.flatRoot,
+            enforceMeta: next.enforceMeta,
+            markUpdated: next.markUpdated
+          });
       } else {
-        if (changed('iconResolver') && next.mode === 'tree') controller.setIconResolver(next.iconResolver);
-        if (changed('markUpdated')) controller.setInspectorOptions({ markUpdated: next.markUpdated });
+        if (changed('iconResolver') && next.mode === 'tree')
+          controller.setIconResolver(next.iconResolver);
+        if (changed('markUpdated'))
+          controller.setInspectorOptions({
+            markUpdated: next.markUpdated
+          });
       }
-      if (changed('columns') || (replaceData && next.columns !== null)) controller.setColumns(next.columns);
-      if (replaceData || ['filter', 'filterPlacement', 'headerHeight'].some(changed)) this.syncLayout();
+      if (changed('columns') || (replaceData && next.columns !== null))
+        controller.setColumns(next.columns);
+      if (replaceData || ['filter', 'filterPlacement', 'headerHeight', 'showHeader'].some(changed))
+        this.syncLayout();
     } finally {
       this.flushing = false;
     }
   }
 
   syncLayout() {
-    const { filter, filterPlacement, headerHeight, mode, presentation } = this.options;
-    const bar = filter && (filterPlacement === 'bar' || (filterPlacement === 'auto' && (mode === 'tree' || presentation === 'pane')));
+    const { filter, filterPlacement, headerHeight, showHeader, mode, presentation } = this.options;
+    const bar =
+      filter &&
+      (!showHeader ||
+        filterPlacement === 'bar' ||
+        (filterPlacement === 'auto' && (mode === 'tree' || presentation === 'pane')));
     this.filterBar.setVisible(bar);
     this._controller.setHeaderFilter(filter && !bar);
-    this._controller.setLayoutMetrics({ headerHeight: bar && mode === 'inspector' && presentation === 'pane' ? 0 : headerHeight });
+    this._controller.setLayoutMetrics({
+      headerHeight:
+        !showHeader || (bar && mode === 'inspector' && presentation === 'pane') ? 0 : headerHeight
+    });
   }
 
   applyTheme() {
     const theme = resolveTheme(this.options.theme);
-    const family = this.options.fontFamily === 'inherit' ? this.window.getComputedStyle(this.host).fontFamily : this.options.fontFamily;
+    const family =
+      this.options.fontFamily === 'inherit'
+        ? this.window.getComputedStyle(this.host).fontFamily
+        : this.options.fontFamily;
     this.fontFamily = family;
-    this._controller.setTheme(family ? { ...theme, font: `12px ${family}`, monoFont: `12px ${family}` } : theme);
+    this._controller.setTheme(
+      family
+        ? {
+            ...theme,
+            font: `12px ${family}`,
+            monoFont: `12px ${family}`
+          }
+        : theme
+    );
   }
 
   refreshFont = () => {
     if (this.destroyed) return;
     this.flush();
-    const family = this.options.fontFamily === 'inherit' ? this.window.getComputedStyle(this.host).fontFamily : this.options.fontFamily;
+    const family =
+      this.options.fontFamily === 'inherit'
+        ? this.window.getComputedStyle(this.host).fontFamily
+        : this.options.fontFamily;
     if (family !== this.fontFamily) this.applyTheme();
     else this._controller.requestRender();
   };
 
   syncTheme() {
     const theme = this._controller.themeManager.get();
-    for (const [key, value] of Object.entries({ background: theme.colors.background, text: theme.colors.text, border: theme.colors.border, focus: theme.colors.focus, selected: theme.colors.rowSelected })) this.element.style.setProperty(`--vtc-${key}`, value);
+    for (const [key, value] of Object.entries({
+      background: theme.colors.background,
+      text: theme.colors.text,
+      border: theme.colors.border,
+      focus: theme.colors.focus,
+      selected: theme.colors.rowSelected
+    }))
+      this.element.style.setProperty(`--vtc-${key}`, value);
     if (this.fontFamily) this.element.style.setProperty('--vtc-font-family', this.fontFamily);
     else this.element.style.removeProperty('--vtc-font-family');
   }
 
   setData(nodes) {
     if (!Array.isArray(nodes)) throw new TypeError('nodes must be an array');
-    this.configure({ nodes, mode: 'tree' });
+    this.configure({
+      nodes,
+      mode: 'tree'
+    });
     this.refreshPending = true;
     this.flush();
   }
 
   setModel(model, meta = (this.pending ?? this.options).meta) {
-    this.configure({ model, meta, mode: 'inspector' });
+    this.configure({
+      model,
+      meta,
+      mode: 'inspector'
+    });
     this.refreshPending = true;
     this.flush();
   }
 
   setColumns(columns) {
     const changed = columns !== (this.pending ?? this.options).columns;
-    this.configure({ columns });
+    this.configure({
+      columns
+    });
     this.flush();
     if (!changed) this._controller.setColumns(columns);
   }
 
-  setTheme(theme) { this.configure({ theme }); this.flush(); }
-  on(type, listener) { return this._controller.on(type, listener); }
-  off(type, listener) { this._controller.off(type, listener); }
-  setDynamicState(patches) { this.controller.setDynamicState(patches); }
-  setInspectorValue(path, value, options) { return this.controller.setInspectorValue(path, value, options); }
-  setFilter(query, options) { this.controller.setFilter(query, options); }
-  clearFilter() { this.controller.clearFilter(); }
-  getRowOrder(parentId) { return this.controller.getRowOrder(parentId); }
-  moveRow(id, index, options) { return this.controller.moveRow(id, index, options); }
-  moveRowBy(id, offset, options) { return this.controller.moveRowBy(id, offset, options); }
-  getSelection() { return this.controller.getSelection(); }
-  setSelection(ids) { this.controller.setSelection(ids); }
-  clearSelection() { this.controller.clearSelection(); }
-  search(query, options) { return this.controller.search(query, options); }
-  clearSearch() { this.controller.clearSearch(); }
-  getSearchState() { return this.controller.getSearchState(); }
-  nextSearchResult() { return this.controller.nextSearchResult(); }
-  previousSearchResult() { return this.controller.previousSearchResult(); }
-  focusNode(id, options) { return this.controller.focusNode(id, options); }
-  scrollToNode(id, align) { return this.controller.scrollToNode(id, align); }
-  expandAll() { this.controller.expandAll(); }
-  collapseAll() { this.controller.collapseAll(); }
-  registerIcon(name, source) { return this.controller.registerIcon(name, source); }
+  setTheme(theme) {
+    this.configure({
+      theme
+    });
+    this.flush();
+  }
+
+  on(type, listener) {
+    return this._controller.on(type, listener);
+  }
+
+  off(type, listener) {
+    this._controller.off(type, listener);
+  }
+
+  setDynamicState(patches) {
+    this.controller.setDynamicState(patches);
+  }
+
+  setInspectorValue(path, value, options) {
+    return this.controller.setInspectorValue(path, value, options);
+  }
+
+  setFilter(query, options) {
+    this.controller.setFilter(query, options);
+  }
+
+  clearFilter() {
+    this.controller.clearFilter();
+  }
+
+  getRowOrder(parentId) {
+    return this.controller.getRowOrder(parentId);
+  }
+
+  moveRow(id, index, options) {
+    return this.controller.moveRow(id, index, options);
+  }
+
+  moveRowBy(id, offset, options) {
+    return this.controller.moveRowBy(id, offset, options);
+  }
+
+  getSelection() {
+    return this.controller.getSelection();
+  }
+
+  setSelection(ids) {
+    this.controller.setSelection(ids);
+  }
+
+  clearSelection() {
+    this.controller.clearSelection();
+  }
+
+  search(query, options) {
+    return this.controller.search(query, options);
+  }
+
+  clearSearch() {
+    this.controller.clearSearch();
+  }
+
+  getSearchState() {
+    return this.controller.getSearchState();
+  }
+
+  nextSearchResult() {
+    return this.controller.nextSearchResult();
+  }
+
+  previousSearchResult() {
+    return this.controller.previousSearchResult();
+  }
+
+  focusNode(id, options) {
+    return this.controller.focusNode(id, options);
+  }
+
+  scrollToNode(id, align) {
+    return this.controller.scrollToNode(id, align);
+  }
+
+  expandAll() {
+    this.controller.expandAll();
+  }
+
+  collapseAll() {
+    this.controller.collapseAll();
+  }
+
+  registerIcon(name, source) {
+    return this.controller.registerIcon(name, source);
+  }
 
   destroy() {
     if (this.destroyed) return;
@@ -178,4 +341,5 @@ export class TreeView {
     this._controller.destroy();
     this.element.remove();
   }
+
 }

package/src/view/styles.js

@@ -1,14 +1,85 @@
 export const treeViewStyles = `
-.vtc-view { position:relative; display:flex; flex-direction:column; width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; box-sizing:border-box; background:var(--vtc-background); color:var(--vtc-text); }
-.vtc-view .vtc-canvas-host { position:relative; flex:1 1 0; min-width:0; min-height:0; overflow:hidden; }
-.vtc-view canvas { display:block; width:100%; height:100%; box-sizing:border-box; }
-.vtc-view canvas:focus-visible { outline:1px solid var(--vtc-focus); outline-offset:-1px; }
-.vtc-view .vtc-filter { display:flex; flex:0 0 30px; box-sizing:border-box; gap:4px; padding:4px 8px; min-width:0; }
-.vtc-view .vtc-filter[hidden] { display:none; }
-.vtc-view .vtc-filter input, .vtc-view .vtc-filter button { height:22px; box-sizing:border-box; border:1px solid var(--vtc-border); border-radius:4px; background:var(--vtc-background); color:var(--vtc-text); font:12px var(--vtc-font-family, ui-monospace, monospace); }
-.vtc-view .vtc-filter input { flex:1 1 auto; min-width:0; padding:0 8px; }
-.vtc-view .vtc-filter button { flex:0 0 24px; padding:0; cursor:pointer; }
-.vtc-view .vtc-filter button:hover { border-color:var(--vtc-focus); }
-.vtc-view .vtc-filter :focus-visible { outline:1px solid var(--vtc-focus); outline-offset:1px; }
-.vtc-view .vtc-filter [aria-pressed="true"] { border-color:var(--vtc-focus); background:var(--vtc-selected); }
+  .vtc-view {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    box-sizing: border-box;
+    background: var(--vtc-background);
+    color: var(--vtc-text);
+  }
+
+  .vtc-view .vtc-canvas-host {
+    position: relative;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .vtc-view .vtc-canvas-host > canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .vtc-view .vtc-canvas-host > canvas:focus-visible {
+    outline: 1px solid var(--vtc-border);
+    outline-offset: -1px;
+  }
+
+  .vtc-view .vtc-filter {
+    display: flex;
+    flex: 0 0 30px;
+    box-sizing: border-box;
+    gap: 4px;
+    padding: 4px 8px;
+    min-width: 0;
+  }
+
+  .vtc-view .vtc-filter[hidden] {
+    display: none;
+  }
+
+  .vtc-view .vtc-filter input,
+  .vtc-view .vtc-filter button {
+    height: 22px;
+    box-sizing: border-box;
+    border: 1px solid var(--vtc-border);
+    border-radius: 4px;
+    background: var(--vtc-background);
+    color: var(--vtc-text);
+    font: 12px var(--vtc-font-family, ui-monospace, monospace);
+  }
+
+  .vtc-view .vtc-filter input {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0 8px;
+  }
+
+  .vtc-view .vtc-filter button {
+    flex: 0 0 24px;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .vtc-view .vtc-filter button:hover {
+    border-color: var(--vtc-focus);
+  }
+
+  .vtc-view .vtc-filter :focus-visible {
+    outline: 1px solid var(--vtc-focus);
+    outline-offset: 1px;
+  }
+
+  .vtc-view .vtc-filter [aria-pressed='true'] {
+    border-color: var(--vtc-focus);
+    background: var(--vtc-selected);
+  }
 `;