@egjs/flicking 4.5.1 → 4.6.2

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.5.1
+version: 4.6.2
 */
 import Component, { ComponentEvent } from '@egjs/component';
 import Axes, { PanInput } from '@egjs/axes';
@@ -969,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
 
@@ -988,6 +1015,8 @@ function () {
     this._flicking = flicking;
     this._enabled = false;
     this._resizeObserver = null;
+    this._resizeTimer = -1;
+    this._maxResizeDebounceTimer = -1;
   }
 
   var __proto = AutoResizer.prototype;
@@ -1839,6 +1868,8 @@ function (_super) {
   };
 
   __proto.onRelease = function (ctx) {
+    var _a;
+
     var flicking = ctx.flicking,
         axesEvent = ctx.axesEvent,
         transitTo = ctx.transitTo; // Update last position to cope with Axes's animating behavior
@@ -1858,7 +1889,13 @@ function (_super) {
     var control = flicking.control;
     var position = axesEvent.destPos[POSITION_KEY];
     var duration = Math.max(axesEvent.duration, flicking.duration);
-    void control.moveToPosition(position, duration, axesEvent);
+
+    try {
+      void control.moveToPosition(position, duration, axesEvent);
+    } catch (err) {
+      transitTo(STATE_TYPE.IDLE);
+      axesEvent.setTo((_a = {}, _a[POSITION_KEY] = flicking.camera.position, _a), 0);
+    }
   };
 
   return DraggingState;
@@ -1934,7 +1971,11 @@ function (_super) {
       direction: getDirection(animatingContext.start, animatingContext.end),
       axesEvent: axesEvent
     }));
-    control.setActive(this._targetPanel, control.activePanel, axesEvent.isTrusted);
+    var targetPanel = this._targetPanel;
+
+    if (targetPanel) {
+      control.setActive(targetPanel, control.activePanel, axesEvent.isTrusted);
+    }
   };
 
   return AnimatingState;
@@ -2689,7 +2730,7 @@ function () {
    */
 
 
-  __proto.updatePosition = function (_progressInPanel) {
+  __proto.updatePosition = function (progressInPanel) {
     var flicking = getFlickingAttached(this._flicking);
     var camera = flicking.camera;
     var activePanel = this._activePanel;
@@ -3065,48 +3106,41 @@ function (_super) {
    */
 
   __proto.moveToPosition = function (position, duration, axesEvent) {
-    return __awaiter(this, void 0, void 0, function () {
-      var flicking, camera, activeAnchor, anchorAtCamera, state, snapThreshold, posDelta, absPosDelta, snapDelta, targetAnchor;
-      return __generator(this, function (_a) {
-        flicking = getFlickingAttached(this._flicking);
-        camera = flicking.camera;
-        activeAnchor = camera.findActiveAnchor();
-        anchorAtCamera = camera.findNearestAnchor(camera.position);
-        state = flicking.control.controller.state;
+    var flicking = getFlickingAttached(this._flicking);
+    var camera = flicking.camera;
+    var activeAnchor = camera.findActiveAnchor();
+    var anchorAtCamera = camera.findNearestAnchor(camera.position);
+    var state = flicking.control.controller.state;
 
-        if (!activeAnchor || !anchorAtCamera) {
-          return [2
-          /*return*/
-          , Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE))];
-        }
+    if (!activeAnchor || !anchorAtCamera) {
+      return Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE));
+    }
 
-        snapThreshold = this._calcSnapThreshold(position, activeAnchor);
-        posDelta = flicking.animating ? state.delta : position - camera.position;
-        absPosDelta = Math.abs(posDelta);
-        snapDelta = axesEvent && axesEvent.delta[POSITION_KEY] !== 0 ? Math.abs(axesEvent.delta[POSITION_KEY]) : absPosDelta;
-
-        if (snapDelta >= snapThreshold && snapDelta > 0) {
-          // Move to anchor at position
-          targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);
-        } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {
-          // Move to the adjacent panel
-          targetAnchor = this._findAdjacentAnchor(posDelta, anchorAtCamera);
-        } else {
-          // Restore to active panel
-          targetAnchor = anchorAtCamera;
-        }
+    var snapThreshold = this._calcSnapThreshold(position, activeAnchor);
 
-        this._triggerIndexChangeEvent(targetAnchor.panel, position, axesEvent);
+    var posDelta = flicking.animating ? state.delta : position - camera.position;
+    var absPosDelta = Math.abs(posDelta);
+    var snapDelta = axesEvent && axesEvent.delta[POSITION_KEY] !== 0 ? Math.abs(axesEvent.delta[POSITION_KEY]) : absPosDelta;
+    var targetAnchor;
 
-        return [2
-        /*return*/
-        , this._animateToPosition({
-          position: camera.clampToReachablePosition(targetAnchor.position),
-          duration: duration,
-          newActivePanel: targetAnchor.panel,
-          axesEvent: axesEvent
-        })];
-      });
+    if (snapDelta >= snapThreshold && snapDelta > 0) {
+      // Move to anchor at position
+      targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);
+    } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {
+      // Move to the adjacent panel
+      targetAnchor = this._findAdjacentAnchor(posDelta, anchorAtCamera);
+    } else {
+      // Restore to active panel
+      targetAnchor = anchorAtCamera;
+    }
+
+    this._triggerIndexChangeEvent(targetAnchor.panel, position, axesEvent);
+
+    return this._animateToPosition({
+      position: camera.clampToReachablePosition(targetAnchor.position),
+      duration: duration,
+      newActivePanel: targetAnchor.panel,
+      axesEvent: axesEvent
     });
   };
 
