work for #6189 Creator v2.0 Add ZoomIn/ZoomOut into designer surface

surveyjs · Dec 6, 2024 · 9b33265 · 9b33265
1 parent a85dbd2
commit 9b33265
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 34 deletions.
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,4 +1,4 @@
-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";
@@ -12,6 +12,8 @@ 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 = {};
@@ -123,55 +125,56 @@ export class TabDesignerViewModel extends Base {
     };
     this.surfaceToolbar.cssClasses = defaultActionBarCss;
 
-    const surfaceToolbarItems = [];
+    const surfaceToolbarItems: Array<IAction> = [];
     if (this.creator.showCreatorThemeSettings) {
-      surfaceToolbarItems.push({
+      surfaceToolbarItems.push(<IAction>{
         id: "zoomIn",
         locTooltipName: "ed.zoomInTooltip",
         iconName: "icon-zoomin-24x24",
         iconSize: "auto",
         action: () => { this.scalingSurface(this.surfaceScale + 10); }
       });
-      surfaceToolbarItems.push({
-        id: "zoomIn",
+      surfaceToolbarItems.push(<IAction>{
+        id: "zoomOut",
         locTooltipName: "ed.zoomOutTooltip",
         iconName: "icon-zoomout-24x24",
         iconSize: "auto",
         action: () => { this.scalingSurface(this.surfaceScale - 10); }
       });
     }
-    if (this.creator.expandCollapseButtonVisibility != "never") {
-      surfaceToolbarItems.push({
-        id: "collapseAll",
-        locTooltipName: "ed.collapseAllTooltip",
-        iconName: "icon-collapseall-24x24",
-        iconSize: "auto",
-        // needSeparator: this.creator.showCreatorThemeSettings,
-        action: () => this.creator.expandCollapseManager.expandCollapseElements("collapse-all", true)
-      });
-      surfaceToolbarItems.push({
-        id: "expandAll",
-        locTooltipName: "ed.expandAllTooltip",
-        iconName: "icon-expandall-24x24",
-        iconSize: "auto",
-        action: () => this.creator.expandCollapseManager.expandCollapseElements("expand-all", false)
-      });
-      surfaceToolbarItems.push({
-        id: "lockQuestions",
-        locTooltipName: "ed.lockQuestionsTooltip",
-        iconName: "icon-questionlock-24x24",
-        iconSize: "auto",
-        action: (action) => {
-          action.active = !action.active;
-          this.creator.expandCollapseManager.lockQuestions(action.active);
-        }
-      });
-    }
+    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 <= 20 || scaleFactor > 200) return;
+    if (scaleFactor <= this.minSurfaceScaling || scaleFactor >= this.maxSurfaceScaling) return;
 
     this.surfaceScale = scaleFactor;
     Object.keys(this.unitDictionary).forEach(key => {