@egjs/flicking 4.7.1 → 4.8.0

package/TODO.md

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

package/declaration/Flicking.d.ts

@@ -56,6 +56,7 @@ export interface FlickingOptions {
     iOSEdgeSwipeThreshold: number;
     preventClickOnDrag: boolean;
     disableOnInit: boolean;
+    changeOnHold: boolean;
     renderOnlyVisible: boolean;
     virtual: VirtualOptions | null;
     autoInit: boolean;
@@ -102,6 +103,7 @@ declare class Flicking extends Component<FlickingEvents> {
     private _iOSEdgeSwipeThreshold;
     private _preventClickOnDrag;
     private _disableOnInit;
+    private _changeOnHold;
     private _renderOnlyVisible;
     private _autoInit;
     private _autoResize;
@@ -155,6 +157,7 @@ declare class Flicking extends Component<FlickingEvents> {
     get iOSEdgeSwipeThreshold(): FlickingOptions["iOSEdgeSwipeThreshold"];
     get preventClickOnDrag(): FlickingOptions["preventClickOnDrag"];
     get disableOnInit(): FlickingOptions["disableOnInit"];
+    get changeOnHold(): FlickingOptions["changeOnHold"];
     get renderOnlyVisible(): FlickingOptions["renderOnlyVisible"];
     get virtual(): VirtualManager;
     get autoInit(): boolean;
@@ -190,10 +193,11 @@ declare class Flicking extends Component<FlickingEvents> {
     set iOSEdgeSwipeThreshold(val: FlickingOptions["iOSEdgeSwipeThreshold"]);
     set preventClickOnDrag(val: FlickingOptions["preventClickOnDrag"]);
     set disableOnInit(val: FlickingOptions["disableOnInit"]);
+    set changeOnHold(val: FlickingOptions["changeOnHold"]);
     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, 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, externalRenderer, renderExternal }?: Partial<FlickingOptions>);
     init(): Promise<void>;
     destroy(): void;
     prev(duration?: number): Promise<void>;

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.7.1
+version: 4.8.0
 */
 import Component, { ComponentEvent } from '@egjs/component';
 import Axes, { PanInput } from '@egjs/axes';
@@ -781,7 +781,7 @@ var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
  * @ko Flicking 내부에서 알려진 오류 발생시 throw되는 에러
  * @property {number} code Error code<ko>에러 코드</ko>
  * @property {string} message Error message<ko>에러 메시지</ko>
- * @see {@link Constants.ERROR_CODE ERROR_CODE}
+ * @see {@link ERROR_CODE ERROR_CODE}
  * @example
  * ```ts
  * import Flicking, { FlickingError, ERROR_CODES } from "@egjs/flicking";
@@ -1940,8 +1940,15 @@ function (_super) {
     var flicking = ctx.flicking,
         axesEvent = ctx.axesEvent,
         transitTo = ctx.transitTo;
+    var targetPanel = this._targetPanel;
+    var control = flicking.control;
     this._delta = 0;
     flicking.control.updateInput();
+
+    if (flicking.changeOnHold && targetPanel) {
+      control.setActive(targetPanel, control.activePanel, axesEvent.isTrusted);
+    }
+
     var holdStartEvent = new ComponentEvent(EVENTS.HOLD_START, {
       axesEvent: axesEvent
     });
@@ -3111,7 +3118,7 @@ function (_super) {
     var camera = flicking.camera;
     var activeAnchor = camera.findActiveAnchor();
     var anchorAtCamera = camera.findNearestAnchor(camera.position);
-    var state = flicking.control.controller.state;
+    var state = this._controller.state;
 
     if (!activeAnchor || !anchorAtCamera) {
       return Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE));
@@ -3553,6 +3560,7 @@ function (_super) {
     var axesRange = this._controller.range;
     var indexRange = this._indexRange;
     var cameraRange = camera.range;
+    var state = this._controller.state;
     var clampedPosition = clamp(camera.clampToReachablePosition(position), axesRange[0], axesRange[1]);
     var anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);
 
@@ -3561,7 +3569,8 @@ function (_super) {
     }
 
     var prevPos = activePanel.position;
-    var isOverThreshold = Math.abs(position - prevPos) >= flicking.threshold;
+    var posDelta = flicking.animating ? state.delta : position - camera.position;
+    var isOverThreshold = Math.abs(posDelta) >= flicking.threshold;
     var adjacentAnchor = position > prevPos ? camera.getNextAnchor(anchorAtPosition) : camera.getPrevAnchor(anchorAtPosition);
     var targetPos;
     var targetPanel;
@@ -6662,24 +6671,26 @@ function (_super) {
         preventClickOnDrag = _0 === void 0 ? true : _0,
         _1 = _b.disableOnInit,
         disableOnInit = _1 === void 0 ? false : _1,
-        _2 = _b.renderOnlyVisible,
-        renderOnlyVisible = _2 === void 0 ? false : _2,
-        _3 = _b.virtual,
-        virtual = _3 === void 0 ? null : _3,
-        _4 = _b.autoInit,
-        autoInit = _4 === void 0 ? true : _4,
-        _5 = _b.autoResize,
-        autoResize = _5 === void 0 ? true : _5,
-        _6 = _b.useResizeObserver,
-        useResizeObserver = _6 === void 0 ? true : _6,
-        _7 = _b.resizeDebounce,
-        resizeDebounce = _7 === void 0 ? 0 : _7,
-        _8 = _b.maxResizeDebounce,
-        maxResizeDebounce = _8 === void 0 ? 100 : _8,
-        _9 = _b.externalRenderer,
-        externalRenderer = _9 === void 0 ? null : _9,
-        _10 = _b.renderExternal,
-        renderExternal = _10 === void 0 ? null : _10;
+        _2 = _b.changeOnHold,
+        changeOnHold = _2 === void 0 ? false : _2,
+        _3 = _b.renderOnlyVisible,
+        renderOnlyVisible = _3 === void 0 ? false : _3,
+        _4 = _b.virtual,
+        virtual = _4 === void 0 ? null : _4,
+        _5 = _b.autoInit,
+        autoInit = _5 === void 0 ? true : _5,
+        _6 = _b.autoResize,
+        autoResize = _6 === void 0 ? true : _6,
+        _7 = _b.useResizeObserver,
+        useResizeObserver = _7 === void 0 ? true : _7,
+        _8 = _b.resizeDebounce,
+        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;
 
     var _this = _super.call(this) || this; // Internal states
 
@@ -6712,6 +6723,7 @@ function (_super) {
     _this._iOSEdgeSwipeThreshold = iOSEdgeSwipeThreshold;
     _this._preventClickOnDrag = preventClickOnDrag;
     _this._disableOnInit = disableOnInit;
+    _this._changeOnHold = changeOnHold;
     _this._renderOnlyVisible = renderOnlyVisible;
     _this._autoInit = autoInit;
     _this._autoResize = autoResize;
@@ -7468,6 +7480,24 @@ function (_super) {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "changeOnHold", {
+    /**
+     * Change active panel index on mouse/touch hold while animating.
+     * `index` of the `willChange`/`willRestore` event will be used as new index.
+     * @ko 애니메이션 도중 마우스/터치 입력시 현재 활성화된 패널의 인덱스를 변경합니다.
+     * `willChange`/`willRestore` 이벤트의 `index`값이 새로운 인덱스로 사용될 것입니다.
+     * @type {boolean}
+     * @default false
+     */
+    get: function () {
+      return this._changeOnHold;
+    },
+    set: function (val) {
+      this._changeOnHold = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "renderOnlyVisible", {
     // PERFORMANCE
 
@@ -8148,6 +8178,8 @@ function (_super) {
             camera.updateAlignPos();
             camera.updateRange();
             camera.updateAnchors();
+            camera.updateAdaptiveHeight();
+            camera.updateOffset();
             return [4
             /*yield*/
             , renderer.render()];
@@ -8425,7 +8457,7 @@ function (_super) {
    */
 
 
-  Flicking.VERSION = "4.7.1";
+  Flicking.VERSION = "4.8.0";
   return Flicking;
 }(Component);