Signature Pad. Add ability to use background image (#6744)

* work for #4403 Signature Pad. Add ability to use background image * Describe backgroundImage and fix backgroundColor and penColor descriptions * work for #4403 backgroundImage is priopity over backgroundColor * work for #4403 : fix markup tests for vue3 * work for #4403 : fix style and add into general group --------- Co-authored-by: OlgaLarina <[email protected]> Co-authored-by: Roman Tsukanov <[email protected]>
surveyjs · Aug 24, 2023 · b55c3c2 · b55c3c2
1 parent 9ab333e
commit b55c3c2
Show file tree

Hide file tree

Showing 24 changed files with 204 additions and 20 deletions.
diff --git a/packages/survey-angular-ui/src/questions/signature.component.html b/packages/survey-angular-ui/src/questions/signature.component.html
@@ -1,11 +1,10 @@
 <div
 [class]="model.cssClasses.root"
 [style.height]="model.signatureHeight + 'px'" [style.width]="model.signatureWidth + 'px'" #contentElement>
-<div [class]="model.cssClasses.placeholder" [visible]="model.needShowPlaceholder()">
-  {{ model.placeHolderText }}
-</div>
+<div [class]="model.cssClasses.placeholder" [visible]="model.needShowPlaceholder()">{{ model.placeHolderText }}</div>
 <div>
-  <canvas tabindex="0"></canvas>
+  <img *ngIf="!!model.backgroundImage" [src]="model.backgroundImage" [width]="model.signatureWidth" [height]="model.signatureHeight" [class]="model.cssClasses.backgroundImage">
+  <canvas tabindex="0" [class]="model.cssClasses.canvas"></canvas>
 </div>
 <div [class]="model.cssClasses.controls" [visible]="model.canShowClearButton">
   <button

diff --git a/packages/survey-vue3-ui/package.json b/packages/survey-vue3-ui/package.json
@@ -32,6 +32,7 @@
     "typescript": "~4.7.4",
     "vite": "^3.1.8",
     "vitest": "~0.32.4",
+    "vitest-canvas-mock": "^0.3.3",
     "vue": "^3.2.41",
     "vue-tsc": "^1.0.8"
   }

diff --git a/packages/survey-vue3-ui/src/Signaturepad.vue b/packages/survey-vue3-ui/src/Signaturepad.vue
@@ -10,11 +10,16 @@
     <div
       :class="question.cssClasses.placeholder"
       v-show="question.needShowPlaceholder()"
-    >
-      {{ question.placeHolderText }}
-    </div>
+    >{{ question.placeHolderText }}</div>
     <div>
-      <canvas tabindex="0"></canvas>
+      <img
+        v-if="question.backgroundImage"
+        :class="question.cssClasses.backgroundImage"
+        :src="question.backgroundImage"
+        :width="question.signatureWidth"
+        :height="question.signatureHeight"
+      />
+      <canvas tabindex="0" :class="question.cssClasses.canvas"></canvas>
     </div>
     <div
       :class="question.cssClasses.controls"

