@egjs/flicking 4.4.2 → 4.6.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.4.2
+version: 4.6.0
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -242,10 +242,12 @@ version: 4.4.2
 
       return ar;
     }
-    function __spreadArray(to, from) {
-      for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) to[j] = from[i];
+    /** @deprecated */
 
-      return to;
+    function __spread$1() {
+      for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read$1(arguments[i]));
+
+      return ar;
     }
 
     /*
@@ -893,6 +895,18 @@ version: 4.4.2
       HIDDEN: "flicking-hidden",
       DEFAULT_VIRTUAL: "flicking-panel"
     };
+    /**
+     * An object with all possible {@link Flicking#circularFallback circularFallback}s
+     * @ko Flicking의 {@link Flicking#circularFallback circularFallback}에 설정 가능한 값들을 담고 있는 객체
+     * @type {object}
+     * @property {string} LINEAR "linear"
+     * @property {string} BOUND "bound"
+     */
+
+    var CIRCULAR_FALLBACK = {
+      LINEAR: "linear",
+      BOUND: "bound"
+    };
 
     var Constants = {
         __proto__: null,
@@ -901,6 +915,7 @@ version: 4.4.2
         DIRECTION: DIRECTION,
         MOVE_TYPE: MOVE_TYPE,
         CLASS: CLASS,
+        CIRCULAR_FALLBACK: CIRCULAR_FALLBACK,
         ERROR_CODE: CODE
     };
 