@@ -3295,35 +3329,26 @@ function (_super) {
 
 
   __proto.moveToPosition = function (position, duration, axesEvent) {
-    return __awaiter(this, void 0, void 0, function () {
-      var flicking, camera, targetPos, anchorAtPosition, targetPanel;
-      return __generator(this, function (_a) {
-        flicking = getFlickingAttached(this._flicking);
-        camera = flicking.camera;
-        targetPos = camera.clampToReachablePosition(position);
-        anchorAtPosition = camera.findAnchorIncludePosition(targetPos);
+    var flicking = getFlickingAttached(this._flicking);
+    var camera = flicking.camera;
+    var targetPos = camera.clampToReachablePosition(position);
+    var anchorAtPosition = camera.findAnchorIncludePosition(targetPos);
 
-        if (!anchorAtPosition) {
-          return [2
-          /*return*/
-          , Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE))];
-        }
+    if (!anchorAtPosition) {
+      return Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE));
+    }
 
-        targetPanel = anchorAtPosition.panel; // Trigger only change event
+    var targetPanel = anchorAtPosition.panel; // Trigger only change event
 
-        if (targetPanel !== this._activePanel) {
-          this._triggerIndexChangeEvent(targetPanel, position, axesEvent);
-        }
+    if (targetPanel !== this._activePanel) {
+      this._triggerIndexChangeEvent(targetPanel, position, axesEvent);
+    }
 
-        return [2
-        /*return*/
-        , this._animateToPosition({
-          position: this._stopAtEdge ? targetPos : position,
-          duration: duration,
-          newActivePanel: targetPanel,
-          axesEvent: axesEvent
-        })];
-      });
+    return this._animateToPosition({
+      position: this._stopAtEdge ? targetPos : position,
+      duration: duration,
+      newActivePanel: targetPanel,
+      axesEvent: axesEvent
     });
   };
 
