@egjs/flicking - npm Package Compare versions

Comparing version 4.2.1 to 4.2.2

declaration/core/panel/Panel.d.ts

@@ -53,3 +53,14 @@ import Flicking from "../../Flicking";
     abstract markForHide(): any;
-    resize(): this;
+    resize(cached?: {
+        size: number;
+        height: number;
+        margin: {
+            prev: number;
+            next: number;
+        };
+    }): this;
+    setSize({ width, height }: Partial<{
+        width: number | string;
+        height: number | string;
+    }>): this;
     contains(element: HTMLElement): boolean;
@@ -56,0 +67,0 @@ destroy(): void;

declaration/Flicking.d.ts

@@ -40,2 +40,4 @@ import Component from "@egjs/component";
     adaptive: boolean;
+    panelsPerView: number;
+    noPanelStyleOverride: boolean;
     needPanelThreshold: number;
@@ -76,2 +78,4 @@ preventEventsBeforeInit: boolean;
     private _adaptive;
+    private _panelsPerView;
+    private _noPanelStyleOverride;
     private _needPanelThreshold;
@@ -117,2 +121,4 @@ private _preventEventsBeforeInit;
     get adaptive(): FlickingOptions["adaptive"];
+    get panelsPerView(): FlickingOptions["panelsPerView"];
+    get noPanelStyleOverride(): FlickingOptions["noPanelStyleOverride"];
     get needPanelThreshold(): FlickingOptions["needPanelThreshold"];
@@ -146,2 +152,4 @@ get preventEventsBeforeInit(): FlickingOptions["preventEventsBeforeInit"];
     set adaptive(val: FlickingOptions["adaptive"]);
+    set panelsPerView(val: FlickingOptions["panelsPerView"]);
+    set noPanelStyleOverride(val: FlickingOptions["noPanelStyleOverride"]);
     set needPanelThreshold(val: FlickingOptions["needPanelThreshold"]);
@@ -162,3 +170,3 @@ set preventEventsBeforeInit(val: FlickingOptions["preventEventsBeforeInit"]);
     set autoResize(val: FlickingOptions["autoResize"]);
-    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, bound, adaptive, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, disableOnInit, renderOnlyVisible, autoInit, autoResize, renderExternal }?: Partial<FlickingOptions>);
+    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, bound, adaptive, panelsPerView, noPanelStyleOverride, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, disableOnInit, renderOnlyVisible, autoInit, autoResize, renderExternal }?: Partial<FlickingOptions>);
     init(): Promise<void>;
@@ -165,0 +173,0 @@ destroy(): void;

declaration/renderer/index.d.ts

@@ -5,3 +5,2 @@ import Renderer, { RendererOptions } from "./Renderer";
 export { Renderer, VanillaRenderer, ExternalRenderer };
-export * from "./RenderingStrategy";
 export type { RendererOptions };

declaration/renderer/Renderer.d.ts

 import Flicking, { FlickingOptions } from "../Flicking";
 import Panel, { PanelOptions } from "../core/panel/Panel";
-import RenderingStrategy from "./RenderingStrategy/RenderingStrategy";
 export interface RendererOptions {
     align: FlickingOptions["align"];
-    strategy: RenderingStrategy;
 }
@@ -11,3 +9,2 @@ declare abstract class Renderer {
     protected _panels: Panel[];
-    protected _renderingStrategy: RenderingStrategy;
     protected _align: RendererOptions["align"];
@@ -18,3 +15,3 @@ get panels(): Panel[];
     set align(val: RendererOptions["align"]);
-    constructor({ align, strategy }?: Partial<RendererOptions>);
+    constructor({ align }?: Partial<RendererOptions>);
     abstract render(): Promise<void>;
@@ -41,3 +38,6 @@ abstract forceRenderAllPanels(): Promise<void>;
     protected _updateCameraAndControl(): void;
+    protected _updateRenderingPanels(): void;
+    protected _showOnlyVisiblePanels(flicking: Flicking): void;
+    protected _updatePanelSizeByGrid(flicking: Flicking): void;
 }
 export default Renderer;

