virtual-tree-canvas 0.3.6 → 0.3.7

package/package.json

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

package/src/core/search-index.js

@@ -8,13 +8,21 @@ export class TreeSearchIndex {
 
   /** @param {import('./tree-model.js').TreeModel} model */
   rebuild(model) {
-    this.records = model.nodes.map((node) => ({
-      id: node.id,
-      label: (node.label ?? '').toLowerCase(),
-      path: (model.index.pathById.get(node.id) ?? '').toLowerCase(),
-      tags: (node.tags ?? []).join(' ').toLowerCase(),
-      type: (node.type ?? '').toLowerCase(),
-    }));
+    this.records = model.nodes.map((node) => {
+      const path = model.index.pathById.get(node.id) ?? '';
+      const searchId = searchableNodeId(node);
+      const record = {
+        id: node.id,
+        searchId: normalize(searchId),
+        label: normalize(node.label ?? ''),
+        path: normalize(path),
+        tags: normalize((node.tags ?? []).join(' ')),
+        type: normalize(node.type ?? ''),
+        value: normalize(searchableNodeValue(node)),
+      };
+      record.searchText = defaultSearchText(node, record);
+      return record;
+    });
   }
 
   /**
@@ -32,11 +40,16 @@ export class TreeSearchIndex {
     const fields = options.fields ?? ['label', 'id', 'path', 'tags', 'type'];
     const limit = options.limit ?? 100;
     const results = [];
+    const defaultFields = isDefaultSearchFields(fields);
     for (const record of this.records) {
-      for (const field of fields) {
-        if (String(record[field] ?? '').includes(q)) {
-          results.push(record.id);
-          break;
+      if (defaultFields) {
+        if (record.searchText.includes(q)) results.push(record.id);
+      } else {
+        for (const field of fields) {
+          if (searchFieldValue(record, field).includes(q)) {
+            results.push(record.id);
+            break;
+          }
         }
       }
       if (results.length >= limit) break;
@@ -68,3 +81,42 @@ export class TreeSearchIndex {
     this.lastQuery = '';
   }
 }
+
+function isDefaultSearchFields(fields) {
+  return fields.length === 5 && fields.includes('label') && fields.includes('id') && fields.includes('path') && fields.includes('tags') && fields.includes('type');
+}
+
+function searchFieldValue(record, field) {
+  if (field === 'id') return record.searchId || normalize(record.id);
+  return normalize(record[field] ?? '');
+}
+
+function searchableNodeId(node) {
+  if (node?.data?.inspector) return node.data.key ?? node.label ?? node.id;
+  return node?.id ?? '';
+}
+
+function searchableNodeValue(node) {
+  if (!node?.data?.inspector) return '';
+  return node.data.valueText ?? node.data.value ?? '';
+}
+
+function defaultSearchText(node, record) {
+  if (node?.data?.inspector) {
+    const data = node.data;
+    return normalize([
+      record.searchId,
+      node.label ?? '',
+      data.key ?? '',
+      data.valueText ?? '',
+      data.valueType ?? '',
+      record.tags,
+      record.type,
+    ].join(' '));
+  }
+  return normalize(`${record.searchId} ${record.label} ${record.path} ${record.tags} ${record.type}`);
+}
+
+function normalize(value) {
+  return String(value ?? '').toLowerCase();
+}

package/src/core/tree-view-viewport.js

@@ -13,10 +13,17 @@ export class TreeViewViewport extends EventTarget {
     this.contentWidth = 1;
     this.contentHeight = 1;
     this.zoom = 1;
+    this.scrollbarSize = 0;
+    this.verticalScrollbarVisible = false;
+    this.horizontalScrollbarVisible = false;
+  }
+
+  get contentViewportWidth() {
+    return Math.max(1, this.viewportWidth - (this.verticalScrollbarVisible ? this.scrollbarSize : 0));
   }
 
   get rowViewportHeight() {
-    return Math.max(1, this.viewportHeight - this.headerHeight);
+    return Math.max(1, this.viewportHeight - this.headerHeight - (this.horizontalScrollbarVisible ? this.scrollbarSize : 0));
   }
 
   resize(width, height) {
@@ -33,6 +40,21 @@ export class TreeViewViewport extends EventTarget {
     this.dispatchEvent(new Event('change'));
   }
 
+  setScrollbarState({ size = this.scrollbarSize, vertical = this.verticalScrollbarVisible, horizontal = this.horizontalScrollbarVisible } = {}) {
+    const nextSize = Math.max(0, size);
+    const nextVertical = Boolean(vertical && nextSize > 0);
+    const nextHorizontal = Boolean(horizontal && nextSize > 0);
+    const changed =
+      this.scrollbarSize !== nextSize ||
+      this.verticalScrollbarVisible !== nextVertical ||
+      this.horizontalScrollbarVisible !== nextHorizontal;
+    this.scrollbarSize = nextSize;
+    this.verticalScrollbarVisible = nextVertical;
+    this.horizontalScrollbarVisible = nextHorizontal;
+    this.clamp();
+    return changed;
+  }
+
   scrollBy(dx, dy) {
     this.scrollX += dx;
     this.scrollY += dy;
@@ -61,7 +83,7 @@ export class TreeViewViewport extends EventTarget {
   }
 
   clamp() {
-    const maxX = Math.max(0, this.contentWidth - this.viewportWidth);
+    const maxX = Math.max(0, this.contentWidth - this.contentViewportWidth);
     const maxY = Math.max(0, this.contentHeight - this.rowViewportHeight);
     this.scrollX = Math.max(0, Math.min(maxX, this.scrollX));
     this.scrollY = Math.max(0, Math.min(maxY, this.scrollY));

package/src/core/tree-worker-operations.js

@@ -27,14 +27,18 @@ export function createWorkerTreeState(nodes) {
   const records = nodes.map((node) => {
     const path = pathById.get(node.id) ?? '';
     const tags = (node.tags ?? []).join(' ');
-    return {
+    const record = {
       id: node.id,
+      searchId: searchableNodeId(node),
       label: node.label ?? '',
       path,
       tags,
       type: node.type ?? '',
-      searchText: normalize(`${node.id} ${node.label ?? ''} ${path} ${tags} ${node.type ?? ''}`),
+      value: searchableNodeValue(node),
     };
+    record.searchText = defaultSearchText(node, record);
+    record.filterText = defaultFilterText(node, record);
+    return record;
   });
 
   return { nodes, idToIndex, childrenByParent, parentById, roots, pathById, records };
@@ -47,7 +51,7 @@ export function searchWorkerTree(state, query, { fields = ['label', 'id', 'path'
   const defaultFields = fields.length === 5 && fields.includes('label') && fields.includes('id') && fields.includes('path') && fields.includes('tags') && fields.includes('type');
 
   for (const record of state.records) {
-    const matches = defaultFields ? record.searchText.includes(q) : fields.some((field) => normalize(record[field]).includes(q));
+    const matches = defaultFields ? record.searchText.includes(q) : fields.some((field) => searchFieldValue(record, field).includes(q));
     if (!matches) continue;
     results.push(record.id);
     if (results.length >= limit) break;
@@ -115,7 +119,7 @@ export function getIncludedIdsForQuery(state, query, candidateIds = null) {
   const records = candidateIds ? idsToRecords(state, candidateIds) : state.records;
 
   for (const record of records) {
-    if (!record.searchText.includes(q)) continue;
+    if (!(record.filterText ?? record.searchText).includes(q)) continue;
     matchingIds.push(record.id);
     let id = record.id;
     while (id !== null && id !== undefined && !includedIds.has(id)) {
@@ -152,3 +156,50 @@ function columnValue(node, columnId) {
 function normalize(value) {
   return String(value ?? '').toLowerCase();
 }
+
+function searchFieldValue(record, field) {
+  if (field === 'id') return normalize(record.searchId || record.id);
+  return normalize(record[field]);
+}
+
+function searchableNodeId(node) {
+  if (node?.data?.inspector) return node.data.key ?? node.label ?? node.id;
+  return node?.id ?? '';
+}
+
+function searchableNodeValue(node) {
+  if (!node?.data?.inspector) return '';
+  return node.data.valueText ?? node.data.value ?? '';
+}
+
+function defaultSearchText(node, record) {
+  if (node?.data?.inspector) {
+    const data = node.data;
+    return normalize([
+      record.searchId,
+      node.label ?? '',
+      data.key ?? '',
+      data.valueText ?? '',
+      data.valueType ?? '',
+      record.tags,
+      record.type,
+    ].join(' '));
+  }
+  return normalize(`${record.searchId} ${record.label} ${record.path} ${record.tags} ${record.type}`);
+}
+
+function defaultFilterText(node, record) {
+  if (node?.data?.inspector) {
+    const data = node.data;
+    return normalize([
+      node.label ?? '',
+      node.type ?? '',
+      data.path ?? '',
+      data.key ?? '',
+      data.valueText ?? '',
+      data.meta?.description ?? '',
+      ...Object.keys(data.meta?.options ?? {}),
+    ].join(' '));
+  }
+  return record.searchText;
+}

package/src/inspector/cell-editor-manager.js

@@ -141,7 +141,7 @@ export class CellEditorManager {
     const rect = this.#clampRectToHost({
       x: headerRect.x + 8,
       y: headerRect.y + 5,
-      width: Math.max(24, Math.min(headerRect.width, this.controller.viewport.viewportWidth) - 16),
+      width: Math.max(24, Math.min(headerRect.width, this.controller.viewport.contentViewportWidth) - 16),
       height: Math.max(20, headerRect.height - 10),
     }, 0);
     const hostRect = this.host.getBoundingClientRect();
@@ -214,7 +214,7 @@ export class CellEditorManager {
   #overlayRect(hit) {
     if (hit.column?.kind !== 'inspectorPane') return this.controller.getCellClientRect(hit);
     const rect = this.controller.getCellClientRect(hit);
-    const visibleWidth = Math.max(1, Math.min(rect.width, this.controller.viewport.viewportWidth));
+    const visibleWidth = Math.max(1, Math.min(rect.width, this.controller.viewport.contentViewportWidth));
     const data = this.controller.model.nodes[hit.row.nodeIndex]?.data ?? {};
     const { editorLeft, editorWidth } = this.controller.getInspectorPaneLayout(visibleWidth, hit.row, data.editorType);
     if (hit.part === 'number') {
@@ -227,7 +227,7 @@ export class CellEditorManager {
   #rangeBarRect(hit) {
     const rect = this.controller.getCellClientRect(hit);
     if (hit.column?.kind === 'inspectorPane') {
-      const visibleWidth = Math.max(1, Math.min(rect.width, this.controller.viewport.viewportWidth));
+      const visibleWidth = Math.max(1, Math.min(rect.width, this.controller.viewport.contentViewportWidth));
       const data = this.controller.model.nodes[hit.row.nodeIndex]?.data ?? {};
       const { editorLeft, editorWidth } = this.controller.getInspectorPaneLayout(visibleWidth, hit.row, data.editorType);
       const valueWidth = Math.min(64, Math.max(42, (editorWidth - 20) * 0.28));

package/src/renderers/tree-row-renderer.js

@@ -58,9 +58,13 @@ export class TreeRowRenderer {
     const { viewport, columns, theme, sort, headerFilter, filterQuery } = this.scene;
     if (viewport.headerHeight <= 0) return;
     const colors = theme.colors;
+    const visibleWidth = viewport.contentViewportWidth ?? viewport.viewportWidth;
     ctx.save();
     ctx.fillStyle = colors.row;
     ctx.fillRect(0, 0, viewport.viewportWidth, viewport.headerHeight);
+    ctx.beginPath();
+    ctx.rect(0, 0, visibleWidth, viewport.headerHeight);
+    ctx.clip();
     ctx.translate(-viewport.scrollX, 0);
     ctx.font = theme.font;
     ctx.textBaseline = 'middle';
@@ -86,7 +90,7 @@ export class TreeRowRenderer {
     ctx.strokeStyle = colors.border;
     ctx.beginPath();
     ctx.moveTo(0, viewport.headerHeight + 0.5);
-    ctx.lineTo(viewport.viewportWidth, viewport.headerHeight + 0.5);
+    ctx.lineTo(visibleWidth, viewport.headerHeight + 0.5);
     ctx.stroke();
   }
 
@@ -94,7 +98,7 @@ export class TreeRowRenderer {
     const colors = theme.colors;
     const x = column.x + 8;
     const y = 5;
-    const visibleRight = viewport.scrollX + viewport.viewportWidth;
+    const visibleRight = viewport.scrollX + (viewport.contentViewportWidth ?? viewport.viewportWidth);
     const visibleWidth = Math.max(1, Math.min(column.x + column.width, visibleRight) - column.x);
     const width = Math.max(40, visibleWidth - 16);
     const height = Math.max(18, viewport.headerHeight - 10);
@@ -126,9 +130,10 @@ export class TreeRowRenderer {
   #drawRows(ctx) {
     const { rows, visibleRange, viewport } = this.scene;
     this.renderedRows = visibleRange.count;
+    const visibleWidth = viewport.contentViewportWidth ?? viewport.viewportWidth;
     ctx.save();
     ctx.beginPath();
-    ctx.rect(0, viewport.headerHeight, viewport.viewportWidth, viewport.rowViewportHeight);
+    ctx.rect(0, viewport.headerHeight, visibleWidth, viewport.rowViewportHeight);
     ctx.clip();
     ctx.translate(-viewport.scrollX, viewport.headerHeight - viewport.scrollY);
     for (let i = visibleRange.first; i <= visibleRange.last; i++) {
@@ -150,7 +155,7 @@ export class TreeRowRenderer {
     const focused = focusNodeId === row.nodeId;
     const y = row.y;
     const visibleX = viewport.scrollX;
-    const visibleWidth = viewport.viewportWidth;
+    const visibleWidth = viewport.contentViewportWidth ?? viewport.viewportWidth;
 
     ctx.fillStyle = selected ? colors.rowSelected : highlighted ? colors.rowHighlighted : hovered ? colors.rowHover : colors.row;
     ctx.fillRect(visibleX, y, visibleWidth, row.height);
@@ -209,7 +214,7 @@ export class TreeRowRenderer {
   }
 
   #drawInspectorPaneCell(ctx, { node, row, rect, theme, style, hovered, hoverPart, activePart }) {
-    const visibleRight = this.scene.viewport.scrollX + this.scene.viewport.viewportWidth;
+    const visibleRight = this.scene.viewport.scrollX + (this.scene.viewport.contentViewportWidth ?? this.scene.viewport.viewportWidth);
     rect = { ...rect, width: Math.max(1, Math.min(rect.x + rect.width, visibleRight) - rect.x) };
     const data = node.data ?? {};
     const colors = theme.colors;

package/src/tree-view-controller.js

@@ -700,6 +700,7 @@ export class TreeViewController {
     const localX = clientX - (this.viewport.renderInsetX ?? 0);
     const localY = clientY - (this.viewport.renderInsetY ?? 0);
     if (localX < 0 || localY < 0) return null;
+    if (localX >= this.viewport.contentViewportWidth) return null;
     const x = localX + this.viewport.scrollX;
     if (localY < this.viewport.headerHeight) {
       const resizeColumn = this.columnModel.getResizeHandleAt(x);
@@ -711,6 +712,7 @@ export class TreeViewController {
       return column ? { area: 'header', part: 'label', column, x, y: localY } : { area: 'header', part: 'header', column: null, x, y: localY };
     }
 
+    if (localY >= this.viewport.headerHeight + this.viewport.rowViewportHeight) return null;
     const rowY = localY - this.viewport.headerHeight + this.viewport.scrollY;
     const rowIndex = Math.floor(rowY / this.rowModel.rowHeight);
     const row = this.rowModel.getRow(rowIndex);
@@ -776,7 +778,7 @@ export class TreeViewController {
   }
 
   #visibleInspectorPaneWidth(column) {
-    return Math.max(1, Math.min(column.width, this.viewport.scrollX + this.viewport.viewportWidth - column.x));
+    return Math.max(1, Math.min(column.width, this.viewport.scrollX + this.viewport.contentViewportWidth - column.x));
   }
 
   getInspectorPaneLayout(width, row = null, editorType = '') {
@@ -797,10 +799,11 @@ export class TreeViewController {
   getHeaderClientRect(hit) {
     if (!hit?.column || !this.canvas) return { x: 0, y: 0, width: 0, height: 0 };
     const rect = this.canvas.getBoundingClientRect();
+    const visibleWidth = Math.max(0, this.viewport.contentViewportWidth - Math.max(0, hit.column.x - this.viewport.scrollX));
     return {
       x: rect.left + (this.viewport.renderInsetX ?? 0) + hit.column.x - this.viewport.scrollX,
       y: rect.top + (this.viewport.renderInsetY ?? 0),
-      width: hit.column.width,
+      width: Math.min(hit.column.width, visibleWidth || hit.column.width),
       height: this.viewport.headerHeight,
     };
   }
@@ -898,7 +901,9 @@ export class TreeViewController {
   }
 
   #syncContentSize() {
-    if (this.viewport.viewportWidth > 1) this.#fitInspectorPaneColumn(this.viewport.viewportWidth);
+    this.#syncScrollbarState(this.columnModel.contentWidth, this.rowModel.contentHeight);
+    if (this.viewport.viewportWidth > 1) this.#fitInspectorPaneColumn(this.viewport.contentViewportWidth);
+    this.#syncScrollbarState(this.columnModel.contentWidth, this.rowModel.contentHeight);
     this.viewport.setContentSize(this.columnModel.contentWidth, this.rowModel.contentHeight);
   }
 
@@ -973,12 +978,13 @@ export class TreeViewController {
     applyNativeScrollbarTheme([vertical, horizontal, corner], this.themeManager.get());
 
     const size = nativeScrollbarSize();
+    this.#nativeScrollbarSize = size;
     Object.assign(vertical.style, {
       position: 'absolute',
-      top: `${this.viewport.headerHeight}px`,
-      right: '0',
-      bottom: '0',
+      top: '0',
+      left: '0',
       width: `${size}px`,
+      height: '1px',
       overflowX: 'hidden',
       overflowY: 'auto',
       zIndex: '4',
@@ -986,8 +992,8 @@ export class TreeViewController {
     Object.assign(horizontal.style, {
       position: 'absolute',
       left: '0',
-      right: '0',
-      bottom: '0',
+      top: '0',
+      width: '1px',
       height: `${size}px`,
       overflowX: 'auto',
       overflowY: 'hidden',
@@ -995,8 +1001,8 @@ export class TreeViewController {
     });
     Object.assign(corner.style, {
       position: 'absolute',
-      right: '0',
-      bottom: '0',
+      left: '0',
+      top: '0',
       width: `${size}px`,
       height: `${size}px`,
       zIndex: '4',
@@ -1018,17 +1024,24 @@ export class TreeViewController {
 
     let syncing = false;
     const sync = () => {
-      const maxX = Math.max(0, this.viewport.contentWidth - this.viewport.viewportWidth);
+      this.#syncScrollbarState(this.viewport.contentWidth, this.viewport.contentHeight);
+      const maxX = Math.max(0, this.viewport.contentWidth - this.viewport.contentViewportWidth);
       const maxY = Math.max(0, this.viewport.contentHeight - this.viewport.rowViewportHeight);
       const showX = maxX > 0;
       const showY = maxY > 0;
+      const canvasMetrics = this.#canvasHostMetrics();
 
       vertical.style.display = showY ? 'block' : 'none';
       horizontal.style.display = showX ? 'block' : 'none';
       corner.style.display = showX && showY ? 'block' : 'none';
-      vertical.style.bottom = showX ? `${size}px` : '0';
-      horizontal.style.right = showY ? `${size}px` : '0';
-      vertical.style.top = `${this.viewport.headerHeight}px`;
+      vertical.style.left = `${canvasMetrics.left + canvasMetrics.width - size}px`;
+      vertical.style.top = `${canvasMetrics.top + this.viewport.headerHeight}px`;
+      vertical.style.height = `${Math.max(1, canvasMetrics.height - this.viewport.headerHeight - (showX ? size : 0))}px`;
+      horizontal.style.left = `${canvasMetrics.left}px`;
+      horizontal.style.top = `${canvasMetrics.top + canvasMetrics.height - size}px`;
+      horizontal.style.width = `${Math.max(1, canvasMetrics.width - (showY ? size : 0))}px`;
+      corner.style.left = `${canvasMetrics.left + canvasMetrics.width - size}px`;
+      corner.style.top = `${canvasMetrics.top + canvasMetrics.height - size}px`;
 
       verticalSpacer.style.height = `${Math.ceil(maxY + vertical.clientHeight)}px`;
       horizontalSpacer.style.width = `${Math.ceil(maxX + horizontal.clientWidth)}px`;
@@ -1065,11 +1078,37 @@ export class TreeViewController {
         vertical.remove();
         horizontal.remove();
         corner.remove();
+        this.#nativeScrollbarSize = 0;
+        this.viewport.setScrollbarState({ size: 0, vertical: false, horizontal: false });
         if (hostPositionChanged) host.style.position = previousHostPosition;
       },
     };
   }
 
+  #syncScrollbarState(contentWidth, contentHeight) {
+    const size = this.nativeScrollbars ? this.#nativeScrollbarSize : 0;
+    if (!size) {
+      this.viewport.setScrollbarState({ size: 0, vertical: false, horizontal: false });
+      return;
+    }
+    let availableWidth = this.viewport.viewportWidth;
+    let availableRowHeight = Math.max(1, this.viewport.viewportHeight - this.viewport.headerHeight);
+    let showY = contentHeight > availableRowHeight;
+    let showX = contentWidth > availableWidth;
+    if (showY && contentWidth > Math.max(1, availableWidth - size)) showX = true;
+    if (showX && contentHeight > Math.max(1, availableRowHeight - size)) showY = true;
+    this.viewport.setScrollbarState({ size, vertical: showY, horizontal: showX });
+  }
+
+  #canvasHostMetrics() {
+    if (!this.canvas) return { left: 0, top: 0, width: this.viewport.viewportWidth, height: this.viewport.viewportHeight };
+    const left = Number.isFinite(this.canvas.offsetLeft) ? this.canvas.offsetLeft : 0;
+    const top = Number.isFinite(this.canvas.offsetTop) ? this.canvas.offsetTop : 0;
+    const width = Math.max(1, Math.floor(this.canvas.clientWidth || this.canvas.getBoundingClientRect?.().width || this.viewport.viewportWidth));
+    const height = Math.max(1, Math.floor(this.canvas.clientHeight || this.canvas.getBoundingClientRect?.().height || this.viewport.viewportHeight));
+    return { left, top, width, height };
+  }
+
   #computeInspectorPaneLabelEnd(visibleRange) {
     const column = this.columnModel.columns.find((item) => item.kind === 'inspectorPane');
     if (!column) return 0;
@@ -1133,6 +1172,7 @@ export class TreeViewController {
 
   #resizeObserver = null;
   #nativeScroll = null;
+  #nativeScrollbarSize = 0;
 }
 
 const NATIVE_SCROLLBAR_STYLE_ID = 'virtual-tree-canvas-native-scrollbar-style';