@egjs/flicking 4.13.1 → 4.13.2-beta.0

package/declaration/Flicking.d.ts

@@ -1,6 +1,5 @@
 import Component from "@egjs/component";
 import Viewport from "./core/Viewport";
-import AutoResizer from "./core/AutoResizer";
 import { Panel } from "./core/panel";
 import VirtualManager, { VirtualOptions } from "./core/VirtualManager";
 import { Control } from "./control";
@@ -66,11 +65,9 @@ export interface FlickingOptions {
     autoResize: boolean;
     useResizeObserver: boolean;
     resizeDebounce: number;
-    observePanelResize: boolean;
     maxResizeDebounce: number;
     useFractionalSize: boolean;
     externalRenderer: ExternalRenderer | null;
-    optimizeSizeUpdate: boolean;
     renderExternal: {
         renderer: new (options: RendererOptions) => ExternalRenderer;
         rendererOptions: RendererOptions;
@@ -117,20 +114,16 @@ declare class Flicking extends Component<FlickingEvents> {
     private _autoResize;
     private _useResizeObserver;
     private _resizeDebounce;
-    private _observePanelResize;
     private _maxResizeDebounce;
     private _useFractionalSize;
     private _externalRenderer;
     private _renderExternal;
-    private _optimizeSizeUpdate;
     private _initialized;
     private _plugins;
-    private _isResizing;
     get control(): Control;
     get camera(): Camera;
     get renderer(): Renderer;
     get viewport(): Viewport;
-    get autoResizer(): AutoResizer;
     get initialized(): boolean;
     get circularEnabled(): boolean;
     get virtualEnabled(): boolean;
@@ -178,7 +171,6 @@ declare class Flicking extends Component<FlickingEvents> {
     get autoInit(): boolean;
     get autoResize(): FlickingOptions["autoResize"];
     get useResizeObserver(): FlickingOptions["useResizeObserver"];
-    get observePanelResize(): FlickingOptions["observePanelResize"];
     get resizeDebounce(): number;
     get maxResizeDebounce(): number;
     get useFractionalSize(): boolean;
@@ -187,7 +179,6 @@ declare class Flicking extends Component<FlickingEvents> {
         renderer: new (options: RendererOptions) => ExternalRenderer;
         rendererOptions: RendererOptions;
     };
-    get optimizeSizeUpdate(): FlickingOptions["optimizeSizeUpdate"];
     set align(val: FlickingOptions["align"]);
     set defaultIndex(val: FlickingOptions["defaultIndex"]);
     set horizontal(val: FlickingOptions["horizontal"]);
@@ -217,9 +208,7 @@ declare class Flicking extends Component<FlickingEvents> {
     set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]);
     set autoResize(val: FlickingOptions["autoResize"]);
     set useResizeObserver(val: FlickingOptions["useResizeObserver"]);
-    set observePanelResize(val: FlickingOptions["observePanelResize"]);
-    set optimizeSizeUpdate(val: FlickingOptions["optimizeSizeUpdate"]);
-    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, nested, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, dragThreshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, preventDefaultOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, observePanelResize, maxResizeDebounce, useFractionalSize, externalRenderer, renderExternal, optimizeSizeUpdate }?: Partial<FlickingOptions>);
+    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, nested, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, dragThreshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, preventDefaultOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, maxResizeDebounce, useFractionalSize, externalRenderer, renderExternal }?: Partial<FlickingOptions>);
     init(): Promise<void>;
     destroy(): void;
     prev(duration?: number): Promise<void>;

package/declaration/control/Control.d.ts

@@ -40,6 +40,6 @@ declare abstract class Control {
         newActivePanel: Panel;
         axesEvent?: OnRelease;
     }): Promise<void>;
-    private _getPosition;
+    protected _getPosition(panel: Panel, direction?: ValueOf<typeof DIRECTION>): number;
 }
 export default Control;

package/declaration/core/AutoResizer.d.ts