package.json

 {
 	"name": "@egjs/flicking",
-	"version": "4.2.1",
+	"version": "4.2.2",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
@@ -17,8 +17,2 @@ "main": "dist/flicking.js",
 		"test": "karma start",
-		"e2e": "concurrently -k -r -s \"first\" npm:e2e:open-silent npm:e2e:once",
-		"e2e:once": "codeceptjs run --steps",
-		"e2e:headless": "HEADLESS=true codeceptjs run --steps",
-		"e2e:ui": "concurrently -k -r -s \"first\" npm:e2e:open-silent \"codecept-ui --app\"",
-		"e2e:open": "npm run storybook:all",
-		"e2e:open-silent": "npm run storybook:all 2>&1 >/dev/null",
 		"test:chrome": "karma start --chrome",
@@ -28,3 +22,2 @@ "coverage": "karma start --coverage && print-coveralls --sort=desc",
 		"lint:test": "eslint 'test/unit/**/*.ts'",
-		"lint:e2e": "eslint 'test/e2e/**/*.ts'",
 		"jsdoc": "jsdoc -c jsdoc.json",
@@ -44,11 +37,3 @@ "jsdoc:watch": "npm-watch jsdoc",
 		"packages:build": "pvu --build=react-flicking,ngx-flicking,vue-flicking,vue3-flicking,svelte-flicking",
-		"packages:publish": "pvu --publish=react-flicking,ngx-flicking/dist/ngx-flicking,vue-flicking,vue3-flicking,svelte-flicking",
-		"storybook": "npm run storybook:all & npm run storybook:main",
-		"storybook:main": "node_modules/@storybook/react/bin/index.js -p 6006",
-		"storybook:all": "concurrently -r npm:storybook:html npm:storybook:react npm:storybook:vue npm:storybook:angular",
-		"storybook:html": "node_modules/@storybook/html/bin/index.js -p 9005 -c .storybook/html -s ./test/e2e/public --quiet",
-		"storybook:react": "node_modules/@storybook/react/bin/index.js -p 9006 -c .storybook/react -s ./test/e2e/public --quiet",
-		"storybook:vue": "node_modules/@storybook/vue/bin/index.js -p 9007 -c .storybook/vue -s ./test/e2e/public --quiet",
-		"storybook:angular": "node_modules/@storybook/angular/bin/index.js -p 9008 -c .storybook/angular -s ./test/e2e/public --quiet",
-		"build-storybook": "build-storybook"
+		"packages:publish": "pvu --publish=react-flicking,ngx-flicking/dist/ngx-flicking,vue-flicking,vue3-flicking,svelte-flicking"
 	},
