HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 11:10:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix sketchpad plugin bugs

Browse Source
This commit is contained in:
Josh de Leeuw 2021-12-14 09:22:00 -05:00
parent 3cc1ba3368
commit 76ec31f224
4 changed files with 77 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/serious-pumas-share.md Normal file
View File

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

3
examples/jspsych-sketchpad.html
View File

@ -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 = {

64
packages/plugin-sketchpad/src/index.spec.ts
View File

@ -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();
});
});

10
packages/plugin-sketchpad/src/index.ts
View File

@ -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();
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<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;
}
}