@egjs/flicking 4.5.0 → 4.6.1

package/dist/flicking.pkgd.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.5.0
+version: 4.6.1
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1482,6 +1482,33 @@ version: 4.5.0
         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
 
@@ -1501,6 +1528,8 @@ version: 4.5.0
         this._flicking = flicking;
         this._enabled = false;
         this._resizeObserver = null;
+        this._resizeTimer = -1;
+        this._maxResizeDebounceTimer = -1;
       }
 
       var __proto = AutoResizer.prototype;
@@ -9924,6 +9953,21 @@ version: 4.5.0
         };
         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}를 주어진 좌표로 이동합니다
@@ -10501,7 +10545,7 @@ version: 4.5.0
     /*#__PURE__*/
     function () {
       /** */
-      function Camera(_a) {
+      function Camera(flicking, _a) {
         var _this = this;
 
         var _b = (_a === void 0 ? {} : _a).align,
@@ -10541,7 +10585,7 @@ version: 4.5.0
           _this._transform = transformName;
         };
 
-        this._flicking = null;
+        this._flicking = flicking;
 
         this._resetInternalValues(); // Options
 
@@ -10836,17 +10880,14 @@ version: 4.5.0
       /**
        * 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;
 
@@ -10864,8 +10905,6 @@ version: 4.5.0
 
 
       __proto.destroy = function () {
-        this._flicking = null;
-
         this._resetInternalValues();
 
         return this;
@@ -10896,12 +10935,12 @@ version: 4.5.0
 
         this._checkReachEnd(prevPos, pos);
 
-        this.applyTransform();
-
         if (toggled) {
           void flicking.renderer.render().then(function () {
             _this.updateOffset();
           });
+        } else {
+          this.applyTransform();
         }
       };
       /**
@@ -11088,7 +11127,6 @@ version: 4.5.0
           });
         }
 
-        this.updateOffset();
         return this;
       };
       /**
@@ -11180,7 +11218,6 @@ version: 4.5.0
       /**
        * Apply "transform" style with the current position to camera element
        * @ko 현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.
-       * @chainable
        * @return {this}
        */
 
@@ -11188,6 +11225,8 @@ version: 4.5.0
       __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;
@@ -12380,7 +12419,8 @@ version: 4.5.0
             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;
@@ -12403,6 +12443,20 @@ version: 4.5.0
         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
@@ -12534,6 +12588,25 @@ version: 4.5.0
 
 
       __proto.batchInsert = function () {
+        var items = [];
+
+        for (var _i = 0; _i < arguments.length; _i++) {
+          items[_i] = arguments[_i];
+        }
+
+        var allPanelsInserted = this.batchInsertDefer.apply(this, __spread$1(items));
+        if (allPanelsInserted.length <= 0) return [];
+        this.updateAfterPanelChange(allPanelsInserted, []);
+        return allPanelsInserted;
+      };
+      /**
+       * Defers update
+       * camera position & others will be updated after calling updateAfterPanelChange
+       * @internal
+       */
+
+
+      __proto.batchInsertDefer = function () {
         var _this = this;
 
         var items = [];
@@ -12544,7 +12617,6 @@ version: 4.5.0
 
         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) {
@@ -12584,27 +12656,6 @@ version: 4.5.0
           });
           return __spread$1(addedPanels, panelsInserted);
         }, []);
