#5680 Expand panels and pages on dragged in

Fixes #5680
surveyjs · Aug 14, 2024 · 73adf43 · 73adf43
1 parent 71b1421
commit 73adf43
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/packages/survey-creator-core/src/components/action-container-view-model.ts b/packages/survey-creator-core/src/components/action-container-view-model.ts
@@ -96,7 +96,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
   @property({ defaultValue: true }) allowDragging: boolean;
 
   protected get dragInsideCollapsedContainer(): boolean {
-    return this.collapsed && this.creator.dragDropSurveyElements.insideContainer;
+    return this.collapsed && !!this.surveyElement.dragTypeOverMe && this.surveyElement.dragInsideOverMe;
   }
 
   @property({ defaultValue: true }) allowExpandCollapse: boolean;
@@ -129,10 +129,14 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
   }
   protected expandWithDragIn() {
     this.collapsed = false;
+    this.dragCollapsedTimer = undefined;
   }
 
   protected dragOut() {
-    if (this.dragCollapsedTimer) clearTimeout(this.dragCollapsedTimer);
+    if (this.dragCollapsedTimer) {
+      clearTimeout(this.dragCollapsedTimer);
+      this.dragCollapsedTimer = undefined;
+    }
   }
 
   public dblclick(event) {
@@ -151,10 +155,8 @@ 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 (this.dragInsideCollapsedContainer) {
-          if (!!options.newValue) this.dragIn(); else this.dragOut();
-        }
+      if (options.name === "dragTypeOverMe" || options.name === "dragInsideOverMe") {
+        if (this.dragInsideCollapsedContainer) this.dragIn(); else this.dragOut();
       }
       if (options.name === "isSelectedInDesigner") {
         this.onElementSelectedChanged(options.newValue);

diff --git a/packages/survey-creator-core/src/components/page.ts b/packages/survey-creator-core/src/components/page.ts
@@ -41,7 +41,7 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
   }
 
   protected get dragInsideCollapsedContainer(): boolean {
-    return this.collapsed;
+    return this.collapsed && !!this.surveyElement.dragTypeOverMe;
   }
 
   protected attachElement(surveyElement: PageModel): void {

diff --git a/packages/survey-creator-core/src/survey-elements.ts b/packages/survey-creator-core/src/survey-elements.ts
@@ -54,7 +54,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)
 
-  public insideContainer = null;
+  private insideContainer = null;
   protected prevIsEdge: any = null;
   // protected ghostSurveyElement: IElement = null;
   protected dragOverIndicatorElement: any = null;
@@ -393,6 +393,8 @@ export class DragDropSurveyElements extends DragDropCore<any> {
     this.allowDropHere = true;
 
     this.dragOverCore(dropTarget, dragOverLocation);
+
+    if (dropTarget) dropTarget.dragInsideOverMe = this.insideContainer;
   }
 
   protected onStartDrag(): void {
@@ -459,6 +461,7 @@ export class DragDropSurveyElements extends DragDropCore<any> {
     this.removeDragOverMarker(this.prevDropTarget);
     this.removeDragOverMarker(this.dropTarget);
     this.removeDragOverMarker(this.dragOverIndicatorElement);
+    if (this.dropTarget) this.dropTarget.dragInsideOverMe = false;
     if (!!this.draggedElement) {
       this.draggedElement.isDragMe = false;
     }