Resolved #5873 - Implement pages drag/drop on design surface

packages/survey-creator-angular/src/page.component.html

@@ -1,8 +1,18 @@
 <div *ngIf="model && adorner && (isGhost === undefined || isGhost === adorner.isGhost)" class="svc-page__content"
   [class]="adorner.css" [key2click] (click)="adorner.select(adorner, $event)" (dblclick)="adorner.dblclick($event)"
   (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.target)"
-  [id]="adorner.page.id" #container>
-  <div class="svc-page__content-actions">
+  [id]="adorner.page.id" [attr.data-sv-drop-target-survey-page]="adorner.dropTargetName" #container>
+  <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 && !adorner.isGhost" class="svc-question__drag-area"
+    (pointerdown)="adorner.onPointerDown($event)">
+    <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
+      sv-ng-svg-icon></svg>
+    <div class="svc-page__content-actions">
+      <sv-action-bar [model]="adorner.actionContainer"></sv-action-bar>
+    </div>
+  </div>
+  <div *ngIf="!adorner.allowDragging || adorner.isGhost" class="svc-page__content-actions">
     <sv-action-bar [model]="adorner.actionContainer"></sv-action-bar>
   </div>
   <page [model]="model" [survey]="survey"></page>

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/item-value.scss

@@ -206,6 +206,8 @@
 }
 
 .svc-item-value--ghost {
+  height: calcSize(6);
+
   .svc-item-value__ghost {
     display: block;
   }
@@ -218,8 +220,6 @@
     display: none;
   }
 
-  height: calcSize(6);
-
   .sv-string-viewer,
   .sv-string-editor {
     white-space: unset;

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

@@ -35,6 +35,14 @@ svc-page {
     margin: 0;
     padding: calcSize(1) calcSize(3) 0;
   }
+
+  &>.svc-question__drag-area {
+    padding-top: calcSize(1.25);
+  }
+}
+
+.svc-page__content--dragged {
+  opacity: 0.25;
 }
 
 .svc-page__content-actions {
@@ -127,7 +135,16 @@ svc-page {
   .svc-page__content-actions {
     opacity: 1;
   }
+
+  &>.svc-question__drag-area {
+    z-index: 1;
+
+    .svc-question__drag-element {
+      opacity: var(--ctr-survey-page-drag-indicator-opacity, 0.5);
+    }
+  }
 }
+
 .svc-page__content--selected.svc-page__content--selected {
   box-shadow: 0 0 0 2px $secondary;
   background: $secondary-backcolor-semi-light;
@@ -312,7 +329,11 @@ svc-page {
 }
 
 .svc-page__content--collapsed {
-  &>* {
+  &>.sv-action-bar {
+    display: none;
+  }
+
+  .svc-page__placeholder_frame {
     display: none;
   }
 

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

@@ -1,25 +1,33 @@
-import { Action, ActionContainer, classesToSelector, ComputedUpdater, CssClassBuilder, DragTypeOverMeEnum, IAction, IElement, PageModel, property } from "survey-core";
+import { Action, ActionContainer, classesToSelector, ComputedUpdater, CssClassBuilder, DragOrClickHelper, DragTypeOverMeEnum, IAction, IElement, PageModel, property } from "survey-core";
 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;
   @property() showPlaceholder: boolean;
   public questionTypeSelectorModel: any;
+  private dragOrClickHelper: DragOrClickHelper;
   @property({ defaultValue: "" }) currentAddQuestionType: string;
   @property({ defaultValue: null }) dragTypeOverMe: DragTypeOverMeEnum;
+  @property({ defaultValue: false }) isDragMe: boolean;
   private updateDragTypeOverMe() {
     if (!this.isDisposed) {
       this.dragTypeOverMe = this.page?.dragTypeOverMe;
     }
   }
+  private updateIsDragMe() {
+    if (!this.isDisposed) {
+      this.isDragMe = this.page?.isDragMe;
+    }
+  }
   private updateShowPlaceholder(elements?: Array<IElement>) {
     this.showPlaceholder = !this.isGhost && (elements || this.page.elements).length === 0;
   }
@@ -38,6 +46,7 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
       }
     );
     this.attachElement(page);
+    this.dragOrClickHelper = new DragOrClickHelper(this.startDragSurveyElement);
   }
   protected updateActionVisibility(id: string, isVisible: boolean) {
     super.updateActionVisibility(id, !this.isGhost && isVisible);
@@ -74,6 +83,12 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
           this.updateDragTypeOverMe();
         }
       );
