zoom in zoom out designer surface (#6200)

* work for #6189 Creator v2.0 Add ZoomIn/ZoomOut into designer surface * work for #6189 Creator v2.0 Add ZoomIn/ZoomOut into designer surface * work for #6189 update etalons --------- Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Dec 9, 2024 · e8ed56a · e8ed56a
1 parent 9fa6f12
commit e8ed56a
Show file tree

Hide file tree

Showing 18 changed files with 136 additions and 87 deletions.
diff --git a/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html b/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html
@@ -1,6 +1,6 @@
 <ng-template #template>
   <div [class]="model.designerCss" [style.maxWidth]="survey.renderedWidth"
-    [style]="creator.designTabSurveyThemeVariables">
+    [style]="model.surveyThemeVariables">
     <div *ngIf="creator.allowEditSurveyTitle" class="svc-designer-header">
       <div *ngIf="survey.renderedHasHeader" [class]="survey.css.header" [survey]="survey" sv-ng-survey-header></div>
     </div>

diff --git a/packages/survey-creator-core/src/components/tabs/designer.scss b/packages/survey-creator-core/src/components/tabs/designer.scss
@@ -181,4 +181,17 @@ svc-tab-designer {
   padding: var(--ctr-surface-toolbar-padding-top, calcSize(1.5)) var(--ctr-surface-toolbar-padding-right, calcSize(1.5)) var(--ctr-surface-toolbar-padding-bottom, calcSize(1.5)) var(--ctr-surface-toolbar-padding-left, calcSize(1.5));
   gap: var(--ctr-surface-toolbar-gap, calcSize(1));
   flex-direction: column;
-}
+
+  .sv-action-bar-separator {
+    background: var(--ctr-separator-color, $border);
+    height: var(--ctr-separator-width, 1px);
+    width: var(--ctr-page-navigator-button-icon-width, calcSize(1));
+    padding: 0px var(--ctr-separator-margin-vertical-small, calcSize(1));
+    margin-bottom: var(--ctr-surface-toolbar-gap, calcSize(1));
+    margin-right: 0;
+  }
+
+  .sv-action__content {
+    flex-direction: column;
+  }
+}
diff --git a/packages/survey-creator-core/src/components/tabs/designer.ts b/packages/survey-creator-core/src/components/tabs/designer.ts
@@ -1,23 +1,40 @@
-import { Base, PageModel, property, SurveyModel, ComputedUpdater, settings, IPage, ActionContainer, propertyArray, IAnimationGroupConsumer, AnimationGroup, prepareElementForVerticalAnimation, cleanHtmlElementAfterAnimation } from "survey-core";
+import { Base, PageModel, property, SurveyModel, ComputedUpdater, settings, IPage, ActionContainer, propertyArray, IAnimationGroupConsumer, AnimationGroup, prepareElementForVerticalAnimation, cleanHtmlElementAfterAnimation, IAction } from "survey-core";
 import { SurveyCreatorModel } from "../../creator-base";
 import { getLocString } from "../../editorLocalization";
 import { PagesController } from "../../pages-controller";
 import { SurveyHelper } from "../../survey-helper";
 import { DragDropSurveyElements } from "../../survey-elements";
 import { SurveyElementAdornerBase } from "../action-container-view-model";
