@egjs/flicking 4.13.2-beta.0 → 4.13.2-beta.1

package/src/camera/mode/CameraMode.ts

@@ -33,8 +33,9 @@ abstract class CameraMode {
 
   public findAnchorIncludePosition(position: number): AnchorPoint | null {
     const anchors = this._flicking.camera.anchorPoints;
+    const anchorsIncludingPosition = anchors.filter(anchor => anchor.panel.includePosition(position, true));
 
-    return anchors.reduce((nearest: AnchorPoint | null, anchor) => {
+    return anchorsIncludingPosition.reduce((nearest: AnchorPoint | null, anchor) => {
       if (!nearest) return anchor;
 
       return Math.abs(nearest.position - position) < Math.abs(anchor.position - position)

package/src/control/Control.ts

@@ -397,7 +397,7 @@ abstract class Control {
     }
   }
 
-  protected _getPosition(panel: Panel, direction: ValueOf<typeof DIRECTION> = DIRECTION.NONE) {
+  private _getPosition(panel: Panel, direction: ValueOf<typeof DIRECTION> = DIRECTION.NONE) {
     const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
 

package/src/control/SnapControl.ts

@@ -9,7 +9,6 @@ import AnchorPoint from "../core/AnchorPoint";
 import { circulateIndex, clamp, getFlickingAttached } from "../utils";
 import * as AXES from "../const/axes";
 import * as ERROR from "../const/error";
-import { DIRECTION } from "../const/external";
 
 import Control from "./Control";
 
@@ -110,12 +109,7 @@ class SnapControl extends Control {
     if (snapDelta >= snapThreshold && snapDelta > 0) {
       // Move to anchor at position
       targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);
-      // const targetPanel = targetAnchor.panel;
-      // const nextPosition = this._getPosition(targetPanel, DIRECTION.NEXT);
-      // const prevPosition = this._getPosition(targetPanel, DIRECTION.PREV);
-  
-      // targetPosition = Math.abs(camera.position - nextPosition) < Math.abs(camera.position - prevPosition) ? nextPosition : prevPosition;
-    } else if (absPosDelta >= flicking.threshold && absPosDelta > 0 && anchorAtCamera === activeAnchor) {
+    } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {
       // Move to the adjacent panel
       targetAnchor = this._findAdjacentAnchor(position, posDelta, anchorAtCamera);
     } else {
@@ -150,7 +144,6 @@ class SnapControl extends Control {
       throw new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(position), ERROR.CODE.POSITION_NOT_REACHABLE);
     }
 
-//    console.log("_findSnappedAnchor", anchorAtPosition);
     if (!isFinite(count)) {
       return anchorAtPosition;
     }

package/src/core/AutoResizer.ts

@@ -2,8 +2,13 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
+import { getElementSize, getStyle } from "../utils";
 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;
@@ -11,7 +16,9 @@ class AutoResizer {
   private _resizeTimer: number;
   private _maxResizeDebounceTimer: number;
 
-  public get enabled() { return this._enabled; }
+  public get enabled() {
+    return this._enabled;
+  }
 
   public constructor(flicking: Flicking) {
     this._flicking = flicking;
@@ -36,11 +43,15 @@ class AutoResizer {
         ? new ResizeObserver(this._skipFirstResize)
         : new ResizeObserver(this._onResize);
 
-      resizeObserver.observe(flicking.viewport.element);
-
       this._resizeObserver = resizeObserver;
+
+      this.observe(flicking.viewport.element);
+
+      if (flicking.observePanelResize) {
+        this.observePanels();
+      }
     } else {
-      window.addEventListener("resize", this._onResize);
+      window.addEventListener("resize", this._onResizeWrapper);
     }
 
     this._enabled = true;
@@ -48,6 +59,44 @@ class AutoResizer {
     return this;
   }
 
+  public observePanels(): this {
+    this._flicking.panels.forEach(panel => {
+      this.observe(panel.element);
+    });
+    return this;
+  }
+
+  public unobservePanels(): this {
+    this._flicking.panels.forEach(panel => {
+      this.unobserve(panel.element);
+    });
+    return this;
+  }
+
+  public observe(element: HTMLElement): this {
+    const resizeObserver = this._resizeObserver;
+
+    if (!resizeObserver) return this;
+
+    resizeObserver.observe(element);
+
+    return this;
+  }
+
+  public unobserve(element: HTMLElement): this {
+    const resizeObserver = this._resizeObserver;
+
+    if (!resizeObserver) return this;
+
+    resizeObserver.unobserve(element);
+
+    if (this._flicking.observePanelResize) {
+      this.unobservePanels();
+    }
+
+    return this;
+  }
+
   public disable(): this {
     if (!this._enabled) return this;
 
@@ -56,7 +105,7 @@ class AutoResizer {
       resizeObserver.disconnect();
       this._resizeObserver = null;
     } else {
-      window.removeEventListener("resize", this._onResize);
+      window.removeEventListener("resize", this._onResizeWrapper);
     }
 
     this._enabled = false;
@@ -64,17 +113,64 @@ class AutoResizer {
     return this;
   }
 
-  private _onResize = () => {
+  private _onResizeWrapper = () => {
+    this._onResize([]);
+  };
+
+  private _onResize = (entries: ResizeObserverEntry[]) => {
     const flicking = this._flicking;
     const resizeDebounce = flicking.resizeDebounce;
     const maxResizeDebounce = flicking.maxResizeDebounce;
 
+    const resizedViewportElement = flicking.element;
+    // 현재 구현에서 리사이즈 옵저빙 대상은 패널과 뷰포트 2개만 존재.
+    // 아래는 뷰포트만 변경되었을 때 동작해야하는 로직이 있으므로 아래와 같이 조건문을 건다.
+    // 패널 쪽에서는 리사이즈 감지에 resizeObserver를 사용하지 않는 경우가 없으므로 이 조건은 곧 뷰포트만 리사이즈가 된 경우를 의미한다.
+    const isResizedViewportOnly = entries.find(e => e.target === flicking.element) && entries.length === 1;
+
+    // 참고: resizeObserver를 사용하지 않은 경우에는 entries.length가 0으로 오는데 이 경우에는 그냥 항상 리사이즈가 진행되도록 한다.
+    //   (vw, vh 등을 사용하는 경우 이상 동작이 발생할 여지가 있기 때문이다)
+    if (isResizedViewportOnly) {
+      // resize 이벤트가 발생했으나 이전과 width, height의 변화가 없다면 이후 로직을 진행하지 않는다.
+      const beforeSize = {
+        width: flicking.viewport.width,
+        height: flicking.viewport.height
+      };
+
+      const afterSize = {
+        width: getElementSize({
+          el: resizedViewportElement,
+          horizontal: true,
+          useFractionalSize: this._flicking.useFractionalSize,
+          useOffset: false,
+          style: getStyle(resizedViewportElement)
+        }),
+        height: getElementSize({
+          el: resizedViewportElement,
+          horizontal: false,
+          useFractionalSize: this._flicking.useFractionalSize,
+          useOffset: false,
+          style: getStyle(resizedViewportElement)
+        })
+      };
+
+      if (
+        beforeSize.height === afterSize.height &&
+        beforeSize.width === afterSize.width
+      ) {
+        return;
+      }
+    }
+
     if (resizeDebounce <= 0) {
       void flicking.resize();
     } else {
       if (this._maxResizeDebounceTimer <= 0) {
         if (maxResizeDebounce > 0 && maxResizeDebounce >= resizeDebounce) {
-          this._maxResizeDebounceTimer = window.setTimeout(this._doScheduledResize, maxResizeDebounce);
+          this._maxResizeDebounceTimer = window.setTimeout(
+            this._doScheduledResize,
+            maxResizeDebounce
+          );
         }
       }
 
@@ -83,7 +179,10 @@ class AutoResizer {
         this._resizeTimer = 0;
       }
 
-      this._resizeTimer = window.setTimeout(this._doScheduledResize, resizeDebounce);
+      this._resizeTimer = window.setTimeout(
+        this._doScheduledResize,
+        resizeDebounce
+      );
     }
   };
 
@@ -101,13 +200,13 @@ class AutoResizer {
   private _skipFirstResize = (() => {
     let isFirstResize = true;
 
-    return (() => {
+    return (entries) => {
       if (isFirstResize) {
         isFirstResize = false;
         return;
       }
-      this._onResize();
-    });
+      this._onResize(entries);
+    };
   })();
 }
 

package/src/renderer/Renderer.ts

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

package/src/utils.ts

@@ -256,7 +256,12 @@ export const findIndex = <T>(array: T[], checker: (val: T) => boolean): number =
 export const getProgress = (pos: number, prev: number, next: number) => (pos - prev) / (next - prev);
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-export const getStyle = (el: HTMLElement): CSSStyleDeclaration => window.getComputedStyle(el) || (el as any).currentStyle as CSSStyleDeclaration;
+export const getStyle = (el: HTMLElement): CSSStyleDeclaration => {
+  if (!el) {
+    return {} as CSSStyleDeclaration;
+  }
+  return window.getComputedStyle(el) || (el as any).currentStyle as CSSStyleDeclaration;
+};
 
 export const setSize = (el: HTMLElement, { width, height }: Partial<{
   width: number | string;