+      surveyElement.registerFunctionOnPropertiesValueChanged(
+        ["isDragMe"],
+        () => {
+          this.updateIsDragMe();
+        }
+      );
       surveyElement.registerFunctionOnPropertiesValueChanged(["elements"], (newValue: Array<IElement>) => {
         this.updateShowPlaceholder(newValue);
       });
@@ -83,12 +98,13 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
       surveyElement.setWasShown(true);
       this.checkActionProperties();
       this.dragTypeOverMe = surveyElement.dragTypeOverMe;
+      this.isDragMe = surveyElement.isDragMe;
     }
   }
 
   protected detachElement(surveyElement: PageModel): void {
     if (!!surveyElement) {
-      surveyElement.unRegisterFunctionOnPropertiesValueChanged(["dragTypeOverMe"]);
+      surveyElement.unRegisterFunctionOnPropertiesValueChanged(["dragTypeOverMe", "isDragMe"]);
       surveyElement.unRegisterFunctionOnPropertiesValueChanged(["title", "description"], "add_ghost");
       surveyElement["surveyChangedCallback"] = undefined;
     }
@@ -186,25 +202,37 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
 
   get css(): string {
     let result = super.getCss();
-    if (!!this.dragTypeOverMe && this.showPlaceholder) {
-      result = "svc-question__content--drag-over-inside";
-    } else if (!!this.dragTypeOverMe && this.page.elements.length === 0 && this.creator.survey.pages.length > 0) {
-      result = "svc-page--drag-over-empty";
-      if (!!this.creator && !this.creator.showAddQuestionButton) {
-        result += " svc-page--drag-over-empty-no-add-button";
+    if (this.dragDropHelper.draggedElement && this.dragDropHelper.draggedElement.isPage) {
+      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.dragTypeOverMe && this.collapsed) {
-      this.dragIn();
-      result += " svc-page__content--collapsed-drag-over-inside";
     } else {
-      this.dragOut();
+      if (!!this.dragTypeOverMe && this.showPlaceholder) {
+        result = "svc-question__content--drag-over-inside";
+      } else if (!!this.dragTypeOverMe && this.page.elements.length === 0 && this.creator.survey.pages.length > 0) {
+        result = "svc-page--drag-over-empty";
+        if (!!this.creator && !this.creator.showAddQuestionButton) {
+          result += " svc-page--drag-over-empty-no-add-button";
+        }
+      }
+      if (!!this.dragTypeOverMe && this.collapsed) {
+        this.dragIn();
+        result += " svc-page__content--collapsed-drag-over-inside";
+      } else {
+        this.dragOut();
+      }
     }
-    if(this.allowExpandCollapse) {
+    if (this.allowExpandCollapse) {
       result += (" svc-page__content--collapse-" + this.creator.expandCollapseButtonVisibility);
       if (this.renderedCollapsed) result += (" svc-page__content--collapsed");
       if (this.expandCollapseAnimationRunning) result += (" svc-page__content--animation-running");
     }
+    if (this.isDragMe) {
+      result += " svc-page__content--dragged";
+    }
     if (this.isGhost) {
       return result + " svc-page__content--new";
     }
@@ -264,8 +292,33 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
     return null;
   }
   public onPageSelected() {
-    if(this.rootElement) {
+    if (this.rootElement) {
       SurveyHelper.scrollIntoViewIfNeeded(this.rootElement);
     }
   }
+  protected getAllowDragging(options: any): boolean {
+    return this.creator.allowDragPages && super.getAllowDragging(options);
+  }
+  private get dragDropHelper(): DragDropSurveyElements {
+    return this.creator.dragDropSurveyElements;
+  }
+  onPointerDown(pointerDownEvent: PointerEvent) {
+    this.dragOrClickHelper.onPointerDown(pointerDownEvent);
+  }
+  startDragSurveyElement = (event: PointerEvent) => {
+    const element = <any>this.surveyElement;
+    const isElementSelected = this.creator.selectedElement === element;
+    this.dragDropHelper.startDragSurveyElement(event, element, isElementSelected);
+    if (this.creator.collapsePagesOnDrag) {
+      this.creator.designerStateManager?.suspend();
+      this.creator.collapseAllPages();
+    }
+    return true;
+  }
+  get dropTargetName(): string {
+    if (!this.isGhost && !!this.page) {
+      return this.page.name;
+    }
+    return null;
+  }
 }