@@ -8,12 +8,7 @@ declare class AutoResizer {
     get enabled(): boolean;
     constructor(flicking: Flicking);
     enable(): this;
-    observePanels(): this;
-    unobservePanels(): this;
-    observe(element: HTMLElement): this;
-    unobserve(element: HTMLElement): this;
     disable(): this;
-    private _onResizeWrapper;
     private _onResize;
     private _doScheduledResize;
     private _skipFirstResize;

package/dist/flicking.cjs.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.13.1
+version: 4.13.2-beta.0
 */
 'use strict';
 
@@ -674,9 +674,6 @@ var getProgress = function (pos, prev, next) {
 };
 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 var getStyle = function (el) {
-  if (!el) {
-    return {};
-  }
   return window.getComputedStyle(el) || el.currentStyle;
 };
 var setSize = function (el, _a) {
@@ -949,59 +946,13 @@ var Viewport = /*#__PURE__*/function () {
   return Viewport;
 }();
 
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
- */
-/**
- * A component that detects size change and trigger resize method when the autoResize option is used
- * @ko autoResize 옵션을 사용할 때 크기 변화를 감지하고 Flicking의 resize를 호출하는 컴포넌트
- */
 var AutoResizer = /*#__PURE__*/function () {
   function AutoResizer(flicking) {
     var _this = this;
-    this._onResizeWrapper = function () {
-      _this._onResize([]);
-    };
-    this._onResize = function (entries) {
+    this._onResize = function () {
       var flicking = _this._flicking;
       var resizeDebounce = flicking.resizeDebounce;
       var maxResizeDebounce = flicking.maxResizeDebounce;
-      var resizedViewportElement = flicking.element;
-      // 현재 구현에서 리사이즈 옵저빙 대상은 패널과 뷰포트 2개만 존재.
-      // 아래는 뷰포트만 변경되었을 때 동작해야하는 로직이 있으므로 아래와 같이 조건문을 건다.
-      // 패널 쪽에서는 리사이즈 감지에 resizeObserver를 사용하지 않는 경우가 없으므로 이 조건은 곧 뷰포트만 리사이즈가 된 경우를 의미한다.
-      var isResizedViewportOnly = entries.find(function (e) {
-        return e.target === flicking.element;
-      }) && entries.length === 1;
-      // 참고: resizeObserver를 사용하지 않은 경우에는 entries.length가 0으로 오는데 이 경우에는 그냥 항상 리사이즈가 진행되도록 한다.
-      //   (vw, vh 등을 사용하는 경우 이상 동작이 발생할 여지가 있기 때문이다)
-      if (isResizedViewportOnly) {
-        // resize 이벤트가 발생했으나 이전과 width, height의 변화가 없다면 이후 로직을 진행하지 않는다.
-        var beforeSize = {
-          width: flicking.viewport.width,
-          height: flicking.viewport.height
-        };
-        var 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 {
@@ -1027,12 +978,12 @@ var AutoResizer = /*#__PURE__*/function () {
     // eslint-disable-next-line @typescript-eslint/member-ordering
     this._skipFirstResize = function () {
       var isFirstResize = true;
-      return function (entries) {
+      return function () {
         if (isFirstResize) {
           isFirstResize = false;
           return;
         }
-        _this._onResize(entries);
+        _this._onResize();
       };
     }();
     this._flicking = flicking;
@@ -1058,46 +1009,14 @@ var AutoResizer = /*#__PURE__*/function () {
     if (flicking.useResizeObserver && !!window.ResizeObserver) {
       var viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
       var resizeObserver = viewportSizeNot0 ? 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._onResizeWrapper);
+      window.addEventListener("resize", this._onResize);
     }
     this._enabled = true;
     return this;
   };
-  __proto.observePanels = function () {
-    var _this = this;
-    this._flicking.panels.forEach(function (panel) {
-      _this.observe(panel.element);
-    });
-    return this;
-  };
-  __proto.unobservePanels = function () {
-    var _this = this;
-    this._flicking.panels.forEach(function (panel) {
-      _this.unobserve(panel.element);
-    });
-    return this;
-  };
-  __proto.observe = function (element) {
-    var resizeObserver = this._resizeObserver;
-    if (!resizeObserver) return this;
-    resizeObserver.observe(element);
-    return this;
-  };
-  __proto.unobserve = function (element) {
-    var resizeObserver = this._resizeObserver;
-    if (!resizeObserver) return this;
-    resizeObserver.unobserve(element);
-    if (this._flicking.observePanelResize) {
-      this.unobservePanels();
-    }
-    return this;
-  };
   __proto.disable = function () {
     if (!this._enabled) return this;
     var resizeObserver = this._resizeObserver;
@@ -1105,7 +1024,7 @@ var AutoResizer = /*#__PURE__*/function () {
       resizeObserver.disconnect();
       this._resizeObserver = null;
     } else {
-      window.removeEventListener("resize", this._onResizeWrapper);
+      window.removeEventListener("resize", this._onResize);
     }
     this._enabled = false;
     return this;
@@ -2996,7 +2915,11 @@ var SnapControl = /*#__PURE__*/function (_super) {
     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 {
@@ -3024,6 +2947,7 @@ var SnapControl = /*#__PURE__*/function (_super) {
     if (!anchorAtCamera || !anchorAtPosition) {
       throw new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE);
     }
+    //    console.log("_findSnappedAnchor", anchorAtPosition);
     if (!isFinite(count)) {
       return anchorAtPosition;
     }
@@ -3444,10 +3368,7 @@ var CameraMode = /*#__PURE__*/function () {
   };
   __proto.findAnchorIncludePosition = function (position) {
     var anchors = this._flicking.camera.anchorPoints;
-    var anchorsIncludingPosition = anchors.filter(function (anchor) {
-      return anchor.panel.includePosition(position, true);
-    });
-    return anchorsIncludingPosition.reduce(function (nearest, anchor) {
+    return anchors.reduce(function (nearest, anchor) {
       if (!nearest) return anchor;
       return Math.abs(nearest.position - position) < Math.abs(anchor.position - position) ? nearest : anchor;
     }, null);
@@ -4903,18 +4824,6 @@ var Renderer = /*#__PURE__*/function () {
     var activePanel = control.activePanel;
     // Update camera & control
     this._updateCameraAndControl();
-    if (flicking.autoResize && flicking.useResizeObserver) {
-      panelsAdded.forEach(function (panel) {
-        if (panel.element) {
-          flicking.autoResizer.observe(panel.element);
-        }
-      });
-      panelsRemoved.forEach(function (panel) {
-        if (panel.element) {
-          flicking.autoResizer.unobserve(panel.element);
-        }
-      });
-    }
     void this.render();
     if (!flicking.animating) {
       if (!activePanel || activePanel.removed) {
@@ -6192,23 +6101,18 @@ var Flicking = /*#__PURE__*/function (_super) {
       useResizeObserver = _9 === void 0 ? true : _9,
       _10 = _b.resizeDebounce,
       resizeDebounce = _10 === void 0 ? 0 : _10,
-      _11 = _b.observePanelResize,
-      observePanelResize = _11 === void 0 ? false : _11,
-      _12 = _b.maxResizeDebounce,
-      maxResizeDebounce = _12 === void 0 ? 100 : _12,
-      _13 = _b.useFractionalSize,
-      useFractionalSize = _13 === void 0 ? false : _13,
-      _14 = _b.externalRenderer,
-      externalRenderer = _14 === void 0 ? null : _14,
-      _15 = _b.renderExternal,
-      renderExternal = _15 === void 0 ? null : _15,
-      _16 = _b.optimizeSizeUpdate,
-      optimizeSizeUpdate = _16 === void 0 ? false : _16;
+      _11 = _b.maxResizeDebounce,
+      maxResizeDebounce = _11 === void 0 ? 100 : _11,
+      _12 = _b.useFractionalSize,
+      useFractionalSize = _12 === void 0 ? false : _12,
+      _13 = _b.externalRenderer,
+      externalRenderer = _13 === void 0 ? null : _13,
+      _14 = _b.renderExternal,
+      renderExternal = _14 === void 0 ? null : _14;
     var _this = _super.call(this) || this;
     // Internal states
     _this._initialized = false;
     _this._plugins = [];
-    _this._isResizing = false;
     // Bind options
     _this._align = align;
     _this._defaultIndex = defaultIndex;
@@ -6244,11 +6148,9 @@ var Flicking = /*#__PURE__*/function (_super) {
     _this._useResizeObserver = useResizeObserver;
     _this._resizeDebounce = resizeDebounce;
     _this._maxResizeDebounce = maxResizeDebounce;
-    _this._observePanelResize = observePanelResize;
     _this._useFractionalSize = useFractionalSize;
     _this._externalRenderer = externalRenderer;
     _this._renderExternal = renderExternal;
-    _this._optimizeSizeUpdate = optimizeSizeUpdate;
     // Create core components
     _this._viewport = new Viewport(_this, getElement(root));
     _this._autoResizer = new AutoResizer(_this);
@@ -6329,19 +6231,6 @@ var Flicking = /*#__PURE__*/function (_super) {
     enumerable: false,
     configurable: true
   });
-  Object.defineProperty(__proto, "autoResizer", {
-    /**
-     * {@link AutoResizer} instance of the Flicking
-     * @ko 현재 Flicking에 활성화된 {@link AutoResizer} 인스턴스
-     * @internal
-     * @readonly
-     */
-    get: function () {
-      return this._autoResizer;
-    },
-    enumerable: false,
-    configurable: true
-  });
   Object.defineProperty(__proto, "initialized", {
     // Internal States
     /**
@@ -7215,9 +7104,6 @@ var Flicking = /*#__PURE__*/function (_super) {
     // OTHERS
     set: function (val) {
       this._autoResize = val;
-      if (!this._initialized) {
-        return;
-      }
       if (val) {
         this._autoResizer.enable();
       } else {
@@ -7240,38 +7126,13 @@ var Flicking = /*#__PURE__*/function (_super) {
     },
     set: function (val) {
       this._useResizeObserver = val;
-      if (this._initialized && this._autoResize) {
+      if (this._autoResize) {
         this._autoResizer.enable();
       }
     },
     enumerable: false,
     configurable: true
   });
-  Object.defineProperty(__proto, "observePanelResize", {
-    /**
-     * 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 이벤트가 발생하도록 보장합니다.
-     */
-    get: function () {
-      return this._observePanelResize;
-    },
-    set: function (val) {
-      this._observePanelResize = val;
-      if (this._initialized && this._autoResize) {
-        if (val) {
-          this._autoResizer.observePanels();
-        } else {
-          this._autoResizer.unobservePanels();
-        }
-      }
-    },
-    enumerable: false,
-    configurable: true
-  });
   Object.defineProperty(__proto, "resizeDebounce", {
     /**
      * Delays size recalculation from `autoResize` by the given time in milisecond.
@@ -7353,30 +7214,6 @@ var Flicking = /*#__PURE__*/function (_super) {
     enumerable: false,
     configurable: true
   });
-  Object.defineProperty(__proto, "optimizeSizeUpdate", {
-    /**
-     * This option works only when autoResize is set to true.
-     * By default, autoResize listens to changes in both the viewport's width and height, updating all panel sizes accordingly.
-     * When optimizeSizeUpdate is enabled, the update behavior is optimized based on the flicking direction:
-     * If direction is "horizontal", only changes in width will trigger panel size updates.
-     * If direction is "vertical", only changes in height will do so.
-     * This option is useful when panel heights vary and unwanted flickering occurs due to frequent size recalculations during flicking. Enabling optimizeSizeUpdate prevents unnecessary updates and helps maintain visual stability.
-     * @ko optimizeSizeUpdate는 autoResize가 true일 때만 동작합니다.
-     * 기본적으로 autoResize는 뷰포트의 width와 height 변화를 모두 감지하여 패널들의 사이즈를 업데이트합니다.
-     * 이 옵션을 활성화하면 플리킹 방향에 따라 필요한 차원(horizontal → width, vertical → height)에 대해서만 사이즈를 업데이트합니다.
-     * 내부 패널의 높이가 서로 다를 때, 플리킹 중 과도한 리사이징으로 인한 깜빡임 현상을 줄이는 데 유용합니다.
-     * @type {boolean}
-     * @default false
-     */
-    get: function () {
-      return this._optimizeSizeUpdate;
-    },
-    set: function (val) {
-      this._optimizeSizeUpdate = val;
-    },
-    enumerable: false,
-    configurable: true
-  });
   /**
    * Initialize Flicking and move to the default index
    * This is automatically called on Flicking's constructor when `autoInit` is true(default)
@@ -7815,8 +7652,6 @@ var Flicking = /*#__PURE__*/function (_super) {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
-            if (this._isResizing) return [2 /*return*/];
-            this._isResizing = true;
             viewport = this._viewport;
             renderer = this._renderer;
             camera = this._camera;
@@ -7831,20 +7666,9 @@ var Flicking = /*#__PURE__*/function (_super) {
               element: viewport.element
             }));
             viewport.resize();
-            if (!this._optimizeSizeUpdate) return [3 /*break*/, 3];
-            if (!(this.horizontal && viewport.width !== prevWidth || !this.horizontal && viewport.height !== prevHeight)) return [3 /*break*/, 2];
             return [4 /*yield*/, renderer.forceRenderAllPanels()];
           case 1:
-            _a.sent();
-            _a.label = 2;
-          case 2:
-            return [3 /*break*/, 5];
-          case 3:
-            return [4 /*yield*/, renderer.forceRenderAllPanels()];
-          case 4:
             _a.sent(); // Render all panel elements, to update sizes
-            _a.label = 5;
-          case 5:
             if (!this._initialized) {
               return [2 /*return*/];
             }
@@ -7857,7 +7681,7 @@ var Flicking = /*#__PURE__*/function (_super) {
             camera.updatePanelOrder();
             camera.updateOffset();
             return [4 /*yield*/, renderer.render()];
-          case 6:
+          case 2:
             _a.sent();
             if (!this._initialized) {
               return [2 /*return*/];
@@ -7880,7 +7704,6 @@ var Flicking = /*#__PURE__*/function (_super) {
               sizeChanged: sizeChanged,
               element: viewport.element
             }));
-            this._isResizing = false;
             return [2 /*return*/];
         }
       });
@@ -8100,7 +7923,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.13.1";
+  Flicking.VERSION = "4.13.2-beta.0";
   return Flicking;
 }(Component);