-        if (allPanelsInserted.length <= 0) return []; // Update camera & control
-
-        this._updateCameraAndControl();
-
-        void this.render(); // Move to the first panel added if no panels existed
-        // FIXME: fix for animating case
-
-        if (allPanelsInserted.length > 0 && !control.animating) {
-          void control.moveToPanel(control.activePanel || allPanelsInserted[0], {
-            duration: 0
-          }).catch(function () {
-            return void 0;
-          });
-        }
-
-        flicking.camera.updateOffset();
-        flicking.trigger(new ComponentEvent$1(EVENTS.PANEL_CHANGE, {
-          added: allPanelsInserted,
-          removed: []
-        }));
-        this.checkPanelContentsReady(allPanelsInserted);
         return allPanelsInserted;
       };
       /**
@@ -12621,6 +12672,25 @@ version: 4.5.0
 
 
       __proto.batchRemove = function () {
+        var items = [];
+
+        for (var _i = 0; _i < arguments.length; _i++) {
+          items[_i] = arguments[_i];
+        }
+
+        var allPanelsRemoved = this.batchRemoveDefer.apply(this, __spread$1(items));
+        if (allPanelsRemoved.length <= 0) return [];
+        this.updateAfterPanelChange([], allPanelsRemoved);
+        return allPanelsRemoved;
+      };
+      /**
+       * Defers update
+       * camera position & others will be updated after calling updateAfterPanelChange
+       * @internal
+       */
+
+
+      __proto.batchRemoveDefer = function () {
         var _this = this;
 
         var items = [];
@@ -12631,10 +12701,8 @@ version: 4.5.0
 
         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;
@@ -12662,33 +12730,61 @@ version: 4.5.0
           }
 
           return __spread$1(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$1(EVENTS.PANEL_CHANGE, {
-          added: [],
-          removed: allPanelsRemoved
-        }));
-        return allPanelsRemoved;
+
+        if (panelsAdded.length > 0 || panelsRemoved.length > 0) {
+          flicking.trigger(new ComponentEvent$1(EVENTS.PANEL_CHANGE, {
+            added: panelsAdded,
+            removed: panelsRemoved
+          }));
+          this.checkPanelContentsReady(__spread$1(panelsAdded, panelsRemoved));
+        }
       };
       /**
        * @internal
@@ -12733,6 +12829,7 @@ version: 4.5.0
           });
           if (!flicking.initialized) return;
           camera.updateRange();
+          camera.updateOffset();
           camera.updateAnchors();
 
           if (control.animating) ; else {
@@ -12766,6 +12863,7 @@ version: 4.5.0
         var camera = flicking.camera,
             control = flicking.control;
         camera.updateRange();
+        camera.updateOffset();
         camera.updateAnchors();
         camera.resetNeedPanelHistory();
         control.updateInput();
@@ -14064,10 +14162,14 @@ version: 4.5.0
             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
 
@@ -14103,6 +14205,8 @@ version: 4.5.0
         _this._autoInit = autoInit;
         _this._autoResize = autoResize;
         _this._useResizeObserver = useResizeObserver;
+        _this._resizeDebounce = resizeDebounce;
+        _this._maxResizeDebounce = maxResizeDebounce;
         _this._externalRenderer = externalRenderer;
         _this._renderExternal = renderExternal; // Create core components
 
@@ -14951,6 +15055,38 @@ version: 4.5.0
         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.
@@ -14986,85 +15122,61 @@ version: 4.5.0
        * @ko Flicking을 초기화하고, 디폴트 인덱스로 이동합니다
        * 이 메소드는 `autoInit` 옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다
        * @fires Flicking#ready
-       * @return {this}
+       * @return {Promise<void>}
        */
 
       __proto.init = function () {
-        return __awaiter(this, void 0, void 0, function () {
-          var camera, renderer, control, virtualManager, originalTrigger, preventEventsBeforeInit;
-
-          var _this = this;
-
-          return __generator(this, function (_a) {
-            switch (_a.label) {
-              case 0:
-                if (this._initialized) return [2
-                /*return*/
-                ];
-                camera = this._camera;
-                renderer = this._renderer;
-                control = this._control;
-                virtualManager = this._virtualManager;
-                originalTrigger = this.trigger;
-                preventEventsBeforeInit = this._preventEventsBeforeInit;
-                camera.init(this);
-                virtualManager.init();
-                renderer.init(this);
-                control.init(this);
-
-                if (preventEventsBeforeInit) {
-                  this.trigger = function () {
-                    return _this;
-                  };
-                }
-
-                return [4
-                /*yield*/
-                , this.resize()];
-
-              case 1:
-                _a.sent(); // Look at initial panel
-
+        var _this = this;
 
-                return [4
-                /*yield*/
-                , this._moveToInitialPanel()];
+        if (this._initialized) return Promise.resolve();
+        var camera = this._camera;
+        var renderer = this._renderer;
+        var control = this._control;
+        var virtualManager = this._virtualManager;
+        var originalTrigger = this.trigger;
+        var preventEventsBeforeInit = this._preventEventsBeforeInit;
+        camera.init();
+        virtualManager.init();
+        renderer.init(this);
+        control.init(this);
+
+        if (preventEventsBeforeInit) {
+          this.trigger = function () {
+            return _this;
+          };
+        }
 
-              case 2:
-                // Look at initial panel
-                _a.sent();
+        this._initialResize(); // Look at initial panel
 
-                if (this._autoResize) {
-                  this._autoResizer.enable();
-                }
 
-                if (this._preventClickOnDrag) {
-                  control.controller.addPreventClickHandler();
-                }
+        this._moveToInitialPanel();
 
-                if (this._disableOnInit) {
-                  this.disableInput();
-                }
+        if (this._autoResize) {
+          this._autoResizer.enable();
+        }
 
-                renderer.checkPanelContentsReady(renderer.panels);
+        if (this._preventClickOnDrag) {
+          control.controller.addPreventClickHandler();
+        }
 
-                this._plugins.forEach(function (plugin) {
-                  return plugin.init(_this);
-                }); // Done initializing & emit ready event
+        if (this._disableOnInit) {
+          this.disableInput();
+        }
 
+        renderer.checkPanelContentsReady(renderer.panels);
+        return renderer.render().then(function () {
+          // Done initializing & emit ready event
+          _this._plugins.forEach(function (plugin) {
+            return plugin.init(_this);
+          });
 
-                this._initialized = true;
+          _this._initialized = true;
 
-                if (preventEventsBeforeInit) {
-                  this.trigger = originalTrigger;
-                }
+          if (preventEventsBeforeInit) {
+            _this.trigger = originalTrigger;
+          }
 
-                this.trigger(new ComponentEvent$1(EVENTS.READY));
-                return [2
-                /*return*/
-                ];
-            }
-          });
+          _this.trigger(new ComponentEvent$1(EVENTS.READY));
         });
       };
       /**
@@ -15682,7 +15794,7 @@ version: 4.5.0
           console.warn("\"circular\" and \"bound\" option cannot be used together, ignoring bound.");
         }
 
-        return new Camera$1({
+        return new Camera$1(this, {
           align: this._align
         });
       };
@@ -15718,23 +15830,59 @@ version: 4.5.0
       };
 
       __proto._moveToInitialPanel = function () {
-        return __awaiter(this, void 0, void 0, function () {
-          var renderer, control, initialPanel;
-          return __generator(this, function (_a) {
-            renderer = this._renderer;
-            control = this._control;
-            initialPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
-            if (!initialPanel) return [2
-            /*return*/
-            ];
-            control.setActive(initialPanel, null, false);
-            return [2
-            /*return*/
-            , control.moveToPanel(initialPanel, {
-              duration: 0
-            })];
-          });
-        });
+        var renderer = this._renderer;
+        var control = this._control;
+        var camera = this._camera;
+        var initialPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
+        if (!initialPanel) return;
+        var nearestAnchor = camera.findNearestAnchor(initialPanel.position);
+        control.setActive(initialPanel, null, false);
+
+        if (!nearestAnchor) {
+          throw new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(initialPanel.position), CODE.POSITION_NOT_REACHABLE);
+        }
+
+        var position = initialPanel.position;
+
+        if (!camera.canReach(initialPanel)) {
+          position = nearestAnchor.position;
+        }
+
+        camera.lookAt(position);
+        control.updateInput();
+        camera.updateOffset();
+      };
+
+      __proto._initialResize = function () {
+        var viewport = this._viewport;
+        var renderer = this._renderer;
+        var camera = this._camera;
+        var control = this._control;
+        this.trigger(new ComponentEvent$1(EVENTS.BEFORE_RESIZE, {
+          width: 0,
+          height: 0,
+          element: viewport.element
+        }));
+        viewport.resize();
+        renderer.updatePanelSize();
+        camera.updateAlignPos();
+        camera.updateRange();
+        camera.updateAnchors();
+        camera.updateOffset();
+        control.updateInput();
+        var newWidth = viewport.width;
+        var newHeight = viewport.height;
+        var sizeChanged = newWidth !== 0 || newHeight !== 0;
+        this.trigger(new ComponentEvent$1(EVENTS.AFTER_RESIZE, {
+          width: viewport.width,
+          height: viewport.height,
+          prev: {
+            width: 0,
+            height: 0
+          },
+          sizeChanged: sizeChanged,
+          element: viewport.element
+        }));
       };
       /**
        * Version info string
@@ -15748,7 +15896,7 @@ version: 4.5.0
        */
 
 