@@ -3521,62 +3546,56 @@ function (_super) {
 
 
   __proto.moveToPosition = function (position, duration, axesEvent) {
-    return __awaiter(this, void 0, void 0, function () {
-      var flicking, camera, activePanel, axesRange, indexRange, cameraRange, clampedPosition, anchorAtPosition, prevPos, isOverThreshold, adjacentAnchor, targetPos, targetPanel, anchors, firstAnchor, lastAnchor, shouldBounceToFirst, shouldBounceToLast, targetAnchor;
-      return __generator(this, function (_a) {
-        flicking = getFlickingAttached(this._flicking);
-        camera = flicking.camera;
-        activePanel = this._activePanel;
-        axesRange = this._controller.range;
-        indexRange = this._indexRange;
-        cameraRange = camera.range;
-        clampedPosition = clamp(camera.clampToReachablePosition(position), axesRange[0], axesRange[1]);
-        anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);
-
-        if (!anchorAtPosition || !activePanel) {
-          return [2
-          /*return*/
-          , Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE))];
-        }
+    var flicking = getFlickingAttached(this._flicking);
+    var camera = flicking.camera;
+    var activePanel = this._activePanel;
+    var axesRange = this._controller.range;
+    var indexRange = this._indexRange;
+    var cameraRange = camera.range;
+    var clampedPosition = clamp(camera.clampToReachablePosition(position), axesRange[0], axesRange[1]);
+    var anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);
 
-        prevPos = activePanel.position;
-        isOverThreshold = Math.abs(position - prevPos) >= flicking.threshold;
-        adjacentAnchor = position > prevPos ? camera.getNextAnchor(anchorAtPosition) : camera.getPrevAnchor(anchorAtPosition);
-        anchors = camera.anchorPoints;
-        firstAnchor = anchors[0];
-        lastAnchor = anchors[anchors.length - 1];
-        shouldBounceToFirst = position <= cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);
-        shouldBounceToLast = position >= cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);
-
-        if (shouldBounceToFirst || shouldBounceToLast) {
-          targetAnchor = position < cameraRange.min ? firstAnchor : lastAnchor;
-          targetPanel = targetAnchor.panel;
-          targetPos = targetAnchor.position;
-        } else if (isOverThreshold && anchorAtPosition.position !== activePanel.position) {
-          // Move to anchor at position
-          targetPanel = anchorAtPosition.panel;
-          targetPos = anchorAtPosition.position;
-        } else if (isOverThreshold && adjacentAnchor && isBetween(adjacentAnchor.index, indexRange.min, indexRange.max)) {
-          // Move to adjacent anchor
-          targetPanel = adjacentAnchor.panel;
-          targetPos = adjacentAnchor.position;
-        } else {
-          // Restore to active panel
-          targetPos = camera.clampToReachablePosition(activePanel.position);
-          targetPanel = activePanel;
-        }
+    if (!anchorAtPosition || !activePanel) {
+      return Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE));
+    }
+
+    var prevPos = activePanel.position;
+    var isOverThreshold = Math.abs(position - prevPos) >= flicking.threshold;
+    var adjacentAnchor = position > prevPos ? camera.getNextAnchor(anchorAtPosition) : camera.getPrevAnchor(anchorAtPosition);
+    var targetPos;
+    var targetPanel;
+    var anchors = camera.anchorPoints;
+    var firstAnchor = anchors[0];
+    var lastAnchor = anchors[anchors.length - 1];
+    var shouldBounceToFirst = position <= cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);
+    var shouldBounceToLast = position >= cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);
+
+    if (shouldBounceToFirst || shouldBounceToLast) {
+      // In bounce area
+      var targetAnchor = position < cameraRange.min ? firstAnchor : lastAnchor;
+      targetPanel = targetAnchor.panel;
+      targetPos = targetAnchor.position;
+    } else if (isOverThreshold && anchorAtPosition.position !== activePanel.position) {
+      // Move to anchor at position
+      targetPanel = anchorAtPosition.panel;
+      targetPos = anchorAtPosition.position;
+    } else if (isOverThreshold && adjacentAnchor && isBetween(adjacentAnchor.index, indexRange.min, indexRange.max)) {
+      // Move to adjacent anchor
+      targetPanel = adjacentAnchor.panel;
+      targetPos = adjacentAnchor.position;
+    } else {
+      // Restore to active panel
+      targetPos = camera.clampToReachablePosition(activePanel.position);
+      targetPanel = activePanel;
+    }
 
-        this._triggerIndexChangeEvent(targetPanel, position, axesEvent);
+    this._triggerIndexChangeEvent(targetPanel, position, axesEvent);
 
-        return [2
-        /*return*/
-        , this._animateToPosition({
-          position: targetPos,
-          duration: duration,
-          newActivePanel: targetPanel,
-          axesEvent: axesEvent
-        })];
-      });
+    return this._animateToPosition({
+      position: targetPos,
+      duration: duration,
+      newActivePanel: targetPanel,
+      axesEvent: axesEvent
     });
   };
 
