Fix a bug in pausing invisible elements (#321)

- Add the test detects the bug
- FIx the bug in setting the correct flag

Author: jalal246

packages/dnd/cypress/integration/extended/notAlltriggered/notAlltriggered.spec.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Jalal Maskoun.
+ *
+ * This source code is licensed under the AGPL3.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+let elmBox;
+let startingPointX;
+// let startingPointY;
+
+// const stepsX = 0;
+// const stepsY = 0;
+
+context(
+  "Testing not all elements transformed when dragging still inside viewport",
+  () => {
+    before(() => {
+      cy.visit("http://localhost:3001/extended");
+    });
+
+    it("Getting element (#1)", { scrollBehavior: false }, () => {
+      cy.get("#1-extended").then((elm) => {
+        elmBox = elm[0].getBoundingClientRect();
+        startingPointX = elmBox.x + elmBox.width / 2;
+        // startingPointY = elmBox.y + elmBox.height / 2;
+        cy.get("#1-extended").trigger("mousedown", {
+          button: 0,
+        });
+      });
+    });
+
+    it("Transforms (#1-extended) to the right", () => {
+      for (let i = 0; i <= 200; i += 10) {
+        cy.get("#1-extended").trigger("mousemove", {
+          clientX: startingPointX + i,
+          force: true,
+        });
+        // eslint-disable-next-line cypress/no-unnecessary-waiting
+        // cy.wait(0);
+      }
+    });
+
+    it("Triggers mouseup", () => {
+      cy.get("#1-extended").trigger("mouseup", {
+        force: true,
+      });
+    });
+
+    it("Invisible elements not effected", () => {
+      for (let i = 13; i < 100; i += 1) {
+        cy.get(`#${i}-extended`).should("have.css", "transform", "none");
+      }
+    });
+  }
+);

packages/dnd/src/DnDStore/DnDStoreImp.ts

@@ -184,14 +184,14 @@ class DnDStoreImp extends Store<CoreInstance> implements DnDStoreInterface {
     };
   }
 
-  private isElementVisibleInHorizontalViewport(currentLeft: number): boolean {
+  private isElementVisibleViewportX(currentLeft: number): boolean {
     return (
       currentLeft >= this.scrollX &&
       currentLeft <= this.viewportWidth + this.scrollX
     );
   }
 
-  private isElementVisibleInVerticalViewport(currentTop: number): boolean {
+  private isElementVisibleViewportY(currentTop: number): boolean {
     return (
       currentTop >= this.scrollY &&
       currentTop <= this.viewportHeight + this.scrollY
@@ -213,12 +213,10 @@ class DnDStoreImp extends Store<CoreInstance> implements DnDStoreInterface {
             }
 
             let isVisible =
-              this.isElementVisibleInVerticalViewport(
+              this.isElementVisibleViewportY(
                 this.registry[elmID].currentTop!
               ) &&
-              this.isElementVisibleInHorizontalViewport(
-                this.registry[elmID].currentLeft!
-              );
+              this.isElementVisibleViewportX(this.registry[elmID].currentLeft!);
 
             if (
               !isVisible &&
@@ -360,13 +358,15 @@ class DnDStoreImp extends Store<CoreInstance> implements DnDStoreInterface {
 
     this.assignSiblingsBoundaries(sK, offset!);
 
-    const isVisibleY = this.isElementVisibleInVerticalViewport(currentTop!);
-    const isVisibleX = this.isElementVisibleInHorizontalViewport(currentLeft!);
+    const isVisibleY = this.isElementVisibleViewportY(currentTop!);
+    const isVisibleX = this.isElementVisibleViewportX(currentLeft!);
 
     // same branch
     this.elmIndicator.currentKy = `${sK}${pK}`;
 
     if (isVisibleY && isVisibleX) {
+      this.hasVisibleElements = true;
+
       if (!this.siblingsOverflow[this.registry[id].keys.sK]) {
         // If we don't do this, and the list is not overflowing, then the object
         // will be undefined.