@egjs/flicking 4.8.1 → 4.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.8.1",
+	"version": "4.9.2",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",
@@ -23,7 +23,7 @@
 		"test": "npm run test --prefix test/unit",
 		"test:chrome": "npm run test:chrome --prefix test/unit",
 		"test:cfc": "npm run test --prefix test/cfc",
-		"lint": "eslint 'src/**/*.ts'",
+		"lint": "eslint src/**/*.ts",
 		"lint:test": "eslint 'test/unit/**/*.ts'",
 		"jsdoc": "jsdoc -c jsdoc.json",
 		"jsdoc:watch": "npm-watch jsdoc",
@@ -136,7 +136,7 @@
 		"typescript-transform-paths": "^2.2.3"
 	},
 	"dependencies": {
-		"@egjs/axes": "^3.2.2",
+		"@egjs/axes": "^3.6.0",
 		"@egjs/component": "^3.0.1",
 		"@egjs/imready": "^1.1.3",
 		"@egjs/list-differ": "^1.0.0"

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();
@@ -1069,6 +1084,10 @@ class Flicking extends Component<FlickingEvents> {
       return Promise.reject(new FlickingError(ERROR.MESSAGE.ANIMATION_ALREADY_PLAYING, ERROR.CODE.ANIMATION_ALREADY_PLAYING));
     }
 
+    if (this._control.holding) {
+      this._control.controller.release();
+    }
+
     return this._control.moveToPanel(panel, {
       duration,
       direction
@@ -1487,11 +1506,12 @@ class Flicking extends Component<FlickingEvents> {
     const renderer = this._renderer;
     const control = this._control;
     const camera = this._camera;
-    const initialPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
+    const defaultPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
 
-    if (!initialPanel) return;
+    if (!defaultPanel) return;
 
-    const nearestAnchor = camera.findNearestAnchor(initialPanel.position);
+    const nearestAnchor = camera.findNearestAnchor(defaultPanel.position);
+    const initialPanel = (nearestAnchor && defaultPanel.index !== nearestAnchor.panel.index) ? nearestAnchor.panel : defaultPanel;
     control.setActive(initialPanel, null, false);
 
     if (!nearestAnchor) {

package/src/control/AxesController.ts

@@ -202,6 +202,18 @@ class AxesController {
     return this;
   }
 
+  /**
+   * Releases ongoing user input (mouse/touch)
+   * @ko 사용자의 현재 입력(마우스/터치)를 중단시킵니다
+   * @chainable
+   * @return {this}
+   */
+  public release(): this {
+    this._panInput?.release();
+
+    return this;
+  }
+
   /**
    * Update {@link https://naver.github.io/egjs-axes/ @egjs/axes}'s state
    * @ko {@link https://naver.github.io/egjs-axes/ @egjs/axes}의 상태를 갱신합니다

package/src/control/Control.ts

@@ -161,6 +161,18 @@ abstract class Control {
     return this;
   }
 
+  /**
+   * Releases ongoing user input (mouse/touch)
+   * @ko 사용자의 현재 입력(마우스/터치)를 중단시킵니다
+   * @chainable
+   * @return {this}
+   */
+  public release(): this {
+    this._controller.release();
+
+    return this;
+  }
+
   /**
    * Update position after resizing
    * @ko resize 이후에 position을 업데이트합니다

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";
 
@@ -308,21 +308,37 @@ class Panel {
    */
   public resize(cached?: {
     size: number;
-    height: number;
+    height?: number;
     margin: { prev: number; next: number };
   }): this {
     const el = this.element;
     const flicking = this._flicking;
-    const horizontal = flicking.horizontal;
+    const {
+      horizontal,
+      useFractionalSize
+    } = flicking;
 
     if (cached) {
       this._size = cached.size;
       this._margin = { ...cached.margin };
-      this._height = cached.height;
+      this._height = cached.height ?? getElementSize({
+        el,
+        horizontal: false,
+        useFractionalSize,
+        useOffset: true,
+        style: getStyle(el)
+      });
     } 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 +347,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/renderer/Renderer.ts

@@ -496,8 +496,8 @@ abstract class Renderer {
       : { height: panelSize };
     const firstPanelSizeObj = {
       size: panelSize,
-      height: referencePanel.height,
-      margin: referencePanel.margin
+      margin: referencePanel.margin,
+      ...(!flicking.horizontal && { height: referencePanel.height})
     };
 
     if (!flicking.noPanelStyleOverride) {

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;