Limit max surface scaling factor to 100% (#6309)

* Limit max surface scaling factor to 100%
Fixes #6305

* Limit max surface scaling factor to 100%
Fixes #6305

* Limit max surface scaling factor to 100%
Fixes #6305 - removed masks

* Limit max surface scaling factor to 100%
Fixes #6305 - Updated mask

---------

Co-authored-by: tsv2013 <[email protected]>

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

@@ -13,7 +13,7 @@ export const initialSettingsAllowShowEmptyTitleInDesignMode = settings.allowShow
 
 export class TabDesignerViewModel extends Base {
   private minSurfaceScaling = 20;
-  private maxSurfaceScaling = 200;
+  private maxSurfaceScaling = 100;
   private stepSurfaceScaling = 10;
   private cssUpdater: ComputedUpdater;
   private pagesControllerValue: PagesController;
@@ -190,7 +190,7 @@ export class TabDesignerViewModel extends Base {
   }
 
   private scaleSurface(scaleFactor: number): void {
-    if (scaleFactor <= this.minSurfaceScaling || scaleFactor >= this.maxSurfaceScaling) return;
+    if (scaleFactor < this.minSurfaceScaling || scaleFactor > this.maxSurfaceScaling) return;
 
     this.surfaceScale = scaleFactor;
     if (!this.creator.survey.responsiveStartWidth) {

packages/survey-creator-core/src/creator-theme/creator-theme-model.ts

@@ -273,13 +273,21 @@ export class CreatorThemeModel extends Base implements ICreatorTheme {
   }
 }
 
+const defaultThemesOrder = ["default-light", "default-contrast", "default-dark", "sc2020"];
+function sortDefaultThemes(themes) {
+  const result = [].concat(themes).sort((t1, t2) => {
+    return defaultThemesOrder.indexOf(t1) - defaultThemesOrder.indexOf(t2);
+  });
+  return result;
+}
+
 Serializer.addClass(
   "creatortheme",
   [
     {
       type: "dropdown",
       name: "themeName",
-      choices: PredefinedCreatorThemes.map(theme => ({ value: theme, text: getLocString("creatortheme.names." + theme) })),
+      choices: sortDefaultThemes(PredefinedCreatorThemes).map(theme => ({ value: theme, text: getLocString("creatortheme.names." + theme) })),
     },
     {
       type: "string",

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

@@ -4739,23 +4739,24 @@ test("onModified options, on adding page and on copying page", () => {
 
 test("ZoomIn/ZoomOut designer surface", (): any => {
   const creator = new CreatorTester();
-  const designerTab = creator.getPlugin("designer").model as TabDesignerViewModel;
-  expect(designerTab["surfaceScale"]).toBe(100);
+  const designerTabModel = creator.getPlugin("designer").model as TabDesignerViewModel;
+  expect(designerTabModel["surfaceScale"]).toBe(100);
   expect(creator.themeVariables).toStrictEqual({});
 
-  designerTab["scaleSurface"](10);
-  expect(designerTab["surfaceScale"]).toBe(100);
+  designerTabModel["scaleSurface"](10);
+  expect(designerTabModel["surfaceScale"]).toBe(100);
   expect(creator.themeVariables).toStrictEqual({});
   expect(creator.survey.widthScale).toBe(100);
 
-  designerTab["scaleSurface"](200);
-  expect(designerTab["surfaceScale"]).toBe(100);
+  designerTabModel["scaleSurface"](200);
+  expect(designerTabModel["surfaceScale"]).toBe(100);
   expect(creator.themeVariables).toStrictEqual({});
   expect(creator.survey.widthScale).toBe(100);
 
-  designerTab["scaleSurface"](150);
+  designerTabModel["maxSurfaceScaling"] = 200;
+  designerTabModel["scaleSurface"](150);
   expect(creator.survey.widthScale).toBe(150);
-  expect(designerTab["surfaceScale"]).toBe(150);
+  expect(designerTabModel["surfaceScale"]).toBe(150);
   expect(creator.themeVariables).toStrictEqual({
     "--ctr-surface-base-unit": "12px",
     "--lbr-corner-radius-unit": "12px",
@@ -4765,4 +4766,44 @@ test("ZoomIn/ZoomOut designer surface", (): any => {
     "--lbr-spacing-unit": "12px",
     "--lbr-stroke-unit": "1.5px"
   });
+});
+
+test("ZoomIn/ZoomOut actions limits", (): any => {
+  const creator = new CreatorTester();
+  const designerTabModel = creator.getPlugin("designer").model as TabDesignerViewModel;
+  const zoomInAction = designerTabModel.surfaceToolbar.getActionById("zoomIn");
+  const zoomOutAction = designerTabModel.surfaceToolbar.getActionById("zoomOut");
+  const zoom100Action = designerTabModel.surfaceToolbar.getActionById("zoom100");
+
+  expect(designerTabModel["surfaceScale"]).toBe(100);
+  expect(creator.survey.widthScale).toBe(100);
+
+  zoomInAction.action();
+  expect(designerTabModel["surfaceScale"]).toBe(100);
+  expect(creator.survey.widthScale).toBe(100);
+
+  zoomOutAction.action();
+  expect(designerTabModel["surfaceScale"]).toBe(90);
+  expect(creator.survey.widthScale).toBe(90);
+
+  zoomOutAction.action();
+  zoomOutAction.action();
+  zoomOutAction.action();
+  zoomOutAction.action();
+  zoomOutAction.action();
+  zoomOutAction.action();
+  expect(designerTabModel["surfaceScale"]).toBe(30);
+  expect(creator.survey.widthScale).toBe(30);
+
+  zoomOutAction.action();
+  expect(designerTabModel["surfaceScale"]).toBe(20);
+  expect(creator.survey.widthScale).toBe(20);
+
+  zoomOutAction.action();
+  expect(designerTabModel["surfaceScale"]).toBe(20);
+  expect(creator.survey.widthScale).toBe(20);
+
+  zoom100Action.action();
+  expect(designerTabModel["surfaceScale"]).toBe(100);
+  expect(creator.survey.widthScale).toBe(100);
 });