fix: strict movetype moving wrong panel on circular flicking (#842)

* fix: strict movetype moving wrong panel on circular * test: add test for strict control on circular flicking
naver · Dec 11, 2023 · e180d97 · e180d97
1 parent 346c43a
commit e180d97
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/control/Control.ts b/src/control/Control.ts
@@ -23,6 +23,7 @@ abstract class Control {
   protected _flicking: Flicking | null;
   protected _controller: AxesController;
   protected _activePanel: Panel | null;
+  protected _nextPanel: Panel | null;
 
   /**
    * A controller that handles the {@link https://naver.github.io/egjs-axes/ @egjs/axes} events
@@ -317,6 +318,7 @@ abstract class Control {
     const flicking = getFlickingAttached(this._flicking);
 
     this._activePanel = newActivePanel;
+    this._nextPanel = null;
 
     flicking.camera.updateAdaptiveHeight();
 
@@ -357,6 +359,8 @@ abstract class Control {
       isTrusted: axesEvent?.isTrusted || false,
       direction: getDirection(activePanel?.position ?? camera.position, position)
     });
+
+    this._nextPanel = panel;
     flicking.trigger(event);
 
     if (event.isCanceled()) {

diff --git a/src/control/StrictControl.ts b/src/control/StrictControl.ts
@@ -190,7 +190,7 @@ class StrictControl extends Control {
   public moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
     const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
-    const activePanel = this._activePanel;
+    const currentPanel = this._nextPanel ?? this._activePanel;
     const axesRange = this._controller.range;
     const indexRange = this._indexRange;
     const cameraRange = camera.range;
@@ -199,11 +199,11 @@ class StrictControl extends Control {
     const clampedPosition = clamp(camera.clampToReachablePosition(position), axesRange[0], axesRange[1]);
     const anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);
 
-    if (!anchorAtPosition || !activePanel) {
+    if (!anchorAtPosition || !currentPanel) {
       return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(position), ERROR.CODE.POSITION_NOT_REACHABLE));
     }
 
-    const prevPos = activePanel.position;
+    const prevPos = currentPanel.position;
     const posDelta = flicking.animating
       ? state.delta
       : position - camera.position;
@@ -233,7 +233,7 @@ class StrictControl extends Control {
 
       targetPanel = targetAnchor.panel;
       targetPos = targetAnchor.position;
-    } else if (isOverThreshold && anchorAtPosition.position !== activePanel.position) {
+    } else if (isOverThreshold && anchorAtPosition.position !== currentPanel.position) {
       // Move to anchor at position
       targetPanel = anchorAtPosition.panel;
       targetPos = anchorAtPosition.position;

diff --git a/test/unit/control/StrictControl.spec.ts b/test/unit/control/StrictControl.spec.ts
@@ -286,6 +286,19 @@ describe("StrictControl", () => {
         expect(moveSpy.calledTwice).to.be.true;
         expect(control.activePanel.index).to.equal(camera.findNearestAnchor(position).panel.index);
       });
+
+      it("should determine the next panel based on the target panel of the willChange event", async () => {
+        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { moveType: MOVE_TYPE.STRICT, circular: true, duration: 5000, threshold: 0 });
+
+        await simulate(flicking.element, { deltaX: 900, duration: 100 }, 1000);
+        tick(500);
+        await simulate(flicking.element, { deltaX: 900, duration: 100 }, 1000);
+        tick(500);
+        await simulate(flicking.element, { deltaX: 900, duration: 100 }, 1000);
+        tick(5000);
+
+        expect(flicking.index).to.equal(0);
+      });
     });
   });
 });