virtual-tree-canvas 0.6.0 → 0.7.1

package/src/input/row-actions.js

@@ -0,0 +1,248 @@
+import { drawCheckbox } from '../renderers/checkbox.js';
+
+/** Accessible buttons for visible rows. Actions and their meaning belong to the host. */
+export class RowActions {
+  constructor(controller) {
+    this.controller = controller;
+    this.buttons = new Map();
+    this.buttonsByNodeId = new Map();
+    this.actionsById = new Map();
+    this.visibleRowsById = new Map();
+    this.preparedIcons = new Set();
+    this.fullUpdates = 0;
+    this.incrementalUpdates = 0;
+    this.themeToken = 0;
+    this.theme = null;
+    this.element = controller.canvas.ownerDocument.createElement('div');
+    Object.assign(this.element.style, {
+      position: 'absolute', overflow: 'hidden', pointerEvents: 'none', zIndex: '2'
+    });
+    const style = controller.canvas.ownerDocument.createElement('style');
+    style.textContent = `
+      .vtc-row-action { appearance:none; display:flex; align-items:center; justify-content:center;
+        background:transparent; color:inherit; outline:none; }
+      .vtc-row-action:hover:not(:disabled) canvas { filter:brightness(1.45) drop-shadow(0 0 2px var(--vtc-action-focus)); }
+      .vtc-row-action:focus-visible { outline:1px solid var(--vtc-action-focus); outline-offset:-2px; }
+    `;
+    this.element.append(style);
+    controller.canvas.parentElement?.append(this.element);
+    this.element.addEventListener('pointerdown', (event) => event.stopPropagation());
+  }
+
+  /** @param {object} scene @param {{full?: boolean, dirtyNodeIds?: Set<string>}} invalidation */
+  render(scene, invalidation = { full: true }) {
+    if (!invalidation.full && invalidation.dirtyNodeIds?.size) {
+      this.incrementalUpdates++;
+      for (const id of invalidation.dirtyNodeIds) this.#syncDynamicRow(id, scene);
+      return;
+    }
+    this.fullUpdates++;
+    this.#syncAll(scene);
+  }
+
+  #syncAll(scene) {
+    const { viewport, theme, rows, visibleRange, stickyRows } = scene;
+    if (this.theme !== theme) {
+      this.theme = theme;
+      this.themeToken++;
+    }
+    this.actionsById.clear();
+    for (const action of this.controller.rowActions) this.actionsById.set(action.id, action);
+    const ratio = Math.max(1, this.element.ownerDocument.defaultView.devicePixelRatio || 1);
+    this.#prepareIcons(theme, ratio);
+    const column = scene.columns.find((column) => column.id === '__vtc_actions');
+    const width = column?.width ?? 0;
+    setStyle(this.element, '--vtc-action-focus', theme.colors.focus);
+    setStyle(this.element, 'background', 'transparent');
+    setStyle(this.element, 'left', `${viewport.renderInsetX + Math.max(0, viewport.contentViewportWidth - width)}px`);
+    setStyle(this.element, 'top', `${viewport.renderInsetY + viewport.headerHeight}px`);
+    setStyle(this.element, 'width', `${width}px`);
+    setStyle(this.element, 'height', `${viewport.rowViewportHeight}px`);
+
+    const used = new Set();
+    this.visibleRowsById.clear();
+    if (column) {
+      const stickyBottom = stickyRows.reduce(
+        (end, row) => Math.max(end, row.stickyY + row.height), 0
+      );
+      for (let i = visibleRange.first; i <= visibleRange.last; i++) {
+        const row = rows[i];
+        if (!row || row.y + row.height - viewport.scrollY <= stickyBottom) continue;
+        this.#rememberVisibleRow(row, row.y - viewport.scrollY, false, stickyBottom, viewport);
+      }
+      for (const row of stickyRows) {
+        this.#rememberVisibleRow(row, row.stickyY, true, stickyBottom, viewport);
+      }
+      for (const info of this.visibleRowsById.values()) this.#syncRow(info, scene, used, ratio);
+    }
+    for (const [key, button] of this.buttons) {
+      if (!used.has(button)) this.#removeButton(key, button, true);
+    }
+  }
+
+  #rememberVisibleRow(row, y, sticky, stickyBottom, viewport) {
+    if (y + row.height <= 0 || y >= viewport.rowViewportHeight) return;
+    this.visibleRowsById.set(row.nodeId, { row, y, sticky, stickyBottom });
+  }
+
+  #syncDynamicRow(id, scene) {
+    const info = this.visibleRowsById.get(id);
+    if (!info) return;
+    const ratio = Math.max(1, this.element.ownerDocument.defaultView.devicePixelRatio || 1);
+    this.#syncRow(info, scene, null, ratio);
+  }
+
+  #syncRow(info, scene, used, ratio) {
+    const { row, y, sticky, stickyBottom } = info;
+    const node = this.controller.model.index.getNode(row.nodeId);
+    if (!node) return;
+    const state = this.controller.model.dynamicState.get(node.id) ?? {};
+    this.controller.rowActions.forEach((action, index) => {
+      const visible = resolve(action.visible, node, state) !== false;
+      const key = actionKey(node.id, action.id);
+      let button = this.buttons.get(key);
+      if (!visible) {
+        if (button) this.#removeButton(key, button, false);
+        return;
+      }
+      if (button?._vtcKind !== action.kind) {
+        this.#removeButton(key, button, false);
+        button = null;
+      }
+      if (!button) button = this.#createButton(key, node, action);
+      used?.add(button);
+      this.#syncButton(button, node, state, action, index, row, y, sticky, stickyBottom, scene, ratio);
+    });
+  }
+
+  #createButton(key, node, action) {
+    const button = this.element.ownerDocument.createElement('button');
+    button.type = 'button';
+    button._vtcKind = action.kind;
+    if (action.kind === 'checkbox') button.setAttribute('role', 'checkbox');
+    button.className = 'vtc-row-action';
+    button.dataset.nodeId = node.id;
+    button.dataset.action = action.id;
+    Object.assign(button.style, {
+      position: 'absolute', pointerEvents: 'auto', width: '26px', padding: '3px',
+      border: '0', borderRadius: '3px', cursor: 'pointer'
+    });
+    const icon = this.element.ownerDocument.createElement('canvas');
+    Object.assign(icon.style, { width: '16px', height: '16px', display: 'block' });
+    button.append(icon);
+    button.onclick = (event) => this.#activate(button, event);
+    this.buttons.set(key, button);
+    let nodeButtons = this.buttonsByNodeId.get(node.id);
+    if (!nodeButtons) this.buttonsByNodeId.set(node.id, (nodeButtons = new Map()));
+    nodeButtons.set(action.id, button);
+    this.element.append(button);
+    return button;
+  }
+
+  #syncButton(button, node, state, action, index, row, y, sticky, stickyBottom, scene, ratio) {
+    setProperty(button, 'title', action.label);
+    setAttribute(button, 'aria-label', `${action.label}: ${node.label ?? node.id}`);
+    const pressed = action.pressed === undefined ? null : Boolean(resolve(action.pressed, node, state));
+    setAttribute(button, 'aria-pressed', pressed === null ? null : String(pressed));
+    const disabled = Boolean(resolve(action.disabled, node, state));
+    setProperty(button, 'disabled', disabled);
+    setStyle(button, 'left', `${index * 28 + 1}px`);
+    setStyle(button, 'top', `${y + 1}px`);
+    setStyle(button, 'height', `${row.height - 2}px`);
+    setStyle(button, 'clipPath', sticky ? 'none' : `inset(${Math.max(0, stickyBottom - y - 1)}px 0 0)`);
+    setStyle(button, 'opacity', disabled ? '0.3' : '1');
+
+    const canvas = button.firstChild;
+    const size = action.kind === 'checkbox' ? 18 : 16;
+    const pixels = Math.round(size * ratio);
+    setStyle(canvas, 'width', `${size}px`);
+    setStyle(canvas, 'height', `${size}px`);
+    const checked = action.kind === 'checkbox' && Boolean(resolve(action.checked, node, state));
+    if (action.kind === 'checkbox') setAttribute(button, 'aria-checked', String(checked));
+    const icon = action.kind === 'checkbox' ? '' : resolve(action.icon, node, state) ?? 'star';
+    const color = pressed ? scene.theme.colors.text : scene.theme.colors.textMuted;
+    const drawKey = `${this.themeToken}\0${action.kind ?? ''}\0${icon}\0${color}\0${checked}\0${pixels}`;
+    if (canvas._vtcDrawKey === drawKey) return;
+    canvas._vtcDrawKey = drawKey;
+    if (canvas.width !== pixels) canvas.width = pixels;
+    if (canvas.height !== pixels) canvas.height = pixels;
+    const ctx = canvas.getContext('2d');
+    ctx.setTransform(pixels / size, 0, 0, pixels / size, 0, 0);
+    ctx.clearRect(0, 0, size, size);
+    if (action.kind === 'checkbox') drawCheckbox(ctx, 1, 1, checked, scene.theme);
+    else this.controller.iconRegistry.draw(ctx, icon, 0, 0, 16, color);
+  }
+
+  #activate(button, event) {
+    event.stopPropagation();
+    this.controller.flushDynamicState();
+    const current = this.controller.model.index.getNode(button.dataset.nodeId);
+    const spec = this.actionsById.get(button.dataset.action);
+    const state = this.controller.model.dynamicState.get(current?.id) ?? {};
+    if (!current || !spec || resolve(spec.disabled, current, state)) return;
+    this.controller.events.emit('rowaction', {
+      actionId: spec.id, nodeId: current.id, node: current,
+      ...(spec.kind === 'checkbox'
+        ? { checked: !Boolean(resolve(spec.checked, current, state)) }
+        : {}),
+      originalEvent: event
+    });
+  }
+
+  #prepareIcons(theme, ratio) {
+    for (const action of this.controller.rowActions) {
+      const icons = action.preloadIcons ?? (typeof action.icon === 'string' ? [action.icon] : []);
+      for (const icon of icons) for (const color of [theme.colors.text, theme.colors.textMuted]) {
+        const key = `${icon}\0${color}\0${ratio}`;
+        if (this.preparedIcons.has(key)) continue;
+        this.preparedIcons.add(key);
+        void this.controller.iconRegistry.prepare({ icons: [icon], size: 16, color, pixelRatio: ratio });
+      }
+    }
+  }
+
+  #removeButton(key, button, preserveFocus) {
+    if (!button) return;
+    const focused = this.element.getRootNode().activeElement === button;
+    button.remove();
+    this.buttons.delete(key);
+    const nodeButtons = this.buttonsByNodeId.get(button.dataset.nodeId);
+    nodeButtons?.delete(button.dataset.action);
+    if (!nodeButtons?.size) this.buttonsByNodeId.delete(button.dataset.nodeId);
+    if (focused && preserveFocus) {
+      (this.buttons.values().next().value ?? this.controller.canvas).focus({ preventScroll: true });
+    } else if (focused) this.controller.canvas.focus({ preventScroll: true });
+  }
+
+  destroy() {
+    this.element.remove();
+    this.buttons.clear();
+    this.buttonsByNodeId.clear();
+    this.actionsById.clear();
+    this.visibleRowsById.clear();
+  }
+}
+
+function resolve(value, node, state) {
+  return typeof value === 'function' ? value(node, state) : value;
+}
+
+function actionKey(nodeId, actionId) {
+  return `${nodeId.length}:${nodeId}${actionId}`;
+}
+
+function setProperty(target, name, value) {
+  if (!Object.is(target[name], value)) target[name] = value;
+}
+
+function setAttribute(target, name, value) {
+  if (value === null) {
+    if (target.hasAttribute(name)) target.removeAttribute(name);
+  } else if (target.getAttribute(name) !== value) target.setAttribute(name, value);
+}
+
+function setStyle(target, name, value) {
+  if (name.startsWith('--')) {
+    if (target.style.getPropertyValue(name) !== value) target.style.setProperty(name, value);
+  } else if (target.style[name] !== value) target.style[name] = value;
+}

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;
@@ -11,78 +13,142 @@ export class RowReorderInput {
     this.previousTouchAction = this.canvas.style.touchAction;
     this.canvas.addEventListener('pointerdown', this.onDown);
     this.canvas.addEventListener('keydown', this.onKey);
+    this.canvas.addEventListener('lostpointercapture', this.onCancel);
     this.view.addEventListener('pointermove', this.onMove);
     this.view.addEventListener('pointerup', this.onUp);
     this.view.addEventListener('pointercancel', this.onCancel);
     this.view.addEventListener('blur', this.cancel);
-    this.stops = ['datachange', 'filterchange', 'sortchange', 'rowreorderchange'].map(type => controller.on(type, () => {
-      this.cancel();
-      this.syncMode();
-    }));
-    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() ? 'none' : this.previousTouchAction;
+    this.canvas.style.touchAction =
+      this.controller.canReorderRows() || this.controller.rowDrag
+        ? 'none'
+        : this.previousTouchAction;
   }
 
