@egjs/flicking 4.5.0 → 4.6.1

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.0
+version: 4.6.1
 */
 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;
@@ -3467,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}를 주어진 좌표로 이동합니다
@@ -4023,7 +4067,7 @@ var Camera =
 /*#__PURE__*/
 function () {
   /** */
-  function Camera(_a) {
+  function Camera(flicking, _a) {
     var _this = this;
 
     var _b = (_a === void 0 ? {} : _a).align,
@@ -4063,7 +4107,7 @@ function () {
       _this._transform = transformName;
     };
 
-    this._flicking = null;
+    this._flicking = flicking;
 
     this._resetInternalValues(); // Options
 
@@ -4358,17 +4402,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;
 
@@ -4386,8 +4427,6 @@ function () {
 
 
   __proto.destroy = function () {
-    this._flicking = null;
-
     this._resetInternalValues();
 
     return this;
@@ -4418,12 +4457,12 @@ function () {
 
     this._checkReachEnd(prevPos, pos);
 
-    this.applyTransform();
-
     if (toggled) {
       void flicking.renderer.render().then(function () {
         _this.updateOffset();
       });
+    } else {
+      this.applyTransform();
     }
   };
   /**
@@ -4610,7 +4649,6 @@ function () {
       });
     }
 
-    this.updateOffset();
     return this;
   };
   /**
@@ -4702,7 +4740,6 @@ function () {
   /**
    * Apply "transform" style with the current position to camera element
    * @ko 현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.
-   * @chainable
    * @return {this}
    */
 
@@ -4710,6 +4747,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;
@@ -4882,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;
@@ -4905,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
@@ -5036,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 = [];
@@ -5046,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) {
@@ -5086,27 +5158,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;
   };
   /**
@@ -5123,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 = [];
@@ -5133,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;
@@ -5164,33 +5232,61 @@ 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 (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
@@ -5235,6 +5331,7 @@ function () {
       });
       if (!flicking.initialized) return;
       camera.updateRange();
+      camera.updateOffset();
       camera.updateAnchors();
 
       if (control.animating) ; else {
@@ -5268,6 +5365,7 @@ function () {
     var camera = flicking.camera,
         control = flicking.control;
     camera.updateRange();
+    camera.updateOffset();
     camera.updateAnchors();
     camera.resetNeedPanelHistory();
     control.updateInput();
@@ -6552,10 +6650,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
 
@@ -6591,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
 
@@ -7439,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.
@@ -7474,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));
     });
   };
   /**
@@ -8170,7 +8282,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
     });
   };
@@ -8206,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
@@ -8236,7 +8384,7 @@ function (_super) {
    */
 
 
-  Flicking.VERSION = "4.5.0";
+  Flicking.VERSION = "4.6.1";
   return Flicking;
 }(Component);
 
@@ -8259,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);
 
@@ -8285,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));
           };
         }
 
@@ -8315,6 +8464,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;
@@ -8324,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 {
@@ -8333,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) {
@@ -8378,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 {
@@ -8387,13 +8534,15 @@ 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, __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]],
@@ -8404,7 +8553,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