Signature pad not apply theme variables (#6545)

* work for #6504 Signature pad not apply theme variables * work for #6504 Signature pad not apply theme variables * work for #6504 Signature pad not apply theme variables --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Jul 31, 2023 · a64c423 · a64c423
1 parent c451bd9
commit a64c423
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 12 deletions.
diff --git a/src/question_signaturepad.ts b/src/question_signaturepad.ts
@@ -5,6 +5,7 @@ import { Question } from "./question";
 import SignaturePad from "signature_pad";
 import { CssClassBuilder } from "./utils/cssClassBuilder";
 import { SurveyModel } from "./survey";
+import { ISurveyImpl } from "./base-interfaces";
 
 var defaultWidth = 300;
 var defaultHeight = 200;
@@ -46,6 +47,15 @@ export class QuestionSignaturePadModel extends Question {
     const _survey = this.survey as SurveyModel;
     return !!_survey && !!_survey.themeVariables && _survey.themeVariables["--sjs-primary-backcolor"];
   }
+  private updateColors(signaturePad: SignaturePad) {
+    const penColorFromTheme = this.getPenColorFromTheme();
+    const penColorProperty = this.getPropertyByName("penColor");
+    signaturePad.penColor = this.penColor || penColorFromTheme || penColorProperty.defaultValue || "#1ab394";
+
+    const backgroundColorProperty = this.getPropertyByName("backgroundColor");
+    const backgroundColorFromTheme = penColorFromTheme ? "transparent" : undefined;
+    signaturePad.backgroundColor = this.backgroundColor || backgroundColorFromTheme || backgroundColorProperty.defaultValue || "#ffffff";
+  }
 
   protected getCssRoot(cssClasses: any): string {
     return new CssClassBuilder()
@@ -80,6 +90,16 @@ export class QuestionSignaturePadModel extends Question {
       this.destroySignaturePad(el);
     }
   }
+  public setSurveyImpl(value: ISurveyImpl, isLight?: boolean) {
+    super.setSurveyImpl(value, isLight);
+    if (!this.survey) return;
+
+    (<SurveyModel>this.survey).onThemeApplied.add((survey, options) => {
+      if(!!this.signaturePad) {
+        this.updateColors(this.signaturePad);
+      }
+    });
+  }
 
   initSignaturePad(el: HTMLElement) {
     var canvas: any = el.getElementsByTagName("canvas")[0];
@@ -96,8 +116,7 @@ export class QuestionSignaturePadModel extends Question {
       }
     };
 
-    signaturePad.penColor = this.penColor;
-    signaturePad.backgroundColor = this.backgroundColor;
+    this.updateColors(signaturePad);
 
     signaturePad.addEventListener("beginStroke", () => {
       this.isDrawingValue = true;
@@ -201,7 +220,7 @@ export class QuestionSignaturePadModel extends Question {
    * @see backgroundColor
    */
   public get penColor(): string {
-    return this.getPropertyValue("penColor", this.getPenColorFromTheme());
+    return this.getPropertyValue("penColor");
   }
   public set penColor(val: string) {
     this.setPropertyValue("penColor", val);
@@ -279,12 +298,10 @@ Serializer.addClass(
     {
       name: "penColor:color",
       category: "general",
-      default: "#1ab394",
     },
     {
       name: "backgroundColor:color",
       category: "general",
-      default: "#ffffff",
     },
     {
       name: "dataFormat",

diff --git a/tests/question_signaturepadtests.ts b/tests/question_signaturepadtests.ts
@@ -1,6 +1,8 @@
 import { QuestionSignaturePadModel } from "../src/question_signaturepad";
 import { SurveyModel } from "../src/survey";
 
+export default QUnit.module("question signaturepad");
+
 QUnit.test("QuestionSignaturePadModel dataFormat default value", function (
   assert
 ) {
@@ -176,22 +178,72 @@ QUnit.test("Check width/height influence on signageWidth/Height properties", (as
   containerEl.remove();
 });
 
-QUnit.test("check penColor", (assert) => {
+QUnit.test("check penColor & background color from json", (assert) => {
   const json = {
     questions: [
       {
         type: "signaturepad",
-        name: "q1"
+        name: "q1",
+        penColor: "#e92525",
+        backgroundColor: "#dde6db"
       },
     ],
   };
-  const survey = new SurveyModel(json);
-  const signaturepad = <QuestionSignaturePadModel>survey.getQuestionByName("q1");
-  assert.equal(signaturepad.penColor, "#1ab394", "penColor default");
+  const containerEl = document.createElement("div");
+  const canvas = document.createElement("canvas");
+  containerEl.appendChild(canvas);
+  let survey = new SurveyModel(json);
+  let signaturepadQuestion = <QuestionSignaturePadModel>survey.getQuestionByName("q1");
+  signaturepadQuestion.initSignaturePad(containerEl);
+
+  assert.equal(signaturepadQuestion.penColor, "#e92525", "penColor init");
+  assert.equal(signaturepadQuestion.backgroundColor, "#dde6db", "backgroundColor init");
+  assert.equal(signaturepadQuestion.signaturePad.penColor, "#e92525", "signaturePad.penColor init");
+  assert.equal(signaturepadQuestion.signaturePad.backgroundColor, "#dde6db", "signaturePad.backgroundColor init");
+
+  survey.applyTheme({ "cssVariables": { "--sjs-primary-backcolor": "rgba(103, 58, 176, 1)" } });
+  assert.equal(signaturepadQuestion.penColor, "#e92525", "penColor init");
+  assert.equal(signaturepadQuestion.backgroundColor, "#dde6db", "backgroundColor init");
+  assert.equal(signaturepadQuestion.signaturePad.penColor, "#e92525", "signaturePad.penColor init");
+  assert.equal(signaturepadQuestion.signaturePad.backgroundColor, "#dde6db", "signaturePad.backgroundColor init");
+
+  survey.applyTheme({ "cssVariables": { } });
+  assert.equal(signaturepadQuestion.penColor, "#e92525", "penColor init");
+  assert.equal(signaturepadQuestion.backgroundColor, "#dde6db", "backgroundColor init");
+  assert.equal(signaturepadQuestion.signaturePad.penColor, "#e92525", "signaturePad.penColor init");
+  assert.equal(signaturepadQuestion.signaturePad.backgroundColor, "#dde6db", "signaturePad.backgroundColor init");
+});
+
+QUnit.test("check penColor & background color from theme", (assert) => {
+  const json = {
+    questions: [
+      {
+        type: "signaturepad",
+        name: "q1",
+      },
+    ],
+  };
+  const containerEl = document.createElement("div");
+  const canvas = document.createElement("canvas");
+  containerEl.appendChild(canvas);
+  let survey = new SurveyModel(json);
+  let signaturepadQuestion = <QuestionSignaturePadModel>survey.getQuestionByName("q1");
+  signaturepadQuestion.initSignaturePad(containerEl);
+
+  assert.equal(signaturepadQuestion.penColor, undefined, "penColor undefined");
+  assert.equal(signaturepadQuestion.backgroundColor, undefined, "backgroundColor undefined");
+  assert.equal(signaturepadQuestion.signaturePad.penColor, "#1ab394", "signaturePad.penColor default");
+  assert.equal(signaturepadQuestion.signaturePad.backgroundColor, "#ffffff", "signaturePad.backgroundColor default");
 
   survey.applyTheme({ "cssVariables": { "--sjs-primary-backcolor": "rgba(103, 58, 176, 1)" } });
-  assert.equal(signaturepad.penColor, "rgba(103, 58, 176, 1)", "penColor from theme");
+  assert.equal(signaturepadQuestion.penColor, undefined, "penColor undefined");
+  assert.equal(signaturepadQuestion.backgroundColor, undefined, "backgroundColor undefined");
+  assert.equal(signaturepadQuestion.signaturePad.penColor, "rgba(103, 58, 176, 1)", "signaturePad.penColor from theme");
+  assert.equal(signaturepadQuestion.signaturePad.backgroundColor, "transparent", "signaturePad.backgroundColor from theme");
 
   survey.applyTheme({ "cssVariables": { } });
-  assert.equal(signaturepad.penColor, "#1ab394", "penColor default");
+  assert.equal(signaturepadQuestion.penColor, undefined, "penColor undefined");
+  assert.equal(signaturepadQuestion.backgroundColor, undefined, "backgroundColor undefined");
+  assert.equal(signaturepadQuestion.signaturePad.penColor, "#1ab394", "signaturePad.penColor default");
+  assert.equal(signaturepadQuestion.signaturePad.backgroundColor, "#ffffff", "signaturePad.backgroundColor default");
 });