+import { assign } from "../../utils/utils";
+import designTabSurveyThemeJSON from "../../designTabSurveyThemeJSON";
 require("./designer.scss");
 
 export const initialSettingsAllowShowEmptyTitleInDesignMode = settings.allowShowEmptyTitleInDesignMode;
 
 export class TabDesignerViewModel extends Base {
+  private minSurfaceScaling = 20;
+  private maxSurfaceScaling = 200;
   private cssUpdater: ComputedUpdater;
   private pagesControllerValue: PagesController;
+  private scaleCssVariables = {};
+  private surfaceScale = 100;
+
+  unitDictionary: { [index: string]: number } = {
+    "--ctr-surface-base-unit": 8,
+    "--lbr-font-unit": 8,
+    "--lbr-line-height-unit": 8,
+    "--lbr-size-unit": 8,
+    "--lbr-spacing-unit": 8,
+    "--lbr-corner-radius-unit": 8,
+    "--lbr-stroke-unit": 1,
+  }
 
   @property() newPage: PageModel;
   @property({ defaultValue: false }) showNewPage: boolean;
   @property() pageCount: number;
   @property() designerCss: string;
   @property() showPlaceholder: boolean;
+  @property({ defaultValue: {} }) surveyThemeVariables: { [index: string]: string } = {};
   public creator: SurveyCreatorModel;
 
   public surfaceToolbar: ActionContainer;
@@ -67,15 +84,31 @@ export class TabDesignerViewModel extends Base {
     return Object.keys(page.toJSON()).filter(key => key !== "name").length > 0;
   }
 
+  private updateDesignTabSurveyThemeVariables(): void {
+    const cssVariables: { [index: string]: string } = {};
+    assign(cssVariables, designTabSurveyThemeJSON.cssVariables, this.scaleCssVariables, {
+      "--sjs-base-unit": "var(--ctr-surface-base-unit)",
+      "--sjs-font-size": "calc(2 * var(--ctr-surface-base-unit))",
+    });
+    this.surveyThemeVariables = cssVariables;
+  }
+
   constructor(creator: SurveyCreatorModel) {
     super();
     this.creator = creator;
     this.pagesControllerValue = new PagesController(creator);
 
-    this.initToolbar();
+    this.creator.dragDropChoices.onShortcutCreated = (shortcut: HTMLElement) => {
+      Object.keys(this.surveyThemeVariables).forEach((key) => {
+        shortcut.style.setProperty(key, this.surveyThemeVariables[key]);
+      });
+    };
+
+    this.initSurfaceToolbar();
     this.initSurvey();
+    this.updateDesignTabSurveyThemeVariables();
   }
-  private initToolbar() {
+  private initSurfaceToolbar() {
     this.surfaceToolbar = new ActionContainer();
 
     let defaultActionBarCss = {
@@ -92,28 +125,62 @@ export class TabDesignerViewModel extends Base {
     };
     this.surfaceToolbar.cssClasses = defaultActionBarCss;
 
-    this.surfaceToolbar.setItems([{
+    const surfaceToolbarItems: Array<IAction> = [];
+    if (this.creator.showCreatorThemeSettings) {
+      surfaceToolbarItems.push(<IAction>{
+        id: "zoomIn",
+        locTooltipName: "ed.zoomInTooltip",
+        iconName: "icon-zoomin-24x24",
+        iconSize: "auto",
+        action: () => { this.scalingSurface(this.surfaceScale + 10); }
+      });
+      surfaceToolbarItems.push(<IAction>{
+        id: "zoomOut",
+        locTooltipName: "ed.zoomOutTooltip",
+        iconName: "icon-zoomout-24x24",
+        iconSize: "auto",
+        action: () => { this.scalingSurface(this.surfaceScale - 10); }
+      });
+    }
+    surfaceToolbarItems.push({
       id: "collapseAll",
       locTooltipName: "ed.collapseAllTooltip",
       iconName: "icon-collapseall-24x24",
       iconSize: "auto",
+      needSeparator: this.creator.showCreatorThemeSettings,
+      visible: new ComputedUpdater<boolean>(() => this.creator.expandCollapseButtonVisibility != "never"),
       action: () => this.creator.expandCollapseManager.expandCollapseElements("collapse-all", true)
-    }, {
+    });
+    surfaceToolbarItems.push({
       id: "expandAll",
       locTooltipName: "ed.expandAllTooltip",
       iconName: "icon-expandall-24x24",
       iconSize: "auto",
+      visible: new ComputedUpdater<boolean>(() => this.creator.expandCollapseButtonVisibility != "never"),
       action: () => this.creator.expandCollapseManager.expandCollapseElements("expand-all", false)
-    }, {
+    });
+    surfaceToolbarItems.push({
       id: "lockQuestions",
       locTooltipName: "ed.lockQuestionsTooltip",
       iconName: "icon-questionlock-24x24",
       iconSize: "auto",
+      visible: new ComputedUpdater<boolean>(() => this.creator.expandCollapseButtonVisibility != "never"),
       action: (action) => {
         action.active = !action.active;
         this.creator.expandCollapseManager.lockQuestions(action.active);
       }
-    }]);
+    });
+    this.surfaceToolbar.setItems(surfaceToolbarItems);
+  }
+
+  private scalingSurface(scaleFactor: number): void {
+    if (scaleFactor <= this.minSurfaceScaling || scaleFactor >= this.maxSurfaceScaling) return;
+
+    this.surfaceScale = scaleFactor;
+    Object.keys(this.unitDictionary).forEach(key => {
+      this.scaleCssVariables[key] = (this.unitDictionary[key] * scaleFactor / 100) + "px";
+    });
+    this.updateDesignTabSurveyThemeVariables();
   }
 
   get survey() {
@@ -141,7 +208,7 @@ export class TabDesignerViewModel extends Base {
     return getLocString("ed.surveyPlaceholderDescription");
   }
   public get hasToolbar() {
-    return this.creator.expandCollapseButtonVisibility != "never";
+    return this.creator.expandCollapseButtonVisibility != "never" || this.creator.showCreatorThemeSettings;
   }
   private isUpdatingNewPage: boolean;
   public onDesignerSurveyPropertyChanged(obj: Base, propName: string): void {

diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
@@ -1277,8 +1277,8 @@ export class SurveyCreatorModel extends Base
     this.initSurveyWithJSON(undefined, false);
     this.toolbox = new QuestionToolbox(this.options && this.options.questionTypes ? this.options.questionTypes : null, this, true);
     this.updateToolboxIsCompact();
-    this.initTabs();
     this.initDragDrop();
+    this.initTabs();
     this.syncSaveButtons = this.options.saveSurveyAndTheme !== undefined ? this.options.saveSurveyAndTheme : this.options.syncSaveButtons;
     this.isTouch = IsTouch;
     const expandAction = this.sidebar.getExpandAction();
@@ -1983,11 +1983,6 @@ export class SurveyCreatorModel extends Base
       this.stopUndoRedoTransaction();
       this.selectElement(options.draggedElement, undefined, false);
     });
-    this.dragDropChoices.onShortcutCreated = (shortcut: HTMLElement) => {
-      Object.keys(this.designTabSurveyThemeVariables).forEach((key) => {
-        shortcut.style.setProperty(key, this.designTabSurveyThemeVariables[key]);
-      });
-    };
   }
 
   public updateElementsOnLocaleChanged(obj: Base, propertyName: string): void {
@@ -2220,15 +2215,6 @@ export class SurveyCreatorModel extends Base
     this.changeText(value, true);
   }
 
-  public get designTabSurveyThemeVariables(): {} {
-    const cssVariables = {};
-    assign(cssVariables, designTabSurveyThemeJSON.cssVariables, {
-      "--sjs-base-unit": "var(--ctr-surface-base-unit)",
-      "--sjs-font-size": "calc(2 * var(--ctr-surface-base-unit))",
-    });
-    return cssVariables;
-  }
-
   public getSurveyJSON(): any {
     if (this.viewType != "editor") {
       return new JsonObject().toJsonObject(this.survey);

diff --git a/packages/survey-creator-core/src/creator-theme/creator-theme-model-definition.ts b/packages/survey-creator-core/src/creator-theme/creator-theme-model-definition.ts
@@ -9,7 +9,6 @@ const creatorThemeModelProperties: ISurveyPropertiesDefinition = {
       { name: "--sjs-secondary-background-500", index: 20, tab: "accentColors" },
       { name: "fontScale", index: 40, tab: "scaling" },
       { name: "scale", index: 50, tab: "scaling" },
-      { name: "surfaceScale", index: 60, tab: "scaling" },
     ],
     tabs: [
       { name: "accentColors", "parent": "general", index: 20 },

diff --git a/packages/survey-creator-core/src/creator-theme/creator-theme-model.ts b/packages/survey-creator-core/src/creator-theme/creator-theme-model.ts
@@ -23,25 +23,17 @@ export class CreatorThemeModel extends Base implements ICreatorTheme {
   private backgroundColorCalculator = new ColorCalculator();
 
   unitDictionary: { [index: string]: number } = {
-    "--ctr-surface-base-unit": 8,
     "--ctr-font-unit": 8,
     "--ctr-line-height-unit": 8,
     "--ctr-size-unit": 8,
     "--ctr-spacing-unit": 8,
     "--ctr-corner-radius-unit": 8,
     "--ctr-stroke-unit": 1,
-    "--lbr-font-unit": 8,
-    "--lbr-line-height-unit": 8,
-    "--lbr-size-unit": 8,
-    "--lbr-spacing-unit": 8,
-    "--lbr-corner-radius-unit": 8,
-    "--lbr-stroke-unit": 1,
   }
 
   @property() themeName: string = CreatorThemeModel.defautlThemeName;
   @property() scale: number;
   @property() fontScale: number;
-  @property() surfaceScale: number;
   @property() isLight: boolean = true;
 
   public onThemeSelected = new EventBase<CreatorThemeModel, { theme: ICreatorTheme }>();
@@ -162,7 +154,7 @@ export class CreatorThemeModel extends Base implements ICreatorTheme {
       this.updateColorPropertiesDependentOnBaseColor(this.backgroundColorCalculator, newValue, "--sjs-special-background", "--sjs-special-haze", "--sjs-special-glow");
     } else if (name.indexOf("--") === 0) {
       this.setThemeCssVariablesChanges(name, newValue);
-    } else if (name == "fontScale" || name == "scale" || name == "surfaceScale") {
+    } else if (name == "fontScale" || name == "scale") {
       this.scalePropertiesChanged(name, newValue);
     }
   }
@@ -174,15 +166,6 @@ export class CreatorThemeModel extends Base implements ICreatorTheme {
       this.scalingProperties("--ctr-size-unit", newValue);
       this.scalingProperties("--ctr-spacing-unit", newValue);
       this.scalingProperties("--ctr-corner-radius-unit", newValue);
-
-    } else if (propertyName == "surfaceScale") {
-      this.scalingProperties("--ctr-surface-base-unit", newValue);
-      this.scalingProperties("--lbr-font-unit", newValue);
-      this.scalingProperties("--lbr-line-height-unit", newValue);
-      this.scalingProperties("--lbr-size-unit", newValue);
-      this.scalingProperties("--lbr-spacing-unit", newValue);
-      this.scalingProperties("--lbr-corner-radius-unit", newValue);
-      this.scalingProperties("--lbr-stroke-unit", newValue);
     }
   }
   private scalingProperties(cssName: string, newValue: number) {
@@ -203,15 +186,6 @@ export class CreatorThemeModel extends Base implements ICreatorTheme {
       this.scaleValue("--ctr-spacing-unit", this.scale);
       this.scaleValue("--ctr-corner-radius-unit", this.scale);
     }
-    if (this.surfaceScale !== undefined) {
-      this.scaleValue("--ctr-surface-base-unit", this.surfaceScale);
-      this.scaleValue("--lbr-font-unit", this.surfaceScale);
-      this.scaleValue("--lbr-line-height-unit", this.surfaceScale);
-      this.scaleValue("--lbr-size-unit", this.surfaceScale);
-      this.scaleValue("--lbr-spacing-unit", this.surfaceScale);
-      this.scaleValue("--lbr-corner-radius-unit", this.surfaceScale);
-      this.scaleValue("--lbr-stroke-unit", this.surfaceScale);
-    }
   }
   private getScaleFactor(cssName: string): number {
     return !!this[cssName] ? roundTo2Decimals(parseFloat(this[cssName]) * 100 / this.unitDictionary[cssName]) : undefined;
@@ -221,7 +195,6 @@ export class CreatorThemeModel extends Base implements ICreatorTheme {
     try {
       this.fontScale = this.getScaleFactor("--ctr-font-unit");
       this.scale = this.getScaleFactor("--ctr-size-unit");
-      this.surfaceScale = this.getScaleFactor("--ctr-surface-base-unit");
     } finally {
       this.blockThemeChangedNotifications -= 1;
     }
@@ -429,28 +402,6 @@ Serializer.addProperties("creatortheme", [
         editor.descriptionLocation = "hidden";
       }
     }
-  }, {
-    name: "--ctr-surface-base-unit",
-    default: "8px",
-    visible: false,
-  }, {
-    type: "spinedit",
-    name: "surfaceScale",
-    isSerializable: false,
-    default: 100,
-    enableIf: (obj: CreatorThemeModel): boolean => {
-      return !obj || obj.themeName !== CreatorThemeModel.defautlThemeName;
-    },
-    onPropertyEditorUpdate: function (obj: any, editor: any) {
-      if (!!editor) {
-        editor.unit = "%";
-        editor.min = 0;
-        editor.step = 5;
-        editor.title = getLocString("creatortheme.surfaceScale");
-        editor.titleLocation = "left";
-        editor.descriptionLocation = "hidden";
-      }
-    }
   }, {
     name: "isLight:boolean",
     visible: false,

diff --git a/packages/survey-creator-core/src/images-v1/zoomin-24x24.svg b/packages/survey-creator-core/src/images-v1/zoomin-24x24.svg
diff --git a/packages/survey-creator-core/src/images-v1/zoomout-24x24.svg b/packages/survey-creator-core/src/images-v1/zoomout-24x24.svg
diff --git a/packages/survey-creator-core/src/images-v2/zoomin-24x24.svg b/packages/survey-creator-core/src/images-v2/zoomin-24x24.svg
diff --git a/packages/survey-creator-core/src/images-v2/zoomout-24x24.svg b/packages/survey-creator-core/src/images-v2/zoomout-24x24.svg
diff --git a/packages/survey-creator-core/src/localization/english.ts b/packages/survey-creator-core/src/localization/english.ts
@@ -111,6 +111,8 @@ export var enStrings = {
     redoTooltip: "Redo the change",
     expandAllTooltip: "Expand All",
     collapseAllTooltip: "Collapse All",
+    zoomInTooltip: "Zoom In",
+    zoomOutTooltip: "Zoom Out",
     lockQuestionsTooltip: "Lock expand/collapse state for questions",
     showMoreChoices: "Show more",
     showLessChoices: "Show less",

diff --git a/packages/survey-creator-core/tests/creator-base.tests.ts b/packages/survey-creator-core/tests/creator-base.tests.ts
@@ -4735,4 +4735,31 @@ test("onModified options, on adding page and on copying page", () => {
   expect(modifiedOptions[0].newValue.name).toBe("page2");
   expect(modifiedOptions[2].type).toBe("ELEMENT_COPIED");
   expect(modifiedOptions[2].newValue.name).toBe("page3");
+});
+
+test("ZoomIn/ZoomOut designer surface", (): any => {
+  const creator = new CreatorTester();
+  const designerTab = creator.getPlugin("designer").model as TabDesignerViewModel;
+  expect(designerTab["surfaceScale"]).toBe(100);
+  expect(designerTab["scaleCssVariables"]).toStrictEqual({});
+  expect(designerTab.surveyThemeVariables["--ctr-surface-base-unit"]).toBe(undefined);
+
+  designerTab["scalingSurface"](10);
+  expect(designerTab["surfaceScale"]).toBe(100);
+
+  designerTab["scalingSurface"](200);
+  expect(designerTab["surfaceScale"]).toBe(100);
+
+  designerTab["scalingSurface"](150);
+  expect(designerTab["surfaceScale"]).toBe(150);
+  expect(designerTab["scaleCssVariables"]).toStrictEqual({
+    "--ctr-surface-base-unit": "12px",
+    "--lbr-corner-radius-unit": "12px",
+    "--lbr-font-unit": "12px",
+    "--lbr-line-height-unit": "12px",
+    "--lbr-size-unit": "12px",
+    "--lbr-spacing-unit": "12px",
+    "--lbr-stroke-unit": "1.5px"
+  });
+  expect(designerTab.surveyThemeVariables["--ctr-surface-base-unit"]).toBe("12px");
 });