@@ -1086,7 +1101,7 @@ version: 4.4.2
         if (isString(el)) {
           var tempDiv = document.createElement("div");
           tempDiv.innerHTML = el;
-          elements.push.apply(elements, __spreadArray([], __read$1(toArray$3(tempDiv.children))));
+          elements.push.apply(elements, __spread$1(toArray$3(tempDiv.children)));
 
           while (tempDiv.firstChild) {
             tempDiv.removeChild(tempDiv.firstChild);
@@ -1467,6 +1482,33 @@ version: 4.4.2
         var _this = this;
 
         this._onResize = function () {
+          var flicking = _this._flicking;
+          var resizeDebounce = flicking.resizeDebounce;
+          var maxResizeDebounce = flicking.maxResizeDebounce;
+
+          if (resizeDebounce <= 0) {
+            void flicking.resize();
+          } else {
+            if (_this._maxResizeDebounceTimer <= 0) {
+              if (maxResizeDebounce > 0 && maxResizeDebounce >= resizeDebounce) {
+                _this._maxResizeDebounceTimer = window.setTimeout(_this._doScheduledResize, maxResizeDebounce);
+              }
+            }
+
+            if (_this._resizeTimer > 0) {
+              clearTimeout(_this._resizeTimer);
+              _this._resizeTimer = 0;
+            }
+
+            _this._resizeTimer = window.setTimeout(_this._doScheduledResize, resizeDebounce);
+          }
+        };
+
+        this._doScheduledResize = function () {
+          clearTimeout(_this._resizeTimer);
+          clearTimeout(_this._maxResizeDebounceTimer);
+          _this._maxResizeDebounceTimer = -1;
+          _this._resizeTimer = -1;
           void _this._flicking.resize();
         }; // eslint-disable-next-line @typescript-eslint/member-ordering
 
@@ -1486,6 +1528,8 @@ version: 4.4.2
         this._flicking = flicking;
         this._enabled = false;
         this._resizeObserver = null;
+        this._resizeTimer = -1;
+        this._maxResizeDebounceTimer = -1;
       }
 
       var __proto = AutoResizer.prototype;
@@ -9443,9 +9487,8 @@ version: 4.4.2
 
 
       function SnapControl(_a) {
-        var _b = _a === void 0 ? {} : _a,
-            _c = _b.count,
-            count = _c === void 0 ? Infinity : _c;
+        var _b = (_a === void 0 ? {} : _a).count,
+            count = _b === void 0 ? Infinity : _b;
 
         var _this = _super.call(this) || this;
 
@@ -9651,9 +9694,8 @@ version: 4.4.2
 
 
       function FreeControl(_a) {
-        var _b = _a === void 0 ? {} : _a,
-            _c = _b.stopAtEdge,
-            stopAtEdge = _c === void 0 ? true : _c;
+        var _b = (_a === void 0 ? {} : _a).stopAtEdge,
+            stopAtEdge = _b === void 0 ? true : _b;
 
         var _this = _super.call(this) || this;
 
@@ -9787,9 +9829,8 @@ version: 4.4.2
 
 
       function StrictControl(_a) {
-        var _b = _a === void 0 ? {} : _a,
-            _c = _b.count,
-            count = _c === void 0 ? 1 : _c;
+        var _b = (_a === void 0 ? {} : _a).count,
+            count = _b === void 0 ? 1 : _b;
 
         var _this = _super.call(this) || this;
 
@@ -9912,6 +9953,21 @@ version: 4.4.2
         };
         return this;
       };
+
+      __proto.moveToPanel = function (panel, options) {
+        return __awaiter(this, void 0, void 0, function () {
+          var flicking, camera, controller;
+          return __generator(this, function (_a) {
+            flicking = getFlickingAttached(this._flicking);
+            camera = flicking.camera;
+            controller = this._controller;
+            controller.update(camera.controlParams);
+            return [2
+            /*return*/
+            , _super.prototype.moveToPanel.call(this, panel, options)];
+          });
+        });
+      };
       /**
        * Move {@link Camera} to the given position
        * @ko {@link Camera}를 주어진 좌표로 이동합니다
@@ -10042,197 +10098,663 @@ version: 4.4.2
     };
 
     /**
-     * A component that manages actual movement inside the viewport
-     * @ko 뷰포트 내에서의 실제 움직임을 담당하는 컴포넌트
+     * A mode of camera
      */
 
-    var Camera$1 =
+    var CameraMode =
     /*#__PURE__*/
     function () {
       /** */
-      function Camera(_a) {
-        var _this = this;
+      function CameraMode(flicking) {
+        this._flicking = flicking;
+      }
 
-        var _b = _a === void 0 ? {} : _a,
-            _c = _b.align,
-            align = _c === void 0 ? ALIGN.CENTER : _c;
+      var __proto = CameraMode.prototype;
 
-        this._checkTranslateSupport = function () {
-          var e_1, _a;
+      __proto.getAnchors = function () {
+        var panels = this._flicking.renderer.panels;
+        return panels.map(function (panel, index) {
+          return new AnchorPoint({
+            index: index,
+            position: panel.position,
+            panel: panel
+          });
+        });
+      };
 
-          var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
-          var supportedStyle = document.documentElement.style;
-          var transformName = "";
+      __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) {
+          if (!nearest) return anchor;
+          return Math.abs(nearest.position - position) < Math.abs(anchor.position - position) ? nearest : anchor;
+        }, null);
+      };
 
-          try {
-            for (var transforms_1 = __values$2(transforms), transforms_1_1 = transforms_1.next(); !transforms_1_1.done; transforms_1_1 = transforms_1.next()) {
-              var prefixedTransform = transforms_1_1.value;
+      __proto.clampToReachablePosition = function (position) {
+        var camera = this._flicking.camera;
+        var range = camera.range;
+        return clamp(position, range.min, range.max);
+      };
 
-              if (prefixedTransform in supportedStyle) {
-                transformName = prefixedTransform;
-              }
-            }
-          } catch (e_1_1) {
-            e_1 = {
-              error: e_1_1
-            };
-          } finally {
-            try {
-              if (transforms_1_1 && !transforms_1_1.done && (_a = transforms_1.return)) _a.call(transforms_1);
-            } finally {
-              if (e_1) throw e_1.error;
-            }
-          }
+      __proto.getCircularOffset = function () {
+        return 0;
+      };
 
-          if (!transformName) {
-            throw new FlickingError(MESSAGE.TRANSFORM_NOT_SUPPORTED, CODE.TRANSFORM_NOT_SUPPORTED);
-          }
+      __proto.canReach = function (panel) {
+        var camera = this._flicking.camera;
+        var range = camera.range;
+        if (panel.removed) return false;
+        var panelPos = panel.position;
+        return panelPos >= range.min && panelPos <= range.max;
+      };
 
-          _this._transform = transformName;
+      __proto.canSee = function (panel) {
+        var camera = this._flicking.camera;
+        var visibleRange = camera.visibleRange; // Should not include margin, as we don't declare what the margin is visible as what the panel is visible.
+
+        return panel.isVisibleOnRange(visibleRange.min, visibleRange.max);
+      };
+
+      return CameraMode;
+    }();
+
+    var LinearCameraMode =
+    /*#__PURE__*/
+    function (_super) {
+      __extends$2(LinearCameraMode, _super);
+
+      function LinearCameraMode() {
+        return _super !== null && _super.apply(this, arguments) || this;
+      }
+
+      var __proto = LinearCameraMode.prototype;
+
+      __proto.checkAvailability = function () {
+        // It's always available
+        return true;
+      };
+
+      __proto.getRange = function () {
+        var _a, _b;
+
+        var renderer = this._flicking.renderer;
+        var firstPanel = renderer.getPanel(0);
+        var lastPanel = renderer.getPanel(renderer.panelCount - 1);
+        return {
+          min: (_a = firstPanel === null || firstPanel === void 0 ? void 0 : firstPanel.position) !== null && _a !== void 0 ? _a : 0,
+          max: (_b = lastPanel === null || lastPanel === void 0 ? void 0 : lastPanel.position) !== null && _b !== void 0 ? _b : 0
         };
+      };
 
-        this._flicking = null;
+      return LinearCameraMode;
+    }(CameraMode);
 
-        this._resetInternalValues(); // Options
+    /**
+     * A {@link Camera} mode that connects the last panel and the first panel, enabling continuous loop
+     * @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera} 모드
+     */
 
+    var CircularCameraMode =
+    /*#__PURE__*/
+    function (_super) {
+      __extends$2(CircularCameraMode, _super);
 
-        this._align = align;
+      function CircularCameraMode() {
+        return _super !== null && _super.apply(this, arguments) || this;
       }
 
-      var __proto = Camera.prototype;
-      Object.defineProperty(__proto, "element", {
-        // Internal states getter
+      var __proto = CircularCameraMode.prototype;
 
-        /**
-         * The camera element(`.flicking-camera`)
-         * @ko 카메라 엘리먼트(`.flicking-camera`)
-         * @type {HTMLElement}
-         * @readonly
-         */
-        get: function () {
-          return this._el;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "children", {
-        /**
-         * An array of the child elements of the camera element(`.flicking-camera`)
-         * @ko 카메라 엘리먼트(`.flicking-camera`)의 자식 엘리먼트 배열
-         * @type {HTMLElement[]}
-         * @readonly
-         */
-        get: function () {
-          return toArray$3(this._el.children);
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "position", {
-        /**
-         * Current position of the camera
-         * @ko Camera의 현재 좌표
-         * @type {number}
-         * @readonly
-         */
-        get: function () {
-          return this._position;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "alignPosition", {
-        /**
-         * Align position inside the viewport where {@link Panel}'s {@link Panel#alignPosition alignPosition} should be located at
-         * @ko 패널의 정렬 기준 위치. 뷰포트 내에서 {@link Panel}의 {@link Panel#alignPosition alignPosition}이 위치해야 하는 곳입니다
-         * @type {number}
-         * @readonly
-         */
-        get: function () {
-          return this._alignPos;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "offset", {
-        /**
-         * Position offset, used for the {@link Flicking#renderOnlyVisible renderOnlyVisible} option
-         * @ko Camera의 좌표 오프셋. {@link Flicking#renderOnlyVisible renderOnlyVisible} 옵션을 위해 사용됩니다.
-         * @type {number}
-         * @default 0
-         * @readonly
-         */
-        get: function () {
-          return this._offset;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "range", {
-        /**
-         * A range that Camera's {@link Camera#position position} can reach
-         * @ko Camera의 {@link Camera#position position}이 도달 가능한 범위
-         * @type {object}
-         * @property {number} min A minimum position<ko>최소 위치</ko>
-         * @property {number} max A maximum position<ko>최대 위치</ko>
-         * @readonly
-         */
-        get: function () {
-          return this._range;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "rangeDiff", {
-        /**
-         * A difference between Camera's minimum and maximum position that can reach
-         * @ko Camera가 도달 가능한 최소/최대 좌표의 차이
-         * @type {number}
-         * @readonly
-         */
-        get: function () {
-          return this._range.max - this._range.min;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "visiblePanels", {
-        /**
-         * An array of visible panels from the current position
-         * @ko 현재 보이는 패널들의 배열
-         * @type {Panel[]}
-         * @readonly
-         */
-        get: function () {
-          return this._visiblePanels;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "visibleRange", {
-        /**
-         * A range of the visible area from the current position
-         * @ko 현재 위치에서 보이는 범위
-         * @type {object}
-         * @property {number} min A minimum position<ko>최소 위치</ko>
-         * @property {number} min A maximum position<ko>최대 위치</ko>
-         * @readonly
-         */
-        get: function () {
-          return {
-            min: this._position - this._alignPos,
-            max: this._position - this._alignPos + this.size
-          };
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "anchorPoints", {
-        /**
-         * An array of {@link AnchorPoint}s that Camera can be stopped at
-         * @ko 카메라가 도달 가능한 {@link AnchorPoint}의 목록
-         * @type {AnchorPoint[]}
-         * @readonly
+      __proto.checkAvailability = function () {
+        var flicking = this._flicking;
+        var renderer = flicking.renderer;
+        var panels = renderer.panels;
+
+        if (panels.length <= 0) {
+          return false;
+        }
+
+        var firstPanel = panels[0];
+        var lastPanel = panels[panels.length - 1];
+        var firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;
+        var lastPanelNext = lastPanel.range.max + lastPanel.margin.next;
+        var visibleSize = flicking.camera.size;
+        var panelSizeSum = lastPanelNext - firstPanelPrev;
+        var canSetCircularMode = panels.every(function (panel) {
+          return panelSizeSum - panel.size >= visibleSize;
+        });
+        return canSetCircularMode;
+      };
+
+      __proto.getRange = function () {
+        var flicking = this._flicking;
+        var panels = flicking.renderer.panels;
+
+        if (panels.length <= 0) {
+          return {
+            min: 0,
+            max: 0
+          };
+        }
+
+        var firstPanel = panels[0];
+        var lastPanel = panels[panels.length - 1];
+        var firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;
+        var lastPanelNext = lastPanel.range.max + lastPanel.margin.next;
+        return {
+          min: firstPanelPrev,
+          max: lastPanelNext
+        };
+      };
+
+      __proto.getAnchors = function () {
+        var flicking = this._flicking;
+        var panels = flicking.renderer.panels;
+        return panels.map(function (panel, index) {
+          return new AnchorPoint({
+            index: index,
+            position: panel.position,
+            panel: panel
+          });
+        });
+      };
+
+      __proto.findAnchorIncludePosition = function (position) {
+        var camera = this._flicking.camera;
+        var range = camera.range;
+        var anchors = camera.anchorPoints;
+        var rangeDiff = camera.rangeDiff;
+        var anchorCount = anchors.length;
+        var positionInRange = circulatePosition(position, range.min, range.max);
+
+        var anchorInRange = _super.prototype.findAnchorIncludePosition.call(this, positionInRange);
+
+        if (anchorCount > 0 && (position === range.min || position === range.max)) {
+          var possibleAnchors = [anchorInRange, new AnchorPoint({
+            index: 0,
+            position: anchors[0].position + rangeDiff,
+            panel: anchors[0].panel
+          }), new AnchorPoint({
+            index: anchorCount - 1,
+            position: anchors[anchorCount - 1].position - rangeDiff,
+            panel: anchors[anchorCount - 1].panel
+          })].filter(function (anchor) {
+            return !!anchor;
+          });
+          anchorInRange = possibleAnchors.reduce(function (nearest, anchor) {
+            if (!nearest) return anchor;
+            return Math.abs(nearest.position - position) < Math.abs(anchor.position - position) ? nearest : anchor;
+          }, null);
+        }
+
+        if (!anchorInRange) return null;
+
+        if (position < range.min) {
+          var loopCount = -Math.floor((range.min - position) / rangeDiff) - 1;
+          return new AnchorPoint({
+            index: anchorInRange.index,
+            position: anchorInRange.position + rangeDiff * loopCount,
+            panel: anchorInRange.panel
+          });
+        } else if (position > range.max) {
+          var loopCount = Math.floor((position - range.max) / rangeDiff) + 1;
+          return new AnchorPoint({
+            index: anchorInRange.index,
+            position: anchorInRange.position + rangeDiff * loopCount,
+            panel: anchorInRange.panel
+          });
+        }
+
+        return anchorInRange;
+      };
+
+      __proto.getCircularOffset = function () {
+        var flicking = this._flicking;
+        var camera = flicking.camera;
+        if (!camera.circularEnabled) return 0;
+        var toggled = flicking.panels.filter(function (panel) {
+          return panel.toggled;
+        });
+        var toggledPrev = toggled.filter(function (panel) {
+          return panel.toggleDirection === DIRECTION.PREV;
+        });
+        var toggledNext = toggled.filter(function (panel) {
+          return panel.toggleDirection === DIRECTION.NEXT;
+        });
+        return this._calcPanelAreaSum(toggledPrev) - this._calcPanelAreaSum(toggledNext);
+      };
+
+      __proto.clampToReachablePosition = function (position) {
+        // Basically all position is reachable for circular camera
+        return position;
+      };
+
+      __proto.canReach = function (panel) {
+        if (panel.removed) return false; // Always reachable on circular mode
+
+        return true;
+      };
+
+      __proto.canSee = function (panel) {
+        var camera = this._flicking.camera;
+        var range = camera.range;
+        var rangeDiff = camera.rangeDiff;
+        var visibleRange = camera.visibleRange;
+
+        var visibleInCurrentRange = _super.prototype.canSee.call(this, panel); // Check looped visible area for circular case
+
+
+        if (visibleRange.min < range.min) {
+          return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff);
+        } else if (visibleRange.max > range.max) {
+          return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff);
+        }
+
+        return visibleInCurrentRange;
+      };
+
+      __proto._calcPanelAreaSum = function (panels) {
+        return panels.reduce(function (sum, panel) {
+          return sum + panel.sizeIncludingMargin;
+        }, 0);
+      };
+
+      return CircularCameraMode;
+    }(CameraMode);
+
+    var BoundCameraMode =
+    /*#__PURE__*/
+    function (_super) {
+      __extends$2(BoundCameraMode, _super);
+
+      function BoundCameraMode() {
+        return _super !== null && _super.apply(this, arguments) || this;
+      }
+
+      var __proto = BoundCameraMode.prototype;
+
+      __proto.checkAvailability = function () {
+        var flicking = this._flicking;
+        var renderer = flicking.renderer;
+        var firstPanel = renderer.getPanel(0);
+        var lastPanel = renderer.getPanel(renderer.panelCount - 1);
+
+        if (!firstPanel || !lastPanel) {
+          return false;
+        }
+
+        var viewportSize = flicking.camera.size;
+        var firstPanelPrev = firstPanel.range.min;
+        var lastPanelNext = lastPanel.range.max;
+        var panelAreaSize = lastPanelNext - firstPanelPrev;
+        var isBiggerThanViewport = viewportSize < panelAreaSize;
+        return isBiggerThanViewport;
+      };
+
+      __proto.getRange = function () {
+        var flicking = this._flicking;
+        var renderer = flicking.renderer;
+        var alignPos = flicking.camera.alignPosition;
+        var firstPanel = renderer.getPanel(0);
+        var lastPanel = renderer.getPanel(renderer.panelCount - 1);
+
+        if (!firstPanel || !lastPanel) {
+          return {
+            min: 0,
+            max: 0
+          };
+        }
+
+        var viewportSize = flicking.camera.size;
+        var firstPanelPrev = firstPanel.range.min;
+        var lastPanelNext = lastPanel.range.max;
+        var panelAreaSize = lastPanelNext - firstPanelPrev;
+        var isBiggerThanViewport = viewportSize < panelAreaSize;
+        var firstPos = firstPanelPrev + alignPos;
+        var lastPos = lastPanelNext - viewportSize + alignPos;
+
+        if (isBiggerThanViewport) {
+          return {
+            min: firstPos,
+            max: lastPos
+          };
+        } else {
+          var align = flicking.camera.align;
+          var alignVal = typeof align === "object" ? align.camera : align;
+          var pos = firstPos + parseAlign$1(alignVal, lastPos - firstPos);
+          return {
+            min: pos,
+            max: pos
+          };
+        }
+      };
+
+      __proto.getAnchors = function () {
+        var flicking = this._flicking;
+        var camera = flicking.camera;
+        var panels = flicking.renderer.panels;
+
+        if (panels.length <= 0) {
+          return [];
+        }
+
+        var range = flicking.camera.range;
+        var reachablePanels = panels.filter(function (panel) {
+          return camera.canReach(panel);
+        });
+
+        if (reachablePanels.length > 0) {
+          var shouldPrependBoundAnchor = reachablePanels[0].position !== range.min;
+          var shouldAppendBoundAnchor = reachablePanels[reachablePanels.length - 1].position !== range.max;
+          var indexOffset_1 = shouldPrependBoundAnchor ? 1 : 0;
+          var newAnchors = reachablePanels.map(function (panel, idx) {
+            return new AnchorPoint({
+              index: idx + indexOffset_1,
+              position: panel.position,
+              panel: panel
+            });
+          });
+
+          if (shouldPrependBoundAnchor) {
+            newAnchors.splice(0, 0, new AnchorPoint({
+              index: 0,
+              position: range.min,
+              panel: panels[reachablePanels[0].index - 1]
+            }));
+          }
+
+          if (shouldAppendBoundAnchor) {
+            newAnchors.push(new AnchorPoint({
+              index: newAnchors.length,
+              position: range.max,
+              panel: panels[reachablePanels[reachablePanels.length - 1].index + 1]
+            }));
+          }
+
+          return newAnchors;
+        } else if (range.min !== range.max) {
+          // There're more than 2 panels
+          var nearestPanelAtMin = this._findNearestPanel(range.min, panels);
+
+          var panelAtMin = nearestPanelAtMin.index === panels.length - 1 ? nearestPanelAtMin.prev() : nearestPanelAtMin;
+          var panelAtMax = panelAtMin.next();
+          return [new AnchorPoint({
+            index: 0,
+            position: range.min,
+            panel: panelAtMin
+          }), new AnchorPoint({
+            index: 1,
+            position: range.max,
+            panel: panelAtMax
+          })];
+        } else {
+          return [new AnchorPoint({
+            index: 0,
+            position: range.min,
+            panel: this._findNearestPanel(range.min, panels)
+          })];
+        }
+      };
+
+      __proto.findAnchorIncludePosition = function (position) {
+        var camera = this._flicking.camera;
+        var range = camera.range;
+        var anchors = camera.anchorPoints;
+        if (anchors.length <= 0) return null;
+
+        if (position <= range.min) {
+          return anchors[0];
+        } else if (position >= range.max) {
+          return anchors[anchors.length - 1];
+        } else {
+          return _super.prototype.findAnchorIncludePosition.call(this, position);
+        }
+      };
+
+      __proto._findNearestPanel = function (pos, panels) {
+        var prevDist = Infinity;
+
+        for (var panelIdx = 0; panelIdx < panels.length; panelIdx++) {
+          var panel = panels[panelIdx];
+          var dist = Math.abs(panel.position - pos);
+
+          if (dist > prevDist) {
+            // Return previous anchor
+            return panels[panelIdx - 1];
+          }
+
+          prevDist = dist;
+        } // Return last anchor
+
+
+        return panels[panels.length - 1];
+      };
+
+      return BoundCameraMode;
+    }(CameraMode);
+
+    /**
+     * A component that manages actual movement inside the viewport
+     * @ko 뷰포트 내에서의 실제 움직임을 담당하는 컴포넌트
+     */
+
+    var Camera$1 =
+    /*#__PURE__*/
+    function () {
+      /** */
+      function Camera(flicking, _a) {
+        var _this = this;
+
+        var _b = (_a === void 0 ? {} : _a).align,
+            align = _b === void 0 ? ALIGN.CENTER : _b;
+
+        this._checkTranslateSupport = function () {
+          var e_1, _a;
+
+          var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
+          var supportedStyle = document.documentElement.style;
+          var transformName = "";
+
+          try {
+            for (var transforms_1 = __values$2(transforms), transforms_1_1 = transforms_1.next(); !transforms_1_1.done; transforms_1_1 = transforms_1.next()) {
+              var prefixedTransform = transforms_1_1.value;
+
+              if (prefixedTransform in supportedStyle) {
+                transformName = prefixedTransform;
+              }
+            }
+          } catch (e_1_1) {
+            e_1 = {
+              error: e_1_1
+            };
+          } finally {
+            try {
+              if (transforms_1_1 && !transforms_1_1.done && (_a = transforms_1.return)) _a.call(transforms_1);
+            } finally {
+              if (e_1) throw e_1.error;
+            }
+          }
+
+          if (!transformName) {
+            throw new FlickingError(MESSAGE.TRANSFORM_NOT_SUPPORTED, CODE.TRANSFORM_NOT_SUPPORTED);
+          }
+
+          _this._transform = transformName;
+        };
+
+        this._flicking = flicking;
+
+        this._resetInternalValues(); // Options
+
+
+        this._align = align;
+      }
+
+      var __proto = Camera.prototype;
+      Object.defineProperty(__proto, "element", {
+        // Internal states getter
+
+        /**
+         * The camera element(`.flicking-camera`)
+         * @ko 카메라 엘리먼트(`.flicking-camera`)
+         * @type {HTMLElement}
+         * @readonly
+         */
+        get: function () {
+          return this._el;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "children", {
+        /**
+         * An array of the child elements of the camera element(`.flicking-camera`)
+         * @ko 카메라 엘리먼트(`.flicking-camera`)의 자식 엘리먼트 배열
+         * @type {HTMLElement[]}
+         * @readonly
+         */
+        get: function () {
+          return toArray$3(this._el.children);
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "position", {
+        /**
+         * Current position of the camera
+         * @ko Camera의 현재 좌표
+         * @type {number}
+         * @readonly
+         */
+        get: function () {
+          return this._position;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "alignPosition", {
+        /**
+         * Align position inside the viewport where {@link Panel}'s {@link Panel#alignPosition alignPosition} should be located at
+         * @ko 패널의 정렬 기준 위치. 뷰포트 내에서 {@link Panel}의 {@link Panel#alignPosition alignPosition}이 위치해야 하는 곳입니다
+         * @type {number}
+         * @readonly
+         */
+        get: function () {
+          return this._alignPos;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "offset", {
+        /**
+         * Position offset, used for the {@link Flicking#renderOnlyVisible renderOnlyVisible} option
+         * @ko Camera의 좌표 오프셋. {@link Flicking#renderOnlyVisible renderOnlyVisible} 옵션을 위해 사용됩니다.
+         * @type {number}
+         * @default 0
+         * @readonly
+         */
+        get: function () {
+          return this._offset - this._circularOffset;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "circularEnabled", {
+        /**
+         * Whether the `circular` option is enabled.
+         * The {@link Flicking#circular circular} option can't be enabled when sum of the panel sizes are too small.
+         * @ko {@link Flicking#circular circular} 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
+         * {@link Flicking#circular circular} 옵션은 패널의 크기의 합이 충분하지 않을 경우 비활성화됩니다.
+         * @type {boolean}
+         * @default false
+         * @readonly
+         */
+        get: function () {
+          return this._circularEnabled;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "mode", {
+        /**
+         * A current camera mode
+         * @type {CameraMode}
+         * @readonly
+         */
+        get: function () {
+          return this._mode;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "range", {
+        /**
+         * A range that Camera's {@link Camera#position position} can reach
+         * @ko Camera의 {@link Camera#position position}이 도달 가능한 범위
+         * @type {object}
+         * @property {number} min A minimum position<ko>최소 위치</ko>
+         * @property {number} max A maximum position<ko>최대 위치</ko>
+         * @readonly
+         */
+        get: function () {
+          return this._range;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "rangeDiff", {
+        /**
+         * A difference between Camera's minimum and maximum position that can reach
+         * @ko Camera가 도달 가능한 최소/최대 좌표의 차이
+         * @type {number}
+         * @readonly
+         */
+        get: function () {
+          return this._range.max - this._range.min;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "visiblePanels", {
+        /**
+         * An array of visible panels from the current position
+         * @ko 현재 보이는 패널들의 배열
+         * @type {Panel[]}
+         * @readonly
+         */
+        get: function () {
+          return this._visiblePanels;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "visibleRange", {
+        /**
+         * A range of the visible area from the current position
+         * @ko 현재 위치에서 보이는 범위
+         * @type {object}
+         * @property {number} min A minimum position<ko>최소 위치</ko>
+         * @property {number} min A maximum position<ko>최대 위치</ko>
+         * @readonly
+         */
+        get: function () {
+          return {
+            min: this._position - this._alignPos,
+            max: this._position - this._alignPos + this.size
+          };
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "anchorPoints", {
+        /**
+         * An array of {@link AnchorPoint}s that Camera can be stopped at
+         * @ko 카메라가 도달 가능한 {@link AnchorPoint}의 목록
+         * @type {AnchorPoint[]}
+         * @readonly
          */
         get: function () {
           return this._anchors;
@@ -10251,7 +10773,7 @@ version: 4.4.2
           return {
             range: this._range,
             position: this._position,
-            circular: false
+            circular: this._circularEnabled
           };
         },
         enumerable: false,
@@ -10319,484 +10841,78 @@ version: 4.4.2
             var prevPosition = prevPanel ? prevPanel.position + prevPanel.offset : prevRange - bounceSize[0]; // Looped
 
             if (prevPosition > panelPos) {
-              prevPosition -= rangeDiff;
-            }
-
-            return nearestPanel.index - 1 + getProgress(position, prevPosition, panelPos);
-          } else {
-            var nextPanel = nearestPanel.next();
-            var nextPosition = nextPanel ? nextPanel.position + nextPanel.offset : nextRange + bounceSize[1]; // Looped
-
-            if (nextPosition < panelPos) {
-              nextPosition += rangeDiff;
-            }
-
-            return nearestPanel.index + getProgress(position, panelPos, nextPosition);
-          }
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "align", {
-        // Options Getter
-
-        /**
-         * A value indicating where the {@link Camera#alignPosition alignPosition} should be located at inside the viewport element
-         * @ko {@link Camera#alignPosition alignPosition}이 뷰포트 엘리먼트 내의 어디에 위치해야 하는지를 나타내는 값
-         * @type {ALIGN | string | number}
-         */
-        get: function () {
-          return this._align;
-        },
-        // Options Setter
-        set: function (val) {
-          this._align = val;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      /**
-       * Initialize Camera
-       * @ko Camera를 초기화합니다
-       * @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>
-       * @chainable
-       * @throws {FlickingError}
-       * {@link ERROR_CODE VAL_MUST_NOT_NULL} If the camera element(`.flicking-camera`) does not exist inside viewport element
-       * <ko>{@link ERROR_CODE VAL_MUST_NOT_NULL} 뷰포트 엘리먼트 내부에 카메라 엘리먼트(`.flicking-camera`)가 존재하지 않을 경우</ko>
-       * @return {this}
-       */
-
-      __proto.init = function (flicking) {
-        this._flicking = flicking;
-        var viewportEl = flicking.viewport.element;
-        checkExistence(viewportEl.firstElementChild, "First element child of the viewport element");
-        this._el = viewportEl.firstElementChild;
-
-        this._checkTranslateSupport();
-
-        return this;
-      };
-      /**
-       * Destroy Camera and return to initial state
-       * @ko Camera를 초기 상태로 되돌립니다
-       * @return {void}
-       */
-
-
-      __proto.destroy = function () {
-        this._flicking = null;
-
-        this._resetInternalValues();
-
-        return this;
-      };
-      /**
-       * Move to the given position and apply CSS transform
-       * @ko 해당 좌표로 이동하고, CSS transform을 적용합니다
-       * @param {number} pos A new position<ko>움직일 위치</ko>
-       * @throws {FlickingError}
-       * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
-       * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
-       * @return {this}
-       */
-
-
-      __proto.lookAt = function (pos) {
-        var prevPos = this._position;
-        this._position = pos;
-
-        this._refreshVisiblePanels();
-
-        this._checkNeedPanel();
-
-        this._checkReachEnd(prevPos, pos);
-
-        this.applyTransform();
-      };
-      /**
-       * Return a previous {@link AnchorPoint} of given {@link AnchorPoint}
-       * If it does not exist, return `null` instead
-       * @ko 주어진 {@link AnchorPoint}의 이전 {@link AnchorPoint}를 반환합니다
-       * 존재하지 않을 경우 `null`을 반환합니다
-       * @param {AnchorPoint} anchor A reference {@link AnchorPoint}<ko>기준 {@link AnchorPoint}</ko>
-       * @return {AnchorPoint | null} The previous {@link AnchorPoint}<ko>이전 {@link AnchorPoint}</ko>
-       */
-
-
-      __proto.getPrevAnchor = function (anchor) {
-        return this._anchors[anchor.index - 1] || null;
-      };
-      /**
-       * Return a next {@link AnchorPoint} of given {@link AnchorPoint}
-       * If it does not exist, return `null` instead
-       * @ko 주어진 {@link AnchorPoint}의 다음 {@link AnchorPoint}를 반환합니다
-       * 존재하지 않을 경우 `null`을 반환합니다
-       * @param {AnchorPoint} anchor A reference {@link AnchorPoint}<ko>기준 {@link AnchorPoint}</ko>
-       * @return {AnchorPoint | null} The next {@link AnchorPoint}<ko>다음 {@link AnchorPoint}</ko>
-       */
-
-
-      __proto.getNextAnchor = function (anchor) {
-        return this._anchors[anchor.index + 1] || null;
-      };
-      /**
-       * Return the camera's position progress in the panel below
-       * Value is from 0 to 1 when the camera's inside panel
-       * Value can be lower than 0 or bigger than 1 when it's in the margin area
-       * @ko 현재 카메라 아래 패널에서의 위치 진행도를 반환합니다
-       * 반환값은 카메라가 패널 내부에 있을 경우 0부터 1까지의 값을 갖습니다
-       * 패널의 margin 영역에 있을 경우 0보다 작거나 1보다 큰 값을 반환할 수 있습니다
-       */
-
-
-      __proto.getProgressInPanel = function (panel) {
-        var panelRange = panel.range;
-        return (this._position - panelRange.min) / (panelRange.max - panelRange.min);
-      };
-      /**
-       * Return {@link AnchorPoint} that includes given position
-       * If there's no {@link AnchorPoint} that includes the given position, return `null` instead
-       * @ko 주어진 좌표를 포함하는 {@link AnchorPoint}를 반환합니다
-       * 주어진 좌표를 포함하는 {@link AnchorPoint}가 없을 경우 `null`을 반환합니다
-       * @param {number} position A position to check<ko>확인할 좌표</ko>
-       * @return {AnchorPoint | null} The {@link AnchorPoint} that includes the given position<ko>해당 좌표를 포함하는 {@link AnchorPoint}</ko>
-       */
-
-
-      __proto.findAnchorIncludePosition = function (position) {
-        var anchors = this._anchors;
-        var anchorsIncludingPosition = anchors.filter(function (anchor) {
-          return anchor.panel.includePosition(position, true);
-        });
-        return anchorsIncludingPosition.reduce(function (nearest, anchor) {
-          if (!nearest) return anchor;
-          return Math.abs(nearest.position - position) < Math.abs(anchor.position - position) ? nearest : anchor;
-        }, null);
-      };
-      /**
-       * Return {@link AnchorPoint} nearest to given position
-       * If there're no {@link AnchorPoint}s, return `null` instead
-       * @ko 해당 좌표에서 가장 가까운 {@link AnchorPoint}를 반환합니다
-       * {@link AnchorPoint}가 하나도 없을 경우 `null`을 반환합니다
-       * @param {number} position A position to check<ko>확인할 좌표</ko>
-       * @return {AnchorPoint | null} The {@link AnchorPoint} nearest to the given position<ko>해당 좌표에 가장 인접한 {@link AnchorPoint}</ko>
-       */
-
-
-      __proto.findNearestAnchor = function (position) {
-        var anchors = this._anchors;
-        if (anchors.length <= 0) return null;
-        var prevDist = Infinity;
-
-        for (var anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
-          var anchor = anchors[anchorIdx];
-          var dist = Math.abs(anchor.position - position);
-
-          if (dist > prevDist) {
-            // Return previous anchor
-            return anchors[anchorIdx - 1];
-          }
-
-          prevDist = dist;
-        } // Return last anchor
-
-
-        return anchors[anchors.length - 1];
-      };
-      /**
-       * Return {@link AnchorPoint} that matches {@link Flicking#currentPanel}
-       * @ko 현재 {@link Flicking#currentPanel}에 해당하는 {@link AnchorPoint}를 반환합니다
-       * @return {AnchorPoint | null}
-       */
-
-
-      __proto.findActiveAnchor = function () {
-        var flicking = getFlickingAttached(this._flicking);
-        var activeIndex = flicking.control.activeIndex;
-        return find$1(this._anchors, function (anchor) {
-          return anchor.panel.index === activeIndex;
-        });
-      };
-      /**
-       * Clamp the given position between camera's range
-       * @ko 주어진 좌표를 Camera가 도달 가능한 범위 사이의 값으로 만듭니다
-       * @param {number} position A position to clamp<ko>범위를 제한할 좌표</ko>
-       * @return {number} A clamped position<ko>범위 제한된 좌표</ko>
-       */
-
-
-      __proto.clampToReachablePosition = function (position) {
-        var range = this._range;
-        return clamp(position, range.min, range.max);
-      };
-      /**
-       * Check whether the given panel is inside of the Camera's range
-       * @ko 해당 {@link Panel}이 Camera가 도달 가능한 범위 내에 있는지를 반환합니다
-       * @param panel An instance of {@link Panel} to check<ko>확인할 {@link Panel}의 인스턴스</ko>
-       * @return {boolean} Whether the panel's inside Camera's range<ko>도달 가능한 범위 내에 해당 패널이 존재하는지 여부</ko>
-       */
-
-
-      __proto.canReach = function (panel) {
-        var range = this._range;
-        if (panel.removed) return false;
-        var panelPos = panel.position;
-        return panelPos >= range.min && panelPos <= range.max;
-      };
-      /**
-       * Check whether the given panel element is visible at the current position
-       * @ko 현재 좌표에서 해당 패널 엘리먼트를 볼 수 있는지 여부를 반환합니다
-       * @param panel An instance of {@link Panel} to check<ko>확인할 {@link Panel}의 인스턴스</ko>
-       * @return Whether the panel element is visible at the current position<ko>현재 위치에서 해당 패널 엘리먼트가 보이는지 여부</ko>
-       */
-
-
-      __proto.canSee = function (panel) {
-        var visibleRange = this.visibleRange; // Should not include margin, as we don't declare what the margin is visible as what the panel is visible.
-
-        return panel.isVisibleOnRange(visibleRange.min, visibleRange.max);
-      };
-      /**
-       * Update Camera's {@link Camera#alignPosition alignPosition}
-       * @ko Camera의 {@link Camera#alignPosition alignPosition}을 업데이트합니다
-       * @chainable
-       * @return {this}
-       */
-
-
-      __proto.updateAlignPos = function () {
-        var align = this._align;
-        var alignVal = typeof align === "object" ? align.camera : align;
-        this._alignPos = parseAlign$1(alignVal, this.size);
-        return this;
-      };
-      /**
-       * Update Camera's {@link Camera#anchorPoints anchorPoints}
-       * @ko Camera의 {@link Camera#anchorPoints anchorPoints}를 업데이트합니다
-       * @throws {FlickingError}
-       * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
-       * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
-       * @chainable
-       * @return {this}
-       */
+              prevPosition -= rangeDiff;
+            }
 
+            return nearestPanel.index - 1 + getProgress(position, prevPosition, panelPos);
+          } else {
+            var nextPanel = nearestPanel.next();
+            var nextPosition = nextPanel ? nextPanel.position + nextPanel.offset : nextRange + bounceSize[1]; // Looped
 
-      __proto.updateAnchors = function () {
-        var flicking = getFlickingAttached(this._flicking);
-        var panels = flicking.renderer.panels;
-        this._anchors = panels.map(function (panel, index) {
-          return new AnchorPoint({
-            index: index,
-            position: panel.position,
-            panel: panel
-          });
-        });
-        return this;
-      };
-      /**
-       * Update Viewport's height to active panel's height
-       * @ko 현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
-       * @throws {FlickingError}
-       * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
-       * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
-       * @chainable
-       * @return {this}
-       */
+            if (nextPosition < panelPos) {
+              nextPosition += rangeDiff;
+            }
 
+            return nearestPanel.index + getProgress(position, panelPos, nextPosition);
+          }
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "align", {
+        // Options Getter
 
-      __proto.updateAdaptiveHeight = function () {
-        var flicking = getFlickingAttached(this._flicking);
-        var activePanel = flicking.control.activePanel;
-        if (!flicking.horizontal || !flicking.adaptive || !activePanel) return;
-        flicking.viewport.setSize({
-          height: activePanel.height
-        });
-      };
+        /**
+         * A value indicating where the {@link Camera#alignPosition alignPosition} should be located at inside the viewport element
+         * @ko {@link Camera#alignPosition alignPosition}이 뷰포트 엘리먼트 내의 어디에 위치해야 하는지를 나타내는 값
+         * @type {ALIGN | string | number}
+         */
+        get: function () {
+          return this._align;
+        },
+        // Options Setter
+        set: function (val) {
+          this._align = val;
+        },
+        enumerable: false,
+        configurable: true
+      });
       /**
-       * Update current offset of the camera
-       * @ko 현재 카메라의 오프셋을 업데이트합니다
-       * @chainable
+       * Initialize Camera
+       * @ko Camera를 초기화합니다
+       * @throws {FlickingError}
+       * {@link ERROR_CODE VAL_MUST_NOT_NULL} If the camera element(`.flicking-camera`) does not exist inside viewport element
+       * <ko>{@link ERROR_CODE VAL_MUST_NOT_NULL} 뷰포트 엘리먼트 내부에 카메라 엘리먼트(`.flicking-camera`)가 존재하지 않을 경우</ko>
        * @return {this}
        */
 
+      __proto.init = function () {
+        var viewportEl = this._flicking.viewport.element;
+        checkExistence(viewportEl.firstElementChild, "First element child of the viewport element");
+        this._el = viewportEl.firstElementChild;
 
-      __proto.updateOffset = function () {
-        var flicking = getFlickingAttached(this._flicking);
-        var position = this._position;
-        var unRenderedPanels = flicking.panels.filter(function (panel) {
-          return !panel.rendered;
-        });
-        this._offset = unRenderedPanels.filter(function (panel) {
-          return panel.position + panel.offset < position;
-        }).reduce(function (offset, panel) {
-          return offset + panel.sizeIncludingMargin;
-        }, 0);
-        this.applyTransform();
-        return this;
-      };
-      /**
-       * Reset the history of {@link Flicking#event:needPanel needPanel} events so it can be triggered again
-       * @ko 발생한 {@link Flicking#event:needPanel needPanel} 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다
-       * @chainable
-       * @return {this}
-       */
+        this._checkTranslateSupport();
 
+        this._updateMode();
 
-      __proto.resetNeedPanelHistory = function () {
-        this._needPanelTriggered = {
-          prev: false,
-          next: false
-        };
         return this;
       };
       /**
-       * Apply "transform" style with the current position to camera element
-       * @ko 현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.
-       * @chainable
-       * @return {this}
+       * Destroy Camera and return to initial state
+       * @ko Camera를 초기 상태로 되돌립니다
+       * @return {void}
        */
 
 
-      __proto.applyTransform = function () {
-        var el = this._el;
-        var flicking = getFlickingAttached(this._flicking);
-        var actualPosition = this._position - this._alignPos - this._offset;
-        el.style[this._transform] = flicking.horizontal ? "translate(" + -actualPosition + "px)" : "translate(0, " + -actualPosition + "px)";
-        return this;
-      };
-
-      __proto._resetInternalValues = function () {
-        this._position = 0;
-        this._alignPos = 0;
-        this._offset = 0;
-        this._range = {
-          min: 0,
-          max: 0
-        };
-        this._visiblePanels = [];
-        this._anchors = [];
-        this._needPanelTriggered = {
-          prev: false,
-          next: false
-        };
-      };
-
-      __proto._refreshVisiblePanels = function () {
-        var _this = this;
-
-        var flicking = getFlickingAttached(this._flicking);
-        var panels = flicking.renderer.panels;
-        var newVisiblePanels = panels.filter(function (panel) {
-          return _this.canSee(panel);
-        });
-        var prevVisiblePanels = this._visiblePanels;
-        this._visiblePanels = newVisiblePanels;
-        var added = newVisiblePanels.filter(function (panel) {
-          return !includes(prevVisiblePanels, panel);
-        });
-        var removed = prevVisiblePanels.filter(function (panel) {
-          return !includes(newVisiblePanels, panel);
-        });
-
-        if (added.length > 0 || removed.length > 0) {
-          void flicking.renderer.render().then(function () {
-            flicking.trigger(new ComponentEvent$1(EVENTS.VISIBLE_CHANGE, {
-              added: added,
-              removed: removed,
-              visiblePanels: newVisiblePanels
-            }));
-          });
-        }
-      };
-
-      __proto._checkNeedPanel = function () {
-        var needPanelTriggered = this._needPanelTriggered;
-        if (needPanelTriggered.prev && needPanelTriggered.next) return;
-        var flicking = getFlickingAttached(this._flicking);
-        var panels = flicking.renderer.panels;
-
-        if (panels.length <= 0) {
-          if (!needPanelTriggered.prev) {
-            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
-              direction: DIRECTION.PREV
-            }));
-            needPanelTriggered.prev = true;
-          }
-
-          if (!needPanelTriggered.next) {
-            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
-              direction: DIRECTION.NEXT
-            }));
-            needPanelTriggered.next = true;
-          }
-
-          return;
-        }
-
-        var cameraPosition = this._position;
-        var cameraSize = this.size;
-        var cameraRange = this._range;
-        var needPanelThreshold = flicking.needPanelThreshold;
-        var cameraPrev = cameraPosition - this._alignPos;
-        var cameraNext = cameraPrev + cameraSize;
-        var firstPanel = panels[0];
-        var lastPanel = panels[panels.length - 1];
-
-        if (!needPanelTriggered.prev) {
-          var firstPanelPrev = firstPanel.range.min;
-
-          if (cameraPrev <= firstPanelPrev + needPanelThreshold || cameraPosition <= cameraRange.min + needPanelThreshold) {
-            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
-              direction: DIRECTION.PREV
-            }));
-            needPanelTriggered.prev = true;
-          }
-        }
-
-        if (!needPanelTriggered.next) {
-          var lastPanelNext = lastPanel.range.max;
-
-          if (cameraNext >= lastPanelNext - needPanelThreshold || cameraPosition >= cameraRange.max - needPanelThreshold) {
-            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
-              direction: DIRECTION.NEXT
-            }));
-            needPanelTriggered.next = true;
-          }
-        }
-      };
+      __proto.destroy = function () {
+        this._resetInternalValues();
 
-      __proto._checkReachEnd = function (prevPos, newPos) {
-        var flicking = getFlickingAttached(this._flicking);
-        var range = this._range;
-        var wasBetweenRange = prevPos > range.min && prevPos < range.max;
-        var isBetweenRange = newPos > range.min && newPos < range.max;
-        if (!wasBetweenRange || isBetweenRange) return;
-        var direction = newPos <= range.min ? DIRECTION.PREV : DIRECTION.NEXT;
-        flicking.trigger(new ComponentEvent$1(EVENTS.REACH_EDGE, {
-          direction: direction
-        }));
+        return this;
       };
-
-      return Camera;
-    }();
-
-    /**
-     * A {@link Camera} that can move from the position of the first panel to the position of the last panel
-     * @ko 첫번째 패널의 좌표로부터 마지막 패널의 좌표로까지 이동할 수 있는 종류의 {@link Camera}
-     */
-
-    var LinearCamera =
-    /*#__PURE__*/
-    function (_super) {
-      __extends$2(LinearCamera, _super);
-
-      function LinearCamera() {
-        return _super !== null && _super.apply(this, arguments) || this;
-      }
       /**
-       * Update {@link Camera#range range} of Camera
-       * @ko Camera의 {@link Camera#range range}를 업데이트합니다
-       * @chainable
+       * Move to the given position and apply CSS transform
+       * @ko 해당 좌표로 이동하고, CSS transform을 적용합니다
+       * @param {number} pos A new position<ko>움직일 위치</ko>
        * @throws {FlickingError}
        * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
        * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
@@ -10804,170 +10920,190 @@ version: 4.4.2
        */
 
 
-      var __proto = LinearCamera.prototype;
-
-      __proto.updateRange = function () {
-        var _a, _b;
-
-        var flicking = getFlickingAttached(this._flicking);
-        var renderer = flicking.renderer;
-        var firstPanel = renderer.getPanel(0);
-        var lastPanel = renderer.getPanel(renderer.panelCount - 1);
-        this._range = {
-          min: (_a = firstPanel === null || firstPanel === void 0 ? void 0 : firstPanel.position) !== null && _a !== void 0 ? _a : 0,
-          max: (_b = lastPanel === null || lastPanel === void 0 ? void 0 : lastPanel.position) !== null && _b !== void 0 ? _b : 0
-        };
-        return this;
-      };
-
-      return LinearCamera;
-    }(Camera$1);
+      __proto.lookAt = function (pos) {
+        var _this = this;
 
-    /**
-     * A {@link Camera} that connects the last panel and the first panel, enabling continuous loop
-     * @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera}
-     */
+        var flicking = getFlickingAttached(this._flicking);
+        var prevPos = this._position;
+        this._position = pos;
 
-    var CircularCamera =
-    /*#__PURE__*/
-    function (_super) {
-      __extends$2(CircularCamera, _super);
+        var toggled = this._togglePanels(prevPos, pos);
 
-      function CircularCamera() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+        this._refreshVisiblePanels();
 
-        _this._circularOffset = 0;
-        _this._circularEnabled = false;
-        return _this;
-      }
+        this._checkNeedPanel();
+
+        this._checkReachEnd(prevPos, pos);
+
+        if (toggled) {
+          void flicking.renderer.render().then(function () {
+            _this.updateOffset();
+          });
+        } else {
+          this.applyTransform();
+        }
+      };
+      /**
+       * Return a previous {@link AnchorPoint} of given {@link AnchorPoint}
+       * If it does not exist, return `null` instead
+       * @ko 주어진 {@link AnchorPoint}의 이전 {@link AnchorPoint}를 반환합니다
+       * 존재하지 않을 경우 `null`을 반환합니다
+       * @param {AnchorPoint} anchor A reference {@link AnchorPoint}<ko>기준 {@link AnchorPoint}</ko>
+       * @return {AnchorPoint | null} The previous {@link AnchorPoint}<ko>이전 {@link AnchorPoint}</ko>
+       */
 
-      var __proto = CircularCamera.prototype;
-      Object.defineProperty(__proto, "offset", {
-        get: function () {
-          return this._offset - this._circularOffset;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "controlParams", {
-        get: function () {
-          return {
-            range: this._range,
-            position: this._position,
-            circular: this._circularEnabled
-          };
-        },
-        enumerable: false,
-        configurable: true
-      });
 
       __proto.getPrevAnchor = function (anchor) {
-        if (!this._circularEnabled || anchor.index !== 0) return _super.prototype.getPrevAnchor.call(this, anchor);
-        var anchors = this._anchors;
-        var rangeDiff = this.rangeDiff;
-        var lastAnchor = anchors[anchors.length - 1];
-        return new AnchorPoint({
-          index: lastAnchor.index,
-          position: lastAnchor.position - rangeDiff,
-          panel: lastAnchor.panel
-        });
+        if (!this._circularEnabled || anchor.index !== 0) {
+          return this._anchors[anchor.index - 1] || null;
+        } else {
+          var anchors = this._anchors;
+          var rangeDiff = this.rangeDiff;
+          var lastAnchor = anchors[anchors.length - 1];
+          return new AnchorPoint({
+            index: lastAnchor.index,
+            position: lastAnchor.position - rangeDiff,
+            panel: lastAnchor.panel
+          });
+        }
       };
+      /**
+       * Return a next {@link AnchorPoint} of given {@link AnchorPoint}
+       * If it does not exist, return `null` instead
+       * @ko 주어진 {@link AnchorPoint}의 다음 {@link AnchorPoint}를 반환합니다
+       * 존재하지 않을 경우 `null`을 반환합니다
+       * @param {AnchorPoint} anchor A reference {@link AnchorPoint}<ko>기준 {@link AnchorPoint}</ko>
+       * @return {AnchorPoint | null} The next {@link AnchorPoint}<ko>다음 {@link AnchorPoint}</ko>
+       */
+
 
       __proto.getNextAnchor = function (anchor) {
         var anchors = this._anchors;
-        if (!this._circularEnabled || anchor.index !== anchors.length - 1) return _super.prototype.getNextAnchor.call(this, anchor);
-        var rangeDiff = this.rangeDiff;
-        var firstAnchor = anchors[0];
-        return new AnchorPoint({
-          index: firstAnchor.index,
-          position: firstAnchor.position + rangeDiff,
-          panel: firstAnchor.panel
-        });
+
+        if (!this._circularEnabled || anchor.index !== anchors.length - 1) {
+          return anchors[anchor.index + 1] || null;
+        } else {
+          var rangeDiff = this.rangeDiff;
+          var firstAnchor = anchors[0];
+          return new AnchorPoint({
+            index: firstAnchor.index,
+            position: firstAnchor.position + rangeDiff,
+            panel: firstAnchor.panel
+          });
+        }
+      };
+      /**
+       * Return the camera's position progress in the panel below
+       * Value is from 0 to 1 when the camera's inside panel
+       * Value can be lower than 0 or bigger than 1 when it's in the margin area
+       * @ko 현재 카메라 아래 패널에서의 위치 진행도를 반환합니다
+       * 반환값은 카메라가 패널 내부에 있을 경우 0부터 1까지의 값을 갖습니다
+       * 패널의 margin 영역에 있을 경우 0보다 작거나 1보다 큰 값을 반환할 수 있습니다
+       */
+
+
+      __proto.getProgressInPanel = function (panel) {
+        var panelRange = panel.range;
+        return (this._position - panelRange.min) / (panelRange.max - panelRange.min);
       };
+      /**
+       * Return {@link AnchorPoint} that includes given position
+       * If there's no {@link AnchorPoint} that includes the given position, return `null` instead
+       * @ko 주어진 좌표를 포함하는 {@link AnchorPoint}를 반환합니다
+       * 주어진 좌표를 포함하는 {@link AnchorPoint}가 없을 경우 `null`을 반환합니다
+       * @param {number} position A position to check<ko>확인할 좌표</ko>
+       * @return {AnchorPoint | null} The {@link AnchorPoint} that includes the given position<ko>해당 좌표를 포함하는 {@link AnchorPoint}</ko>
+       */
+
 
       __proto.findAnchorIncludePosition = function (position) {
-        if (!this._circularEnabled) return _super.prototype.findAnchorIncludePosition.call(this, position);
-        var range = this._range;
+        return this._mode.findAnchorIncludePosition(position);
+      };
+      /**
+       * Return {@link AnchorPoint} nearest to given position
+       * If there're no {@link AnchorPoint}s, return `null` instead
+       * @ko 해당 좌표에서 가장 가까운 {@link AnchorPoint}를 반환합니다
+       * {@link AnchorPoint}가 하나도 없을 경우 `null`을 반환합니다
+       * @param {number} position A position to check<ko>확인할 좌표</ko>
+       * @return {AnchorPoint | null} The {@link AnchorPoint} nearest to the given position<ko>해당 좌표에 가장 인접한 {@link AnchorPoint}</ko>
+       */
+
+
+      __proto.findNearestAnchor = function (position) {
         var anchors = this._anchors;
-        var rangeDiff = this.rangeDiff;
-        var anchorCount = anchors.length;
-        var positionInRange = circulatePosition(position, range.min, range.max);
+        if (anchors.length <= 0) return null;
+        var prevDist = Infinity;
 
-        var anchorInRange = _super.prototype.findAnchorIncludePosition.call(this, positionInRange);
+        for (var anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
+          var anchor = anchors[anchorIdx];
+          var dist = Math.abs(anchor.position - position);
 
-        if (anchorCount > 0 && (position === range.min || position === range.max)) {
-          var possibleAnchors = [anchorInRange, new AnchorPoint({
-            index: 0,
-            position: anchors[0].position + rangeDiff,
-            panel: anchors[0].panel
-          }), new AnchorPoint({
-            index: anchorCount - 1,
-            position: anchors[anchorCount - 1].position - rangeDiff,
-            panel: anchors[anchorCount - 1].panel
-          })].filter(function (anchor) {
-            return !!anchor;
-          });
-          anchorInRange = possibleAnchors.reduce(function (nearest, anchor) {
-            if (!nearest) return anchor;
-            return Math.abs(nearest.position - position) < Math.abs(anchor.position - position) ? nearest : anchor;
-          }, null);
-        }
+          if (dist > prevDist) {
+            // Return previous anchor
+            return anchors[anchorIdx - 1];
+          }
 
-        if (!anchorInRange) return null;
+          prevDist = dist;
+        } // Return last anchor
 
-        if (position < range.min) {
-          var loopCount = -Math.floor((range.min - position) / rangeDiff) - 1;
-          return new AnchorPoint({
-            index: anchorInRange.index,
-            position: anchorInRange.position + rangeDiff * loopCount,
-            panel: anchorInRange.panel
-          });
-        } else if (position > range.max) {
-          var loopCount = Math.floor((position - range.max) / rangeDiff) + 1;
-          return new AnchorPoint({
-            index: anchorInRange.index,
-            position: anchorInRange.position + rangeDiff * loopCount,
-            panel: anchorInRange.panel
-          });
-        }
 
-        return anchorInRange;
+        return anchors[anchors.length - 1];
       };
+      /**
+       * Return {@link AnchorPoint} that matches {@link Flicking#currentPanel}
+       * @ko 현재 {@link Flicking#currentPanel}에 해당하는 {@link AnchorPoint}를 반환합니다
+       * @return {AnchorPoint | null}
+       */
 
-      __proto.clampToReachablePosition = function (position) {
-        // Basically all position is reachable for circular camera
-        return this._circularEnabled ? position : _super.prototype.clampToReachablePosition.call(this, position);
-      };
 
-      __proto.canReach = function (panel) {
-        if (panel.removed) return false;
-        return this._circularEnabled // Always reachable on circular mode
-        ? true : _super.prototype.canReach.call(this, panel);
+      __proto.findActiveAnchor = function () {
+        var flicking = getFlickingAttached(this._flicking);
+        var activeIndex = flicking.control.activeIndex;
+        return find$1(this._anchors, function (anchor) {
+          return anchor.panel.index === activeIndex;
+        });
       };
+      /**
+       * Clamp the given position between camera's range
+       * @ko 주어진 좌표를 Camera가 도달 가능한 범위 사이의 값으로 만듭니다
+       * @param {number} position A position to clamp<ko>범위를 제한할 좌표</ko>
+       * @return {number} A clamped position<ko>범위 제한된 좌표</ko>
+       */
 
-      __proto.canSee = function (panel) {
-        var range = this._range;
-        var rangeDiff = this.rangeDiff;
-        var visibleRange = this.visibleRange;
 
-        var visibleInCurrentRange = _super.prototype.canSee.call(this, panel);
+      __proto.clampToReachablePosition = function (position) {
+        return this._mode.clampToReachablePosition(position);
+      };
+      /**
+       * Check whether the given panel is inside of the Camera's range
+       * @ko 해당 {@link Panel}이 Camera가 도달 가능한 범위 내에 있는지를 반환합니다
+       * @param panel An instance of {@link Panel} to check<ko>확인할 {@link Panel}의 인스턴스</ko>
+       * @return {boolean} Whether the panel's inside Camera's range<ko>도달 가능한 범위 내에 해당 패널이 존재하는지 여부</ko>
+       */
 
-        if (!this._circularEnabled) {
-          return visibleInCurrentRange;
-        } // Check looped visible area for circular case
 
+      __proto.canReach = function (panel) {
+        return this._mode.canReach(panel);
+      };
+      /**
+       * Check whether the given panel element is visible at the current position
+       * @ko 현재 좌표에서 해당 패널 엘리먼트를 볼 수 있는지 여부를 반환합니다
+       * @param panel An instance of {@link Panel} to check<ko>확인할 {@link Panel}의 인스턴스</ko>
+       * @return Whether the panel element is visible at the current position<ko>현재 위치에서 해당 패널 엘리먼트가 보이는지 여부</ko>
+       */
 
-        if (visibleRange.min < range.min) {
-          return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff);
-        } else if (visibleRange.max > range.max) {
-          return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff);
-        }
 
-        return visibleInCurrentRange;
+      __proto.canSee = function (panel) {
+        return this._mode.canSee(panel);
       };
       /**
        * Update {@link Camera#range range} of Camera
        * @ko Camera의 {@link Camera#range range}를 업데이트합니다
+       * @method
+       * @abstract
+       * @memberof Camera
+       * @instance
+       * @name updateRange
        * @chainable
        * @throws {FlickingError}
        * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
@@ -10981,287 +11117,269 @@ version: 4.4.2
         var renderer = flicking.renderer;
         var panels = renderer.panels;
 
-        if (panels.length <= 0) {
-          this._resetInternalValues();
-
-          return this;
-        }
+        this._updateMode();
 
-        var firstPanel = panels[0];
-        var lastPanel = panels[panels.length - 1];
-        var firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;
-        var lastPanelNext = lastPanel.range.max + lastPanel.margin.next;
-        var visibleSize = this.size;
-        var panelSizeSum = lastPanelNext - firstPanelPrev;
-        var canSetCircularMode = panels.every(function (panel) {
-          return panelSizeSum - panel.size >= visibleSize;
-        });
-        this._circularEnabled = canSetCircularMode;
+        this._range = this._mode.getRange();
 
-        if (canSetCircularMode) {
-          this._range = {
-            min: firstPanelPrev,
-            max: lastPanelNext
-          };
+        if (this._circularEnabled) {
           panels.forEach(function (panel) {
             return panel.updateCircularToggleDirection();
           });
-        } else {
-          this._range = {
-            min: firstPanel.position,
-            max: lastPanel.position
-          };
         }
 
-        this.updateOffset();
         return this;
       };
+      /**
+       * Update Camera's {@link Camera#alignPosition alignPosition}
+       * @ko Camera의 {@link Camera#alignPosition alignPosition}을 업데이트합니다
+       * @chainable
+       * @return {this}
+       */
+
+
+      __proto.updateAlignPos = function () {
+        var align = this._align;
+        var alignVal = typeof align === "object" ? align.camera : align;
+        this._alignPos = parseAlign$1(alignVal, this.size);
+        return this;
+      };
+      /**
+       * Update Camera's {@link Camera#anchorPoints anchorPoints}
+       * @ko Camera의 {@link Camera#anchorPoints anchorPoints}를 업데이트합니다
+       * @throws {FlickingError}
+       * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
+       * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
+       * @chainable
+       * @return {this}
+       */
+
+
+      __proto.updateAnchors = function () {
+        this._anchors = this._mode.getAnchors();
+        return this;
+      };
+      /**
+       * Update Viewport's height to active panel's height
+       * @ko 현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
+       * @throws {FlickingError}
+       * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
+       * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
+       * @chainable
+       * @return {this}
+       */
 
-      __proto.updateOffset = function () {
-        this._updateCircularOffset();
 
-        return _super.prototype.updateOffset.call(this);
+      __proto.updateAdaptiveHeight = function () {
+        var flicking = getFlickingAttached(this._flicking);
+        var activePanel = flicking.control.activePanel;
+        if (!flicking.horizontal || !flicking.adaptive || !activePanel) return;
+        flicking.viewport.setSize({
+          height: activePanel.height
+        });
       };
+      /**
+       * Update current offset of the camera
+       * @ko 현재 카메라의 오프셋을 업데이트합니다
+       * @chainable
+       * @return {this}
+       */
 
-      __proto.lookAt = function (pos) {
-        var _this = this;
 
+      __proto.updateOffset = function () {
         var flicking = getFlickingAttached(this._flicking);
-        var prevPos = this._position;
-        if (pos === prevPos) return _super.prototype.lookAt.call(this, pos);
-        var panels = flicking.renderer.panels;
-        var toggled = panels.map(function (panel) {
-          return panel.toggle(prevPos, pos);
+        var position = this._position;
+        var unRenderedPanels = flicking.panels.filter(function (panel) {
+          return !panel.rendered;
         });
-        this._position = pos;
+        this._offset = unRenderedPanels.filter(function (panel) {
+          return panel.position + panel.offset < position;
+        }).reduce(function (offset, panel) {
+          return offset + panel.sizeIncludingMargin;
+        }, 0);
+        this._circularOffset = this._mode.getCircularOffset();
+        this.applyTransform();
+        return this;
+      };
+      /**
+       * Reset the history of {@link Flicking#event:needPanel needPanel} events so it can be triggered again
+       * @ko 발생한 {@link Flicking#event:needPanel needPanel} 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다
+       * @chainable
+       * @return {this}
+       */
 
-        _super.prototype.lookAt.call(this, pos);
 
-        if (toggled.some(function (isToggled) {
-          return isToggled;
-        })) {
-          void flicking.renderer.render().then(function () {
-            _this.updateOffset();
-          });
-        }
+      __proto.resetNeedPanelHistory = function () {
+        this._needPanelTriggered = {
+          prev: false,
+          next: false
+        };
+        return this;
       };
+      /**
+       * Apply "transform" style with the current position to camera element
+       * @ko 현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.
+       * @return {this}
+       */
+
 
       __proto.applyTransform = function () {
         var el = this._el;
         var flicking = getFlickingAttached(this._flicking);
+        var renderer = flicking.renderer;
+        if (renderer.rendering) return this;
         var actualPosition = this._position - this._alignPos - this._offset + this._circularOffset;
         el.style[this._transform] = flicking.horizontal ? "translate(" + -actualPosition + "px)" : "translate(0, " + -actualPosition + "px)";
         return this;
       };
 
       __proto._resetInternalValues = function () {
-        _super.prototype._resetInternalValues.call(this);
-
+        this._position = 0;
+        this._alignPos = 0;
+        this._offset = 0;
         this._circularOffset = 0;
         this._circularEnabled = false;
+        this._range = {
+          min: 0,
+          max: 0
+        };
+        this._visiblePanels = [];
+        this._anchors = [];
+        this._needPanelTriggered = {
+          prev: false,
+          next: false
+        };
       };
 
-      __proto._calcPanelAreaSum = function (panels) {
-        return panels.reduce(function (sum, panel) {
-          return sum + panel.sizeIncludingMargin;
-        }, 0);
-      };
-
-      __proto._updateCircularOffset = function () {
-        if (!this._circularEnabled) {
-          this._circularOffset = 0;
-          return;
-        }
+      __proto._refreshVisiblePanels = function () {
+        var _this = this;
 
         var flicking = getFlickingAttached(this._flicking);
-        var toggled = flicking.panels.filter(function (panel) {
-          return panel.toggled;
+        var panels = flicking.renderer.panels;
+        var newVisiblePanels = panels.filter(function (panel) {
+          return _this.canSee(panel);
         });
-        var toggledPrev = toggled.filter(function (panel) {
-          return panel.toggleDirection === DIRECTION.PREV;
+        var prevVisiblePanels = this._visiblePanels;
+        this._visiblePanels = newVisiblePanels;
+        var added = newVisiblePanels.filter(function (panel) {
+          return !includes(prevVisiblePanels, panel);
         });
-        var toggledNext = toggled.filter(function (panel) {
-          return panel.toggleDirection === DIRECTION.NEXT;
+        var removed = prevVisiblePanels.filter(function (panel) {
+          return !includes(newVisiblePanels, panel);
         });
-        this._circularOffset = this._calcPanelAreaSum(toggledPrev) - this._calcPanelAreaSum(toggledNext);
-      };
-
-      return CircularCamera;
-    }(Camera$1);
-
-    /**
-     * A {@link Camera} that set range not to go out of the first/last panel, so it won't show empty spaces before/after the first/last panel
-     * @ko 첫번째와 마지막 패널 밖으로 넘어가지 못하도록 범위를 설정하여, 첫번째/마지막 패널 전/후의 빈 공간을 보이지 않도록 하는 종류의 {@link Camera}
-     */
-
-    var BoundCamera =
-    /*#__PURE__*/
-    function (_super) {
-      __extends$2(BoundCamera, _super);
-
-      function BoundCamera() {
-        return _super !== null && _super.apply(this, arguments) || this;
-      }
-      /**
-       * Update {@link Camera#range range} of Camera
-       * @ko Camera의 {@link Camera#range range}를 업데이트합니다
-       * @chainable
-       * @throws {FlickingError}
-       * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
-       * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
-       * @return {this}
-       */
-
-
-      var __proto = BoundCamera.prototype;
-
-      __proto.updateRange = function () {
-        var flicking = getFlickingAttached(this._flicking);
-        var renderer = flicking.renderer;
-        var alignPos = this._alignPos;
-        var firstPanel = renderer.getPanel(0);
-        var lastPanel = renderer.getPanel(renderer.panelCount - 1);
-
-        if (!firstPanel || !lastPanel) {
-          this._range = {
-            min: 0,
-            max: 0
-          };
-          return this;
-        }
-
-        var viewportSize = this.size;
-        var firstPanelPrev = firstPanel.range.min;
-        var lastPanelNext = lastPanel.range.max;
-        var panelAreaSize = lastPanelNext - firstPanelPrev;
-        var isBiggerThanViewport = viewportSize < panelAreaSize;
-        var firstPos = firstPanelPrev + alignPos;
-        var lastPos = lastPanelNext - viewportSize + alignPos;
 
-        if (isBiggerThanViewport) {
-          this._range = {
-            min: firstPos,
-            max: lastPos
-          };
-        } else {
-          var align = this._align;
-          var alignVal = typeof align === "object" ? align.camera : align;
-          var pos = firstPos + parseAlign$1(alignVal, lastPos - firstPos);
-          this._range = {
-            min: pos,
-            max: pos
-          };
+        if (added.length > 0 || removed.length > 0) {
+          void flicking.renderer.render().then(function () {
+            flicking.trigger(new ComponentEvent$1(EVENTS.VISIBLE_CHANGE, {
+              added: added,
+              removed: removed,
+              visiblePanels: newVisiblePanels
+            }));
+          });
         }
-
-        return this;
       };
 
-      __proto.updateAnchors = function () {
-        var _this = this;
-
+      __proto._checkNeedPanel = function () {
+        var needPanelTriggered = this._needPanelTriggered;
+        if (needPanelTriggered.prev && needPanelTriggered.next) return;
         var flicking = getFlickingAttached(this._flicking);
         var panels = flicking.renderer.panels;
 
         if (panels.length <= 0) {
-          this._anchors = [];
-          return this;
-        }
-
-        var range = this._range;
-        var reachablePanels = panels.filter(function (panel) {
-          return _this.canReach(panel);
-        });
-
-        if (reachablePanels.length > 0) {
-          var shouldPrependBoundAnchor = reachablePanels[0].position !== range.min;
-          var shouldAppendBoundAnchor = reachablePanels[reachablePanels.length - 1].position !== range.max;
-          var indexOffset_1 = shouldPrependBoundAnchor ? 1 : 0;
-          var newAnchors = reachablePanels.map(function (panel, idx) {
-            return new AnchorPoint({
-              index: idx + indexOffset_1,
-              position: panel.position,
-              panel: panel
-            });
-          });
-
-          if (shouldPrependBoundAnchor) {
-            newAnchors.splice(0, 0, new AnchorPoint({
-              index: 0,
-              position: range.min,
-              panel: panels[reachablePanels[0].index - 1]
+          if (!needPanelTriggered.prev) {
+            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
+              direction: DIRECTION.PREV
             }));
+            needPanelTriggered.prev = true;
           }
 
-          if (shouldAppendBoundAnchor) {
-            newAnchors.push(new AnchorPoint({
-              index: newAnchors.length,
-              position: range.max,
-              panel: panels[reachablePanels[reachablePanels.length - 1].index + 1]
+          if (!needPanelTriggered.next) {
+            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
+              direction: DIRECTION.NEXT
             }));
+            needPanelTriggered.next = true;
           }
 
-          this._anchors = newAnchors;
-        } else if (range.min !== range.max) {
-          // There're more than 2 panels
-          var nearestPanelAtMin = this._findNearestPanel(range.min, panels);
-
-          var panelAtMin = nearestPanelAtMin.index === panels.length - 1 ? nearestPanelAtMin.prev() : nearestPanelAtMin;
-          var panelAtMax = panelAtMin.next();
-          this._anchors = [new AnchorPoint({
-            index: 0,
-            position: range.min,
-            panel: panelAtMin
-          }), new AnchorPoint({
-            index: 1,
-            position: range.max,
-            panel: panelAtMax
-          })];
-        } else {
-          this._anchors = [new AnchorPoint({
-            index: 0,
-            position: range.min,
-            panel: this._findNearestPanel(range.min, panels)
-          })];
+          return;
         }
 
-        return this;
-      };
+        var cameraPosition = this._position;
+        var cameraSize = this.size;
+        var cameraRange = this._range;
+        var needPanelThreshold = flicking.needPanelThreshold;
+        var cameraPrev = cameraPosition - this._alignPos;
+        var cameraNext = cameraPrev + cameraSize;
+        var firstPanel = panels[0];
+        var lastPanel = panels[panels.length - 1];
 
-      __proto.findAnchorIncludePosition = function (position) {
-        var range = this._range;
-        var anchors = this._anchors;
-        if (anchors.length <= 0) return null;
+        if (!needPanelTriggered.prev) {
+          var firstPanelPrev = firstPanel.range.min;
 
-        if (position <= range.min) {
-          return anchors[0];
-        } else if (position >= range.max) {
-          return anchors[anchors.length - 1];
-        } else {
-          return _super.prototype.findAnchorIncludePosition.call(this, position);
+          if (cameraPrev <= firstPanelPrev + needPanelThreshold || cameraPosition <= cameraRange.min + needPanelThreshold) {
+            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
+              direction: DIRECTION.PREV
+            }));
+            needPanelTriggered.prev = true;
+          }
+        }
+
+        if (!needPanelTriggered.next) {
+          var lastPanelNext = lastPanel.range.max;
+
+          if (cameraNext >= lastPanelNext - needPanelThreshold || cameraPosition >= cameraRange.max - needPanelThreshold) {
+            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
+              direction: DIRECTION.NEXT
+            }));
+            needPanelTriggered.next = true;
+          }
         }
       };
 
-      __proto._findNearestPanel = function (pos, panels) {
-        var prevDist = Infinity;
+      __proto._checkReachEnd = function (prevPos, newPos) {
+        var flicking = getFlickingAttached(this._flicking);
+        var range = this._range;
+        var wasBetweenRange = prevPos > range.min && prevPos < range.max;
+        var isBetweenRange = newPos > range.min && newPos < range.max;
+        if (!wasBetweenRange || isBetweenRange) return;
+        var direction = newPos <= range.min ? DIRECTION.PREV : DIRECTION.NEXT;
+        flicking.trigger(new ComponentEvent$1(EVENTS.REACH_EDGE, {
+          direction: direction
+        }));
+      };
 
-        for (var panelIdx = 0; panelIdx < panels.length; panelIdx++) {
-          var panel = panels[panelIdx];
-          var dist = Math.abs(panel.position - pos);
+      __proto._updateMode = function () {
+        var flicking = getFlickingAttached(this._flicking);
 
-          if (dist > prevDist) {
-            // Return previous anchor
-            return panels[panelIdx - 1];
-          }
+        if (flicking.circular) {
+          var circularMode = new CircularCameraMode(flicking);
+          var canSetCircularMode = circularMode.checkAvailability();
 
-          prevDist = dist;
-        } // Return last anchor
+          if (canSetCircularMode) {
+            this._mode = circularMode;
+          } else {
+            var fallbackMode = flicking.circularFallback;
+            this._mode = fallbackMode === CIRCULAR_FALLBACK.BOUND ? new BoundCameraMode(flicking) : new LinearCameraMode(flicking);
+          }
 
+          this._circularEnabled = canSetCircularMode;
+        } else {
+          this._mode = flicking.bound ? new BoundCameraMode(flicking) : new LinearCameraMode(flicking);
+        }
+      };
 
-        return panels[panels.length - 1];
+      __proto._togglePanels = function (prevPos, pos) {
+        if (pos === prevPos) return false;
+        var flicking = getFlickingAttached(this._flicking);
+        var panels = flicking.renderer.panels;
+        var toggled = panels.map(function (panel) {
+          return panel.toggle(prevPos, pos);
+        });
+        return toggled.some(function (isToggled) {
+          return isToggled;
+        });
       };
 
-      return BoundCamera;
-    }(Camera$1);
+      return Camera;
+    }();
 
     /*
      * Copyright (c) 2015 NAVER Corp.
@@ -11271,9 +11389,9 @@ version: 4.4.2
     var Camera = {
         __proto__: null,
         Camera: Camera$1,
-        LinearCamera: LinearCamera,
-        CircularCamera: CircularCamera,
-        BoundCamera: BoundCamera
+        LinearCameraMode: LinearCameraMode,
+        CircularCameraMode: CircularCameraMode,
+        BoundCameraMode: BoundCameraMode
     };
 
     /*
@@ -12301,7 +12419,8 @@ version: 4.4.2
             align = _b === void 0 ? ALIGN.CENTER : _b,
             strategy = _a.strategy;
         this._flicking = null;
-        this._panels = []; // Bind options
+        this._panels = [];
+        this._rendering = false; // Bind options
 
         this._align = align;
         this._strategy = strategy;
@@ -12324,6 +12443,20 @@ version: 4.4.2
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "rendering", {
+        /**
+         * A boolean value indicating whether rendering is in progress
+         * @ko 현재 렌더링이 시작되어 끝나기 전까지의 상태인지의 여부
+         * @type {boolean}
+         * @readonly
+         * @internal
+         */
+        get: function () {
+          return this._rendering;
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "panelCount", {
         /**
          * Count of panels
@@ -12455,6 +12588,25 @@ version: 4.4.2
 
 
       __proto.batchInsert = function () {
+        var items = [];
+
+        for (var _i = 0; _i < arguments.length; _i++) {
+          items[_i] = arguments[_i];
+        }
+
+        var allPanelsInserted = this.batchInsertDefer.apply(this, __spread$1(items));
+        if (allPanelsInserted.length <= 0) return [];
+        this.updateAfterPanelChange(allPanelsInserted, []);
+        return allPanelsInserted;
+      };
+      /**
+       * Defers update
+       * camera position & others will be updated after calling updateAfterPanelChange
+       * @internal
+       */
+
+
+      __proto.batchInsertDefer = function () {
         var _this = this;
 
         var items = [];
@@ -12465,7 +12617,6 @@ version: 4.4.2
 
         var panels = this._panels;
         var flicking = getFlickingAttached(this._flicking);
-        var control = flicking.control;
         var prevFirstPanel = panels[0];
         var align = parsePanelAlign(this._align);
         var allPanelsInserted = items.reduce(function (addedPanels, item) {
@@ -12480,7 +12631,7 @@ version: 4.4.2
               flicking: flicking
             });
           });
-          panels.splice.apply(panels, __spreadArray([insertingIdx, 0], __read$1(panelsInserted)));
+          panels.splice.apply(panels, __spread$1([insertingIdx, 0], panelsInserted));
 
           if (item.hasDOMInElements) {
             // Insert the actual elements as camera element's children
@@ -12503,29 +12654,8 @@ version: 4.4.2
             panel.increaseIndex(panelsInserted.length);
             panel.updatePosition();
           });
-          return __spreadArray(__spreadArray([], __read$1(addedPanels), false), __read$1(panelsInserted));
+          return __spread$1(addedPanels, panelsInserted);
         }, []);
-        if (allPanelsInserted.length <= 0) return []; // Update camera & control
-
-        this._updateCameraAndControl();
-
-        void this.render(); // Move to the first panel added if no panels existed
-        // FIXME: fix for animating case
-
-        if (allPanelsInserted.length > 0 && !control.animating) {
-          void control.moveToPanel(control.activePanel || allPanelsInserted[0], {
-            duration: 0
-          }).catch(function () {
-            return void 0;
-          });
-        }
-
-        flicking.camera.updateOffset();
-        flicking.trigger(new ComponentEvent$1(EVENTS.PANEL_CHANGE, {
-          added: allPanelsInserted,
-          removed: []
-        }));
-        this.checkPanelContentsReady(allPanelsInserted);
         return allPanelsInserted;
       };
       /**
@@ -12542,6 +12672,25 @@ version: 4.4.2
 
 
       __proto.batchRemove = function () {
+        var items = [];
+
+        for (var _i = 0; _i < arguments.length; _i++) {
+          items[_i] = arguments[_i];
+        }
+
+        var allPanelsRemoved = this.batchRemoveDefer.apply(this, __spread$1(items));
+        if (allPanelsRemoved.length <= 0) return [];
+        this.updateAfterPanelChange([], allPanelsRemoved);
+        return allPanelsRemoved;
+      };
+      /**
+       * Defers update
+       * camera position & others will be updated after calling updateAfterPanelChange
+       * @internal
+       */
+
+
+      __proto.batchRemoveDefer = function () {
         var _this = this;
 
         var items = [];
@@ -12552,10 +12701,8 @@ version: 4.4.2
 
         var panels = this._panels;
         var flicking = getFlickingAttached(this._flicking);
-        var camera = flicking.camera,
-            control = flicking.control;
+        var control = flicking.control;
         var activePanel = control.activePanel;
-        var activeIndex = control.activeIndex;
         var allPanelsRemoved = items.reduce(function (removed, item) {
           var index = item.index,
               deleteCount = item.deleteCount;
@@ -12582,34 +12729,62 @@ version: 4.4.2
             control.resetActive();
           }
 
-          return __spreadArray(__spreadArray([], __read$1(removed), false), __read$1(panelsRemoved));
-        }, []); // Update camera & control
+          return __spread$1(removed, panelsRemoved);
+        }, []);
+        return allPanelsRemoved;
+      };
+      /**
+       * @internal
+       */
+
+
+      __proto.updateAfterPanelChange = function (panelsAdded, panelsRemoved) {
+        var _a;
+
+        var flicking = getFlickingAttached(this._flicking);
+        var camera = flicking.camera,
+            control = flicking.control;
+        var panels = this._panels;
+        var activePanel = control.activePanel; // Update camera & control
 
         this._updateCameraAndControl();
 
-        void this.render(); // FIXME: fix for animating case
+        void this.render();
+
+        if (!activePanel || activePanel.removed) {
+          if (panels.length <= 0) {
+            // All panels removed
+            camera.lookAt(0);
+          } else {
+            var targetIndex = (_a = activePanel === null || activePanel === void 0 ? void 0 : activePanel.index) !== null && _a !== void 0 ? _a : 0;
 
-        if (allPanelsRemoved.length > 0 && !control.animating) {
-          var targetPanel = includes(allPanelsRemoved, activePanel) ? panels[activeIndex] || panels[panels.length - 1] : activePanel;
+            if (targetIndex > panels.length - 1) {
+              targetIndex = panels.length - 1;
+            }
 
-          if (targetPanel) {
-            void control.moveToPanel(targetPanel, {
+            void control.moveToPanel(panels[targetIndex], {
               duration: 0
             }).catch(function () {
               return void 0;
             });
-          } else {
-            // All panels removed
-            camera.lookAt(0);
           }
+        } else {
+          void control.moveToPanel(control.activePanel, {
+            duration: 0
+          }).catch(function () {
+            return void 0;
+          });
         }
 
         flicking.camera.updateOffset();
-        flicking.trigger(new ComponentEvent$1(EVENTS.PANEL_CHANGE, {
-          added: [],
-          removed: allPanelsRemoved
-        }));
-        return allPanelsRemoved;
+
+        if (panelsAdded.length > 0 || panelsRemoved.length > 0) {
+          flicking.trigger(new ComponentEvent$1(EVENTS.PANEL_CHANGE, {
+            added: panelsAdded,
+            removed: panelsRemoved
+          }));
+          this.checkPanelContentsReady(__spread$1(panelsAdded, panelsRemoved));
+        }
       };
       /**
        * @internal
@@ -12654,6 +12829,7 @@ version: 4.4.2
           });
           if (!flicking.initialized) return;
           camera.updateRange();
+          camera.updateOffset();
           camera.updateAnchors();
 
           if (control.animating) ; else {
@@ -12687,6 +12863,7 @@ version: 4.4.2
         var camera = flicking.camera,
             control = flicking.control;
         camera.updateRange();
+        camera.updateOffset();
         camera.updateAnchors();
         camera.resetNeedPanelHistory();
         control.updateInput();
@@ -13581,7 +13758,7 @@ version: 4.4.2
         var notToggled = renderedPanels.filter(function (panel) {
           return !panel.toggled;
         });
-        return __spreadArray(__spreadArray(__spreadArray([], __read$1(toggledPrev), false), __read$1(notToggled), false), __read$1(toggledNext)).map(function (panel) {
+        return __spread$1(toggledPrev, notToggled, toggledNext).map(function (panel) {
           return panel.index;
         });
       };
@@ -13791,7 +13968,7 @@ version: 4.4.2
       __proto.getRenderingIndexesByOrder = function (flicking) {
         var virtualManager = flicking.virtual;
 
-        var visiblePanels = __spreadArray([], __read$1(flicking.visiblePanels)).filter(function (panel) {
+        var visiblePanels = __spread$1(flicking.visiblePanels).filter(function (panel) {
           return panel.rendered;
         }).sort(function (panel1, panel2) {
           return panel1.position + panel1.offset - (panel2.position + panel2.offset);
@@ -13812,7 +13989,7 @@ version: 4.4.2
         }).map(function (el) {
           return el.idx;
         });
-        return __spreadArray(__spreadArray([], __read$1(visibleIndexes), false), __read$1(invisibleIndexes));
+        return __spread$1(visibleIndexes, invisibleIndexes);
       };
 
       __proto.getRenderingElementsByOrder = function (flicking) {
@@ -13935,58 +14112,64 @@ version: 4.4.2
             horizontal = _e === void 0 ? true : _e,
             _f = _b.circular,
             circular = _f === void 0 ? false : _f,
-            _g = _b.bound,
-            bound = _g === void 0 ? false : _g,
-            _h = _b.adaptive,
-            adaptive = _h === void 0 ? false : _h,
-            _j = _b.panelsPerView,
-            panelsPerView = _j === void 0 ? -1 : _j,
-            _k = _b.noPanelStyleOverride,
-            noPanelStyleOverride = _k === void 0 ? false : _k,
-            _l = _b.resizeOnContentsReady,
-            resizeOnContentsReady = _l === void 0 ? false : _l,
-            _m = _b.needPanelThreshold,
-            needPanelThreshold = _m === void 0 ? 0 : _m,
-            _o = _b.preventEventsBeforeInit,
-            preventEventsBeforeInit = _o === void 0 ? true : _o,
-            _p = _b.deceleration,
-            deceleration = _p === void 0 ? 0.0075 : _p,
-            _q = _b.duration,
-            duration = _q === void 0 ? 500 : _q,
-            _r = _b.easing,
-            easing = _r === void 0 ? function (x) {
+            _g = _b.circularFallback,
+            circularFallback = _g === void 0 ? CIRCULAR_FALLBACK.LINEAR : _g,
+            _h = _b.bound,
+            bound = _h === void 0 ? false : _h,
+            _j = _b.adaptive,
+            adaptive = _j === void 0 ? false : _j,
+            _k = _b.panelsPerView,
+            panelsPerView = _k === void 0 ? -1 : _k,
+            _l = _b.noPanelStyleOverride,
+            noPanelStyleOverride = _l === void 0 ? false : _l,
+            _m = _b.resizeOnContentsReady,
+            resizeOnContentsReady = _m === void 0 ? false : _m,
+            _o = _b.needPanelThreshold,
+            needPanelThreshold = _o === void 0 ? 0 : _o,
+            _p = _b.preventEventsBeforeInit,
+            preventEventsBeforeInit = _p === void 0 ? true : _p,
+            _q = _b.deceleration,
+            deceleration = _q === void 0 ? 0.0075 : _q,
+            _r = _b.duration,
+            duration = _r === void 0 ? 500 : _r,
+            _s = _b.easing,
+            easing = _s === void 0 ? function (x) {
           return 1 - Math.pow(1 - x, 3);
-        } : _r,
-            _s = _b.inputType,
-            inputType = _s === void 0 ? ["mouse", "touch"] : _s,
-            _t = _b.moveType,
-            moveType = _t === void 0 ? "snap" : _t,
-            _u = _b.threshold,
-            threshold = _u === void 0 ? 40 : _u,
-            _v = _b.interruptable,
-            interruptable = _v === void 0 ? true : _v,
-            _w = _b.bounce,
-            bounce = _w === void 0 ? "20%" : _w,
-            _x = _b.iOSEdgeSwipeThreshold,
-            iOSEdgeSwipeThreshold = _x === void 0 ? 30 : _x,
-            _y = _b.preventClickOnDrag,
-            preventClickOnDrag = _y === void 0 ? true : _y,
-            _z = _b.disableOnInit,
-            disableOnInit = _z === void 0 ? false : _z,
-            _0 = _b.renderOnlyVisible,
-            renderOnlyVisible = _0 === void 0 ? false : _0,
-            _1 = _b.virtual,
-            virtual = _1 === void 0 ? null : _1,
-            _2 = _b.autoInit,
-            autoInit = _2 === void 0 ? true : _2,
-            _3 = _b.autoResize,
-            autoResize = _3 === void 0 ? true : _3,
-            _4 = _b.useResizeObserver,
-            useResizeObserver = _4 === void 0 ? true : _4,
-            _5 = _b.externalRenderer,
-            externalRenderer = _5 === void 0 ? null : _5,
-            _6 = _b.renderExternal,
-            renderExternal = _6 === void 0 ? null : _6;
+        } : _s,
+            _t = _b.inputType,
+            inputType = _t === void 0 ? ["mouse", "touch"] : _t,
+            _u = _b.moveType,
+            moveType = _u === void 0 ? "snap" : _u,
+            _v = _b.threshold,
+            threshold = _v === void 0 ? 40 : _v,
+            _w = _b.interruptable,
+            interruptable = _w === void 0 ? true : _w,
+            _x = _b.bounce,
+            bounce = _x === void 0 ? "20%" : _x,
+            _y = _b.iOSEdgeSwipeThreshold,
+            iOSEdgeSwipeThreshold = _y === void 0 ? 30 : _y,
+            _z = _b.preventClickOnDrag,
+            preventClickOnDrag = _z === void 0 ? true : _z,
+            _0 = _b.disableOnInit,
+            disableOnInit = _0 === void 0 ? false : _0,
+            _1 = _b.renderOnlyVisible,
+            renderOnlyVisible = _1 === void 0 ? false : _1,
+            _2 = _b.virtual,
+            virtual = _2 === void 0 ? null : _2,
+            _3 = _b.autoInit,
+            autoInit = _3 === void 0 ? true : _3,
+            _4 = _b.autoResize,
+            autoResize = _4 === void 0 ? true : _4,
+            _5 = _b.useResizeObserver,
+            useResizeObserver = _5 === void 0 ? true : _5,
+            _6 = _b.resizeDebounce,
+            resizeDebounce = _6 === void 0 ? 0 : _6,
+            _7 = _b.maxResizeDebounce,
+            maxResizeDebounce = _7 === void 0 ? 100 : _7,
+            _8 = _b.externalRenderer,
+            externalRenderer = _8 === void 0 ? null : _8,
+            _9 = _b.renderExternal,
+            renderExternal = _9 === void 0 ? null : _9;
 
         var _this = _super.call(this) || this; // Internal states
 
@@ -13998,6 +14181,7 @@ version: 4.4.2
         _this._defaultIndex = defaultIndex;
         _this._horizontal = horizontal;
         _this._circular = circular;
+        _this._circularFallback = circularFallback;
         _this._bound = bound;
         _this._adaptive = adaptive;
         _this._panelsPerView = panelsPerView;
@@ -14021,6 +14205,8 @@ version: 4.4.2
         _this._autoInit = autoInit;
         _this._autoResize = autoResize;
         _this._useResizeObserver = useResizeObserver;
+        _this._resizeDebounce = resizeDebounce;
+        _this._maxResizeDebounce = maxResizeDebounce;
         _this._externalRenderer = externalRenderer;
         _this._renderExternal = renderExternal; // Create core components
 
@@ -14136,7 +14322,7 @@ version: 4.4.2
          * @readonly
          */
         get: function () {
-          return this._camera.controlParams.circular;
+          return this._camera.circularEnabled;
         },
         enumerable: false,
         configurable: true
@@ -14370,6 +14556,24 @@ version: 4.4.2
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "circularFallback", {
+        /**
+         * Set panel control mode for the case when circular cannot be enabled.
+         * "linear" will set the view's range from the top of the first panel to the top of the last panel.
+         * "bound" will prevent the view from going out of the first/last panel, so it won't show empty spaces before/after the first/last panel.
+         * @ko 순환 모드 사용 불가능시 사용할 패널 조작 범위 설정 방식을 변경합니다.
+         * "linear" 사용시 시점이 첫번째 엘리먼트 위에서부터 마지막 엘리먼트 위까지 움직일 수 있도록 설정합니다.
+         * "bound" 사용시 시점이 첫번째 엘리먼트와 마지막 엘리먼트의 끝과 끝 사이에서 움직일 수 있도록 설정합니다.
+         * @see CIRCULAR_FALLBACK
+         * @type {string}
+         * @default "linear"
+         */
+        get: function () {
+          return this._circularFallback;
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "bound", {
         /**
          * Prevent the view(camera element) from going out of the first/last panel, so it won't show empty spaces before/after the first/last panel
@@ -14851,6 +15055,38 @@ version: 4.4.2
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "resizeDebounce", {
+        /**
+         * 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.
+         * This can increase performance by preventing `resize` being called too often.
+         * @ko `autoResize` 설정시에 호출되는 크기 재계산을 주어진 시간(단위: ms)만큼 지연시킵니다.
+         * 지연시키는 도중 크기가 다시 변경되었을 경우, 이전 것을 취소하고 주어진 시간만큼 다시 지연시킵니다.
+         * 이를 통해 `resize`가 너무 많이 호출되는 것을 방지하여 성능을 향상시킬 수 있습니다.
+         * @type {number}
+         * @default 0
+         */
+        get: function () {
+          return this._resizeDebounce;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "maxResizeDebounce", {
+        /**
+         * The maximum time for size recalculation delay when using `resizeDebounce`, in milisecond.
+         * This guarantees that size recalculation is performed at least once every (n)ms.
+         * @ko `resizeDebounce` 사용시에 크기 재계산이 지연되는 최대 시간을 지정합니다. (단위: ms)
+         * 이를 통해, 적어도 (n)ms에 한번은 크기 재계산을 수행하는 것을 보장할 수 있습니다.
+         * @type {number}
+         * @default 100
+         */
+        get: function () {
+          return this._maxResizeDebounce;
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "externalRenderer", {
         /**
          * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
@@ -14886,85 +15122,61 @@ version: 4.4.2
        * @ko Flicking을 초기화하고, 디폴트 인덱스로 이동합니다
        * 이 메소드는 `autoInit` 옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다
        * @fires Flicking#ready
-       * @return {this}
+       * @return {Promise<void>}
        */
 
       __proto.init = function () {
-        return __awaiter(this, void 0, void 0, function () {
-          var camera, renderer, control, virtualManager, originalTrigger, preventEventsBeforeInit;
-
-          var _this = this;
-
-          return __generator(this, function (_a) {
-            switch (_a.label) {
-              case 0:
-                if (this._initialized) return [2
-                /*return*/
-                ];
-                camera = this._camera;
-                renderer = this._renderer;
-                control = this._control;
-                virtualManager = this._virtualManager;
-                originalTrigger = this.trigger;
-                preventEventsBeforeInit = this._preventEventsBeforeInit;
-                camera.init(this);
-                virtualManager.init();
-                renderer.init(this);
-                control.init(this);
-
-                if (preventEventsBeforeInit) {
-                  this.trigger = function () {
-                    return _this;
-                  };
-                }
-
-                return [4
-                /*yield*/
-                , this.resize()];
-
-              case 1:
-                _a.sent(); // Look at initial panel
-
+        var _this = this;
 
-                return [4
-                /*yield*/
-                , this._moveToInitialPanel()];
+        if (this._initialized) return Promise.resolve();
+        var camera = this._camera;
+        var renderer = this._renderer;
+        var control = this._control;
+        var virtualManager = this._virtualManager;
+        var originalTrigger = this.trigger;
+        var preventEventsBeforeInit = this._preventEventsBeforeInit;
+        camera.init();
+        virtualManager.init();
+        renderer.init(this);
+        control.init(this);
+
+        if (preventEventsBeforeInit) {
+          this.trigger = function () {
+            return _this;
+          };
+        }
 
-              case 2:
-                // Look at initial panel
-                _a.sent();
+        this._initialResize(); // Look at initial panel
 
-                if (this._autoResize) {
-                  this._autoResizer.enable();
-                }
 
-                if (this._preventClickOnDrag) {
-                  control.controller.addPreventClickHandler();
-                }
+        this._moveToInitialPanel();
 
-                if (this._disableOnInit) {
-                  this.disableInput();
-                }
+        if (this._autoResize) {
+          this._autoResizer.enable();
+        }
 
-                renderer.checkPanelContentsReady(renderer.panels);
+        if (this._preventClickOnDrag) {
+          control.controller.addPreventClickHandler();
+        }
 
-                this._plugins.forEach(function (plugin) {
-                  return plugin.init(_this);
-                }); // Done initializing & emit ready event
+        if (this._disableOnInit) {
+          this.disableInput();
+        }
 
+        renderer.checkPanelContentsReady(renderer.panels);
+        return renderer.render().then(function () {
+          // Done initializing & emit ready event
+          _this._plugins.forEach(function (plugin) {
+            return plugin.init(_this);
+          });
 
-                this._initialized = true;
+          _this._initialized = true;
 
-                if (preventEventsBeforeInit) {
-                  this.trigger = originalTrigger;
-                }
+          if (preventEventsBeforeInit) {
+            _this.trigger = originalTrigger;
+          }
 
-                this.trigger(new ComponentEvent$1(EVENTS.READY));
-                return [2
-                /*return*/
-                ];
-            }
-          });
+          _this.trigger(new ComponentEvent$1(EVENTS.READY));
         });
       };
       /**
@@ -15330,7 +15542,7 @@ version: 4.4.2
           });
         }
 
-        (_a = this._plugins).push.apply(_a, __spreadArray([], __read$1(plugins)));
+        (_a = this._plugins).push.apply(_a, __spread$1(plugins));
 
         return this;
       };
@@ -15577,22 +15789,14 @@ version: 4.4.2
       };
 
       __proto._createCamera = function () {
-        var cameraOption = {
-          align: this._align
-        };
-
-        if (this._circular) {
-          if (this._bound) {
-            // eslint-disable-next-line no-console
-            console.warn("\"circular\" and \"bound\" option cannot be used together, ignoring bound.");
-          }
-
-          return new CircularCamera(cameraOption);
-        } else if (this._bound) {
-          return new BoundCamera(cameraOption);
-        } else {
-          return new LinearCamera(cameraOption);
+        if (this._circular && this._bound) {
+          // eslint-disable-next-line no-console
+          console.warn("\"circular\" and \"bound\" option cannot be used together, ignoring bound.");
         }
+
+        return new Camera$1(this, {
+          align: this._align
+        });
       };
 
       __proto._createRenderer = function () {
@@ -15626,23 +15830,59 @@ version: 4.4.2
       };
 
       __proto._moveToInitialPanel = function () {
-        return __awaiter(this, void 0, void 0, function () {
-          var renderer, control, initialPanel;
-          return __generator(this, function (_a) {
-            renderer = this._renderer;
-            control = this._control;
-            initialPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
-            if (!initialPanel) return [2
-            /*return*/
-            ];
-            control.setActive(initialPanel, null, false);
-            return [2
-            /*return*/
-            , control.moveToPanel(initialPanel, {
-              duration: 0
-            })];
-          });
-        });
+        var renderer = this._renderer;
+        var control = this._control;
+        var camera = this._camera;
+        var initialPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
+        if (!initialPanel) return;
+        var nearestAnchor = camera.findNearestAnchor(initialPanel.position);
+        control.setActive(initialPanel, null, false);
+
+        if (!nearestAnchor) {
+          throw new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(initialPanel.position), CODE.POSITION_NOT_REACHABLE);
+        }
+
+        var position = initialPanel.position;
+
+        if (!camera.canReach(initialPanel)) {
+          position = nearestAnchor.position;
+        }
+
+        camera.lookAt(position);
+        control.updateInput();
+        camera.updateOffset();
+      };
+
+      __proto._initialResize = function () {
+        var viewport = this._viewport;
+        var renderer = this._renderer;
+        var camera = this._camera;
+        var control = this._control;
+        this.trigger(new ComponentEvent$1(EVENTS.BEFORE_RESIZE, {
+          width: 0,
+          height: 0,
+          element: viewport.element
+        }));
+        viewport.resize();
+        renderer.updatePanelSize();
+        camera.updateAlignPos();
+        camera.updateRange();
+        camera.updateAnchors();
+        camera.updateOffset();
+        control.updateInput();
+        var newWidth = viewport.width;
+        var newHeight = viewport.height;
+        var sizeChanged = newWidth !== 0 || newHeight !== 0;
+        this.trigger(new ComponentEvent$1(EVENTS.AFTER_RESIZE, {
+          width: viewport.width,
+          height: viewport.height,
+          prev: {
+            width: 0,
+            height: 0
+          },
+          sizeChanged: sizeChanged,
+          element: viewport.element
+        }));
       };
       /**
        * Version info string
@@ -15656,7 +15896,7 @@ version: 4.4.2
        */
 
 
-      Flicking.VERSION = "4.4.2";
+      Flicking.VERSION = "4.6.0";
       return Flicking;
     }(Component$1);
 
@@ -15696,7 +15936,7 @@ version: 4.4.2
     var withFlickingMethods = function (prototype, flickingName) {
       [Component$1.prototype, Flicking.prototype].forEach(function (proto) {
         Object.getOwnPropertyNames(proto).filter(function (name) {
-          return !prototype[name] && !name.startsWith("_") && name !== "constructor";
+          return !prototype[name] && name.indexOf("_") !== 0 && name !== "constructor";
         }).forEach(function (name) {
           var descriptor = Object.getOwnPropertyDescriptor(proto, name);
 
@@ -15712,7 +15952,7 @@ version: 4.4.2
                   args[_i] = arguments[_i];
                 }
 
-                return (_a = descriptor.value).call.apply(_a, __spreadArray([this[flickingName]], __read$1(args)));
+                return (_a = descriptor.value).call.apply(_a, __spread$1([this[flickingName]], args));
               }
             });
           } else {
@@ -15722,7 +15962,8 @@ version: 4.4.2
               getterDescriptor.get = function () {
                 var _a;
 
-                return (_a = descriptor.get) === null || _a === void 0 ? void 0 : _a.call(this[flickingName]);
+                var flicking = this[flickingName];
+                return flicking && ((_a = descriptor.get) === null || _a === void 0 ? void 0 : _a.call(flicking));
               };
             }
 
@@ -15736,7 +15977,7 @@ version: 4.4.2
                   args[_i] = arguments[_i];
                 }
 
-                return (_a = descriptor.set) === null || _a === void 0 ? void 0 : _a.call.apply(_a, __spreadArray([this[flickingName]], __read$1(args)));
+                return (_a = descriptor.set) === null || _a === void 0 ? void 0 : _a.call.apply(_a, __spread$1([this[flickingName]], args));
               };
             }
 
@@ -15750,7 +15991,10 @@ version: 4.4.2
       var renderer = flicking.renderer;
       var panels = renderer.panels;
 
-      var prevList = __spreadArray([], __read$1(diffResult.prevList));
+      var prevList = __spread$1(diffResult.prevList);
+
+      var added = [];
+      var removed = [];
 
       if (diffResult.removed.length > 0) {
         var endIdx_1 = -1;
@@ -15761,7 +16005,7 @@ version: 4.4.2
           }
 
           if (prevIdx_1 >= 0 && removedIdx !== prevIdx_1 - 1) {
-            batchRemove(renderer, prevIdx_1, endIdx_1 + 1);
+            removed.push.apply(removed, __spread$1(batchRemove(renderer, prevIdx_1, endIdx_1 + 1)));
             endIdx_1 = removedIdx;
             prevIdx_1 = removedIdx;
           } else {
@@ -15770,39 +16014,34 @@ version: 4.4.2
 
           prevList.splice(removedIdx, 1);
         });
-        batchRemove(renderer, prevIdx_1, endIdx_1 + 1);
+        removed.push.apply(removed, __spread$1(batchRemove(renderer, prevIdx_1, endIdx_1 + 1)));
       }
 
       diffResult.ordered.forEach(function (_a) {
         var _b = __read$1(_a, 2),
-            prevIdx = _b[0],
-            newIdx = _b[1];
-
-        var prevPanel = panels[prevIdx];
-        var indexDiff = newIdx - prevIdx;
-
-        if (indexDiff > 0) {
-          var middlePanels = panels.slice(prevIdx + 1, newIdx + 1);
-          prevPanel.increaseIndex(indexDiff);
-          middlePanels.forEach(function (panel) {
-            return panel.decreaseIndex(1);
-          });
-        } else {
-          var middlePanels = panels.slice(newIdx, prevIdx);
-          prevPanel.decreaseIndex(-indexDiff);
-          middlePanels.forEach(function (panel) {
-            return panel.increaseIndex(1);
-          });
-        } // Update position
+            from = _b[0],
+            to = _b[1];
 
-
-        prevPanel.resize();
+        var prevPanel = panels.splice(from, 1)[0];
+        panels.splice(to, 0, prevPanel);
       });
 
       if (diffResult.ordered.length > 0) {
+        panels.forEach(function (panel, idx) {
+          var indexDiff = idx - panel.index;
+
+          if (indexDiff > 0) {
+            panel.increaseIndex(indexDiff);
+          } else {
+            panel.decreaseIndex(-indexDiff);
+          }
+        });
         panels.sort(function (panel1, panel2) {
           return panel1.index - panel2.index;
         });
+        panels.forEach(function (panel) {
+          panel.updatePosition();
+        });
       }
 
       if (diffResult.added.length > 0) {
@@ -15815,7 +16054,7 @@ version: 4.4.2
           }
 
           if (prevIdx_2 >= 0 && addedIdx !== prevIdx_2 + 1) {
-            batchInsert(renderer, diffResult, addedElements_1, startIdx_1, idx + 1);
+            added.push.apply(added, __spread$1(batchInsert(renderer, diffResult, addedElements_1, startIdx_1, idx + 1)));
             startIdx_1 = -1;
             prevIdx_2 = -1;
           } else {
@@ -15824,24 +16063,26 @@ version: 4.4.2
         });
 
         if (startIdx_1 >= 0) {
-          batchInsert(renderer, diffResult, addedElements_1, startIdx_1);
+          added.push.apply(added, __spread$1(batchInsert(renderer, diffResult, addedElements_1, startIdx_1)));
         }
       }
+
+      renderer.updateAfterPanelChange(added, removed);
     });
 
     var batchInsert = function (renderer, diffResult, addedElements, startIdx, endIdx) {
-      renderer.batchInsert.apply(renderer, __spreadArray([], __read$1(diffResult.added.slice(startIdx, endIdx).map(function (index, elIdx) {
+      return renderer.batchInsertDefer.apply(renderer, __spread$1(diffResult.added.slice(startIdx, endIdx).map(function (index, elIdx) {
         return {
           index: index,
           elements: [addedElements[elIdx]],
           hasDOMInElements: false
         };
-      }))));
+      })));
     };
 
     var batchRemove = function (renderer, startIdx, endIdx) {
       var removed = renderer.panels.slice(startIdx, endIdx);
-      renderer.batchRemove({
+      return renderer.batchRemoveDefer({
         index: startIdx,
         deleteCount: removed.length,
         hasDOMInElements: false
@@ -15861,16 +16102,16 @@ version: 4.4.2
         map[prev] = current;
         return map;
       }, {});
-      return __spreadArray(__spreadArray([], __read$1(flicking.panels.filter(function (panel) {
+      return __spread$1(flicking.panels.filter(function (panel) {
         return !removedPanels[panel.index];
       }) // Sort panels by position
       .sort(function (panel1, panel2) {
         return panel1.position + panel1.offset - (panel2.position + panel2.offset);
       }).map(function (panel) {
         return diffResult.list[maintainedMap[panel.index]];
-      })), false), __read$1(diffResult.added.map(function (idx) {
+      }), diffResult.added.map(function (idx) {
         return diffResult.list[idx];
-      })));
+      }));
     });
 
     var getDefaultCameraTransform = (function (align, horizontal, firstPanelSize) {