Fixed design surface zooming issues (#6255)

* When zoomed out, questions will not be displayed.
Fixes #6221

* Fixed SASS compiler warning

* Updated etalons

* Fixed vr-tests

* Updated etalons

* Updated etalons

* Updated etalons

---------

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

packages/survey-creator-core/src/components/page-navigator/page-navigator.scss

@@ -4,6 +4,7 @@ svc-page-navigator,
 .svc-page-navigator {
   display: flex;
   flex-direction: column;
+  gap: var(--ctr-page-navigator-gap, calcSize(2));
 }
 
 .svc-page-navigator__button-icon {

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, IAction } from "survey-core";
+import { Base, PageModel, property, SurveyModel, ComputedUpdater, settings, IPage, ActionContainer, propertyArray, IAnimationGroupConsumer, AnimationGroup, prepareElementForVerticalAnimation, cleanHtmlElementAfterAnimation, IAction, activateLazyRenderingChecks } from "survey-core";
 import { SurveyCreatorModel } from "../../creator-base";
 import { getLocString } from "../../editorLocalization";
 import { PagesController } from "../../pages-controller";
@@ -148,7 +148,10 @@ export class TabDesignerViewModel extends Base {
       iconName: "icon-zoomout-24x24",
       iconSize: "auto",
       visible: new ComputedUpdater<boolean>(() => this.creator.showCreatorThemeSettings),
-      action: () => { this.scaleSurface(this.surfaceScale - this.stepSurfaceScaling); }
+      action: () => {
+        this.scaleSurface(this.surfaceScale - this.stepSurfaceScaling);
+        this.forceLazyRendering();
+      }
     });
 
     surfaceToolbarItems.push({
@@ -182,6 +185,9 @@ export class TabDesignerViewModel extends Base {
     });
     this.surfaceToolbar.setItems(surfaceToolbarItems);
   }
+  private forceLazyRendering() {
+    this.creator.survey.pages.forEach(page => activateLazyRenderingChecks(page.id));
+  }
 
   private scaleSurface(scaleFactor: number): void {
     if (scaleFactor <= this.minSurfaceScaling || scaleFactor >= this.maxSurfaceScaling) return;

packages/survey-creator-core/src/components/toolbox/toolbox-animation.scss

@@ -13,6 +13,7 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -23,6 +24,7 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
     width: var(--toolbox-width-compact);
     overflow: hidden;
   }
+
   to {
     width: var(--animation-width);
     overflow: hidden;
@@ -36,6 +38,7 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
 
     overflow: hidden;
   }
+
   to {
     padding-inline-end: 0;
     padding-inline-start: 0;
@@ -49,6 +52,7 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
     padding-inline-start: var(--ctr-toolbox-separator-padding-left-compact, calcSize(2));
     overflow: hidden;
   }
+
   to {
     padding-inline-end: var(--ctr-toolbox-separator-padding-right, calcSize(2));
     padding-inline-start: var(--ctr-toolbox-separator-padding-left, calcSize(2));
@@ -57,15 +61,16 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
 }
 
 .svc-toolbox__panel--enter,
-.svc-toolbox__panel--leave
-{
+.svc-toolbox__panel--leave {
   animation-fill-mode: forwards;
   animation-duration: var(--move-animation-duration), var(--animation-duration);
   animation-delay: var(--move-animation-delay), 0s;
   animation-direction: var(--animation-direction);
   animation-timing-function: var(--animation-timing-function);
   animation-name: toolboxMoveIn, empty;
   animation-fill-mode: forwards;
+  min-width: 0;
+
   .svc-toolbox__category-separator {
     animation-duration: var(--move-animation-duration);
     animation-delay: var(--move-animation-delay);
@@ -74,9 +79,11 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
     animation-name: toolboxSeparatorMoveIn;
     animation-fill-mode: forwards;
   }
+
   .svc-toolbox__category-separator--search {
     animation-name: toolboxSeparatorSearchMoveIn;
   }
+
   .svc-toolbox__item-submenu-button,
   .svc-toolbox__item-title,
   .svc-search__input {
@@ -89,20 +96,21 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
     opacity: 0;
     text-overflow: initial;
   }
-  min-width: 0;
 }
+
 .svc-toolbox__panel--enter {
   --fade-animation-duration: #{$svc-toolbox-fade-in-duration};
-  --move-animation-duration:  #{$svc-toolbox-move-in-duration};
+  --move-animation-duration: #{$svc-toolbox-move-in-duration};
   --fade-animation-delay: #{$svc-toolbox-fade-in-delay};
   --move-animation-delay: 0s;
   --animation-direction: normal;
   --animation-duration: calc(var(--fade-animation-delay) + var(--fade-animation-duration));
   --animation-timing-function: #{$cubic-ease-out};
 }
+
 .svc-toolbox__panel--leave {
   --fade-animation-duration: #{$svc-toolbox-fade-out-duration};
-  --move-animation-duration:  #{$svc-toolbox-move-out-duration};
+  --move-animation-duration: #{$svc-toolbox-move-out-duration};
   --fade-animation-delay: 0s;
   --move-animation-delay: #{$svc-toolbox-move-out-delay};
   --animation-direction: reverse;
@@ -118,9 +126,9 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
 }
 
 .svc-creator--disable-animations {
+
   .svc-toolbox__panel--enter,
-  .svc-toolbox__panel--leave
-  {
+  .svc-toolbox__panel--leave {
     animation: none;
   }
-}
+}

packages/survey-creator-core/src/creator-responsivity-manager.ts

@@ -113,6 +113,10 @@ export class CreatorResponsivityManager {
           paddingRight = parseFloat((conputedStyles.paddingRight || "").replace("px", ""));
         } catch (e) { }
         this.creator.survey.setResponsiveStartWidth(surveyContainer.offsetWidth - paddingLeft - paddingRight);
+        const surveyContent = surveyContainer.querySelector("div") as HTMLDivElement;
+        if (!!surveyContent) {
+          this.creator.survey.setStaticStartWidth(surveyContent.clientWidth / this.creator.survey.widthScale * 100);
+        }
       }
     }
   }

visualRegressionTests/tests/designer/surface.ts

@@ -2453,7 +2453,7 @@ test("Question description bottom", async (t) => {
   });
 });
 
-test.skip("Scaling design surface", async (t) => {
+test("Scaling design surface", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await ClientFunction(() => {
       window["creator"].showCreatorThemeSettings = true;