From 84e4d7cbc61632a66ed9ec79ca292c7f390e3060 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:47:16 +0300
Subject: [PATCH] Work for
 https://github.com/surveyjs/survey-creator/issues/6157 - Survey width scaling
 (#9142)

Co-authored-by: tsv2013 <tsv2013@noreply.github.com>
---
 packages/survey-core/src/survey.ts            | 19 ++++++++-
 .../survey-core/tests/surveywidthmodetests.ts | 40 ++++++++++++++++++-
 2 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/packages/survey-core/src/survey.ts b/packages/survey-core/src/survey.ts
index dd60519c5d..73122e620c 100644
--- a/packages/survey-core/src/survey.ts
+++ b/packages/survey-core/src/survey.ts
@@ -4993,6 +4993,7 @@ export class SurveyModel extends SurveyElementCore
       width,
     };
     this.onResize.fire(this, options);
+    this.setResponsiveStartWidth(width);
     return isMobileChanged;
   }
 
@@ -7335,9 +7336,25 @@ export class SurveyModel extends SurveyElementCore
     this.setPropertyValue("width", val);
   }
   public get renderedWidth(): string {
+    const isStaticWidth = this.getPropertyValue("calculatedWidthMode") == "static";
     let width = this.getPropertyValue("width");
+    if (this.isScaled && this.responsiveStartWidth > 1) {
+      let initialWidth = this.responsiveStartWidth;
+      try {
+        initialWidth = !isNaN(width) ? width : parseFloat(width.toString().replace("px", ""));
+      } catch (e) { }
+      return (isStaticWidth ? initialWidth : this.responsiveStartWidth) * this.widthScale / 100 + "px";
+    }
     if (width && !isNaN(width)) width = width + "px";
-    return this.getPropertyValue("calculatedWidthMode") == "static" && width || undefined;
+    return isStaticWidth && width || undefined;
+  }
+  @property({ defaultValue: 100 }) widthScale: number;
+  @property() responsiveStartWidth: number;
+  public setResponsiveStartWidth(width: number): void {
+    this.responsiveStartWidth = width;
+  }
+  get isScaled(): boolean {
+    return Math.abs(this.widthScale - 100) > 0.001;
   }
   public get timerInfo(): { spent: number, limit?: number } {
     return this.getTimerInfo();
diff --git a/packages/survey-core/tests/surveywidthmodetests.ts b/packages/survey-core/tests/surveywidthmodetests.ts
index 0b789ffa7e..7d56161e20 100644
--- a/packages/survey-core/tests/surveywidthmodetests.ts
+++ b/packages/survey-core/tests/surveywidthmodetests.ts
@@ -122,9 +122,9 @@ QUnit.test("Survey widthMode - css", function (assert) {
     ]
   });
   survey.widthMode = "static";
-  assert.equal(survey.bodyCss, survey.css.body+" "+survey.css.body+"--static", "calculate body css for static width mode");
+  assert.equal(survey.bodyCss, survey.css.body + " " + survey.css.body + "--static", "calculate body css for static width mode");
   survey.widthMode = "responsive";
-  assert.equal(survey.bodyCss, survey.css.body+" "+survey.css.body+"--responsive", "calculate body css for responsive width mode");
+  assert.equal(survey.bodyCss, survey.css.body + " " + survey.css.body + "--responsive", "calculate body css for responsive width mode");
 });
 
 QUnit.test("Survey widthMode property for rating questions", function (assert) {
@@ -185,3 +185,39 @@ QUnit.test("Survey widthMode property for rating questions", function (assert) {
   });
   assert.equal(survey3.calculateWidthMode(), "static", "rating with rate values widthMode is static");
 });
+
+QUnit.test("Survey width scaling", function (assert) {
+  var survey = new SurveyModel({
+    "elements": [
+      {
+        "name": "question1",
+      },
+    ]
+  });
+  assert.equal(survey.widthMode, "auto");
+  assert.equal(survey.width, undefined);
+  assert.equal(survey.widthScale, 100);
+  assert.equal(survey.isScaled, false);
+  assert.equal(survey.renderedWidth, undefined);
+
+  survey.responsiveStartWidth = 1000;
+  survey.widthMode = "static";
+  assert.equal(survey.isScaled, false);
+  assert.equal(survey.renderedWidth, undefined);
+
+  survey.width = "500px";
+  assert.equal(survey.isScaled, false);
+  assert.equal(survey.renderedWidth, "500px");
+
+  survey.widthScale = 75;
+  assert.equal(survey.isScaled, true);
+  assert.equal(survey.renderedWidth, "375px");
+
+  survey.widthMode = "responsive";
+  assert.equal(survey.isScaled, true);
+  assert.equal(survey.renderedWidth, "750px");
+
+  survey.setResponsiveStartWidth(1200);
+  assert.equal(survey.isScaled, true);
+  assert.equal(survey.renderedWidth, "900px");
+});