@egjs/flicking 4.13.1 → 4.13.2-beta.0

package/dist/flicking.pkgd.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
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1094,9 +1094,6 @@ version: 4.13.1
     };
     // 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) {
@@ -1404,59 +1401,13 @@ version: 4.13.1
       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 {
@@ -1482,12 +1433,12 @@ version: 4.13.1
         // 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;
@@ -1513,46 +1464,14 @@ version: 4.13.1
         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;
@@ -1560,7 +1479,7 @@ version: 4.13.1
           resizeObserver.disconnect();
           this._resizeObserver = null;
         } else {
-          window.removeEventListener("resize", this._onResizeWrapper);
+          window.removeEventListener("resize", this._onResize);
         }
         this._enabled = false;
         return this;
@@ -2779,7 +2698,7 @@ version: 4.13.1
     license: MIT
     author: NAVER Corp.
     repository: https://github.com/naver/egjs-axes
-    version: 3.9.1
+    version: 3.9.2
     */
 
     /*! *****************************************************************************
@@ -3705,6 +3624,19 @@ version: 4.13.1
         var deltaTime = latestInterval ? timeStamp - latestInterval.timestamp : 0;
         var velocityX = prevEvent ? prevEvent.velocityX : 0;
         var velocityY = prevEvent ? prevEvent.velocityY : 0;
+        var directionX = prevEvent ? prevEvent.directionX : 1;
+        var directionY = prevEvent ? prevEvent.directionY : 1;
+        // If offset is 0, it inherits the direction of the previous event.
+        if (offsetX > 0) {
+          directionX = 1;
+        } else if (offsetX < 0) {
+          directionX = -1;
+        }
+        if (offsetY > 0) {
+          directionY = 1;
+        } else if (offsetY < 0) {
+          directionY = -1;
+        }
         if (!latestInterval || deltaTime >= VELOCITY_INTERVAL) {
           if (latestInterval) {
             _a = [(deltaX - latestInterval.deltaX) / deltaTime, (deltaY - latestInterval.deltaY) / deltaTime], velocityX = _a[0], velocityY = _a[1];
@@ -3724,6 +3656,8 @@ version: 4.13.1
           deltaY: deltaY,
           offsetX: offsetX,
           offsetY: offsetY,
+          directionX: directionX,
+          directionY: directionY,
           velocityX: velocityX,
           velocityY: velocityY,
           preventSystemEvent: true
@@ -5187,7 +5121,7 @@ version: 4.13.1
        * eg.Axes.VERSION;  // ex) 3.3.3
        * ```
        */
-      Axes.VERSION = "3.9.1";
+      Axes.VERSION = "3.9.2";
       /* eslint-enable */
       /**
        * @name TRANSFORM
@@ -5538,7 +5472,7 @@ version: 4.13.1
         this._detachWindowEvent(activeEvent);
         clearTimeout(this._rightEdgeTimer);
         var prevEvent = activeEvent.prevEvent;
-        var velocity = this._isOverThreshold ? this._getOffset([Math.abs(prevEvent.velocityX) * (prevEvent.offsetX < 0 ? -1 : 1), Math.abs(prevEvent.velocityY) * (prevEvent.offsetY < 0 ? -1 : 1)], [useDirection(DIRECTION_HORIZONTAL, this._direction), useDirection(DIRECTION_VERTICAL, this._direction)]) : [0, 0];
+        var velocity = this._isOverThreshold ? this._getOffset([Math.abs(prevEvent.velocityX) * prevEvent.directionX, Math.abs(prevEvent.velocityY) * prevEvent.directionY], [useDirection(DIRECTION_HORIZONTAL, this._direction), useDirection(DIRECTION_VERTICAL, this._direction)]) : [0, 0];
         activeEvent.onRelease();
         this._observer.release(this, prevEvent, velocity);
       };
@@ -7209,7 +7143,11 @@ version: 4.13.1
         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 {
@@ -7237,6 +7175,7 @@ version: 4.13.1
         if (!anchorAtCamera || !anchorAtPosition) {
           throw new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE);
         }
+        //    console.log("_findSnappedAnchor", anchorAtPosition);
         if (!isFinite(count)) {
           return anchorAtPosition;
         }
@@ -7678,10 +7617,7 @@ version: 4.13.1
       };
       __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);
@@ -10020,18 +9956,6 @@ version: 4.13.1
         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) {
@@ -11323,23 +11247,18 @@ version: 4.13.1
           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;
@@ -11375,11 +11294,9 @@ version: 4.13.1
         _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);
@@ -11460,19 +11377,6 @@ version: 4.13.1
         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
         /**
@@ -12346,9 +12250,6 @@ version: 4.13.1
         // OTHERS
         set: function (val) {
           this._autoResize = val;
-          if (!this._initialized) {
-            return;
-          }
           if (val) {
             this._autoResizer.enable();
           } else {
@@ -12371,38 +12272,13 @@ version: 4.13.1
         },
         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.
@@ -12484,30 +12360,6 @@ version: 4.13.1
         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)
@@ -12946,8 +12798,6 @@ version: 4.13.1
           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;
@@ -12962,20 +12812,9 @@ version: 4.13.1
                   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*/];
                 }
@@ -12988,7 +12827,7 @@ version: 4.13.1
                 camera.updatePanelOrder();
                 camera.updateOffset();
                 return [4 /*yield*/, renderer.render()];
-              case 6:
+              case 2:
                 _a.sent();
                 if (!this._initialized) {
                   return [2 /*return*/];
@@ -13011,7 +12850,6 @@ version: 4.13.1
                   sizeChanged: sizeChanged,
                   element: viewport.element
                 }));
-                this._isResizing = false;
                 return [2 /*return*/];
             }
           });
@@ -13231,7 +13069,7 @@ version: 4.13.1
        * Flicking.VERSION;  // ex) 4.0.0
        * ```
        */
-      Flicking.VERSION = "4.13.1";
+      Flicking.VERSION = "4.13.2-beta.0";
       return Flicking;
     }(Component);