@egjs/flicking 4.8.1 → 4.9.2

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/control/AxesController.d.ts

@@ -27,6 +27,7 @@ declare class AxesController {
     destroy(): void;
     enable(): this;
     disable(): this;
+    release(): this;
     update(controlParams: ControlParams): this;
     addPreventClickHandler(): this;
     removePreventClickHandler(): this;

package/declaration/control/Control.d.ts

@@ -19,6 +19,7 @@ declare abstract class Control {
     destroy(): void;
     enable(): this;
     disable(): this;
+    release(): this;
     updatePosition(progressInPanel: number): void;
     updateInput(): this;
     resetActive(): this;

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/core/panel/Panel.d.ts

@@ -60,7 +60,7 @@ declare class Panel {
     markForHide(): void;
     resize(cached?: {
         size: number;
-        height: number;
+        height?: number;
         margin: {
             prev: number;
             next: number;

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.2
 */
 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,
@@ -2417,6 +2450,20 @@ function () {
     (_a = this._panInput) === null || _a === void 0 ? void 0 : _a.disable();
     return this;
   };
+  /**
+   * Releases ongoing user input (mouse/touch)
+   * @ko 사용자의 현재 입력(마우스/터치)를 중단시킵니다
+   * @chainable
+   * @return {this}
+   */
+
+
+  __proto.release = function () {
+    var _a;
+
+    (_a = this._panInput) === null || _a === void 0 ? void 0 : _a.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}의 상태를 갱신합니다
@@ -2728,6 +2775,19 @@ function () {
 
     return this;
   };
+  /**
+   * Releases ongoing user input (mouse/touch)
+   * @ko 사용자의 현재 입력(마우스/터치)를 중단시킵니다
+   * @chainable
+   * @return {this}
+   */
+
+
+  __proto.release = function () {
+    this._controller.release();
+
+    return this;
+  };
   /**
    * Update position after resizing
    * @ko resize 이후에 position을 업데이트합니다
@@ -5449,11 +5509,13 @@ function () {
     } : {
       height: panelSize
     };
-    var firstPanelSizeObj = {
+
+    var firstPanelSizeObj = __assign({
       size: panelSize,
-      height: referencePanel.height,
       margin: referencePanel.margin
-    };
+    }, !flicking.horizontal && {
+      height: referencePanel.height
+    });
 
     if (!flicking.noPanelStyleOverride) {
       this._strategy.updatePanelSizes(flicking, panelSizeObj);
@@ -5987,17 +6049,32 @@ function () {
 
 
   __proto.resize = function (cached) {
+    var _a;
+
     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;
       this._margin = __assign({}, cached.margin);
-      this._height = cached.height;
+      this._height = (_a = cached.height) !== null && _a !== void 0 ? _a : getElementSize({
+        el: el,
+        horizontal: false,
+        useFractionalSize: useFractionalSize,
+        useOffset: true,
+        style: getStyle(el)
+      });
     } 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 +6082,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 +6784,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 +6829,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 +7746,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.
@@ -7924,6 +8027,10 @@ function (_super) {
       return Promise.reject(new FlickingError(MESSAGE.ANIMATION_ALREADY_PLAYING, CODE.ANIMATION_ALREADY_PLAYING));
     }
 
+    if (this._control.holding) {
+      this._control.controller.release();
+    }
+
     return this._control.moveToPanel(panel, {
       duration: duration,
       direction: direction
@@ -8408,9 +8515,10 @@ function (_super) {
     var renderer = this._renderer;
     var control = this._control;
     var camera = this._camera;
-    var initialPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
-    if (!initialPanel) return;
-    var nearestAnchor = camera.findNearestAnchor(initialPanel.position);
+    var defaultPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
+    if (!defaultPanel) return;
+    var nearestAnchor = camera.findNearestAnchor(defaultPanel.position);
+    var initialPanel = nearestAnchor && defaultPanel.index !== nearestAnchor.panel.index ? nearestAnchor.panel : defaultPanel;
     control.setActive(initialPanel, null, false);
 
     if (!nearestAnchor) {
@@ -8471,7 +8579,7 @@ function (_super) {
    */
 
 
-  Flicking.VERSION = "4.8.1";
+  Flicking.VERSION = "4.9.2";
   return Flicking;
 }(Component);
 
@@ -8725,5 +8833,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