@capgo/capacitor-transitions 8.0.1 → 8.0.3

package/dist/index.js

@@ -943,12 +943,15 @@ var init_transition_controller = __esm({
           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;
       }
@@ -961,9 +964,12 @@ var init_transition_controller = __esm({
           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;
         }
       }
@@ -1142,15 +1148,16 @@ var init_transition_controller = __esm({
           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);
@@ -1163,6 +1170,7 @@ var init_transition_controller = __esm({
           return animation.finished.catch(() => void 0);
         });
         await Promise.all(finished);
+        transition.progress = targetProgress;
       }
       /**
        * Resolve configured easing presets after platform/direction are known.
@@ -1334,13 +1342,32 @@ var init_cap_router_outlet = __esm({
       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"];
       }
@@ -1359,7 +1386,10 @@ var init_cap_router_outlet = __esm({
         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);
         });
@@ -1375,10 +1405,14 @@ var init_cap_router_outlet = __esm({
       }
       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) {
@@ -1459,13 +1493,16 @@ var init_cap_router_outlet = __esm({
         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;
         }
@@ -1580,7 +1617,7 @@ var init_cap_router_outlet = __esm({
        * 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.
@@ -1657,6 +1694,10 @@ var init_cap_router_outlet = __esm({
         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() {
@@ -1672,30 +1713,132 @@ var init_cap_router_outlet = __esm({
       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) {
@@ -1747,12 +1890,14 @@ var init_cap_router_outlet = __esm({
         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
@@ -1782,6 +1927,10 @@ var init_cap_router_outlet = __esm({
           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) {
@@ -1790,9 +1939,12 @@ var init_cap_router_outlet = __esm({
           }
         }
         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) => {
@@ -1805,12 +1957,17 @@ var init_cap_router_outlet = __esm({
         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);
       };
@@ -1818,6 +1975,7 @@ var init_cap_router_outlet = __esm({
         this.cancelSwipeGesture(event.pointerId);
       };
       cancelSwipeGesturePointer(pointerId) {
+        this.clearQueuedSwipeGestureStep();
         this.releaseSwipeGesturePointer(pointerId);
       }
       releaseSwipeGesturePointer(pointerId) {
@@ -1836,14 +1994,49 @@ var init_cap_router_outlet = __esm({
           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) {