@ericchen1990/pano-view 3.6.1 → 3.6.2

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;
@@ -3747,8 +3772,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 +3788,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 +3910,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 +3999,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 +4020,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 +5694,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 +5765,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 +5812,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 +5830,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);