Add animated frames to undo siblings list (#284)

* add drag and loop animated frames * no draggedAnimationFrame * fix bug unknown its root
dflex-js · Jul 14, 2021 · 7bc8d51 · 7bc8d51
1 parent 5a0b0e2
commit 7bc8d51
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 9 deletions.
diff --git a/packages/dnd/src/Droppable/Droppable.ts b/packages/dnd/src/Droppable/Droppable.ts
@@ -72,8 +72,15 @@ class Droppable {
     if (this.draggable.siblingsList) {
       const lastIndex = this.draggable.siblingsList.length - 1;
       const id = this.draggable.siblingsList[lastIndex];
-      const element = store.getElmById(id);
-      ({ currentTop, currentLeft } = element);
+
+      // TODO: What causes this? Need investigation.
+      if (id) {
+        const element = store.getElmById(id);
+
+        if (element) {
+          if (element) ({ currentTop, currentLeft } = element);
+        }
+      }
     }
 
     this.preserveLastElmOffset = {

diff --git a/packages/dnd/src/Droppable/EndDroppable.ts b/packages/dnd/src/Droppable/EndDroppable.ts
@@ -41,6 +41,36 @@ class EndDroppable extends Droppable {
     }
   }
 
+  private loopAscWithAnimationFrame = (from: number, lst: Array<string>) => {
+    let i = from;
+
+    const run = () => {
+      this.undoElmTranslate(lst, i);
+      i += 1;
+
+      if (i < lst.length) {
+        requestAnimationFrame(run);
+      }
+    };
+
+    requestAnimationFrame(run);
+  };
+
+  private loopDesWithAnimationFrame = (from: number, lst: Array<string>) => {
+    let i = from;
+
+    const run = () => {
+      this.undoElmTranslate(lst, i);
+      i -= 1;
+
+      if (i >= 0) {
+        requestAnimationFrame(run);
+      }
+    };
+
+    requestAnimationFrame(run);
+  };
+
   /**
    * Undo list elements order and instances including translateX/Y and indexes
    * locally.
@@ -52,18 +82,13 @@ class EndDroppable extends Droppable {
     } = this.draggable.draggedElm;
 
     if (this.isListLocked || this.draggable.isMovingDown) {
-      for (let i = from; i < lst.length; i += 1) {
-        this.undoElmTranslate(lst, i);
-      }
+      this.loopAscWithAnimationFrame(from, lst);
     } else {
       /**
        * If from is zero, means dragged left, and all siblings are lifted up.
        */
       const actualFrom = from === 0 ? lst.length - 1 : from;
-
-      for (let i = actualFrom; i >= 0; i -= 1) {
-        this.undoElmTranslate(lst, i);
-      }
+      this.loopDesWithAnimationFrame(actualFrom, lst);
     }
 
     lst.splice(this.spliceAt, 1);