@egjs/flicking 4.4.2 → 4.6.0

package/dist/flicking.esm.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
 */
 import Component, { ComponentEvent } from '@egjs/component';
 import Axes, { PanInput } from '@egjs/axes';
@@ -240,10 +240,12 @@ function __read(o, n) {
 
   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() {
+  for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+
+  return ar;
 }
 
 /*
@@ -423,6 +425,18 @@ var CLASS = {
   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 merge = function (target) {
   var sources = [];
@@ -606,7 +620,7 @@ var parseElement = function (element) {
     if (isString(el)) {
       var tempDiv = document.createElement("div");
       tempDiv.innerHTML = el;
-      elements.push.apply(elements, __spreadArray([], __read(toArray(tempDiv.children))));
+      elements.push.apply(elements, __spread(toArray(tempDiv.children)));
 
       while (tempDiv.firstChild) {
         tempDiv.removeChild(tempDiv.firstChild);
@@ -955,6 +969,33 @@ function () {
     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
 
@@ -974,6 +1015,8 @@ function () {
     this._flicking = flicking;
     this._enabled = false;
     this._resizeObserver = null;
+    this._resizeTimer = -1;
+    this._maxResizeDebounceTimer = -1;
   }
 
   var __proto = AutoResizer.prototype;
@@ -2987,9 +3030,8 @@ function (_super) {
 
 
   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;
 
@@ -3195,9 +3237,8 @@ function (_super) {
 
 
   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;
 
@@ -3331,9 +3372,8 @@ function (_super) {
 
 
   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;
 
@@ -3456,6 +3496,21 @@ function (_super) {
     };
     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}를 주어진 좌표로 이동합니다
@@ -3565,932 +3620,1012 @@ function (_super) {
 }(Control);
 
 /**
- * A component that manages actual movement inside the viewport
- * @ko 뷰포트 내에서의 실제 움직임을 담당하는 컴포넌트
+ * A mode of camera
  */
 
-var Camera =
+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(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(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(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(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
-     */
-    get: function () {
-      return this._anchors;
-    },
-    enumerable: false,
-    configurable: true
-  });
-  Object.defineProperty(__proto, "controlParams", {
-    /**
-     * A current parameters of the Camera for updating {@link AxesController}
-     * @ko {@link AxesController}를 업데이트하기 위한 현재 Camera 패러미터들
-     * @type {ControlParams}
-     * @readonly
-     */
-    get: function () {
-      return {
-        range: this._range,
-        position: this._position,
-        circular: false
-      };
-    },
-    enumerable: false,
-    configurable: true
-  });
-  Object.defineProperty(__proto, "atEdge", {
-    /**
-     * A Boolean value indicating whether Camera's over the minimum or maximum position reachable
-     * @ko 현재 카메라가 도달 가능한 범위의 최소 혹은 최대점을 넘어섰는지를 나타냅니다
-     * @type {boolean}
-     * @readonly
-     */
-    get: function () {
-      return this._position <= this._range.min || this._position >= this._range.max;
-    },
-    enumerable: false,
-    configurable: true
-  });
-  Object.defineProperty(__proto, "size", {
-    /**
-     * Return the size of the viewport
-     * @ko 뷰포트 크기를 반환합니다
-     * @type {number}
-     * @readonly
-     */
-    get: function () {
-      var flicking = this._flicking;
-      return flicking ? flicking.horizontal ? flicking.viewport.width : flicking.viewport.height : 0;
-    },
-    enumerable: false,
-    configurable: true
-  });
-  Object.defineProperty(__proto, "progress", {
-    /**
-     * Return the camera's position progress from the first panel to last panel
-     * Range is from 0 to last panel's index
-     * @ko 첫번째 패널로부터 마지막 패널까지의 카메라 위치의 진행도를 반환합니다
-     * 범위는 0부터 마지막 패널의 인덱스까지입니다
-     * @type {number}
-     * @readonly
-     */
-    get: function () {
-      var flicking = this._flicking;
-      var position = this._position + this._offset;
-      var nearestAnchor = this.findNearestAnchor(this._position);
+  __proto.checkAvailability = function () {
+    var flicking = this._flicking;
+    var renderer = flicking.renderer;
+    var panels = renderer.panels;
 
-      if (!flicking || !nearestAnchor) {
-        return NaN;
-      }
+    if (panels.length <= 0) {
+      return false;
+    }
 
-      var nearestPanel = nearestAnchor.panel;
-      var panelPos = nearestPanel.position + nearestPanel.offset;
-      var bounceSize = flicking.control.controller.bounce;
-      var _a = this.range,
-          prevRange = _a.min,
-          nextRange = _a.max;
-      var rangeDiff = this.rangeDiff;
+    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;
+  };
 
-      if (position === panelPos) {
-        return nearestPanel.index;
-      }
+  __proto.getRange = function () {
+    var flicking = this._flicking;
+    var panels = flicking.renderer.panels;
 
-      if (position < panelPos) {
-        var prevPanel = nearestPanel.prev();
-        var prevPosition = prevPanel ? prevPanel.position + prevPanel.offset : prevRange - bounceSize[0]; // Looped
+    if (panels.length <= 0) {
+      return {
+        min: 0,
+        max: 0
+      };
+    }
 
-        if (prevPosition > panelPos) {
-          prevPosition -= rangeDiff;
-        }
+    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
+    };
+  };
 
-        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.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
+      });
+    });
+  };
 
-        if (nextPosition < panelPos) {
-          nextPosition += rangeDiff;
-        }
+  __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);
 
