Merge 18e1396 into 40b491b

naver · Sep 27, 2023 · 3426791 · 3426791
2 parents 40b491b + 18e1396
commit 3426791
Showing 1 changed file with 45 additions and 8 deletions.
diff --git a/packages/conveyer/src/Conveyer.ts b/packages/conveyer/src/Conveyer.ts
@@ -43,7 +43,13 @@ class Conveyer extends Component<ConveyerEvents> {
   protected _size = 0;
   protected _scrollSize = 0;
   protected _options: ConveyerOptions;
-
+  protected _animateParam: {
+    startTime: number;
+    duration: number;
+    destPos: number;
+    expectedPos: number;
+  } | null = null;
+
   private _resizeObserver: ResizeObserver | null = null;
   private _scrollTimer = 0;
   private _isWheelScroll = false;
@@ -289,6 +295,7 @@ class Conveyer extends Component<ConveyerEvents> {
    * @param - Duration to scroll by that position. <ko>해당 위치만큼 스크롤하는 시간</ko>
    */
   public scrollBy(pos: number, duration = 0) {
+    this._createAnimationParam(this._pos, this._pos + pos, duration);
     this._axes!.setBy({ scroll: -pos }, duration);
   }
   /**
@@ -298,6 +305,7 @@ class Conveyer extends Component<ConveyerEvents> {
    * @param - Duration to scroll to that position. <ko>해당 위치로 스크롤하는 시간</ko>
    */
   public scrollTo(pos: number, duration = 0) {
+    this._createAnimationParam(this._pos, pos, duration);
     this._axes!.setBy({ scroll: this._pos - pos }, duration);
   }
   /**
@@ -317,13 +325,13 @@ class Conveyer extends Component<ConveyerEvents> {
     const itemSelector = this._options.itemSelector;
     const resizeObserver = this._resizeObserver;
     const prevItemElements = this._items.map(item => item.element!);
-    
+
     const itemElements = [].slice.call(
       itemSelector ? scrollAreaElement.querySelectorAll(itemSelector) : scrollAreaElement.children,
-      );
-      this.setItems(itemElements.map((el) => this._getItem(el)));
-      
-      if (resizeObserver){
+    );
+    this.setItems(itemElements.map((el) => this._getItem(el)));
+
+    if (resizeObserver){
       const changed = diff(prevItemElements, itemElements);
       const removed = changed.removed;
       const added = changed.added;
@@ -429,6 +437,7 @@ class Conveyer extends Component<ConveyerEvents> {
       },
       "change": e => {
         const nativeEvent = this._getNativeEvent(e);
+        const animateParam = this._animateParam;
         if (options.useSideWheel && this._isMixedWheel(nativeEvent)) {
           return;
         }
@@ -437,16 +446,36 @@ class Conveyer extends Component<ConveyerEvents> {
         this._isAnimationScroll = !this._isWheelScroll && !isHold;
         isDrag = true;
         const scroll = e.delta.scroll;
-
         if (options.horizontal) {
           scrollAreaElement.scrollLeft -= scroll;
         } else {
           scrollAreaElement.scrollTop -= scroll;
         }
+        if (!e.isTrusted && animateParam) {
+          animateParam.expectedPos -= scroll;
+          const scrollPos = options.horizontal ? scrollAreaElement.scrollLeft : scrollAreaElement.scrollTop;
+          const diffPos = animateParam.expectedPos - scrollPos;
+          if (Math.abs(diffPos) >= 1) {
+            if (options.horizontal) {
+              scrollAreaElement.scrollLeft += diffPos;
+            } else {
+              scrollAreaElement.scrollTop += diffPos;
+            }
+          }
+        } else {
+          this._animateParam = null;
+        }
         if (options.nested) {
           this._checkNestedMove(nativeEvent);
         }
       },
+      "animationEnd": e => {
+        const animateParam = this._animateParam;
+        const isCanceled = !(animateParam && new Date().getTime() - animateParam.duration >= animateParam.startTime);
+        if (!e.isTrusted && !isCanceled && this._pos !== animateParam.destPos) {
+          this.scrollTo(animateParam.destPos);
+        }
+      },
       "release": e => {
         if (!isDrag) {
           e.setTo({ ...e.depaPos }, 0);
@@ -500,7 +529,6 @@ class Conveyer extends Component<ConveyerEvents> {
     this._resizeObserver?.observe(scrollAreaElement);
     scrollAreaElement.addEventListener("scroll", this._onScroll);
     window.addEventListener("resize", this.update);
-
   }
   /**
    * Releases the instnace and events.
@@ -648,6 +676,15 @@ class Conveyer extends Component<ConveyerEvents> {
       this._isAnimationScroll = false;
     }, this._options.scrollDebounce);
   }
+
+  private _createAnimationParam(depaPos: number, destPos: number, duration: number) {
+    this._animateParam = {
+      destPos,
+      duration,
+      startTime: new Date().getTime(),
+      expectedPos: depaPos,
+    };
+  }
 }