virtual-tree-canvas 0.6.0 → 0.7.1

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

@@ -1,4 +1,5 @@
 export class TreeViewInputController {
+
   /**
    * @param {{
    *   controller: import('../tree-view-controller.js').TreeViewController,
@@ -6,8 +7,10 @@ export class TreeViewInputController {
    * }} options
    */
   constructor(options) {
-    if (!options?.controller) throw new TypeError('TreeViewInputController requires a TreeViewController');
-    if (!options.controller.canvas) throw new Error('TreeViewInputController requires an initialized TreeViewController canvas');
+    if (!options?.controller)
+      throw new TypeError('TreeViewInputController requires a TreeViewController');
+    if (!options.controller.canvas)
+      throw new Error('TreeViewInputController requires an initialized TreeViewController canvas');
     this.controller = options.controller;
     this.canvas = options.controller.canvas;
     this.hoveredId = null;
@@ -15,10 +18,12 @@ export class TreeViewInputController {
     this.cellEditor = options.cellEditor ?? null;
     this.canvas.tabIndex = 0;
 
-    this.canvas.addEventListener('wheel', this.#onWheel, { passive: false });
+    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.ownerDocument.defaultView ?? window).addEventListener('mouseup', this.#onMouseUp);
     this.canvas.addEventListener('mouseleave', this.#onMouseLeave);
     this.canvas.addEventListener('click', this.#onClick);
     this.canvas.addEventListener('dblclick', this.#onDoubleClick);
@@ -29,7 +34,10 @@ export class TreeViewInputController {
     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.ownerDocument.defaultView ?? window).removeEventListener(
+      'mouseup',
+      this.#onMouseUp
+    );
     this.canvas.removeEventListener('mouseleave', this.#onMouseLeave);
     this.canvas.removeEventListener('click', this.#onClick);
     this.canvas.removeEventListener('dblclick', this.#onDoubleClick);
@@ -71,13 +79,18 @@ export class TreeViewInputController {
   };
 
   #onClick = (event) => {
-    this.canvas.focus();
+    if (this.controller.rowReorderInput?.suppressClick) {
+      this.controller.rowReorderInput.suppressClick = false;
+      event.preventDefault();
+      return;
+    }
     const hit = this.#hitTest(event);
     if (!hit) return;
     if (['rowDrag', 'rowUp', 'rowDown'].includes(hit.part)) 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);
+      if (!this.resizeDrag && hit.part === 'label' && hit.column)
+        this.controller.sortBy(hit.column.id);
       return;
     }
     if (hit.part === 'chevron' && hit.row.hasChildren) {
@@ -85,11 +98,14 @@ export class TreeViewInputController {
       return;
     }
     if (this.cellEditor?.handleClick(event, hit)) return;
+    this.canvas.focus({
+      preventScroll: true
+    });
     this.controller.clickNode(hit.row.nodeId, {
       shiftKey: event.shiftKey,
       ctrlKey: event.ctrlKey,
       metaKey: event.metaKey,
-      multi: this.canvas.dataset.multi === 'true',
+      multi: this.canvas.dataset.multi === 'true'
     });
   };
 
@@ -99,6 +115,7 @@ export class TreeViewInputController {
   };
 
   #onMouseDown = (event) => {
+    if (this.controller.rowReorderInput?.gesture) return;
     const hit = this.#hitTest(event);
     if (['rowDrag', 'rowUp', 'rowDown'].includes(hit?.part)) return;
     this.controller.setActiveHit(hit);
@@ -111,7 +128,7 @@ export class TreeViewInputController {
     this.resizeDrag = {
       columnId: hit.column.id,
       startX: event.clientX - rect.left,
-      startWidth: hit.column.width,
+      startWidth: hit.column.width
     };
     this.canvas.style.cursor = 'col-resize';
     event.preventDefault();
@@ -135,6 +152,7 @@ export class TreeViewInputController {
     const clientY = event.clientY - rect.top;
     return this.controller.hitTest(clientX, clientY);
   }
+
 }
 
 function cursorForHit(hit) {
@@ -143,7 +161,14 @@ function cursorForHit(hit) {
   if (hit?.area === 'header' && hit.part === 'resize') return 'col-resize';
   if (hit?.area === 'header' && hit.part === 'filter') return 'text';
   if (hit?.area !== 'row') return '';
-  if (hit.part === 'button' || hit.part === 'checkbox' || hit.part === 'arrayAdd' || hit.part === 'arrayRemove' || hit.part === 'chevron') return 'pointer';
+  if (
+    hit.part === 'button' ||
+    hit.part === 'checkbox' ||
+    hit.part === 'arrayAdd' ||
+    hit.part === 'arrayRemove' ||
+    hit.part === 'chevron'
+  )
+    return 'pointer';
   if (hit.part === 'editor' || hit.part === 'number') return 'text';
   if (hit.part === 'range') return 'ew-resize';
   return '';

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

@@ -3,14 +3,17 @@ import { numericLayout } from './numeric-layout.js';
 export class CellEditorManager {
   constructor({ controller, host = null }) {
     if (!controller) throw new TypeError('CellEditorManager requires a TreeViewController');
-    if (!controller.canvas) throw new Error('CellEditorManager requires an initialized TreeViewController canvas');
+    if (!controller.canvas)
+      throw new Error('CellEditorManager requires an initialized TreeViewController canvas');
     this.controller = controller;
     this.canvas = controller.canvas;
+    this.view = this.canvas.ownerDocument.defaultView;
     this.host = host ?? controller.canvas.parentElement ?? document.body;
     this.editable = true;
     this.overlay = null;
     this.rangeDrag = null;
     this.overlayKind = null;
+    this.overlayNode = null;
     this.stopFilter = controller.on('filterchange', ({ detail }) => {
       if (this.overlayKind === 'filter' && this.overlay) this.overlay.value = detail.query;
     });
@@ -26,15 +29,32 @@ export class CellEditorManager {
   destroy() {
     this.stopFilter();
     this.#removeOverlay();
-    window.removeEventListener('mousemove', this.onMouseMove);
-    window.removeEventListener('mouseup', this.onMouseUp);
+    this.view.removeEventListener('mousemove', this.onMouseMove);
+    this.view.removeEventListener('mouseup', this.onMouseUp);
   }
 
   close() {
     this.#removeOverlay();
     this.rangeDrag = null;
-    window.removeEventListener('mousemove', this.onMouseMove);
-    window.removeEventListener('mouseup', this.onMouseUp);
+    this.view.removeEventListener('mousemove', this.onMouseMove);
+    this.view.removeEventListener('mouseup', this.onMouseUp);
+  }
+
+  /**
+   * Keep an in-progress edit while values refresh; cancel if its editor changes.
+   */
+  reconcile(nodes) {
+    const previous = this.overlayNode ?? this.rangeDrag?.node;
+    if (!previous) return;
+    const next = nodes.find((node) => node.id === previous.id);
+    const signature = (data) =>
+      JSON.stringify([
+        data.editorType,
+        data.readonly,
+        data.disabled,
+        ...['min', 'max', 'step', 'integer', 'options', 'unit'].map((key) => data.meta?.[key])
+      ]);
+    if (!next || signature(previous.data) !== signature(next.data)) this.close();
   }
 
   handlePointerDown(event, hit) {
@@ -42,15 +62,21 @@ export class CellEditorManager {
     const data = hit.row ? this.controller.model.nodes[hit.row.nodeIndex]?.data : null;
     if (!data || data.readonly || data.disabled) return false;
     if (data.editorType === 'range' && hit.part === 'range') {
-      this.rangeDrag = { hit, data };
+      this.rangeDrag = {
+        hit,
+        data,
+        node: this.controller.model.nodes[hit.row.nodeIndex]
+      };
       this.#updateRangeFromEvent(event);
-      window.addEventListener('mousemove', this.onMouseMove);
-      window.addEventListener('mouseup', this.onMouseUp);
+      this.view.addEventListener('mousemove', this.onMouseMove);
+      this.view.addEventListener('mouseup', this.onMouseUp);
       return true;
     }
     if (shouldOpenOverlayOnPointerDown(data, hit)) {
       const node = this.controller.model.nodes[hit.row.nodeIndex];
-      this.#showOverlay(node, hit, { showPicker: true });
+      this.#showOverlay(node, hit, {
+        showPicker: true
+      });
       return true;
     }
     return false;
@@ -94,7 +120,10 @@ export class CellEditorManager {
     const hostRect = this.host.getBoundingClientRect();
     const element = createEditorElement(data);
     element.className = `vtc-editor vtc-editor-${data.editorType}`;
-    element.setAttribute('aria-label', [node.label, numericLayout(rect.width, data).unit].filter(Boolean).join(' '));
+    element.setAttribute(
+      'aria-label',
+      [node.label, numericLayout(rect.width, data).unit].filter(Boolean).join(' ')
+    );
     Object.assign(element.style, {
       position: 'absolute',
       left: `${rect.x - hostRect.left}px`,
@@ -114,8 +143,13 @@ export class CellEditorManager {
       color: '#e5e7eb',
       boxShadow: '0 0 0 1px rgba(15, 23, 42, 0.8), 0 8px 20px rgba(0, 0, 0, 0.28)',
       font: editorFont(data),
-      padding: data.editorType === 'color' ? '0 2px' : data.editorType === 'select' ? '0 22px 0 8px' : '0 8px',
-      textAlign: data.editorType === 'number' || data.editorType === 'range' ? 'right' : 'left',
+      padding:
+        data.editorType === 'color'
+          ? '0 2px'
+          : data.editorType === 'select'
+            ? '0 22px 0 8px'
+            : '0 8px',
+      textAlign: data.editorType === 'number' || data.editorType === 'range' ? 'right' : 'left'
     });
     let committed = false;
     const commit = () => {
@@ -137,7 +171,10 @@ export class CellEditorManager {
     this.host.append(element);
     this.overlay = element;
     this.overlayKind = 'value';
-    element.focus({ preventScroll: true });
+    this.overlayNode = node;
+    element.focus({
+      preventScroll: true
+    });
     element.select?.();
     if (options.showPicker && element.showPicker) {
       requestAnimationFrame(() => {
@@ -153,12 +190,18 @@ export class CellEditorManager {
   #showHeaderFilterOverlay(hit) {
     this.#removeOverlay();
     const headerRect = this.controller.getHeaderClientRect(hit);
-    const rect = this.#clampRectToHost({
-      x: headerRect.x + 8,
-      y: headerRect.y + 5,
-      width: Math.max(24, Math.min(headerRect.width, this.controller.viewport.contentViewportWidth) - 16),
-      height: Math.max(20, headerRect.height - 10),
-    }, 0);
+    const rect = this.#clampRectToHost(
+      {
+        x: headerRect.x + 8,
+        y: headerRect.y + 5,
+        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();
     const element = document.createElement('input');
     element.type = 'search';
@@ -181,7 +224,7 @@ export class CellEditorManager {
       background: '#0b1020',
       color: '#e5e7eb',
       font: SANS_FONT,
-      padding: '0 8px',
+      padding: '0 8px'
     });
     element.addEventListener('input', () => this.controller.setFilter(element.value));
     element.addEventListener('keydown', (event) => {
@@ -193,7 +236,9 @@ export class CellEditorManager {
     this.host.append(element);
     this.overlay = element;
     this.overlayKind = 'filter';
-    element.focus({ preventScroll: true });
+    element.focus({
+      preventScroll: true
+    });
     element.select();
   }
 
@@ -219,23 +264,44 @@ export class CellEditorManager {
 
   #onMouseUp() {
     this.rangeDrag = null;
-    window.removeEventListener('mousemove', this.onMouseMove);
-    window.removeEventListener('mouseup', this.onMouseUp);
+    this.view.removeEventListener('mousemove', this.onMouseMove);
+    this.view.removeEventListener('mouseup', this.onMouseUp);
   }
 
   #isEditableHit(hit) {
-    return hit?.area === 'row' && hit.part !== 'unit' && (hit.column?.kind === 'inspectorValue' || hit.column?.kind === 'inspectorPane');
+    return (
+      hit?.area === 'row' &&
+      hit.part !== 'unit' &&
+      (hit.column?.kind === 'inspectorValue' || hit.column?.kind === 'inspectorPane')
+    );
   }
 
   #editorContentRect(hit) {
     const rect = this.controller.getCellClientRect(hit);
     if (hit.column?.kind !== 'inspectorPane') {
-      return { x: rect.x + 10, y: rect.y + 4, width: Math.max(24, rect.width - 20), height: rect.height - 8 };
+      return {
+        x: rect.x + 10,
+        y: rect.y + 4,
+        width: Math.max(24, rect.width - 20),
+        height: rect.height - 8
+      };
     }
-    const visibleWidth = Math.max(1, Math.min(rect.width, this.controller.viewport.contentViewportWidth));
+    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);
-    return { x: rect.x + editorLeft + 10, y: rect.y + 4, width: Math.max(24, editorWidth - 20), height: rect.height - 8 };
+    const { editorLeft, editorWidth } = this.controller.getInspectorPaneLayout(
+      visibleWidth,
+      hit.row,
+      data.editorType
+    );
+    return {
+      x: rect.x + editorLeft + 10,
+      y: rect.y + 4,
+      width: Math.max(24, editorWidth - 20),
+      height: rect.height - 8
+    };
   }
 
   #overlayRect(hit) {
@@ -243,9 +309,17 @@ export class CellEditorManager {
     const rect = this.#editorContentRect(hit);
     const layout = numericLayout(rect.width, data);
     if (hit.part === 'number' && data.editorType === 'range') {
-      return { ...rect, x: rect.x + layout.numberLeft, width: layout.valueWidth };
+      return {
+        ...rect,
+        x: rect.x + layout.numberLeft,
+        width: layout.valueWidth
+      };
     }
-    if (layout.unit) return { ...rect, width: layout.contentWidth };
+    if (layout.unit)
+      return {
+        ...rect,
+        width: layout.contentWidth
+      };
     if (hit.column?.kind !== 'inspectorPane') return this.controller.getCellClientRect(hit);
     return rect;
   }
@@ -253,7 +327,12 @@ export class CellEditorManager {
   #rangeBarRect(hit) {
     const data = this.controller.model.nodes[hit.row.nodeIndex]?.data ?? {};
     const rect = this.#editorContentRect(hit);
-    return { ...rect, y: rect.y + rect.height / 2 - 4, width: numericLayout(rect.width, data).barWidth, height: 8 };
+    return {
+      ...rect,
+      y: rect.y + rect.height / 2 - 4,
+      width: numericLayout(rect.width, data).barWidth,
+      height: 8
+    };
   }
 
   #clampRectToHost(rect, inset = 0) {
@@ -266,13 +345,19 @@ export class CellEditorManager {
     const height = Math.max(18, Math.min(rect.height, maxY - minY));
     const x = Math.max(minX, Math.min(rect.x, maxX - width));
     const y = Math.max(minY, Math.min(rect.y, maxY - height));
-    return { x, y, width, height };
+    return {
+      x,
+      y,
+      width,
+      height
+    };
   }
 
   #removeOverlay() {
     const overlay = this.overlay;
     this.overlay = null;
     this.overlayKind = null;
+    this.overlayNode = null;
     overlay?.remove();
   }
 
@@ -280,9 +365,11 @@ export class CellEditorManager {
     const meta = data.meta ?? {};
     const min = Number.isFinite(meta.min) ? meta.min : 0;
     const max = Number.isFinite(meta.max) ? meta.max : 100;
-    const current = typeof data.value === 'number' && Number.isFinite(data.value) ? data.value : min;
+    const current =
+      typeof data.value === 'number' && Number.isFinite(data.value) ? data.value : min;
     this.controller.updateInspectorValue(node.id, current <= min ? max : min, 'range');
   }
+
 }
 
 function createEditorElement(data) {
@@ -312,7 +399,12 @@ function createEditorElement(data) {
 function shouldOpenOverlayOnPointerDown(data, hit) {
   if (data.readonly || data.disabled) return false;
   if (data.editorType === 'range') return hit.part === 'number';
-  return data.editorType === 'text' || data.editorType === 'number' || data.editorType === 'select' || data.editorType === 'color';
+  return (
+    data.editorType === 'text' ||
+    data.editorType === 'number' ||
+    data.editorType === 'select' ||
+    data.editorType === 'color'
+  );
 }
 
 function ensureOverlayHost(host) {
@@ -338,7 +430,8 @@ function parseEditorValue(element, data) {
 }
 
 const SANS_FONT = '12px Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif';
-const MONO_FONT = '12px "JetBrains Mono", "Cascadia Mono", "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace';
+const MONO_FONT =
+  '12px "JetBrains Mono", "Cascadia Mono", "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace';
 
 function editorFont(data) {
   return data.editorType === 'number' || data.editorType === 'range' ? MONO_FONT : SANS_FONT;

package/src/inspector/pane-layout.js

@@ -0,0 +1,20 @@
+export function inspectorPaneLayout(
+  width,
+  depth = 0,
+  indentWidth = 18,
+  editorType = '',
+  labelEnd = 0
+) {
+  const safeWidth = Math.max(1, width);
+  const rightPadding = 14;
+  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
+  };
+}

package/src/renderers/checkbox.js

@@ -0,0 +1,13 @@
+export function drawCheckbox(ctx, x, y, checked, theme) {
+  ctx.beginPath();
+  ctx.roundRect(x, y, 16, 16, 3);
+  ctx.fillStyle = theme.colors.progressTrack;
+  ctx.fill();
+  ctx.strokeStyle = checked ? theme.colors.progressFill : theme.colors.textMuted;
+  ctx.stroke();
+  if (!checked) return;
+  ctx.fillStyle = theme.colors.progressFill;
+  ctx.beginPath();
+  ctx.roundRect(x + 4, y + 4, 8, 8, 1.5);
+  ctx.fill();
+}