@egjs/flicking 4.14.2-beta.2 → 4.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.14.2-beta.2",
+	"version": "4.15.0",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.cjs.js",
 	"module": "dist/flicking.esm.js",

package/src/Flicking.ts

@@ -1870,9 +1870,12 @@ class Flicking extends Component<FlickingEvents> {
       return;
     }
     if (this._isResizing) {
+      // resize를 연속으로 발생하면 무시하기에 마지막 viewport를 사이즈를 알 수 없음.
+      // resize를 1번 더 실행할 수 잇는 스케줄링 등록
       this._scheduleResize = true;
       return;
     }
+
     this._scheduleResize = false;
     this._isResizing = true;
 
@@ -1951,6 +1954,7 @@ class Flicking extends Component<FlickingEvents> {
 
     this._isResizing = false;
 
+    // 연속으로 resize를 호출하는 경우를 대비하기 위해서 스케줄링 반영
     if (this._scheduleResize) {
       this.resize();
     }

package/src/cfc/getRenderingPanels.ts

@@ -13,7 +13,7 @@ export default <T>(flicking: Flicking, diffResult: DiffResult<T>) => {
     return map;
   }, {});
   const renderingPanels = flicking.panels
-      .filter(panel => !removedPanels[panel.index]);
+    .filter(panel => !removedPanels[panel.index]);
 
 
   if (!flicking.useCSSOrder) {
@@ -26,4 +26,3 @@ export default <T>(flicking: Flicking, diffResult: DiffResult<T>) => {
     ...diffResult.added.map(idx => diffResult.list[idx])
   ];
 };
-

package/src/renderer/Renderer.ts

@@ -521,7 +521,7 @@ abstract class Renderer {
     const firstPanelSizeObj = {
       size: panelSize,
       margin: referencePanel.margin,
-      ...(!flicking.horizontal && { height: referencePanel.height})
+      ...(!flicking.horizontal && { height: referencePanel.height })
     };
 
     if (!flicking.noPanelStyleOverride) {
@@ -567,11 +567,14 @@ abstract class Renderer {
     flicking.camera.applyTransform();
 
     if (flicking.useCSSOrder) {
-      // useCSSOrder를 사용하는 경우 DOM은 변화가 없지만 대신 CSS Order가 추가 된다.
-      const panels = flicking.panels;
+      // `useCSSOrder`를 사용하는 경우 DOM은 변화가 없지만 대신 css `order`값을 주입
+      const renderedPanels = flicking.renderer.panels.filter(panel => panel.rendered);
 
       this._strategy.getRenderingIndexesByOrder(flicking).forEach((domIndex, index) => {
-        panels[domIndex].element.style.order = `${index}`;
+        if (renderedPanels[domIndex].element) {
+          // 방어 코드 추가
+          renderedPanels[domIndex].element.style.order = `${index}`;
+        }
       });
     }
   }

package/src/renderer/VanillaRenderer.ts

@@ -44,7 +44,7 @@ class VanillaRenderer extends Renderer {
     let reversedElements: HTMLElement[] = [];
 
     if (flicking.useCSSOrder) {
-      // useCSSOrder를 사용하는 경우 원본 그대로 렌더링
+      // useCSSOrder를 사용하는 경우 DOM은 변화가 없지만 대신 css `order`값을 주입
       reversedElements = this.getRenderedPanels().map(panel => panel.element).reverse();
     } else {
       reversedElements = this._strategy