@ericchen1990/pano-view 3.6.1 → 3.6.3

package/dist/index.mjs

@@ -2842,7 +2842,12 @@ var PanoramaViewRuntime = forwardRef(function PanoramaViewRuntime2({ initialView
       }
     }
     markDirty();
-    if (applyOptions?.recordVelocity && !gyroControlsView) {
+    const releaseVelocity = applyOptions?.velocity;
+    if (!gyroControlsView && releaseVelocity && Number.isFinite(releaseVelocity.yaw) && Number.isFinite(releaseVelocity.pitch)) {
+      yawVelocityRef.current = releaseVelocity.yaw;
+      pitchVelocityRef.current = releaseVelocity.pitch;
+      lastVelocitySampleAtRef.current = performance.now();
+    } else if (applyOptions?.recordVelocity && !gyroControlsView) {
       const now = performance.now();
       const previousAt = lastVelocitySampleAtRef.current;
       const elapsed = previousAt === null ? 1 / 60 : Math.max((now - previousAt) / 1e3, 1 / 120);
@@ -3690,6 +3695,26 @@ import { useContext as useContext5, useEffect as useEffect5, useRef as useRef5 }
 import { Euler as Euler2, MathUtils as MathUtils2, PerspectiveCamera as PerspectiveCamera2, Vector3 } from "three";
 var DEFAULT_POINTER_DRAG_SPEED = 0.35;
 var POINTER_FOLLOW_TIME_SECONDS = 0.01;
+var MIN_VELOCITY_SAMPLE_SECONDS = 1 / 120;
+function pointerReleaseVelocity(samples, releasedAt, solve, maxAgeMs = POINTER_VELOCITY_MAX_AGE_MS) {
+  if (samples.length < 2) return { yaw: 0, pitch: 0 };
+  const newest = samples[samples.length - 1];
+  if (releasedAt < newest.at || releasedAt - newest.at > maxAgeMs) return { yaw: 0, pitch: 0 };
+  let oldest = newest;
+  for (let index = samples.length - 1; index >= 0; index -= 1) {
+    const sample = samples[index];
+    if (releasedAt - sample.at <= maxAgeMs) oldest = sample;
+    else break;
+  }
+  if (oldest === newest) return { yaw: 0, pitch: 0 };
+  const elapsed = Math.max((newest.at - oldest.at) / 1e3, MIN_VELOCITY_SAMPLE_SECONDS);
+  const from = solve(oldest);
+  const to = solve(newest);
+  return {
+    yaw: normalizeViewYaw(to.yaw - from.yaw) / elapsed,
+    pitch: (to.pitch - from.pitch) / elapsed
+  };
+}
 var PointerDragAnchor = class {
   constructor(start, origin, rect, projection) {
     this.start = start;
@@ -3698,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(
@@ -3712,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 };
@@ -3719,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 };
   }
 };
@@ -3747,8 +3798,11 @@ function createPointerDrag(camera, element, runtime, source) {
   let lastPoint;
   let fresh = false;
   let lastFrameDelta = 1 / 60;
+  let samples = [];
+  let gestureSpeed = DEFAULT_POINTER_DRAG_SPEED;
+  let gestureInvert = false;
   const key = (rect) => `${rect.left},${rect.top},${rect.width},${rect.height},${camera.projectionMatrix.elements.join(",")}`;
-  const start = (point) => {
+  const place = (point) => {
     const handle = runtime();
     displayed = { ...point };
     lastPoint = { ...point };
@@ -3760,69 +3814,113 @@ function createPointerDrag(camera, element, runtime, source) {
     projectionKey = key(rect);
     anchor = new PointerDragAnchor(point, handle.getView(), rect, camera.clone());
   };
-  const apply = (point, previous, speed, invert, recordVelocity) => {
+  const remember = (point, at) => {
+    samples.push({ x: point.x, y: point.y, at });
+    const cutoff = at - POINTER_VELOCITY_MAX_AGE_MS;
+    while (samples.length > 2 && samples[0].at < cutoff) samples.shift();
+  };
+  const apply = (point, previous, speed, invert, recordVelocity, releaseVelocity) => {
     const handle = runtime();
     if (!handle) return;
     const rect = element.getBoundingClientRect();
     if (anchor && key(rect) !== projectionKey) {
       const queued = pending;
-      start(displayed ?? previous);
+      place(displayed ?? previous);
       pending = queued;
     }
+    const options = {
+      recordVelocity: releaseVelocity ? false : recordVelocity,
+      source,
+      ...releaseVelocity ? { velocity: releaseVelocity } : {}
+    };
     if (anchor) {
       handle.applyViewDelta(anchor.solve(point, speed, invert), {
-        pointerOrigin: anchor.origin,
-        recordVelocity,
-        source
+        ...options,
+        pointerOrigin: anchor.origin
       });
     } else {
       handle.applyViewDelta({
         yaw: -(point.x - previous.x) * 360 * speed / Math.max(rect.width, 1) * (invert ? -1 : 1),
         pitch: (point.y - previous.y) * 180 * speed / Math.max(rect.height, 1) * (invert ? -1 : 1)
-      }, { recordVelocity, source });
+      }, options);
     }
   };
+  const valid = () => revision === (runtime()?.getPointerDragState().revision ?? -1) && !runtime()?.isInteractionLocked();
+  const clear = () => {
+    anchor = void 0;
+    revision = -1;
+    pending = void 0;
+    displayed = void 0;
+    samples = [];
+  };
   return {
-    start,
-    valid: () => revision === (runtime()?.getPointerDragState().revision ?? -1) && !runtime()?.isInteractionLocked(),
-    clear: () => {
-      anchor = void 0;
-      revision = -1;
-      pending = void 0;
-      displayed = void 0;
+    start(point, at = performance.now()) {
+      gestureSpeed = DEFAULT_POINTER_DRAG_SPEED;
+      gestureInvert = false;
+      samples = [];
+      remember(point, at);
+      place(point);
     },
+    valid,
+    clear,
     suspend: () => {
       anchor = void 0;
       pending = void 0;
       displayed = void 0;
+      samples = [];
     },
-    move(point, previous, speed, invert) {
+    move(point, previous, speed, invert, at = performance.now()) {
       fresh = true;
+      gestureSpeed = speed;
+      gestureInvert = invert;
+      remember(point, at);
       pending = { point, previous: lastPoint ?? previous, speed, invert };
     },
-    flush(deltaSeconds = lastFrameDelta, immediate = false) {
-      lastFrameDelta = deltaSeconds;
+    flush(deltaSeconds = lastFrameDelta, immediate = false, releaseVelocity) {
+      if (deltaSeconds > 0) lastFrameDelta = deltaSeconds;
       if (!pending) return;
       const sample = pending;
       if (!anchor || immediate) {
         pending = void 0;
-        apply(sample.point, sample.previous, sample.speed, sample.invert, fresh);
+        apply(sample.point, sample.previous, sample.speed, sample.invert, fresh, releaseVelocity);
         fresh = false;
         lastPoint = sample.point;
         displayed = sample.point;
         return;
       }
+      const dt = deltaSeconds > 0 ? deltaSeconds : lastFrameDelta;
       const previousDisplay = displayed ?? sample.previous;
       const dx = sample.point.x - previousDisplay.x;
       const dy = sample.point.y - previousDisplay.y;
       const distance = Math.hypot(dx, dy);
-      const ratio = distance > 0.01 ? POINTER_FOLLOW_TIME_SECONDS / (POINTER_FOLLOW_TIME_SECONDS + deltaSeconds) : 0;
+      const ratio = distance > 0.01 ? POINTER_FOLLOW_TIME_SECONDS / (POINTER_FOLLOW_TIME_SECONDS + dt) : 0;
       const point = { x: sample.point.x - dx * ratio, y: sample.point.y - dy * ratio };
       apply(point, sample.previous, sample.speed, sample.invert, fresh);
       fresh = false;
       lastPoint = sample.point;
       displayed = point;
       if (ratio === 0) pending = void 0;
+    },
+    release() {
+      const handle = runtime();
+      if (!handle || !valid()) {
+        clear();
+        return;
+      }
+      const newestAt = samples[samples.length - 1]?.at ?? 0;
+      const velocity = pointerReleaseVelocity(samples, Math.max(performance.now(), newestAt), (point) => {
+        if (anchor) return anchor.solve(point, gestureSpeed, gestureInvert);
+        const origin = samples[0] ?? point;
+        const rect = element.getBoundingClientRect();
+        const sign = gestureInvert ? -1 : 1;
+        return {
+          yaw: -(point.x - origin.x) * 360 * gestureSpeed / Math.max(rect.width, 1) * sign,
+          pitch: (point.y - origin.y) * 180 * gestureSpeed / Math.max(rect.height, 1) * sign
+        };
+      });
+      if (pending) this.flush(lastFrameDelta, true, velocity);
+      else handle.applyViewDelta({}, { velocity, source });
+      clear();
     }
   };
 }
@@ -3838,6 +3936,9 @@ var BUTTON_FLAG = {
 function resolveSpeed2(value, fallback) {
   return Number.isFinite(value) && value >= 0 ? value : fallback;
 }
+function pointerAt(event) {
+  return event.timeStamp > 0 ? event.timeStamp : performance.now();
+}
 function resolveButtons(buttons) {
   const list = buttons && buttons.length > 0 ? buttons : ["left"];
   return new Set(list.map((button) => BUTTON_FLAG[button]));
@@ -3924,7 +4025,7 @@ function MouseControls({
       });
       element.setPointerCapture?.(event.pointerId);
       syncActive();
-      drag.start({ x: event.clientX, y: event.clientY });
+      drag.start({ x: event.clientX, y: event.clientY }, pointerAt(event));
     };
     const onPointerMove = (event) => {
       if (!isMouseLike(event)) {
@@ -3945,15 +4046,15 @@ function MouseControls({
       };
       pointersRef.current.set(event.pointerId, next);
       const speed = resolveSpeed2(optionsRef.current.rotateSpeed, DEFAULT_ROTATE_SPEED2);
-      drag.move(next, previous, speed, optionsRef.current.invert);
+      drag.move(next, previous, speed, optionsRef.current.invert, pointerAt(event));
     };
     const releasePointer = (event) => {
       if (!pointersRef.current.has(event.pointerId)) {
         return;
       }
-      if (event.type === "pointerup") drag.flush();
+      if (event.type === "pointerup") drag.release();
+      else drag.clear();
       pointersRef.current.delete(event.pointerId);
-      drag.clear();
       if (element.hasPointerCapture?.(event.pointerId)) {
         element.releasePointerCapture?.(event.pointerId);
       }
@@ -5619,6 +5720,9 @@ function notifyScenesHost(host) {
 import { useFrame as useFrame6, useThree as useThree7 } from "@react-three/fiber";
 import { useContext as useContext13, useEffect as useEffect11, useRef as useRef10 } from "react";
 var DEFAULT_ROTATE_SPEED3 = 0.35;
+function pointerAt2(event) {
+  return event.timeStamp > 0 ? event.timeStamp : performance.now();
+}
 function resolveSpeed3(value, fallback) {
   return Number.isFinite(value) && value >= 0 ? value : fallback;
 }
@@ -5687,7 +5791,7 @@ function TouchControls({
       });
       element.setPointerCapture?.(event.pointerId);
       syncActive();
-      drag.start({ x: event.clientX, y: event.clientY });
+      drag.start({ x: event.clientX, y: event.clientY }, pointerAt2(event));
       if (pointersRef.current.size >= 2) {
         drag.suspend();
         const [first, second] = Array.from(pointersRef.current.values());
@@ -5734,15 +5838,16 @@ function TouchControls({
         return;
       }
       const speed = resolveSpeed3(optionsRef.current.rotateSpeed, DEFAULT_ROTATE_SPEED3);
-      drag.move(next, previous, speed, optionsRef.current.invert);
+      drag.move(next, previous, speed, optionsRef.current.invert, pointerAt2(event));
     };
     const releasePointer = (event) => {
       if (!pointersRef.current.has(event.pointerId)) {
         return;
       }
-      if (event.type === "pointerup") drag.flush();
+      const pinch = pointersRef.current.size >= 2;
+      if (event.type === "pointerup" && !pinch) drag.release();
+      else drag.clear();
       pointersRef.current.delete(event.pointerId);
-      drag.clear();
       if (element.hasPointerCapture?.(event.pointerId)) {
         element.releasePointerCapture?.(event.pointerId);
       }
@@ -5751,7 +5856,7 @@ function TouchControls({
       }
       syncActive(event.type !== "pointerup");
       const remaining = pointersRef.current.values().next().value;
-      if (remaining) drag.start(remaining);
+      if (remaining) drag.start(remaining, pointerAt2(event));
     };
     element.addEventListener("pointerdown", onPointerDown);
     element.addEventListener("pointermove", onPointerMove);