@egjs/flicking 4.6.0 → 4.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.6.0",
+	"version": "4.6.3",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",
@@ -13,10 +13,10 @@
 		"build:bundle": "rm -rf ./dist && rollup -c",
 		"build:declaration": "rm -rf ./declaration && tsc -p tsconfig.declaration.json",
 		"build:css": "run-s build:css-clear build:sass build:css-prefix build:css-min",
-		"build:css-clear": "rm -rf ./dist/css",
-		"build:sass": "node-sass sass/ -o dist/css/ -x --output-style expanded",
-		"build:css-prefix": "postcss dist/css/*.css --replace --use autoprefixer --no-map",
-		"build:css-min": "postcss dist/css/*.css --ext .min.css --use postcss-clean -d dist/css/ --no-map",
+		"build:css-clear": "rm -rf ./dist/*.css",
+		"build:sass": "node-sass sass/ -o dist/ -x --output-style expanded",
+		"build:css-prefix": "postcss dist/*.css --replace --use autoprefixer --no-map",
+		"build:css-min": "postcss dist/*.css --ext .min.css --use postcss-clean -d dist/ --no-map",
 		"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
 		"css": "postcss css/*.css --use autoprefixer postcss-clean -d dist/ -m",
 		"printsizes": "print-sizes ./dist --exclude=\\.map",

package/src/camera/Camera.ts

