@ericchen1990/pano-view 3.6.2 → 3.6.4

package/dist/index.mjs

@@ -3723,12 +3723,18 @@ var PointerDragAnchor = class {
     this.projection = projection;
     this.local = new Vector3();
     this.rotation = new Euler2(0, 0, 0, "YXZ");
-    this.anchor = this.ray(start).clone().applyEuler(this.rotation.set(
+    const startRay = this.ray(start).clone();
+    this.baseAzimuth = Math.atan2(startRay.x, -startRay.z);
+    this.baseElevation = Math.atan2(startRay.y, -startRay.z);
+    this.anchor = startRay.clone().applyEuler(this.rotation.set(
       MathUtils2.degToRad(origin.pitch),
       MathUtils2.degToRad(-origin.yaw),
       0,
       "YXZ"
     ));
+    const originPitch = MathUtils2.degToRad(origin.pitch);
+    const roots = this.pitchRoots(startRay, originPitch);
+    this.useSupplementary = Math.abs(roots.supplementary - originPitch) + 1e-6 < Math.abs(roots.principal - originPitch);
   }
   ray(point) {
     return this.local.set(
@@ -3737,6 +3743,21 @@ var PointerDragAnchor = class {
       0.5
     ).applyMatrix4(this.projection.projectionMatrixInverse).normalize();
   }
+  /** Pitch roots of the level-camera constraint. The supplementary root is unwrapped toward the press. */
+  pitchRoots(ray, originPitch) {
+    const latitude = Math.asin(MathUtils2.clamp(
+      this.anchor.y / Math.max(Math.hypot(ray.y, ray.z), 1e-12),
+      -1,
+      1
+    ));
+    const offset = Math.atan2(ray.y, -ray.z);
+    const principal = latitude - offset;
+    const turned = Math.PI - latitude - offset;
+    return {
+      principal,
+      supplementary: originPitch + Math.atan2(Math.sin(turned - originPitch), Math.cos(turned - originPitch))
+    };
+  }
   solve(point, speed = DEFAULT_POINTER_DRAG_SPEED, invert = false) {
     const multiplier = (Number.isFinite(speed) && speed >= 0 ? speed : DEFAULT_POINTER_DRAG_SPEED) / DEFAULT_POINTER_DRAG_SPEED * (invert ? -1 : 1);
     if (multiplier === 0) return { yaw: 0, pitch: 0 };
@@ -3744,22 +3765,27 @@ var PointerDragAnchor = class {
       x: this.start.x + (point.x - this.start.x) * multiplier,
       y: this.start.y + (point.y - this.start.y) * multiplier
     });
-    const latitude = Math.asin(MathUtils2.clamp(this.anchor.y / Math.max(Math.hypot(ray.y, ray.z), 1e-12), -1, 1));
-    const offset = Math.atan2(ray.y, -ray.z);
     const originPitch = MathUtils2.degToRad(this.origin.pitch);
-    const candidates = [latitude - offset, Math.PI - latitude - offset, -Math.PI - latitude - offset];
-    let pitch = candidates[0];
-    let distance = Infinity;
-    for (const candidate of candidates) {
-      const bounded = MathUtils2.clamp(candidate, -Math.PI / 2, Math.PI / 2);
-      const nextDistance = Math.abs(candidate - bounded) * 10 + Math.abs(bounded - originPitch);
-      if (nextDistance < distance) {
-        pitch = bounded;
-        distance = nextDistance;
-      }
-    }
-    const z = Math.sin(pitch) * ray.y + Math.cos(pitch) * ray.z;
-    const yaw = MathUtils2.radToDeg(Math.atan2(this.anchor.x, -this.anchor.z) - Math.atan2(ray.x, -z));
+    const roots = this.pitchRoots(ray, originPitch);
+    const exactPitch = MathUtils2.clamp(
+      this.useSupplementary ? roots.supplementary : roots.principal,
+      -Math.PI / 2,
+      Math.PI / 2
+    );
+    const stablePitch = originPitch - (Math.atan2(ray.y, -ray.z) - this.baseElevation);
+    const fromPole = Math.asin(Math.min(1, Math.hypot(this.anchor.x, this.anchor.z)));
+    const pointerLock = MathUtils2.smoothstep(fromPole, MathUtils2.degToRad(8), MathUtils2.degToRad(18));
+    const pitchTurn = Math.atan2(Math.sin(exactPitch - stablePitch), Math.cos(exactPitch - stablePitch));
+    const pitch = MathUtils2.clamp(
+      pointerLock >= 1 ? exactPitch : stablePitch + pointerLock * pitchTurn,
+      -Math.PI / 2,
+      Math.PI / 2
+    );
+    const pitchedZ = Math.sin(exactPitch) * ray.y + Math.cos(exactPitch) * ray.z;
+    const exactYaw = Math.atan2(this.anchor.x, -this.anchor.z) - Math.atan2(ray.x, -pitchedZ);
+    const stableYaw = MathUtils2.degToRad(this.origin.yaw) + Math.atan2(ray.x, -ray.z) - this.baseAzimuth;
+    const yawTurn = Math.atan2(Math.sin(exactYaw - stableYaw), Math.cos(exactYaw - stableYaw));
+    const yaw = MathUtils2.radToDeg(stableYaw + pointerLock * yawTurn);
     return { yaw: normalizeViewYaw(yaw - this.origin.yaw), pitch: MathUtils2.radToDeg(pitch) - this.origin.pitch };
   }
 };
@@ -3955,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);
@@ -3981,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;
@@ -3992,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)) {
@@ -4023,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;
       }
