Create adorner action container on demand (#6619)

* Create adorner action container on demand

* FIx unit tests

* Refactor visibility actions processing

* Fix page adorners visual tests

* Fix top container css classes

Author: andrewtelnov

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

@@ -95,8 +95,6 @@ export class SurveyElementActionContainer extends AdaptiveActionContainer {
 
 export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> extends Base {
   public static AdornerValueName = "__sjs_creator_adorner";
-  public actionContainer: SurveyElementActionContainer;
-  public topActionContainer: ActionContainer;
   protected expandCollapseAction: IAction;
   @property({ defaultValue: true }) allowDragging: boolean;
   @property({ defaultValue: false }) expandCollapseAnimationRunning: boolean;
@@ -228,20 +226,20 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
   public get renderedCollapsed(): boolean {
     return !!this._renderedCollapsed;
   }
-  protected createActionContainers() {
-    this.actionContainer = this.createActionContainer();
-    this.topActionContainer = new ActionContainer();
-    this.topActionContainer.sizeMode = "small";
+  protected createTopActionContainer(): ActionContainer {
+    const actionContainer = new ActionContainer();
+    actionContainer.sizeMode = "small";
     if (this.creator.expandCollapseButtonVisibility != "never") {
-      this.topActionContainer.setItems([this.expandCollapseAction]);
-      this.topActionContainer.cssClasses = {
+      actionContainer.setItems([this.expandCollapseAction]);
+      actionContainer.cssClasses = {
         root: "svc-survey-element-top-toolbar sv-action-bar",
         item: "svc-survey-element-top-toolbar__item",
         itemIcon: "svc-survey-element-toolbar-item__icon",
         itemTitle: "svc-survey-element-toolbar-item__title",
         itemTitleWithIcon: "svc-survey-element-toolbar-item__title--with-icon",
       };
     }
+    return actionContainer;
   }
 
   protected createActionContainer(): SurveyElementActionContainer {
@@ -302,9 +300,33 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
   ) {
     super();
     this.expandCollapseAction = this.getExpandCollapseAction();
-    this.createActionContainers();
     this.attachToUI(surveyElement);
   }
+  private actionContainerValue: SurveyElementActionContainer;
+  protected get isActionContainerCreated(): boolean {
+    return !!this.actionContainerValue;
+  }
+  public get actionContainer(): SurveyElementActionContainer {
+    if (!this.actionContainerValue) {
+      this.actionContainerValue = this.createActionContainer();
+      if(this.surveyElement) {
+        this.updateActionsContainer(this.surveyElement);
+        this.updateActionsVisibility(false);
+      }
+    }
+    return this.actionContainerValue;
+  }
+  private topActionContainerValue: ActionContainer;
+  public get topActionContainer(): ActionContainer {
+    if(!this.topActionContainerValue) {
+      this.topActionContainerValue = this.createTopActionContainer();
+      if(this.surveyElement) {
+        this.updateActionsVisibility(true);
+      }
+    }
+    return this.topActionContainerValue;
+  }
+
   private creatorOnLocaleChanged: (sender: Base, options: any) => void = (_, options) => {
     if(this.surveyElement) {
       this.updateActionsContainer(this.surveyElement);
@@ -389,13 +411,17 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
   }
   public dispose(): void {
     this.detachFromUI();
-    if (!this.actionContainer.isDisposed) {
-      this.actionContainer.dispose();
-    }
+    this.disposeActions(this.actionContainerValue);
+    this.disposeActions(this.topActionContainerValue);
     super.dispose();
     this.sidebarFlyoutModeChangedFunc = undefined;
     this.animationCollapsed = undefined;
   }
+  private disposeActions(container: ActionContainer): void {
+    if(!!container && !container.isDisposed) {
+      container.dispose();
+    }
+  }
   protected onElementSelectedChanged(isSelected: boolean): void {
     if (!isSelected) return;
     this.updateActionsProperties();
@@ -415,18 +441,24 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
     };
   }
   protected cleanActionsContainer() {
-    const actions = this.actionContainer.actions;
-    this.actionContainer.setItems([]);
+    const container = this.actionContainerValue;
+    if(!container) return;
+    const actions = container.actions;
+    container.setItems([]);
     actions.forEach(action => action.dispose && action.dispose());
   }
   protected updateActionsContainer(surveyElement: SurveyElement) {
+    if(!this.actionContainerValue) return;
     const actions: Array<Action> = [];
     this.buildActions(actions);
     this.creator.onElementMenuItemsChanged(surveyElement, actions);
-    this.actionContainer.setItems(actions);
+    this.actionContainerValue.setItems(actions);
   }
   protected updateActionsProperties(): void {
     if (this.isDisposed) return;
+    this.updateActionsPropertiesCore();
+  }
+  protected updateActionsPropertiesCore(): void {
     this.updateElementAllowOptions(
       this.creator.getElementAllowOperations(this.surveyElement),
       this.isOperationsAllow()
@@ -456,11 +488,21 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
   protected isOperationsAllow(): boolean {
     return !this.creator.readOnly;
   }
+  private actionVisibilityCache: { [index: string]: boolean } = {};
   protected updateActionVisibility(id: string, isVisible: boolean) {
-    var action = this.getActionById(id);
-    if (!action) return;
-    if (action.visible == isVisible) return;
-    action.visible = isVisible;
+    var action = this.actionContainerValue?.getActionById(id) || this.topActionContainerValue?.getActionById(id);
+    if (!action) {
+      this.actionVisibilityCache[id] = isVisible;
+    } else {
+      if (action.visible !== isVisible) {
+        action.visible = isVisible;
+      }
+    }
+  }
+  protected updateActionsVisibility(isTop: boolean): void {
+    for (var key in this.actionVisibilityCache) {
+      this.updateActionVisibility(key, this.actionVisibilityCache[key]);
+    }
   }
   public getActionById(id: string): Action {
     return this.actionContainer.getActionById(id) || this.topActionContainer.getActionById(id);

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

@@ -42,7 +42,6 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
       }
     );
     this.dragOrClickHelper = new DragOrClickHelper(this.startDragSurveyElement);
-    this.actionContainer.alwaysShrink = this.creator.isMobileView;
     this.creator.onPropertyChanged.add(this.creatorPropertyChanged);
   }
   public dispose() {
@@ -174,8 +173,22 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
 
   protected createActionContainer(): SurveyElementActionContainer {
     const container = super.createActionContainer();
+    container.alwaysShrink = this.creator.isMobileView;
     container.sizeMode = "small";
-    container.cssClasses = {
+    container.cssClasses = this.containerCssClasses();
+    container.dotsItem.iconSize = "auto";
+    container.dotsItem.cssClasses.itemIcon += " svc-page-toolbar-item__icon";
+    return container;
+  }
+
+  protected createTopActionContainer(): ActionContainer {
+    const container = super.createTopActionContainer();
+    container.cssClasses = { ...this.containerCssClasses() };
+    container.cssClasses.root += " svc-page-toolbar--collapse";
+    return container;
+  }
+  private containerCssClasses(): any {
+    return {
       root: "svc-page-toolbar sv-action-bar",
       item: "svc-page-toolbar__item",
       itemWithTitle: "svc-page-toolbar__item--with-text",
@@ -185,17 +198,7 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
       itemTitle: "svc-page-toolbar-item__title",
       itemTitleWithIcon: "svc-page-toolbar-item__title--with-icon",
     };
-    container.dotsItem.iconSize = "auto";
-    container.dotsItem.cssClasses.itemIcon += " svc-page-toolbar-item__icon";
-    return container;
   }
-
-  protected createActionContainers() {
-    super.createActionContainers();
-    this.topActionContainer.cssClasses = { ...this.actionContainer.cssClasses };
-    this.topActionContainer.cssClasses.root += " svc-page-toolbar--collapse";
-  }
-
   protected allowExpandCollapseByDblClick(element: any) {
     return element.classList.contains("svc-page__content") ||
       element.classList.contains("sd-page") ||
@@ -295,7 +298,7 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
     return result.trim();
   }
   private creatorPropertyChanged = (sender, options) => {
-    if (options.name === "isMobileView") {
+    if (options.name === "isMobileView" && this.isActionContainerCreated) {
       this.actionContainer.alwaysShrink = options.newValue;
     }
   }

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

@@ -285,8 +285,10 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
     super.attachElement(surveyElement);
     if (surveyElement) {
       surveyElement.registerFunctionOnPropertyValueChanged("isRequired", (newValue: any) => {
-        const requiredAction = this.actionContainer.getActionById("isrequired");
-        this.updateRequiredAction(requiredAction);
+        if(this.isActionContainerCreated) {
+          const requiredAction = this.actionContainer.getActionById("isrequired");
+          this.updateRequiredAction(requiredAction);
+        }
       }, "isRequiredAdorner");
     }
   }
@@ -305,8 +307,8 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
     }
     super.hover(event, element);
   }
-  protected createActionContainers(): void {
-    super.createActionContainers();
+  protected createActionContainer(): SurveyElementActionContainer {
+    const actionContainer = super.createActionContainer();
     const defaultCssClasses = {
       root: "svc-survey-element-toolbar sv-action-bar",
       item: "svc-survey-element-toolbar__item",
@@ -319,21 +321,25 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       itemTitleWithIcon: "svc-survey-element-toolbar-item__title--with-icon",
     };
 
-    this.actionContainer.sizeMode = "small";
-    this.actionContainer.cssClasses = defaultCssClasses;
-    (<SurveyElementActionContainer>this.actionContainer).dotsItem.css += " svc-survey-element-toolbar__dots-item";
-    (<SurveyElementActionContainer>this.actionContainer).dotsItem.innerCss += " svc-survey-element-toolbar__item";
+    actionContainer.sizeMode = "small";
+    actionContainer.cssClasses = defaultCssClasses;
+    (<SurveyElementActionContainer>actionContainer).dotsItem.css += " svc-survey-element-toolbar__dots-item";
+    (<SurveyElementActionContainer>actionContainer).dotsItem.innerCss += " svc-survey-element-toolbar__item";
+    return actionContainer;
   }
-  public getActionById(id: string): Action {
-    let res = super.getActionById(id);
-    if (!res) {
-      res = this.topActionContainer.getActionById(id);
+  protected updateActionsPropertiesCore(): void {
+    super.updateActionsPropertiesCore();
+    if(this.isActionContainerCreated) {
+      this.updateActionsLocations();
+    }
+  }
+  protected updateActionsVisibility(isTop: boolean): void {
+    super.updateActionsVisibility(isTop);
+    if(!isTop) {
+      this.updateActionsLocations();
     }
-    return res;
   }
-  protected updateActionsProperties(): void {
-    if (this.isDisposed) return;
-    super.updateActionsProperties();
+  private updateActionsLocations(): void {
     const actions = this.actionContainer.visibleActions;
     let switchToStartLocation = false;
     for (var i = actions.length - 1; i >= 0; i--) {

packages/survey-creator-core/tests/creator-base-1.tests.ts

@@ -2255,6 +2255,42 @@ test("QuestionAdornerViewModel and onElementAllowOperations, allowExpandCollapse
   expect(q2Model.topActionContainer.getActionById("collapse").visible).toBeFalsy();
 });
 
+test("QuestionAdornerViewModel actionContainer&topActionContainer on demand", (): any => {
+  const creator = new CreatorTester();
+  creator.expandCollapseButtonVisibility = "onhover";
+  creator.JSON = {
+    elements: [
+      { type: "text", name: "q1" },
+      { type: "text", name: "q2" },
+      { type: "text", name: "q3" }
+    ]
+  };
+  let counter = 0;
+  creator.onElementAllowOperations.add((sender, options) => {
+    counter ++;
+  });
+  const q1Model = new QuestionAdornerViewModel(creator, creator.survey.getAllQuestions()[0], undefined);
+  expect(q1Model["actionContainerValue"]).toBeFalsy();
+  expect(q1Model["topActionContainerValue"]).toBeFalsy();
+  expect(q1Model.topActionContainer).toBeTruthy();
+  expect(q1Model["actionContainerValue"]).toBeFalsy();
+  expect(q1Model["topActionContainerValue"]).toBeTruthy();
+  expect(q1Model.actionContainer).toBeTruthy();
+  expect(q1Model["actionContainerValue"]).toBeTruthy();
+  expect(q1Model["topActionContainerValue"]).toBeTruthy();
+
+  const q2Model = new QuestionAdornerViewModel(creator, creator.survey.getAllQuestions()[1], undefined);
+  expect(q2Model["actionContainerValue"]).toBeFalsy();
+  expect(q2Model["topActionContainerValue"]).toBeFalsy();
+  expect(q2Model.actionContainer).toBeTruthy();
+  expect(q2Model["actionContainerValue"]).toBeTruthy();
+  expect(q2Model["topActionContainerValue"]).toBeFalsy();
+  expect(q2Model.topActionContainer).toBeTruthy();
+  expect(q2Model["actionContainerValue"]).toBeTruthy();
+  expect(q2Model["topActionContainerValue"]).toBeTruthy();
+  expect(counter).toEqual(2);
+});
+
 test("QuestionAdornerViewModel and onElementAllowOperations on new elements", (): any => {
   const creator = new CreatorTester();
   creator.JSON = {

packages/survey-creator-core/tests/creator-base-2.tests.ts

@@ -404,7 +404,6 @@ test("onElementAllowOperations for pages and allowDragging in page adorner", ():
   });
 
   const pageAdorner = new PageAdorner(creator, creator.survey.pages[0]);
-
   expect(creator.allowDragPages).toBeTruthy();
   expect(pageAdorner.allowDragging).toBeTruthy();
   expect(reason).toHaveLength(1);