@@ -383,25 +383,7 @@ class Camera {
    * @return {AnchorPoint | null} The {@link AnchorPoint} nearest to the given position<ko>해당 좌표에 가장 인접한 {@link AnchorPoint}</ko>
    */
   public findNearestAnchor(position: number): AnchorPoint | null {
-    const anchors = this._anchors;
-
-    if (anchors.length <= 0) return null;
-
-    let prevDist = Infinity;
-    for (let anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
-      const anchor = anchors[anchorIdx];
-      const dist = Math.abs(anchor.position - position);
-
-      if (dist > prevDist) {
-        // Return previous anchor
-        return anchors[anchorIdx - 1];
-      }
-
-      prevDist = dist;
-    }
-
-    // Return last anchor
-    return anchors[anchors.length - 1];
+    return this._mode.findNearestAnchor(position);
   }
 
   /**

package/src/camera/mode/CameraMode.ts

@@ -44,6 +44,28 @@ abstract class CameraMode {
     }, null);
   }
 
+  public findNearestAnchor(position: number): AnchorPoint | null {
+    const anchors = this._flicking.camera.anchorPoints;
+
+    if (anchors.length <= 0) return null;
+
+    let prevDist = Infinity;
+    for (let anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
+      const anchor = anchors[anchorIdx];
+      const dist = Math.abs(anchor.position - position);
+
+      if (dist > prevDist) {
+        // Return previous anchor
+        return anchors[anchorIdx - 1];
+      }
+
+      prevDist = dist;
+    }
+
+    // Return last anchor
+    return anchors[anchors.length - 1];
+  }
+
   public clampToReachablePosition(position: number): number {
     const camera = this._flicking.camera;
     const range = camera.range;

package/src/camera/mode/CircularCameraMode.ts

@@ -64,6 +64,33 @@ class CircularCameraMode extends CameraMode {
     }));
   }
 
+  public findNearestAnchor(position: number): AnchorPoint | null {
+    const camera = this._flicking.camera;
+    const anchors = camera.anchorPoints;
+
+    if (anchors.length <= 0) return null;
+
+    const camRange = camera.range;
+    let minDist = Infinity;
+    let minDistIndex = -1;
+    for (let anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
+      const anchor = anchors[anchorIdx];
+      const dist = Math.min(
+        Math.abs(anchor.position - position),
+        Math.abs(anchor.position - camRange.min + camRange.max - position),
+        Math.abs(position - camRange.min + camRange.max - anchor.position)
+      );
+
+      if (dist < minDist) {
+        minDist = dist;
+        minDistIndex = anchorIdx;
+      }
+    }
+
+    // Return last anchor
+    return anchors[minDistIndex];
+  }
+
   public findAnchorIncludePosition(position: number): AnchorPoint | null {
     const camera = this._flicking.camera;
     const range = camera.range;

package/src/cfc/sync.ts

@@ -85,7 +85,9 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
     }
   }
 
-  renderer.updateAfterPanelChange(added, removed);
+  if (diffResult.added.length > 0 || diffResult.removed.length > 0) {
+    renderer.updateAfterPanelChange(added, removed);
+  }
 };
 
 const batchInsert = (renderer: Renderer, diffResult: DiffResult<any>, addedElements: any[], startIdx: number, endIdx?: number) => {

package/src/control/Control.ts

@@ -171,7 +171,7 @@ abstract class Control {
    * @chainable
    * @return {Promise<void>}
    */
-  public updatePosition(_progressInPanel: number): void { // eslint-disable-line @typescript-eslint/no-unused-vars
+  public updatePosition(progressInPanel: number): void { // eslint-disable-line @typescript-eslint/no-unused-vars
     const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activePanel = this._activePanel;
@@ -321,7 +321,7 @@ abstract class Control {
     }
   }
 
-  protected _triggerIndexChangeEvent(panel: Panel, position: number, axesEvent?: OnRelease): void {
+  protected _triggerIndexChangeEvent(panel: Panel, position: number, axesEvent?: OnRelease) {
     const flicking = getFlickingAttached(this._flicking);
     const triggeringEvent = panel !== this._activePanel ? EVENTS.WILL_CHANGE : EVENTS.WILL_RESTORE;
     const camera = flicking.camera;

package/src/control/FreeControl.ts

@@ -106,7 +106,7 @@ class FreeControl extends Control {
    * </ko>
    * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
    */
-  public async moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
+  public moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
     const flicking = getFlickingAttached(this._flicking);
 
     const camera = flicking.camera;

package/src/control/SnapControl.ts

@@ -84,7 +84,7 @@ class SnapControl extends Control {
    * </ko>
    * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
    */
-  public async moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
+  public moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
     const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activeAnchor = camera.findActiveAnchor();

package/src/control/StrictControl.ts

@@ -187,7 +187,7 @@ class StrictControl extends Control {
    * </ko>
    * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
    */
-  public async moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
+  public moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
     const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activePanel = this._activePanel;
@@ -219,6 +219,10 @@ class StrictControl extends Control {
     const shouldBounceToFirst = position <= cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);
     const shouldBounceToLast = position >= cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);
 
+    const isAdjacent = adjacentAnchor && (indexRange.min <= indexRange.max
+      ? isBetween(adjacentAnchor.index, indexRange.min, indexRange.max)
+      : adjacentAnchor.index >= indexRange.min || adjacentAnchor.index <= indexRange.max);
+
     if (shouldBounceToFirst || shouldBounceToLast) {
       // In bounce area
       const targetAnchor = position < cameraRange.min ? firstAnchor : lastAnchor;
@@ -229,10 +233,10 @@ class StrictControl extends Control {
       // Move to anchor at position
       targetPanel = anchorAtPosition.panel;
       targetPos = anchorAtPosition.position;
-    } else if (isOverThreshold && adjacentAnchor && isBetween(adjacentAnchor.index, indexRange.min, indexRange.max)) {
+    } else if (isOverThreshold && isAdjacent) {
       // Move to adjacent anchor
-      targetPanel = adjacentAnchor.panel;
-      targetPos = adjacentAnchor.position;
+      targetPanel = adjacentAnchor!.panel;
+      targetPos = adjacentAnchor!.position;
     } else {
       // Restore to active panel
       targetPos = camera.clampToReachablePosition(activePanel.position);

package/src/control/states/AnimatingState.ts

@@ -65,7 +65,10 @@ class AnimatingState extends State {
       axesEvent
     }));
 
-    control.setActive(this._targetPanel!, control.activePanel, axesEvent.isTrusted);
+    const targetPanel = this._targetPanel;
+    if (targetPanel) {
+      control.setActive(targetPanel, control.activePanel, axesEvent.isTrusted);
+    }
   }
 }
 

package/src/control/states/DraggingState.ts

@@ -34,7 +34,7 @@ class DraggingState extends State {
     this._moveToChangedPosition(ctx);
   }
 
-  public onRelease(ctx: Parameters<State["onRelease"]>[0]): void {
+  public onRelease(ctx: Parameters<State["onRelease"]>[0]) {
     const { flicking, axesEvent, transitTo } = ctx;
 
     // Update last position to cope with Axes's animating behavior
@@ -55,7 +55,12 @@ class DraggingState extends State {
     const position = axesEvent.destPos[AXES.POSITION_KEY];
     const duration = Math.max(axesEvent.duration, flicking.duration);
 
-    void control.moveToPosition(position, duration, axesEvent);
+    try {
+      void control.moveToPosition(position, duration, axesEvent);
+    } catch (err) {
+      transitTo(STATE_TYPE.IDLE);
+      axesEvent.setTo({ [AXES.POSITION_KEY]: flicking.camera.position }, 0);
+    }
   }
 }
 

package/src/renderer/Renderer.ts

@@ -337,24 +337,26 @@ abstract class Renderer {
 
     void this.render();
 
-    if (!activePanel || activePanel.removed) {
-      if (panels.length <= 0) {
-        // All panels removed
-        camera.lookAt(0);
-      } else {
-        let targetIndex = activePanel?.index ?? 0;
-        if (targetIndex > panels.length - 1) {
-          targetIndex = panels.length - 1;
+    if (!flicking.animating) {
+      if (!activePanel || activePanel.removed) {
+        if (panels.length <= 0) {
+          // All panels removed
+          camera.lookAt(0);
+        } else {
+          let targetIndex = activePanel?.index ?? 0;
+          if (targetIndex > panels.length - 1) {
+            targetIndex = panels.length - 1;
+          }
+
+          void control.moveToPanel(panels[targetIndex], {
+            duration: 0
+          }).catch(() => void 0);
         }
-
-        void control.moveToPanel(panels[targetIndex], {
+      } else {
+        void control.moveToPanel(activePanel, {
           duration: 0
         }).catch(() => void 0);
       }
-    } else {
-      void control.moveToPanel(control.activePanel!, {
-        duration: 0
-      }).catch(() => void 0);
     }
 
     flicking.camera.updateOffset();