@egjs/flicking 4.8.1 → 4.9.0

package/TODO.md

@@ -0,0 +1,3 @@
+## React 18 대응
+- [] updateoffset을 미루기
+  - render가 완료되기 전에 updateOffset이 3번 호출되었음

package/declaration/Flicking.d.ts

@@ -64,6 +64,7 @@ export interface FlickingOptions {
     useResizeObserver: boolean;
     resizeDebounce: number;
     maxResizeDebounce: number;
+    useFractionalSize: boolean;
     externalRenderer: ExternalRenderer | null;
     renderExternal: {
         renderer: new (options: RendererOptions) => ExternalRenderer;
@@ -110,6 +111,7 @@ declare class Flicking extends Component<FlickingEvents> {
     private _useResizeObserver;
     private _resizeDebounce;
     private _maxResizeDebounce;
+    private _useFractionalSize;
     private _externalRenderer;
     private _renderExternal;
     private _initialized;
@@ -165,6 +167,7 @@ declare class Flicking extends Component<FlickingEvents> {
     get useResizeObserver(): FlickingOptions["useResizeObserver"];
     get resizeDebounce(): number;
     get maxResizeDebounce(): number;
+    get useFractionalSize(): boolean;
     get externalRenderer(): ExternalRenderer;
     get renderExternal(): {
         renderer: new (options: RendererOptions) => ExternalRenderer;
@@ -197,7 +200,7 @@ declare class Flicking extends Component<FlickingEvents> {
     set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]);
     set autoResize(val: FlickingOptions["autoResize"]);
     set useResizeObserver(val: FlickingOptions["useResizeObserver"]);
-    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, nested, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, maxResizeDebounce, externalRenderer, renderExternal }?: Partial<FlickingOptions>);
+    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, nested, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, maxResizeDebounce, useFractionalSize, externalRenderer, renderExternal }?: Partial<FlickingOptions>);
     init(): Promise<void>;
     destroy(): void;
     prev(duration?: number): Promise<void>;

package/declaration/core/Viewport.d.ts