-  onDown = event => {
-    if (event.button !== 0 || !this.controller.canReorderRows() || this.gesture) return;
+  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 || !['rowDrag', 'rowUp', 'rowDown'].includes(hit.part)) return;
-    this.canvas.focus();
+    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 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
+    });
     this.controller.cellEditor?.close?.();
     this.controller.focusedId = hit.row.nodeId;
-    this.gesture = { id: hit.row.nodeId, part: hit.part, 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.preventDefault();
+    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);
     this.canvas.style.cursor = 'grabbing';
     this.updateTarget();
     this.scheduleScroll();
     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);
-    this.cancel();
-    if (target) this.controller.moveRow(gesture.id, target.index, { source: 'pointer' });
+    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'
+      });
     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();
@@ -91,23 +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;
     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;
@@ -118,12 +199,27 @@ export class RowReorderInput {
     });
   }
 
-  cancel = () => {
+  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
+      });
+  }
+
+  cancel = (notify = true) => {
+    const gesture = this.gesture;
+    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);
   };
@@ -132,6 +228,7 @@ export class RowReorderInput {
     this.cancel();
     this.canvas.removeEventListener('pointerdown', this.onDown);
     this.canvas.removeEventListener('keydown', this.onKey);
+    this.canvas.removeEventListener('lostpointercapture', this.onCancel);
     this.view.removeEventListener('pointermove', this.onMove);
     this.view.removeEventListener('pointerup', this.onUp);
     this.view.removeEventListener('pointercancel', this.onCancel);
@@ -140,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 ?? ''}`;
+}