@react-three-dom/core 0.4.0 → 0.6.0

package/dist/index.cjs

@@ -6,7 +6,7 @@ var fiber = require('@react-three/fiber');
 var threeMeshBvh = require('three-mesh-bvh');
 
 // src/version.ts
-var version = "0.4.0";
+var version = "0.5.0";
 
 // src/debug.ts
 var _enabled = false;
@@ -1525,6 +1525,7 @@ function findTrackingPair(obj) {
 function registerSubtree(obj, store, mirror, instanceKey) {
   obj.traverse((child) => {
     if (!store.has(child) && shouldRegister(instanceKey, child)) {
+      ensureAncestorChain(child, store, mirror);
       store.register(child);
       mirror.onObjectAdded(child);
     }
@@ -2573,6 +2574,82 @@ function circlePath(center, radiusX, radiusY, steps = 36, pressure = 0.5) {
 function sleep2(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
+var _v = new three.Vector3();
+function projectWorld(point, camera, size) {
+  _v.set(point.x, point.y, point.z).project(camera);
+  if (_v.z > 1) return null;
+  return {
+    x: (_v.x + 1) / 2 * size.width,
+    y: (-_v.y + 1) / 2 * size.height
+  };
+}
+function clickAtWorld(point, _options = {}) {
+  const camera = getCamera();
+  const gl = getRenderer();
+  const size = getCanvasSize();
+  const canvas = gl.domElement;
+  const screen = projectWorld(point, camera, size);
+  if (!screen) {
+    r3fLog("interaction", `clickAtWorld(${point.x}, ${point.y}, ${point.z}) \u2014 behind camera, skipped`);
+    return { dispatched: false, screenPoint: { x: 0, y: 0 }, behindCamera: true };
+  }
+  r3fLog("interaction", `clickAtWorld(${point.x}, ${point.y}, ${point.z}) \u2192 screen(${Math.round(screen.x)}, ${Math.round(screen.y)})`);
+  dispatchClick(canvas, screen);
+  return { dispatched: true, screenPoint: screen, behindCamera: false };
+}
+function doubleClickAtWorld(point, _options = {}) {
+  const camera = getCamera();
+  const gl = getRenderer();
+  const size = getCanvasSize();
+  const canvas = gl.domElement;
+  const screen = projectWorld(point, camera, size);
+  if (!screen) {
+    r3fLog("interaction", `doubleClickAtWorld(${point.x}, ${point.y}, ${point.z}) \u2014 behind camera, skipped`);
+    return { dispatched: false, screenPoint: { x: 0, y: 0 }, behindCamera: true };
+  }
+  r3fLog("interaction", `doubleClickAtWorld(${point.x}, ${point.y}, ${point.z}) \u2192 screen(${Math.round(screen.x)}, ${Math.round(screen.y)})`);
+  dispatchDoubleClick(canvas, screen);
+  return { dispatched: true, screenPoint: screen, behindCamera: false };
+}
+function contextMenuAtWorld(point, _options = {}) {
+  const camera = getCamera();
+  const gl = getRenderer();
+  const size = getCanvasSize();
+  const canvas = gl.domElement;
+  const screen = projectWorld(point, camera, size);
+  if (!screen) {
+    r3fLog("interaction", `contextMenuAtWorld(${point.x}, ${point.y}, ${point.z}) \u2014 behind camera, skipped`);
+    return { dispatched: false, screenPoint: { x: 0, y: 0 }, behindCamera: true };
+  }
+  r3fLog("interaction", `contextMenuAtWorld(${point.x}, ${point.y}, ${point.z}) \u2192 screen(${Math.round(screen.x)}, ${Math.round(screen.y)})`);
+  dispatchContextMenu(canvas, screen);
+  return { dispatched: true, screenPoint: screen, behindCamera: false };
+}
+function hoverAtWorld(point, _options = {}) {
+  const camera = getCamera();
+  const gl = getRenderer();
+  const size = getCanvasSize();
+  const canvas = gl.domElement;
+  const screen = projectWorld(point, camera, size);
+  if (!screen) {
+    r3fLog("interaction", `hoverAtWorld(${point.x}, ${point.y}, ${point.z}) \u2014 behind camera, skipped`);
+    return { dispatched: false, screenPoint: { x: 0, y: 0 }, behindCamera: true };
+  }
+  r3fLog("interaction", `hoverAtWorld(${point.x}, ${point.y}, ${point.z}) \u2192 screen(${Math.round(screen.x)}, ${Math.round(screen.y)})`);
+  dispatchHover(canvas, screen);
+  return { dispatched: true, screenPoint: screen, behindCamera: false };
+}
+async function clickAtWorldSequence(points, options = {}) {
+  const { delayMs = 50, ...interactionOpts } = options;
+  const results = [];
+  for (let i = 0; i < points.length; i++) {
+    results.push(clickAtWorld(points[i], interactionOpts));
+    if (delayMs > 0 && i < points.length - 1) {
+      await new Promise((resolve) => setTimeout(resolve, delayMs));
+    }
+  }
+  return results;
+}
 
 // src/highlight/SelectionManager.ts
 var SelectionManager = class {
@@ -2828,6 +2905,9 @@ var Highlighter = class {
     this._hoverPollId = null;
     this._lastHoveredUuid = null;
     this._store = null;
+    /** When true, the hover poll is paused and showHoverHighlight is blocked. */
+    this._hoverPollSuppressed = false;
+    this._suppressTimer = null;
   }
   // -----------------------------------------------------------------------
   // Lifecycle
@@ -2850,6 +2930,11 @@ var Highlighter = class {
       this._unsubscribe = null;
     }
     this._stopHoverPolling();
+    if (this._suppressTimer) {
+      clearTimeout(this._suppressTimer);
+      this._suppressTimer = null;
+    }
+    this._hoverPollSuppressed = false;
     this.clearHoverHighlight();
     this._clearAllSelectionHighlights();
     this._scene = null;
@@ -2877,6 +2962,7 @@ var Highlighter = class {
   // -----------------------------------------------------------------------
   /** Show a hover highlight on the given object (replaces any previous hover). */
   showHoverHighlight(obj) {
+    if (this._hoverPollSuppressed) return;
     if (obj === this._hoverTarget) return;
     this._clearHoverVisuals();
     if (!this._scene) return;
@@ -2915,6 +3001,26 @@ var Highlighter = class {
     this.clearHoverHighlight();
     this._clearAllSelectionHighlights();
   }
+  /**
+   * Stop the hover poll, clear all hover state, and restart after a delay.
+   * This prevents the DevTools extension from re-applying highlights after
+   * inspect mode is disabled (the extension polls `$0` every 200ms and
+   * keeps writing `__r3fdom_hovered__`).
+   */
+  suppressHoverPoll(durationMs = 1500) {
+    this._hoverPollSuppressed = true;
+    this._stopHoverPolling();
+    this._clearHoverVisuals();
+    this._lastHoveredUuid = null;
+    window.__r3fdom_hovered__ = null;
+    if (this._suppressTimer) clearTimeout(this._suppressTimer);
+    this._suppressTimer = setTimeout(() => {
+      this._hoverPollSuppressed = false;
+      this._suppressTimer = null;
+      window.__r3fdom_hovered__ = null;
+      this._startHoverPolling();
+    }, durationMs);
+  }
   // -----------------------------------------------------------------------
   // Internal: selection highlights
   // -----------------------------------------------------------------------
@@ -2997,6 +3103,16 @@ var Highlighter = class {
     try {
       const hoveredEl = window.__r3fdom_hovered__;
       const uuid = hoveredEl?.getAttribute?.("data-uuid") ?? null;
+      if (this._hoverPollSuppressed) {
+        if (uuid) {
+          window.__r3fdom_hovered__ = null;
+        }
+        if (this._hoverTarget) {
+          this._clearHoverVisuals();
+        }
+        this._lastHoveredUuid = null;
+        return;
+      }
       if (uuid === this._lastHoveredUuid) return;
       this._lastHoveredUuid = uuid;
       if (!uuid) {
@@ -3119,9 +3235,12 @@ var InspectController = class {
     this._boundContextMenu = null;
     this._hoveredObject = null;
     this._cancelHoverReveal();
-    this._highlighter.clearHoverHighlight();
+    this._highlighter.clearAll();
+    this._highlighter.suppressHoverPoll();
+    this._selectionManager.clearSelection();
+    window.__r3fdom_hovered__ = null;
     window.__r3fdom_selected_element__ = null;
-    r3fLog("inspect", "InspectController disabled");
+    r3fLog("inspect", "InspectController disabled \u2014 highlights and selection cleared");
   }
   /** Disable and release all resources. */
   dispose() {
@@ -3359,6 +3478,21 @@ function shouldRegister(instanceKey, obj) {
   if (filter) return filter(obj);
   return true;
 }
+function ensureAncestorChain(obj, store, mirror) {
+  const chain = [];
+  let cursor = obj.parent;
+  while (cursor) {
+    if (store.has(cursor)) break;
+    chain.push(cursor);
+    cursor = cursor.parent;
+  }
+  for (let i = chain.length - 1; i >= 0; i--) {
+    const ancestor = chain[i];
+    store.register(ancestor);
+    mirror.onObjectAdded(ancestor);
+    mirror.materialize(ancestor.uuid);
+  }
+}
 function getStore2(canvasId = "") {
   return _stores.get(canvasId) ?? null;
 }
@@ -3430,6 +3564,11 @@ function exposeGlobalAPI(store, gl, cameraRef, selMgr, inspCtrl, mirror, canvasI
       const result = await drawPath(points, options);
       return { eventCount: result.eventCount, pointCount: result.pointCount };
     },
+    clickAtWorld: (point, options) => clickAtWorld(point, options),
+    doubleClickAtWorld: (point, options) => doubleClickAtWorld(point, options),
+    contextMenuAtWorld: (point, options) => contextMenuAtWorld(point, options),
+    hoverAtWorld: (point, options) => hoverAtWorld(point, options),
+    clickAtWorldSequence: (points, options) => clickAtWorldSequence(points, options),
     select: (idOrUuid) => {
       const obj = store.getObject3D(idOrUuid);
       if (obj && selMgr) selMgr.select(obj);
@@ -3518,10 +3657,17 @@ function exposeGlobalAPI(store, gl, cameraRef, selMgr, inspCtrl, mirror, canvasI
         return;
       }
       obj.userData.__r3fdom_manual = true;
-      store.register(obj);
-      mirror?.onObjectAdded(obj);
-      mirror?.materialize(obj.uuid);
-      r3fLog("bridge", `r3fRegister: "${obj.userData?.testId || obj.name || obj.uuid.slice(0, 8)}" (${obj.type})`);
+      ensureAncestorChain(obj, store, mirror);
+      let count = 0;
+      obj.traverse((child) => {
+        if (!store.has(child)) {
+          store.register(child);
+          mirror?.onObjectAdded(child);
+          mirror?.materialize(child.uuid);
+          count++;
+        }
+      });
+      r3fLog("bridge", `r3fRegister: "${obj.userData?.testId || obj.name || obj.uuid.slice(0, 8)}" (${obj.type}) \u2014 ${count} objects`);
     },
     r3fUnregister: (obj) => {
       if (!store.has(obj)) return;
@@ -3646,6 +3792,11 @@ function createStubBridge(error, canvasId) {
     pointerMiss: () => {
     },
     drawPath: async () => ({ eventCount: 0, pointCount: 0 }),
+    clickAtWorld: () => ({ dispatched: false, screenPoint: { x: 0, y: 0 }, behindCamera: false }),
+    doubleClickAtWorld: () => ({ dispatched: false, screenPoint: { x: 0, y: 0 }, behindCamera: false }),
+    contextMenuAtWorld: () => ({ dispatched: false, screenPoint: { x: 0, y: 0 }, behindCamera: false }),
+    hoverAtWorld: () => ({ dispatched: false, screenPoint: { x: 0, y: 0 }, behindCamera: false }),
+    clickAtWorldSequence: async () => [],
     select: () => {
     },
     clearSelection: () => {
@@ -3778,8 +3929,12 @@ function ThreeDom({
       if (mode === "auto") {
         if (filter) {
           store.addTrackedRoot(scene);
+          store.register(scene);
+          mirror.onObjectAdded(scene);
           scene.traverse((obj) => {
+            if (obj === scene) return;
             if (filter(obj)) {
+              ensureAncestorChain(obj, store, mirror);
               store.register(obj);
               mirror.onObjectAdded(obj);
             }
@@ -3971,8 +4126,11 @@ exports.ThreeElement = ThreeElement;
 exports.applyAttributes = applyAttributes;
 exports.circlePath = circlePath;
 exports.click3D = click3D;
+exports.clickAtWorld = clickAtWorld;
+exports.clickAtWorldSequence = clickAtWorldSequence;
 exports.computeAttributes = computeAttributes;
 exports.contextMenu3D = contextMenu3D;
+exports.contextMenuAtWorld = contextMenuAtWorld;
 exports.createFlatSnapshot = createFlatSnapshot;
 exports.createSnapshot = createSnapshot;
 exports.curvePath = curvePath;
@@ -3985,6 +4143,7 @@ exports.dispatchPointerMiss = dispatchPointerMiss;
 exports.dispatchUnhover = dispatchUnhover;
 exports.dispatchWheel = dispatchWheel;
 exports.doubleClick3D = doubleClick3D;
+exports.doubleClickAtWorld = doubleClickAtWorld;
 exports.drag3D = drag3D;
 exports.drawPath = drawPath;
 exports.enableDebug = enableDebug;
@@ -3997,6 +4156,7 @@ exports.getSelectionManager = getSelectionManager;
 exports.getStore = getStore2;
 exports.getTagForType = getTagForType;
 exports.hover3D = hover3D;
+exports.hoverAtWorld = hoverAtWorld;
 exports.isDebugEnabled = isDebugEnabled;
 exports.isInFrustum = isInFrustum;
 exports.isPatched = isPatched;