@ericchen1990/pano-view 3.6.2 → 3.6.4

package/dist/index.cjs

@@ -3769,12 +3769,18 @@ var PointerDragAnchor = class {
     this.projection = projection;
     this.local = new import_three2.Vector3();
     this.rotation = new import_three2.Euler(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(
       import_three2.MathUtils.degToRad(origin.pitch),
       import_three2.MathUtils.degToRad(-origin.yaw),
       0,
       "YXZ"
     ));
+    const originPitch = import_three2.MathUtils.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(
@@ -3783,6 +3789,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(import_three2.MathUtils.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 };
@@ -3790,22 +3811,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(import_three2.MathUtils.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 = import_three2.MathUtils.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 = import_three2.MathUtils.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 = import_three2.MathUtils.radToDeg(Math.atan2(this.anchor.x, -this.anchor.z) - Math.atan2(ray.x, -z));
+    const roots = this.pitchRoots(ray, originPitch);
+    const exactPitch = import_three2.MathUtils.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 = import_three2.MathUtils.smoothstep(fromPole, import_three2.MathUtils.degToRad(8), import_three2.MathUtils.degToRad(18));
+    const pitchTurn = Math.atan2(Math.sin(exactPitch - stablePitch), Math.cos(exactPitch - stablePitch));
+    const pitch = import_three2.MathUtils.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 = import_three2.MathUtils.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 = import_three2.MathUtils.radToDeg(stableYaw + pointerLock * yawTurn);
     return { yaw: normalizeViewYaw(yaw - this.origin.yaw), pitch: import_three2.MathUtils.radToDeg(pitch) - this.origin.pitch };
   }
 };
@@ -4001,7 +4027,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);
@@ -4027,6 +4056,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;
@@ -4038,14 +4086,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)) {
@@ -4069,6 +4117,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;
       }