-      Flicking.VERSION = "4.5.0";
+      Flicking.VERSION = "4.6.1";
       return Flicking;
     }(Component$1);
 
@@ -15788,7 +15936,7 @@ version: 4.5.0
     var withFlickingMethods = function (prototype, flickingName) {
       [Component$1.prototype, Flicking.prototype].forEach(function (proto) {
         Object.getOwnPropertyNames(proto).filter(function (name) {
-          return !prototype[name] && !name.startsWith("_") && name !== "constructor";
+          return !prototype[name] && name.indexOf("_") !== 0 && name !== "constructor";
         }).forEach(function (name) {
           var descriptor = Object.getOwnPropertyDescriptor(proto, name);
 
@@ -15814,7 +15962,8 @@ version: 4.5.0
               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));
               };
             }
 
@@ -15844,6 +15993,9 @@ version: 4.5.0
 
       var prevList = __spread$1(diffResult.prevList);
 
+      var added = [];
+      var removed = [];
+
       if (diffResult.removed.length > 0) {
         var endIdx_1 = -1;
         var prevIdx_1 = -1;
@@ -15853,7 +16005,7 @@ version: 4.5.0
           }
 
           if (prevIdx_1 >= 0 && removedIdx !== prevIdx_1 - 1) {
-            batchRemove(renderer, prevIdx_1, endIdx_1 + 1);
+            removed.push.apply(removed, __spread$1(batchRemove(renderer, prevIdx_1, endIdx_1 + 1)));
             endIdx_1 = removedIdx;
             prevIdx_1 = removedIdx;
           } else {
@@ -15862,39 +16014,34 @@ version: 4.5.0
 
           prevList.splice(removedIdx, 1);
         });
