[ENH] Adding Canvas Input to Capture User Drawings

[bendhouseart]

This adds the canvas element to capture user inputs via drawing for protocols such as MOCA.

[Copilot]

Pull Request Overview

This PR adds a canvas element to capture user drawings as part of the MOCA protocol input. Key changes include updating configuration (githubSrc) for image sourcing, integrating and implementing a new CanvasInput component for drawing input, and updating the InputSelector to conditionally render the canvas input.

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/config.js	Updated githubSrc URL to a localhost endpoint for development use.
src/components/SurveyItem/SurveyItem.vue	Added a uiConfig computed property and debug logging for background Image.
src/components/Inputs/CanvasInput/CanvasInput.vue	New component implementation for canvas drawing input using bootstrap-vue.
src/components/InputSelector/InputSelector.vue	Integrated CanvasInput component as an additional input option.
src/components/CanvasInput.vue	Alternative CanvasInput implementation using plain HTML/CSS.
babel.config.js	Reformatted preset configuration for babel.

Comments suppressed due to low confidence (1)

src/components/CanvasInput.vue:1

• There appear to be two components named 'CanvasInput' in different directories; consider renaming one to reduce possible confusion during component registration and maintenance.

<template>

[Copilot]

If this URL is intended for local development only, consider using an environment variable to manage different endpoints (development versus production) to avoid misconfiguration in production.

Suggested change

	githubSrc: 'http://localhost:3000/DemoProtocol/DemoProtocol_schema',
	githubSrc: process.env.GITHUB_SRC || 'http://localhost:3000/DemoProtocol/DemoProtocol_schema',

[Copilot]

[nitpick] Consider removing or conditionally enabling console.log statements before production to avoid exposing internal data and to reduce console clutter.

Suggested change

	console.log('SurveyItem processActivityData - data:', this.data);
	console.log('SurveyItem processActivityData - backgroundImage:', this.data['http://schema.repronim.org/backgroundImage']);
	if (process.env.NODE_ENV === 'development') {
	console.log('SurveyItem processActivityData - data:', this.data);
	}
	if (process.env.NODE_ENV === 'development') {
	console.log('SurveyItem processActivityData - backgroundImage:', this.data['http://schema.repronim.org/backgroundImage']);
	}

[yibeichan]

@bendhouseart, thanks for the PR! We need to fix the relative path for importing StudySign. Remember when we looked at your files together, StudySign was in the wrong position. Probably that's why the CI failed.
Also, if you have a chance, would you like to add a PR to demo-protocol with your new component as well, or is it private that cannot be pushed (you mentioned this...)