@egjs/flicking 4.13.1 → 4.13.2-beta.0

package/src/camera/mode/CameraMode.ts

@@ -33,9 +33,8 @@ 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 anchorsIncludingPosition.reduce((nearest: AnchorPoint | null, anchor) => {
+    return anchors.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 {
     }
   }
 
-  private _getPosition(panel: Panel, direction: ValueOf<typeof DIRECTION> = DIRECTION.NONE) {
+  protected _getPosition(panel: Panel, direction: ValueOf<typeof DIRECTION> = DIRECTION.NONE) {
     const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
 

package/src/control/SnapControl.ts

@@ -9,6 +9,7 @@ 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";
 
@@ -109,7 +110,12 @@ class SnapControl extends Control {
     if (snapDelta >= snapThreshold && snapDelta > 0) {
       // Move to anchor at position
       targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);
-    } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {
+      // 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) {
       // Move to the adjacent panel
       targetAnchor = this._findAdjacentAnchor(position, posDelta, anchorAtCamera);
     } else {
@@ -144,6 +150,7 @@ 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,13 +2,8 @@
  * 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;
@@ -16,9 +11,7 @@ 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;
@@ -43,15 +36,11 @@ class AutoResizer {
         ? new ResizeObserver(this._skipFirstResize)
         : new ResizeObserver(this._onResize);
 
-      this._resizeObserver = resizeObserver;
+      resizeObserver.observe(flicking.viewport.element);
 
-      this.observe(flicking.viewport.element);
-
-      if (flicking.observePanelResize) {
-        this.observePanels();
-      }
+      this._resizeObserver = resizeObserver;
     } else {
-      window.addEventListener("resize", this._onResizeWrapper);
+      window.addEventListener("resize", this._onResize);
     }
 
     this._enabled = true;
@@ -59,44 +48,6 @@ 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;
 
@@ -105,7 +56,7 @@ class AutoResizer {
       resizeObserver.disconnect();
       this._resizeObserver = null;
     } else {
-      window.removeEventListener("resize", this._onResizeWrapper);
+      window.removeEventListener("resize", this._onResize);
     }
 
     this._enabled = false;
@@ -113,64 +64,17 @@ class AutoResizer {
     return this;
   }
 
-  private _onResizeWrapper = () => {
-    this._onResize([]);
-  };
-
-  private _onResize = (entries: ResizeObserverEntry[]) => {
+  private _onResize = () => {
     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);
         }
       }
 
@@ -179,10 +83,7 @@ class AutoResizer {
         this._resizeTimer = 0;
       }
 
-      this._resizeTimer = window.setTimeout(
-        this._doScheduledResize,
-        resizeDebounce
-      );
+      this._resizeTimer = window.setTimeout(this._doScheduledResize, resizeDebounce);
     }
   };
 
@@ -200,13 +101,13 @@ class AutoResizer {
   private _skipFirstResize = (() => {
     let isFirstResize = true;
 
-    return (entries) => {
+    return (() => {
       if (isFirstResize) {
         isFirstResize = false;
         return;
       }
-      this._onResize(entries);
-    };
+      this._onResize();
+    });
   })();
 }
 

package/src/renderer/Renderer.ts

@@ -335,19 +335,6 @@ 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,12 +256,7 @@ 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 => {
-  if (!el) {
-    return {} as CSSStyleDeclaration;
-  }
-  return window.getComputedStyle(el) || (el as any).currentStyle as CSSStyleDeclaration;
-};
+export const getStyle = (el: HTMLElement): CSSStyleDeclaration => window.getComputedStyle(el) || (el as any).currentStyle as CSSStyleDeclaration;
 
 export const setSize = (el: HTMLElement, { width, height }: Partial<{
   width: number | string;

package/core-packages-link.js

@@ -1,38 +0,0 @@
-/* eslint-disable */
-
-/**
- * 프레임워크 컴포넌트를 디버깅할 때 코어 바닐라 로직을 수정하면서 확인할 필요가 있을 때,
- * 이 스크립트를 이용하면 바닐라 로직 수정사항이 프레임워크 컴포넌트 로컬 데모환경에도 반영된다.
- * 
- * 인자로 프레임워크 컴포넌트 패키지의 루트 디렉토리를 제공하면 된다.
- *
- * 사용 예시: node core-package-link.js react-flicking
- */
-
-const { execSync } = require("child_process");
-const path = require("path");
-const fs = require("fs");
-
-const args = process.argv.slice(2);
-const targetDir = args[0];
-
-if (!targetDir) {
-  console.error("❌ 디렉토리명을 인자로 입력하세요.");
-  process.exit(1);
-}
-
-const fullPath = path.resolve(process.cwd(), 'packages', targetDir);
-if (!fs.existsSync(fullPath)) {
-  console.error(`❌ 디렉토리 없음: ${fullPath}`);
-  process.exit(1);
-}
-
-function run(cmd, cwd = process.cwd()) {
-  console.log(`\n▶️ Running: ${cmd} (in ${cwd})`);
-  execSync(cmd, { stdio: "inherit", cwd });
-}
-
-run("npm run build");
-run("npm link");
-run(`npm link '@egjs/flicking'`, fullPath);
-run("npm run build", fullPath);

package/debug/example/index.html

@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Flicking Basic Demo</title>
-    <link rel="stylesheet" href="../../dist/flicking.css" />
-    <style>
-      .flicking-viewport {
-        width: 500px;
-        height: 300px;
-        margin: 0 auto;
-      }
-      .panel {
-        width: 200px;
-        height: 300px;
-        margin-right: 10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 24px;
-        color: white;
-      }
-      .navigation {
-        text-align: center;
-        margin-top: 20px;
-      }
-      .navigation button {
-        margin: 0 5px;
-        padding: 5px 10px;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="flicking-viewport">
-      <div class="flicking-camera">
-        <div class="panel" style="background-color: #f44336">Panel 1</div>
-        <div class="panel" style="background-color: #2196f3">Panel 2</div>
-        <div class="panel" style="background-color: #4caf50">Panel 3</div>
-        <div class="panel" style="background-color: #ffc107">Panel 4</div>
-        <div class="panel" style="background-color: #9c27b0">Panel 5</div>
-      </div>
-    </div>
-    <div class="navigation">
-      <button id="prev">Previous</button>
-      <button id="next">Next</button>
-    </div>
-
-    <script src="../../dist/flicking.pkgd.js"></script>
-    <script>
-      document.addEventListener("DOMContentLoaded", () => {
-        const flicking = new Flicking(".flicking-viewport", {
-          circular: false,
-          moveType: "snap",
-          align: "center",
-          defaultIndex: 0,
-        });
-
-        // Navigation buttons
-        const prevButton = document.getElementById("prev");
-        const nextButton = document.getElementById("next");
-
-        prevButton.addEventListener("click", () => {
-          flicking.prev();
-        });
-
-        nextButton.addEventListener("click", () => {
-          flicking.next();
-        });
-
-        // Update button states based on current index
-        flicking.on("moveEnd", () => {
-          prevButton.disabled = flicking.index === 0;
-          nextButton.disabled = flicking.index === flicking.panels.length - 1;
-        });
-
-        // Initial button state
-        prevButton.disabled = true;
-      });
-    </script>
-  </body>
-</html>