Designer tab: when zoom out, the image picker layout changes. (#9207)

Fixes #9206 Co-authored-by: tsv2013 <[email protected]>
surveyjs · Dec 25, 2024 · 16d3007 · 16d3007
1 parent d552233
commit 16d3007
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 9 deletions.
diff --git a/packages/survey-core/src/question_imagepicker.ts b/packages/survey-core/src/question_imagepicker.ts
@@ -228,10 +228,13 @@ export class QuestionImagePickerModel extends QuestionCheckboxBase {
   public set imageHeight(val: number) {
     this.setPropertyValue("imageHeight", val);
   }
+  public get imageScale() {
+    return this.survey ? (this.survey as any)["widthScale"] / 100 : 1;
+  }
   @property({}) private responsiveImageHeight: number;
   public get renderedImageHeight(): number {
-    const height = this.isResponsive ? Math.floor(this.responsiveImageHeight) : this.imageHeight;
-    return (height ? height : 150);
+    const height = this.isResponsive ? Math.floor(this.responsiveImageHeight) : this.imageHeight * this.imageScale;
+    return (height ? height : 150 * this.imageScale);
   }
   /**
    * Specifies the width of containers for images or videos. Accepts positive numbers and CSS values.
@@ -252,8 +255,8 @@ export class QuestionImagePickerModel extends QuestionCheckboxBase {
 
   @property({}) private responsiveImageWidth: number;
   public get renderedImageWidth(): number {
-    const width = this.isResponsive ? Math.floor(this.responsiveImageWidth) : this.imageWidth;
-    return (width ? width : 200);
+    const width = this.isResponsive ? Math.floor(this.responsiveImageWidth) : this.imageWidth * this.imageScale;
+    return (width ? width : 200 * this.imageScale);
   }
   /**
    * Specifies how to resize images or videos to fit them into their containers.
@@ -391,11 +394,11 @@ export class QuestionImagePickerModel extends QuestionCheckboxBase {
     };
     if (this.isResponsive) {
       const itemsCount = this.choices.length + (this.isDesignMode ? 1 : 0);
-      const gap = this.gapBetweenItems || 0;
-      const minWidth = this.minImageWidth;
-      const maxWidth = this.maxImageWidth;
-      const maxHeight = this.maxImageHeight;
-      const minHeight = this.minImageHeight;
+      const gap = (this.gapBetweenItems || 0) * this.imageScale;
+      const minWidth = this.minImageWidth * this.imageScale;
+      const maxWidth = this.maxImageWidth * this.imageScale;
+      const maxHeight = this.maxImageHeight * this.imageScale;
+      const minHeight = this.minImageHeight * this.imageScale;
       let colCount = this.colCount;
       let width: number;
       if (colCount === 0) {

diff --git a/packages/survey-core/tests/questionImagepicker.ts b/packages/survey-core/tests/questionImagepicker.ts
@@ -380,4 +380,63 @@ QUnit.test("check reCalcGap", function (assert) {
   survey.cssClasses.root = "some-class";
   question.afterRender(container);
   assert.notOk(!!question["reCalcGapBetweenItemsCallback"]);
+});
+
+QUnit.test("supports survey width scale", function (assert) {
+  const survey = new SurveyModel(
+    {
+      "elements": [
+        {
+          "type": "imagepicker",
+          "name": "question1",
+          "choices": [
+            {
+              "value": "lion",
+              "imageLink": "test"
+            },
+          ],
+        }
+      ]
+    }
+  );
+  survey.css = defaultV2Css;
+  const question = <QuestionImagePickerModel>survey.getAllQuestions()[0];
+
+  assert.ok(question.isDefaultV2Theme);
+  assert.ok(question["isResponsiveValue"]);
+  assert.ok(question["isResponsive"]);
+
+  assert.equal(survey.widthScale, 100);
+  assert.equal(question.renderedImageWidth, 200);
+  assert.equal(question.renderedImageHeight, 150);
+
+  survey.widthScale = 75;
+  assert.equal(survey.widthScale, 75);
+  assert.equal(question.renderedImageWidth, 150);
+  assert.equal(question.renderedImageHeight, 112.5);
+
+  survey.widthScale = 100;
+  assert.equal(survey.widthScale, 100);
+  question["processResponsiveness"](0, 600);
+  assert.equal(question.renderedImageWidth, 400);
+  assert.equal(question.renderedImageHeight, 133);
+
+  question["processResponsiveness"](0, 100);
+  assert.equal(question.renderedImageWidth, 400);
+  assert.equal(question.renderedImageHeight, 133);
+
+  survey.widthScale = 75;
+  question["processResponsiveness"](0, 100);
+  assert.equal(survey.widthScale, 75);
+  assert.equal(question.renderedImageWidth, 300);
+  assert.equal(question.renderedImageHeight, 99);
+
+  question["processResponsiveness"](0, 600);
+  assert.equal(question.renderedImageWidth, 300);
+  assert.equal(question.renderedImageHeight, 99);
+
+  question.imageWidth = 150;
+  question.imageHeight = 100;
+  assert.equal(question.renderedImageWidth, 112.5);
+  assert.equal(question.renderedImageHeight, 75);
 });