Work for #5873 - Implement pages drag/drop on design surface - fixed …

…remarks

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

@@ -2,26 +2,18 @@ import {
   Base,
   AdaptiveActionContainer,
   Action,
-  SurveyModel,
   SurveyElement,
   property,
-  actionModeType,
   IAction,
   ActionContainer,
   ComputedUpdater,
   AnimationBoolean,
   IAnimationConsumer,
-  classesToSelector,
-  PanelModel,
-  Question,
   CssClassBuilder
 } from "survey-core";
 import { CreatorBase, SurveyCreatorModel } from "../creator-base";
-import { DesignerStateManager } from "./tabs/designer-state-manager";
-import { TabDesignerPlugin } from "./tabs/designer-plugin";
 import { isPanelDynamic } from "../survey-elements";
 import { cleanHtmlElementAfterAnimation, prepareElementForVerticalAnimation } from "survey-core";
-import { toggleHovered } from "src/utils/utils";
 
 export class SurveyElementActionContainer extends AdaptiveActionContainer {
   private needToShrink(item: Action, shrinkTypeConverterAction: boolean) {
@@ -92,9 +84,9 @@ export class SurveyElementActionContainer extends AdaptiveActionContainer {
 }
 
 export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> extends Base {
+  public static AdornerValueName = "__sjs_creator_adorner";
   public actionContainer: ActionContainer;
   protected expandCollapseAction: IAction;
-  protected designerStateManager: DesignerStateManager;
   @property({ defaultValue: true }) allowDragging: boolean;
   @property({ defaultValue: false }) expandCollapseAnimationRunning: boolean;
   public rootElement: HTMLElement;
@@ -107,8 +99,8 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
   @property({
     onSet: (val, target: SurveyElementAdornerBase<T>) => {
       target.renderedCollapsed = val;
-      if (target.designerStateManager && target.surveyElement) {
-        target.designerStateManager.getElementState(target.surveyElement).collapsed = val;
+      if (target.creator.designerStateManager && !target.creator.designerStateManager.isSuspended && target.surveyElement) {
+        target.creator.designerStateManager.getElementState(target.surveyElement).collapsed = val;
       }
       setTimeout(() => {
         target.creator.survey.pages.forEach(p => p.ensureRowsVisibility());
@@ -266,8 +258,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
     protected surveyElement: T
   ) {
     super();
-    this.designerStateManager = (creator.getPlugin("designer") as TabDesignerPlugin)?.designerStateManager;
-    this.designerStateManager?.initForElement(surveyElement);
+    creator.designerStateManager?.initForElement(surveyElement);
     this.selectedPropPageFunc = (sender: Base, options: any) => {
       if (options.name === "isSelectedInDesigner") {
         this.onElementSelectedChanged(options.newValue);
@@ -291,22 +282,43 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
         this.collapsed = !this.collapsed;
       }
     };
-    this.collapsed = !!surveyElement && (this.designerStateManager?.getElementState(surveyElement).collapsed);
+    this.restoreState();
     this.setSurveyElement(surveyElement);
     this.creator.sidebar.onPropertyChanged.add(this.sidebarFlyoutModeChangedFunc);
     this.setShowAddQuestionButton(true);
     this.expandCollapseAction.visible = this.allowExpandCollapse;
     this.creator.expandCollapseManager.add(this);
   }
 
+  public static GetAdorner<V = SurveyElementAdornerBase>(surveyElement: SurveyElement): V {
+    return surveyElement.getPropertyValue(SurveyElementAdornerBase.AdornerValueName) as V;
+  }
+  public static RestoreStateFor(surveyElement: SurveyElement): void {
+    const adorner = SurveyElementAdornerBase.GetAdorner(surveyElement);
+    if (!!adorner) {
+      adorner.restoreState();
+    }
+  }
+
+  protected restoreState(): void {
+    if (!!this.surveyElement) {
+      const state = this.creator.designerStateManager?.getElementState(this.surveyElement);
+      this.collapsed = state.collapsed;
+    }
+  }
+
   protected detachElement(surveyElement: T): void {
     if (surveyElement) {
+      if (surveyElement.getPropertyValue(SurveyElementAdornerBase.AdornerValueName) === this) {
+        surveyElement.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, null);
+      }
       surveyElement.onPropertyChanged.remove(this.selectedPropPageFunc);
     }
   }
   protected attachElement(surveyElement: T): void {
     if (surveyElement) {
       surveyElement.onPropertyChanged.add(this.selectedPropPageFunc);
+      surveyElement.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, this);
     }
   }
   protected setSurveyElement(surveyElement: T): void {
@@ -353,11 +365,14 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       this.isOperationsAllow()
     );
   }
+  protected getAllowDragging(options: any): boolean {
+    return options.allowDragging;
+  }
   protected getAllowExpandCollapse(options: any): boolean {
     return this.creator.expandCollapseButtonVisibility != "never" && (options.allowExpandCollapse == undefined || !!options.allowExpandCollapse);
   }
   protected updateElementAllowOptions(options: any, operationsAllow: boolean): void {
-    this.allowDragging = operationsAllow && options.allowDragging;
+    this.allowDragging = operationsAllow && this.getAllowDragging(options);
     this.allowExpandCollapse = this.getAllowExpandCollapse(options);
     this.allowEditOption = (options.allowEdit == undefined || !!options.allowEdit);
     this.updateActionVisibility("delete", operationsAllow && options.allowDelete);

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

@@ -2,13 +2,13 @@ import { Action, ActionContainer, classesToSelector, ComputedUpdater, CssClassBu
 import { SurveyCreatorModel } from "../creator-base";
 import { IPortableMouseEvent } from "../utils/events";
 import { SurveyElementAdornerBase } from "./action-container-view-model";
-import { toggleHovered } from "../utils/utils";
 import { getLocString } from "../editorLocalization";
-require("./page.scss");
 import { SurveyHelper } from "../survey-helper";
 import { settings } from "../creator-settings";
 import { DragDropSurveyElements } from "../survey-elements";
 
+require("./page.scss");
+
 export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
   @property({ defaultValue: false }) isSelected: boolean;
   @property({ defaultValue: true }) isPageLive: boolean;
@@ -281,6 +281,9 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
       SurveyHelper.scrollIntoViewIfNeeded(this.rootElement);
     }
   }
+  protected getAllowDragging(options: any): boolean {
+    return this.creator.allowDragPages && super.getAllowDragging(options);;
+  }
   get isDragMe(): boolean {
     return this.surveyElement.isDragMe;
   }
@@ -295,7 +298,8 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
     const isElementSelected = this.creator.selectedElement === element;
     this.dragDropHelper.startDragSurveyElement(event, element, isElementSelected);
     if (this.creator.collapsePagesOnDragStart) {
-      this.creator.expandCollapseManager.updateCollapsed(true);
+      this.creator.designerStateManager?.suspend();
+      this.creator.collapseAllPages();
     }
     return true;
   }

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

@@ -777,44 +777,40 @@ svc-question,
         opacity: 1;
       }
     }
+
     .svc-question__content--collapsed {
-      & > * {
-        display: none;
-      }
 
-      .svc-question__drag-area {
-        display: flex;
-      }
-      .svc-content-wrapper {
-        display: flex;
+      &>.svc-question__dropdown-choices--wrapper,
+      &>.svc-panel__placeholder_frame-wrapper,
+      &>.svc-question__content-actions {
+        display: none;
       }
 
       .sd-element {
-        display: block;
-        & > *:not(.sd-element__header) {
+        &>*:not(.sd-element__header) {
           display: none;
         }
       }
+
       .sd-element__header {
-        & > *:not(.sd-element__title) {
+        &>*:not(.sd-element__title) {
           display: none;
         }
       }
+
       .sd-question__header--location--left {
         display: none;
       }
     }
   }
-}
 
-.svc-question__adorner {
   .svc-question__content--collapsed {
     flex-grow: 0;
     padding-bottom: calcSize(4);
     padding-top: calcSize(4);
 
     .sd-element__header,
-    .sd-element--complex > .sd-element__header {
+    .sd-element--complex>.sd-element__header {
       padding-top: 0;
       padding-bottom: 0;
     }

packages/survey-creator-core/src/components/tabs/designer-state-manager.ts

@@ -59,6 +59,14 @@ export class DesignerStateManager {
     return res;
   }
   public onInitElementStateCallback: (element: SurveyElement, state: ElementState) => void;
-  constructor() {
+  private _suspendCounter = 0;
+  public suspend() {
+    this._suspendCounter++;
+  }
+  public release() {
+    this._suspendCounter--;
+  }
+  public get isSuspended() {
+    return this._suspendCounter > 0;
   }
 }

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

@@ -53,12 +53,13 @@ import {
   PageAddingEvent, DragStartEndEvent
 } from "./creator-events-api";
 import { ExpandCollapseManager } from "./expand-collapse-manager";
+import designTabSurveyThemeJSON from "./designTabSurveyThemeJSON";
+import { SurveyElementAdornerBase } from "./components/action-container-view-model";
 
 require("./components/creator.scss");
 require("./components/string-editor.scss");
 require("./creator-theme/creator.scss");
 
-import designTabSurveyThemeJSON from "./designTabSurveyThemeJSON";
 
 export interface IKeyboardShortcut {
   name?: string;
@@ -1918,18 +1919,40 @@ export class SurveyCreatorModel extends Base
     this.dragDropSurveyElements.onDragEnd.add((sender, options) => {
       this.stopUndoRedoTransaction();
       const editTitle = isDraggedFromToolbox && this.startEditTitleOnQuestionAdded;
-      isDraggedFromToolbox = false;
       if (!options.draggedElement) return;
       this.selectElement(options.draggedElement, undefined, true, editTitle);
       this.onDragEnd.fire(this, options);
-      if (!options.fromElement) {
+      if (!options.fromElement && !options.draggedElement.isPage) {
         this.setModified({ type: "ADDED_FROM_TOOLBOX", question: options.draggedElement });
       }
     });
     this.dragDropSurveyElements.onDragClear.add((sender, options) => {
+      isDraggedFromToolbox = false;
       this.stopUndoRedoTransaction();
+      if (this.collapsePagesOnDragStart) {
+        this.designerStateManager?.release();
+        this.restorePagesState();
+      }
     });
   }
+  public get designerStateManager() {
+    return (this.getPlugin("designer") as TabDesignerPlugin).designerStateManager;
+  }
+  public collapseAllPages(): void {
+    this.survey.pages.forEach(page => {
+      const pageAdorner = SurveyElementAdornerBase.GetAdorner(page);
+      if (pageAdorner) {
+        pageAdorner.collapsed = true;
+      }
+    });
+  }
+  public restorePagesState(): void {
+    setTimeout(() => {
+      this.survey.pages.forEach(page => {
+        SurveyElementAdornerBase.RestoreStateFor(page);
+      });
+    }, 10);
+  }
   private initDragDropChoices() {
     this.dragDropChoices = new DragDropChoices(null, this);
     this.dragDropChoices.onDragStart.add((sender, options) => {
@@ -3914,6 +3937,7 @@ export class SurveyCreatorModel extends Base
       .append("svc-creator--disable-animations", !this.animationEnabled)
       .toString();
   }
+  public allowDragPages = false;
   public collapsePagesOnDragStart = false;
 }