@capgo/capacitor-transitions 8.0.1 → 8.0.3

package/dist/vue/index.mjs

@@ -796,12 +796,15 @@ var TransitionController = class {
       animation.pause();
       animation.currentTime = 0;
     }
+    const animationDurations = animations.map((animation) => this.getAnimationDuration(animation, duration));
     this.currentAnimations = animations;
     this.interactiveBackTransition = {
       enteringState,
       leavingState,
       animations,
-      duration
+      animationDurations,
+      duration,
+      progress: 0
     };
     return true;
   }
@@ -814,9 +817,12 @@ var TransitionController = class {
       return;
     }
     const progress = Math.max(0, Math.min(step, 0.9999));
-    for (const animation of transition.animations) {
-      const duration = this.getAnimationDuration(animation, transition.duration);
-      animation.pause();
+    if (Math.abs(progress - transition.progress) < 5e-4) {
+      return;
+    }
+    transition.progress = progress;
+    for (const [index, animation] of transition.animations.entries()) {
+      const duration = transition.animationDurations[index] ?? transition.duration;
       animation.currentTime = duration * progress;
     }
   }
@@ -995,15 +1001,16 @@ var TransitionController = class {
       return;
     }
     if (releaseDuration <= 0) {
-      for (const animation of transition.animations) {
-        const duration = this.getAnimationDuration(animation, transition.duration);
+      transition.progress = targetProgress;
+      for (const [index, animation] of transition.animations.entries()) {
+        const duration = transition.animationDurations[index] ?? transition.duration;
         animation.pause();
         animation.currentTime = duration * targetProgress;
       }
       return;
     }
-    const finished = transition.animations.map((animation) => {
-      const duration = this.getAnimationDuration(animation, transition.duration);
+    const finished = transition.animations.map((animation, index) => {
+      const duration = transition.animationDurations[index] ?? transition.duration;
       const currentTime = typeof animation.currentTime === "number" ? animation.currentTime : 0;
       const targetTime = duration * targetProgress;
       const distance = Math.abs(targetTime - currentTime);
@@ -1016,6 +1023,7 @@ var TransitionController = class {
       return animation.finished.catch(() => void 0);
     });
     await Promise.all(finished);
+    transition.progress = targetProgress;
   }
   /**
    * Resolve configured easing presets after platform/direction are known.
@@ -1205,13 +1213,32 @@ var CapRouterOutlet = class extends HTMLElement {
   pendingPage = null;
   ignoredNodes = /* @__PURE__ */ new WeakSet();
   swipeGesturePointer = null;
+  swipeGestureFrame = 0;
+  swipeGesturePendingStep = null;
   swipeGestureListenersActive = false;
   skipNextHistoryBackTransition = false;
   swipeBackDepth = 0;
   lastNavigationHref = null;
+  lastNavigationPosition = null;
+  pendingHistoryDirection = null;
+  navigationHrefs = [];
   swipeGestureEdgeWidth = 50;
   swipeGestureThreshold = 10;
   swipeGestureMinimumVelocity = 0.2;
+  handleHistoryPopState = () => {
+    const currentPosition = this.getCurrentNavigationPosition();
+    if (currentPosition !== null && this.lastNavigationPosition !== null) {
+      if (currentPosition < this.lastNavigationPosition) {
+        this.pendingHistoryDirection = "back";
+        return;
+      }
+      if (currentPosition > this.lastNavigationPosition) {
+        this.pendingHistoryDirection = "forward";
+        return;
+      }
+    }
+    this.pendingHistoryDirection = "back";
+  };
   static get observedAttributes() {
     return ["platform", "duration", "keep-in-dom", "max-cached", "swipe-gesture"];
   }
@@ -1230,7 +1257,10 @@ var CapRouterOutlet = class extends HTMLElement {
     this.style.width = "100%";
     this.style.height = "100%";
     this.style.overflow = "hidden";
+    this.style.overscrollBehaviorX = "contain";
     this.lastNavigationHref = this.getCurrentNavigationHref();
+    this.lastNavigationPosition = this.getCurrentNavigationPosition();
+    this.ownerDocument.defaultView?.addEventListener("popstate", this.handleHistoryPopState);
     this.observer = new MutationObserver((mutations) => {
       this.handleMutations(mutations);
     });
@@ -1246,10 +1276,14 @@ var CapRouterOutlet = class extends HTMLElement {
   }
   disconnectedCallback() {
     this.observer?.disconnect();
+    this.ownerDocument.defaultView?.removeEventListener("popstate", this.handleHistoryPopState);
     this.removeSwipeGestureListeners();
     this.controller.clear();
     this.swipeBackDepth = 0;
     this.lastNavigationHref = null;
+    this.lastNavigationPosition = null;
+    this.pendingHistoryDirection = null;
+    this.navigationHrefs = [];
   }
   attributeChangedCallback(name, _oldValue, newValue) {
     switch (name) {
@@ -1330,13 +1364,16 @@ var CapRouterOutlet = class extends HTMLElement {
     this.controller.pageStack.push(state);
     this.swipeBackDepth = 0;
     this.lastNavigationHref = this.getCurrentNavigationHref();
+    this.lastNavigationPosition = this.getCurrentNavigationPosition();
+    this.navigationHrefs = [this.lastNavigationHref];
   }
   /**
    * Handle a new page being added
    */
   async handleNewPage(page) {
     const outletDirection = this.dataset.direction;
-    const direction = page.dataset.direction || outletDirection || "forward";
+    const explicitDirection = page.dataset.direction || outletDirection;
+    const direction = this.resolveNavigationDirection(explicitDirection);
     if (outletDirection) {
       delete this.dataset.direction;
     }
@@ -1451,7 +1488,7 @@ var CapRouterOutlet = class extends HTMLElement {
    * Check if we can go back
    */
   get canGoBack() {
-    return this.controller.stack.length > 1 && this.swipeBackDepth > 0;
+    return this.getSwipeBackDestination() !== null;
   }
   /**
    * Get whether edge swipe-back gesture is enabled.
@@ -1528,6 +1565,10 @@ var CapRouterOutlet = class extends HTMLElement {
     this.removeEventListener("pointerup", this.handleSwipeGesturePointerEnd);
     this.removeEventListener("pointercancel", this.handleSwipeGesturePointerCancel);
     this.swipeGestureListenersActive = false;
+    this.clearQueuedSwipeGestureStep();
+    if (this.swipeGesturePointer?.transitionStarted) {
+      this.controller.cancelInteractiveBack();
+    }
     this.swipeGesturePointer = null;
   }
   isSwipeGestureEnabled() {
@@ -1543,30 +1584,132 @@ var CapRouterOutlet = class extends HTMLElement {
   getCurrentNavigationHref() {
     return this.ownerDocument.defaultView?.location.href ?? null;
   }
+  getCurrentNavigationPosition() {
+    const win = this.ownerDocument.defaultView;
+    if (!win) {
+      return null;
+    }
+    const navigationIndex = win.navigation?.currentEntry?.index;
+    if (typeof navigationIndex === "number" && Number.isFinite(navigationIndex)) {
+      return navigationIndex;
+    }
+    const state = win.history.state;
+    for (const key of ["idx", "position", "index"]) {
+      const value = state?.[key];
+      if (typeof value === "number" && Number.isFinite(value)) {
+        return value;
+      }
+    }
+    return null;
+  }
+  resolveNavigationDirection(explicitDirection) {
+    if (explicitDirection) {
+      this.pendingHistoryDirection = null;
+      return explicitDirection;
+    }
+    const currentHref = this.getCurrentNavigationHref();
+    const existingHrefIndex = this.findNavigationHrefIndex(currentHref, this.navigationHrefs.length - 2);
+    if (existingHrefIndex !== -1) {
+      this.pendingHistoryDirection = null;
+      return "back";
+    }
+    if (currentHref !== null && currentHref === this.lastNavigationHref) {
+      this.pendingHistoryDirection = null;
+      return "none";
+    }
+    if (this.pendingHistoryDirection) {
+      const direction = this.pendingHistoryDirection;
+      this.pendingHistoryDirection = null;
+      return direction;
+    }
+    const currentPosition = this.getCurrentNavigationPosition();
+    if (currentPosition !== null && this.lastNavigationPosition !== null) {
+      if (currentPosition < this.lastNavigationPosition) {
+        return "back";
+      }
+      if (currentPosition === this.lastNavigationPosition) {
+        return "none";
+      }
+    }
+    return "forward";
+  }
   recordCompletedNavigation(direction, options) {
     const currentHref = this.getCurrentNavigationHref();
+    const currentPosition = this.getCurrentNavigationPosition();
     if (!options.hadPageBefore || direction === "root") {
-      this.swipeBackDepth = 0;
-      this.lastNavigationHref = currentHref;
+      this.resetNavigationDepth(currentHref, currentPosition);
       return;
     }
     if (direction === "back") {
-      this.swipeBackDepth = Math.max(0, this.swipeBackDepth - 1);
+      this.recordBackNavigation(currentHref);
+      this.lastNavigationPosition = currentPosition;
+      return;
+    }
+    if (direction === "none") {
+      if (this.navigationHrefs.length === 0) {
+        this.navigationHrefs = [currentHref];
+      } else {
+        this.navigationHrefs[this.navigationHrefs.length - 1] = currentHref;
+      }
+      this.syncSwipeBackDepth();
       this.lastNavigationHref = currentHref;
+      this.lastNavigationPosition = currentPosition;
       return;
     }
-    if (direction === "forward" || direction === "none") {
+    if (direction === "forward") {
       const hrefChanged = currentHref === null || this.lastNavigationHref === null || currentHref !== this.lastNavigationHref;
       if (options.forceForward || hrefChanged) {
-        this.swipeBackDepth += 1;
+        this.navigationHrefs.push(currentHref);
+      } else if (this.navigationHrefs.length === 0) {
+        this.navigationHrefs = [currentHref];
       }
+      this.syncSwipeBackDepth();
       this.lastNavigationHref = currentHref;
+      this.lastNavigationPosition = currentPosition;
       return;
     }
     this.lastNavigationHref = currentHref;
+    this.lastNavigationPosition = currentPosition;
+  }
+  resetNavigationDepth(currentHref, currentPosition) {
+    this.navigationHrefs = [currentHref];
+    this.swipeBackDepth = 0;
+    this.lastNavigationHref = currentHref;
+    this.lastNavigationPosition = currentPosition;
+  }
+  recordBackNavigation(currentHref) {
+    const existingHrefIndex = this.findNavigationHrefIndex(currentHref, this.navigationHrefs.length - 2);
+    if (existingHrefIndex !== -1) {
+      this.navigationHrefs = this.navigationHrefs.slice(0, existingHrefIndex + 1);
+    } else if (this.navigationHrefs.length > 1) {
+      this.navigationHrefs.pop();
+      this.navigationHrefs[this.navigationHrefs.length - 1] = currentHref;
+    } else {
+      this.navigationHrefs = [currentHref];
+    }
+    this.syncSwipeBackDepth();
+    this.lastNavigationHref = currentHref;
+  }
+  findNavigationHrefIndex(href, fromIndex) {
+    for (let index = Math.min(fromIndex, this.navigationHrefs.length - 1); index >= 0; index -= 1) {
+      if (this.navigationHrefs[index] === href) {
+        return index;
+      }
+    }
+    return -1;
+  }
+  syncSwipeBackDepth() {
+    this.swipeBackDepth = Math.max(0, this.navigationHrefs.length - 1);
+  }
+  getSwipeBackDestination() {
+    const stack = this.controller.stack;
+    if (this.swipeBackDepth <= 0 || stack.length <= 1) {
+      return null;
+    }
+    return stack[stack.length - 2] ?? null;
   }
   canStartSwipeGesture(event) {
-    if (!this.isSwipeGestureEnabled() || this.controller.animating || this.pendingPage || !this.canGoBack) {
+    if (!this.isSwipeGestureEnabled() || this.controller.animating || this.pendingPage || !this.getSwipeBackDestination()) {
       return false;
     }
     if (!event.isPrimary || event.pointerType === "mouse" && event.button !== 0) {
@@ -1618,12 +1761,14 @@ var CapRouterOutlet = class extends HTMLElement {
     if (!this.canStartSwipeGesture(event)) {
       return;
     }
+    const width = Math.max(this.getBoundingClientRect().width, 1);
     this.swipeGesturePointer = {
       pointerId: event.pointerId,
       startX: event.clientX,
       startY: event.clientY,
       currentX: event.clientX,
       currentY: event.clientY,
+      width,
       startTime: performance.now(),
       dragging: false,
       transitionStarted: false
@@ -1653,6 +1798,10 @@ var CapRouterOutlet = class extends HTMLElement {
       return;
     }
     if (!pointer.dragging && deltaX > this.swipeGestureThreshold && absX > absY) {
+      if (!this.getSwipeBackDestination()) {
+        this.cancelSwipeGesturePointer(event.pointerId);
+        return;
+      }
       pointer.dragging = true;
       pointer.transitionStarted = this.controller.beginInteractiveBack({ direction: "back" });
       if (!pointer.transitionStarted) {
@@ -1661,9 +1810,12 @@ var CapRouterOutlet = class extends HTMLElement {
       }
     }
     if (pointer.dragging && pointer.transitionStarted) {
+      if (!this.getSwipeBackDestination()) {
+        this.cancelSwipeGesture(event.pointerId);
+        return;
+      }
       if (event.cancelable) event.preventDefault();
-      const width = Math.max(this.getBoundingClientRect().width, 1);
-      this.controller.stepInteractiveBack(deltaX / width);
+      this.queueSwipeGestureStep(deltaX / pointer.width);
     }
   };
   handleSwipeGesturePointerEnd = (event) => {
@@ -1676,12 +1828,17 @@ var CapRouterOutlet = class extends HTMLElement {
     const deltaX = this.getSwipeGestureDeltaX(pointer);
     const elapsed = Math.max(performance.now() - pointer.startTime, 1);
     const velocityX = deltaX / elapsed;
-    const width = Math.max(this.getBoundingClientRect().width, 1);
+    const width = pointer.width;
     const step = deltaX / width;
     const shouldCommit = pointer.dragging && pointer.transitionStarted && velocityX >= 0 && (velocityX > this.swipeGestureMinimumVelocity || deltaX > width / 2);
     const missing = shouldCommit ? 1 - step : step;
     const missingDistance = Math.max(missing, 0) * width;
     const releaseDuration = missingDistance > 5 && Math.abs(velocityX) > 0 ? Math.min(missingDistance / Math.abs(velocityX), 540) : 0;
+    if (pointer.transitionStarted) {
+      this.flushQueuedSwipeGestureStep();
+    } else {
+      this.clearQueuedSwipeGestureStep();
+    }
     this.releaseSwipeGesturePointer(event.pointerId);
     void this.finishSwipeGestureBack(shouldCommit, releaseDuration);
   };
@@ -1689,6 +1846,7 @@ var CapRouterOutlet = class extends HTMLElement {
     this.cancelSwipeGesture(event.pointerId);
   };
   cancelSwipeGesturePointer(pointerId) {
+    this.clearQueuedSwipeGestureStep();
     this.releaseSwipeGesturePointer(pointerId);
   }
   releaseSwipeGesturePointer(pointerId) {
@@ -1707,14 +1865,49 @@ var CapRouterOutlet = class extends HTMLElement {
       return;
     }
     this.releaseSwipeGesturePointer(pointerId);
+    this.clearQueuedSwipeGestureStep();
     if (pointer.transitionStarted) {
       void this.finishSwipeGestureBack(false, 0);
     }
   }
+  queueSwipeGestureStep(step) {
+    this.swipeGesturePendingStep = step;
+    if (this.swipeGestureFrame !== 0) {
+      return;
+    }
+    const win = this.ownerDocument.defaultView;
+    if (!win) {
+      this.flushQueuedSwipeGestureStep();
+      return;
+    }
+    this.swipeGestureFrame = win.requestAnimationFrame(() => {
+      this.swipeGestureFrame = 0;
+      this.flushQueuedSwipeGestureStep();
+    });
+  }
+  flushQueuedSwipeGestureStep() {
+    const step = this.swipeGesturePendingStep;
+    this.swipeGesturePendingStep = null;
+    if (this.swipeGestureFrame !== 0) {
+      this.ownerDocument.defaultView?.cancelAnimationFrame(this.swipeGestureFrame);
+      this.swipeGestureFrame = 0;
+    }
+    if (step !== null) {
+      this.controller.stepInteractiveBack(step);
+    }
+  }
+  clearQueuedSwipeGestureStep() {
+    if (this.swipeGestureFrame !== 0) {
+      this.ownerDocument.defaultView?.cancelAnimationFrame(this.swipeGestureFrame);
+      this.swipeGestureFrame = 0;
+    }
+    this.swipeGesturePendingStep = null;
+  }
   async finishSwipeGestureBack(shouldComplete, releaseDuration) {
-    const shouldUseHistory = shouldComplete && typeof window !== "undefined" && window.history.length > 1;
-    await this.controller.endInteractiveBack(shouldComplete, releaseDuration, !shouldUseHistory);
-    if (!shouldComplete) {
+    const canComplete = shouldComplete && this.getSwipeBackDestination() !== null;
+    const shouldUseHistory = canComplete && typeof window !== "undefined" && window.history.length > 1;
+    await this.controller.endInteractiveBack(canComplete, canComplete ? releaseDuration : 0, !shouldUseHistory);
+    if (!canComplete) {
       return;
     }
     if (shouldUseHistory) {