@egjs/flicking 4.10.5-beta.0 → 4.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.10.5-beta.0",
+	"version": "4.10.6",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",

package/src/Flicking.ts

@@ -1065,11 +1065,12 @@ class Flicking extends Component<FlickingEvents> {
       this.disableInput();
     }
     renderer.checkPanelContentsReady(renderer.panels);
+    this._initialized = true;
 
     return renderer.render().then(() => {
       // Done initializing & emit ready event
       this._plugins.forEach(plugin => plugin.init(this));
-      this._initialized = true;
+
       if (preventEventsBeforeInit) {
         this.trigger = originalTrigger;
       }

package/src/camera/Camera.ts

@@ -551,7 +551,7 @@ class Camera {
     const flicking = getFlickingAttached(this._flicking);
     const renderer = flicking.renderer;
 
-    if (renderer.rendering) return this;
+    if (renderer.rendering || !flicking.initialized) return this;
 
     const actualPosition = this._position - this._alignPos - this._offset + this._circularOffset;
 

package/src/control/AxesController.ts

@@ -8,7 +8,7 @@ import Flicking from "../Flicking";
 import FlickingError from "../core/FlickingError";
 import * as AXES from "../const/axes";
 import * as ERROR from "../const/error";
-import { circulatePosition, getFlickingAttached, parseBounce } from "../utils";
+import { getFlickingAttached, parseBounce } from "../utils";
 import { ControlParams } from "../type/external";
 
 import StateMachine from "./StateMachine";
@@ -376,37 +376,22 @@ class AxesController {
       }
     };
 
-    if (duration === 0) {
-      const flicking = getFlickingAttached(this._flicking);
-      const camera = flicking.camera;
-
-      animate();
+    return new Promise((resolve, reject) => {
+      const animationFinishHandler = () => {
+        axes.off(AXES.EVENT.HOLD, interruptionHandler);
+        resolve();
+      };
 
-      const newPos = flicking.circularEnabled
-        ? circulatePosition(position, camera.range.min, camera.range.max)
-        : position;
+      const interruptionHandler = () => {
+        axes.off(AXES.EVENT.FINISH, animationFinishHandler);
+        reject(new FlickingError(ERROR.MESSAGE.ANIMATION_INTERRUPTED, ERROR.CODE.ANIMATION_INTERRUPTED));
+      };
 
-      axes.axisManager.set({ [AXES.POSITION_KEY]: newPos });
+      axes.once(AXES.EVENT.FINISH, animationFinishHandler);
+      axes.once(AXES.EVENT.HOLD, interruptionHandler);
 
-      return Promise.resolve();
-    } else {
-      return new Promise((resolve, reject) => {
-        const animationFinishHandler = () => {
-          axes.off(AXES.EVENT.HOLD, interruptionHandler);
-          resolve();
-        };
-
-        const interruptionHandler = () => {
-          axes.off(AXES.EVENT.FINISH, animationFinishHandler);
-          reject(new FlickingError(ERROR.MESSAGE.ANIMATION_INTERRUPTED, ERROR.CODE.ANIMATION_INTERRUPTED));
-        };
-
-        axes.once(AXES.EVENT.FINISH, animationFinishHandler);
-        axes.once(AXES.EVENT.HOLD, interruptionHandler);
-
-        animate();
-      });
-    }
+      animate();
+    });
   }
 
   public updateDirection() {

package/src/control/SnapControl.ts

@@ -113,8 +113,8 @@ class SnapControl extends Control {
       // Move to the adjacent panel
       targetAnchor = this._findAdjacentAnchor(position, posDelta, anchorAtCamera);
     } else {
-      // Restore to active panel
-      return this.moveToPanel(activeAnchor.panel, {
+      // Fallback to nearest panel from current camera
+      return this.moveToPanel(anchorAtCamera.panel, {
         duration,
         axesEvent
       });

package/src/control/StrictControl.ts

@@ -242,9 +242,15 @@ class StrictControl extends Control {
       targetPanel = adjacentAnchor!.panel;
       targetPos = adjacentAnchor!.position;
     } else {
-      // Restore to active panel
-      targetPos = camera.clampToReachablePosition(activePanel.position);
-      targetPanel = activePanel;
+      // Fallback to nearest panel from current camera
+      const anchorAtCamera = camera.findNearestAnchor(camera.position);
+      if (!anchorAtCamera) {
+        return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(position), ERROR.CODE.POSITION_NOT_REACHABLE));
+      }
+      return this.moveToPanel(anchorAtCamera.panel, {
+        duration,
+        axesEvent
+      });
     }
 
     this._triggerIndexChangeEvent(targetPanel, position, axesEvent);

package/src/core/ResizeWatcher.ts

@@ -67,7 +67,7 @@ class ResizeWatcher {
   public destroy() {
     this._observer?.disconnect();
     if (this._options.useWindowResize) {
-      window.removeEventListener("reisze", this._onResize);
+      window.removeEventListener("resize", this._onResize);
     }
   }
 

package/src/renderer/Renderer.ts

@@ -536,6 +536,12 @@ abstract class Renderer {
       cameraElement.removeChild(panel.element);
     });
   }
+
+  protected _afterRender() {
+    const flicking = getFlickingAttached(this._flicking);
+
+    flicking.camera.applyTransform();
+  }
 }
 
 export default Renderer;

package/src/renderer/VanillaRenderer.ts

@@ -20,6 +20,7 @@ class VanillaRenderer extends Renderer {
     strategy.renderPanels(flicking);
 
     this._resetPanelElementOrder();
+    this._afterRender();
   }
 
   protected _collectPanels() {

package/src/utils.ts

@@ -214,7 +214,7 @@ export const circulatePosition = (pos: number, min: number, max: number) => {
   if (pos < min) {
     const offset = (min - pos) % size;
     pos = max - offset;
-  } else if (pos >= max) {
+  } else if (pos > max) {
     const offset = (pos - max) % size;
     pos = min + offset;
   }