From a64c423f445fa6ddeed4e9e68838bd1e39b2575f Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Mon, 31 Jul 2023 10:17:57 +0300 Subject: [PATCH] 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 --- src/question_signaturepad.ts | 27 +++++++++--- tests/question_signaturepadtests.ts | 66 ++++++++++++++++++++++++++--- 2 files changed, 81 insertions(+), 12 deletions(-) diff --git a/src/question_signaturepad.ts b/src/question_signaturepad.ts index e31e412b47..3a80316625 100644 --- 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; + + (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 index 70bda67eca..bbe23037eb 100644 --- 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 = 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 = 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 = 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"); }); \ No newline at end of file