#7219 - fix signature scaling (#7291)

* #7219 - fix signature scaling * #7219 - fixed line width
surveyjs · Nov 6, 2023 · 004b949 · 004b949
1 parent 22bcef1
commit 004b949
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 10 deletions.
diff --git a/src/question_signaturepad.ts b/src/question_signaturepad.ts
@@ -80,14 +80,18 @@ export class QuestionSignaturePadModel extends Question {
   private scale: number;
   private valueIsUpdatingInternally: boolean = false;
 
-  private scaleCanvas(refresh: boolean = true) {
+  private resizeCanvas() {
+    this.canvas.width = this.containerWidth;
+    this.canvas.height = this.containerHeight;
+  }
+
+  private scaleCanvas(refresh: boolean = true, resize: boolean = false) {
     const canvas = this.canvas;
-    if (canvas.width != this.containerWidth) canvas.width = this.containerWidth;
-    if (canvas.height != this.containerHeight) canvas.height = this.containerHeight;
-    const scale = canvas.offsetWidth / canvas.width;
-    if (this.scale != scale) {
+    const scale = canvas.offsetWidth / this.containerWidth;
+    if (this.scale != scale || resize) {
       this.scale = scale;
       canvas.style.width = this.renderedCanvasWidth;
+      this.resizeCanvas();
       this.signaturePad.minWidth = this.penMinWidth * scale;
       this.signaturePad.maxWidth = this.penMaxWidth * scale;
       canvas.getContext("2d").scale(1 / scale, 1 / scale);
@@ -107,15 +111,14 @@ export class QuestionSignaturePadModel extends Question {
   }
 
   private updateValueHandler = () => {
-    this.scaleCanvas(false);
+    this.scaleCanvas(false, true);
     this.refreshCanvas();
   };
 
   initSignaturePad(el: HTMLElement) {
     var canvas: any = el.getElementsByTagName("canvas")[0];
     this.canvas = canvas;
-    canvas.width = this.containerWidth;
-    canvas.height = this.containerHeight;
+    this.resizeCanvas();
     var signaturePad = new SignaturePad(canvas, { backgroundColor: "#ffffff" });
     this.signaturePad = signaturePad;
     if (this.isInputReadOnly) {

diff --git a/src/signaturepad.scss b/src/signaturepad.scss
@@ -29,6 +29,7 @@
 .sjs_sp_canvas {
     position: relative;
     max-width: 100%;
+    display: block;
 }
 .sjs_sp__background-image {
     position: absolute;

diff --git a/visualRegressionTests/tests/defaultV2/etalons/signature-clear.png b/visualRegressionTests/tests/defaultV2/etalons/signature-clear.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/signature-data.png b/visualRegressionTests/tests/defaultV2/etalons/signature-data.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/signature-mobile.png b/visualRegressionTests/tests/defaultV2/etalons/signature-mobile.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/signature-scaled-resize.png b/visualRegressionTests/tests/defaultV2/etalons/signature-scaled-resize.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/signature-scaled.png b/visualRegressionTests/tests/defaultV2/etalons/signature-scaled.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/signature.png b/visualRegressionTests/tests/defaultV2/etalons/signature.png
diff --git a/visualRegressionTests/tests/defaultV2/signaturepad.ts b/visualRegressionTests/tests/defaultV2/signaturepad.ts
@@ -66,10 +66,16 @@ frameworks.forEach(framework => {
         ]
       });
       await t.click("canvas", { offsetX: 40, offsetY: 10 });
-      await t.click("canvas", { offsetX: 370, offsetY: 50 });
-      await t.click("canvas", { offsetX: 700, offsetY: 90 });
+      await t.click("canvas", { offsetX: 370, offsetY: 60 });
+      await t.click("canvas", { offsetX: 700, offsetY: 110 });
       await t.wait(100);
       await takeElementScreenshot("signature-scaled.png", ".sd-question", t, comparer);
+      await t.resizeWindow(500, 1080);
+      await t.click("canvas", { offsetX: 20, offsetY: 60 });
+      await t.click("canvas", { offsetX: 160, offsetY: 35 });
+      await t.click("canvas", { offsetX: 300, offsetY: 10 });
+      await t.wait(100);
+      await takeElementScreenshot("signature-scaled-resize.png", ".sd-question", t, comparer);
       await t.click("button[title=\"Clear\"]");
       await takeElementScreenshot("signature-clear.png", ".sd-question", t, comparer);
     });