@@ -4038,7 +4057,7 @@ var Camera =
 /*#__PURE__*/
 function () {
   /** */
-  function Camera(_a) {
+  function Camera(flicking, _a) {
     var _this = this;
 
     var _b = (_a === void 0 ? {} : _a).align,
@@ -4078,7 +4097,7 @@ function () {
       _this._transform = transformName;
     };
 
-    this._flicking = null;
+    this._flicking = flicking;
 
     this._resetInternalValues(); // Options
 
@@ -4373,17 +4392,14 @@ function () {
   /**
    * Initialize Camera
    * @ko Camera를 초기화합니다
-   * @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>
-   * @chainable
    * @throws {FlickingError}
    * {@link ERROR_CODE VAL_MUST_NOT_NULL} If the camera element(`.flicking-camera`) does not exist inside viewport element
    * <ko>{@link ERROR_CODE VAL_MUST_NOT_NULL} 뷰포트 엘리먼트 내부에 카메라 엘리먼트(`.flicking-camera`)가 존재하지 않을 경우</ko>
    * @return {this}
    */
 
-  __proto.init = function (flicking) {
-    this._flicking = flicking;
-    var viewportEl = flicking.viewport.element;
+  __proto.init = function () {
+    var viewportEl = this._flicking.viewport.element;
     checkExistence(viewportEl.firstElementChild, "First element child of the viewport element");
     this._el = viewportEl.firstElementChild;
 
@@ -4401,8 +4417,6 @@ function () {
 
 
   __proto.destroy = function () {
-    this._flicking = null;
-
     this._resetInternalValues();
 
     return this;
@@ -4433,12 +4447,12 @@ function () {
 
     this._checkReachEnd(prevPos, pos);
 
-    this.applyTransform();
-
     if (toggled) {
       void flicking.renderer.render().then(function () {
         _this.updateOffset();
       });
+    } else {
+      this.applyTransform();
     }
   };
   /**
@@ -4625,7 +4639,6 @@ function () {
       });
     }
 
-    this.updateOffset();
     return this;
   };
   /**
@@ -4717,7 +4730,6 @@ function () {
   /**
    * Apply "transform" style with the current position to camera element
    * @ko 현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.
-   * @chainable
    * @return {this}
    */
 
@@ -4725,6 +4737,8 @@ function () {
   __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;
@@ -4897,7 +4911,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;
@@ -4920,6 +4935,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
@@ -5051,6 +5080,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 = [];
@@ -5061,7 +5109,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) {
@@ -5101,27 +5148,6 @@ function () {
       });
       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;
   };
   /**
@@ -5138,6 +5164,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 = [];
@@ -5148,10 +5193,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;
@@ -5179,33 +5222,63 @@ function () {
       }
 
       return __spread(removed, panelsRemoved);
-    }, []); // Update camera & control
+    }, []);
+    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 (!flicking.animating) {
+      if (!activePanel || activePanel.removed) {
+        if (panels.length <= 0) {
+          // All panels removed
+          camera.lookAt(0);
+        } else {
+          var targetIndex = (_a = activePanel === null || activePanel === void 0 ? void 0 : activePanel.index) !== null && _a !== void 0 ? _a : 0;
 
-    if (allPanelsRemoved.length > 0 && !control.animating) {
-      var targetPanel = includes(allPanelsRemoved, activePanel) ? panels[activeIndex] || panels[panels.length - 1] : activePanel;
+          if (targetIndex > panels.length - 1) {
+            targetIndex = panels.length - 1;
+          }
 
-      if (targetPanel) {
-        void control.moveToPanel(targetPanel, {
+          void control.moveToPanel(panels[targetIndex], {
+            duration: 0
+          }).catch(function () {
+            return void 0;
+          });
+        }
+      } else {
+        void control.moveToPanel(activePanel, {
           duration: 0
         }).catch(function () {
           return void 0;
         });
-      } else {
-        // All panels removed
-        camera.lookAt(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
@@ -5250,6 +5323,7 @@ function () {
       });
       if (!flicking.initialized) return;
       camera.updateRange();
+      camera.updateOffset();
       camera.updateAnchors();
 
       if (control.animating) ; else {
@@ -5283,6 +5357,7 @@ function () {
     var camera = flicking.camera,
         control = flicking.control;
     camera.updateRange();
+    camera.updateOffset();
     camera.updateAnchors();
     camera.resetNeedPanelHistory();
     control.updateInput();
@@ -6567,10 +6642,14 @@ function (_super) {
         autoResize = _4 === void 0 ? true : _4,
         _5 = _b.useResizeObserver,
         useResizeObserver = _5 === void 0 ? true : _5,
-        _6 = _b.externalRenderer,
-        externalRenderer = _6 === void 0 ? null : _6,
-        _7 = _b.renderExternal,
-        renderExternal = _7 === void 0 ? null : _7;
+        _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
 
@@ -6606,6 +6685,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
 
@@ -7454,6 +7535,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.
@@ -7489,85 +7602,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));
     });
   };
   /**
@@ -8185,7 +8274,7 @@ function (_super) {
       console.warn("\"circular\" and \"bound\" option cannot be used together, ignoring bound.");
     }
 
-    return new Camera({
+    return new Camera(this, {
       align: this._align
     });
   };
@@ -8221,23 +8310,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
@@ -8251,7 +8376,7 @@ function (_super) {
    */
 
 
-  Flicking.VERSION = "4.5.1";
+  Flicking.VERSION = "4.6.2";
   return Flicking;
 }(Component);
 
@@ -8274,7 +8399,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);
 
@@ -8331,6 +8456,9 @@ var sync = (function (flicking, diffResult, rendered) {
 
   var prevList = __spread(diffResult.prevList);
 
+  var added = [];
+  var removed = [];
+
   if (diffResult.removed.length > 0) {
     var endIdx_1 = -1;
     var prevIdx_1 = -1;
@@ -8340,7 +8468,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 {
@@ -8349,39 +8477,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) {
@@ -8394,7 +8517,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 {
@@ -8403,13 +8526,17 @@ 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)));
     }
   }
+
+  if (diffResult.added.length > 0 || diffResult.removed.length > 0) {
+    renderer.updateAfterPanelChange(added, removed);
+  }
 });
 
 var batchInsert = function (renderer, diffResult, addedElements, startIdx, endIdx) {
-  renderer.batchInsert.apply(renderer, __spread(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]],
@@ -8420,7 +8547,7 @@ var batchInsert = function (renderer, diffResult, addedElements, startIdx, endId
 
 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