Fix creator's responsiveness works incorrectly if manager was recreat…

…ed (#5246) * Fix creator's responsivity works incorrectly if manager was recreated * Fix f tests
surveyjs · Feb 22, 2024 · d8c9c77 · d8c9c77
1 parent 5e811c7
commit d8c9c77
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 23 deletions.
diff --git a/packages/survey-creator-core/src/components/tabs/designer.ts b/packages/survey-creator-core/src/components/tabs/designer.ts
@@ -68,7 +68,7 @@ export class TabDesignerViewModel extends Base {
     return this.pagesControllerValue;
   }
   public get isToolboxVisible(): boolean {
-    return this.creator.showToolboxValue && (this.creator.toolboxLocation === "right" || this.creator.toolboxLocation === "left");
+    return this.creator.showToolbox && (this.creator.toolboxLocation === "right" || this.creator.toolboxLocation === "left");
   }
   public get placeholderText(): string {
     return getLocString("ed.surveyPlaceHolder");

diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
@@ -1209,9 +1209,10 @@ export class SurveyCreatorModel extends Base
     }
   }
 
+  @property({ defaultValue: true }) allowShowToolbox: boolean;
   @property({ defaultValue: true }) showToolboxValue: boolean;
   public get showToolbox() {
-    return this.showToolboxValue;
+    return this.showToolboxValue && this.allowShowToolbox;
   }
   public set showToolbox(val: boolean) {
     if (<any>val !== true && <any>val !== false) {
@@ -3345,7 +3346,16 @@ export class SurveyCreatorModel extends Base
     }
   }
   @property({ defaultValue: false }) showHeaderInEmptySurvey;
-  @property({ defaultValue: true }) showPageNavigator;
+  @property({ defaultValue: true }) public allowShowPageNavigator;
+  @property({ defaultValue: true }) private showPageNavigatorValue;
+
+  public get showPageNavigator() {
+    return this.showPageNavigatorValue && this.allowShowPageNavigator;
+  }
+  public set showPageNavigator(val: boolean) {
+    this.showPageNavigatorValue = val;
+  }
+
   @property({ getDefaultValue: () => { return settings.layout.showTabs; } }) showTabs;
   @property({ getDefaultValue: () => { return settings.layout.showToolbar; } }) showToolbar;
   @property({ getDefaultValue: () => { return settings.layout.allowCollapseSidebar; } }) allowCollapseSidebar;

diff --git a/packages/survey-creator-core/src/creator-responsivity-manager.ts b/packages/survey-creator-core/src/creator-responsivity-manager.ts
@@ -3,8 +3,6 @@ require("./responsivity.scss");
 export class CreatorResponsivityManager {
   private resizeObserver: ResizeObserver = undefined;
   private currentWidth;
-  private prevShowToolbox;
-  private prevShowPageNavigator;
   public static screenSizeBreakpoints: { [key: string]: number } = {
     "xxl": 1800,
     "xl": 1500,
@@ -33,26 +31,10 @@ export class CreatorResponsivityManager {
     this.creator.isMobileView = undefined;
   }
   private procesShowToolbox(toolboxVisible: boolean) {
-    if (toolboxVisible && !this.creator.showToolbox && this.prevShowToolbox !== undefined) {
-      this.creator.showToolbox = this.prevShowToolbox;
-      this.prevShowToolbox = undefined;
-    } else if (!toolboxVisible && this.creator.showToolbox && this.prevShowToolbox === undefined) {
-      this.prevShowToolbox = this.creator.showToolbox;
-      this.creator.showToolbox = false;
-    }
+    this.creator.allowShowToolbox = toolboxVisible;
   }
   private procesShowPageNavigator(pageNavigatorVisibility: boolean) {
-    if (this.creator.pageEditMode === "bypage") {
-      this.creator.showPageNavigator = true;
-      return;
-    }
-    if (pageNavigatorVisibility && !this.creator.showPageNavigator && this.prevShowPageNavigator !== undefined) {
-      this.creator.showPageNavigator = this.prevShowPageNavigator;
-      this.prevShowPageNavigator = undefined;
-    } else if (!pageNavigatorVisibility && this.creator.showPageNavigator && this.prevShowPageNavigator === undefined) {
-      this.prevShowPageNavigator = this.creator.showPageNavigator;
-      this.creator.showPageNavigator = false;
-    }
+    this.creator.allowShowPageNavigator = this.creator.pageEditMode === "bypage" || pageNavigatorVisibility;
   }
 
   private findCorrectParent(container: HTMLElement) {
@@ -112,6 +94,8 @@ export class CreatorResponsivityManager {
   }
 
   public dispose(): void {
+    this.creator.allowShowToolbox = true;
+    this.creator.allowShowPageNavigator = true;
     if (!!this.resizeObserver) {
       this.resizeObserver.disconnect();
     }

diff --git a/packages/survey-creator-core/tests/creator-responsivity-manager.test.ts b/packages/survey-creator-core/tests/creator-responsivity-manager.test.ts
@@ -325,3 +325,38 @@ test("CreatorResponsivityManager: Question Settings visibility", (): any => {
   expect(qModel.getActionById("settings").visible).toBeFalsy();
 });
 
+test("CreatorResponsivityManager: toolbox visibility works correctly after recreate responsivity manager", (): any => {
+  const container: SimpleContainer = new SimpleContainer({});
+  const creator = new CreatorTester();
+  let responsivityManager = new CreatorResponsivityManager(<any>container, creator);
+
+  creator.JSON = {
+    elements: [{ type: "text", name: "question1" }]
+  };
+  container.offsetWidth = 60;
+  responsivityManager.process();
+  expect(creator.showToolbox).toBe(false);
+  responsivityManager.dispose();
+  responsivityManager = new CreatorResponsivityManager(<any>container, creator);
+  container.offsetWidth = 1920;
+  responsivityManager.process();
+  expect(creator.showToolbox).toBe(true);
+});
+
+test("CreatorResponsivityManager: page navigator visibility works correctly after recreate responsivity manager", (): any => {
+  const container: SimpleContainer = new SimpleContainer({});
+  const creator = new CreatorTester();
+  let responsivityManager = new CreatorResponsivityManager(<any>container, creator);
+
+  creator.JSON = {
+    elements: [{ type: "text", name: "question1" }]
+  };
+  container.offsetWidth = 60;
+  responsivityManager.process();
+  expect(creator.showPageNavigator).toBe(false);
+  responsivityManager.dispose();
+  responsivityManager = new CreatorResponsivityManager(<any>container, creator);
+  container.offsetWidth = 1920;
+  responsivityManager.process();
+  expect(creator.showPageNavigator).toBe(true);
+});