@egjs/flicking 4.8.1 → 4.9.0

package/package.json

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

package/src/Flicking.ts

@@ -90,6 +90,7 @@ export interface FlickingOptions {
   useResizeObserver: boolean;
   resizeDebounce: number;
   maxResizeDebounce: number;
+  useFractionalSize: boolean;
   externalRenderer: ExternalRenderer | null;
 
   // @deprecated
@@ -164,6 +165,7 @@ class Flicking extends Component<FlickingEvents> {
   private _useResizeObserver: FlickingOptions["useResizeObserver"];
   private _resizeDebounce: FlickingOptions["resizeDebounce"];
   private _maxResizeDebounce: FlickingOptions["maxResizeDebounce"];
+  private _useFractionalSize: FlickingOptions["useFractionalSize"];
   private _externalRenderer: FlickingOptions["externalRenderer"];
   private _renderExternal: FlickingOptions["renderExternal"];
 
@@ -665,6 +667,17 @@ class Flicking extends Component<FlickingEvents> {
    * @default 100
    */
   public get maxResizeDebounce() { return this._maxResizeDebounce; }
+  /**
+   * By enabling this, Flicking will calculate all internal size with CSS width computed with getComputedStyle.
+   * This can prevent 1px offset issue in some cases where panel size has the fractional part.
+   * All sizes will have the original size before CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform} is applied on the element.
+   * @ko 이 옵션을 활성화할 경우, Flicking은 내부의 모든 크기를 {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect getBoundingClientRect}를 이용하여 계산합니다.
+   * 이를 통해, 패널 크기에 소수점을 포함할 경우에 발생할 수 있는 일부 1px 오프셋 이슈를 해결 가능합니다.
+   * 모든 크기는 CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform}이 엘리먼트에 적용되기 이전의 크기를 사용할 것입니다.
+   * @type {boolean}
+   * @default false
+   */
+  public get useFractionalSize() { return this._useFractionalSize; }
   /**
    * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
    * @ko 프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
@@ -814,6 +827,7 @@ class Flicking extends Component<FlickingEvents> {
     useResizeObserver = true,
     resizeDebounce = 0,
     maxResizeDebounce = 100,
+    useFractionalSize = false,
     externalRenderer = null,
     renderExternal = null
   }: Partial<FlickingOptions> = {}) {
@@ -856,11 +870,12 @@ class Flicking extends Component<FlickingEvents> {
     this._useResizeObserver = useResizeObserver;
     this._resizeDebounce = resizeDebounce;
     this._maxResizeDebounce = maxResizeDebounce;
+    this._useFractionalSize = useFractionalSize;
     this._externalRenderer = externalRenderer;
     this._renderExternal = renderExternal;
 
     // Create core components
-    this._viewport = new Viewport(getElement(root));
+    this._viewport = new Viewport(this, getElement(root));
     this._autoResizer = new AutoResizer(this);
     this._renderer = this._createRenderer();
     this._camera = this._createCamera();

package/src/core/Viewport.ts

@@ -2,13 +2,15 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import { getStyle, isString } from "../utils";
+import Flicking from "../Flicking";
+import { getElementSize, getStyle, isString } from "../utils";
 
 /**
  * A component that manages viewport size
  * @ko 뷰포트 크기 정보를 담당하는 컴포넌트
  */
 class Viewport {
+  private _flicking: Flicking;
   private _el: HTMLElement;
   private _width: number;
   private _height: number;
@@ -57,7 +59,8 @@ class Viewport {
   /**
    * @param el A viewport element<ko>뷰포트 엘리먼트</ko>
    */
-  public constructor(el: HTMLElement) {
+  public constructor(flicking: Flicking, el: HTMLElement) {
+    this._flicking = flicking;
     this._el = el;
     this._width = 0;
     this._height = 0;
@@ -120,9 +123,25 @@ class Viewport {
   public resize() {
     const el = this._el;
     const elStyle = getStyle(el);
+    const {
+      useFractionalSize
+    } = this._flicking;
+
+    this._width = getElementSize({
+      el,
+      horizontal: true,
+      useFractionalSize,
+      useOffset: false,
+      style: elStyle
+    });
+    this._height = getElementSize({
+      el,
+      horizontal: false,
+      useFractionalSize,
+      useOffset: false,
+      style: elStyle
+    });
 
-    this._width = el.clientWidth;
-    this._height = el.clientHeight;
     this._padding = {
       left: elStyle.paddingLeft ? parseFloat(elStyle.paddingLeft) : 0,
       right: elStyle.paddingRight ? parseFloat(elStyle.paddingRight) : 0,

package/src/core/panel/Panel.ts

@@ -3,7 +3,7 @@
  * egjs projects are licensed under the MIT license
  */
 import Flicking from "../../Flicking";
-import { getProgress, getStyle, parseAlign, setSize } from "../../utils";
+import { getElementSize, getProgress, getStyle, parseAlign, setSize } from "../../utils";
 import { ALIGN, DIRECTION } from "../../const/external";
 import { LiteralUnion, ValueOf } from "../../type/internal";
 
@@ -313,7 +313,10 @@ class Panel {
   }): this {
     const el = this.element;
     const flicking = this._flicking;
-    const horizontal = flicking.horizontal;
+    const {
+      horizontal,
+      useFractionalSize
+    } = flicking;
 
     if (cached) {
       this._size = cached.size;
@@ -322,7 +325,14 @@ class Panel {
     } else {
       const elStyle = getStyle(el);
 
-      this._size = horizontal ? el.offsetWidth : el.offsetHeight;
+      this._size = getElementSize({
+        el,
+        horizontal,
+        useFractionalSize,
+        useOffset: true,
+        style: elStyle
+      });
+
       this._margin = horizontal
         ? {
           prev: parseFloat(elStyle.marginLeft || "0"),
@@ -331,7 +341,16 @@ class Panel {
           prev: parseFloat(elStyle.marginTop || "0"),
           next: parseFloat(elStyle.marginBottom || "0")
         };
-      this._height = horizontal ? el.offsetHeight : this._size;
+
+      this._height = horizontal
+        ? getElementSize({
+          el,
+          horizontal: false,
+          useFractionalSize,
+          useOffset: true,
+          style: elStyle
+        })
+        : this._size;
     }
 
     this.updatePosition();

package/src/utils.ts

@@ -300,6 +300,48 @@ export const range = (end: number): number[] => {
   return arr;
 };
 
+export const getElementSize = ({
+  el,
+  horizontal,
+  useFractionalSize,
+  useOffset,
+  style
+}: {
+  el: HTMLElement;
+  horizontal: boolean;
+  useFractionalSize: boolean;
+  useOffset: boolean;
+  style: CSSStyleDeclaration;
+}): number => {
+  if (useFractionalSize) {
+    const baseSize = parseFloat(horizontal ? style.width : style.height);
+    const isBorderBoxSizing = style.boxSizing === "border-box";
+    const border = horizontal
+      ? parseFloat(style.borderLeftWidth || "0") + parseFloat(style.borderRightWidth || "0")
+      : parseFloat(style.borderTopWidth || "0") + parseFloat(style.borderBottomWidth || "0");
+
+    if (isBorderBoxSizing) {
+      return useOffset
+        ? baseSize
+        : baseSize - border;
+    } else {
+      const padding = horizontal
+        ? parseFloat(style.paddingLeft || "0") + parseFloat(style.paddingRight || "0")
+        : parseFloat(style.paddingTop || "0") + parseFloat(style.paddingBottom || "0");
+
+      return useOffset
+        ? baseSize + padding + border
+        : baseSize + padding;
+    }
+  } else {
+    const sizeStr = horizontal ? "Width" : "Height";
+
+    return useOffset
+      ? el[`offset${sizeStr}`]
+      : el[`client${sizeStr}`];
+  }
+};
+
 export const setPrototypeOf = Object.setPrototypeOf || ((obj, proto) => {
   obj.__proto__ = proto;
   return obj;