@egjs/flicking 4.11.5-beta.1 → 4.11.5-beta.3

package/package.json

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

package/src/Flicking.ts

@@ -218,13 +218,6 @@ class Flicking extends Component<FlickingEvents> {
    * @see Viewport
    */
   public get viewport() { return this._viewport; }
-  /**
-   * {@link AutoResizer} instance of the Flicking
-   * @ko 현재 Flicking에 활성화된 {@link AutoResizer} 인스턴스
-   * @internal
-   * @readonly
-   */
-  public get autoResizer() { return this._autoResizer; }
   // Internal States
   /**
    * Whether Flicking's {@link Flicking#init init()} is called.
@@ -913,10 +906,6 @@ class Flicking extends Component<FlickingEvents> {
   public set autoResize(val: FlickingOptions["autoResize"]) {
     this._autoResize = val;
 
-    if (!this._initialized) {
-      return;
-    }
-
     if (val) {
       this._autoResizer.enable();
     } else {
@@ -927,7 +916,7 @@ class Flicking extends Component<FlickingEvents> {
   public set useResizeObserver(val: FlickingOptions["useResizeObserver"]) {
     this._useResizeObserver = val;
 
-    if (this._initialized && this._autoResize) {
+    if (this._autoResize) {
       this._autoResizer.enable();
     }
   }

package/src/camera/Camera.ts

@@ -32,6 +32,7 @@ class Camera {
   private _mode: CameraMode;
   private _el: HTMLElement;
   private _transform: string;
+  private _lookedOffset = 0;
   private _position: number;
   private _alignPos: number;
   private _offset: number;
@@ -292,6 +293,8 @@ class Camera {
    * @return {this}
    */
   public lookAt(pos: number): void {
+    const prevOffset = this._offset;
+    const isChangedOffset = this._lookedOffset !== prevOffset;
     const flicking = getFlickingAttached(this._flicking);
     const prevPos = this._position;
 
@@ -301,10 +304,15 @@ class Camera {
     this._checkNeedPanel();
     this._checkReachEnd(prevPos, pos);
 
-    if (toggled) {
+    if (isChangedOffset || toggled) {
       void flicking.renderer.render().then(() => {
         this.updateOffset();
+        this._lookedOffset = this._offset;
       });
+    } else if (isChangedOffset) {
+      // sync offset for renderOnlyVisible on resize
+      this.updateOffset();
+      this._lookedOffset = this._offset;
     } else {
       this.applyTransform();
     }
@@ -599,6 +607,7 @@ class Camera {
 
   private _resetInternalValues() {
     this._position = 0;
+    this._lookedOffset = 0;
     this._alignPos = 0;
     this._offset = 0;
     this._circularOffset = 0;

package/src/core/AutoResizer.ts

@@ -4,10 +4,6 @@
  */
 import Flicking from "../Flicking";
 
-/**
- * A component that detects size change and trigger resize method when the autoResize option is used
- * @ko autoResize 옵션을 사용할 때 크기 변화를 감지하고 Flicking의 resize를 호출하는 컴포넌트
- */
 class AutoResizer {
   private _flicking: Flicking;
   private _enabled: boolean;
@@ -40,11 +36,7 @@ class AutoResizer {
         ? new ResizeObserver(this._skipFirstResize)
         : new ResizeObserver(this._onResize);
 
-      [
-        flicking.viewport.element,
-        flicking.camera.element,
-        ...flicking.panels.map(panel => panel.element)
-      ].forEach((element) => { resizeObserver.observe(element); });
+      resizeObserver.observe(flicking.viewport.element);
 
       this._resizeObserver = resizeObserver;
     } else {
@@ -72,13 +64,6 @@ class AutoResizer {
     return this;
   }
 
-  public observe(element: Element): this {
-    if (this._resizeObserver) {
-      this._resizeObserver.observe(element);
-    }
-    return this;
-  }
-
   private _onResize = () => {
     const flicking = this._flicking;
     const resizeDebounce = flicking.resizeDebounce;

package/src/renderer/Renderer.ts

@@ -335,12 +335,6 @@ abstract class Renderer {
     // Update camera & control
     this._updateCameraAndControl();
 
-    if (flicking.autoResize && flicking.useResizeObserver) {
-      panelsAdded.forEach((panel) => {
-        flicking.autoResizer.observe(panel.element);
-      });
-    }
-
     void this.render();
 
     if (!flicking.animating) {