@ericchen1990/pano-view 3.6.3 → 3.6.5

package/README.zh-CN.md

@@ -60,15 +60,15 @@
 | 更新 | 生成并发布文件，再管理入口引用和缓存 | 无需发布静态文件；生效时间仍取决于后端和客户端缓存 |
 | 权限与个性化 | 公开文件适合公开内容；私有分发需要托管/CDN 访问控制 | 后端可按用户、组织鉴权并返回不同配置 |
 | 可用性与维护 | 依赖静态托管/CDN；维护发布及缓存更新流程 | 依赖 API 及其数据库/缓存服务；维护查询、鉴权及缓存失效 |
-| 适用场景 | 公开、已发布的导览；更新较少；读取流量大 | 编辑预览、私有内容、频繁更新和个性化 |
+| 适用场景 | 公开、已发布的漫游；更新较少；读取流量大 | 编辑预览、私有内容、频繁更新和个性化 |
 
-**公开、已发布的导览优先使用 JSON + CDN；编辑预览、私有和个性化内容优先使用数据库 + API。** 同时需要两者时，以数据库作为编辑来源，发布时生成 JSON 快照。这种混合方式需要应用自己的发布流程；包不会自动生成或同步快照。
+**公开、已发布的漫游优先使用 JSON + CDN；编辑预览、私有和个性化内容优先使用数据库 + API。** 同时需要两者时，以数据库作为编辑来源，发布时生成 JSON 快照。这种混合方式需要应用自己的发布流程；包不会自动生成或同步快照。
 
 两条路径均不会自动轮询或订阅配置变化。更新已打开的页面时，宿主应用需要重新加载配置，并将新数据传给查看器。未命中缓存的 API 读取可以返回当前数据库值，但不会让已有查看器自动更新。
 
 ### 数据库配置接入
 
-后端先查询导览并完成鉴权，再将需要公开给查看器的配置字段映射为项目。下例的 `readAuthorizedTour` 由宿主应用实现，负责数据库读取和访问检查，不是包提供的 API。它返回的场景记录包含转换时保存的精简 `viewerConfig`、资源目录、视角和热点定义：
+后端先查询漫游并完成鉴权，再将需要公开给查看器的配置字段映射为项目。下例的 `readAuthorizedTour` 由宿主应用实现，负责数据库读取和访问检查，不是包提供的 API。它返回的场景记录包含转换时保存的精简 `viewerConfig`、资源目录、视角和热点定义：
 
 ```ts
 import { loadPanoProject } from "@ericchen1990/pano-view/data";
@@ -1826,7 +1826,7 @@ import { VideoHotspot } from "@ericchen1990/pano-view";
 
 `playing` 与 `VideoHotspot` 一样受控。`loop` 默认 `false`，`muted` 默认 `false`，`volume` 默认 `1`，`pauseWhenHidden` 默认 `true`（标签页隐藏时暂停，`playing` 仍为 `true` 时，在标签页恢复可见后继续播放）。首次用户手势会解锁音频；若自动播放被阻止，会报告 `"blocked"`，并在 `playing` 仍为 true 时于下一次指针或按键后重试 `play()`。
 
-默认标记在 **停止**（扬声器）与 **播放**（扬声器 + 声波）之间切换。可用 `icon` 自定义停止图标、`playingIcon` 自定义播放图标。只设 `icon` 时两种状态共用该图。`marker={false}` 隐藏标记，仍保留定点声源。整个导览共用或按场景切换的非空间背景音频请使用 [`BackgroundAudio`](#backgroundaudio)。
+默认标记在 **停止**（扬声器）与 **播放**（扬声器 + 声波）之间切换。可用 `icon` 自定义停止图标、`playingIcon` 自定义播放图标。只设 `icon` 时两种状态共用该图。`marker={false}` 隐藏标记，仍保留定点声源。整个漫游共用或按场景切换的非空间背景音频请使用 [`BackgroundAudio`](#backgroundaudio)。
 
 ```tsx
 import { AudioHotspot } from "@ericchen1990/pano-view";

package/dist/index.cjs

@@ -4027,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);
@@ -4053,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;
@@ -4064,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)) {
@@ -4095,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;
       }
@@ -4136,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);
@@ -5630,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;
@@ -5773,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);
@@ -5799,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) {
@@ -5821,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;
@@ -5864,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;
       }
@@ -5887,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);
@@ -11436,6 +11490,94 @@ 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;
+}
+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
 var import_react40 = require("react");
 
@@ -11695,6 +11837,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");
@@ -11777,6 +11934,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],
@@ -11864,6 +12026,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":
@@ -12059,6 +12249,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,
@@ -12098,10 +12306,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);
@@ -12171,7 +12382,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;
     },
     []
@@ -12228,6 +12441,7 @@ function HotspotAnchor({
     if (!dragState) {
       return;
     }
+    dragState.stopTracking();
     dragState.releaseInteractionLock();
     dragStateRef.current = null;
     setDragging(false);
@@ -12250,6 +12464,7 @@ function HotspotAnchor({
       worldHeight,
       resolvedDistance
     );
+    placeSelectionFrame(selectionFrameRef.current, group, camera, size.height);
     if (tooltipOpen && tooltipAnchorRef.current) {
       updateTooltipAnchor(
         tooltipAnchorRef.current,
@@ -12268,6 +12483,7 @@ function HotspotAnchor({
     rotation,
     scaleMode,
     size,
+    selected,
     surfaceQuaternion3,
     tooltipOpen,
     tooltipPlacement,
@@ -12293,6 +12509,12 @@ function HotspotAnchor({
       worldHeight,
       resolvedDistance
     );
+    placeSelectionFrame(
+      selectionFrameRef.current,
+      group,
+      state.camera,
+      state.size.height
+    );
     if (tooltipOpen && tooltipAnchorRef.current) {
       updateTooltipAnchor(
         tooltipAnchorRef.current,
@@ -12308,31 +12530,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",
@@ -12352,23 +12621,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?.({
@@ -12379,17 +12667,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) {
@@ -12418,7 +12702,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",
@@ -12431,16 +12718,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,
           {
@@ -13943,11 +14230,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;
@@ -14007,13 +14298,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 {