@egjs/flicking - npm Package Compare versions

Comparing version 4.2.3 to 4.2.4

declaration/control/AxesController.d.ts

 import Axes, { OnRelease } from "@egjs/axes";
 import Flicking from "../Flicking";
 import { ControlParams } from "../type/external";
+import StateMachine from "./StateMachine";
 declare class AxesController {
@@ -12,2 +13,3 @@ private _flicking;
     get axes(): Axes;
+    get stateMachine(): StateMachine;
     get state(): import("./states/State").default;
@@ -14,0 +16,0 @@ get animatingContext(): {

declaration/control/states/State.d.ts

 import { OnAnimationEnd, OnChange, OnFinish, OnHold, OnRelease } from "@egjs/axes";
 import Flicking from "../../Flicking";
+import Panel from "../../core/panel/Panel";
 export declare enum STATE_TYPE {
@@ -14,3 +15,5 @@ IDLE = 0,
     protected _delta: number;
+    protected _targetPanel: Panel | null;
     get delta(): number;
+    get targetPanel(): Panel;
     onEnter(prevState: State): void;
@@ -17,0 +20,0 @@ onHold(ctx: {

package.json

 {
 	"name": "@egjs/flicking",
-	"version": "4.2.3",
+	"version": "4.2.4",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
@@ -5,0 +5,0 @@ "main": "dist/flicking.js",

src/cfc/sync.ts

@@ -8,2 +8,3 @@ import { DiffResult } from "@egjs/list-differ";
   const renderer = flicking.renderer;
+  const panels = renderer.panels;
 
@@ -33,9 +34,15 @@ if (diffResult.removed.length > 0) {
   diffResult.ordered.forEach(([prevIdx, newIdx]) => {
-    const prevPanel = renderer.panels[prevIdx];
+    const prevPanel = panels[prevIdx];
     const indexDiff = newIdx - prevIdx;
 
     if (indexDiff > 0) {
+      const middlePanels = panels.slice(prevIdx + 1, newIdx + 1);
+
       prevPanel.increaseIndex(indexDiff);
+      middlePanels.forEach(panel => panel.decreaseIndex(1));
     } else {
+      const middlePanels = panels.slice(newIdx, prevIdx);
+
       prevPanel.decreaseIndex(-indexDiff);
+      middlePanels.forEach(panel => panel.increaseIndex(1));
     }
@@ -46,2 +53,6 @@ // Update position
 
+  if (diffResult.ordered.length > 0) {
+    panels.sort((panel1, panel2) => panel1.index - panel2.index);
+  }
+
   if (diffResult.added.length > 0) {
@@ -48,0 +59,0 @@ let startIdx = -1;

src/control/AxesController.ts

@@ -39,2 +39,6 @@ /*
   /**
+   * @internal
+   */
+  public get stateMachine() { return this._stateMachine; }
+  /**
    * A activated {@link State} that shows the current status of the user input or the animation
@@ -41,0 +45,0 @@ * @ko 현재 활성화된 {@link State} 인스턴스로 사용자 입력 또는 애니메이션 상태를 나타냅니다

src/control/Control.ts

@@ -17,2 +17,4 @@ /*
 
+import { STATE_TYPE } from "./states/State";
+
 /**
@@ -355,2 +357,3 @@ * A component that manages inputs and animation of Flicking
     flicking.camera.updateAdaptiveHeight();
+    this._controller.stateMachine.transitTo(STATE_TYPE.IDLE);
 
@@ -357,0 +360,0 @@ if (newActivePanel !== prevActivePanel) {

src/control/states/AnimatingState.ts

@@ -54,6 +54,4 @@ /*
   public onFinish(ctx: Parameters<State["onFinish"]>[0]) {
-    const { flicking, axesEvent, transitTo } = ctx;
+    const { flicking, axesEvent } = ctx;
 
-    transitTo(STATE_TYPE.IDLE);
-
     const controller = flicking.control.controller;
@@ -67,2 +65,4 @@ const animatingContext = controller.animatingContext;
     }));
+
+    // transitTo is controlled by class Control because of order
   }
@@ -69,0 +69,0 @@ }

src/control/states/IdleState.ts

@@ -35,2 +35,3 @@ /*
     this._delta = 0;
+    this._targetPanel = null;
   }
@@ -37,0 +38,0 @@

src/control/states/State.ts

@@ -10,2 +10,3 @@ /*
 import Flicking from "../../Flicking";
+import Panel from "../../core/panel/Panel";
 import { EVENTS } from "../../const/external";
@@ -45,2 +46,3 @@ import * as AXES from "../../const/axes";
   protected _delta: number = 0;
+  protected _targetPanel: Panel | null = null;
 
@@ -56,2 +58,10 @@ /**
   /**
+   * A panel to set as {@link Control#activePanel} after the animation is finished
+   * @ko 애니메이션 종료시 {@link Control#activePanel}로 설정할 패널
+   * @type {number}
+   * @readonly
+   */
+  public get targetPanel() { return this._targetPanel; }
+
+  /**
    * An callback which is called when state has changed to this state
@@ -64,2 +74,3 @@ * @ko 현재 상태로 돌입했을때 호출되는 콜백 함수
     this._delta = prevState._delta;
+    this._targetPanel = prevState._targetPanel;
   }
@@ -66,0 +77,0 @@

src/renderer/Renderer.ts

@@ -170,6 +170,9 @@ /*
       const panelsPushed = panels.slice(insertingIdx);
-      const panelsInserted = item.elements.map(el => this._createPanel(el, { index: insertingIdx, align, flicking }));
+      const panelsInserted = item.elements.map((el, idx) => this._createPanel(el, { index: insertingIdx + idx, align, flicking }));
 
       panels.splice(insertingIdx, 0, ...panelsInserted);
 
+      // Insert the actual elements as camera element's children
+      this._insertPanelElements(panelsInserted, panelsPushed[0] ?? null);
+
       // Resize the newly added panels
@@ -186,5 +189,2 @@ panelsInserted.forEach(panel => panel.resize());
 
-      // Insert the actual elements as camera element's children
-      this._insertPanelElements(panelsInserted, panelsPushed[0] ?? null);
-
       return [...addedPanels, ...panelsInserted];
@@ -191,0 +191,0 @@ }, []);

No alert changes

Improved metrics

Total package byte prevSize

3278568

increased by0.47%

Lines of code

33305

increased by0.46%

No dependency changes