feat: add resizeObservePanel option (#884)

* fix: apply ResizeObserver to camera and panels

* fix: unobserve removed panel when panel change

* fix: add defense code to check if element exists

* feat: add resizeObservePanel option

* fix: add defensive logic to getStyle

* chore: change resizeObservePanel to resizePanelObserve

* fix: add unobserve panel logic

* chore: update setup-node to v4

Author: malangfox

.github/workflows/run-test.yml

@@ -5,7 +5,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
           cache: "npm"
@@ -30,7 +30,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
           node-version: 16
           cache: "npm"

src/Flicking.ts

@@ -91,6 +91,7 @@ export interface FlickingOptions {
   autoResize: boolean;
   useResizeObserver: boolean;
   resizeDebounce: number;
+  resizePanelObserve: boolean;
   maxResizeDebounce: number;
   useFractionalSize: boolean;
   externalRenderer: ExternalRenderer | null;
@@ -168,6 +169,7 @@ class Flicking extends Component<FlickingEvents> {
   private _autoResize: FlickingOptions["autoResize"];
   private _useResizeObserver: FlickingOptions["useResizeObserver"];
   private _resizeDebounce: FlickingOptions["resizeDebounce"];
+  private _resizePanelObserve: FlickingOptions["resizePanelObserve"];
   private _maxResizeDebounce: FlickingOptions["maxResizeDebounce"];
   private _useFractionalSize: FlickingOptions["useFractionalSize"];
   private _externalRenderer: FlickingOptions["externalRenderer"];
@@ -220,6 +222,13 @@ 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.
@@ -695,6 +704,15 @@ class Flicking extends Component<FlickingEvents> {
    * @see {@link https://naver.github.io/egjs-flicking/Options#useresizeobserver useResizeObserver ( Options )}
    */
   public get useResizeObserver() { return this._useResizeObserver; }
+  /**
+   * Whether to use {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver} to observe the size of the panel element
+   * This is only available when `useResizeObserver` is enabled.
+   * This option garantees that the resize event is triggered when the size of the panel element is changed.
+   * @ko 이 옵션을 활성화할 경우, {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}를 사용하여 패널 엘리먼트의 크기를 추적합니다.
+   * 이 옵션은 `useResizeObserver` 옵션이 활성화된 경우에만 사용할 수 있습니다.
+   * 이 옵션은 패널 엘리먼트의 크기가 변경될 경우 resize 이벤트가 발생하도록 보장합니다.
+   */
+  public get resizePanelObserve() { return this._resizePanelObserve; }
   /**
    * Delays size recalculation from `autoResize` by the given time in milisecond.
    * If the size is changed again while being delayed, it cancels the previous one and delays from the beginning again.
@@ -926,6 +944,10 @@ class Flicking extends Component<FlickingEvents> {
   public set autoResize(val: FlickingOptions["autoResize"]) {
     this._autoResize = val;
 
+    if (!this._initialized) {
+      return;
+    }
+
     if (val) {
       this._autoResizer.enable();
     } else {
@@ -936,11 +958,23 @@ class Flicking extends Component<FlickingEvents> {
   public set useResizeObserver(val: FlickingOptions["useResizeObserver"]) {
     this._useResizeObserver = val;
 
-    if (this._autoResize) {
+    if (this._initialized && this._autoResize) {
       this._autoResizer.enable();
     }
   }
 
+  public set resizePanelObserve (val: FlickingOptions["resizePanelObserve"]) {
+    this._resizePanelObserve = val;
+
+    if (this._initialized && this._autoResize) {
+      if (val) {
+        this._autoResizer.observePanels();
+      } else {
+        this._autoResizer.unobservePanels();
+      }
+    }
+  }
+
   /**
    * @param root A root HTMLElement to initialize Flicking on it. When it's a typeof `string`, it should be a css selector string
    * <ko>Flicking을 초기화할 HTMLElement로, `string` 타입으로 지정시 css 선택자 문자열을 지정해야 합니다.</ko>
@@ -1003,6 +1037,7 @@ class Flicking extends Component<FlickingEvents> {
     autoResize = true,
     useResizeObserver = true,
     resizeDebounce = 0,
+    resizePanelObserve = false,
     maxResizeDebounce = 100,
     useFractionalSize = false,
     externalRenderer = null,
@@ -1049,6 +1084,7 @@ class Flicking extends Component<FlickingEvents> {
     this._useResizeObserver = useResizeObserver;
     this._resizeDebounce = resizeDebounce;
     this._maxResizeDebounce = maxResizeDebounce;
+    this._resizePanelObserve = resizePanelObserve;
     this._useFractionalSize = useFractionalSize;
     this._externalRenderer = externalRenderer;
     this._renderExternal = renderExternal;

src/core/AutoResizer.ts

@@ -4,6 +4,10 @@
  */
 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;
@@ -36,9 +40,13 @@ 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.resizePanelObserve) {
+        this.observePanels();
+      }
     } else {
       window.addEventListener("resize", this._onResize);
     }
@@ -48,6 +56,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.resizePanelObserve) {
+      this.unobservePanels();
+    }
+
+    return this;
+  }
+
   public disable(): this {
     if (!this._enabled) return this;
 

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) {

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;

test/unit/Flicking.spec.ts

@@ -958,6 +958,65 @@ describe("Flicking", () => {
       });
     });
 