@@ -1,4 +1,6 @@
+import Flicking from "../Flicking";
 declare class Viewport {
+    private _flicking;
     private _el;
     private _width;
     private _height;
@@ -13,7 +15,7 @@ declare class Viewport {
         top: number;
         bottom: number;
     };
-    constructor(el: HTMLElement);
+    constructor(flicking: Flicking, el: HTMLElement);
     setSize({ width, height }: Partial<{
         width: number | string;
         height: number | string;

package/declaration/utils.d.ts

@@ -35,4 +35,11 @@ export declare const setSize: (el: HTMLElement, { width, height }: Partial<{
 export declare const isBetween: (val: number, min: number, max: number) => boolean;
 export declare const circulateIndex: (index: number, max: number) => number;
 export declare const range: (end: number) => number[];
+export declare const getElementSize: ({ el, horizontal, useFractionalSize, useOffset, style }: {
+    el: HTMLElement;
+    horizontal: boolean;
+    useFractionalSize: boolean;
+    useOffset: boolean;
+    style: CSSStyleDeclaration;
+}) => number;
 export declare const setPrototypeOf: (o: any, proto: object) => any;

package/dist/flicking.esm.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.8.1
+version: 4.9.0
 */
 import Component, { ComponentEvent } from '@egjs/component';
 import Axes, { PanInput } from '@egjs/axes';
@@ -767,6 +767,29 @@ var range = function (end) {
 
   return arr;
 };
+var getElementSize = function (_a) {
+  var el = _a.el,
+      horizontal = _a.horizontal,
+      useFractionalSize = _a.useFractionalSize,
+      useOffset = _a.useOffset,
+      style = _a.style;
+
+  if (useFractionalSize) {
+    var baseSize = parseFloat(horizontal ? style.width : style.height);
+    var isBorderBoxSizing = style.boxSizing === "border-box";
+    var 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 {
+      var 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 {
+    var sizeStr = horizontal ? "Width" : "Height";
+    return useOffset ? el["offset" + sizeStr] : el["client" + sizeStr];
+  }
+};
 var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
   obj.__proto__ = proto;
   return obj;
@@ -817,10 +840,6 @@ function (_super) {
   return FlickingError;
 }(Error);
 
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
- */
 /**
  * A component that manages viewport size
  * @ko 뷰포트 크기 정보를 담당하는 컴포넌트
@@ -832,7 +851,8 @@ function () {
   /**
    * @param el A viewport element<ko>뷰포트 엘리먼트</ko>
    */
-  function Viewport(el) {
+  function Viewport(flicking, el) {
+    this._flicking = flicking;
     this._el = el;
     this._width = 0;
     this._height = 0;
@@ -948,8 +968,21 @@ function () {
   __proto.resize = function () {
     var el = this._el;
     var elStyle = getStyle(el);
-    this._width = el.clientWidth;
-    this._height = el.clientHeight;
+    var useFractionalSize = this._flicking.useFractionalSize;
+    this._width = getElementSize({
+      el: el,
+      horizontal: true,
+      useFractionalSize: useFractionalSize,
+      useOffset: false,
+      style: elStyle
+    });
+    this._height = getElementSize({
+      el: el,
+      horizontal: false,
+      useFractionalSize: useFractionalSize,
+      useOffset: false,
+      style: elStyle
+    });
     this._padding = {
       left: elStyle.paddingLeft ? parseFloat(elStyle.paddingLeft) : 0,
       right: elStyle.paddingRight ? parseFloat(elStyle.paddingRight) : 0,
@@ -5989,7 +6022,8 @@ function () {
   __proto.resize = function (cached) {
     var el = this.element;
     var flicking = this._flicking;
-    var horizontal = flicking.horizontal;
+    var horizontal = flicking.horizontal,
+        useFractionalSize = flicking.useFractionalSize;
 
     if (cached) {
       this._size = cached.size;
@@ -5997,7 +6031,13 @@ function () {
       this._height = cached.height;
     } else {
       var elStyle = getStyle(el);
-      this._size = horizontal ? el.offsetWidth : el.offsetHeight;
+      this._size = getElementSize({
+        el: el,
+        horizontal: horizontal,
+        useFractionalSize: useFractionalSize,
+        useOffset: true,
+        style: elStyle
+      });
       this._margin = horizontal ? {
         prev: parseFloat(elStyle.marginLeft || "0"),
         next: parseFloat(elStyle.marginRight || "0")
@@ -6005,7 +6045,13 @@ function () {
         prev: parseFloat(elStyle.marginTop || "0"),
         next: parseFloat(elStyle.marginBottom || "0")
       };
-      this._height = horizontal ? el.offsetHeight : this._size;
+      this._height = horizontal ? getElementSize({
+        el: el,
+        horizontal: false,
+        useFractionalSize: useFractionalSize,
+        useOffset: true,
+        style: elStyle
+      }) : this._size;
     }
 
     this.updatePosition();
@@ -6701,10 +6747,12 @@ function (_super) {
         resizeDebounce = _8 === void 0 ? 0 : _8,
         _9 = _b.maxResizeDebounce,
         maxResizeDebounce = _9 === void 0 ? 100 : _9,
-        _10 = _b.externalRenderer,
-        externalRenderer = _10 === void 0 ? null : _10,
-        _11 = _b.renderExternal,
-        renderExternal = _11 === void 0 ? null : _11;
+        _10 = _b.useFractionalSize,
+        useFractionalSize = _10 === void 0 ? false : _10,
+        _11 = _b.externalRenderer,
+        externalRenderer = _11 === void 0 ? null : _11,
+        _12 = _b.renderExternal,
+        renderExternal = _12 === void 0 ? null : _12;
 
     var _this = _super.call(this) || this; // Internal states
 
@@ -6744,10 +6792,11 @@ function (_super) {
     _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();
@@ -7660,6 +7709,23 @@ function (_super) {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "useFractionalSize", {
+    /**
+     * 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
+     */
+    get: function () {
+      return this._useFractionalSize;
+    },
+    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.
@@ -8471,7 +8537,7 @@ function (_super) {
    */
 
 
-  Flicking.VERSION = "4.8.1";
+  Flicking.VERSION = "4.9.0";
   return Flicking;
 }(Component);
 
@@ -8725,5 +8791,5 @@ var parseAlign = function (alignVal) {
  * egjs projects are licensed under the MIT license
  */
 
-export { ALIGN, AnchorPoint, AnimatingState, AxesController, BoundCameraMode, CIRCULAR_FALLBACK, CLASS, Camera, CircularCameraMode, Control, DIRECTION, DisabledState, DraggingState, CODE as ERROR_CODE, EVENTS, ExternalRenderer, FlickingError, FreeControl, HoldingState, IdleState, LinearCameraMode, MOVE_TYPE, NormalRenderingStrategy, Panel, Renderer, SnapControl, State, StateMachine, StrictControl, VanillaElementProvider, VanillaRenderer, Viewport, VirtualElementProvider, VirtualManager, VirtualPanel, VirtualRenderingStrategy, checkExistence, circulateIndex, circulatePosition, clamp, Flicking as default, find, findIndex, findRight, getDefaultCameraTransform, getDirection, getElement, getFlickingAttached, getMinusCompensatedIndex, getProgress, getRenderingPanels, getStyle, includes, isBetween, isString, merge, parseAlign$1 as parseAlign, parseArithmeticExpression, parseArithmeticSize, parseBounce, parseCSSSizeValue, parseElement, parsePanelAlign, range, setPrototypeOf, setSize, sync, toArray, withFlickingMethods };
+export { ALIGN, AnchorPoint, AnimatingState, AxesController, BoundCameraMode, CIRCULAR_FALLBACK, CLASS, Camera, CircularCameraMode, Control, DIRECTION, DisabledState, DraggingState, CODE as ERROR_CODE, EVENTS, ExternalRenderer, FlickingError, FreeControl, HoldingState, IdleState, LinearCameraMode, MOVE_TYPE, NormalRenderingStrategy, Panel, Renderer, SnapControl, State, StateMachine, StrictControl, VanillaElementProvider, VanillaRenderer, Viewport, VirtualElementProvider, VirtualManager, VirtualPanel, VirtualRenderingStrategy, checkExistence, circulateIndex, circulatePosition, clamp, Flicking as default, find, findIndex, findRight, getDefaultCameraTransform, getDirection, getElement, getElementSize, getFlickingAttached, getMinusCompensatedIndex, getProgress, getRenderingPanels, getStyle, includes, isBetween, isString, merge, parseAlign$1 as parseAlign, parseArithmeticExpression, parseArithmeticSize, parseBounce, parseCSSSizeValue, parseElement, parsePanelAlign, range, setPrototypeOf, setSize, sync, toArray, withFlickingMethods };
 //# sourceMappingURL=flicking.esm.js.map