#5925 - add test and fix

surveyjs · Oct 10, 2024 · de95b41 · de95b41
1 parent a6daa41
commit de95b41
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 4 deletions.
diff --git a/packages/survey-creator-core/src/survey-elements.ts b/packages/survey-creator-core/src/survey-elements.ts
@@ -17,14 +17,14 @@ export function calculateDragOverLocation(clientX: number, clientY: number, rect
   const dx = clientX - rect.x;
   const dy = clientY - rect.y;
 
-  if (direction = "top-bottom") {
+  if (direction == "top-bottom") {
     if (dy >= rect.height / 2) {
       return DragTypeOverMeEnum.Bottom;
     } else {
       return DragTypeOverMeEnum.Top;
     }
   }
-  if (direction = "left-right") {
+  if (direction == "left-right") {
     if (dx >= rect.width / 2) {
       return DragTypeOverMeEnum.Right;
     } else {
@@ -379,11 +379,13 @@ export class DragDropSurveyElements extends DragDropCore<any> {
       clientX: event.clientX,
       clientY: event.clientY,
       dragOverRect: dropTargetRect,
+      insideContainer: this.insideContainer,
       dragOverLocation
     };
     if (this.onDragOverLocationCalculating) {
       this.onDragOverLocationCalculating(options);
       dragOverLocation = options.dragOverLocation;
+      this.insideContainer = options.insideContainer;
     }
     const isDropTargetValid = this.isDropTargetValid(
       dropTarget,

diff --git a/packages/survey-creator-core/tests/dragdrop-elements.tests.ts b/packages/survey-creator-core/tests/dragdrop-elements.tests.ts
@@ -1,5 +1,5 @@
 import { DragTypeOverMeEnum, Question, QuestionTextModel, SurveyModel } from "survey-core";
-import { DragDropSurveyElements, calculateIsEdge, calculateIsSide } from "../src/survey-elements";
+import { DragDropSurveyElements, calculateDragOverLocation, calculateIsEdge, calculateIsSide } from "../src/survey-elements";
 import { CreatorTester } from "./creator-tester";
 
 test("calculateVerticalMiddleOfHTMLElement", () => {
@@ -1141,7 +1141,69 @@ test("Support onDragDropAllow, Bug#4572", (): any => {
   expect(counter).toBe(2);
   expect(ddHelper["allowDropHere"]).toBeTruthy();
 });
-
+test("Test onDragOverLocationCalculating", (): any => {
+  const creator = new CreatorTester();
+  creator.JSON = {
+    "logoPosition": "right",
+    "pages": [
+      {
+        "name": "page1",
+        "elements": [
+          {
+            "type": "text",
+            "name": "question1"
+          }
+        ]
+      },
+      {
+        "name": "page2",
+        "elements": [
+          {
+            "type": "text",
+            "name": "question2"
+          }
+        ]
+      },
+      {
+        "name": "page2",
+        "elements": [
+          {
+            "type": "text",
+            "name": "question3"
+          }
+        ]
+      }
+    ]
+  };
+  creator.onDragOverLocationCalculating.add((sender, options) => {
+    if (options.draggedSurveyElement.name == "question2" && options.insideContainer) {
+      options.insideContainer = false;
+      options.dragOverLocation = calculateDragOverLocation(options.clientX, options.clientY, options.dragOverRect, "top-bottom");
+    }
+  });
+  const ddHelper: any = creator.dragDropSurveyElements;
+  const q1 = creator.survey.getQuestionByName("question1");
+  const q2 = creator.survey.getQuestionByName("question2");
+  const q3 = creator.survey.getQuestionByName("question3");
+  ddHelper.draggedElement = q2;
+  ddHelper["allowDropHere"] = true;
+  ddHelper["findDropTargetNodeFromPoint"] = () => ({ getBoundingClientRect: () => ({ x: 10, y: 10, width: 200, height: 100 }) });
+  ddHelper["getDropTargetByNode"] = () => q1;
+  ddHelper["isDropTargetValid"] = () => true;
+  ddHelper.dragOver({ clientX: 40, clientY: 50 });
+  expect(ddHelper.dragOverLocation).toBe(DragTypeOverMeEnum.Top);
+  expect(ddHelper.insideContainer).toBeFalsy();
+  ddHelper.dragOver({ clientX: 100, clientY: 90 });
+  expect(ddHelper.dragOverLocation).toBe(DragTypeOverMeEnum.Bottom);
+  expect(ddHelper.insideContainer).toBeFalsy();
+  ddHelper.draggedElement = q3;
+  ddHelper.dragOver({ clientX: 40, clientY: 50 });
+  expect(ddHelper.dragOverLocation).toBe(DragTypeOverMeEnum.Left);
+  expect(ddHelper.insideContainer).toBeTruthy();
+  ddHelper.dragOver({ clientX: 100, clientY: 90 });
+  expect(ddHelper.dragOverLocation).toBe(DragTypeOverMeEnum.Bottom);
+  expect(ddHelper.insideContainer).toBeTruthy();
+});
 test("Support onDragDropAllow&allowDropNextToAnother, #5621", (): any => {
   const creator = new CreatorTester();
   creator.JSON = {