Work for surveyjs/private-tasks#437 - Page drag-n-drop issue. No need to expand page (#6675)

* Work for surveyjs/private-tasks#437 - Page drag-n-drop issue. No need to expand page

* Try to fix u-tests

* Fixed f-test

* Removed commented code

---------

Co-authored-by: tsv2013 <tsv2013@noreply.github.com>

Author: tsv2013

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

@@ -109,8 +109,8 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
     onSet: (val, target: SurveyElementAdornerBase<T>) => {
       target.renderedCollapsed = val;
       if (!val) target.needToRenderContent = true;
-      if (target.creator.designerStateManager && !target.creator.designerStateManager.isSuspended && target.surveyElement) {
-        target.creator.designerStateManager.getElementState(target.surveyElement).collapsed = val;
+      if (target.creator.designerStateManager && target.surveyElement) {
+        target.creator.designerStateManager.setElementCollapsed(target.surveyElement, val);
       }
       setTimeout(() => {
         target.creator.survey.pages.forEach(p => p.ensureRowsVisibility());
@@ -345,8 +345,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
 
   protected restoreState(): void {
     if (!!this.surveyElement) {
-      const state = this.creator.designerStateManager?.getElementState(this.surveyElement);
-      this.collapsed = state.collapsed;
+      this.collapsed = this.creator.designerStateManager?.getElementCollapsed(this.surveyElement);
     }
     if (!this.surveyElement || this.surveyElement.isInteractiveDesignElement) {
       this.needToRenderContent = !this.collapsed;

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

@@ -41,7 +41,14 @@ export class DesignerStateManager {
       "designerStateManager"
     );
   }
-  getElementState(element: SurveyElement): ElementState {
+  getElementCollapsed(element: SurveyElement): boolean {
+    return this.getElementState(element).collapsed;
+  }
+  setElementCollapsed(element: SurveyElement, isCollapsed: boolean): void {
+    if (this.isSuspended) return;
+    this.getElementState(element).collapsed = isCollapsed;
+  }
+  private getElementState(element: SurveyElement): ElementState {
     return this.createElementState(element, true);
   }
   private createElementState(element: SurveyElement, checkIfExists: boolean): ElementState {

packages/survey-creator-core/src/expand-collapse-manager.ts

@@ -25,22 +25,17 @@ export class ExpandCollapseManager {
   }
 
   private updateCollapsed(elements: SurveyElement[], value: boolean, reason: ElementGetExpandCollapseStateEventReason) {
-    const canToSaveToStateManager = this.creator.designerStateManager && !this.creator.designerStateManager.isSuspended;
     elements.forEach(element => {
       if (element.isQuestion && this._lockQuestions) return;
-      if (canToSaveToStateManager) {
-        this.creator.designerStateManager.getElementState(element).collapsed =
-          this.creator.getElementExpandCollapseState(element as Question | PageModel | PanelModel, reason, value);
-      }
+      const collapsed = this.creator.getElementExpandCollapseState(element as Question | PageModel | PanelModel, reason, value);
+      this.creator.designerStateManager?.setElementCollapsed(element, collapsed);
     });
     for (let i = this.adorners.length - 1; i >= 0; i--) {
       const element = this.adorners[i].element;
       if (element.isQuestion && this._lockQuestions) continue;
       if (elements.indexOf(element) == -1) continue;
       if (this.adorners[i].allowExpandCollapse) {
-        let newState = canToSaveToStateManager ?
-          this.creator.designerStateManager.getElementState(element).collapsed :
-          this.creator.getElementExpandCollapseState(element as Question | PageModel | PanelModel, reason, value);
+        const newState = this.creator.getElementExpandCollapseState(element as Question | PageModel | PanelModel, reason, value);
         this.adorners[i].collapsed = newState;
       }
     }

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

@@ -459,11 +459,13 @@ export class DragDropSurveyElements extends DragDropCore<any> {
     const src = this.draggedElement;
 
     if (dragged.isPage && dragged instanceof PageModel) {
-      const survey = dragged.survey;
+      const survey = dragged.survey as SurveyModel;
+      survey.startMovingPage();
       const indexOfDraggedPage = survey.pages.indexOf(dragged);
       survey.pages.splice(indexOfDraggedPage, 1);
       const indexOfDropTarget = survey.pages.indexOf(this.dropTarget) + (this.dragOverLocation === DragTypeOverMeEnum.Top ? 0 : 1);
       survey.pages.splice(indexOfDropTarget, 0, dragged);
+      survey.stopMovingPage();
 
       if (indexOfDraggedPage !== indexOfDropTarget) {
         dragged["draggedFrom"] = indexOfDraggedPage < indexOfDropTarget ? indexOfDraggedPage : indexOfDraggedPage + 1;

packages/survey-creator-core/tests/dragdrop-elements.tests.ts

@@ -1579,4 +1579,31 @@ test("isDragInsideItself", () => {
   div2.classList.add("svc-question__content--dragged");
   expect(ddHelper["isDragInsideItself"]([div1, div2])).toBe(true);
   expect(ddHelper["isDragInsideItself"]([div1])).toBe(false);
+});
+
+test("drag drop move page shouldn't raise survey onPageAdded", () => {
+  const json = {
+    "pages": [
+      { "name": "page1", "elements": [{ "type": "text", "name": "q1" }] },
+      { "name": "page2", "elements": [{ "type": "text", "name": "q2" }] },
+      { "name": "page3", "elements": [{ "type": "text", "name": "q3" }] },
+    ]
+  };
+  const survey = new SurveyModel(json);
+
+  let pageAddedCounter = 0;
+  survey.onPageAdded.add((s, o) => {
+    pageAddedCounter++;
+  });
+
+  const [p1, p2, p3] = survey.pages;
+
+  const ddHelper: any = new DragDropSurveyElements(survey);
+
+  expect(pageAddedCounter).toBe(0);
+  ddHelper.draggedElement = p3;
+  ddHelper.dragOverCore(p2, DragTypeOverMeEnum.Top);
+  ddHelper.doDrop();
+  expect(p3["draggedFrom"]).toStrictEqual(3);
+  expect(pageAddedCounter).toBe(0);
 });