@@ -4064,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);
@@ -5581,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;
@@ -5724,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);
@@ -5750,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) {
@@ -5772,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;
@@ -5815,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;
       }
@@ -5838,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);
@@ -11479,13 +11559,103 @@ 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;
+}
+function suppressFollowingClick(target) {
+  let cleaned = false;
+  const cleanup = () => {
+    if (cleaned) {
+      return;
+    }
+    cleaned = true;
+    target.removeEventListener("click", swallowClick, true);
+    target.removeEventListener("pointerdown", cancel, true);
+  };
+  const swallowClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    cleanup();
+  };
+  const cancel = () => {
+    cleanup();
+  };
+  target.addEventListener("click", swallowClick, true);
+  target.addEventListener("pointerdown", cancel, true);
+  setTimeout(cleanup, CLICK_SUPPRESS_MS);
+}
+
 // src/hotspot/hotspot-tooltip.tsx
 import { useEffect as useEffect23, useMemo as useMemo18, useState as useState12 } from "react";
 
@@ -11754,6 +11924,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";
@@ -11840,6 +12025,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],
@@ -11927,6 +12117,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":
@@ -12122,6 +12340,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,
@@ -12161,10 +12397,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);
@@ -12234,7 +12473,9 @@ function HotspotAnchor({
   const cursorClaimId = hotspotCursorClaimId(id);
   useEffect24(
     () => () => {
-      dragStateRef.current?.releaseInteractionLock();
+      const dragState = dragStateRef.current;
+      dragState?.stopTracking();
+      dragState?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
@@ -12291,6 +12532,7 @@ function HotspotAnchor({
     if (!dragState) {
       return;
     }
+    dragState.stopTracking();
     dragState.releaseInteractionLock();
     dragStateRef.current = null;
     setDragging(false);
@@ -12313,6 +12555,7 @@ function HotspotAnchor({
       worldHeight,
       resolvedDistance
     );
+    placeSelectionFrame(selectionFrameRef.current, group, camera, size.height);
     if (tooltipOpen && tooltipAnchorRef.current) {
       updateTooltipAnchor(
         tooltipAnchorRef.current,
@@ -12331,6 +12574,7 @@ function HotspotAnchor({
     rotation,
     scaleMode,
     size,
+    selected,
     surfaceQuaternion3,
     tooltipOpen,
     tooltipPlacement,
@@ -12356,6 +12600,12 @@ function HotspotAnchor({
       worldHeight,
       resolvedDistance
     );
+    placeSelectionFrame(
+      selectionFrameRef.current,
+      group,
+      state.camera,
+      state.size.height
+    );
     if (tooltipOpen && tooltipAnchorRef.current) {
       updateTooltipAnchor(
         tooltipAnchorRef.current,
@@ -12371,31 +12621,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",
@@ -12415,23 +12712,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?.({
@@ -12442,17 +12758,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) {
@@ -12481,7 +12793,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",
@@ -12494,16 +12809,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,
           {
@@ -12523,11 +12838,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) {
@@ -13790,7 +14105,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";
@@ -14044,11 +14359,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;
@@ -14066,7 +14385,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),
@@ -14108,13 +14427,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 {
@@ -14343,7 +14656,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";
@@ -14381,7 +14694,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;
@@ -14530,7 +14843,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 = [];
@@ -16028,12 +16341,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;
@@ -16119,7 +16432,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);
@@ -16289,12 +16602,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";
@@ -16332,7 +16645,7 @@ function createDistortionResources() {
     depthWrite: false,
     fragmentShader,
     uniforms: {
-      distortion: { value: new Vector27() },
+      distortion: { value: new Vector28() },
       sourceTexture: { value: target.texture }
     },
     vertexShader
@@ -16380,7 +16693,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);
@@ -16400,7 +16713,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;
       }
@@ -16475,7 +16788,7 @@ function WebVRStereoRenderer({
     if (runtime) {
       runtime.stereoView.active = fallback;
     }
-    if (fallback && camera instanceof PerspectiveCamera9) {
+    if (fallback && camera instanceof PerspectiveCamera10) {
       syncStereoCameras(
         stereoRef.current,
         camera,
@@ -16486,7 +16799,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;