-        return nearestPanel.index + getProgress(position, panelPos, nextPosition);
-      }
-    },
-    enumerable: false,
-    configurable: true
-  });
-  Object.defineProperty(__proto, "align", {
-    // Options Getter
+    var anchorInRange = _super.prototype.findAnchorIncludePosition.call(this, positionInRange);
 
-    /**
-     * 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}
-   */
+    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);
+    }
 
-  __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;
+    if (!anchorInRange) return null;
 
-    this._checkTranslateSupport();
+    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 this;
+    return anchorInRange;
   };
-  /**
-   * Destroy Camera and return to initial state
-   * @ko Camera를 초기 상태로 되돌립니다
-   * @return {void}
-   */
 
+  __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.destroy = function () {
-    this._flicking = null;
+  __proto.clampToReachablePosition = function (position) {
+    // Basically all position is reachable for circular camera
+    return position;
+  };
 
-    this._resetInternalValues();
+  __proto.canReach = function (panel) {
+    if (panel.removed) return false; // Always reachable on circular mode
 
-    return this;
+    return true;
   };
-  /**
-   * 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.canSee = function (panel) {
+    var camera = this._flicking.camera;
+    var range = camera.range;
+    var rangeDiff = camera.rangeDiff;
+    var visibleRange = camera.visibleRange;
 
-  __proto.lookAt = function (pos) {
-    var prevPos = this._position;
-    this._position = pos;
+    var visibleInCurrentRange = _super.prototype.canSee.call(this, panel); // Check looped visible area for circular case
 
-    this._refreshVisiblePanels();
 
-    this._checkNeedPanel();
+    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);
+    }
 
-    this._checkReachEnd(prevPos, pos);
+    return visibleInCurrentRange;
+  };
 
-    this.applyTransform();
+  __proto._calcPanelAreaSum = function (panels) {
+    return panels.reduce(function (sum, panel) {
+      return sum + panel.sizeIncludingMargin;
+    }, 0);
   };
-  /**
-   * 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>
-   */
 
+  return CircularCameraMode;
+}(CameraMode);
 
