@egjs/flicking 4.6.1 → 4.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.6.1",
+	"version": "4.7.0",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",
@@ -33,6 +33,7 @@
 		"demo:prebuild-version": "cpx 'dist/**/*' docs/build/release/$npm_package_version/dist --clean",
 		"demo:prebuild-latest": "cpx 'dist/**/*' docs/build/release/latest/dist --clean",
 		"demo:deploy": "npm run docs:release && npm run build && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d docs/build/ --add --remote upstream",
+		"demo:deploy-origin": "npm run docs:release && npm run build && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d docs/build/ --add --remote origin",
 		"release": "release-helper upstream",
 		"changelog": "node ./config/changelog.js",
 		"coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
@@ -135,7 +136,7 @@
 		"typescript-transform-paths": "^2.2.3"
 	},
 	"dependencies": {
-		"@egjs/axes": "^2.8.0",
+		"@egjs/axes": "^3.1.2",
 		"@egjs/component": "^3.0.1",
 		"@egjs/imready": "^1.1.3",
 		"@egjs/list-differ": "^1.0.0"

package/src/Flicking.ts

@@ -58,6 +58,7 @@ export interface FlickingOptions {
   panelsPerView: number;
   noPanelStyleOverride: boolean;
   resizeOnContentsReady: boolean;
+  nested: boolean;
 
   // EVENT
   needPanelThreshold: number;
@@ -136,6 +137,7 @@ class Flicking extends Component<FlickingEvents> {
   private _noPanelStyleOverride: FlickingOptions["noPanelStyleOverride"];
   private _resizeOnContentsReady: FlickingOptions["resizeOnContentsReady"];
   private _virtual: FlickingOptions["virtual"];
+  private _nested: FlickingOptions["nested"];
 
   private _needPanelThreshold: FlickingOptions["needPanelThreshold"];
   private _preventEventsBeforeInit: FlickingOptions["preventEventsBeforeInit"];
@@ -413,6 +415,15 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    */
   public get resizeOnContentsReady() { return this._resizeOnContentsReady; }
+  /**
+   * If you enable this option on child Flicking when the Flicking is placed inside the Flicking, the parent Flicking will move in the same direction after the child Flicking reaches the first/last panel.
+   * If the parent Flicking and child Flicking have different horizontal option, you do not need to set this option.
+   * @ko Flicking 내부에 Flicking이 배치될 때 하위 Flicking에서 이 옵션을 활성화하면 하위 Flicking이 첫/마지막 패널에 도달한 뒤부터 같은 방향으로 상위 Flicking이 움직입니다.
+   * 만약 상위 Flicking과 하위 Flicking이 서로 다른 horizontal 옵션을 가지고 있다면 이 옵션을 설정할 필요가 없습니다.
+   * @type {boolean}
+   * @default false
+   */
+  public get nested() { return this._nested; }
   // EVENTS
   /**
    * A Threshold from viewport edge before triggering `needPanel` event
@@ -677,6 +688,7 @@ class Flicking extends Component<FlickingEvents> {
   public set panelsPerView(val: FlickingOptions["panelsPerView"]) { this._panelsPerView = val; }
   public set noPanelStyleOverride(val: FlickingOptions["noPanelStyleOverride"]) { this._noPanelStyleOverride = val; }
   public set resizeOnContentsReady(val: FlickingOptions["resizeOnContentsReady"]) { this._resizeOnContentsReady = val; }
+  public set nested(val: FlickingOptions["nested"]) { this._nested = val; }
   // EVENTS
   public set needPanelThreshold(val: FlickingOptions["needPanelThreshold"]) { this._needPanelThreshold = val; }
   public set preventEventsBeforeInit(val: FlickingOptions["preventEventsBeforeInit"]) { this._preventEventsBeforeInit = val; }
@@ -768,6 +780,7 @@ class Flicking extends Component<FlickingEvents> {
     panelsPerView = -1,
     noPanelStyleOverride = false,
     resizeOnContentsReady = false,
+    nested = false,
     needPanelThreshold = 0,
     preventEventsBeforeInit = true,
     deceleration = 0.0075,
@@ -808,6 +821,7 @@ class Flicking extends Component<FlickingEvents> {
     this._panelsPerView = panelsPerView;
     this._noPanelStyleOverride = noPanelStyleOverride;
     this._resizeOnContentsReady = resizeOnContentsReady;
+    this._nested = nested;
     this._virtual = virtual;
     this._needPanelThreshold = needPanelThreshold;
     this._preventEventsBeforeInit = preventEventsBeforeInit;

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/AxesController.ts

@@ -86,7 +86,7 @@ class AxesController {
    * @type {boolean}
    * @readonly
    */
-  public get enabled() { return this._panInput?.isEnable() ?? false; }
+  public get enabled() { return this._panInput?.isEnabled() ?? false; }
   /**
    * Current position value in {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} instance
    * @ko {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} 인스턴스 내부의 현재 좌표 값
@@ -134,6 +134,7 @@ class AxesController {
     }, {
       deceleration: flicking.deceleration,
       interruptable: flicking.interruptable,
+      nested: flicking.nested,
       easing: flicking.easing
     });
     this._panInput = new PanInput(flicking.viewport.element, {
@@ -220,7 +221,7 @@ class AxesController {
     axis.range = [controlParams.range.min, controlParams.range.max];
     axis.bounce = parseBounce(flicking.bounce, camera.size);
 
-    axes.axm.set({ [AXES.POSITION_KEY]: controlParams.position });
+    axes.axisManager.set({ [AXES.POSITION_KEY]: controlParams.position });
 
     return this;
   }
@@ -331,7 +332,7 @@ class AxesController {
         ? circulatePosition(position, camera.range.min, camera.range.max)
         : position;
 
-      axes.axm.set({ [AXES.POSITION_KEY]: newPos });
+      axes.axisManager.set({ [AXES.POSITION_KEY]: newPos });
 
       return Promise.resolve();
     } else {

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();

package/TODO.md

@@ -1,3 +0,0 @@
-## React 18 대응
-- [] updateoffset을 미루기
-  - render가 완료되기 전에 updateOffset이 3번 호출되었음