-        batchRemove(renderer, prevIdx_1, endIdx_1 + 1);
+        removed.push.apply(removed, __spread$1(batchRemove(renderer, prevIdx_1, endIdx_1 + 1)));
       }
 
       diffResult.ordered.forEach(function (_a) {
         var _b = __read$1(_a, 2),
-            prevIdx = _b[0],
-            newIdx = _b[1];
-
-        var prevPanel = panels[prevIdx];
-        var indexDiff = newIdx - prevIdx;
-
-        if (indexDiff > 0) {
-          var middlePanels = panels.slice(prevIdx + 1, newIdx + 1);
-          prevPanel.increaseIndex(indexDiff);
-          middlePanels.forEach(function (panel) {
-            return panel.decreaseIndex(1);
-          });
-        } else {
-          var middlePanels = panels.slice(newIdx, prevIdx);
-          prevPanel.decreaseIndex(-indexDiff);
-          middlePanels.forEach(function (panel) {
-            return panel.increaseIndex(1);
-          });
-        } // Update position
-
+            from = _b[0],
+            to = _b[1];
 
-        prevPanel.resize();
+        var prevPanel = panels.splice(from, 1)[0];
+        panels.splice(to, 0, prevPanel);
       });
 
       if (diffResult.ordered.length > 0) {
+        panels.forEach(function (panel, idx) {
+          var indexDiff = idx - panel.index;
+
+          if (indexDiff > 0) {
+            panel.increaseIndex(indexDiff);
+          } else {
+            panel.decreaseIndex(-indexDiff);
+          }
+        });
         panels.sort(function (panel1, panel2) {
           return panel1.index - panel2.index;
         });
+        panels.forEach(function (panel) {
+          panel.updatePosition();
+        });
       }
 
       if (diffResult.added.length > 0) {
@@ -15907,7 +16054,7 @@ version: 4.5.0
           }
 
           if (prevIdx_2 >= 0 && addedIdx !== prevIdx_2 + 1) {
-            batchInsert(renderer, diffResult, addedElements_1, startIdx_1, idx + 1);
+            added.push.apply(added, __spread$1(batchInsert(renderer, diffResult, addedElements_1, startIdx_1, idx + 1)));
             startIdx_1 = -1;
             prevIdx_2 = -1;
           } else {
@@ -15916,13 +16063,15 @@ version: 4.5.0
         });
 
         if (startIdx_1 >= 0) {
-          batchInsert(renderer, diffResult, addedElements_1, startIdx_1);
+          added.push.apply(added, __spread$1(batchInsert(renderer, diffResult, addedElements_1, startIdx_1)));
         }
       }
+
+      renderer.updateAfterPanelChange(added, removed);
     });
 
     var batchInsert = function (renderer, diffResult, addedElements, startIdx, endIdx) {
-      renderer.batchInsert.apply(renderer, __spread$1(diffResult.added.slice(startIdx, endIdx).map(function (index, elIdx) {
+      return renderer.batchInsertDefer.apply(renderer, __spread$1(diffResult.added.slice(startIdx, endIdx).map(function (index, elIdx) {
         return {
           index: index,
           elements: [addedElements[elIdx]],
@@ -15933,7 +16082,7 @@ version: 4.5.0
 
     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