#8178 Do not automatically scroll while dragging over the corners (#8179

) * #8178 Do not automatically scroll while dragging over the corners Fixes #8178 * #8178 Do not automatically scroll while dragging over the corners Fixes #8178 * #8178 - swap function arguments --------- Co-authored-by: Aleksey Novikov <[email protected]>
surveyjs · May 2, 2024 · a730d3d · a730d3d
1 parent 191c241
commit a730d3d
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 16 deletions.
diff --git a/src/dragdrop/dom-adapter.ts b/src/dragdrop/dom-adapter.ts
@@ -218,18 +218,13 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
   private getShortcutRightCoordinate(currentX: number, shortcutWidth: number, shortcutXOffset: number):number {
     return currentX + shortcutWidth - shortcutXOffset;
   }
-  private doScroll(clientY: number, clientX: number) {
-    cancelAnimationFrame(this.scrollIntervalId);
-    const startScrollBoundary = 100;
 
-    const displayProp = this.draggedElementShortcut.style.display;
-    //this.draggedElementShortcut.hidden = true;
-    this.draggedElementShortcut.style.display = "none";
-    let dragOverNode = <HTMLElement>this.documentOrShadowRoot.elementFromPoint(clientX, clientY);
-    //this.draggedElementShortcut.hidden = false;
-    this.draggedElementShortcut.style.display = displayProp || "block";
+  protected requestAnimationFrame(callback: any) {
+    return requestAnimationFrame(callback);
+  }
 
-    let scrollableParentNode = findScrollableParent(dragOverNode);
+  protected scrollByDrag(scrollableParentNode: HTMLElement, clientY: number, clientX: number) {
+    const startScrollBoundary = 100;
 
     let top: number;
     let bottom: number;
@@ -249,18 +244,37 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
     }
 
     const repeat = () => {
-      if (clientY - top <= startScrollBoundary) {
+      const isTop = clientY - top <= startScrollBoundary;
+      const isBottom = bottom - clientY <= startScrollBoundary;
+      const isLeft = clientX - left <= startScrollBoundary;
+      const isRight = right - clientX <= startScrollBoundary;
+      if (isTop && !isLeft && !isRight) {
         scrollableParentNode.scrollTop -= 15;
-      } else if (bottom - clientY <= startScrollBoundary) {
+      } else if (isBottom && !isLeft && !isRight) {
         scrollableParentNode.scrollTop += 15;
-      } else if (right - clientX <= startScrollBoundary) {
+      } else if (isRight && !isTop && !isBottom) {
         scrollableParentNode.scrollLeft += 15;
-      } else if (clientX - left <= startScrollBoundary) {
+      } else if (isLeft && !isTop && !isBottom) {
         scrollableParentNode.scrollLeft -= 15;
       }
-      this.scrollIntervalId = requestAnimationFrame(repeat);
+      this.scrollIntervalId = this.requestAnimationFrame(repeat);
     };
-    this.scrollIntervalId = requestAnimationFrame(repeat);
+    this.scrollIntervalId = this.requestAnimationFrame(repeat);
+  }
+
+  private doScroll(clientY: number, clientX: number) {
+    cancelAnimationFrame(this.scrollIntervalId);
+
+    const displayProp = this.draggedElementShortcut.style.display;
+    //this.draggedElementShortcut.hidden = true;
+    this.draggedElementShortcut.style.display = "none";
+    let dragOverNode = <HTMLElement>this.documentOrShadowRoot.elementFromPoint(clientX, clientY);
+    //this.draggedElementShortcut.hidden = false;
+    this.draggedElementShortcut.style.display = displayProp || "block";
+
+    let scrollableParentNode = findScrollableParent(dragOverNode);
+
+    this.scrollByDrag(scrollableParentNode, clientY, clientX);
   }
 
   private dragOver = (event: PointerEvent) => {

diff --git a/tests/dragdropcoretests.ts b/tests/dragdropcoretests.ts
@@ -0,0 +1,68 @@
+import { SurveyModel } from "../src/survey";
+import { QuestionTextModel } from "../src/question_text";
+import { DragDropCore } from "../src/dragdrop/core";
+import { DragDropDOMAdapter } from "../src/dragdrop/dom-adapter";
+
+export default QUnit.module("Drag and Drop Tests");
+
+class DragDropTest extends DragDropDOMAdapter {
+  private times = 0;
+
+  protected requestAnimationFrame(callback: any): number {
+    if (this.times == 0) {
+      this.times++;
+      callback();
+    }
+    return 0;
+  }
+  public scrollByDragTest(scrollableParentNode: HTMLElement, clientY: number, clientX: number) {
+    this.times = 0;
+    this.scrollByDrag(scrollableParentNode, clientY, clientX);
+  }
+}
+QUnit.test("Show/hide new created item, simple test", function (assert) {
+  var dragDropCore = new DragDropTest({} as any, {} as any);
+  document.body.style.height = "10000px";
+  document.body.style.width = "10000px";
+  dragDropCore.scrollByDragTest(document.documentElement, document.documentElement.clientHeight - 10, 0);
+  assert.equal(document.documentElement.scrollTop, 0);
+  dragDropCore.scrollByDragTest(document.documentElement, document.documentElement.clientHeight - 120, 0);
+  assert.equal(document.documentElement.scrollTop, 0);
+  dragDropCore.scrollByDragTest(document.documentElement, document.documentElement.clientHeight - 10, 400);
+  assert.equal(document.documentElement.scrollTop, 15);
+  dragDropCore.scrollByDragTest(document.documentElement, document.documentElement.clientHeight - 10, document.documentElement.clientWidth - 10);
+  assert.equal(document.documentElement.scrollTop, 15);
+  dragDropCore.scrollByDragTest(document.documentElement, document.documentElement.clientHeight - 10, 400);
+  assert.equal(document.documentElement.scrollTop, 30);
+  dragDropCore.scrollByDragTest(document.documentElement, 120, 400);
+  assert.equal(document.documentElement.scrollTop, 30);
+  dragDropCore.scrollByDragTest(document.documentElement, 10, 400);
+  assert.equal(document.documentElement.scrollTop, 15);
+  dragDropCore.scrollByDragTest(document.documentElement, 10, 10);
+  assert.equal(document.documentElement.scrollTop, 15);
+  dragDropCore.scrollByDragTest(document.documentElement, 10, document.documentElement.clientWidth - 10);
+  assert.equal(document.documentElement.scrollTop, 15);
+  dragDropCore.scrollByDragTest(document.documentElement, 10, 400);
+  assert.equal(document.documentElement.scrollTop, 0);
+
+  dragDropCore.scrollByDragTest(document.documentElement, 0, document.documentElement.clientWidth - 10);
+  assert.equal(document.documentElement.scrollLeft, 0);
+  dragDropCore.scrollByDragTest(document.documentElement, 0, document.documentElement.clientWidth - 120);
+  assert.equal(document.documentElement.scrollLeft, 0);
+  dragDropCore.scrollByDragTest(document.documentElement, 400, document.documentElement.clientWidth - 10);
+  assert.equal(document.documentElement.scrollLeft, 15);
+  dragDropCore.scrollByDragTest(document.documentElement, document.documentElement.clientHeight - 10, document.documentElement.clientWidth - 10);
+  assert.equal(document.documentElement.scrollLeft, 15);
+  dragDropCore.scrollByDragTest(document.documentElement, 400, document.documentElement.clientWidth - 10);
+  assert.equal(document.documentElement.scrollLeft, 30);
+  dragDropCore.scrollByDragTest(document.documentElement, 400, 120);
+  assert.equal(document.documentElement.scrollLeft, 30);
+  dragDropCore.scrollByDragTest(document.documentElement, 400, 10);
+  assert.equal(document.documentElement.scrollLeft, 15);
+  dragDropCore.scrollByDragTest(document.documentElement, 10, 10);
+  assert.equal(document.documentElement.scrollLeft, 15);
+  dragDropCore.scrollByDragTest(document.documentElement, document.documentElement.clientHeight - 10, 10);
+  assert.equal(document.documentElement.scrollLeft, 15);
+  dragDropCore.scrollByDragTest(document.documentElement, 400, 10);
+  assert.equal(document.documentElement.scrollLeft, 0);
+});
diff --git a/tests/entries/test.ts b/tests/entries/test.ts
@@ -32,6 +32,7 @@ export * from "../question_multipletexttests";
 export * from "../question_expressiontests";
 export * from "../questionFileTests";
 export * from "../dragdroptests";
+export * from "../dragdropcoretests";
 export * from "../dragdrophelpertests";
 export * from "../expressions/expressionsTest"; //
 export * from "../expressions/expressionParserTest"; //