Resolved #6030 - Introduce a public API to change a default device type within a Preview tab

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

@@ -372,13 +372,13 @@ export var simulatorDevices: {
   //   title: "Windows 10 Phone",
   //   cssClass: "svd-simulator-win10phone",
   // },
-  msSurface: {
+  microsoftSurface: {
     cssPixelRatio: 1,
     ppi: 148,
     width: 768,
     height: 1366,
     deviceType: "tablet",
-    title: "MS Surface",
+    title: "Microsoft Surface",
     cssClass: "svd-simulator-mssurface",
   },
   genericPhone: {

packages/survey-creator-core/src/components/tabs/test-plugin.ts

@@ -22,14 +22,28 @@ export class TabTestPlugin implements ICreatorPlugin {
   private simulatorTheme: any = surveyCss[defaultV2ThemeName];
 
   public model: TestSurveyTabViewModel;
+  private _previewDevice: string = "";
+  public get previewDevice(): string {
+    if (!!this.model) {
+      this._previewDevice = this.model.simulator.device;
+    }
+    return this._previewDevice;
+  }
+  public set previewDevice(newValue: string) {
+    this.setDevice(newValue);
+  }
 
-  private setDevice(newVal: string) {
-    this.model.simulator.device = newVal;
-    this.model.simulator.resetZoomParameters();
-    let currentType = simulatorDevices[this.model.simulator.device].deviceType;
+  private setDevice(newValue: string) {
+    this._previewDevice = newValue || "desktop";
+    if (!!this.model) {
+      this.model.simulator.device = newValue;
+      this.model.simulator.resetZoomParameters();
+    }
+    let currentType = simulatorDevices[this._previewDevice].deviceType;
     this.orientationSelectorAction.enabled = currentType != "desktop";
     this.deviceSelectorAction.iconName = "icon-device-" + currentType;
     this.deviceSelectorAction.title = getLocString("pe.simulator");
+    this.deviceSelectorAction.data.selectedItem = { id: this._previewDevice };
   }
   private setDefaultLanguageOption(opt: boolean | string) {
     const vis: boolean = opt === true || opt === "all" || (opt === "auto" && this.model.survey.getUsedLocales().length > 1);
@@ -81,8 +95,10 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.createActions().forEach(action => creator.toolbar.actions.push(action));
   }
   public activate(): void {
-    this.model = new TestSurveyTabViewModel(this.creator, this.simulatorTheme);
-    this.model.simulator.landscape = this.creator.previewOrientation != "portrait";
+    const tabModel = new TestSurveyTabViewModel(this.creator, this.simulatorTheme);
+    tabModel.simulator.device = this.previewDevice || this.creator.previewDevice || "desktop";
+    tabModel.simulator.landscape = this.creator.previewOrientation != "portrait";
+    this.model = tabModel;
     this.update();
   }
   public update(): void {
@@ -108,6 +124,7 @@ export class TabTestPlugin implements ICreatorPlugin {
   }
   public deactivate(): boolean {
     if (this.model) {
+      this._previewDevice = this.model.simulator.device;
       this.simulatorTheme = this.model.simulator.survey.css;
       this.model.onSurveyCreatedCallback = undefined;
       this.model.dispose();

packages/survey-creator-core/src/components/tabs/theme-plugin.ts

@@ -275,8 +275,12 @@ export class ThemeTabPlugin implements ICreatorPlugin {
 
     creator.onPropertyChanged.add(this.creatorPropertyChanged);
   }
+
+  private previewDevice: string = "desktop";
+
   public activate(): void {
     this.model = new ThemeTabViewModel(this.creator, this.simulatorCssClasses);
+    this.model.simulator.device = this.previewDevice;
     this.themeModel.initialize(this.creator.theme, this.creator.survey);
     this.creator.sidebar.hideSideBarVisibilityControlActions = this.showOneCategoryInPropertyGrid;
     this.update();
@@ -453,6 +457,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
   }
   public deactivate(): boolean {
     if (this.model) {
+      this.previewDevice = this.model.simulator.device;
       this.simulatorCssClasses = this.model.survey.css;
       this.model.onPropertyChanged.clear();
       this.themeModel.onThemeSelected.clear();

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

@@ -239,10 +239,27 @@ export class SurveyCreatorModel extends Base
   @property({ defaultValue: false }) showSearch: boolean;
   @property({ defaultValue: true }) generateValidJSON: boolean;
   @property({ defaultValue: "" }) currentAddQuestionType: string;
+  /**
+   * Specifies a default device for survey preview in the Preview tab.
+   *
+   * Possible values:
+   * 
+   * - `"desktop"` (default)
+   * - `"iPhoneSE"`
+   * - `"iPhone15"`
+   * - `"iPhone15Plus"`
+   * - `"iPad"`
+   * - `"iPadMini"`
+   * - `"androidPhone"`
+   * - `"androidTablet"`
+   * - `"microsoftSurface"`
+   */
+  previewDevice: string;
   /**
    * Specifies the orientation of the selected device in the Preview tab.
    *
    * Possible values:
+   * 
    * - `"landscape"` (default)
    * - `"portrait"`
    */
@@ -1245,6 +1262,7 @@ export class SurveyCreatorModel extends Base
       this.options = !!options2 ? options2 : {};
       SurveyHelper.warnText("Creator constructor has one parameter, as creator options, in V2.");
     }
+    this.previewDevice = options.previewDevice ?? "desktop";
     this.previewOrientation = options.previewOrientation;
     this.toolbarValue = new ToolbarActionContainer(this);
     this.toolbarValue.locOwner = this;

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

@@ -230,6 +230,22 @@ export interface ICreatorOptions {
    * [View Demo](https://surveyjs.io/Examples/Creator?id=theme-switcher (linkStyle))
    */
   allowChangeThemeInPreview?: boolean;
+  /**
+   * Specifies a default device for survey preview in the Preview tab.
+   *
+   * Possible values:
+   * 
+   * - `"desktop"` (default)
+   * - `"iPhoneSE"`
+   * - `"iPhone15"`
+   * - `"iPhone15Plus"`
+   * - `"iPad"`
+   * - `"iPadMini"`
+   * - `"androidPhone"`
+   * - `"androidTablet"`
+   * - `"microsoftSurface"`
+   */
+  previewDevice?: string;
   /**
    * Specifies the orientation of the selected device in the Preview tab.
    * 

packages/survey-creator-core/tests/tabs/test.tests.ts

@@ -946,12 +946,12 @@ test("devices selector dropdown items default order", (): any => {
   expect(dropdownDeviceActions[0].visibleIndex).toBe(Number.MAX_VALUE);
   expect(dropdownDeviceActions[7].id).toBe("androidTablet");
   expect(dropdownDeviceActions[7].visibleIndex).toBe(Number.MAX_VALUE);
-  expect(dropdownDeviceActions[8].id).toBe("msSurface");
+  expect(dropdownDeviceActions[8].id).toBe("microsoftSurface");
   expect(dropdownDeviceActions[8].visibleIndex).toBe(Number.MAX_VALUE);
 });
 test("change devices selector dropdown items order", (): any => {
   try {
-    simulatorDevices.msSurface.visibleIndex = 0;
+    simulatorDevices.microsoftSurface.visibleIndex = 0;
     simulatorDevices.androidTablet.visibleIndex = 1;
 
     const creator: CreatorTester = new CreatorTester({ previewShowResults: false });
@@ -969,7 +969,7 @@ test("change devices selector dropdown items order", (): any => {
     const deviceSelectorAction = testPlugin["deviceSelectorAction"];
     const dropdownDeviceActions = deviceSelectorAction.data.actions as IAction[];
     expect(dropdownDeviceActions.length).toBe(9);
-    expect(dropdownDeviceActions[0].id).toBe("msSurface");
+    expect(dropdownDeviceActions[0].id).toBe("microsoftSurface");
     expect(dropdownDeviceActions[0].visibleIndex).toBe(0);
     expect(dropdownDeviceActions[1].id).toBe("androidTablet");
     expect(dropdownDeviceActions[1].visibleIndex).toBe(1);
@@ -979,7 +979,7 @@ test("change devices selector dropdown items order", (): any => {
     expect(dropdownDeviceActions[8].visibleIndex).toBe(Number.MAX_VALUE);
   }
   finally {
-    simulatorDevices.msSurface.visibleIndex = undefined;
+    simulatorDevices.microsoftSurface.visibleIndex = undefined;
     simulatorDevices.androidTablet.visibleIndex = undefined;
   }
 });
@@ -1102,7 +1102,7 @@ test("The Preview Survey button text is not translated Bug#6016", (): any => {
   const deText = "Testumfrage wiederholen";
   const loc: any = editorLocalization.getLocale("de");
   expect(loc).toBeTruthy();
-  if(!loc.ed) loc.ed = {};
+  if (!loc.ed) loc.ed = {};
   loc.ed.testSurveyAgain = deText;
   editorLocalization.currentLocale = "en";
   const creator: CreatorTester = new CreatorTester();
@@ -1116,4 +1116,32 @@ test("The Preview Survey button text is not translated Bug#6016", (): any => {
   expect(getLocString("ed.testSurveyAgain")).toBe(deText);
   expect(testPlugin.model.testAgainAction.title).toBe(deText);
   creator.locale = "";
+});
+test("Preview tab: default device and save current device", (): any => {
+  const creator: CreatorTester = new CreatorTester({ showThemeTab: true });
+  creator.JSON = { questions: [{ type: "text", name: "q1" }] };
+  const testPlugin: TabTestPlugin = <TabTestPlugin>creator.getPlugin("test");
+
+  expect(creator.previewDevice).toBe("desktop");
+  expect(testPlugin.previewDevice).toBe("");
+
+  testPlugin.activate();
+  expect(testPlugin.previewDevice).toBe("desktop");
+  expect(testPlugin.model.simulator.device).toBe("desktop");
+
+  testPlugin.model.simulator.device = "iPhone15";
+  expect(testPlugin.previewDevice).toBe("iPhone15");
+
+  testPlugin.deactivate();
+  expect(testPlugin.previewDevice).toBe("iPhone15");
+
+  testPlugin.activate();
+  expect(testPlugin.model.simulator.device).toBe("iPhone15");
+  expect(testPlugin.previewDevice).toBe("iPhone15");
+
+  testPlugin.deactivate();
+  testPlugin.previewDevice = "iPhone15Plus";
+
+  testPlugin.activate();
+  expect(testPlugin.model.simulator.device).toBe("iPhone15Plus");
 });

packages/survey-creator-core/tests/tabs/theme-tab-plugin.tests.ts

@@ -1384,3 +1384,30 @@ test("onThemePropertyChanged event for a custom property", (): any => {
 
   Serializer.removeProperty("theme", "paddingTopScale");
 });
+
+test("Theme tab: default device and save current device", (): any => {
+  const creator: CreatorTester = new CreatorTester({ showThemeTab: true });
+  creator.JSON = { questions: [{ type: "text", name: "q1" }] };
+  const themePlugin: ThemeTabPlugin = <ThemeTabPlugin>creator.getPlugin("theme");
+
+  expect(themePlugin.previewDevice).toBe("desktop");
+
+  themePlugin.activate();
+  expect(themePlugin.model.simulator.device).toBe("desktop");
+
+  themePlugin.model.simulator.device = "iPhone15";
+  expect(themePlugin.previewDevice).toBe("desktop");
+
+  themePlugin.deactivate();
+  expect(themePlugin.previewDevice).toBe("iPhone15");
+
+  themePlugin.activate();
+  expect(themePlugin.model.simulator.device).toBe("iPhone15");
+  expect(themePlugin.previewDevice).toBe("iPhone15");
+
+  themePlugin.deactivate();
+  themePlugin.previewDevice = "iPhone15Plus";
+
+  themePlugin.activate();
+  expect(themePlugin.model.simulator.device).toBe("iPhone15Plus");
+});