@egjs/flicking 4.12.1-beta.5 → 4.13.0

package/src/core/AutoResizer.ts

@@ -2,9 +2,13 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import { getElementSize, getStyle } from "src/utils";
+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;
@@ -16,6 +20,7 @@ class AutoResizer {
     return this._enabled;
   }
 
+  /** */
   public constructor(flicking: Flicking) {
     this._flicking = flicking;
     this._enabled = false;
@@ -36,14 +41,18 @@ class AutoResizer {
       const viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
 
       const resizeObserver = viewportSizeNot0
-        ? new ResizeObserver((entries: ResizeObserverEntry[]) => this._skipFirstResize(entries))
-        : new ResizeObserver((entries: ResizeObserverEntry[]) => this._onResize(entries));
-
-      resizeObserver.observe(flicking.viewport.element);
+        ? new ResizeObserver(this._skipFirstResize)
+        : new ResizeObserver(this._onResize);
 
       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;
@@ -51,6 +60,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;
 
@@ -59,7 +106,7 @@ class AutoResizer {
       resizeObserver.disconnect();
       this._resizeObserver = null;
     } else {
-      window.removeEventListener("resize", () => this._onResize([]));
+      window.removeEventListener("resize", this._onResizeWrapper);
     }
 
     this._enabled = false;
@@ -67,44 +114,50 @@ class AutoResizer {
     return this;
   }
 
+  private _onResizeWrapper = () => {
+    this._onResize([]);
+  };
+
   private _onResize = (entries: ResizeObserverEntry[]) => {
     const flicking = this._flicking;
     const resizeDebounce = flicking.resizeDebounce;
     const maxResizeDebounce = flicking.maxResizeDebounce;
 
-    if (entries.length) {
-      const resizeEntryInfo = entries[0].contentRect;
+    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: resizeEntryInfo.width,
-        height: resizeEntryInfo.height
-      };
-
-      const new_afterSize = {
         width: getElementSize({
-          el: entries[0].target as HTMLElement,
+          el: resizedViewportElement,
           horizontal: true,
           useFractionalSize: this._flicking.useFractionalSize,
           useOffset: false,
-          style: getStyle(entries[0].target as HTMLElement)
+          style: getStyle(resizedViewportElement)
         }),
         height: getElementSize({
-          el: entries[0].target as HTMLElement,
+          el: resizedViewportElement,
           horizontal: false,
           useFractionalSize: this._flicking.useFractionalSize,
           useOffset: false,
-          style: getStyle(entries[0].target as HTMLElement)
+          style: getStyle(resizedViewportElement)
         })
-      }
+      };
 
-      // resize 이벤트가 발생했으나 이전과 width, height의 변화가 없다면 이후 로직을 진행하지 않는다.
       if (
-        beforeSize.height === new_afterSize.height &&
-        beforeSize.width === new_afterSize.width
+        beforeSize.height === afterSize.height &&
+        beforeSize.width === afterSize.width
       ) {
         return;
       }

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;

package/panel-demo.html

@@ -1,323 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Flicking Panel 시각화 데모</title>
-    <style>
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-            line-height: 1.6;
-            padding: 20px;
-            background: #f5f5f5;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .demo-section {
-            background: white;
-            border-radius: 8px;
-            padding: 20px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-
-        .demo-title {
-            font-size: 1.5em;
-            margin-bottom: 15px;
-            color: #333;
-        }
-
-        .demo-description {
-            margin-bottom: 20px;
-            color: #666;
-        }
-
-        .panel-container {
-            position: relative;
-            width: 100%;
-            height: 300px;
-            background: #eee;
-            border: 2px solid #ccc;
-            margin: 20px 0;
-            overflow: hidden;
-        }
-
-        .panel {
-            position: absolute;
-            background: #4CAF50;
-            color: white;
-            padding: 20px;
-            transition: all 0.3s ease;
-            cursor: pointer;
-        }
-
-        .panel:hover {
-            background: #45a049;
-        }
-
-        .panel-info {
-            position: absolute;
-            background: rgba(0,0,0,0.8);
-            color: white;
-            padding: 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            pointer-events: none;
-            z-index: 1000;
-        }
-
-        .controls {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 20px;
-        }
-
-        button {
-            padding: 8px 16px;
-            background: #2196F3;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-
-        button:hover {
-            background: #1976D2;
-        }
-
-        .size-controls {
-            display: flex;
-            gap: 10px;
-            align-items: center;
-        }
-
-        input[type="range"] {
-            width: 200px;
-        }
-
-        .margin-visual {
-            position: absolute;
-            background: rgba(255, 193, 7, 0.3);
-            pointer-events: none;
-        }
-
-        .margin-label {
-            position: absolute;
-            font-size: 12px;
-            color: #666;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="demo-section">
-            <h2 class="demo-title">1. 패널 크기와 마진 시각화</h2>
-            <p class="demo-description">
-                패널의 기본 크기(_size)와 마진(prev, next)을 시각적으로 확인할 수 있습니다.
-                슬라이더를 조절하여 크기와 마진을 변경해보세요.
-            </p>
-            <div class="controls">
-                <div class="size-controls">
-                    <label>패널 크기:</label>
-                    <input type="range" id="sizeSlider" min="100" max="400" value="200">
-                    <span id="sizeValue">200px</span>
-                </div>
-                <div class="size-controls">
-                    <label>이전 마진:</label>
-                    <input type="range" id="prevMarginSlider" min="0" max="50" value="10">
-                    <span id="prevMarginValue">10px</span>
-                </div>
-                <div class="size-controls">
-                    <label>다음 마진:</label>
-                    <input type="range" id="nextMarginSlider" min="0" max="50" value="10">
-                    <span id="nextMarginValue">10px</span>
-                </div>
-            </div>
-            <div class="panel-container" id="sizeDemo">
-                <div class="panel" id="demoPanel">
-                    패널
-                </div>
-            </div>
-        </div>
-
-        <div class="demo-section">
-            <h2 class="demo-title">2. 패널 위치와 정렬</h2>
-            <p class="demo-description">
-                패널의 위치(_pos)와 정렬(_alignPos)을 시각적으로 확인할 수 있습니다.
-                정렬 옵션을 변경하여 패널의 위치가 어떻게 변하는지 확인해보세요.
-            </p>
-            <div class="controls">
-                <button onclick="changeAlign('prev')">시작점 정렬</button>
-                <button onclick="changeAlign('center')">중앙 정렬</button>
-                <button onclick="changeAlign('next')">끝점 정렬</button>
-                <div class="size-controls">
-                    <label>정렬 오프셋:</label>
-                    <input type="range" id="alignSlider" min="-100" max="100" value="0">
-                    <span id="alignValue">0px</span>
-                </div>
-            </div>
-            <div class="panel-container" id="positionDemo">
-                <div class="panel" id="positionPanel">
-                    패널
-                </div>
-            </div>
-        </div>
-
-        <div class="demo-section">
-            <h2 class="demo-title">3. 가시성 계산</h2>
-            <p class="demo-description">
-                패널의 가시성(visibleRatio)을 시각적으로 확인할 수 있습니다.
-                패널을 드래그하여 뷰포트 내에서의 가시성 변화를 확인해보세요.
-            </p>
-            <div class="panel-container" id="visibilityDemo">
-                <div class="panel" id="visibilityPanel">
-                    패널
-                </div>
-            </div>
-            <div id="visibilityInfo" style="margin-top: 10px;">
-                가시성 비율: <span id="visibilityRatio">100%</span>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        // 1. 크기와 마진 시각화
-        const sizeSlider = document.getElementById('sizeSlider');
-        const prevMarginSlider = document.getElementById('prevMarginSlider');
-        const nextMarginSlider = document.getElementById('nextMarginSlider');
-        const demoPanel = document.getElementById('demoPanel');
-        const sizeValue = document.getElementById('sizeValue');
-        const prevMarginValue = document.getElementById('prevMarginValue');
-        const nextMarginValue = document.getElementById('nextMarginValue');
-
-        function updatePanelSize() {
-            const size = sizeSlider.value;
-            const prevMargin = prevMarginSlider.value;
-            const nextMargin = nextMarginSlider.value;
-
-            demoPanel.style.width = `${size}px`;
-            demoPanel.style.marginLeft = `${prevMargin}px`;
-            demoPanel.style.marginRight = `${nextMargin}px`;
-
-            sizeValue.textContent = `${size}px`;
-            prevMarginValue.textContent = `${prevMargin}px`;
-            nextMarginValue.textContent = `${nextMargin}px`;
-
-            // 마진 시각화
-            updateMarginVisual();
-        }
-
-        function updateMarginVisual() {
-            let marginVisual = document.querySelector('.margin-visual');
-            if (!marginVisual) {
-                marginVisual = document.createElement('div');
-                marginVisual.className = 'margin-visual';
-                demoPanel.parentNode.appendChild(marginVisual);
-            }
-
-            const panelRect = demoPanel.getBoundingClientRect();
-            const containerRect = demoPanel.parentNode.getBoundingClientRect();
-
-            marginVisual.style.left = `${panelRect.left - containerRect.left - parseInt(prevMarginSlider.value)}px`;
-            marginVisual.style.top = `${panelRect.top - containerRect.top}px`;
-            marginVisual.style.width = `${parseInt(sizeSlider.value) + parseInt(prevMarginSlider.value) + parseInt(nextMarginSlider.value)}px`;
-            marginVisual.style.height = `${panelRect.height}px`;
-        }
-
-        sizeSlider.addEventListener('input', updatePanelSize);
-        prevMarginSlider.addEventListener('input', updatePanelSize);
-        nextMarginSlider.addEventListener('input', updatePanelSize);
-
-        // 2. 위치와 정렬
-        const positionPanel = document.getElementById('positionPanel');
-        const alignSlider = document.getElementById('alignSlider');
-        const alignValue = document.getElementById('alignValue');
-        let currentAlign = 'center';
-
-        function changeAlign(align) {
-            currentAlign = align;
-            updatePanelPosition();
-        }
-
-        function updatePanelPosition() {
-            const container = positionPanel.parentNode;
-            const containerWidth = container.offsetWidth;
-            const panelWidth = positionPanel.offsetWidth;
-            const alignOffset = parseInt(alignSlider.value);
-
-            let position = 0;
-            switch (currentAlign) {
-                case 'prev':
-                    position = 0;
-                    break;
-                case 'center':
-                    position = (containerWidth - panelWidth) / 2;
-                    break;
-                case 'next':
-                    position = containerWidth - panelWidth;
-                    break;
-            }
-
-            position += alignOffset;
-            positionPanel.style.left = `${position}px`;
-            alignValue.textContent = `${alignOffset}px`;
-        }
-
-        alignSlider.addEventListener('input', updatePanelPosition);
-
-        // 3. 가시성 계산
-        const visibilityPanel = document.getElementById('visibilityPanel');
-        const visibilityRatio = document.getElementById('visibilityRatio');
-        let isDragging = false;
-        let startX = 0;
-        let startLeft = 0;
-
-        visibilityPanel.addEventListener('mousedown', (e) => {
-            isDragging = true;
-            startX = e.clientX;
-            startLeft = parseInt(visibilityPanel.style.left || '0');
-        });
-
-        document.addEventListener('mousemove', (e) => {
-            if (!isDragging) return;
-
-            const deltaX = e.clientX - startX;
-            const newLeft = startLeft + deltaX;
-            visibilityPanel.style.left = `${newLeft}px`;
-
-            updateVisibility();
-        });
-
-        document.addEventListener('mouseup', () => {
-            isDragging = false;
-        });
-
-        function updateVisibility() {
-            const container = visibilityPanel.parentNode;
-            const containerRect = container.getBoundingClientRect();
-            const panelRect = visibilityPanel.getBoundingClientRect();
-
-            const visibleWidth = Math.min(panelRect.right, containerRect.right) - 
-                               Math.max(panelRect.left, containerRect.left);
-            
-            const ratio = Math.max(0, Math.min(100, (visibleWidth / panelRect.width) * 100));
-            visibilityRatio.textContent = `${Math.round(ratio)}%`;
-        }
-
-        // 초기화
-        updatePanelSize();
-        updatePanelPosition();
-        updateVisibility();
-    </script>
-</body>
-</html>