virtual-tree-canvas 0.4.0 → 0.6.0

package/src/tree-view.js

@@ -0,0 +1,181 @@
+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 { resolveTheme } from './core/theme-manager.js';
+import { treeViewStyles } from './view/styles.js';
+
+/** 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');
+    validateTreeViewOptions(options);
+    resolveTheme(options.theme ?? treeViewDefaults.theme);
+    this.host = host;
+    this.document = host.ownerDocument;
+    this.window = this.document.defaultView;
+    this.destroyed = false;
+    this.flushing = false;
+    this.scheduled = false;
+    this.pending = null;
+    this.refreshPending = true;
+    this.options = { ...treeViewDefaults, nodes: [], model: {}, meta: {} };
+    this.element = this.document.createElement('div');
+    this.element.className = 'vtc-view';
+    const style = this.document.createElement('style');
+    style.textContent = treeViewStyles;
+    this.canvasHost = this.document.createElement('div');
+    this.canvasHost.className = 'vtc-canvas-host';
+    this.canvas = this.document.createElement('canvas');
+    this.canvas.setAttribute('aria-label', 'Tree table');
+    this.canvasHost.append(this.canvas);
+    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,
+    });
+    this.filterBar = new TreeFilterBar(this._controller, this.document);
+    this.element.insertBefore(this.filterBar.element, this.canvasHost);
+    this.stopTheme = this._controller.on('themechange', () => this.syncTheme());
+    this.configure(options);
+    this.flush();
+    this.syncTheme();
+    this.document.fonts?.addEventListener('loadingdone', this.refreshFont);
+    this.document.fonts?.ready.then(this.refreshFont);
+  }
+
+  get controller() { this.flush(); return this._controller; }
+
+  /** 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) };
+    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(); });
+    }
+    return this;
+  }
+
+  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'));
+    this.pending = null;
+    this.refreshPending = false;
+    this.options = next;
+    this.flushing = true;
+    const controller = this._controller;
+    try {
+      if (changed('initialExpandDepth')) controller.setInitialExpandDepth(next.initialExpandDepth);
+      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('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 });
+      } else {
+        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();
+    } finally {
+      this.flushing = false;
+    }
+  }
+
+  syncLayout() {
+    const { filter, filterPlacement, headerHeight, mode, presentation } = this.options;
+    const bar = filter && (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 });
+  }
+
+  applyTheme() {
+    const theme = resolveTheme(this.options.theme);
+    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);
+  }
+
+  refreshFont = () => {
+    if (this.destroyed) return;
+    this.flush();
+    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);
+    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.refreshPending = true;
+    this.flush();
+  }
+
+  setModel(model, meta = (this.pending ?? this.options).meta) {
+    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.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); }
+
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.pending = null;
+    this.document.fonts?.removeEventListener('loadingdone', this.refreshFont);
+    this.stopTheme();
+    this.filterBar.destroy();
+    this._controller.destroy();
+    this.element.remove();
+  }
+}

package/src/view/styles.js

@@ -0,0 +1,14 @@
+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); }
+`;

package/src/assets/icons/air.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.5l1.4 8.1 7.2 4.2-7.9-1.3L12 21.5l-.7-8-7.9 1.3 7.2-4.2z"/><path d="M9.8 18.8L6.5 21M14.2 18.8l3.3 2.2" fill="none"/></svg>

package/src/assets/icons/radar.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 12l6.5-5M12 12a7 7 0 1 0 7 7"/><path d="M12 5a7 7 0 0 1 7 7"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/></svg>