diff --git a/.changeset/serious-pumas-share.md b/.changeset/serious-pumas-share.md new file mode 100644 index 00000000..9a3a5755 --- /dev/null +++ b/.changeset/serious-pumas-share.md @@ -0,0 +1,5 @@ +--- +"@jspsych/plugin-sketchpad": patch +--- + +Fixed several bugs in the sketchpad plugin. See #2399 for list. diff --git a/examples/jspsych-sketchpad.html b/examples/jspsych-sketchpad.html index a5958b17..985a32aa 100644 --- a/examples/jspsych-sketchpad.html +++ b/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 = { diff --git a/packages/plugin-sketchpad/src/index.spec.ts b/packages/plugin-sketchpad/src/index.spec.ts index 87dbe576..1bc6299e 100644 --- a/packages/plugin-sketchpad/src/index.spec.ts +++ b/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(); + }); }); diff --git a/packages/plugin-sketchpad/src/index.ts b/packages/plugin-sketchpad/src/index.ts index 06e5c565..09ebe1d1 100644 --- a/packages/plugin-sketchpad/src/index.ts +++ b/packages/plugin-sketchpad/src/index.ts @@ -306,7 +306,7 @@ class SketchpadPlugin implements JsPsychPlugin { let finish_button_html = ""; if (this.params.show_finished_button) { - finish_button_html = `

`; + finish_button_html = `

`; } let timer_html = ""; @@ -545,7 +545,9 @@ class SketchpadPlugin implements JsPsychPlugin { private render_drawing() { this.ctx.clearRect(0, 0, this.sketchpad.width, this.sketchpad.height); this.add_background_color(); - this.ctx.drawImage(this.background_image, 0, 0); + 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 { } 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; } }