virtual-tree-canvas 0.7.0 → 0.7.2

package/src/input/row-reorder-input.js

@@ -1,6 +1,8 @@
 let nextStatusId = 0;
 
-/** Pointer interaction for the optional row-order column; persistence belongs to the host. */
+/**
+ * Pointer interaction for the optional row-order column; persistence belongs to the host.
+ */
 export class RowReorderInput {
   constructor(controller) {
     this.controller = controller;
@@ -16,61 +18,97 @@ export class RowReorderInput {
     this.view.addEventListener('pointerup', this.onUp);
     this.view.addEventListener('pointercancel', this.onCancel);
     this.view.addEventListener('blur', this.cancel);
-    this.stops = ['filterchange', 'sortchange', 'rowreorderchange'].map(type => controller.on(type, () => {
-      this.cancel();
-      this.syncMode();
-    }));
-    this.stops.push(controller.on('datachange', () => {
-      if (this.gesture && !controller.model.index.getNode(this.gesture.id)) this.cancel();
-    }));
-    this.stops.push(controller.on('rowreorder', event => {
-      if (!this.status) return;
-      const { nodeId, toIndex, siblingOrder } = event.detail;
-      const label = controller.model.index.getNode(nodeId)?.label ?? nodeId;
-      this.status.textContent = `${label}: position ${toIndex + 1} of ${siblingOrder.length}`;
-    }));
+    this.stops = ['filterchange', 'sortchange', 'rowreorderchange'].map((type) =>
+      controller.on(type, () => {
+        this.cancel();
+        this.syncMode();
+      })
+    );
+    this.stops.push(
+      controller.on('datachange', () => {
+        if (this.gesture && !controller.model.index.getNode(this.gesture.id)) this.cancel();
+      })
+    );
+    this.stops.push(
+      controller.on('rowreorder', (event) => {
+        if (!this.status) return;
+        const { nodeId, toIndex, siblingOrder } = event.detail;
+        const label = controller.model.index.getNode(nodeId)?.label ?? nodeId;
+        this.status.textContent = `${label}: position ${toIndex + 1} of ${siblingOrder.length}`;
+      })
+    );
     const doc = this.canvas.ownerDocument;
     if (doc?.createElement && this.canvas.parentElement) {
       this.status = doc.createElement('span');
       this.status.id = `vtc-row-order-status-${nextStatusId++}`;
       this.status.setAttribute('aria-live', 'polite');
-      Object.assign(this.status.style, { position: 'absolute', width: '1px', height: '1px', overflow: 'hidden', clipPath: 'inset(50%)' });
+      Object.assign(this.status.style, {
+        position: 'absolute',
+        width: '1px',
+        height: '1px',
+        overflow: 'hidden',
+        clipPath: 'inset(50%)'
+      });
       this.canvas.parentElement.appendChild(this.status);
     }
     this.syncMode();
   }
 
   syncMode() {
-    this.canvas.style.touchAction = (this.controller.canReorderRows() || this.controller.rowDrag) ? 'none' : this.previousTouchAction;
+    this.canvas.style.touchAction =
+      this.controller.canReorderRows() || this.controller.rowDrag
+        ? 'none'
+        : this.previousTouchAction;
   }
 
-  onDown = event => {
+  onDown = (event) => {
     if (event.button !== 0 || event.isPrimary === false || this.gesture) return;
     this.suppressClick = false;
     const point = this.point(event);
     const hit = this.controller.hitTest(point.x, point.y);
     if (!hit?.row) return;
     const node = this.controller.model.index.getNode(hit.row.nodeId);
-    const payload = this.controller.rowDrag?.(node, this.controller.model.dynamicState.get(node.id) ?? {}) ?? null;
+    const payload =
+      this.controller.rowDrag?.(node, this.controller.model.dynamicState.get(node.id) ?? {}) ??
+      null;
     const orderPart = ['rowDrag', 'rowUp', 'rowDown'].includes(hit.part);
     if (orderPart && node.reorderable === false) return;
-    if (orderPart ? !this.controller.canReorderRows() && !(payload != null && hit.part === 'rowDrag') : payload == null || !['label', 'row', 'icon', 'cell'].includes(hit.part)) return;
-    this.canvas.focus({ preventScroll: true });
+    if (
+      orderPart
+        ? !this.controller.canReorderRows() && !(payload != null && hit.part === 'rowDrag')
+        : payload == null || !['label', 'row', 'icon', 'cell'].includes(hit.part)
+    )
+      return;
+    this.canvas.focus({
+      preventScroll: true
+    });
     this.controller.cellEditor?.close?.();
     this.controller.focusedId = hit.row.nodeId;
-    this.gesture = { id: hit.row.nodeId, part: orderPart ? hit.part : 'rowDrag', payload, pointerId: event.pointerId,
-      startX: point.x, startY: point.y, point, dragging: false };
+    this.gesture = {
+      id: hit.row.nodeId,
+      part: orderPart ? hit.part : 'rowDrag',
+      payload,
+      pointerId: event.pointerId,
+      startX: point.x,
+      startY: point.y,
+      point,
+      dragging: false
+    };
     this.canvas.setPointerCapture?.(event.pointerId);
     event.stopPropagation();
     if (orderPart) event.preventDefault();
   };
 
-  onMove = event => {
+  onMove = (event) => {
     const gesture = this.gesture;
     if (!gesture || event.pointerId !== gesture.pointerId) return;
     gesture.point = this.point(event);
     if (gesture.part !== 'rowDrag') return;
-    if (!gesture.dragging && Math.hypot(gesture.point.x - gesture.startX, gesture.point.y - gesture.startY) < 5) return;
+    if (
+      !gesture.dragging &&
+      Math.hypot(gesture.point.x - gesture.startX, gesture.point.y - gesture.startY) < 5
+    )
+      return;
     if (!gesture.dragging && gesture.payload != null) this.emitDrag('rowdragstart', event);
     gesture.dragging = true;
     if (gesture.payload != null) this.emitDrag('rowdragmove', event);
@@ -80,24 +118,37 @@ export class RowReorderInput {
     event.preventDefault();
   };
 
-  onUp = event => {
+  onUp = (event) => {
     const gesture = this.gesture;
     if (!gesture || event.pointerId !== gesture.pointerId) return;
     gesture.point = this.point(event);
-    const target = gesture.dragging ? this.controller.getRowDropTarget(gesture.id, gesture.point.x, gesture.point.y) : null;
+    const target = gesture.dragging
+      ? this.controller.getRowDropTarget(gesture.id, gesture.point.x, gesture.point.y)
+      : null;
     const hit = this.controller.hitTest(gesture.point.x, gesture.point.y);
     if (gesture.dragging && gesture.payload != null) this.emitDrag('rowdragend', event);
     this.suppressClick = gesture.dragging;
     this.cancel(false);
-    if (target) this.controller.moveRow(gesture.id, target.index, { source: 'pointer' });
+    if (target)
+      this.controller.moveRow(gesture.id, target.index, {
+        source: 'pointer'
+      });
     else if (!gesture.dragging && hit?.row?.nodeId === gesture.id && hit.part === gesture.part) {
-      if (gesture.part === 'rowUp') this.controller.moveRowBy(gesture.id, -1, { source: 'button' });
-      if (gesture.part === 'rowDown') this.controller.moveRowBy(gesture.id, 1, { source: 'button' });
+      if (gesture.part === 'rowUp')
+        this.controller.moveRowBy(gesture.id, -1, {
+          source: 'button'
+        });
+      if (gesture.part === 'rowDown')
+        this.controller.moveRowBy(gesture.id, 1, {
+          source: 'button'
+        });
     }
   };
 
-  onCancel = event => { if (this.gesture?.pointerId === event.pointerId) this.cancel(); };
-  onKey = event => {
+  onCancel = (event) => {
+    if (this.gesture?.pointerId === event.pointerId) this.cancel();
+  };
+  onKey = (event) => {
     if (event.key === 'Escape' && this.gesture) {
       this.cancel();
       event.preventDefault();
@@ -106,24 +157,38 @@ export class RowReorderInput {
 
   point(event) {
     const rect = this.canvas.getBoundingClientRect();
-    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    return {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    };
   }
 
   updateTarget() {
     const gesture = this.gesture;
-    this.controller.setRowDrop(gesture ? this.controller.getRowDropTarget(gesture.id, gesture.point.x, gesture.point.y) : null);
+    this.controller.setRowDrop(
+      gesture
+        ? this.controller.getRowDropTarget(gesture.id, gesture.point.x, gesture.point.y)
+        : null
+    );
   }
 
   scheduleScroll() {
     if (this.frame !== null || !this.gesture?.dragging) return;
     const viewport = this.controller.viewport;
-    if (this.gesture.point.x < 0 || this.gesture.point.x > viewport.viewportWidth || this.gesture.point.y < 0 || this.gesture.point.y > viewport.viewportHeight) return;
+    if (
+      this.gesture.point.x < 0 ||
+      this.gesture.point.x > viewport.viewportWidth ||
+      this.gesture.point.y < 0 ||
+      this.gesture.point.y > viewport.viewportHeight
+    )
+      return;
     const y = this.gesture.point.y - viewport.renderInsetY;
     const top = viewport.headerHeight;
     const bottom = top + viewport.rowViewportHeight;
     const delta = y < top + 24 ? -10 : y > bottom - 24 ? 10 : 0;
     if (!delta) return;
-    const schedule = this.view.requestAnimationFrame?.bind(this.view) ?? (callback => setTimeout(callback, 16));
+    const schedule =
+      this.view.requestAnimationFrame?.bind(this.view) ?? ((callback) => setTimeout(callback, 16));
     this.frame = schedule(() => {
       this.frame = null;
       if (!this.gesture?.dragging) return;
@@ -136,8 +201,13 @@ export class RowReorderInput {
 
   emitDrag(type, originalEvent) {
     const gesture = this.gesture;
-    if (gesture) this.controller.events.emit(type, { nodeId: gesture.id, payload: gesture.payload,
-      label: this.controller.model.index.getNode(gesture.id)?.label ?? gesture.id, originalEvent });
+    if (gesture)
+      this.controller.events.emit(type, {
+        nodeId: gesture.id,
+        payload: gesture.payload,
+        label: this.controller.model.index.getNode(gesture.id)?.label ?? gesture.id,
+        originalEvent
+      });
   }
 
   cancel = (notify = true) => {
@@ -145,9 +215,11 @@ export class RowReorderInput {
     if (gesture?.dragging) this.suppressClick = true;
     if (notify && gesture?.dragging && gesture.payload != null) this.emitDrag('rowdragcancel');
     this.gesture = null;
-    if (this.frame !== null) (this.view.cancelAnimationFrame?.bind(this.view) ?? clearTimeout)(this.frame);
+    if (this.frame !== null)
+      (this.view.cancelAnimationFrame?.bind(this.view) ?? clearTimeout)(this.frame);
     this.frame = null;
-    if (gesture && this.canvas.hasPointerCapture?.(gesture.pointerId)) this.canvas.releasePointerCapture(gesture.pointerId);
+    if (gesture && this.canvas.hasPointerCapture?.(gesture.pointerId))
+      this.canvas.releasePointerCapture(gesture.pointerId);
     this.canvas.style.cursor = '';
     this.controller.setRowDrop(null);
   };
@@ -165,4 +237,5 @@ export class RowReorderInput {
     for (const stop of this.stops) stop();
     this.status?.remove();
   }
+
 }

package/src/input/tree-tooltip.js

@@ -4,6 +4,8 @@ export class TreeTooltip {
     this.controller = controller;
     this.canvas = controller.canvas;
     this.host = host;
+    this.pointer = null;
+    this.targetKey = null;
     if (!this.canvas || !host?.ownerDocument) throw new Error('TreeTooltip requires a mounted canvas and host');
     this.element = host.ownerDocument.createElement('div');
     this.element.className = 'virtual-tree-canvas-tooltip';
@@ -17,13 +19,28 @@ export class TreeTooltip {
     });
     host.appendChild(this.element);
     this.canvas.addEventListener('mousemove', this.onMove);
-    this.canvas.addEventListener('mouseleave', this.hide);
+    this.canvas.addEventListener('mouseleave', this.onLeave);
     this.canvas.addEventListener('wheel', this.hide);
     this.canvas.addEventListener('pointerdown', this.hide);
-    this.stops = ['viewportchange', 'filterchange', 'datachange', 'rowdrag'].map(type => controller.on(type, this.hide));
+    this.stops = [
+      ...['viewportchange', 'filterchange', 'rowdrag'].map(type => controller.on(type, this.hide)),
+      controller.on('datachange', this.refresh)
+    ];
   }
 
   onMove = event => {
+    this.pointer = { clientX: event.clientX, clientY: event.clientY };
+    this.#update(true, false);
+  };
+
+  /** Refresh a visible tooltip without requiring another mousemove event. */
+  refresh = () => {
+    if (this.element.style.display === 'none' || !this.pointer) return;
+    this.#update(false, true);
+  };
+
+  #update(reposition, preserveTarget) {
+    const event = this.pointer;
     const rect = this.canvas.getBoundingClientRect();
     const hit = this.controller.hitTest(event.clientX - rect.left, event.clientY - rect.top);
     let text;
@@ -33,23 +50,40 @@ export class TreeTooltip {
         : 'Clear sorting and filtering to reorder rows.';
     } else text = this.controller.getTooltipForHit(hit)?.text;
     if (!text || this.controller.rowReorderInput?.gesture) return this.hide();
+    const targetKey = tooltipTargetKey(hit);
+    if (preserveTarget && targetKey !== this.targetKey) return this.hide();
+    this.targetKey = targetKey;
+    if (this.element.textContent !== text) this.element.textContent = text;
+    if (!reposition) return;
     const hostRect = this.host.getBoundingClientRect();
-    this.element.textContent = text;
     this.element.style.display = 'block';
     const x = event.clientX - hostRect.left + 12;
     const y = event.clientY - hostRect.top + 14;
     this.element.style.left = `${Math.max(8, Math.min(x, hostRect.width - this.element.offsetWidth - 8))}px`;
     this.element.style.top = `${Math.max(8, Math.min(y, hostRect.height - this.element.offsetHeight - 8))}px`;
+  }
+
+  hide = () => {
+    this.element.style.display = 'none';
+    this.targetKey = null;
   };
 
-  hide = () => { this.element.style.display = 'none'; };
+  onLeave = () => {
+    this.pointer = null;
+    this.hide();
+  };
 
   destroy() {
     this.canvas.removeEventListener('mousemove', this.onMove);
-    this.canvas.removeEventListener('mouseleave', this.hide);
+    this.canvas.removeEventListener('mouseleave', this.onLeave);
     this.canvas.removeEventListener('wheel', this.hide);
     this.canvas.removeEventListener('pointerdown', this.hide);
     for (const stop of this.stops) stop();
     this.element.remove();
   }
 }
+
+function tooltipTargetKey(hit) {
+  if (!hit) return '';
+  return `${hit.area ?? ''}\0${hit.row?.nodeId ?? ''}\0${hit.column?.id ?? ''}\0${hit.part ?? ''}`;
+}

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,7 +18,9 @@ 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);
     (this.canvas.ownerDocument.defaultView ?? window).addEventListener('mouseup', this.#onMouseUp);
@@ -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);
-    (this.canvas.ownerDocument.defaultView ?? 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) => {
-    if (this.controller.rowReorderInput?.suppressClick) { this.controller.rowReorderInput.suppressClick = false; event.preventDefault(); return; }
+    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,12 +98,14 @@ export class TreeViewInputController {
       return;
     }
     if (this.cellEditor?.handleClick(event, hit)) return;
-    this.canvas.focus({ preventScroll: true });
+    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'
     });
   };
 
@@ -113,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();
@@ -137,6 +152,7 @@ export class TreeViewInputController {
     const clientY = event.clientY - rect.top;
     return this.controller.hitTest(clientX, clientY);
   }
+
 }
 
 function cursorForHit(hit) {
@@ -145,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 '';