@@ -4110,6 +4159,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);
@@ -5604,6 +5654,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;
@@ -5747,7 +5803,10 @@ function TouchControls({
   (0, import_react18.useEffect)(() => {
     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);
@@ -5773,20 +5832,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) {
@@ -5795,6 +5856,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;
@@ -5838,6 +5916,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;
       }
@@ -5861,6 +5940,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);
@@ -11410,6 +11490,93 @@ var import_fiber21 = require("@react-three/fiber");
 var import_react42 = require("react");
 var import_three24 = require("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
 var import_react40 = require("react");
 
@@ -11669,6 +11836,21 @@ function fixedScaleFactor(cameraFov, referenceFov) {
   const safeReferenceFov = import_three22.MathUtils.clamp(referenceFov, 1, 179);
   return Math.tan(import_three22.MathUtils.degToRad(cameraFov) / 2) / Math.tan(import_three22.MathUtils.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) ? import_three22.MathUtils.clamp(fovDegrees, 1, 179) : 75;
+  const pixelsPerWorldUnit = height / (2 * Math.tan(import_three22.MathUtils.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
 var import_drei = require("@react-three/drei");
@@ -11751,6 +11933,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 import_three24.Vector3();
+var SELECTION_WORLD_SCALE = new import_three24.Vector3();
 var SELECTION_BORDER_POINTS = [
   [-0.5, -0.5, 1e-3],
   [0.5, -0.5, 1e-3],
@@ -11838,6 +12025,34 @@ function angularDistance(a, b) {
   const bVector = panoPositionToVector3(b);
   return import_three24.MathUtils.radToDeg(aVector.angleTo(bVector));
 }
+var DRAG_POINTER = new import_three24.Vector2();
+var DRAG_RAYCASTER = new import_three24.Raycaster();
+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":
@@ -12033,6 +12248,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 import_three24.PerspectiveCamera ? camera.fov : DEFAULT_REFERENCE_FOV,
+    viewportHeight,
+    SELECTION_BORDER_OUTSET
+  );
+  frame.scale.set(scaleX, scaleY, 1);
+}
 function HotspotAnchor({
   id,
   position,
@@ -12072,10 +12305,13 @@ function HotspotAnchor({
   const hotspotTargetRegistry = (0, import_react42.useContext)(HotspotTargetRegistryContext);
   const eventBus = (0, import_react42.useContext)(PanoEventBusContext);
   const cursorApi = usePanoCursor();
-  const { camera, size } = (0, import_fiber21.useThree)();
+  const { camera, gl, size } = (0, import_fiber21.useThree)();
   const groupRef = (0, import_react42.useRef)(null);
+  const selectionFrameRef = (0, import_react42.useRef)(null);
   const tooltipAnchorRef = (0, import_react42.useRef)(null);
   const dragStateRef = (0, import_react42.useRef)(null);
+  const updateDragRef = (0, import_react42.useRef)(() => void 0);
+  const endDragRef = (0, import_react42.useRef)(() => void 0);
   const suppressNextClickRef = (0, import_react42.useRef)(false);
   const [hovered, setHovered] = (0, import_react42.useState)(false);
   const [dragging, setDragging] = (0, import_react42.useState)(false);
@@ -12145,7 +12381,9 @@ function HotspotAnchor({
   const cursorClaimId = hotspotCursorClaimId(id);
   (0, import_react42.useEffect)(
     () => () => {
-      dragStateRef.current?.releaseInteractionLock();
+      const dragState = dragStateRef.current;
+      dragState?.stopTracking();
+      dragState?.releaseInteractionLock();
       dragStateRef.current = null;
     },
     []
@@ -12202,6 +12440,7 @@ function HotspotAnchor({
     if (!dragState) {
       return;
     }
+    dragState.stopTracking();
     dragState.releaseInteractionLock();
     dragStateRef.current = null;
     setDragging(false);
@@ -12224,6 +12463,7 @@ function HotspotAnchor({
       worldHeight,
       resolvedDistance
     );
+    placeSelectionFrame(selectionFrameRef.current, group, camera, size.height);
     if (tooltipOpen && tooltipAnchorRef.current) {
       updateTooltipAnchor(
         tooltipAnchorRef.current,
@@ -12242,6 +12482,7 @@ function HotspotAnchor({
     rotation,
     scaleMode,
     size,
+    selected,
     surfaceQuaternion3,
     tooltipOpen,
     tooltipPlacement,
@@ -12267,6 +12508,12 @@ function HotspotAnchor({
       worldHeight,
       resolvedDistance
     );
+    placeSelectionFrame(
+      selectionFrameRef.current,
+      group,
+      state.camera,
+      state.size.height
+    );
     if (tooltipOpen && tooltipAnchorRef.current) {
       updateTooltipAnchor(
         tooltipAnchorRef.current,
@@ -12282,31 +12529,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__ */ (0, import_jsx_runtime26.jsxs)(
     "group",
@@ -12326,23 +12620,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?.({
@@ -12353,17 +12666,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) {
@@ -12392,7 +12701,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__ */ (0, import_jsx_runtime26.jsx)(
           "lineSegments",
@@ -12405,16 +12717,16 @@ function HotspotAnchor({
           }
         ) : null,
         children,
-        selected && useAngularScale ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        selected && useAngularScale ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("group", { ref: selectionFrameRef, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           HotspotStrokeLine,
           {
             points: SELECTION_BORDER_POINTS,
             color: "#ffb300",
-            lineWidth: 3,
+            lineWidth: SELECTION_BORDER_WIDTH,
             opacity: 1,
             renderOrder: renderOrder + 1
           }
-        ) : null,
+        ) }) : null,
         tooltipOpen && tooltipContent ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("group", { ref: tooltipAnchorRef, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           HotspotTooltip,
           {
@@ -13917,11 +14229,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 import_three32.CanvasTexture(canvas);
   texture.colorSpace = import_three32.SRGBColorSpace;
   texture.wrapS = import_three32.ClampToEdgeWrapping;
@@ -13981,13 +14297,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 {