#5985 Drag-drop indicator disappears between questions and panels (#5986

) * #5985 Drag-drop indicator disappears between questions and panels Fixes #5985 * #5985 fixed row click offset in v-test Fixes #5985 * #5985 - fixed placeholder interactivity and indicator position * #5985 - fixed drag indicator
surveyjs · Oct 24, 2024 · b3ac8f0 · b3ac8f0
1 parent e7952ee
commit b3ac8f0
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 3 deletions.
diff --git a/functionalTests/designer/drag-drop.ts b/functionalTests/designer/drag-drop.ts
@@ -1914,6 +1914,53 @@ test("Drag Drop indicator - rows", async (t) => {
     .expect(Selector(".svc-row").nth(1).hasClass("svc-row--drag-over-bottom")).notOk();
 });
 
+test("Drag Drop indicator - between questions", async (t) => {
+  await t.resizeWindow(1600, 1000);
+  const json = {
+    "logoPosition": "right",
+    "pages": [
+      {
+        "name": "page1",
+        "elements": [
+          {
+            "type": "text",
+            "name": "question1"
+          },
+          {
+            "type": "text",
+            "name": "question2",
+            "startWithNewLine": false
+          },
+          {
+            "type": "text",
+            "name": "question3"
+          }
+        ]
+      }
+    ]
+  };
+  await setJSON(json);
+
+  const toolboxToolAction = Selector(".svc-toolbox__tool > .sv-action__content");
+
+  await t.expect(Selector(".svc-question__adorner").visible).ok();
+
+  const questionRectRight = await Selector(".svc-question__adorner").getBoundingClientRectProperty("right");
+  const questionRectBottom = await Selector(".svc-question__adorner").getBoundingClientRectProperty("bottom");
+  await t
+    .hover(toolboxToolAction)
+    .dispatchEvent(toolboxToolAction, "pointerdown")
+    .hover(Selector("#survey-creator"), { offsetX: Math.round(questionRectRight) + 8, offsetY: Math.round(questionRectBottom) - 100 })
+    .expect(Selector(".svc-question__content").nth(1).hasClass("svc-question__content--drag-over-left")).ok();
+
+  await t
+    .hover(toolboxToolAction)
+    .dispatchEvent(toolboxToolAction, "pointerdown")
+    .hover(Selector("#survey-creator"), { offsetX: Math.round(questionRectRight) - 100, offsetY: Math.round(questionRectBottom) + 8 })
+    .expect(Selector(".svc-question__content").nth(2).hasClass("svc-question__content--drag-over-top")).ok();
+
+});
+
 test("Drag Drop page with other pages collapsed on start drag", async (t) => {
   await ClientFunction(() => {
     window["creator"].expandCollapseButtonVisibility = "always";

diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
@@ -38,6 +38,18 @@ svc-question {
       }
     }
   }
+  &:before {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 100%;
+    margin-top: calcSize(-2);
+    padding-top: calcSize(2);
+    margin-left: calcSize(-2);
+    padding-left: calcSize(2);
+    bottom: 0;
+    right: 0;
+  }
 }
 
 .svc-question__adorner {
@@ -923,6 +935,7 @@ svc-question,
   display: flex;
   flex-grow: 1;
   box-sizing: border-box;
+  position: relative;
 }
 
 .svc-question__content--empty-template {

diff --git a/packages/survey-creator-core/src/components/row.scss b/packages/survey-creator-core/src/components/row.scss
@@ -91,11 +91,11 @@
 }
 
 .svc-row__drop-indicator--top {
-  top: 6px;
+  top: 7px;
 }
 
 .svc-row__drop-indicator--bottom {
-  bottom: -10px;
+  bottom: -9px;
 }
 
 .svc-row--drag-over-top {

diff --git a/visualRegressionTests/tests/designer/surface.ts b/visualRegressionTests/tests/designer/surface.ts
@@ -852,7 +852,7 @@ test("Matrix dynamic with detail two questions + select", async (t) => {
       ],
     };
     await setJSON(json);
-    await t.click(Selector(".sd-table__cell--detail-panel .svc-row").nth(0), { offsetX: -5, offsetY: -5 })
+    await t.click(Selector(".sd-table__cell--detail-panel .svc-row").nth(0), { offsetX: -25, offsetY: -25 })
       .expect(Selector(".svc-question__content--selected").visible).ok();
     await takeElementScreenshot("surface-matrix-detail-two-questions-select.png", Selector(".svc-question__content"), t, comparer);
   });