+    describe("resizePanelObserve", () => {
+      it(`should call resize when size of panel is changed`, async () => {
+        const flicking = await createFlicking(
+          El.viewport("1000px", "1000px").add(
+            El.camera("1000px", "1000px").add(
+              El.panel("800px", "1000px"),
+              El.panel("800px", "1000px"),
+              El.panel("800px", "1000px"),
+            )
+          ),
+          { autoResize: true, useResizeObserver: true, resizePanelObserve: true }
+        );
+        const afterResizeSpy = sinon.spy();
+        const beforeResizeSpy = sinon.spy();
+
+        // wait for initial resize
+        await waitTime(100);
+
+        flicking.on(EVENTS.AFTER_RESIZE, afterResizeSpy);
+        flicking.on(EVENTS.BEFORE_RESIZE, beforeResizeSpy);
+        flicking.panels[2].element.style.height = "3000px";
+
+        await waitEvent(flicking, EVENTS.AFTER_RESIZE);
+
+        expect(afterResizeSpy.calledOnce).to.be.true;
+        expect(beforeResizeSpy.calledOnce).to.be.true;
+      });
+
+      it("should observe size of panel element if panel element is added later", async () => {
+        const flicking = await createFlicking(
+          El.viewport("1000px", "1000px").add(
+            El.camera("1000px", "1000px").add(
+              El.panel("800px", "1000px"),
+              El.panel("800px", "1000px"),
+              El.panel("800px", "1000px"),
+            )
+          ),
+          { autoResize: true, useResizeObserver: true, resizePanelObserve: true }
+        );
+        const afterResizeSpy = sinon.spy();
+        const beforeResizeSpy = sinon.spy();
+
+        // wait for initial resize
+        await waitTime(100);
+
+        flicking.on(EVENTS.AFTER_RESIZE, afterResizeSpy);
+        flicking.on(EVENTS.BEFORE_RESIZE, beforeResizeSpy);
+
+        flicking.append(flicking.panels[0].element.outerHTML);
+
+        flicking.panels[3].element.style.height = "3000px";
+
+        await waitEvent(flicking, EVENTS.AFTER_RESIZE);
+
+        expect(afterResizeSpy.calledOnce).to.be.true;
+        expect(beforeResizeSpy.calledOnce).to.be.true;
+      });
+    });
+
     describe("preventClickOnDrag", () => {
       it("should trigger click event when Flicking's not dragged at all", async () => {
         const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { preventClickOnDrag: true });

test/unit/renderer/Renderer.spec.ts

@@ -423,7 +423,7 @@ describe("Renderer", () => {
 
     it("should resize the panel with image when it's loaded", async () => {
       const flicking = await createFlicking(El.viewport("200px", "200px").add(
-        El.camera().add(
+        El.camera("100%", "100%").add(
           El.imgPanel("100%", "100%")
         )
       ), { resizeOnContentsReady: true });
@@ -438,7 +438,7 @@ describe("Renderer", () => {
 
     it("should update the camera range after the image's loaded", async () => {
       const flicking = await createFlicking(El.viewport("200px", "200px").add(
-        El.camera().add(
+        El.camera("100%", "100%").add(
           El.imgPanel("100%", "100%")
         )
       ), { resizeOnContentsReady: true });