Fixed #6033 - A drop indicator doesn't appear when dropping a questio…

…n between two custom widgets

packages/survey-creator-angular/src/question-widget.component.html

@@ -1,15 +1,23 @@
 <ng-template #template>
-  <div *ngIf="adorner" class="svc-question__adorner" [class]="adorner.rootCss()" (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.currentTarget)" [attr.data-sv-drop-target-survey-element]="adorner.element.name || null">
-    <div *ngIf="adorner.element.isInteractiveDesignElement" class="svc-question__content" [class]="adorner.css()" [key2click] (click)="adorner.select(adorner, $event)" data-bind="clickBubble: false" #container>
+  <div *ngIf="adorner" class="svc-question__adorner" [class]="adorner.rootCss()"
+    (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.currentTarget)"
+    [attr.data-sv-drop-target-survey-element]="adorner.element.name || null">
+    <div *ngIf="adorner.element.isInteractiveDesignElement" class="svc-question__content" [class]="adorner.css()"
+      [key2click] (click)="adorner.select(adorner, $event)" data-bind="clickBubble: false" #container>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--left"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--right"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>
+      <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
       <div *ngIf="adorner.allowDragging" class="svc-question__drag-area" (pointerdown)="adorner.onPointerDown($event)">
-        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24" sv-ng-svg-icon></svg>
+        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
+          sv-ng-svg-icon></svg>
       </div>
       <div class="svc-widget__content">
         <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
       </div>
       <div *ngIf="adorner.isEmptyElement" class="svc-panel__placeholder_frame">
-            <div class="svc-panel__placeholder" data-bind="text: placeholderText"></div>
-        </div>
+        <div class="svc-panel__placeholder" data-bind="text: placeholderText"></div>
+      </div>
       <div class="svc-question__content-actions">
         <sv-action-bar [model]="adorner.actionContainer" [handleClick]="false"></sv-action-bar>
       </div>

packages/survey-creator-knockout/src/question-widget.html

@@ -2,6 +2,10 @@
   data-bind="css: rootCss(), attr: { 'data-sv-drop-target-survey-element': element.name }, event: { mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }">
   <!-- ko if: question.isInteractiveDesignElement -->
   <div class="svc-question__content" data-bind="click: koSelect, key2click, clickBubble: false, css: css()">
+    <div class="svc-question__drop-indicator svc-question__drop-indicator--left"></div>
+    <div class="svc-question__drop-indicator svc-question__drop-indicator--right"></div>
+    <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>
+    <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
     <!-- ko if: allowDragging -->
     <div class="svc-question__drag-area"
       data-bind="visible:allowDragging, event: {pointerdown: (model, event)=>{onPointerDown(event)}}">

packages/survey-creator-vue/src/adorners/CustomWidget.vue

@@ -16,6 +16,18 @@
       @click="model.select(model, $event)"
       data-bind="clickBubble: false"
     >
+      <div
+        class="svc-question__drop-indicator svc-question__drop-indicator--left"
+      ></div>
+      <div
+        class="svc-question__drop-indicator svc-question__drop-indicator--right"
+      ></div>
+      <div
+        class="svc-question__drop-indicator svc-question__drop-indicator--top"
+      ></div>
+      <div
+        class="svc-question__drop-indicator svc-question__drop-indicator--bottom"
+      ></div>
       <div
         v-if="model.allowDragging"
         class="svc-question__drag-area"

visualRegressionTests/tests/designer/drag-drop.ts

@@ -755,3 +755,26 @@ test("Drag Drop to collapsed page", async (t) => {
     await takeElementScreenshot("drag-drop-in-collapsed-page.png", ".svc-tab-designer_content", t, comparer);
   });
 });
+
+fixture`DragDrop custom widget Screenshot`.page`http://127.0.0.1:8080/testCafe/testcafe-widget.html`.beforeEach(async (t) => {
+});
+
+test("Drag indicator for custom widget", async (t) => {
+  await wrapVisualTest(t, async (t, comparer) => {
+    await t.resizeWindow(1252, 900);
+
+    const json = {
+      elements: [{ type: "bootstrapdatepicker", name: "q1" }, { type: "bootstrapdatepicker", name: "q2" }]
+    };
+    await setJSON(json);
+
+    await patchDragDropToDisableDrop();
+
+    const q1 = Selector("[data-sv-drop-target-survey-element='q1']");
+    await t
+      .hover(RatingToolboxItem)
+      .dragToElement(RatingToolboxItem, q1, { speed: 0.5, offsetX: 100, offsetY: 10 });
+
+    await takeElementScreenshot("drag-drop-over-custom-widget.png", Selector(".svc-page").nth(0), t, comparer);
+  });
+});