-  __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>
-   */
+var BoundCameraMode =
+/*#__PURE__*/
+function (_super) {
+  __extends(BoundCameraMode, _super);
 
+  function BoundCameraMode() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
 
-  __proto.getNextAnchor = function (anchor) {
-    return this._anchors[anchor.index + 1] || null;
+  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;
   };
-  /**
-   * 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.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
+      };
+    }
 
-  __proto.getProgressInPanel = function (panel) {
-    var panelRange = panel.range;
-    return (this._position - panelRange.min) / (panelRange.max - panelRange.min);
+    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
+      };
+    }
   };
-  /**
-   * 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.getAnchors = function () {
+    var flicking = this._flicking;
+    var camera = flicking.camera;
+    var panels = flicking.renderer.panels;
 
-  __proto.findAnchorIncludePosition = function (position) {
-    var anchors = this._anchors;
-    var anchorsIncludingPosition = anchors.filter(function (anchor) {
-      return anchor.panel.includePosition(position, true);
+    if (panels.length <= 0) {
+      return [];
+    }
+
+    var range = flicking.camera.range;
+    var reachablePanels = panels.filter(function (panel) {
+      return camera.canReach(panel);
     });
-    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>
-   */
 
+    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
+        });
+      });
 
-  __proto.findNearestAnchor = function (position) {
-    var anchors = this._anchors;
+      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 anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
-      var anchor = anchors[anchorIdx];
-      var dist = Math.abs(anchor.position - position);
+    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 anchors[anchorIdx - 1];
+        return panels[panelIdx - 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(this._anchors, function (anchor) {
-      return anchor.panel.index === activeIndex;
-    });
+    return panels[panels.length - 1];
   };
-  /**
-   * 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>
-   */
 
+  return BoundCameraMode;
+}(CameraMode);
 