@@ -90,17 +75,2 @@ "repository": {
 	"devDependencies": {
-		"@angular-devkit/build-angular": "^0.1102.5",
-		"@angular-devkit/core": "^11.2.5",
-		"@angular/cli": "^11.2.5",
-		"@angular/common": "^11.2.6",
-		"@angular/compiler": "^11.2.6",
-		"@angular/compiler-cli": "^11.2.6",
-		"@angular/core": "^11.2.6",
-		"@angular/forms": "^11.2.6",
-		"@angular/platform-browser": "^11.2.6",
-		"@angular/platform-browser-dynamic": "^11.2.6",
-		"@babel/core": "^7.13.10",
-		"@babel/preset-env": "^7.14.4",
-		"@codeceptjs/configure": "^0.6.2",
-		"@codeceptjs/examples": "^1.2.1",
-		"@codeceptjs/ui": "^0.4.3",
 		"@daybrush/jsdoc": "^0.3.10",
@@ -113,10 +83,2 @@ "@egjs/flicking-plugins": "^4.0.0-beta.1",
 		"@rollup/plugin-replace": "^2.4.1",
-		"@storybook/addon-actions": "^6.1.21",
-		"@storybook/addon-essentials": "^6.1.21",
-		"@storybook/addon-links": "^6.1.21",
-		"@storybook/angular": "^6.1.21",
-		"@storybook/client-api": "^6.1.21",
-		"@storybook/html": "^6.1.21",
-		"@storybook/react": "^6.1.21",
-		"@storybook/vue": "^6.1.21",
 		"@types/chai": "^4.2.15",
@@ -135,4 +97,2 @@ "@types/fs-extra": "^9.0.11",
 		"chalk": "^2.4.2",
-		"codeceptjs": "^3.0.5",
-		"codeceptjs-resemblehelper": "^1.9.3",
 		"concurrently": "^6.0.0",
@@ -163,4 +123,2 @@ "core-js": "^3.9.1",
 		"mocha": "^5.2.0",
-		"npm-watch": "^0.9.0",
-		"playwright": "^1.9.2",
 		"postcss-clean": "^1.2.2",
@@ -171,4 +129,2 @@ "postcss-cli": "^7.1.1",
 		"pvu": "^0.4.1",
-		"react": "^17.0.1",
-		"react-dom": "^17.0.1",
 		"rollup": "^2.41.5",
@@ -182,7 +138,5 @@ "rollup-plugin-livereload": "^1.3.0",
 		"rollup-plugin-visualizer": "^4.2.1",
-		"rxjs": "^6.6.6",
 		"sinon": "^7.2.3",
 		"sync-exec": "^0.6.2",
 		"ts-mock-imports": "^1.3.3",
-		"ts-node": "^9.1.1",
 		"tsconfig-paths-webpack-plugin": "^3.5.1",
@@ -193,7 +147,3 @@ "tslib": "^2.1.0",
 		"typescript": "^4.2.3",
-		"typescript-transform-paths": "^2.2.3",
-		"vue": "^2.6.12",
-		"vue-loader": "^15.9.6",
-		"vue-template-compiler": "^2.6.12",
-		"zone.js": "^0.11.4"
+		"typescript-transform-paths": "^2.2.3"
 	},
@@ -200,0 +150,0 @@ "dependencies": {

src/camera/BoundCamera.ts

@@ -7,3 +7,3 @@ /*
 import AnchorPoint from "../core/AnchorPoint";
-import { getFlickingAttached } from "../utils";
+import { getFlickingAttached, parseAlign } from "../utils";
 
@@ -43,8 +43,18 @@ import Camera from "./Camera";
     const panelAreaSize = lastPanelNext - firstPanelPrev;
-    const canSetBoundMode = viewportSize < panelAreaSize;
+    const isBiggerThanViewport = viewportSize < panelAreaSize;
 
-    if (canSetBoundMode) {
-      this._range = { min: firstPanelPrev + alignPos, max: lastPanelNext - viewportSize + alignPos };
+    const firstPos = firstPanelPrev + alignPos;
+    const lastPos = lastPanelNext - viewportSize + alignPos;
+
+    if (isBiggerThanViewport) {
+      this._range = { min: firstPos, max: lastPos };
     } else {
-      this._range = { min: firstPanel.position, max: lastPanel.position };
+      const align = this._align;
+      const alignVal = typeof align === "object"
+        ? (align as { camera: string | number }).camera
+        : align;
+
+      const pos = firstPos + parseAlign(alignVal, lastPos - firstPos);
+
+      this._range = { min: pos, max: pos };
     }
@@ -51,0 +61,0 @@

src/cfc/sync.ts

@@ -10,15 +10,15 @@ import { DiffResult } from "@egjs/list-differ";
   if (diffResult.removed.length > 0) {
-    let startIdx = -1;
+    let endIdx = -1;
     let prevIdx = -1;
 
-    diffResult.removed.forEach((removedIdx, idx) => {
-      if (startIdx < 0) {
-        startIdx = idx;
+    diffResult.removed.forEach(removedIdx => {
+      if (endIdx < 0) {
+        endIdx = removedIdx;
       }
 
-      if (prevIdx >= 0 && removedIdx !== prevIdx + 1) {
-        batchRemove(renderer, diffResult, startIdx, idx + 1);
+      if (prevIdx >= 0 && removedIdx !== prevIdx - 1) {
+        batchRemove(renderer, prevIdx, endIdx + 1);
 
-        startIdx = -1;
-        prevIdx = -1;
+        endIdx = removedIdx;
+        prevIdx = removedIdx;
       } else {
@@ -29,5 +29,3 @@ prevIdx = removedIdx;
 
-    if (startIdx >= 0) {
-      batchRemove(renderer, diffResult, startIdx);
-    }
+    batchRemove(renderer, prevIdx, endIdx + 1);
   }
@@ -79,4 +77,4 @@
 
-const batchRemove = (renderer: Renderer, diffResult: DiffResult<any>, startIdx: number, endIdx?: number) => {
-  const removed = diffResult.removed.slice(startIdx, endIdx);
+const batchRemove = (renderer: Renderer, startIdx: number, endIdx?: number) => {
+  const removed = renderer.panels.slice(startIdx, endIdx);
 
@@ -83,0 +81,0 @@ renderer.batchRemove({ index: startIdx, deleteCount: removed.length });

src/control/StrictControl.ts

@@ -123,8 +123,10 @@ /*
 
-    if (controlParams.position < prevPos) {
-      controlParams.position += camera.rangeDiff;
-    }
+    if (controlParams.circular) {
+      if (controlParams.position < prevPos) {
+        controlParams.position += camera.rangeDiff;
+      }
 
-    if (controlParams.position > nextPos) {
-      controlParams.position -= camera.rangeDiff;
+      if (controlParams.position > nextPos) {
+        controlParams.position -= camera.rangeDiff;
+      }
     }
@@ -131,0 +133,0 @@

src/core/panel/Panel.ts

@@ -6,3 +6,3 @@ /*
 import Flicking from "../../Flicking";
-import { getProgress, getStyle, parseAlign } from "../../utils";
+import { getProgress, getStyle, isString, parseAlign } from "../../utils";
 import { ALIGN, DIRECTION } from "../../const/external";
@@ -271,6 +271,11 @@ import { LiteralUnion, ValueOf } from "../../type/internal";
    * @ko 패널의 크기를 갱신합니다
+   * @param {object} cached Predefined cached size of the panel<ko>사전에 캐시된 패널의 크기 정보</ko>
    * @chainable
    * @return {this}
    */
-  public resize(): this {
+  public resize(cached?: {
+    size: number;
+    height: number;
+    margin: { prev: number; next: number };
+  }): this {
     const el = this.element;
@@ -282,13 +287,19 @@ const elStyle = getStyle(el);
 
-    this._size = horizontal ? el.offsetWidth : el.offsetHeight;
+    if (cached) {
+      this._size = cached.size;
+      this._margin = { ...cached.margin };
+      this._height = cached.height;
+    } else {
+      this._size = horizontal ? el.offsetWidth : el.offsetHeight;
+      this._margin = horizontal
+        ? {
+          prev: parseFloat(elStyle.marginLeft || "0"),
+          next: parseFloat(elStyle.marginRight || "0")
+        } : {
+          prev: parseFloat(elStyle.marginTop || "0"),
+          next: parseFloat(elStyle.marginBottom || "0")
+        };
+      this._height = horizontal ? el.offsetHeight : this._size;
+    }
 
-    this._margin = horizontal
-      ? {
-        prev: parseFloat(elStyle.marginLeft || "0"),
-        next: parseFloat(elStyle.marginRight || "0")
-      } : {
-        prev: parseFloat(elStyle.marginTop || "0"),
-        next: parseFloat(elStyle.marginBottom || "0")
-      };
-
     this._pos = prevPanel
@@ -298,4 +309,2 @@ ? prevPanel.range.max + prevPanel.margin.next + this._margin.prev
 
-    this._height = horizontal ? el.offsetHeight : this._size;
-
     this._updateAlignPos();
@@ -307,2 +316,38 @@
   /**
+   * Change panel's size. This will change the actual size of the panel element by changing its CSS width/height property
+   * @ko 패널 크기를 변경합니다. 패널 엘리먼트에 해당 크기의 CSS width/height를 적용합니다
+   * @param {object} [size] New panel size<ko>새 패널 크기</ko>
+   * @param {number|string} [size.width] CSS string or number(in px)<ko>CSS 문자열 또는 숫자(px)</ko>
+   * @param {number|string} [size.height] CSS string or number(in px)<ko>CSS 문자열 또는 숫자(px)</ko>
+   * @chainable
+   * @return {this}
+   */
+  public setSize({
+    width,
+    height
+  }: Partial<{
+    width: number | string;
+    height: number | string;
+  }>): this {
+    const el = this.element;
+
+    if (width != null) {
+      if (isString(width)) {
+        el.style.width = width;
+      } else {
+        el.style.width = `${width}px`;
+      }
+    }
+    if (height != null) {
+      if (isString(height)) {
+        el.style.height = height;
+      } else {
+        el.style.height = `${height}px`;
+      }
+    }
+
+    return this;
+  }
+
+  /**
    * Check whether the given element is inside of this panel's {@link Panel#element element}
@@ -309,0 +354,0 @@ * @ko 해당 엘리먼트가 이 패널의 {@link Panel#element element} 내에 포함되어 있는지를 반환합니다

src/Flicking.ts

@@ -12,3 +12,3 @@ /*
 import { BoundCamera, Camera, CircularCamera, LinearCamera } from "./camera";
-import { Renderer, VanillaRenderer, ExternalRenderer, RawRenderingStrategy, VisibleRenderingStrategy } from "./renderer";
+import { Renderer, VanillaRenderer, ExternalRenderer } from "./renderer";
 import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION } from "./const/external";
@@ -55,2 +55,4 @@ import * as ERROR from "./const/error";
   adaptive: boolean;
+  panelsPerView: number;
+  noPanelStyleOverride: boolean;
   // EVENT
@@ -115,7 +117,12 @@ needPanelThreshold: number;
   private _adaptive: FlickingOptions["adaptive"];
+  private _panelsPerView: FlickingOptions["panelsPerView"];
+  private _noPanelStyleOverride: FlickingOptions["noPanelStyleOverride"];
+
   private _needPanelThreshold: FlickingOptions["needPanelThreshold"];
   private _preventEventsBeforeInit: FlickingOptions["preventEventsBeforeInit"];
+
   private _deceleration: FlickingOptions["deceleration"];
   private _duration: FlickingOptions["duration"];
   private _easing: FlickingOptions["easing"];
+
   private _inputType: FlickingOptions["inputType"];
@@ -129,3 +136,5 @@ private _moveType: FlickingOptions["moveType"];
   private _disableOnInit: FlickingOptions["disableOnInit"];
+
   private _renderOnlyVisible: FlickingOptions["renderOnlyVisible"];
+
   private _autoResize: FlickingOptions["autoResize"];
@@ -338,2 +347,18 @@ private _autoInit: FlickingOptions["autoInit"];
   public get adaptive() { return this._adaptive; }
+  /**
+   * A visible number of panels on viewport. Enabling this option will automatically resize panel size
+   * @ko 한 화면에 보이는 패널의 개수. 이 옵션을 활성화할 경우 패널의 크기를 강제로 재조정합니다
+   * @type {number}
+   * @default -1
+   */
+  public get panelsPerView() { return this._panelsPerView; }
+  /**
+   * Enabling this option will not change `width/height` style of the panels if {@link Flicking#panelsPerView} is enabled.
+   * This behavior can be useful in terms of performance when you're manually managing all panel sizes
+   * @ko 이 옵션을 활성화할 경우, {@link Flicking#panelsPerView} 옵션이 활성화되었을 때 패널의 `width/height` 스타일을 변경하지 않도록 설정합니다.
+   * 모든 패널들의 크기를 직접 관리하고 있을 경우, 이 옵션을 활성화하면 성능면에서 유리할 수 있습니다
+   * @type {boolean}
+   * @default false
+   */
+  public get noPanelStyleOverride() { return this._noPanelStyleOverride; }
   // EVENTS
@@ -534,2 +559,4 @@ /**
   public set adaptive(val: FlickingOptions["adaptive"]) { this._adaptive = val; }
+  public set panelsPerView(val: FlickingOptions["panelsPerView"]) { this._panelsPerView = val; }
+  public set noPanelStyleOverride(val: FlickingOptions["noPanelStyleOverride"]) { this._noPanelStyleOverride = val; }
   // EVENTS
@@ -606,2 +633,4 @@ public set needPanelThreshold(val: FlickingOptions["needPanelThreshold"]) { this._needPanelThreshold = val; }
     adaptive = false,
+    panelsPerView = -1,
+    noPanelStyleOverride = false,
     needPanelThreshold = 0,
@@ -638,2 +667,4 @@ preventEventsBeforeInit = true,
     this._adaptive = adaptive;
+    this._panelsPerView = panelsPerView;
+    this._noPanelStyleOverride = noPanelStyleOverride;
     this._needPanelThreshold = needPanelThreshold;
@@ -1249,9 +1280,4 @@ this._preventEventsBeforeInit = preventEventsBeforeInit;
   private _createRenderer(): Renderer {
-    const renderingStrategy = this._renderOnlyVisible
-      ? new VisibleRenderingStrategy()
-      : new RawRenderingStrategy();
-
     const rendererOptions = {
-      align: this._align,
-      strategy: renderingStrategy
+      align: this._align
     };
@@ -1258,0 +1284,0 @@

src/renderer/index.ts

@@ -9,3 +9,2 @@ /*
 
-
 export {
@@ -17,6 +16,4 @@ Renderer,
 
-export * from "./RenderingStrategy";
-
 export type {
   RendererOptions
 };

src/renderer/Renderer.ts

@@ -9,11 +9,9 @@ /*
 import Panel, { PanelOptions } from "../core/panel/Panel";
+import FlickingError from "../core/FlickingError";
 import { ALIGN, EVENTS } from "../const/external";
+import * as ERROR from "../const/error";
 import { getFlickingAttached, getMinusCompensatedIndex, includes } from "../utils";
 
-import RenderingStrategy from "./RenderingStrategy/RenderingStrategy";
-import RawRenderingStrategy from "./RenderingStrategy/RawRenderingStrategy";
-
 export interface RendererOptions {
   align: FlickingOptions["align"];
-  strategy: RenderingStrategy;
 }
@@ -29,3 +27,2 @@
   protected _panels: Panel[];
-  protected _renderingStrategy: RenderingStrategy;
 
@@ -73,9 +70,9 @@ // Options
   public constructor({
-    align = ALIGN.CENTER,
-    strategy = new RawRenderingStrategy()
+    align = ALIGN.CENTER
   }: Partial<RendererOptions> = {}) {
-    this._align = align;
     this._flicking = null;
-    this._renderingStrategy = strategy;
     this._panels = [];
+
+    // Bind options
+    this._align = align;
   }
@@ -143,3 +140,10 @@
   public updatePanelSize(): this {
-    this._panels.forEach(panel => panel.resize());
+    const flicking = getFlickingAttached(this._flicking, "Renderer");
+
+    if (flicking.panelsPerView > 0) {
+      this._updatePanelSizeByGrid(flicking);
+    } else {
+      flicking.panels.forEach(panel => panel.resize());
+    }
+
     return this;
@@ -318,4 +322,69 @@ }
   }
+
+  protected _updateRenderingPanels(): void {
+    const flicking = getFlickingAttached(this._flicking, "Renderer");
+
+    if (flicking.renderOnlyVisible) {
+      this._showOnlyVisiblePanels(flicking);
+    } else {
+      flicking.panels.forEach(panel => panel.markForShow());
+    }
+  }
+
+  protected _showOnlyVisiblePanels(flicking: Flicking) {
+    const panels = flicking.renderer.panels;
+    const camera = flicking.camera;
+
+    const visibleIndexes = camera.visiblePanels.reduce((visibles, panel) => {
+      visibles[panel.index] = true;
+      return visibles;
+    }, {});
+
+    panels.forEach(panel => {
+      if (panel.index in visibleIndexes) {
+        panel.markForShow();
+      } else if (!flicking.holding) {
+        // During the input sequence,
+        // Do not remove panel elements as it won't trigger touchend event.
+        panel.markForHide();
+      }
+    });
+
+    camera.updateOffset();
+  }
+
+  protected _updatePanelSizeByGrid(flicking: Flicking) {
+    const panels = flicking.panels;
+    const panelsPerView = flicking.panelsPerView;
+
+    if (panelsPerView <= 0) {
+      throw new FlickingError(ERROR.MESSAGE.WRONG_OPTION("panelsPerView", panelsPerView), ERROR.CODE.WRONG_OPTION);
+    }
+    if (panels.length <= 0) return;
+
+    // resize only the first panel
+    const firstPanel = panels[0];
+    firstPanel.resize();
+
+    const viewportSize = flicking.camera.size;
+    const gap = firstPanel.margin.prev + firstPanel.margin.next;
+
+    const panelSize = (viewportSize - gap * (panelsPerView - 1)) / panelsPerView;
+    const panelSizeObj = flicking.horizontal
+      ? { width: panelSize }
+      : { height: panelSize };
+    const firstPanelSizeObj = {
+      size: panelSize,
+      height: firstPanel.height,
+      margin: firstPanel.margin
+    };
+
+    if (!flicking.noPanelStyleOverride) {
+      flicking.panels.forEach(panel => panel.setSize(panelSizeObj));
+    }
+
+    flicking.panels.forEach(panel => panel.resize(firstPanelSizeObj));
+  }
 }
 
 export default Renderer;

src/renderer/VanillaRenderer.ts

@@ -17,3 +17,2 @@ /*
   public async render() {
-    const strategy = this._renderingStrategy;
     const flicking = getFlickingAttached(this._flicking, "Renderer");
@@ -23,3 +22,3 @@ const cameraEl = flicking.camera.element;
 
-    strategy.updateRenderingPanels(flicking);
+    this._updateRenderingPanels();
     const renderingPanels = this._getRenderingPanelsByOrder();
@@ -26,0 +25,0 @@

No alert changes

Improved metrics

Total package byte prevSize

3261195

increased by2.16%

Dev dependency count

67

decreased by-34.31%

Lines of code

33140

increased by2.4%

Worsened metrics

Number of package files

121

decreased by-6.2%

No dependency changes