fix sketchpad plugin bugs

.changeset/serious-pumas-share.md

@@ -0,0 +1,5 @@
+---
+"@jspsych/plugin-sketchpad": patch
+---
+
+Fixed several bugs in the sketchpad plugin. See #2399 for list.

examples/jspsych-sketchpad.html

@@ -20,7 +20,8 @@
       prompt_location: 'abovecanvas',
       canvas_width: 300,
       canvas_height: 300,
-      canvas_border_width: 2
+      canvas_border_width: 2,
+      show_redo_button: false,
     }
 
     var trial2 = {

packages/plugin-sketchpad/src/index.spec.ts

@@ -148,4 +148,68 @@ describe("sketchpad", () => {
     clickTarget(displayElement.querySelector("#sketchpad-end"));
     await expectFinished();
   });
+
+  test("redo_button_label changes text", async () => {
+    const { displayElement, getHTML, expectFinished } = await startTimeline([
+      {
+        type: sketchpad,
+        redo_button_label: "foo",
+      },
+    ]);
+
+    const button = displayElement.querySelector("#sketchpad-redo");
+
+    expect(button.innerHTML).toBe("foo");
+
+    clickTarget(displayElement.querySelector("#sketchpad-end"));
+    await expectFinished();
+  });
+
+  test("undo_button_label changes text", async () => {
+    const { displayElement, getHTML, expectFinished } = await startTimeline([
+      {
+        type: sketchpad,
+        undo_button_label: "foo",
+      },
+    ]);
+
+    const button = displayElement.querySelector("#sketchpad-undo");
+
+    expect(button.innerHTML).toBe("foo");
+
+    clickTarget(displayElement.querySelector("#sketchpad-end"));
+    await expectFinished();
+  });
+
+  test("clear_button_label changes text", async () => {
+    const { displayElement, getHTML, expectFinished } = await startTimeline([
+      {
+        type: sketchpad,
+        clear_button_label: "foo",
+      },
+    ]);
+
+    const button = displayElement.querySelector("#sketchpad-clear");
+
+    expect(button.innerHTML).toBe("foo");
+
+    clickTarget(displayElement.querySelector("#sketchpad-end"));
+    await expectFinished();
+  });
+
+  test("finished_button_label changes text", async () => {
+    const { displayElement, getHTML, expectFinished } = await startTimeline([
+      {
+        type: sketchpad,
+        finished_button_label: "foo",
+      },
+    ]);
+
+    const button = displayElement.querySelector("#sketchpad-end");
+
+    expect(button.innerHTML).toBe("foo");
+
+    clickTarget(displayElement.querySelector("#sketchpad-end"));
+    await expectFinished();
+  });
 });

packages/plugin-sketchpad/src/index.ts

@@ -306,7 +306,7 @@ class SketchpadPlugin implements JsPsychPlugin<Info> {
 
     let finish_button_html = "";
     if (this.params.show_finished_button) {
-      finish_button_html = `<p id="finish-btn"><button class="jspsych-btn" id="sketchpad-end">Finished</button></p>`;
+      finish_button_html = `<p id="finish-btn"><button class="jspsych-btn" id="sketchpad-end">${this.params.finished_button_label}</button></p>`;
     }
 
     let timer_html = "";
@@ -545,7 +545,9 @@ class SketchpadPlugin implements JsPsychPlugin<Info> {
   private render_drawing() {
     this.ctx.clearRect(0, 0, this.sketchpad.width, this.sketchpad.height);
     this.add_background_color();
+    if (this.background_image) {
       this.ctx.drawImage(this.background_image, 0, 0);
+    }
     for (const stroke of this.strokes) {
       for (const m of stroke) {
         if (m.action == "start") {
@@ -597,13 +599,13 @@ class SketchpadPlugin implements JsPsychPlugin<Info> {
   }
 
   private set_redo_btn_state(enabled: boolean) {
-    if (this.params.show_redo_button) {
+    if (this.params.show_undo_button && this.params.show_redo_button) {
       (this.display.querySelector("#sketchpad-redo") as HTMLButtonElement).disabled = !enabled;
     }
   }
 
   private set_clear_btn_state(enabled: boolean) {
-    if (this.params.show_redo_button) {
+    if (this.params.show_clear_button) {
       (this.display.querySelector("#sketchpad-clear") as HTMLButtonElement).disabled = !enabled;
     }
   }