@ericchen1990/pano-view 3.6.3 → 3.6.5

package/dist/index.mjs

@@ -3981,7 +3981,10 @@ function MouseControls({
     const element = gl.domElement;
     const drag = createPointerDrag(camera, element, () => controlsRef.current, "mouse");
     const allowedButtons = resolveButtons(buttons);
+    const pending = /* @__PURE__ */ new Set();
+    let disposed = false;
     const clearPointers = () => {
+      pending.clear();
       for (const pointerId of pointersRef.current.keys()) {
         if (element.hasPointerCapture?.(pointerId)) {
           element.releasePointerCapture?.(pointerId);
@@ -4007,6 +4010,25 @@ function MouseControls({
         { cancelled }
       );
     };
+    const beginPointer = (event) => {
+      if (disposed || controlsRef.current?.isInteractionLocked()) {
+        return;
+      }
+      if (pointersRef.current.has(event.pointerId)) {
+        return;
+      }
+      pointersRef.current.set(event.pointerId, {
+        x: event.clientX,
+        y: event.clientY,
+        at: performance.now()
+      });
+      try {
+        element.setPointerCapture?.(event.pointerId);
+      } catch {
+      }
+      syncActive();
+      drag.start({ x: event.clientX, y: event.clientY }, pointerAt(event));
+    };
     const onPointerDown = (event) => {
       if (!isMouseLike(event)) {
         return;
@@ -4018,14 +4040,14 @@ function MouseControls({
         return;
       }
       event.preventDefault();
-      pointersRef.current.set(event.pointerId, {
-        x: event.clientX,
-        y: event.clientY,
-        at: performance.now()
+      const pointerId = event.pointerId;
+      pending.add(pointerId);
+      queueMicrotask(() => {
+        if (!pending.delete(pointerId)) {
+          return;
+        }
+        beginPointer(event);
       });
-      element.setPointerCapture?.(event.pointerId);
-      syncActive();
-      drag.start({ x: event.clientX, y: event.clientY }, pointerAt(event));
     };
     const onPointerMove = (event) => {
       if (!isMouseLike(event)) {
@@ -4049,6 +4071,7 @@ function MouseControls({
       drag.move(next, previous, speed, optionsRef.current.invert, pointerAt(event));
     };
     const releasePointer = (event) => {
+      pending.delete(event.pointerId);
       if (!pointersRef.current.has(event.pointerId)) {
         return;
       }
@@ -4090,6 +4113,7 @@ function MouseControls({
     element.addEventListener("lostpointercapture", releasePointer);
     element.addEventListener("wheel", onWheel, { passive: false });
     return () => {
+      disposed = true;
       validateDragRef.current = void 0;
       element.removeEventListener("pointerdown", onPointerDown);
       element.removeEventListener("pointermove", onPointerMove);
@@ -5607,6 +5631,12 @@ function vector3ToPanoPosition(vector) {
     )
   });
 }
+function translateHotspotPosition(origin, from, to) {
+  return normalizePanoPosition({
+    yaw: origin.yaw + normalizePanoYaw(to.yaw - from.yaw),
+    pitch: origin.pitch + (to.pitch - from.pitch)
+  });
+}
 
 // src/panorama-radius.ts
 var DEFAULT_PANORAMA_RADIUS = 1e3;
@@ -5750,7 +5780,10 @@ function TouchControls({
   useEffect11(() => {
     const element = gl.domElement;
     const drag = createPointerDrag(camera, element, () => controlsRef.current, "touch");
+    const pending = /* @__PURE__ */ new Set();
+    let disposed = false;
     const clearPointers = () => {
+      pending.clear();
       for (const pointerId of pointersRef.current.keys()) {
         if (element.hasPointerCapture?.(pointerId)) {
           element.releasePointerCapture?.(pointerId);
@@ -5776,20 +5809,22 @@ function TouchControls({
         { cancelled }
       );
     };
-    const onPointerDown = (event) => {
-      if (event.pointerType !== "touch") {
+    const beginPointer = (event) => {
+      if (disposed || controlsRef.current?.isInteractionLocked()) {
         return;
       }
-      if (controlsRef.current?.isInteractionLocked()) {
+      if (pointersRef.current.has(event.pointerId)) {
         return;
       }
-      event.preventDefault();
       pointersRef.current.set(event.pointerId, {
         x: event.clientX,
         y: event.clientY,
         at: performance.now()
       });
-      element.setPointerCapture?.(event.pointerId);
+      try {
+        element.setPointerCapture?.(event.pointerId);
+      } catch {
+      }
       syncActive();
       drag.start({ x: event.clientX, y: event.clientY }, pointerAt2(event));
       if (pointersRef.current.size >= 2) {
@@ -5798,6 +5833,23 @@ function TouchControls({
         pinchDistanceRef.current = pointerDistance(first, second);
       }
     };
+    const onPointerDown = (event) => {
+      if (event.pointerType !== "touch") {
+        return;
+      }
+      if (controlsRef.current?.isInteractionLocked()) {
+        return;
+      }
+      event.preventDefault();
+      const pointerId = event.pointerId;
+      pending.add(pointerId);
+      queueMicrotask(() => {
+        if (!pending.delete(pointerId)) {
+          return;
+        }
+        beginPointer(event);
+      });
+    };
     const onPointerMove = (event) => {
       if (event.pointerType !== "touch") {
         return;
@@ -5841,6 +5893,7 @@ function TouchControls({
       drag.move(next, previous, speed, optionsRef.current.invert, pointerAt2(event));
     };
     const releasePointer = (event) => {
+      pending.delete(event.pointerId);
       if (!pointersRef.current.has(event.pointerId)) {
         return;
       }
@@ -5864,6 +5917,7 @@ function TouchControls({
     element.addEventListener("pointercancel", releasePointer);
     element.addEventListener("lostpointercapture", releasePointer);
     return () => {
+      disposed = true;
       validateDragRef.current = void 0;
       element.removeEventListener("pointerdown", onPointerDown);
       element.removeEventListener("pointermove", onPointerMove);
@@ -11505,13 +11559,104 @@ import {
   EdgesGeometry,
   MathUtils as MathUtils8,
   Matrix4 as Matrix44,
+  PerspectiveCamera as PerspectiveCamera8,
   Plane,
   PlaneGeometry as PlaneGeometry4,
   Quaternion as Quaternion3,
   Ray,
+  Raycaster as Raycaster2,
+  Vector2 as Vector24,
   Vector3 as Vector316
 } from "three";
 
+// src/hotspot/drag-session.ts
+var CLICK_SUPPRESS_MS = 1e3;
+function trackPointerDrag(source, element, pointerId, onMove, onEnd) {
+  let stopped = false;
+  const releaseCapture = () => {
+    if (!element.hasPointerCapture?.(pointerId)) {
+      return;
+    }
+    try {
+      element.releasePointerCapture?.(pointerId);
+    } catch {
+    }
+  };
+  const stop = () => {
+    if (stopped) {
+      return;
+    }
+    stopped = true;
+    source.removeEventListener("pointermove", onPointerMove, true);
+    source.removeEventListener("pointerup", onPointerUp, true);
+    source.removeEventListener("pointercancel", onPointerCancel, true);
+    element.removeEventListener("lostpointercapture", onLostCapture);
+    releaseCapture();
+  };
+  const finish = (event) => {
+    if (stopped || event.pointerId !== pointerId) {
+      return;
+    }
+    stop();
+    onEnd(event);
+  };
+  const onPointerMove = (event) => {
+    if (stopped || event.pointerId !== pointerId) {
+      return;
+    }
+    try {
+      event.preventDefault?.();
+    } catch {
+    }
+    onMove(event);
+  };
+  const onPointerUp = (event) => {
+    finish(event);
+  };
+  const onPointerCancel = (event) => {
+    finish(event);
+  };
+  const onLostCapture = (event) => {
+    if ((event.buttons ?? 0) > 0) {
+      return;
+    }
+    finish(event);
+  };
+  try {
+    element.setPointerCapture?.(pointerId);
+  } catch {
+  }
+  source.addEventListener("pointermove", onPointerMove, true);
+  source.addEventListener("pointerup", onPointerUp, true);
+  source.addEventListener("pointercancel", onPointerCancel, true);
+  element.addEventListener("lostpointercapture", onLostCapture);
+  return stop;
+}
+var CAPTURE = { capture: true };
+function suppressFollowingClick(target) {
+  let cleaned = false;
+  const cleanup = () => {
+    if (cleaned) {
+      return;
+    }
+    cleaned = true;
+    target.removeEventListener("click", swallowClick, CAPTURE);
+    target.removeEventListener("pointerdown", cancel, CAPTURE);
+  };
+  const swallowClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    cleanup();
+  };
+  const cancel = () => {
+    cleanup();
+  };
+  target.addEventListener("click", swallowClick, CAPTURE);
+  target.addEventListener("pointerdown", cancel, CAPTURE);
+  setTimeout(cleanup, CLICK_SUPPRESS_MS);
+}
+
 // src/hotspot/hotspot-tooltip.tsx
 import { useEffect as useEffect23, useMemo as useMemo18, useState as useState12 } from "react";
 
@@ -11780,6 +11925,21 @@ function fixedScaleFactor(cameraFov, referenceFov) {
   const safeReferenceFov = MathUtils6.clamp(referenceFov, 1, 179);
   return Math.tan(MathUtils6.degToRad(cameraFov) / 2) / Math.tan(MathUtils6.degToRad(safeReferenceFov) / 2);
 }
+function selectionFrameScale(worldScaleX, worldScaleY, cameraSpaceDepth, fovDegrees, viewportHeight, outsetPixels) {
+  const pixels = Number.isFinite(outsetPixels) && outsetPixels > 0 ? outsetPixels : 0;
+  const depth = Number.isFinite(cameraSpaceDepth) ? Math.max(cameraSpaceDepth, 1e-4) : 1e-4;
+  const height = Number.isFinite(viewportHeight) ? Math.max(viewportHeight, 1) : 1;
+  const fov = Number.isFinite(fovDegrees) ? MathUtils6.clamp(fovDegrees, 1, 179) : 75;
+  const pixelsPerWorldUnit = height / (2 * Math.tan(MathUtils6.degToRad(fov) * 0.5) * depth);
+  const axis = (worldScale) => {
+    const pixelsPerLocalUnit = pixelsPerWorldUnit * Math.abs(worldScale);
+    if (pixelsPerLocalUnit < 1e-4) {
+      return 1;
+    }
+    return 1 + 2 * pixels / pixelsPerLocalUnit;
+  };
+  return [axis(worldScaleX), axis(worldScaleY)];
+}
 
 // src/hotspot/hotspot-stroke-line.tsx
 import { Line } from "@react-three/drei";
@@ -11866,6 +12026,11 @@ var DEFAULT_REFERENCE_FOV = 75;
 var MIN_ANGULAR_SIZE = 0.01;
 var MAX_ANGULAR_SIZE = 179;
 var DRAG_EPSILON_DEGREES = 1e-3;
+var SELECTION_BORDER_WIDTH = 3;
+var SELECTION_BORDER_GAP = 3;
+var SELECTION_BORDER_OUTSET = SELECTION_BORDER_GAP + SELECTION_BORDER_WIDTH / 2;
+var SELECTION_CAMERA_POSITION = new Vector316();
+var SELECTION_WORLD_SCALE = new Vector316();
 var SELECTION_BORDER_POINTS = [
   [-0.5, -0.5, 1e-3],
   [0.5, -0.5, 1e-3],
@@ -11953,6 +12118,34 @@ function angularDistance(a, b) {
   const bVector = panoPositionToVector3(b);
   return MathUtils8.radToDeg(aVector.angleTo(bVector));
 }
+var DRAG_POINTER = new Vector24();
+var DRAG_RAYCASTER = new Raycaster2();
+function aimDragRaycaster(event, element, camera) {
+  const rect = element.getBoundingClientRect();
+  if (!(rect.width > 0) || !(rect.height > 0)) {
+    return false;
+  }
+  DRAG_POINTER.set(
+    (event.clientX - rect.left) / rect.width * 2 - 1,
+    -((event.clientY - rect.top) / rect.height) * 2 + 1
+  );
+  camera.updateMatrixWorld();
+  DRAG_RAYCASTER.setFromCamera(DRAG_POINTER, camera);
+  return true;
+}
+function pointerToPanoPosition(event, element, camera) {
+  if (!aimDragRaycaster(event, element, camera)) {
+    return null;
+  }
+  return vector3ToPanoPosition(DRAG_RAYCASTER.ray.direction);
+}
+function pointerHitsHotspot(event, element, camera, group) {
+  if (!group || !aimDragRaycaster(event, element, camera)) {
+    return false;
+  }
+  group.updateMatrixWorld(true);
+  return DRAG_RAYCASTER.intersectObject(group, true).length > 0;
+}
 function isTooltipOpen(trigger, hovered, focused, pinned) {
   switch (trigger) {
     case "always":
@@ -12148,6 +12341,24 @@ function updateTooltipAnchor(anchor, group, placement, useAngularScale, camera,
   }
   setTooltipAnchorOnLocalBox(anchor, placement, -0.5, 0.5, -0.5, 0.5);
 }
+function placeSelectionFrame(frame, group, camera, viewportHeight) {
+  if (!frame) {
+    return;
+  }
+  group.getWorldScale(SELECTION_WORLD_SCALE);
+  SELECTION_CAMERA_POSITION.setFromMatrixPosition(group.matrixWorld).applyMatrix4(
+    camera.matrixWorldInverse
+  );
+  const [scaleX, scaleY] = selectionFrameScale(
+    SELECTION_WORLD_SCALE.x,
+    SELECTION_WORLD_SCALE.y,
+    -SELECTION_CAMERA_POSITION.z,
+    camera instanceof PerspectiveCamera8 ? camera.fov : DEFAULT_REFERENCE_FOV,
+    viewportHeight,
+    SELECTION_BORDER_OUTSET
+  );
+  frame.scale.set(scaleX, scaleY, 1);
+}
 function HotspotAnchor({
   id,
   position,
@@ -12187,10 +12398,13 @@ function HotspotAnchor({
   const hotspotTargetRegistry = useContext21(HotspotTargetRegistryContext);
   const eventBus = useContext21(PanoEventBusContext);
   const cursorApi = usePanoCursor();
-  const { camera, size } = useThree19();
+  const { camera, gl, size } = useThree19();
   const groupRef = useRef25(null);
+  const selectionFrameRef = useRef25(null);
   const tooltipAnchorRef = useRef25(null);
   const dragStateRef = useRef25(null);
+  const updateDragRef = useRef25(() => void 0);
+  const endDragRef = useRef25(() => void 0);
   const suppressNextClickRef = useRef25(false);
   const [hovered, setHovered] = useState13(false);
   const [dragging, setDragging] = useState13(false);
@@ -12260,7 +12474,9 @@ function HotspotAnchor({
   const cursorClaimId = hotspotCursorClaimId(id);
   useEffect24(
     () => () => {
-      dragStateRef.current?.releaseInteractionLock();
+      const dragState = dragStateRef.current;
+      dragState?.stopTracking();
+      dragState?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
@@ -12317,6 +12533,7 @@ function HotspotAnchor({
     if (!dragState) {
       return;
     }
+    dragState.stopTracking();
     dragState.releaseInteractionLock();
     dragStateRef.current = null;
     setDragging(false);
@@ -12339,6 +12556,7 @@ function HotspotAnchor({
       worldHeight,
       resolvedDistance
     );
+    placeSelectionFrame(selectionFrameRef.current, group, camera, size.height);
     if (tooltipOpen && tooltipAnchorRef.current) {
       updateTooltipAnchor(
         tooltipAnchorRef.current,
@@ -12357,6 +12575,7 @@ function HotspotAnchor({
     rotation,
     scaleMode,
     size,
+    selected,
     surfaceQuaternion3,
     tooltipOpen,
     tooltipPlacement,
@@ -12382,6 +12601,12 @@ function HotspotAnchor({
       worldHeight,
       resolvedDistance
     );
+    placeSelectionFrame(
+      selectionFrameRef.current,
+      group,
+      state.camera,
+      state.size.height
+    );
     if (tooltipOpen && tooltipAnchorRef.current) {
       updateTooltipAnchor(
         tooltipAnchorRef.current,
@@ -12397,31 +12622,78 @@ function HotspotAnchor({
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation?.();
   };
-  const releasePointer = (event, emitDragEnd) => {
+  const dragPosition = (dragState, event) => {
+    const pointerPosition = pointerToPanoPosition(event, gl.domElement, camera);
+    if (!pointerPosition) {
+      return dragState.lastPosition;
+    }
+    return translateHotspotPosition(
+      dragState.startPosition,
+      dragState.pointerOrigin,
+      pointerPosition
+    );
+  };
+  updateDragRef.current = (nativeEvent) => {
     const dragState = dragStateRef.current;
-    if (!dragState || dragState.pointerId !== event.pointerId) {
+    if (!dragState || dragState.pointerId !== nativeEvent.pointerId) {
       return;
     }
-    stopPointerEvent(event);
-    const target = event.target;
-    if (target.hasPointerCapture?.(event.pointerId)) {
-      target.releasePointerCapture?.(event.pointerId);
-    }
-    const nextPosition = vector3ToPanoPosition(event.ray.direction);
-    if (emitDragEnd) {
-      onDragEnd?.({
-        ...makeInteractionEvent(id, nextPosition, event),
-        source: "pointer",
-        startPosition: dragState.startPosition
-      });
+    const nextPosition = dragPosition(dragState, nativeEvent);
+    dragState.lastPosition = nextPosition;
+    dragState.moved || (dragState.moved = angularDistance(dragState.startPosition, nextPosition) > DRAG_EPSILON_DEGREES);
+    onPositionChange?.({
+      id,
+      position: nextPosition,
+      source: "pointer",
+      nativeEvent,
+      startPosition: dragState.startPosition
+    });
+  };
+  endDragRef.current = (nativeEvent, emitDragEnd) => {
+    const dragState = dragStateRef.current;
+    if (!dragState || dragState.pointerId !== nativeEvent.pointerId) {
+      return;
     }
-    suppressNextClickRef.current = dragState.moved;
+    const nextPosition = dragPosition(dragState, nativeEvent);
+    dragState.lastPosition = nextPosition;
+    dragState.moved || (dragState.moved = angularDistance(dragState.startPosition, nextPosition) > DRAG_EPSILON_DEGREES);
+    const moved = dragState.moved;
+    const startPosition = dragState.startPosition;
+    dragState.stopTracking();
     dragState.releaseInteractionLock();
     dragStateRef.current = null;
+    suppressNextClickRef.current = moved;
     setDragging(false);
-    if (emitDragEnd) {
-      setHovered(true);
+    if (!emitDragEnd) {
+      return;
     }
+    const overHotspot = pointerHitsHotspot(
+      nativeEvent,
+      gl.domElement,
+      camera,
+      groupRef.current
+    );
+    eventHovered.current = overHotspot;
+    setHovered(overHotspot);
+    if (moved && typeof window !== "undefined") {
+      suppressFollowingClick(window);
+    }
+    if (moved) {
+      onPositionChange?.({
+        id,
+        position: nextPosition,
+        source: "pointer",
+        nativeEvent,
+        startPosition
+      });
+    }
+    onDragEnd?.({
+      id,
+      position: nextPosition,
+      source: "pointer",
+      nativeEvent,
+      startPosition
+    });
   };
   return /* @__PURE__ */ jsxs15(
     "group",
@@ -12441,23 +12713,42 @@ function HotspotAnchor({
         }
         suppressNextClickRef.current = false;
       } : void 0,
-      onLostPointerCapture: acceptsPointer ? (event) => releasePointer(event, false) : void 0,
-      onPointerCancel: acceptsPointer ? (event) => releasePointer(event, false) : void 0,
+      onLostPointerCapture: acceptsPointer ? (event) => {
+        endDragRef.current(event.nativeEvent, true);
+      } : void 0,
+      onPointerCancel: acceptsPointer ? (event) => {
+        endDragRef.current(event.nativeEvent, true);
+      } : void 0,
       onPointerDown: acceptsPointer ? (event) => {
-        stopPointerEvent(event);
+        const native = event.nativeEvent;
         if (!draggable || dragStateRef.current) {
+          stopPointerEvent(event);
           return;
         }
+        const pointerId = native.pointerId;
+        stopPointerEvent(event);
         const releaseInteractionLock = controlsRef?.current?.acquireInteractionLock() ?? (() => void 0);
-        const target = event.target;
-        target.setPointerCapture?.(event.pointerId);
+        const pointerOrigin = pointerToPanoPosition(native, gl.domElement, camera) ?? vector3ToPanoPosition(event.ray.direction);
         const startPosition = { ...normalizedPosition };
+        const tracksOutsideMesh = typeof window !== "undefined";
+        const stopTracking = tracksOutsideMesh ? trackPointerDrag(
+          window,
+          gl.domElement,
+          pointerId,
+          (pointerEvent) => updateDragRef.current(pointerEvent),
+          (pointerEvent) => endDragRef.current(pointerEvent, true)
+        ) : () => void 0;
         dragStateRef.current = {
-          pointerId: event.pointerId,
+          pointerId,
           startPosition,
+          pointerOrigin,
+          lastPosition: startPosition,
           releaseInteractionLock,
-          moved: false
+          moved: false,
+          tracksOutsideMesh,
+          stopTracking
         };
+        eventHovered.current = false;
         setHovered(false);
         setDragging(true);
         onDragStart?.({
@@ -12468,17 +12759,13 @@ function HotspotAnchor({
       } : void 0,
       onPointerMove: acceptsPointer ? (event) => {
         const dragState = dragStateRef.current;
-        if (!dragState || dragState.pointerId !== event.pointerId) {
+        if (!dragState || dragState.pointerId !== event.nativeEvent.pointerId) {
           return;
         }
         stopPointerEvent(event);
-        const nextPosition = vector3ToPanoPosition(event.ray.direction);
-        dragState.moved || (dragState.moved = angularDistance(dragState.startPosition, nextPosition) > DRAG_EPSILON_DEGREES);
-        onPositionChange?.({
-          ...makeInteractionEvent(id, nextPosition, event),
-          source: "pointer",
-          startPosition: dragState.startPosition
-        });
+        if (!dragState.tracksOutsideMesh) {
+          updateDragRef.current(event.nativeEvent);
+        }
       } : void 0,
       onPointerOut: acceptsPointer ? (event) => {
         if (!dragStateRef.current) {
@@ -12507,7 +12794,10 @@ function HotspotAnchor({
           );
         }
       } : void 0,
-      onPointerUp: acceptsPointer ? (event) => releasePointer(event, true) : void 0,
+      onPointerUp: acceptsPointer ? (event) => {
+        stopPointerEvent(event);
+        endDragRef.current(event.nativeEvent, true);
+      } : void 0,
       children: [
         focused ? focusContent ?? /* @__PURE__ */ jsx26(
           "lineSegments",
@@ -12520,16 +12810,16 @@ function HotspotAnchor({
           }
         ) : null,
         children,
-        selected && useAngularScale ? /* @__PURE__ */ jsx26(
+        selected && useAngularScale ? /* @__PURE__ */ jsx26("group", { ref: selectionFrameRef, children: /* @__PURE__ */ jsx26(
           HotspotStrokeLine,
           {
             points: SELECTION_BORDER_POINTS,
             color: "#ffb300",
-            lineWidth: 3,
+            lineWidth: SELECTION_BORDER_WIDTH,
             opacity: 1,
             renderOrder: renderOrder + 1
           }
-        ) : null,
+        ) }) : null,
         tooltipOpen && tooltipContent ? /* @__PURE__ */ jsx26("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ jsx26(
           HotspotTooltip,
           {
@@ -12549,11 +12839,11 @@ import {
   DoubleSide as DoubleSide3,
   Mesh as Mesh4,
   MeshBasicMaterial,
-  Vector2 as Vector24
+  Vector2 as Vector25
 } from "three";
 import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var HOTSPOT_ALPHA_CUTOFF = 0.05;
-var SAMPLE_UV = new Vector24();
+var SAMPLE_UV = new Vector25();
 var RAYCAST_HITS = [];
 var IMAGE_DATA_CACHE = /* @__PURE__ */ new WeakMap();
 function clampOpacity(opacity) {
@@ -13816,7 +14106,7 @@ import {
   ClampToEdgeWrapping as ClampToEdgeWrapping8,
   LinearFilter as LinearFilter10,
   MathUtils as MathUtils10,
-  PerspectiveCamera as PerspectiveCamera8,
+  PerspectiveCamera as PerspectiveCamera9,
   SRGBColorSpace as SRGBColorSpace9
 } from "three";
 import { jsx as jsx33 } from "react/jsx-runtime";
@@ -14070,11 +14360,15 @@ function createTextTexture(text, width, height, style, rasterLong) {
   if (!context) {
     throw new Error("Canvas 2D is unavailable for this text hotspot.");
   }
-  drawTextHotspot(context, canvasWidth, canvasHeight, text, {
-    ...style,
-    fontSize: resolvePositive(style.fontSize, DEFAULT_FONT_SIZE) * scale,
-    strokeWidth: Number.isFinite(style.strokeWidth) ? style.strokeWidth * scale : style.strokeWidth
-  });
+  context.setTransform(
+    canvasWidth / layout.canvasWidth,
+    0,
+    0,
+    canvasHeight / layout.canvasHeight,
+    0,
+    0
+  );
+  drawTextHotspot(context, layout.canvasWidth, layout.canvasHeight, text, style);
   const texture = new CanvasTexture3(canvas);
   texture.colorSpace = SRGBColorSpace9;
   texture.wrapS = ClampToEdgeWrapping8;
@@ -14092,7 +14386,7 @@ function useRasterLongSide(width, height, scale, scaleMode, referenceFov) {
   const measure = () => {
     const pixelRatio = getPixelRatio();
     const viewportHeight = size.height * (Number.isFinite(pixelRatio) && pixelRatio > 0 ? pixelRatio : 1);
-    const cameraFov = camera instanceof PerspectiveCamera8 ? camera.fov : DEFAULT_REFERENCE_FOV2;
+    const cameraFov = camera instanceof PerspectiveCamera9 ? camera.fov : DEFAULT_REFERENCE_FOV2;
     const screenLong = Math.max(
       projectedDevicePixels(
         width * resolveScale2(scale),
@@ -14134,13 +14428,7 @@ function useTextTexture(text, width, height, style, scale, scaleMode, referenceF
     let nextTexture = null;
     const run = async () => {
       try {
-        const layout = textureSize(width, height);
-        const layoutLong = Math.max(layout.canvasWidth, layout.canvasHeight);
-        const drawScale = rasterLong / layoutLong;
-        const { font } = resolveTextFont({
-          ...style,
-          fontSize: resolvePositive(style.fontSize, DEFAULT_FONT_SIZE) * drawScale
-        });
+        const { font } = resolveTextFont(style);
         try {
           await document.fonts?.load(font);
         } catch {
@@ -14369,7 +14657,7 @@ import {
   Matrix4 as Matrix45,
   Quaternion as Quaternion4,
   ShapeUtils,
-  Vector2 as Vector25,
+  Vector2 as Vector26,
   Vector3 as Vector318
 } from "three";
 import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -14407,7 +14695,7 @@ function intersects(a, b, c, d) {
 }
 function hasSelfIntersection(vertices) {
   const points = vertices.map(
-    (vertex) => new Vector25(vertex.unwrappedYaw, vertex.pitch)
+    (vertex) => new Vector26(vertex.unwrappedYaw, vertex.pitch)
   );
   for (let index = 0; index < points.length; index += 1) {
     const nextIndex = (index + 1) % points.length;
@@ -14556,7 +14844,7 @@ function addSubdividedTriangle(positions, indices, a, b, c, worldToLocal, steps)
 }
 function makeFillGeometry(vertices, center) {
   const unwrapped = unwrapPolygonVertices(vertices);
-  const contour = unwrapped.map((vertex) => new Vector25(vertex.unwrappedYaw, vertex.pitch));
+  const contour = unwrapped.map((vertex) => new Vector26(vertex.unwrappedYaw, vertex.pitch));
   const triangles = ShapeUtils.triangulateShape(contour, []);
   const positions = [];
   const indices = [];
@@ -16054,12 +16342,12 @@ import { useFrame as useFrame21, useThree as useThree26 } from "@react-three/fib
 import { useRef as useRef36 } from "react";
 import {
   DoubleSide as DoubleSide6,
-  Raycaster as Raycaster3,
-  Vector2 as Vector26,
+  Raycaster as Raycaster4,
+  Vector2 as Vector27,
   Vector3 as Vector321
 } from "three";
 import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
-var CENTER_NDC = new Vector26(0, 0);
+var CENTER_NDC = new Vector27(0, 0);
 var HUD_DISTANCE = 2;
 var RETICLE_SCALE = 1;
 var RETICLE_RENDER_ORDER = 1e5;
@@ -16145,7 +16433,7 @@ function WebVRReticle({
   const groupRef = useRef36(null);
   const ringMeshRef = useRef36(null);
   const directionRef = useRef36(new Vector321());
-  const raycasterRef = useRef36(new Raycaster3());
+  const raycasterRef = useRef36(new Raycaster4());
   const hoveredRef = useRef36(null);
   const dwellRef = useRef36(0);
   const clickedRef = useRef36(false);
@@ -16315,12 +16603,12 @@ import { useContext as useContext26, useEffect as useEffect36, useMemo as useMem
 import {
   Mesh as Mesh6,
   OrthographicCamera,
-  PerspectiveCamera as PerspectiveCamera9,
+  PerspectiveCamera as PerspectiveCamera10,
   PlaneGeometry as PlaneGeometry5,
   Scene,
   ShaderMaterial as ShaderMaterial3,
   StereoCamera as StereoCamera2,
-  Vector2 as Vector27,
+  Vector2 as Vector28,
   Vector4 as Vector42,
   WebGLRenderTarget as WebGLRenderTarget2
 } from "three";
@@ -16358,7 +16646,7 @@ function createDistortionResources() {
     depthWrite: false,
     fragmentShader,
     uniforms: {
-      distortion: { value: new Vector27() },
+      distortion: { value: new Vector28() },
       sourceTexture: { value: target.texture }
     },
     vertexShader
@@ -16406,7 +16694,7 @@ function WebVRStereoRenderer({
   const stereoRef = useRef37(stereo);
   stereoRef.current = stereo;
   const resources = useMemo25(createDistortionResources, []);
-  const drawingSizeRef = useRef37(new Vector27());
+  const drawingSizeRef = useRef37(new Vector28());
   const viewportRef = useRef37(new Vector42());
   const scissorRef = useRef37(new Vector42());
   const originalFovRef = useRef37(null);
@@ -16426,7 +16714,7 @@ function WebVRStereoRenderer({
   useEffect36(() => {
     const originalRender = gl.render.bind(gl);
     gl.render = (sceneToRender, cameraToRender) => {
-      if (!stereoActiveRef.current || !(cameraToRender instanceof PerspectiveCamera9)) {
+      if (!stereoActiveRef.current || !(cameraToRender instanceof PerspectiveCamera10)) {
         originalRender(sceneToRender, cameraToRender);
         return;
       }
@@ -16501,7 +16789,7 @@ function WebVRStereoRenderer({
     if (runtime) {
       runtime.stereoView.active = fallback;
     }
-    if (fallback && camera instanceof PerspectiveCamera9) {
+    if (fallback && camera instanceof PerspectiveCamera10) {
       syncStereoCameras(
         stereoRef.current,
         camera,
@@ -16512,7 +16800,7 @@ function WebVRStereoRenderer({
       );
       return;
     }
-    if (originalFovRef.current !== null && camera instanceof PerspectiveCamera9) {
+    if (originalFovRef.current !== null && camera instanceof PerspectiveCamera10) {
       camera.fov = originalFovRef.current;
       camera.updateProjectionMatrix();
       originalFovRef.current = null;