diff --git a/packages/survey-vue3-ui/vitest.config.js b/packages/survey-vue3-ui/vitest.config.js
@@ -6,7 +6,11 @@ import { fileURLToPath, URL } from "node:url";
 export default defineConfig({
  plugins: [vue()],
  test:{
+	setupFiles: ['./vitest.setup.ts'],
 	environment: 'jsdom',
+	deps: {
+	 inline: ['vitest-canvas-mock'],
+	},
  },
  resolve: {
 	alias: {

diff --git a/packages/survey-vue3-ui/vitest.setup.ts b/packages/survey-vue3-ui/vitest.setup.ts
@@ -0,0 +1 @@
+import "vitest-canvas-mock";
diff --git a/src/default-styles.scss b/src/default-styles.scss
@@ -860,7 +860,7 @@ f-panel {
   align-items: center;
   justify-content: center;
   position: absolute;
-  z-index: 0;
+  z-index: 1;
   user-select: none;
   pointer-events: none;
   width: 100%;

diff --git a/src/defaultCss/cssmodern.ts b/src/defaultCss/cssmodern.ts
@@ -415,6 +415,8 @@ export var modernCss = {
     small: "sv-row__question--small",
     controls: "sjs_sp_controls",
     placeholder: "sjs_sp_placeholder",
+    canvas: "sjs_sp_canvas",
+    backgroundImage: "sjs_sp__background-image",
     clearButton: "sjs_sp_clear",
   },
   saveData: {

diff --git a/src/defaultCss/cssstandard.ts b/src/defaultCss/cssstandard.ts
@@ -350,6 +350,8 @@ export var defaultStandardCss = {
     root: "sv_q_signaturepad sjs_sp_container",
     controls: "sjs_sp_controls",
     placeholder: "sjs_sp_placeholder",
+    canvas: "sjs_sp_canvas",
+    backgroundImage: "sjs_sp__background-image",
     clearButton: "sjs_sp_clear",
   },
   saveData: {

diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -576,6 +576,8 @@ export var defaultV2Css = {
     small: "sd-row__question--small",
     controls: "sjs_sp_controls sd-signaturepad__controls",
     placeholder: "sjs_sp_placeholder",
+    canvas: "sjs_sp_canvas sd-signaturepad__canvas",
+    backgroundImage: "sjs_sp__background-image sd-signaturepad__background-image",
     clearButton: "sjs_sp_clear sd-context-btn sd-context-btn--negative sd-signaturepad__clear",
     clearButtonIconId: "icon-clear"
   },

diff --git a/src/defaultV2-theme/blocks/sd-signaturepad.scss b/src/defaultV2-theme/blocks/sd-signaturepad.scss
@@ -23,4 +23,12 @@
     .sjs_sp_placeholder {
         background-color: $red-light;
     }
-} 
+}
+
+.sd-signaturepad__canvas,
+.sd-signaturepad__background-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    object-fit: cover;
+}
diff --git a/src/knockout/templates/question-signaturepad.html b/src/knockout/templates/question-signaturepad.html
@@ -4,7 +4,10 @@
             data-bind="text: placeHolderText, css: question.cssClasses.placeholder, visible: $data.needShowPlaceholder()">
         </div>
         <div>
-            <canvas tabindex='0'></canvas>
+            <!-- ko if: question.backgroundImage -->
+            <img data-bind="attr: { src: question.backgroundImage, width: question.signatureWidth, height: question.signatureHeight }, css: question.cssClasses.backgroundImage">
+            <!-- /ko -->
+            <canvas tabindex='0' data-bind="css: question.cssClasses.canvas"></canvas>
         </div>
         <!-- ko if: question.canShowClearButton -->
         <div data-bind="css: question.cssClasses.controls">

diff --git a/src/plugins/themes/bootstrap/cssbootstrap.ts b/src/plugins/themes/bootstrap/cssbootstrap.ts
@@ -331,6 +331,8 @@ export var defaultCss = {
     root: "sv_q_signaturepad sjs_sp_container",
     controls: "sjs_sp_controls",
     placeholder: "sjs_sp_placeholder",
+    canvas: "sjs_sp_canvas",
+    backgroundImage: "sjs_sp__background-image",
     clearButton: "sjs_sp_clear",
   },
   saveData: {

diff --git a/src/plugins/themes/bootstrapmaterial/cssbootstrapmaterial.ts b/src/plugins/themes/bootstrapmaterial/cssbootstrapmaterial.ts
@@ -336,6 +336,8 @@ export var defaultCss = {
     root: "sv_q_signaturepad sjs_sp_container",
     controls: "sjs_sp_controls",
     placeholder: "sjs_sp_placeholder",
+    canvas: "sjs_sp_canvas",
+    backgroundImage: "sjs_sp__background-image",
     clearButton: "sjs_sp_clear",
   },
   saveData: {

diff --git a/src/plugins/themes/common-theme-settings.ts b/src/plugins/themes/common-theme-settings.ts
@@ -333,6 +333,8 @@ export function setStyles(): void {
     ".sv_main .sjs_sp_controls > button": "user-select: none;",
     ".sv_main .sjs_sp_container>div>canvas:focus": "outline: none;",
     ".sv_main .sjs_sp_placeholder": "display: flex;  align-items: center; justify-content: center; position: absolute; z-index: 0; user-select: none; pointer-events: none; width: 100%; height: 100%;",
+    ".sv_main .sjs_sp_canvas": "position: absolute; top: 0; left: 0;",
+    ".sv_main .sjs_sp__background-image": "position: absolute; top: 0; left: 0;",
 
     // logo
     // ".sv_main .sv_header": "white-space: nowrap;",

diff --git a/src/question_signaturepad.ts b/src/question_signaturepad.ts
@@ -55,7 +55,8 @@ export class QuestionSignaturePadModel extends Question {
 
     const backgroundColorProperty = this.getPropertyByName("backgroundColor");
     const backgroundColorFromTheme = penColorFromTheme ? "transparent" : undefined;
-    signaturePad.backgroundColor = this.backgroundColor || backgroundColorFromTheme || backgroundColorProperty.defaultValue || "#ffffff";
+    const background = !!this.backgroundImage ? "transparent" : this.backgroundColor;
+    signaturePad.backgroundColor = background || backgroundColorFromTheme || backgroundColorProperty.defaultValue || "#ffffff";
   }
 
   protected getCssRoot(cssClasses: any): string {
@@ -217,24 +218,49 @@ export class QuestionSignaturePadModel extends Question {
     return !this.isInputReadOnly && this.allowClear;
   }
   /**
-   * Specifies a color for the pen. Accepts hexadecimal colors (`"#FF0000"`), RGB colors (`"rgb(255,0,0)"`), or color names (`"red"`).
+   * Specifies a color for the pen.
+   *
+   * This property accepts color values in the following formats:
+   *
+   * - Hexadecimal colors (`"#FF0000"`)
+   * - RGB colors (`"rgb(255,0,0)"`)
+   * - Color names (`"red"`)
    * @see backgroundColor
    */
   public get penColor(): string {
     return this.getPropertyValue("penColor");
   }
   public set penColor(val: string) {
     this.setPropertyValue("penColor", val);
+    !!this.signaturePad && this.updateColors(this.signaturePad);
   }
   /**
-   * Specifies a color for the signature area background.  Accepts hexadecimal colors (`"#FF0000"`), RGB colors (`"rgb(255,0,0)"`), or color names (`"red"`).
+   * Specifies a color for the signature area background. Ignored if [`backgroundImage`](#backgroundImage) is set.
+   *
+   * This property accepts color values in the following formats:
+   *
+   * - Hexadecimal colors (`"#FF0000"`)
+   * - RGB colors (`"rgb(255,0,0)"`)
+   * - Color names (`"red"`)
    * @see penColor
    */
   public get backgroundColor(): string {
     return this.getPropertyValue("backgroundColor");
   }
   public set backgroundColor(val: string) {
     this.setPropertyValue("backgroundColor", val);
+    !!this.signaturePad && this.updateColors(this.signaturePad);
+  }
+  /**
+   * An image to display in the background of the signature area. Accepts a base64 or URL string value.
+   * @see backgroundColor
+   */
+  public get backgroundImage(): string {
+    return this.getPropertyValue("backgroundImage");
+  }
+  public set backgroundImage(val: string) {
+    this.setPropertyValue("backgroundImage", val);
+    !!this.signaturePad && this.updateColors(this.signaturePad);
   }
   get clearButtonCaption(): string {
     return this.getLocalizationString("clearCaption");
@@ -294,6 +320,10 @@ Serializer.addClass(
       category: "general",
       default: true,
     },
+    {
+      name: "backgroundImage",
+      category: "general",
+    },
     {
       name: "penColor:color",
       category: "general",

diff --git a/src/react/signaturepad.tsx b/src/react/signaturepad.tsx
@@ -24,13 +24,20 @@ export class SurveyQuestionSignaturePad extends SurveyQuestionElementBase {
           {this.question.placeHolderText}
         </div>
         <div>
-          <canvas tabIndex={0}></canvas>
+          {this.renderBackgroundImage()}
+          <canvas tabIndex={0} className={this.question.cssClasses.canvas}></canvas>
         </div>
         {clearButton}
       </div>
     );
   }
 
+  renderBackgroundImage(): JSX.Element | null {
+    if(!this.question.backgroundImage) return null;
+
+    return <img className={this.question.cssClasses.backgroundImage} src={this.question.backgroundImage} width={this.question.signatureWidth} height= {this.question.signatureHeight}></img>;
+  }
+
   renderCleanButton(): JSX.Element | null {
     if(!this.question.canShowClearButton) return null;
 

diff --git a/src/signaturepad.scss b/src/signaturepad.scss
@@ -19,9 +19,17 @@
     justify-content: center;
 
     position: absolute;
-    z-index: 0;
+    z-index: 1;
     user-select: none;
     pointer-events: none;
     width: 100%;
     height: 100%;
 }
+
+.sjs_sp_canvas,
+.sjs_sp__background-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    object-fit: cover;
+}
diff --git a/src/vue/signaturepad.vue b/src/vue/signaturepad.vue
@@ -6,11 +6,11 @@
       width: question.signatureWidth + 'px',
     }"
   >
-    <div :class="question.cssClasses.placeholder" v-show="question.needShowPlaceholder()">
-      {{ question.placeHolderText }}
-    </div>
+    <div :class="question.cssClasses.placeholder" v-show="question.needShowPlaceholder()">{{ question.placeHolderText }}</div>
     <div>
-      <canvas tabindex="0"></canvas>
+      <img v-if="question.backgroundImage" :class="question.cssClasses.backgroundImage" :src="question.backgroundImage"
+      :width="question.signatureWidth" :height="question.signatureHeight">
+      <canvas tabindex="0" :class="question.cssClasses.canvas"></canvas>
     </div>
     <div :class="question.cssClasses.controls" v-if="question.canShowClearButton">
       <button

diff --git a/tests/markup/etalon.ts b/tests/markup/etalon.ts
@@ -20,6 +20,7 @@ export * from "./etalon_matrixdropdown";
 export * from "./etalon_matrixdynamic";
 export * from "./etalon_question";
 export * from "./etalon_survey";
+export * from "./etalon_signaturepad";
 export { markupTests } from "./helper";
 
 registerMarkupTests([

diff --git a/tests/markup/etalon_signaturepad.ts b/tests/markup/etalon_signaturepad.ts
@@ -0,0 +1,33 @@
+import { registerMarkupTests } from "./helper";
+
+registerMarkupTests(
+  [
+    {
+      name: "Test Signaturepad question markup",
+      json: {
+        questions: [
+          {
+            type: "signaturepad",
+            name: "q1",
+            titleLocation: "hidden",
+          }
+        ]
+      },
+      snapshot: "signaturepad"
+    },
+    {
+      name: "Test Signaturepad question with backgroundImage",
+      json: {
+        questions: [
+          {
+            "type": "signaturepad",
+            "name": "q1",
+            titleLocation: "hidden",
+            "backgroundImage": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
+          }
+        ]
+      },
+      snapshot: "signaturepad-with-backgroundImage"
+    }
+  ]
+);
diff --git a/tests/markup/helper.ts b/tests/markup/helper.ts
@@ -353,6 +353,12 @@ function sortInlineStyles(str: string) {
   div.querySelectorAll("*").forEach(el => {
     if(!!el.getAttribute("style")) {
       const inlineStyle = (<string>el.getAttribute("style")).replace(/(;)\s+|;$/g, "$1").split(/;(?![^(]*\))/);
+      if(el.tagName === "CANVAS") {
+        const excludeStyle = "touch-action: none";
+        if(inlineStyle.indexOf(excludeStyle) !== -1) {
+          inlineStyle.splice(inlineStyle.indexOf(excludeStyle), 1);
+        }
+      }
       const flexRules = ["flex-grow", "flex-shrink", "flex-basis"];
       const flexStyles: Array<string> = [];
       flexRules.forEach(rule => {

diff --git a/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html b/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html
@@ -0,0 +1,13 @@
+<div class="sjs_sp_container sv_q_signaturepad" style="height:200px; width:300px;">
+	<div class="sjs_sp_placeholder">Sign here</div>
+	<div>
+		<img class="sjs_sp__background-image" height="200" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" width="300">
+			<canvas class="sjs_sp_canvas" height="200" style="height:200px; user-select:none; width:300px;" tabindex="0" width="300">
+			</canvas>
+		</div>
+		<div class="sjs_sp_controls">
+			<button class="sjs_sp_clear" title="Clear" type="button">
+				<span>✖</span>
+			</button>
+		</div>
+	</div>
diff --git a/tests/markup/snapshots/signaturepad.snap.html b/tests/markup/snapshots/signaturepad.snap.html
@@ -0,0 +1,12 @@
+<div class="sjs_sp_container sv_q_signaturepad" style="height:200px; width:300px;">
+	<div class="sjs_sp_placeholder">Sign here</div>
+	<div>
+		<canvas class="sjs_sp_canvas" height="200" style="height:200px; user-select:none; width:300px;" tabindex="0" width="300">
+		</canvas>
+	</div>
+	<div class="sjs_sp_controls">
+		<button class="sjs_sp_clear" title="Clear" type="button">
+			<span>✖</span>
+		</button>
+	</div>
+</div>