Issue/5680-Expand-panels-and-pages-on-dragged-in

packages/survey-creator-core/src/components/action-container-view-model.ts

@@ -93,6 +93,11 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
   protected expandCollapseAction: IAction;
   protected designerStateManager: DesignerStateManager;
   @property({ defaultValue: true }) allowDragging: boolean;
+
+  protected get dragInsideCollapsedContainer(): boolean {
+    return this.collapsed && this.creator.dragDropSurveyElements.insideContainer;
+  }
+
   @property({ defaultValue: true }) allowExpandCollapse: boolean;
   @property({
     onSet: (val, target: SurveyElementAdornerBase<T>) => {
@@ -108,6 +113,23 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
   }) collapsed: boolean;
   @property() renderedCollapsed: boolean;
 
+  private dragCollapsedTimer;
+
+  protected dragIn() {
+    if ((this.surveyElement.isPanel || this.surveyElement.isPage) && this.collapsed) {
+      this.dragCollapsedTimer = setTimeout(() => {
+        this.expandWithDragIn();
+      }, this.creator.expandOnDragTimeOut);
+    }
+  }
+  protected expandWithDragIn() {
+    this.collapsed = false;
+  }
+
+  protected dragOut() {
+    if (this.dragCollapsedTimer) clearTimeout(this.dragCollapsedTimer);
+  }
+
   public dblclick(event) {
     if (this.allowExpandCollapse) this.collapsed = !this.collapsed;
     event.stopPropagation();
@@ -124,6 +146,9 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
     this.designerStateManager = (creator.getPlugin("designer") as TabDesignerPlugin)?.designerStateManager;
     this.designerStateManager?.initForElement(surveyElement);
     this.selectedPropPageFunc = (sender: Base, options: any) => {
+      if (options.name === "dragTypeOverMe") {
+        if (!!options.newValue && this.dragInsideCollapsedContainer) this.dragIn(); else this.dragOut();
+      }
       if (options.name === "isSelectedInDesigner") {
         this.onElementSelectedChanged(options.newValue);
       }

packages/survey-creator-core/src/components/page.scss

@@ -139,6 +139,32 @@ svc-page {
     visibility: visible;
   }
 }
+
+.svc-creator .svc-page .svc-page__content--collapsed {
+  &::after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: 2px $border dashed;
+    margin: -2px;
+    border-radius: calcSize(1.25);
+    box-sizing: content-box;
+    pointer-events: none;
+  }
+  &.svc-page__content--collapsed-drag-over-inside {
+    box-shadow: 0 0 0 2px $primary;
+    background: $primary-light;
+    &::after {
+      border: 2px $primary solid;
+      background: $primary-light;
+      animation: collapsed-drag-over-inside-blinking 1s infinite;
+    }
+  }
+}
+
 .svc-creator--mobile {
   .svc-page .svc-page__content--collapsed {
     &::after {
@@ -151,8 +177,6 @@ svc-page {
   &.svc-creator .svc-page .svc-page__content--selected:focus,
   .svc-hovered.svc-page__content {
     &.svc-page__content--selected {
-      box-shadow: 0 0 0 2px inset $secondary;
-
       box-shadow: 0 0 0 2px inset var(--ctr-survey-page-border-color-selected, $secondary);
       background: var(--ctr-survey-page-background-color-selected, $secondary-backcolor-semi-light);
 

packages/survey-creator-core/src/components/page.ts

@@ -184,6 +184,9 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
         result += " svc-page--drag-over-empty-no-add-button";
       }
     }
+    if (!!this.dragTypeOverMe && this.collapsed) {
+      result += " svc-page__content--collapsed-drag-over-inside";
+    }
     if (this.isGhost) {
       return result + " svc-page__content--new";
     }

packages/survey-creator-core/src/components/question.scss

@@ -17,7 +17,9 @@ svc-question {
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-
+  &.svc-question__adorner--collapsed {
+    height: fit-content;
+  }
   .sv-action-bar {
     overflow: visible;
 
@@ -270,6 +272,21 @@ svc-question {
 .svc-question__content--selected:not(.svc-question__content--dragged) {
   box-shadow: 0 0 0 2px $secondary;
 }
+.svc-question__content--collapsed-drag-over-inside:not(.svc-question__content--dragged) {
+  box-shadow: 0 0 0 2px $primary;
+  background: $primary-light;
+  animation: collapsed-drag-over-inside-blinking 1s;
+}
+
+@keyframes collapsed-drag-over-inside-blinking {
+  0%{ background: $primary-light }
+  40%{ background: $primary-light }
+  50%{ background: $background }
+  60%{ background: $primary-light }
+  75%{ background: $background }
+  85%{ background: $primary-light }
+  100%{ background: $primary-light }
+}
 
 .svc-question__content--selected:not(.svc-question__content--dragged),
 .svc-creator:not(.svc-creator--mobile)

packages/survey-creator-core/src/components/question.ts

@@ -130,49 +130,44 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
 
     if (this.isDragMe) {
       result += " svc-question__content--dragged";
-    } else {
-      result = result.replace(" svc-question__content--dragged", "");
     }
 
-    if (this.dragTypeOverMe === DragTypeOverMeEnum.InsideEmptyPanel) {
-      result += " svc-question__content--drag-over-inside";
-    } else {
-      result = result.replace(" svc-question__content--drag-over-inside", "");
+    if (!!this.dragTypeOverMe && this.surveyElement.isPanel && this.dragInsideCollapsedContainer) {
+      result += " svc-question__content--collapsed-drag-over-inside";
     }
 
-    if (this.dragTypeOverMe === DragTypeOverMeEnum.Left) {
-      result += " svc-question__content--drag-over-left";
-    } else {
-      result = result.replace(" svc-question__content--drag-over-left", "");
-    }
-
-    if (this.dragTypeOverMe === DragTypeOverMeEnum.Right) {
-      result += " svc-question__content--drag-over-right";
-    } else {
-      result = result.replace(" svc-question__content--drag-over-right", "");
+    if (this.dragTypeOverMe === DragTypeOverMeEnum.InsideEmptyPanel) {
+      result += " svc-question__content--drag-over-inside";
     }
+    if (!this.dragInsideCollapsedContainer) {
+      if (this.dragTypeOverMe === DragTypeOverMeEnum.Left) {
+        result += " svc-question__content--drag-over-left";
+      }
 
-    if (this.dragTypeOverMe === DragTypeOverMeEnum.Top) {
-      result += " svc-question__content--drag-over-top";
-    } else {
-      result = result.replace(" svc-question__content--drag-over-top", "");
-    }
+      if (this.dragTypeOverMe === DragTypeOverMeEnum.Right) {
+        result += " svc-question__content--drag-over-right";
+      }
 
-    if (this.dragTypeOverMe === DragTypeOverMeEnum.Bottom) {
-      result += " svc-question__content--drag-over-bottom";
-    } else {
-      result = result.replace(" svc-question__content--drag-over-bottom", "");
-    }
-    if (this.creator) {
-      result = this.creator.getElementAddornerCssCallback(this.surveyElement, result);
+      if (this.dragTypeOverMe === DragTypeOverMeEnum.Top) {
+        result += " svc-question__content--drag-over-top";
+      }
+      if (this.dragTypeOverMe === DragTypeOverMeEnum.Bottom) {
+        result += " svc-question__content--drag-over-bottom";
+      }
+      if (this.creator) {
+        result = this.creator.getElementAddornerCssCallback(this.surveyElement, result);
+      }
     }
     return result;
   }
-
+  protected expandWithDragIn() {
+    super.expandWithDragIn();
+    this.element.dragTypeOverMe = null;
+    this.creator.dragDropSurveyElements.dropTarget = null;
+  }
   get isDragMe(): boolean {
     return this.surveyElement.isDragMe;
   }
-
   get dragTypeOverMe() {
     return this.element.dragTypeOverMe;
   }

packages/survey-creator-core/src/creator-base.ts

@@ -3801,6 +3801,8 @@ export class SurveyCreatorModel extends Base
    */
   @property({ defaultValue: "never" }) expandCollapseButtonVisibility?: "never" | "onhover" | "always";
 
+  expandOnDragTimeOut: number = 1000;
+
   selectFromStringEditor: boolean;
 
   @property({

packages/survey-creator-core/src/survey-elements.ts

@@ -50,7 +50,7 @@ export class DragDropSurveyElements extends DragDropCore<any> {
   public static nestedPanelDepth: number = -1;
   public static ghostSurveyElementName = "sv-drag-drop-ghost-survey-element-name"; // before renaming use globa search (we have also css selectors)
 
-  private insideEmptyContainer = null;
+  public insideContainer = null;
   protected prevIsEdge: any = null;
   // protected ghostSurveyElement: IElement = null;
   protected dragOverIndicatorElement: any = null;
@@ -179,10 +179,6 @@ export class DragDropSurveyElements extends DragDropCore<any> {
     // drop to page
     let page: any = this.survey.getPageByName(dataAttributeValue);
     if (page) {
-      if (page.elements.length !== 0) {
-        // TODO we can't drop on not empty page directly for now
-        return null;
-      }
       return page;
     }
 
@@ -199,12 +195,12 @@ export class DragDropSurveyElements extends DragDropCore<any> {
     });
 
     // drop to paneldynamic
-    if (dropTarget.getType() === "paneldynamic" && this.insideEmptyContainer) {
+    if (dropTarget.getType() === "paneldynamic" && this.insideContainer) {
       dropTarget = (<any>dropTarget).template;
     }
 
     // drop to matrix detail panel
-    if ((dropTarget.getType() === "matrixdropdown" || dropTarget.getType() === "matrixdynamic") && (<any>dropTarget).detailPanelMode !== "none" && this.insideEmptyContainer) {
+    if ((dropTarget.getType() === "matrixdropdown" || dropTarget.getType() === "matrixdynamic") && (<any>dropTarget).detailPanelMode !== "none" && this.insideContainer) {
       dropTarget = (<any>dropTarget).detailPanel;
     }
 
@@ -365,12 +361,12 @@ export class DragDropSurveyElements extends DragDropCore<any> {
       this.banDropHere();
       return;
     }
-    this.insideEmptyContainer = !calculateIsEdge(dropTargetNode, event.clientY) && !calculateIsSide(dropTargetNode, event.clientX);
+    this.insideContainer = !calculateIsEdge(dropTargetNode, event.clientY) && !calculateIsSide(dropTargetNode, event.clientX);
     const dropTarget = this.getDropTargetByNode(dropTargetNode, event);
 
     let dragOverLocation = calculateDragOverLocation(event.clientX, event.clientY, dropTargetNode);
     if (dropTarget && (dropTarget.isPanel || dropTarget.isPage) && dropTarget.elements.length === 0) {
-      if (dropTarget.isPage || this.insideEmptyContainer) {
+      if (dropTarget.isPage || this.insideContainer) {
         dragOverLocation = DragTypeOverMeEnum.InsideEmptyPanel;
       }
     }
@@ -428,6 +424,7 @@ export class DragDropSurveyElements extends DragDropCore<any> {
       srcContainer.removeElement(src);
     }
     const dest = this.dragOverIndicatorElement?.isPanel ? this.dragOverIndicatorElement : this.dropTarget;
+    if (dest.isPage && dest.elements.length > 0) return;
     const isTargetIsContainer = dest.isPanel || dest.isPage;
     if (isTargetIsContainer && this.dragOverLocation == DragTypeOverMeEnum.InsideEmptyPanel) {
       dest.insertElement(src);
@@ -449,7 +446,7 @@ export class DragDropSurveyElements extends DragDropCore<any> {
   }
 
   public clear(): void {
-    this.insideEmptyContainer = null;
+    this.insideContainer = null;
     this.removeDragOverMarker(this.prevDropTarget);
     this.removeDragOverMarker(this.dropTarget);
     this.removeDragOverMarker(this.dragOverIndicatorElement);

testCafe/designer/drag-drop.ts

@@ -372,6 +372,91 @@ test("Drag Drop to Panel", async (t) => {
   const resultJson = await getJSON();
   await t.expect(resultJson).eql(expectedJson);
 });
+
+test("Drag Drop to collapsed panel", async (t) => {
+  await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "always"; })();
+
+  await t.resizeWindow(1600, 1000);
+  const json = {
+    pages: [
+      {
+        name: "page1",
+        elements: [
+          {
+            type: "panel",
+            name: "panel1",
+            elements: [{
+              type: "text",
+              name: "q1"
+            }]
+          }
+        ]
+      }
+    ]
+  };
+  await setJSON(json);
+
+  const qCollapseButton = Selector(".svc-question__content #collapse");
+  await t.click(qCollapseButton.filterVisible());
+
+  const Panel = Selector("[data-sv-drop-target-survey-element=\"panel1\"]");
+  const toolboxToolAction = Selector(".svc-toolbox__tool > .sv-action__content");
+  await t
+    .hover(toolboxToolAction)
+    .dispatchEvent(toolboxToolAction, "pointerdown")
+    .hover(Panel, { offsetX: 5 })
+    .expect(Panel.find(".svc-question__content--drag-over-left").exists).ok()
+    .expect(Panel.find(".svc-question__content--collapsed-drag-over-inside").exists).notOk()
+    .wait(2000)
+    .hover(Panel, { offsetX: 100 })
+    .expect(Panel.find(".svc-question__content--collapsed").exists).ok()
+    .wait(2000)
+    .expect(Panel.find(".svc-question__content--collapsed").exists).notOk()
+    .expect(Panel.find(".svc-question__content--drag-over-left").exists).notOk()
+    .dispatchEvent(toolboxToolAction, "pointerup");
+
+  const resultJson = await getJSON();
+  await t.expect(resultJson).eql(json);
+});
+
+test("Drag Drop to collapsed page", async (t) => {
+  await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "always"; })();
+
+  await t.resizeWindow(1600, 1000);
+  const json = {
+    pages: [
+      {
+        name: "page1",
+        elements: [
+          {
+            type: "panel",
+            name: "panel1",
+            elements: [{
+              type: "text",
+              name: "q1"
+            }]
+          }
+        ]
+      }
+    ]
+  };
+  await setJSON(json);
+
+  const qCollapseButton = Selector(".svc-page__content #collapse");
+  await t.click(qCollapseButton.filterVisible());
+
+  const Page = Selector(".svc-page");
+  const toolboxToolAction = Selector(".svc-toolbox__tool > .sv-action__content");
+  await t
+    .hover(toolboxToolAction)
+    .dispatchEvent(toolboxToolAction, "pointerdown")
+    .hover(Page)
+
+    .expect(Page.find(".svc-page__content--collapsed").exists).ok()
+    .wait(2000)
+    .expect(Page.find(".svc-page__content--collapsed").exists).notOk();
+});
+
 test("Drag Drop Question from a panel", async (t) => {
   await t.resizeWindow(2560, 1440);
   const json = {