-  __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>
-   */
-
+/**
+ * A component that manages actual movement inside the viewport
+ * @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>
-   */
+var Camera =
+/*#__PURE__*/
+function () {
+  /** */
+  function Camera(flicking, _a) {
+    var _this = this;
 
+    var _b = (_a === void 0 ? {} : _a).align,
+        align = _b === void 0 ? ALIGN.CENTER : _b;
 
-  __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.
+    this._checkTranslateSupport = function () {
+      var e_1, _a;
 
-    return panel.isVisibleOnRange(visibleRange.min, visibleRange.max);
-  };
-  /**
-   * Update Camera's {@link Camera#alignPosition alignPosition}
-   * @ko Camera의 {@link Camera#alignPosition alignPosition}을 업데이트합니다
-   * @chainable
-   * @return {this}
-   */
+      var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
+      var supportedStyle = document.documentElement.style;
+      var transformName = "";
 
+      try {
+        for (var transforms_1 = __values(transforms), transforms_1_1 = transforms_1.next(); !transforms_1_1.done; transforms_1_1 = transforms_1.next()) {
+          var prefixedTransform = transforms_1_1.value;
 
-  __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}
-   */
+          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(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;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "controlParams", {
+    /**
+     * A current parameters of the Camera for updating {@link AxesController}
+     * @ko {@link AxesController}를 업데이트하기 위한 현재 Camera 패러미터들
+     * @type {ControlParams}
+     * @readonly
+     */
+    get: function () {
+      return {
+        range: this._range,
+        position: this._position,
+        circular: this._circularEnabled
+      };
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "atEdge", {
+    /**
+     * A Boolean value indicating whether Camera's over the minimum or maximum position reachable
+     * @ko 현재 카메라가 도달 가능한 범위의 최소 혹은 최대점을 넘어섰는지를 나타냅니다
+     * @type {boolean}
+     * @readonly
+     */
+    get: function () {
+      return this._position <= this._range.min || this._position >= this._range.max;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "size", {
+    /**
+     * Return the size of the viewport
+     * @ko 뷰포트 크기를 반환합니다
+     * @type {number}
+     * @readonly
+     */
+    get: function () {
+      var flicking = this._flicking;
+      return flicking ? flicking.horizontal ? flicking.viewport.width : flicking.viewport.height : 0;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "progress", {
+    /**
+     * Return the camera's position progress from the first panel to last panel
+     * Range is from 0 to last panel's index
+     * @ko 첫번째 패널로부터 마지막 패널까지의 카메라 위치의 진행도를 반환합니다
+     * 범위는 0부터 마지막 패널의 인덱스까지입니다
+     * @type {number}
+     * @readonly
+     */
+    get: function () {
+      var flicking = this._flicking;
+      var position = this._position + this._offset;
+      var nearestAnchor = this.findNearestAnchor(this._position);
+
+      if (!flicking || !nearestAnchor) {
+        return NaN;
+      }
+
+      var nearestPanel = nearestAnchor.panel;
+      var panelPos = nearestPanel.position + nearestPanel.offset;
+      var bounceSize = flicking.control.controller.bounce;
+      var _a = this.range,
+          prevRange = _a.min,
+          nextRange = _a.max;
+      var rangeDiff = this.rangeDiff;
+
+      if (position === panelPos) {
+        return nearestPanel.index;
+      }
+
+      if (position < panelPos) {
+        var prevPanel = nearestPanel.prev();
+        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
 
-  __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(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(EVENTS.NEED_PANEL, {
-          direction: DIRECTION.PREV
-        }));
-        needPanelTriggered.prev = true;
-      }
-
-      if (!needPanelTriggered.next) {
-        flicking.trigger(new ComponentEvent(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(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(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(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(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>
    * @return {this}
-   */
-
-
-  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);
 
-/**
- * A {@link Camera} that connects the last panel and the first panel, enabling continuous loop
- * @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera}
- */
+  __proto.lookAt = function (pos) {
+    var _this = this;
 
-var CircularCamera =
-/*#__PURE__*/
-function (_super) {
-  __extends(CircularCamera, _super);
+    var flicking = getFlickingAttached(this._flicking);
+    var prevPos = this._position;
+    this._position = pos;
 
-  function CircularCamera() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
+    var toggled = this._togglePanels(prevPos, pos);
 
-    _this._circularOffset = 0;
-    _this._circularEnabled = false;
-    return _this;
-  }
+    this._refreshVisiblePanels();
+
+    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(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
@@ -4504,287 +4639,269 @@ function (_super) {
     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);
-
-/**
- * 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(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(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(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(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(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(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(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);
+  return Camera;
+}();
 
 /**
  * A component that manages {@link Panel} and its elements
@@ -4804,7 +4921,8 @@ function () {
         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;
@@ -4827,6 +4945,20 @@ function () {
     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
@@ -4958,6 +5090,25 @@ function () {
 
 
   __proto.batchInsert = function () {
+    var items = [];
+
+    for (var _i = 0; _i < arguments.length; _i++) {
+      items[_i] = arguments[_i];
+    }
+
+    var allPanelsInserted = this.batchInsertDefer.apply(this, __spread(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 = [];
@@ -4968,7 +5119,6 @@ function () {
 
     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) {
@@ -4983,7 +5133,7 @@ function () {
           flicking: flicking
         });
       });
-      panels.splice.apply(panels, __spreadArray([insertingIdx, 0], __read(panelsInserted)));
+      panels.splice.apply(panels, __spread([insertingIdx, 0], panelsInserted));
 
       if (item.hasDOMInElements) {
         // Insert the actual elements as camera element's children
@@ -5006,29 +5156,8 @@ function () {
         panel.increaseIndex(panelsInserted.length);
         panel.updatePosition();
       });
-      return __spreadArray(__spreadArray([], __read(addedPanels), false), __read(panelsInserted));
+      return __spread(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(EVENTS.PANEL_CHANGE, {
-      added: allPanelsInserted,
-      removed: []
-    }));
-    this.checkPanelContentsReady(allPanelsInserted);
     return allPanelsInserted;
   };
   /**
@@ -5045,6 +5174,25 @@ function () {
 
 
   __proto.batchRemove = function () {
+    var items = [];
+
+    for (var _i = 0; _i < arguments.length; _i++) {
+      items[_i] = arguments[_i];
+    }
+
+    var allPanelsRemoved = this.batchRemoveDefer.apply(this, __spread(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 = [];
@@ -5055,10 +5203,8 @@ function () {
 
     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;
@@ -5085,34 +5231,62 @@ function () {
         control.resetActive();
       }
 
-      return __spreadArray(__spreadArray([], __read(removed), false), __read(panelsRemoved));
-    }, []); // Update camera & control
+      return __spread(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 (allPanelsRemoved.length > 0 && !control.animating) {
-      var targetPanel = includes(allPanelsRemoved, activePanel) ? panels[activeIndex] || panels[panels.length - 1] : activePanel;
+    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 (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(EVENTS.PANEL_CHANGE, {
-      added: [],
-      removed: allPanelsRemoved
-    }));
-    return allPanelsRemoved;
+
+    if (panelsAdded.length > 0 || panelsRemoved.length > 0) {
+      flicking.trigger(new ComponentEvent(EVENTS.PANEL_CHANGE, {
+        added: panelsAdded,
+        removed: panelsRemoved
+      }));
+      this.checkPanelContentsReady(__spread(panelsAdded, panelsRemoved));
+    }
   };
   /**
    * @internal
@@ -5157,6 +5331,7 @@ function () {
       });
       if (!flicking.initialized) return;
       camera.updateRange();
+      camera.updateOffset();
       camera.updateAnchors();
 
       if (control.animating) ; else {
@@ -5190,6 +5365,7 @@ function () {
     var camera = flicking.camera,
         control = flicking.control;
     camera.updateRange();
+    camera.updateOffset();
     camera.updateAnchors();
     camera.resetNeedPanelHistory();
     control.updateInput();
@@ -6084,7 +6260,7 @@ function () {
     var notToggled = renderedPanels.filter(function (panel) {
       return !panel.toggled;
     });
-    return __spreadArray(__spreadArray(__spreadArray([], __read(toggledPrev), false), __read(notToggled), false), __read(toggledNext)).map(function (panel) {
+    return __spread(toggledPrev, notToggled, toggledNext).map(function (panel) {
       return panel.index;
     });
   };
@@ -6294,7 +6470,7 @@ function () {
   __proto.getRenderingIndexesByOrder = function (flicking) {
     var virtualManager = flicking.virtual;
 
-    var visiblePanels = __spreadArray([], __read(flicking.visiblePanels)).filter(function (panel) {
+    var visiblePanels = __spread(flicking.visiblePanels).filter(function (panel) {
       return panel.rendered;
     }).sort(function (panel1, panel2) {
       return panel1.position + panel1.offset - (panel2.position + panel2.offset);
@@ -6315,7 +6491,7 @@ function () {
     }).map(function (el) {
       return el.idx;
     });
-    return __spreadArray(__spreadArray([], __read(visibleIndexes), false), __read(invisibleIndexes));
+    return __spread(visibleIndexes, invisibleIndexes);
   };
 
   __proto.getRenderingElementsByOrder = function (flicking) {
@@ -6424,58 +6600,64 @@ function (_super) {
         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
 
@@ -6487,6 +6669,7 @@ function (_super) {
     _this._defaultIndex = defaultIndex;
     _this._horizontal = horizontal;
     _this._circular = circular;
+    _this._circularFallback = circularFallback;
     _this._bound = bound;
     _this._adaptive = adaptive;
     _this._panelsPerView = panelsPerView;
@@ -6510,6 +6693,8 @@ function (_super) {
     _this._autoInit = autoInit;
     _this._autoResize = autoResize;
     _this._useResizeObserver = useResizeObserver;
+    _this._resizeDebounce = resizeDebounce;
+    _this._maxResizeDebounce = maxResizeDebounce;
     _this._externalRenderer = externalRenderer;
     _this._renderExternal = renderExternal; // Create core components
 
@@ -6625,7 +6810,7 @@ function (_super) {
      * @readonly
      */
     get: function () {
-      return this._camera.controlParams.circular;
+      return this._camera.circularEnabled;
     },
     enumerable: false,
     configurable: true
@@ -6859,6 +7044,24 @@ function (_super) {
     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
@@ -7340,6 +7543,38 @@ function (_super) {
     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.
@@ -7375,85 +7610,61 @@ function (_super) {
    * @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(EVENTS.READY));
-            return [2
-            /*return*/
-            ];
-        }
-      });
+      _this.trigger(new ComponentEvent(EVENTS.READY));
     });
   };
   /**
@@ -7819,7 +8030,7 @@ function (_super) {
       });
     }
 
-    (_a = this._plugins).push.apply(_a, __spreadArray([], __read(plugins)));
+    (_a = this._plugins).push.apply(_a, __spread(plugins));
 
     return this;
   };
@@ -8066,22 +8277,14 @@ function (_super) {
   };
 
   __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(this, {
+      align: this._align
+    });
   };
 
   __proto._createRenderer = function () {
@@ -8115,23 +8318,59 @@ function (_super) {
   };
 
   __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(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(EVENTS.AFTER_RESIZE, {
+      width: viewport.width,
+      height: viewport.height,
+      prev: {
+        width: 0,
+        height: 0
+      },
+      sizeChanged: sizeChanged,
+      element: viewport.element
+    }));
   };
   /**
    * Version info string
@@ -8145,7 +8384,7 @@ function (_super) {
    */
 
 
-  Flicking.VERSION = "4.4.2";
+  Flicking.VERSION = "4.6.0";
   return Flicking;
 }(Component);
 
@@ -8168,7 +8407,7 @@ function (_super) {
 var withFlickingMethods = function (prototype, flickingName) {
   [Component.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);
 
@@ -8184,7 +8423,7 @@ var withFlickingMethods = function (prototype, flickingName) {
               args[_i] = arguments[_i];
             }
 
-            return (_a = descriptor.value).call.apply(_a, __spreadArray([this[flickingName]], __read(args)));
+            return (_a = descriptor.value).call.apply(_a, __spread([this[flickingName]], args));
           }
         });
       } else {
@@ -8194,7 +8433,8 @@ var withFlickingMethods = function (prototype, flickingName) {
           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));
           };
         }
 
@@ -8208,7 +8448,7 @@ var withFlickingMethods = function (prototype, flickingName) {
               args[_i] = arguments[_i];
             }
 
-            return (_a = descriptor.set) === null || _a === void 0 ? void 0 : _a.call.apply(_a, __spreadArray([this[flickingName]], __read(args)));
+            return (_a = descriptor.set) === null || _a === void 0 ? void 0 : _a.call.apply(_a, __spread([this[flickingName]], args));
           };
         }
 
@@ -8222,7 +8462,10 @@ var sync = (function (flicking, diffResult, rendered) {
   var renderer = flicking.renderer;
   var panels = renderer.panels;
 
-  var prevList = __spreadArray([], __read(diffResult.prevList));
+  var prevList = __spread(diffResult.prevList);
+
+  var added = [];
+  var removed = [];
 
   if (diffResult.removed.length > 0) {
     var endIdx_1 = -1;
@@ -8233,7 +8476,7 @@ var sync = (function (flicking, diffResult, rendered) {
       }
 
       if (prevIdx_1 >= 0 && removedIdx !== prevIdx_1 - 1) {
-        batchRemove(renderer, prevIdx_1, endIdx_1 + 1);
+        removed.push.apply(removed, __spread(batchRemove(renderer, prevIdx_1, endIdx_1 + 1)));
         endIdx_1 = removedIdx;
         prevIdx_1 = removedIdx;
       } else {
@@ -8242,39 +8485,34 @@ var sync = (function (flicking, diffResult, rendered) {
 
       prevList.splice(removedIdx, 1);
     });
-    batchRemove(renderer, prevIdx_1, endIdx_1 + 1);
+    removed.push.apply(removed, __spread(batchRemove(renderer, prevIdx_1, endIdx_1 + 1)));
   }
 
   diffResult.ordered.forEach(function (_a) {
     var _b = __read(_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) {
@@ -8287,7 +8525,7 @@ var sync = (function (flicking, diffResult, rendered) {
       }
 
       if (prevIdx_2 >= 0 && addedIdx !== prevIdx_2 + 1) {
-        batchInsert(renderer, diffResult, addedElements_1, startIdx_1, idx + 1);
+        added.push.apply(added, __spread(batchInsert(renderer, diffResult, addedElements_1, startIdx_1, idx + 1)));
         startIdx_1 = -1;
         prevIdx_2 = -1;
       } else {
@@ -8296,24 +8534,26 @@ var sync = (function (flicking, diffResult, rendered) {
     });
 
     if (startIdx_1 >= 0) {
-      batchInsert(renderer, diffResult, addedElements_1, startIdx_1);
+      added.push.apply(added, __spread(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(diffResult.added.slice(startIdx, endIdx).map(function (index, elIdx) {
+  return renderer.batchInsertDefer.apply(renderer, __spread(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
@@ -8333,16 +8573,16 @@ var getRenderingPanels = (function (flicking, diffResult) {
     map[prev] = current;
     return map;
   }, {});
-  return __spreadArray(__spreadArray([], __read(flicking.panels.filter(function (panel) {
+  return __spread(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(diffResult.added.map(function (idx) {
+  }), diffResult.added.map(function (idx) {
     return diffResult.list[idx];
-  })));
+  }));
 });
 
 var getDefaultCameraTransform = (function (align, horizontal, firstPanelSize) {
@@ -8396,5 +8636,5 @@ var parseAlign = function (alignVal) {
  * egjs projects are licensed under the MIT license
  */
 
-export { ALIGN, AnchorPoint, AnimatingState, AxesController, BoundCamera, CLASS, Camera, CircularCamera, Control, DIRECTION, DisabledState, DraggingState, CODE as ERROR_CODE, EVENTS, ExternalRenderer, FlickingError, FreeControl, HoldingState, IdleState, LinearCamera, MOVE_TYPE, NormalRenderingStrategy, Panel, Renderer, SnapControl, State, StateMachine, StrictControl, VanillaElementProvider, VanillaRenderer, Viewport, VirtualElementProvider, VirtualManager, VirtualPanel, VirtualRenderingStrategy, checkExistence, circulateIndex, circulatePosition, clamp, Flicking as default, find, findIndex, findRight, getDefaultCameraTransform, getDirection, getElement, getFlickingAttached, getMinusCompensatedIndex, getProgress, getRenderingPanels, getStyle, includes, isBetween, isString, merge, parseAlign$1 as parseAlign, parseArithmeticExpression, parseArithmeticSize, parseBounce, parseCSSSizeValue, parseElement, parsePanelAlign, range, setPrototypeOf, setSize, sync, toArray, withFlickingMethods };
+export { ALIGN, AnchorPoint, AnimatingState, AxesController, BoundCameraMode, CIRCULAR_FALLBACK, CLASS, Camera, CircularCameraMode, Control, DIRECTION, DisabledState, DraggingState, CODE as ERROR_CODE, EVENTS, ExternalRenderer, FlickingError, FreeControl, HoldingState, IdleState, LinearCameraMode, MOVE_TYPE, NormalRenderingStrategy, Panel, Renderer, SnapControl, State, StateMachine, StrictControl, VanillaElementProvider, VanillaRenderer, Viewport, VirtualElementProvider, VirtualManager, VirtualPanel, VirtualRenderingStrategy, checkExistence, circulateIndex, circulatePosition, clamp, Flicking as default, find, findIndex, findRight, getDefaultCameraTransform, getDirection, getElement, getFlickingAttached, getMinusCompensatedIndex, getProgress, getRenderingPanels, getStyle, includes, isBetween, isString, merge, parseAlign$1 as parseAlign, parseArithmeticExpression, parseArithmeticSize, parseBounce, parseCSSSizeValue, parseElement, parsePanelAlign, range, setPrototypeOf, setSize, sync, toArray, withFlickingMethods };
 //# sourceMappingURL=flicking.esm.js.map