Fixed #6033 - A drop indicator doesn't appear when dropping a question between two custom widgets

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

@@ -1,6 +1,13 @@
 <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]="'auto'"
           sv-ng-svg-icon></svg>
@@ -9,8 +16,8 @@
         <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,63 @@ 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`${url}`.beforeEach(async (t) => {
+});
+
+test("Drag indicator for custom widget", async (t) => {
+  await wrapVisualTest(t, async (t, comparer) => {
+    await ClientFunction(() => {
+      const widget = {
+        name: "peoplepicker",
+        title: "People Picker",
+        iconName: "search",
+        widgetIsLoaded: function () { return true; },
+        isFit: function (question) { return question.getType() === "peoplepicker"; },
+        activatedByChanged: function (activatedBy) { window["Survey"].Serializer.addClass("peoplepicker", [], null, "empty"); },
+        isDefaultRender: false,
+        htmlTemplate: `
+                  <div>
+                    <label class="dds-search">
+                    <input type="text" placeholder="Search by name or email" value="">
+                    </label>
+                  </div>
+                `,
+        afterRender: (question, element) => {
+          const input = element.getElementsByTagName("input")[0];
+          input.style.width = "100%";
+          input.style.padding = "8px auto";
+        },
+      };
+
+      window["Survey"].CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");
+
+      const widgetTemplateForKo = document.createElement("script");
+      widgetTemplateForKo.setAttribute("id", "survey-widget-peoplepicker");
+      widgetTemplateForKo.setAttribute("type", "text/html");
+      widgetTemplateForKo.innerHTML = `
+                  <div>
+                    <label class="dds-search">
+                    <input type="text" placeholder="Search by name or email" value="">
+                    </label>
+                  </div>
+                `;
+      document.body.appendChild(widgetTemplateForKo);
+    })();
+    await t.resizeWindow(1252, 900);
+
+    const json = {
+      elements: [{ type: "peoplepicker", name: "q1" }, { type: "peoplepicker", 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);
+  });
+});