${title}
${title}
`; + markup += ""; + markup += "Fields marked with an asterisk (*) are required.
"; } + markup += "${error.title}
${error.text}
`; + markup += "Error
Unfortunately we encountered the following error:
`; markup += stackCode; markup += "Try to run the experiment again. If the error persists, contact the experiment designer.
"; + markup += "Warning
${warning}
`; + markup += "Message
Message
${message}
`; + markup += "Window displays the various stimuli of the experiment.
@@ -58,6 +59,8 @@ export class Window extends PsychObject * @param {string} [options.name] the name of the window * @param {boolean} [options.fullscr= false] whether or not to go fullscreen * @param {Color} [options.color= Color('black')] the background color of the window + * @param {string | HTMLImageElement} [options.backgroundImage = ""] - background image of the window. + * @param {string} [options.backgroundFit = "cover"] - how to fit background image in the window. * @param {number} [options.gamma= 1] sets the divisor for gamma correction. In other words gamma correction is calculated as pow(rgb, 1/gamma) * @param {number} [options.contrast= 1] sets the contrast value * @param {string} [options.units= 'pix'] the units of the window @@ -70,6 +73,8 @@ export class Window extends PsychObject name, fullscr = false, color = new Color("black"), + backgroundImage = "", + backgroundFit = "cover", gamma = 1, contrast = 1, units = "pix", @@ -92,11 +97,7 @@ export class Window extends PsychObject this._drawList = []; this._addAttribute("fullscr", fullscr); - this._addAttribute("color", color, new Color("black"), () => { - if (this._backgroundSprite) { - this._backgroundSprite.tint = this._color.int; - } - }); + this._addAttribute("color", color, new Color("black")); this._addAttribute("gamma", gamma, 1, () => { this._adjustmentFilter.gamma = this._gamma; }); @@ -107,6 +108,8 @@ export class Window extends PsychObject this._addAttribute("waitBlanking", waitBlanking); this._addAttribute("autoLog", autoLog); this._addAttribute("size", []); + this._addAttribute("backgroundImage", backgroundImage, ""); + this._addAttribute("backgroundFit", backgroundFit, "cover"); // setup PIXI: this._setupPixi(); @@ -138,6 +141,12 @@ export class Window extends PsychObject } } + static BACKGROUND_FIT_ENUM = { + cover: 0, + contain: 1, + auto: 2 + }; + /** * Close the window. * @@ -151,7 +160,7 @@ export class Window extends PsychObject } this._rootContainer.destroy(); - + if (document.body.contains(this._renderer.view)) { document.body.removeChild(this._renderer.view); @@ -165,7 +174,6 @@ export class Window extends PsychObject } this._renderer.destroy(); - window.removeEventListener("resize", this._resizeCallback); window.removeEventListener("orientationchange", this._resizeCallback); @@ -181,7 +189,7 @@ export class Window extends PsychObject { // gets updated frame by frame const lastDelta = this.psychoJS.scheduler._lastDelta; - const fps = lastDelta === 0 ? 60.0 : 1000 / lastDelta; + const fps = (lastDelta === 0) ? 60.0 : (1000.0 / lastDelta); return fps; } @@ -315,7 +323,7 @@ export class Window extends PsychObject */ removePixiObject(pixiObject) { - this._stimsContainer.removeChild(pixiObject); + this._stimsContainer.removeChild(pixiObject); } /** @@ -360,6 +368,134 @@ export class Window extends PsychObject this._refresh(); } + /** + * Set background image of the window. + * + * @name module:core.Window#setBackgroundImage + * @function + * @public + * @param {string} backgroundImage - name of the image resource (should be one specified in resource manager) + * @param {boolean} log - whether or not to log + */ + setBackgroundImage (backgroundImage = "", log = false) + { + this._setAttribute("backgroundImage", backgroundImage, log); + + if (this._backgroundSprite === undefined) + { + return; + } + + let imgResource = backgroundImage; + + if (this._backgroundSprite instanceof PIXI.Sprite && this._backgroundSprite.texture !== PIXI.Texture.WHITE) + { + this._backgroundSprite.texture.destroy(true); + } + + if (typeof backgroundImage === "string" && backgroundImage.length > 0) + { + imgResource = this.psychoJS.serverManager.getResource(backgroundImage); + } + + if (imgResource instanceof HTMLImageElement) + { + const texOpts = + { + scaleMode: PIXI.SCALE_MODES.LINEAR + }; + this._backgroundSprite.texture = new PIXI.Texture(new PIXI.BaseTexture(imgResource, texOpts)); + this._backgroundSprite.tint = 0xffffff; + this.backgroundFit = this._backgroundFit; + } + else + { + this._backgroundSprite.texture = PIXI.Texture.WHITE; + this._backgroundSprite.width = this._size[0]; + this._backgroundSprite.height = this._size[1]; + this._backgroundSprite.anchor.set(.5); + this.color = this._color; + } + } + + /** + * Set fit mode for background image of the window. + * + * @name module:core.Window#setBackgroundFit + * @function + * @public + * @param {string} [backgroundFit = "cover"] - fit mode for background image ["cover", "contain", "scaledown", "none"]. + * @param {boolean} log - whether or not to log + */ + setBackgroundFit (backgroundFit = "cover", log = false) + { + if (this._backgroundImage === "") + { + return; + } + + const backgroundFitCode = Window.BACKGROUND_FIT_ENUM[backgroundFit.replace("-", "").toLowerCase()]; + + if (backgroundFitCode === undefined) + { + return; + } + + this._setAttribute("backgroundFit", backgroundFit, log); + const backgroundAspectRatio = this._backgroundSprite.texture.width / this._backgroundSprite.texture.height; + const windowAspectRatio = this._size[0] / this._size[1]; + + if (backgroundFitCode === Window.BACKGROUND_FIT_ENUM.cover) + { + if (windowAspectRatio >= backgroundAspectRatio) + { + this._backgroundSprite.width = this._size[0]; + this._backgroundSprite.height = this._size[0] / backgroundAspectRatio; + } + else + { + this._backgroundSprite.height = this._size[1]; + this._backgroundSprite.width = this._size[1] * backgroundAspectRatio; + } + } + else if (backgroundFitCode === Window.BACKGROUND_FIT_ENUM.contain) + { + if (windowAspectRatio >= backgroundAspectRatio) + { + this._backgroundSprite.height = this._size[1]; + this._backgroundSprite.width = this._size[1] * backgroundAspectRatio; + } + else + { + this._backgroundSprite.width = this._size[0]; + this._backgroundSprite.height = this._size[0] / backgroundAspectRatio; + } + } + else if (backgroundFitCode === Window.BACKGROUND_FIT_ENUM.auto) + { + this._backgroundSprite.width = this._backgroundSprite.texture.width; + this._backgroundSprite.height = this._backgroundSprite.texture.height; + } + } + + /** + * Set foreground color value for the window. + * + * @name module:visual.Window#setColor + * @public + * @param {Color} colorVal - color value, can be String like "red" or "#ff0000" or Number like 0xff0000. + * @param {boolean} [log= false] - whether of not to log + */ + setColor(colorVal = "white", log = false) + { + const colorObj = (colorVal instanceof Color) ? colorVal : new Color(colorVal, Color.COLOR_SPACE.RGB); + this._setAttribute("color", colorObj, log); + if (this._backgroundSprite && !this._backgroundImage) + { + this._backgroundSprite.tint = this._color.int; + } + } + /** * Update this window, if need be. * @@ -372,7 +508,7 @@ export class Window extends PsychObject if (this._renderer) { this._renderer.backgroundColor = this._color.int; - this._backgroundSprite.tint = this._color.int; + this.color = this._color; } // we also change the background color of the body since @@ -466,6 +602,7 @@ export class Window extends PsychObject // background sprite so that if we need to move all stims at once, the background sprite // won't get affected. this._backgroundSprite = new PIXI.Sprite(PIXI.Texture.WHITE); + this._backgroundSprite.scale.y = -1; this._backgroundSprite.tint = this.color.int; this._backgroundSprite.width = this._size[0]; this._backgroundSprite.height = this._size[1]; @@ -476,11 +613,11 @@ export class Window extends PsychObject // create a top-level PIXI container: this._rootContainer = new PIXI.Container(); this._rootContainer.addChild(this._backgroundSprite, this._stimsContainer); - + // sorts children according to their zIndex value. Higher zIndex means it will be moved towards the end of the array, // and thus rendered on top of previous one. this._rootContainer.sortableChildren = true; - + this._rootContainer.interactive = true; this._rootContainer.filters = [this._adjustmentFilter]; @@ -489,17 +626,7 @@ export class Window extends PsychObject // touch/mouse events are treated by PsychoJS' event manager: this.psychoJS.eventManager.addMouseListeners(this._renderer); - - // update the renderer size and the Window's stimuli whenever the browser's size or orientation change: - this._resizeCallback = (e) => - { - Window._resizePixiRenderer(this, e); - this._backgroundSprite.width = this._size[0]; - this._backgroundSprite.height = this._size[1]; - this._fullRefresh(); - }; - window.addEventListener("resize", this._resizeCallback); - window.addEventListener("orientationchange", this._resizeCallback); + this._addEventListeners(); } /** @@ -532,6 +659,87 @@ export class Window extends PsychObject pjsWindow._rootContainer.scale.y = -1; } + _handlePointerDown (e) + { + let i; + let pickedPixi; + let tmpPoint = new PIXI.Point(); + const cursorPos = new PIXI.Point(e.pageX, e.pageY); + for (i = this._stimsContainer.children.length - 1; i >= 0; i--) + { + if (typeof this._stimsContainer.children[i].containsPoint === "function" && + this._stimsContainer.children[i].containsPoint(cursorPos)) + { + pickedPixi = this._stimsContainer.children[i]; + break; + } + else if (this._stimsContainer.children[i].containsPoint === undefined && + this._stimsContainer.children[i] instanceof PIXI.DisplayObject) + { + this._stimsContainer.children[i].worldTransform.applyInverse(cursorPos, tmpPoint); + if (this._stimsContainer.children[i].getLocalBounds().contains(tmpPoint.x, tmpPoint.y)) + { + pickedPixi = this._stimsContainer.children[i]; + break; + } + } + } + this.emit("pointerdown", { + pixi: pickedPixi, + originalEvent: e + }); + } + + _handlePointerUp (e) + { + this.emit("pointerup", { + originalEvent: e + }); + } + + _handlePointerMove (e) + { + this.emit("pointermove", { + originalEvent: e + }); + } + + _addEventListeners () + { + this._renderer.view.addEventListener("pointerdown", this._handlePointerDown.bind(this)); + this._renderer.view.addEventListener("pointerup", this._handlePointerUp.bind(this)); + this._renderer.view.addEventListener("pointermove", this._handlePointerMove.bind(this)); + + // update the renderer size and the Window's stimuli whenever the browser's size or orientation change: + this._resizeCallback = (e) => + { + // if the user device is a mobile phone or tablet (we use the presence of a touch screen as a + // proxy), we need to detect whether the change in size is due to the appearance of a virtual keyboard + // in which case we do not want to resize the canvas. This is rather tricky and so we resort to + // the below trick. It would be better to use the VirtualKeyboard API, but it is not widely + // available just yet, as of 2023-06. + const keyboardHeight = 300; + if (hasTouchScreen() && (window.screen.height - window.visualViewport.height) > keyboardHeight) + { + return; + } + + Window._resizePixiRenderer(this, e); + if (this._backgroundImage === undefined) + { + this._backgroundSprite.width = this._size[0]; + this._backgroundSprite.height = this._size[1]; + } + else + { + this.backgroundFit = this._backgroundFit; + } + this._fullRefresh(); + }; + window.addEventListener("resize", this._resizeCallback); + window.addEventListener("orientationchange", this._resizeCallback); + } + /** * Send all logged messages to the {@link Logger}. * diff --git a/src/data/ExperimentHandler.js b/src/data/ExperimentHandler.js index 7a30578..97692b5 100644 --- a/src/data/ExperimentHandler.js +++ b/src/data/ExperimentHandler.js @@ -276,6 +276,7 @@ export class ExperimentHandler extends PsychObject } let data = this._trialsData; + // if the experiment data have to be cleared, we first make a copy of them: if (clear) { @@ -351,6 +352,19 @@ export class ExperimentHandler extends PsychObject } } + /** + * Get the results of the experiment as a .csv string, ready to be uploaded or stored. + * + * @return {string} a .csv representation of the experiment results. + */ + getResultAsCsv() + { + // note: we use the XLSX library as it automatically deals with header, takes care of quotes, + // newlines, etc. + const worksheet = XLSX.utils.json_to_sheet(this._trialsData); + return "\ufeff" + XLSX.utils.sheet_to_csv(worksheet); + } + /** * Get the attribute names and values for the current trial of a given loop. *Only info relating to the trial execution are returned.
diff --git a/src/index.css b/src/index.css index c903ea8..9ed941f 100644 --- a/src/index.css +++ b/src/index.css @@ -13,7 +13,7 @@ body { /* Initialisation message (which will disappear behind the canvas) */ #root::after { - content: "initialising the experiment..."; + content: "initialising..."; position: fixed; top: 50%; left: 50%; @@ -26,13 +26,12 @@ body { /* Project and resource dialogs */ - .dialog-container label, .dialog-container input, .dialog-container select { - box-sizing: border-box; - display: block; - padding-bottom: 0.5em; + box-sizing: border-box; + display: block; + padding-bottom: 0.5em; } .dialog-container input.text, @@ -40,6 +39,13 @@ body { margin-bottom: 1em; padding: 0.5em; width: 100%; + + height: 34px; + border: 1px solid #767676; + border-radius: 2px; + background: #ffffff; + color: #333; + font-size: 14px; } .dialog-container fieldset { @@ -71,12 +77,19 @@ body { } .dialog-content { + display: flex; + flex-direction: column; + row-gap: 0; + margin: auto; z-index: 2; position: relative; width: 500px; max-width: 88vw; + /*max-height: 90vh;*/ + max-height: 93%; + padding: 0.5em; border-radius: 2px; @@ -88,11 +101,24 @@ body { box-shadow: 1px 1px 3px #555555; } +.dialog-content .scrollable-container { + height: 100%; + padding: 0 0.5em; + + overflow-x: hidden; + overflow-y: auto; +} + +.dialog-content hr { + width: 100%; +} + .dialog-title { padding: 0.5em; margin-bottom: 1em; - background-color: #009900; + background-color: #00dd00; + /*background-color: #009900;*/ border-radius: 2px; } @@ -111,6 +137,11 @@ body { } .dialog-close { + display: flex; + justify-content: center; + align-items: center; + line-height: 1.1em; + position: absolute; top: 0.7em; right: 0.7em; @@ -153,7 +184,7 @@ body { .dialog-button { padding: 0.5em 1em 0.5em 1em; - margin: 0.5em 0.5em 0.5em 0; + /*margin: 0.5em 0.5em 0.5em 0;*/ border: 1px solid #555555; border-radius: 2px; @@ -176,6 +207,14 @@ body { border: 1px solid #000000; } +.dialog-button-group { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + column-gap: 0.5em; +} + .disabled { border: 1px solid #AAAAAA; color: #AAAAAA; @@ -186,10 +225,15 @@ body { } .logo { - display: block; + display: flex; + flex: 0 1 auto; + height: 100%; + width: auto; + + /*display: block; margin: 0 auto 1em; max-height: 20vh; - max-width: 100%; + max-width: 100%;*/ } a, @@ -204,3 +248,30 @@ a:hover { color: #000; } +.yt-iframe { + display: block; + position: absolute; + border: none; +} + +.yt-player-wrapper { + display: flex; + justify-content: center; + align-items: center; +} + +.yt-player-wrapper.hidden { + display: none; +} + +.yt-player-wrapper.inprogress:after { + content: "loading youtube..."; + display: flex; + position: absolute; + color: white; + background: black; + padding: 10px; + justify-content: center; + align-items: center; +} + diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..b5170ad --- /dev/null +++ b/src/index.html @@ -0,0 +1,14 @@ + + + + + +Note: tasks are run after each animation frame.
+ * + * @return {PromiseSee details here: https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
* * @param {Object[]} array - the input 1-D array - * @param {Function} [randomNumberGenerator = undefined] - A function used to generated random numbers in the interal [0, 1). Defaults to Math.random + * @param {Function} [randomNumberGenerator= undefined] - A function used to generated random numbers in the interval [0, 1). Defaults to Math.random + * @param [startIndex= undefined] - start index in the array + * @param [endIndex= undefined] - end index in the array * @return {Object[]} the shuffled array */ -export function shuffle(array, randomNumberGenerator = undefined) +export function shuffle(array, randomNumberGenerator = undefined, startIndex = undefined, endIndex = undefined) { - if (randomNumberGenerator === undefined) + // if array is not an array, we return it untouched rather than throwing an exception: + if (!array || !Array.isArray(array)) + { + return array; + } + + if (typeof startIndex === "undefined") + { + startIndex = 0; + } + if (typeof endIndex === "undefined") + { + endIndex = array.length - 1; + } + + if (typeof randomNumberGenerator === "undefined") { randomNumberGenerator = Math.random; } - for (let i = array.length - 1; i > 0; i--) + + for (let i = endIndex; i > startIndex; i--) { const j = Math.floor(randomNumberGenerator() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } + return array; } +/** + * linspace + * + * @name module:util.linspace + * @function + * @public + * @param {Object[]} startValue, stopValue, cardinality + * @return {Object[]} an array from startValue to stopValue with cardinality steps + */ +export function linspace(startValue, stopValue, cardinality) { + var arr = []; + var step = (stopValue - startValue) / (cardinality - 1); + for (var i = 0; i < cardinality; i++) { + arr.push(startValue + (step * i)); + } + return arr; +} + /** * Pick a random value from an array, uses `util.shuffle` to shuffle the array and returns the last value. * @@ -610,6 +647,11 @@ export function toString(object) return object.toString(); } + if (typeof object === "function") + { + return `ButtonStim visual stimulus.
@@ -32,11 +33,13 @@ export class ButtonStim extends TextBox * @param {Color} [options.borderColor= Color("white")] the border color * @param {Color} [options.borderWidth= 0] the border width * @param {number} [options.opacity= 1.0] - the opacity + * @param {number} [options.depth= 0] - the depth (i.e. the z order) * @param {number} [options.letterHeight= undefined] - the height of the text * @param {boolean} [options.bold= true] - whether or not the text is bold * @param {boolean} [options.italic= false] - whether or not the text is italic * @param {boolean} [options.autoDraw= false] - whether or not the stimulus should be automatically drawn on every frame flip * @param {boolean} [options.autoLog= false] - whether or not to log + * @param {boolean} [options.draggable= false] - whether or not to make stim draggable with mouse/touch/other pointer device */ constructor( { @@ -54,11 +57,15 @@ export class ButtonStim extends TextBox borderColor, borderWidth = 0, opacity, + depth, letterHeight, bold = true, italic, autoDraw, autoLog, + draggable, + boxFn, + multiline } = {}, ) { @@ -77,12 +84,16 @@ export class ButtonStim extends TextBox borderColor, borderWidth, opacity, + depth, letterHeight, + multiline, bold, italic, alignment: "center", autoDraw, autoLog, + draggable, + boxFn }); this.psychoJS.logger.debug("create a new Button with name: ", name); @@ -112,7 +123,7 @@ export class ButtonStim extends TextBox if (this._autoLog) { - this._psychoJS.experimentLogger.exp(`Created ${this.name} = ${this.toString()}`); + this._psychoJS.experimentLogger.exp(`Created ${this.name} = ${util.toString(this)}`); } } diff --git a/src/visual/FaceDetector.js b/src/visual/FaceDetector.js index a4ce95c..92f518f 100644 --- a/src/visual/FaceDetector.js +++ b/src/visual/FaceDetector.js @@ -42,10 +42,11 @@ export class FaceDetector extends VisualStim * @param {number} [options.opacity= 1.0] - the opacity * @param {boolean} [options.autoDraw= false] - whether or not the stimulus should be automatically drawn on every frame flip * @param {boolean} [options.autoLog= false] - whether or not to log + * @param {boolean} [options.draggable= false] - whether or not to make stim draggable with mouse/touch/other pointer device */ - constructor({name, win, input, modelDir, faceApiUrl, units, ori, opacity, pos, size, autoDraw, autoLog} = {}) + constructor({name, win, input, modelDir, faceApiUrl, units, ori, opacity, pos, size, autoDraw, autoLog, draggable} = {}) { - super({name, win, units, ori, opacity, pos, size, autoDraw, autoLog}); + super({name, win, units, ori, opacity, pos, size, autoDraw, autoLog, draggable}); // TODO deal with onChange (see MovieStim and Camera) this._addAttribute("input", input, undefined); diff --git a/src/visual/Form.js b/src/visual/Form.js index abe6281..f262a2e 100644 --- a/src/visual/Form.js +++ b/src/visual/Form.js @@ -54,6 +54,7 @@ export class Form extends util.mix(VisualStim).with(ColorMixin) * @param {boolean} [options.autoDraw= false] - whether or not the stimulus should be automatically drawn on every * frame flip * @param {boolean} [options.autoLog= false] - whether or not to log + * @param {boolean} [options.draggable= false] - whether or not to make stim draggable with mouse/touch/other pointer device */ constructor( { @@ -82,10 +83,11 @@ export class Form extends util.mix(VisualStim).with(ColorMixin) clipMask, autoDraw, autoLog, + draggable } = {}, ) { - super({ name, win, units, opacity, depth, pos, size, clipMask, autoDraw, autoLog }); + super({ name, win, units, opacity, depth, pos, size, clipMask, autoDraw, autoLog, draggable }); this._addAttribute( "itemPadding", diff --git a/src/visual/GifStim.js b/src/visual/GifStim.js new file mode 100644 index 0000000..59dc135 --- /dev/null +++ b/src/visual/GifStim.js @@ -0,0 +1,515 @@ +/** + * Gif Stimulus. + * + * @author Nikita Agafonov + * @version 2022.2.0 + * @copyright (c) 2020-2022 Open Science Tools Ltd. (https://opensciencetools.org) + * @license Distributed under the terms of the MIT License + */ + +import * as PIXI from "pixi.js-legacy"; +import { Color } from "../util/Color.js"; +import { ColorMixin } from "../util/ColorMixin.js"; +import { to_pixiPoint } from "../util/Pixi.js"; +import * as util from "../util/Util.js"; +import { VisualStim } from "./VisualStim.js"; +import {Camera} from "../hardware"; +// import { parseGIF, decompressFrames } from "gifuct-js"; +import { AnimatedGIF } from "./AnimatedGIF.js"; +import { parseGIF, decompressFrames } from "../util/GifParser.js"; + +/** + * Gif Stimulus. + * + * @name module:visual.GifStim + * @class + * @extends VisualStim + * @mixes ColorMixin + * @param {Object} options + * @param {String} options.name - the name used when logging messages from this stimulus + * @param {Window} options.win - the associated Window + * @param {boolean} options.precomputeFrames - compute full frames of the GIF and store them. Setting this to true will take the load off the CPU + * @param {string | HTMLImageElement} options.image - the name of the image resource or the HTMLImageElement corresponding to the image + * @param {string | HTMLImageElement} options.mask - the name of the mask resource or HTMLImageElement corresponding to the mask + * but GIF will take longer to load and occupy more memory space. In case when there's not enough CPU peformance (e.g. due to large amount of GIFs + * playing simultaneously or heavy load elsewhere in experiment) and you don't care much about app memory usage, use this flag to easily gain more performance. + * @param {string} [options.units= "norm"] - the units of the stimulus (e.g. for size, position, vertices) + * @param {Array.Note: seek is experimental and does not work on all browsers at the moment.
* * @param {number} timePoint - the timepoint to which to jump (in second) - * @param {boolean} [log= false] - whether of not to log + * @param {boolean} [log= false] - whether or not to log */ seek(timePoint, log = false) { - if (timePoint < 0 || timePoint > this._movie.duration) + if (this._movie !== undefined) { - throw { - origin: "MovieStim.seek", - context: `when seeking to timepoint: ${timePoint} of MovieStim: ${this._name}`, - error: `the timepoint does not belong to [0, ${this._movie.duration}`, - }; - } - - if (this._hasFastSeek) - { - this._movie.fastSeek(timePoint); - } - else - { - try - { - this._movie.currentTime = timePoint; - } - catch (error) + if (timePoint < 0 || timePoint > this._movie.duration) { throw { origin: "MovieStim.seek", context: `when seeking to timepoint: ${timePoint} of MovieStim: ${this._name}`, - error, + error: `the timepoint does not belong to [0, ${this._movie.duration}`, }; } + + if (this._hasFastSeek) + { + this._movie.fastSeek(timePoint); + } + else + { + try + { + this._movie.currentTime = timePoint; + } + catch (error) + { + throw { + origin: "MovieStim.seek", + context: `when seeking to timepoint: ${timePoint} of MovieStim: ${this._name}`, + error, + }; + } + } + } + else if (this._youtubePlayer !== undefined && this._ytPlayerIsReady) + { + this._youtubePlayer.seekTo(timePoint); } } /** - * Estimate the bounding box. + * Get the elapsed time in seconds since the video started playing. * - * @override - * @protected + * @return {number} playback time. + */ + getPlaybackTime () + { + if (this._movie !== undefined) + { + return this._movie.currentTime; + } + else if (this._youtubePlayer !== undefined && this._ytPlayerIsReady) + { + return this._youtubePlayer.getCurrentTime(); + } + + return 0; + } + + /** + * Applies given size values to underlying pixi component of the stim. + * + * @param {Array} size + */ + _applySizeToPixi(size) + { + const size_px = util.to_px(size, this._units, this._win); + const scaleX = size_px[0] / this._movie.videoWidth; + const scaleY = size_px[1] / this._movie.videoHeight; + this._pixi.scale.x = this.flipHoriz ? -scaleX : scaleX; + this._pixi.scale.y = this.flipVert ? scaleY : -scaleY; + } + + /** + * Applies given size values to youtube iframe. + * + * @param {*} size + */ + _applySizeToYoutubeIframe(size) + { + const size_px = util.to_px(size, this._units, this._win); + this._youtubePlayer.setSize(size_px[ 0 ], size_px[ 1 ]); + } + + /** + * Ensures to convert NaN in the size values to proper, numerical values using given texture dimensions. + * + * @param {Array} size + */ + _ensureNaNSizeConversion(size, html5Video) + { + if (Number.isNaN(size[0]) && Number.isNaN(size[1])) + { + size = util.to_unit([html5Video.videoWidth, html5Video.videoHeight], "pix", this._win, this._units); + } + else if (Number.isNaN(size[0])) + { + size[0] = size[1] * (html5Video.videoWidth / html5Video.videoHeight); + } + else if (Number.isNaN(size[1])) + { + size[1] = size[0] / (html5Video.videoWidth / html5Video.videoHeight); + } + + return size; + } + + /** + * Estimate the bounding box. */ _estimateBoundingBox() { @@ -425,16 +846,10 @@ export class MovieStim extends VisualStim // opacity: this._pixi.alpha = this.opacity; - // set the scale: - const displaySize = this._getDisplaySize(); - const size_px = util.to_px(displaySize, this.units, this.win); - const scaleX = size_px[0] / this._pixiTextureResource.width; - const scaleY = size_px[1] / this._pixiTextureResource.height; - this._pixi.scale.x = this.flipHoriz ? -scaleX : scaleX; - this._pixi.scale.y = this.flipVert ? scaleY : -scaleY; - - this._pixi.width = size_px[0]; - this._pixi.height = size_px[1]; + // initial setSize might be called with incomplete values like [512, null]. + // Before texture is loaded they are converted to [512, NaN]. + // At this point the texture is loaded and we can convert NaN to proper values. + this.size = this._size; // set the position, rotation, and anchor (movie centered on pos): this._pixi.position = to_pixiPoint(this.pos, this.units, this.win); @@ -446,9 +861,11 @@ export class MovieStim extends VisualStim } /** - * Get the size of the display image, which is either that of the ImageStim or that of the image + * Get the size of the display image, which is either that of the MovieStim or that of the image * it contains. * + * @name module:visual.MovieStim#_getDisplaySize + * @private * @protected * @return {number[]} the size of the displayed image */ diff --git a/src/visual/ParticleEmitter.js b/src/visual/ParticleEmitter.js new file mode 100644 index 0000000..b0f1ed0 --- /dev/null +++ b/src/visual/ParticleEmitter.js @@ -0,0 +1,331 @@ +/** + * Particle Emitter. + * + * @author Nikita Agafonov + * @version 2023.2.0 + * @copyright (c) 2020-2023 Open Science Tools Ltd. (https://opensciencetools.org) + * @license Distributed under the terms of the MIT License + */ + +import * as PIXI from "pixi.js-legacy"; + +const DEFAULT_POOL_SIZE = 1024; +const DEFAULT_PARTICLE_WIDTH = 10; +const DEFAULT_PARTICLE_HEIGHT = 10; +const DEFAULT_PARTICLE_LIFETIME = 3; // Seconds. +const DEFAULT_PARTICLE_COLOR = 0xffffff; +const DEFAULT_PARTICLES_PER_SEC = 60; +const DEFAULT_PARTICLE_V = 100; + +class Particle +{ + constructor (cfg) + { + this.x = 0; + this.y = 0; + this.ax = 0; + this.ay = 0; + this.vx = 0; + this.vy = 0; + this.lifeTime = 0; + this.widthChange = 0; + this.heightChange = 0; + this.sprite = undefined; + this.inUse = false; + + if (cfg.particleImage !== undefined) + { + this.sprite = PIXI.Sprite.from(PIXI.Texture.from(cfg.particleImage)); + } + else + { + this.sprite = new PIXI.Sprite(PIXI.Texture.WHITE); + this.sprite.tint = cfg.particleColor || DEFAULT_PARTICLE_COLOR; + } + + // TODO: Should we instead incorporate that in position calculation? + // Consider: accurate spawn position of the particle confined by spawnArea. + this.sprite.anchor.set(0.5); + + this.width = cfg.particleWidth || DEFAULT_PARTICLE_WIDTH; + this.height = cfg.particleHeight || DEFAULT_PARTICLE_HEIGHT; + } + + set width (w) + { + this._width = w; + this.sprite.width = w; + } + + get width () + { + return this._width; + } + + set height (h) + { + this._height = h; + this.sprite.height = h; + } + + get height () + { + return this._height; + } + + update (dt) + { + const dt2 = dt * dt; + + // Update velocity with current acceleration. + this.vx += this.ax * dt; + this.vy += this.ay * dt; + + // Update position with current velocity and acceleration. + this.x = this.x + this.vx * dt + this.ax * dt2 * .5; + this.y = this.y + this.vy * dt + this.ay * dt2 * .5; + + this.sprite.rotation = Math.atan2(this.vy, this.vx); + + this.sprite.x = this.x; + this.sprite.y = this.y; + + if (this.width > 0) + { + this.width = Math.max(0, this.width + this.widthChange); + } + + if (this.height > 0) + { + this.height = Math.max(0, this.height + this.heightChange); + } + this.lifeTime -= dt; + + if (this.width <= 0 && this.height <= 0) + { + this.lifeTime = 0; + } + + if (this.lifeTime <= 0) + { + this.inUse = false; + } + } +} + +export class ParticleEmitter +{ + constructor (cfg = {}) + { + this.x = 0; + this.y = 0; + this._cfg = cfg; + this._particlesPerSec = cfg.particlesPerSec || DEFAULT_PARTICLES_PER_SEC; + this._spawnCoolDown = 0; + this._parentObj = undefined; + this._particlePool = new Array(DEFAULT_POOL_SIZE); + this.setParentObject(cfg.parentObject); + this._fillParticlePool(cfg); + } + + _fillParticlePool (cfg) + { + let i; + for (i = 0; i < this._particlePool.length; i++) + { + this._particlePool[i] = new Particle(cfg); + } + } + + _setupParticle (p) + { + let spawnAreaWidth = this._cfg.spawnAreaWidth || 0; + let spawnAreaHeight = this._cfg.spawnAreaHeight || 0; + + if (this._parentObj !== undefined && this._cfg.useParentSizeAsSpawnArea) + { + spawnAreaWidth = this._parentObj.width; + spawnAreaHeight = this._parentObj.height; + } + + const spawnOffsetX = Math.random() * spawnAreaWidth - spawnAreaWidth * .5; + const spawnOffsetY = Math.random() * spawnAreaHeight - spawnAreaHeight * .5; + const x = this.x + spawnOffsetX; + const y = this.y + spawnOffsetY; + + p.x = x; + p.y = y; + + p.ax = 0; + p.ay = 0; + + if (Number.isFinite(this._cfg.initialVx)) + { + p.vx = this._cfg.initialVx; + } + else if (this._cfg.initialVx instanceof Array && this._cfg.initialVx.length >= 2) + { + p.vx = Math.random() * (this._cfg.initialVx[1] - this._cfg.initialVx[0]) + this._cfg.initialVx[0]; + } + else + { + p.vx = Math.random() * DEFAULT_PARTICLE_V - DEFAULT_PARTICLE_V * .5; + } + + if (Number.isFinite(this._cfg.initialVy)) + { + p.vy = this._cfg.initialVy; + } + else if (this._cfg.initialVy instanceof Array && this._cfg.initialVy.length >= 2) + { + p.vy = Math.random() * (this._cfg.initialVy[1] - this._cfg.initialVy[0]) + this._cfg.initialVy[0]; + } + else + { + p.vy = Math.random() * DEFAULT_PARTICLE_V - DEFAULT_PARTICLE_V * .5; + } + + p.lifeTime = this._cfg.lifeTime || DEFAULT_PARTICLE_LIFETIME; + p.width = this._cfg.particleWidth || DEFAULT_PARTICLE_WIDTH; + p.height = this._cfg.particleHeight || DEFAULT_PARTICLE_HEIGHT; + p.widthChange = this._cfg.particleWidthChange || 0; + p.heightChange = this._cfg.particleHeightChange || 0; + + // TODO: run proper checks here. + if (this._cfg.particleImage) + { + p.sprite.texture = PIXI.Texture.from(this._cfg.particleImage); + } + else + { + p.sprite.texture = PIXI.Texture.WHITE; + } + + if (this._cfg.particleColor !== undefined) + { + p.sprite.tint = this._cfg.particleColor; + } + else + { + p.sprite.tint = 0xffffff; + } + } + + _spawnParticles (n = 0) + { + let i; + for (i = 0; i < this._particlePool.length && n > 0; i++) + { + if (this._particlePool[i].inUse === false) + { + this._particlePool[i].inUse = true; + n--; + + this._setupParticle(this._particlePool[i]); + this._cfg.container.addChild(this._particlePool[i].sprite); + } + } + } + + _getResultingExternalForce () + { + let externalForce = [0, 0]; + if (this._cfg.externalForces instanceof Array) + { + let i; + for (i = 0; i < this._cfg.externalForces.length; i++) + { + externalForce[0] += this._cfg.externalForces[i][0]; + externalForce[1] += this._cfg.externalForces[i][1]; + } + } + + return externalForce; + } + + setParentObject (po) + { + this._parentObj = po; + } + + /** + * @desc: Adds external force which acts on a particle + * @param: f - Array with two elements, first is x component, second is y component. + * It's a vector of length L which sets the direction and the margnitude of the force. + * */ + addExternalForce (f) + { + this._cfg.externalForces.push(f); + } + + removeExternalForce (f) + { + const i = this._cfg.externalForces.indexOf(f); + if (i !== -1) + { + this._cfg.externalForces.splice(i, 1); + } + } + + removeExternalForceByIdx (idx) + { + if (this._cfg.externalForces[idx] !== undefined) + { + this._cfg.externalForces.splice(idx, 1); + } + } + + update (dt) + { + let externalForce; + + // Sync with parent object if it exists. + if (this._parentObj !== undefined) + { + this.x = this._parentObj.x; + this.y = this._parentObj.y; + } + + if (Number.isFinite(this._cfg.positionOffsetX)) + { + this.x += this._cfg.positionOffsetX; + } + + if (Number.isFinite(this._cfg.positionOffsetY)) + { + this.y += this._cfg.positionOffsetY; + } + + if (this._spawnCoolDown <= 0) + { + this._spawnCoolDown = 1 / this._particlesPerSec; + + // Assuming that we have at least 60FPS. + const frameTime = Math.min(dt, 1 / 60); + const particlesPerFrame = Math.ceil(frameTime / this._spawnCoolDown); + this._spawnParticles(particlesPerFrame); + } + else + { + this._spawnCoolDown -= dt; + } + + let i; + for (i = 0; i < this._particlePool.length; i++) + { + if (this._particlePool[i].inUse) + { + externalForce = this._getResultingExternalForce(); + this._particlePool[i].ax = externalForce[0]; + this._particlePool[i].ay = externalForce[1]; + this._particlePool[i].update(dt); + } + + // Check if particle should be removed. + if (this._particlePool[i].lifeTime <= 0 && this._particlePool[i].sprite.parent) + { + this._cfg.container.removeChild(this._particlePool[i].sprite); + } + } + } +} diff --git a/src/visual/Polygon.js b/src/visual/Polygon.js index 6425cf6..1f67dfa 100644 --- a/src/visual/Polygon.js +++ b/src/visual/Polygon.js @@ -39,8 +39,9 @@ export class Polygon extends ShapeStim * @param {boolean} [options.interpolate= true] - whether or not the shape is interpolated * @param {boolean} [options.autoDraw= false] - whether or not the stimulus should be automatically drawn on every frame flip * @param {boolean} [options.autoLog= false] - whether or not to log + * @param {boolean} [options.draggable= false] - whether or not to make stim draggable with mouse/touch/other pointer device */ - constructor({ name, win, lineWidth, lineColor, fillColor, opacity, edges, radius, pos, size, ori, units, contrast, depth, interpolate, autoDraw, autoLog } = {}) + constructor({ name, win, lineWidth, lineColor, fillColor, opacity, edges, radius, pos, size, ori, units, contrast, depth, interpolate, autoDraw, autoLog, draggable } = {}) { super({ name, @@ -58,9 +59,11 @@ export class Polygon extends ShapeStim interpolate, autoDraw, autoLog, + draggable }); - this._psychoJS.logger.debug("create a new Polygon with name: ", name); + this._psychoJS.logger.debug("create a new Polygon with name: ", + name); this._addAttribute( "edges", diff --git a/src/visual/Progress.js b/src/visual/Progress.js new file mode 100644 index 0000000..0d27771 --- /dev/null +++ b/src/visual/Progress.js @@ -0,0 +1,162 @@ +import * as PIXI from "pixi.js-legacy"; +import * as util from "../util/Util.js"; +import { Color } from "../util/Color.js"; +import { to_pixiPoint } from "../util/Pixi.js"; +import { VisualStim } from "./VisualStim.js"; + +export class Progress extends VisualStim +{ + constructor ( + { + name, + win, + units = "pix", + ori, + opacity, + depth, + pos, + anchor = "left", + size = [300, 30], + clipMask, + autoDraw, + autoLog, + progress = 1, + type, + fillColor, + fillTexture + }) + { + super({ + name, + win, + units, + ori, + opacity, + depth, + pos, + anchor, + size, + clipMask, + autoDraw, + autoLog + }); + + this._addAttribute("progress", progress, 0); + this._addAttribute("type", type, PROGRESS_TYPES.BAR); + this._addAttribute("fillColor", fillColor, "lightgreen"); + this._addAttribute("fillTexture", fillTexture, PIXI.Texture.WHITE); + + if (this._autoLog) + { + this._psychoJS.experimentLogger.exp(`Created ${this.name} = ${this.toString()}`); + } + } + + /** + * Setter for the progress attribute. + */ + setProgress (progress = 0, log = false) + { + this._setAttribute("progress", Math.min(1.0, Math.max(0.0, progress)), log); + if (this._pixi !== undefined) + { + this._pixi.clear(); + const size_px = util.to_px(this._size, this._units, this._win); + const progressWidth = size_px[0] * this._progress; + if (this._fillTexture) + { + let t = PIXI.Texture.WHITE; + if (typeof this._fillTexture === "string") + { + t = PIXI.Texture.from(this._fillTexture); + t.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; + } + this._pixi.beginTextureFill({ + texture: t + }); + } + else + { + this._pixi.beginFill(new Color(this._fillColor).int, this._opacity); + } + + if (this._type === PROGRESS_TYPES.BAR) + { + this._pixi.drawRect(0, 0, progressWidth, size_px[1]); + } + + this._pixi.endFill(); + + // TODO: is there a better way to ensure anchor works? + this.anchor = this._anchor; + } + } + + /** + * Estimate the bounding box. + * + * @override + * @protected + */ + _estimateBoundingBox() + { + let boundingBox = new PIXI.Rectangle(0, 0, 0, 0); + const anchorNum = this._anchorTextToNum(this._anchor); + const pos_px = util.to_px(this._pos, this._units, this._win); + const size_px = util.to_px(this._size, this._units, this._win); + boundingBox.x = pos_px[ 0 ] - anchorNum[ 0 ] * size_px[ 0 ]; + boundingBox.y = pos_px[ 1 ] - anchorNum[ 1 ] * size_px[ 1 ]; + boundingBox.width = size_px[ 0 ]; + boundingBox.height = size_px[ 1 ]; + + this._boundingBox = boundingBox; + } + + /** + * Update the stimulus, if necessary. + * + * @protected + */ + _updateIfNeeded() + { + // TODO: figure out what is the error with estimateBoundBox on resize? + if (!this._needUpdate) + { + return; + } + this._needUpdate = false; + + // update the PIXI representation, if need be: + if (this._needPixiUpdate) + { + this._needPixiUpdate = false; + + if (typeof this._pixi !== "undefined") + { + this._pixi.destroy(true); + } + this._pixi = new PIXI.Graphics(); + // TODO: Should we do this? + // this._pixi.lineStyle(this._lineWidth, this._lineColor.int, this._opacity, 0.5); + + // TODO: Should just .setProgress() be called? + this.setProgress(this._progress); + + this._pixi.scale.y = -1; + this._pixi.zIndex = -this._depth; + this.anchor = this._anchor; + } + + // set polygon position and rotation: + this._pixi.position = to_pixiPoint(this._pos, this._units, this._win); + this._pixi.rotation = -this.ori * Math.PI / 180.0; + + this._estimateBoundingBox(); + } +} + +export const PROGRESS_TYPES = +{ + BAR: 0, + CIRCLE: 1 +} diff --git a/src/visual/Rect.js b/src/visual/Rect.js index b5eb565..9b87164 100644 --- a/src/visual/Rect.js +++ b/src/visual/Rect.js @@ -38,8 +38,9 @@ export class Rect extends ShapeStim * @param {boolean} [options.interpolate= true] - whether or not the shape is interpolated * @param {boolean} [options.autoDraw= false] - whether or not the stimulus should be automatically drawn on every frame flip * @param {boolean} [options.autoLog= false] - whether or not to log + * @param {boolean} [options.draggable= false] - whether or not to make stim draggable with mouse/touch/other pointer device */ - constructor({ name, win, lineWidth, lineColor, fillColor, opacity, width, height, pos, anchor, size, ori, units, contrast, depth, interpolate, autoDraw, autoLog } = {}) + constructor({ name, win, lineWidth, lineColor, fillColor, opacity, width, height, pos, anchor, size, ori, units, contrast, depth, interpolate, autoDraw, autoLog, draggable } = {}) { super({ name, @@ -58,6 +59,7 @@ export class Rect extends ShapeStim interpolate, autoDraw, autoLog, + draggable }); this._psychoJS.logger.debug("create a new Rect with name: ", name); diff --git a/src/visual/ShapeStim.js b/src/visual/ShapeStim.js index 49b1049..8630a85 100644 --- a/src/visual/ShapeStim.js +++ b/src/visual/ShapeStim.js @@ -44,10 +44,11 @@ export class ShapeStim extends util.mix(VisualStim).with(ColorMixin, WindowMixin * @param {boolean} [options.interpolate= true] - whether or not the shape is interpolated * @param {boolean} [options.autoDraw= false] - whether or not the stimulus should be automatically drawn on every frame flip * @param {boolean} [options.autoLog= false] - whether or not to log + * @param {boolean} [options.draggable= false] - whether or not to make stim draggable with mouse/touch/other pointer device */ - constructor({ name, win, lineWidth, lineColor, fillColor, opacity, vertices, closeShape, pos, anchor, size, ori, units, contrast, depth, interpolate, autoDraw, autoLog } = {}) + constructor({ name, win, lineWidth, lineColor, fillColor, opacity, vertices, closeShape, pos, anchor, size, ori, units, contrast, depth, interpolate, autoDraw, autoLog, draggable } = {}) { - super({ name, win, units, ori, opacity, pos, anchor, depth, size, autoDraw, autoLog }); + super({ name, win, units, ori, opacity, pos, anchor, depth, size, autoDraw, autoLog, draggable }); // the PIXI polygon corresponding to the vertices, in pixel units: this._pixiPolygon_px = undefined; @@ -163,8 +164,8 @@ export class ShapeStim extends util.mix(VisualStim).with(ColorMixin, WindowMixin if (typeof objectPos_px === "undefined") { throw { - origin: "VisualStim.contains", - context: "when determining whether VisualStim: " + this._name + " contains object: " + util.toString(object), + origin: "ShapeStim.contains", + context: "when determining whether ShapeStim: " + this._name + " contains object: " + util.toString(object), error: "unable to determine the position of the object", }; } @@ -176,6 +177,22 @@ export class ShapeStim extends util.mix(VisualStim).with(ColorMixin, WindowMixin return util.IsPointInsidePolygon(objectPos_px, polygon_px); } + /** + * Determine whether a point that is nown to have pixel dimensions is inside the bounding box of the stimulus. + * + * @name module:visual.ShapeStim#containsPointPx + * @public + * @param {number[]} point_px - the point in pixels + * @return {boolean} whether or not the object is inside the bounding box of the stimulus + */ + containsPointPx (point_px) + { + const pos_px = util.to_px(this.pos, this.units, this.win); + this._getVertices_px(); + const polygon_px = this._vertices_px.map((v) => [v[0] + pos_px[0], v[1] + pos_px[1]]); + return util.IsPointInsidePolygon(point_px, polygon_px); + } + /** * Setter for the anchor attribute. * @@ -385,4 +402,29 @@ ShapeStim.KnownShapes = { [-0.39, 0.31], [-0.09, 0.18], ], + + triangle: [ + [+0.0, 0.5], // Point + [-0.5, -0.5], // Bottom left + [+0.5, -0.5], // Bottom right + ], + + rectangle: [ + [-.5, .5], // Top left + [ .5, .5], // Top right + [ .5, -.5], // Bottom left + [-.5, -.5], // Bottom right + ], + + arrow: [ + [0.0, 0.5], + [-0.5, 0.0], + [-1/6, 0.0], + [-1/6, -0.5], + [1/6, -0.5], + [1/6, 0.0], + [0.5, 0.0], + ], }; +// Alias some names for convenience +ShapeStim.KnownShapes['star'] = ShapeStim.KnownShapes['star7'] diff --git a/src/visual/Slider.js b/src/visual/Slider.js index c76e65d..4d85032 100644 --- a/src/visual/Slider.js +++ b/src/visual/Slider.js @@ -65,6 +65,7 @@ export class Slider extends util.mix(VisualStim).with(ColorMixin, WindowMixin) * @param {boolean} [options.autoDraw= false] - whether or not the stimulus should be automatically drawn on every * frame flip * @param {boolean} [options.autoLog= false] - whether or not to log + * @param {boolean} [options.draggable= false] - whether or not to make stim draggable with mouse/touch/other pointer device * * @param {core.MinimalStim[]} [options.dependentStims = [] ] - the list of dependent stimuli, * which must be updated when this Slider is updated, e.g. a Form. @@ -99,10 +100,11 @@ export class Slider extends util.mix(VisualStim).with(ColorMixin, WindowMixin) autoDraw, autoLog, dependentStims, + draggable } = {}, ) { - super({ name, win, units, ori, opacity, depth, pos, size, clipMask, autoDraw, autoLog }); + super({ name, win, units, ori, opacity, depth, pos, size, clipMask, autoDraw, autoLog, draggable }); this._needMarkerUpdate = false; diff --git a/src/visual/Survey.js b/src/visual/Survey.js index d4cf781..57bf41f 100644 --- a/src/visual/Survey.js +++ b/src/visual/Survey.js @@ -23,26 +23,7 @@ import MatrixBipolar from "./survey/components/MatrixBipolar.js"; import DropdownExtensions from "./survey/components/DropdownExtensions.js"; import customExpressionFunctionsArray from "./survey/extensions/customExpressionFunctions.js"; -const CAPTIONS = { - NEXT: "Next" -}; -const SURVEY_SETTINGS = { - minWidth: "100px" -}; - -const SURVEY_COMPLETION_CODES = -{ - NORMAL: 0, - SKIP_TO_END_OF_BLOCK: 1, - SKIP_TO_END_OF_SURVEY: 2 -}; - -const NODE_EXIT_CODES = -{ - NORMAL: 0, - BREAK_FLOW: 1 -}; /** * Survey Stimulus. @@ -63,6 +44,24 @@ export class Survey extends VisualStim ENDSURVEY: "END" }; + static CAPTIONS = + { + NEXT: "Next" + }; + + static SURVEY_COMPLETION_CODES = + { + NORMAL: 0, + SKIP_TO_END_OF_BLOCK: 1, + SKIP_TO_END_OF_SURVEY: 2 + }; + + static NODE_EXIT_CODES = + { + NORMAL: 0, + BREAK_FLOW: 1 + }; + /** * @memberOf module:visual * @param {Object} options @@ -83,19 +82,16 @@ export class Survey extends VisualStim { super({ name, win, units, ori, depth, pos, size, autoDraw, autoLog }); - // the default surveyId is an uuid based on the experiment id (or name) and the survey name: - // this way, it is always the same within a given experiment - this._hasSelfGeneratedSurveyId = (typeof surveyId === "undefined"); - const defaultSurveyId = (this._psychoJS.getEnvironment() === ExperimentHandler.Environment.SERVER) ? - util.makeUuid(`${name}@${this._psychoJS.config.gitlab.projectId}`) : - util.makeUuid(`${name}@${this._psychoJS.config.experiment.name}`); + // Storing all existing signaturePad questions to properly handle their resize. + // Unfortunately signaturepad question type can't handle resizing properly by itself. + this._signaturePads = []; // whether the user is done with the survey, independently of whether the survey is completed: this.isFinished = false; - // Accumulated completion flag that is being set after completion of one survey node. - // This flag allows to track completion progress while moving through the survey flow. - // Initially set to true and will be flipped if at least one of the survey nodes were not fully completed. + // accumulated completion flag updated after each survey node is completed + // note: this make it possible to track completion as we move through the survey flow. + // _isCompletedAll will be flipped to false whenever a survey node is not completed this._isCompletedAll = true; // timestamps associated to each question: @@ -103,10 +99,9 @@ export class Survey extends VisualStim // timestamps clock: this._questionAnswerTimestampClock = new Clock(); - this._totalSurveyResults = {}; + this._overallSurveyResults = {}; this._surveyData = undefined; this._surveyModel = undefined; - this._signaturePadRO = undefined; this._expressionsRunner = undefined; this._lastPageSwitchHandledIdx = -1; this._variables = {}; @@ -114,23 +109,36 @@ export class Survey extends VisualStim this._surveyRunningPromise = undefined; this._surveyRunningPromiseResolve = undefined; this._surveyRunningPromiseReject = undefined; - // callback triggered when the user is done with the survey: nothing to do by default this._onFinishedCallback = () => {}; - // init SurveyJS + // init SurveyJS: this._initSurveyJS(); + // default size: + if (typeof size === "undefined") + { + this.size = (this.unit === "norm") ? [2.0, 2.0] : [1.0, 1.0]; + } + this._addAttribute( "model", model ); + + // the default surveyId is an uuid based on the experiment id (or name) and the survey name: + // this way, it is always the same within a given experiment + this._hasSelfGeneratedSurveyId = (typeof surveyId === "undefined"); + const defaultSurveyId = (this._psychoJS.getEnvironment() === ExperimentHandler.Environment.SERVER) ? + util.makeUuid(`${name}@${this._psychoJS.config.gitlab.projectId}`) : + util.makeUuid(`${name}@${this._psychoJS.config.experiment.name}`); this._addAttribute( "surveyId", surveyId, defaultSurveyId ); + // estimate the bounding box: this._estimateBoundingBox(); @@ -213,7 +221,7 @@ export class Survey extends VisualStim logs: [] }; - this.psychoJS.logger.debug(`converted the old model to the new super-flow model: ${JSON.stringify(model)}`); + this.psychoJS.logger.debug(`converted the legacy model to the new super-flow model: ${JSON.stringify(model)}`); } this._surveyData = model; @@ -227,6 +235,24 @@ export class Survey extends VisualStim } } + /** + * Setter for the surveyId attribute. + * + * @param {string} surveyId - the survey Id + * @param {boolean} [log= false] - whether to log + * @return {void} + */ + setSurveyId(surveyId, log = false) + { + this._setAttribute("surveyId", surveyId, log); + + // only update the model if a genuine surveyId was given as parameter to the Survey: + if (!this._hasSelfGeneratedSurveyId) + { + this.setModel(`${surveyId}.sid`, log); + } + } + /** * Set survey variables. * @@ -254,7 +280,8 @@ export class Survey extends VisualStim { if (excludedNames.indexOf(name) === -1) { - this._surveyData.variables[name] = variables[name]; + this._variables[name] = variables[name]; + // this._surveyData.variables[name] = variables[name]; } } } @@ -282,22 +309,6 @@ export class Survey extends VisualStim return this._surveyModel.runExpression(expression); } - /** - * Setter for the surveyId attribute. - * - * @param {string} surveyId - the survey Id - * @param {boolean} [log= false] - whether to log - * @return {void} - */ - setSurveyId(surveyId, log = false) - { - this._setAttribute("surveyId", surveyId, log); - if (!this._hasSelfGeneratedSurveyId) - { - this.setModel(`${surveyId}.sid`, log); - } - } - /** * Add a callback that will be triggered when the participant finishes the survey. * @@ -336,7 +347,7 @@ export class Survey extends VisualStim // return this._surveyModel.data; - return this._totalSurveyResults; + return this._overallSurveyResults; } /** @@ -374,7 +385,6 @@ export class Survey extends VisualStim {} ); - // if the response cannot be uploaded, e.g. the experiment is running locally, or // if it is piloting mode, then we offer the response as a file for download: if (this._psychoJS.getEnvironment() !== ExperimentHandler.Environment.SERVER || @@ -420,9 +430,7 @@ export class Survey extends VisualStim */ hide() { - // if a survey div already does not exist already, create it: - const surveyId = `survey-${this._name}`; - const surveyDiv = document.getElementById(surveyId); + const surveyDiv = document.getElementById(this._surveyDivId); if (surveyDiv !== null) { document.body.removeChild(surveyDiv); @@ -468,9 +476,9 @@ export class Survey extends VisualStim this._needPixiUpdate = false; // if a survey div does not exist, create it: - if (document.getElementById("_survey") === null) + if (document.getElementById(this._surveyDivId) === null) { - document.body.insertAdjacentHTML("beforeend", "") + document.body.insertAdjacentHTML("beforeend", ``) } // start the survey flow: @@ -513,8 +521,7 @@ export class Survey extends VisualStim */ _registerCustomExpressionFunctions (Survey, customFuncs = []) { - let i; - for (i = 0; i < customFuncs.length; i++) + for (let i = 0; i < customFuncs.length; i++) { Survey.FunctionFactory.Instance.register(customFuncs[i].func.name, customFuncs[i].func, customFuncs[i].isAsync); } @@ -579,6 +586,7 @@ export class Survey extends VisualStim this._questionAnswerTimestamps[questionData.name].timestamp = this._questionAnswerTimestampClock.getTime(); } +/* // This probably needs to be moved to some kind of utils.js. // https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle _FisherYatesShuffle (targetArray = []) @@ -613,6 +621,7 @@ export class Survey extends VisualStim return inOutArray; } +*/ _composeModelWithRandomizedQuestions (surveyModel, inBlockRandomizationSettings) { @@ -621,31 +630,32 @@ export class Survey extends VisualStim // Hence creating a fresh survey data object with shuffled question order. let questions = []; let questionsMap = {}; - let shuffledQuestions; let newSurveyModel = { pages:[{ elements: new Array(inBlockRandomizationSettings.questionsPerPage) }] }; - let i, j, k; - for (i = 0; i < surveyModel.pages.length; i++) + for (let i = 0; i < surveyModel.pages.length; i++) { - for (j = 0; j < surveyModel.pages[i].elements.length; j++) + for (let j = 0; j < surveyModel.pages[i].elements.length; j++) { questions.push(surveyModel.pages[i].elements[j]); - k = questions.length - 1; + const k = questions.length - 1; questionsMap[questions[k].name] = questions[k]; } } if (inBlockRandomizationSettings.layout.length > 0) { - j = 0; - k = 0; + let j = 0; + let k = 0; let curPage = 0; let curElement = 0; - const shuffledSet0 = this._FisherYatesShuffle(inBlockRandomizationSettings.set0); - const shuffledSet1 = this._FisherYatesShuffle(inBlockRandomizationSettings.set1); - for (i = 0; i < inBlockRandomizationSettings.layout.length; i++) + + const shuffledSet0 = util.shuffle(Array.from(inBlockRandomizationSettings.set0)); + const shuffledSet1 = util.shuffle(Array.from(inBlockRandomizationSettings.set1)); + // const shuffledSet0 = this._FisherYatesShuffle(inBlockRandomizationSettings.set0); + // const shuffledSet1 = this._FisherYatesShuffle(inBlockRandomizationSettings.set1); + for (let i = 0; i < inBlockRandomizationSettings.layout.length; i++) { // Create new page if questionsPerPage reached. if (curElement === inBlockRandomizationSettings.questionsPerPage) @@ -675,12 +685,14 @@ export class Survey extends VisualStim else if (inBlockRandomizationSettings.showOnly > 0) { // TODO: Check if there can be questionsPerPage applicable in this case. - shuffledQuestions = this._FisherYatesShuffle(questions); + const shuffledQuestions = util.shuffle(Array.from(questions)); + // shuffledQuestions = this._FisherYatesShuffle(questions); newSurveyModel.pages[0].elements = shuffledQuestions.splice(0, inBlockRandomizationSettings.showOnly); } else { // TODO: Check if there can be questionsPerPage applicable in this case. - newSurveyModel.pages[0].elements = this._FisherYatesShuffle(questions); + newSurveyModel.pages[0].elements = util.shuffle(Array.from(questions)); + // newSurveyModel.pages[0].elements = this._FisherYatesShuffle(questions); } console.log("model recomposition took", performance.now() - t); console.log("recomposed model:", newSurveyModel); @@ -714,12 +726,14 @@ export class Survey extends VisualStim if (inQuestionRandomizationSettings.randomizeAll) { - questionData[choicesFieldName] = this._FisherYatesShuffle(questionData[choicesFieldName]); + questionData[choicesFieldName] = util.shuffle(Array.from(questionData[choicesFieldName])); + // questionData[choicesFieldName] = this._FisherYatesShuffle(questionData[choicesFieldName]); // Handle dynamic choices. } else if (inQuestionRandomizationSettings.showOnly > 0) { - questionData[choicesFieldName] = this._FisherYatesShuffle(questionData[choicesFieldName]).splice(0, inQuestionRandomizationSettings.showOnly); + questionData[choicesFieldName] = util.shuffle(Array.from(questionData[choicesFieldName]).splice(0, inQuestionRandomizationSettings.showOnly)); + // questionData[choicesFieldName] = this._FisherYatesShuffle(questionData[choicesFieldName]).splice(0, inQuestionRandomizationSettings.showOnly); } else if (inQuestionRandomizationSettings.reverse) { @@ -739,8 +753,10 @@ export class Survey extends VisualStim // Creating new array of choices to which we're going to write from randomized/reversed sets. questionData[choicesFieldName] = new Array(inQuestionRandomizationSettings.layout.length); - const shuffledSet0 = this._FisherYatesShuffle(inQuestionRandomizationSettings.set0); - const shuffledSet1 = this._FisherYatesShuffle(inQuestionRandomizationSettings.set1); + const shuffledSet0 = util.shuffle(Array.from(inQuestionRandomizationSettings.set0)); + const shuffledSet1 = util.shuffle(Array.from(inQuestionRandomizationSettings.set1)); + // const shuffledSet0 = this._FisherYatesShuffle(inQuestionRandomizationSettings.set0); + // const shuffledSet1 = this._FisherYatesShuffle(inQuestionRandomizationSettings.set1); const reversedSet = Math.round(Math.random()) === 1 ? inQuestionRandomizationSettings.reverseOrder.reverse() : inQuestionRandomizationSettings.reverseOrder; for (i = 0; i < inQuestionRandomizationSettings.layout.length; i++) { @@ -861,12 +877,12 @@ export class Survey extends VisualStim if (skipLogic.destination === "ENDOFSURVEY") { surveyModel.setCompleted(); - this._surveyRunningPromiseResolve(SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_SURVEY); + this._surveyRunningPromiseResolve(Survey.SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_SURVEY); } else if (skipLogic.destination === "ENDOFBLOCK") { surveyModel.setCompleted(); - this._surveyRunningPromiseResolve(SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_BLOCK); + this._surveyRunningPromiseResolve(Survey.SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_BLOCK); } else { @@ -896,13 +912,12 @@ export class Survey extends VisualStim * * @param surveyModel * @param options - * @private + * @protected */ _onSurveyComplete(surveyModel, options) { - Object.assign(this._totalSurveyResults, surveyModel.data); - this._detachResizeObservers(); - let completionCode = SURVEY_COMPLETION_CODES.NORMAL; + Object.assign(this._overallSurveyResults, surveyModel.data); + let completionCode = Survey.SURVEY_COMPLETION_CODES.NORMAL; const questions = surveyModel.getAllQuestions(); // It is guaranteed that the question with skip logic is always last on the page. @@ -916,12 +931,12 @@ export class Survey extends VisualStim { if (skipLogic.destination === "ENDOFSURVEY") { - completionCode = SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_SURVEY; + completionCode = Survey.SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_SURVEY; surveyModel.setCompleted(); } else if (skipLogic.destination === "ENDOFBLOCK") { - completionCode = SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_BLOCK; + completionCode = Survey.SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_BLOCK; } } } @@ -976,22 +991,18 @@ export class Survey extends VisualStim * Run the survey using flow data provided. This method runs recursively. * * @protected - * @param {string} surveyId - the id of the DOM div * @param {Object} surveyData - surveyData / model. - * @param {Object} prevBlockResults - survey results gathered from running previous block of questions. + * @param {Object} surveyFlowBlock - XXX * @return {void} */ _beginSurvey(surveyData, surveyFlowBlock) { - let j; - let surveyIdx; this._lastPageSwitchHandledIdx = -1; - surveyIdx = surveyFlowBlock.surveyIdx; - console.log("playing survey with idx", surveyIdx); + const surveyIdx = surveyFlowBlock.surveyIdx; let surveyModelInput = this._processSurveyData(surveyData, surveyIdx); this._surveyModel = new window.Survey.Model(surveyModelInput); - for (j in this._variables) + for (let j in this._variables) { // Adding variables directly to hash to get higher performance (this is instantaneous compared to .setVariable()). // At this stage we don't care to trigger all the callbacks like .setVariable() does, since this is very beginning of survey presentation. @@ -1010,7 +1021,7 @@ export class Survey extends VisualStim this._surveyModel.onAfterRenderQuestion.add(this._handleAfterQuestionRender.bind(this)); } - const completeText = surveyIdx < this._surveyData.surveys.length - 1 ? (this._surveyModel.pageNextText || CAPTIONS.NEXT) : undefined; + const completeText = surveyIdx < this._surveyData.surveys.length - 1 ? (this._surveyModel.pageNextText || Survey.CAPTIONS.NEXT) : undefined; jQuery(".survey").Survey({ model: this._surveyModel, showItemsInOrder: "column", @@ -1033,15 +1044,11 @@ export class Survey extends VisualStim async _runSurveyFlow(surveyBlock, surveyData, prevBlockResults = {}) { - // let surveyBlock; - let surveyIdx; - let surveyCompletionCode; - let nodeExitCode = NODE_EXIT_CODES.NORMAL; - let i, j; + let nodeExitCode = Survey.NODE_EXIT_CODES.NORMAL; if (surveyBlock.type === Survey.SURVEY_FLOW_PLAYBACK_TYPES.CONDITIONAL) { - const dataset = Object.assign({}, this._totalSurveyResults, this._variables); + const dataset = Object.assign({}, this._overallSurveyResults, this._variables); this._expressionsRunner.expressionExecutor.setExpression(surveyBlock.condition); if (this._expressionsRunner.run(dataset) && surveyBlock.nodes[0] !== undefined) { @@ -1054,13 +1061,14 @@ export class Survey extends VisualStim } else if (surveyBlock.type === Survey.SURVEY_FLOW_PLAYBACK_TYPES.RANDOMIZER) { - this._InPlaceFisherYatesShuffle(surveyBlock.nodes, 0, surveyBlock.nodes.length - 1); + util.shuffle(surveyBlock.nodes, Math.random, 0, surveyBlock.nodes.length - 1); + // this._InPlaceFisherYatesShuffle(surveyBlock.nodes, 0, surveyBlock.nodes.length - 1); } else if (surveyBlock.type === Survey.SURVEY_FLOW_PLAYBACK_TYPES.EMBEDDED_DATA) { let t = performance.now(); const surveyBlockData = surveyData.embeddedData[surveyBlock.dataIdx]; - for (j = 0; j < surveyBlockData.length; j++) + for (let j = 0; j < surveyBlockData.length; j++) { // TODO: handle the rest data types. if (surveyBlockData[j].type === "Custom") @@ -1089,28 +1097,28 @@ export class Survey extends VisualStim this._surveyModel.setCompleted(); } console.log("EndSurvey block encountered, exiting."); - nodeExitCode = NODE_EXIT_CODES.BREAK_FLOW; + nodeExitCode = Survey.NODE_EXIT_CODES.BREAK_FLOW; } else if (surveyBlock.type === Survey.SURVEY_FLOW_PLAYBACK_TYPES.DIRECT) { - surveyCompletionCode = await this._beginSurvey(surveyData, surveyBlock); + const surveyCompletionCode = await this._beginSurvey(surveyData, surveyBlock); Object.assign({}, prevBlockResults, this._surveyModel.data); // SkipLogic had destination set to ENDOFSURVEY. - if (surveyCompletionCode === SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_SURVEY) + if (surveyCompletionCode === Survey.SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_SURVEY) { - nodeExitCode = NODE_EXIT_CODES.BREAK_FLOW; + nodeExitCode = Survey.NODE_EXIT_CODES.BREAK_FLOW; } } - if (nodeExitCode === NODE_EXIT_CODES.NORMAL && + if (nodeExitCode === Survey.NODE_EXIT_CODES.NORMAL && surveyBlock.type !== Survey.SURVEY_FLOW_PLAYBACK_TYPES.CONDITIONAL && surveyBlock.nodes instanceof Array) { - for (i = 0; i < surveyBlock.nodes.length; i++) + for (let i = 0; i < surveyBlock.nodes.length; i++) { nodeExitCode = await this._runSurveyFlow(surveyBlock.nodes[i], surveyData, prevBlockResults); - if (nodeExitCode === NODE_EXIT_CODES.BREAK_FLOW) + if (nodeExitCode === Survey.NODE_EXIT_CODES.BREAK_FLOW) { break; } @@ -1131,53 +1139,64 @@ export class Survey extends VisualStim this._lastPageSwitchHandledIdx = -1; } - _handleSignaturePadResize (entries) + _handleWindowResize(e) { - let signatureCanvas; - let q; - let i; - for (i = 0; i < entries.length; i++) + if (this._surveyModel) { - signatureCanvas = entries[i].target.querySelector("canvas"); - q = this._surveyModel.getQuestionByName(entries[i].target.dataset.name); - q.signatureWidth = Math.min(q.maxSignatureWidth, entries[i].contentBoxSize[0].inlineSize); + for (let i = this._signaturePads.length - 1; i >= 0; i--) + { + // As of writing this (24.03.2023). SurveyJS doesn't have a proper event + // for question being removed from nested locations, such as dynamic panel. + // However, surveyJS will set .signaturePad property to null once the question is removed. + // Utilising this knowledge to sync our lists. + if (this._signaturePads[ i ].question.signaturePad) + { + this._signaturePads[ i ].question.signatureWidth = Math.min( + this._signaturePads[i].question.maxSignatureWidth, + this._signaturePads[ i ].htmlElement.getBoundingClientRect().width + ); + } + else + { + // Signature pad was removed. Syncing list. + this._signaturePads.splice(i, 1); + } + } } } - _addEventListeners () + _addEventListeners() { - this._signaturePadRO = new ResizeObserver(this._handleSignaturePadResize.bind(this)); + window.addEventListener("resize", (e) => this._handleWindowResize(e)); } _handleAfterQuestionRender (sender, options) { if (options.question.getType() === "signaturepad") { - this._signaturePadRO.observe(options.htmlElement); + this._signaturePads.push(options); + options.question.signatureWidth = Math.min(options.question.maxSignatureWidth, options.htmlElement.getBoundingClientRect().width); } } - _detachResizeObservers () - { - this._signaturePadRO.disconnect(); - } - /** - * Init the SurveyJS.io library. + * Init the SurveyJS.io library and various extensions, setup the theme. * * @protected */ _initSurveyJS() { - // load the Survey.js libraries, if necessary: - // TODO + // note: the Survey.js libraries must be added to the list of resources in PsychoJS.start: + // psychoJS.start({ resources: [ {'surveyLibrary': true}, ... ], ...}); + + // id of the SurveyJS html div: + this._surveyDivId = `survey-${this._name}`; - // load the PsychoJS SurveyJS extensions: - this._expressionsRunner = new window.Survey.ExpressionRunner(); this._registerCustomExpressionFunctions(window.Survey, customExpressionFunctionsArray); this._registerWidgets(window.Survey); this._registerCustomSurveyProperties(window.Survey); this._addEventListeners(); + this._expressionsRunner = new window.Survey.ExpressionRunner(); // setup the survey theme: window.Survey.Serializer.getProperty("expression", "minWidth").defaultValue = "100px"; diff --git a/src/visual/TextBox.js b/src/visual/TextBox.js index 4d8e2bc..90afbde 100644 --- a/src/visual/TextBox.js +++ b/src/visual/TextBox.js @@ -52,6 +52,7 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin) * @param {boolean} [options.autoDraw= false] - whether or not the stimulus should be automatically drawn on every frame flip * @param {boolean} [options.autoLog= false] - whether or not to log * @param {boolean} [options.fitToContent = false] - whether or not to resize itself automaitcally to fit to the text content + * @param {boolean} [options.draggable= false] - whether or not to make stim draggable with mouse/touch/other pointer device */ constructor( { @@ -86,11 +87,13 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin) clipMask, autoDraw, autoLog, - fitToContent + fitToContent, + draggable, + boxFn } = {}, ) { - super({ name, win, pos, anchor, size, units, ori, opacity, depth, clipMask, autoDraw, autoLog }); + super({ name, win, pos, anchor, size, units, ori, opacity, depth, clipMask, autoDraw, autoLog, draggable }); this._addAttribute( "text", @@ -202,12 +205,14 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin) // and setSize called from super class would not have a proper effect this.setSize(size); + this._addAttribute("boxFn", boxFn, null); + // estimate the bounding box: this._estimateBoundingBox(); if (this._autoLog) { - this._psychoJS.experimentLogger.exp(`Created ${this.name} = ${this.toString()}`); + this._psychoJS.experimentLogger.exp(`Created ${this.name} = ${util.toString(this)}`); } } @@ -481,6 +486,26 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin) alignmentStyles = ["center", "center"]; } + let box; + if (this._boxFn !== null) + { + box = this._boxFn; + } + else + { + // note: box style properties eventually become PIXI.Graphics settings, so same syntax applies + box = { + fill: new Color(this._fillColor).int, + alpha: this._fillColor === undefined || this._fillColor === null ? 0 : 1, + rounded: 5, + stroke: { + color: new Color(this._borderColor).int, + width: borderWidth_px, + alpha: this._borderColor === undefined || this._borderColor === null ? 0 : 1 + } + }; + } + return { // input style properties eventually become CSS, so same syntax applies input: { @@ -504,41 +529,7 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin) overflow: "hidden", pointerEvents: "none" }, - // box style properties eventually become PIXI.Graphics settings, so same syntax applies - box: { - fill: new Color(this._fillColor).int, - alpha: this._fillColor === undefined || this._fillColor === null ? 0 : 1, - rounded: 5, - stroke: { - color: new Color(this._borderColor).int, - width: borderWidth_px, - alpha: this._borderColor === undefined || this._borderColor === null ? 0 : 1 - }, - /*default: { - fill: new Color(this._fillColor).int, - rounded: 5, - stroke: { - color: new Color(this._borderColor).int, - width: borderWidth_px - } - }, - focused: { - fill: new Color(this._fillColor).int, - rounded: 5, - stroke: { - color: new Color(this._borderColor).int, - width: borderWidth_px - } - }, - disabled: { - fill: new Color(this._fillColor).int, - rounded: 5, - stroke: { - color: new Color(this._borderColor).int, - width: borderWidth_px - } - }*/ - }, + box }; } diff --git a/src/visual/TextStim.js b/src/visual/TextStim.js index 8255ccf..c4fd922 100644 --- a/src/visual/TextStim.js +++ b/src/visual/TextStim.js @@ -49,6 +49,7 @@ export class TextStim extends util.mix(VisualStim).with(ColorMixin) * @param {PIXI.Graphics} [options.clipMask= null] - the clip mask * @param {boolean} [options.autoDraw= false] - whether or not the stimulus should be automatically drawn on every frame flip * @param {boolean} [options.autoLog= false] - whether or not to log + * @param {boolean} [options.draggable= false] - whether or not to make stim draggable with mouse/touch/other pointer device */ constructor( { @@ -75,10 +76,11 @@ export class TextStim extends util.mix(VisualStim).with(ColorMixin) clipMask, autoDraw, autoLog, + draggable } = {}, ) { - super({ name, win, units, ori, opacity, depth, pos, anchor, clipMask, autoDraw, autoLog }); + super({ name, win, units, ori, opacity, depth, pos, anchor, clipMask, autoDraw, autoLog, draggable }); // callback to deal with text metrics invalidation: const onChange = (withPixi = false, withBoundingBox = false, withMetrics = false) => diff --git a/src/visual/VisualStim.js b/src/visual/VisualStim.js index d74d6bb..b47bc09 100644 --- a/src/visual/VisualStim.js +++ b/src/visual/VisualStim.js @@ -35,8 +35,9 @@ export class VisualStim extends util.mix(MinimalStim).with(WindowMixin) * @param {PIXI.Graphics} [options.clipMask= null] - the clip mask * @param {boolean} [options.autoDraw= false] - whether or not the stimulus should be automatically drawn on every frame flip * @param {boolean} [options.autoLog= false] - whether or not to log + * @param {boolean} [options.draggable= false] - whether or not to make stim draggable with mouse/touch/other pointer device */ - constructor({ name, win, units, ori, opacity, depth, pos, anchor, size, clipMask, autoDraw, autoLog } = {}) + constructor({ name, win, units, ori, opacity, depth, pos, anchor, size, clipMask, autoDraw, autoLog, draggable } = {}) { super({ win, name, autoDraw, autoLog }); @@ -84,6 +85,12 @@ export class VisualStim extends util.mix(MinimalStim).with(WindowMixin) null, this._onChange(false, false), ); + this._addAttribute("draggable", draggable, false); + + // data needed to properly support drag and drop functionality + this._associatedPointerId = undefined; + this._initialPointerOffset = [0, 0]; + this._pointerEventHandlersUuids = {}; // bounding box of the stimulus, in stimulus units // note: boundingBox does not take the orientation into account @@ -96,6 +103,14 @@ export class VisualStim extends util.mix(MinimalStim).with(WindowMixin) this._needPixiUpdate = true; } + /** + * Whether or not stimuli is being dragged by pointer. Works in conjunction with draggable attribute. + */ + get isDragging() + { + return this._associatedPointerId !== undefined; + } + /** * Force a refresh of the stimulus. * @@ -179,15 +194,45 @@ export class VisualStim extends util.mix(MinimalStim).with(WindowMixin) } } + /** + * Setter for the draggable attribute. + * + * @name module:visual.VisualStim#setDraggable + * @public + * @param {boolean} [draggable=false] - whether or not to make stim draggable using mouse/touch/other pointer device + * @param {boolean} [log= false] - whether of not to log + */ + setDraggable(draggable = false, log = false) + { + const hasChanged = this._setAttribute("draggable", draggable, log); + if (hasChanged) + { + if (draggable) + { + this._pointerEventHandlersUuids[ "pointerdown" ] = this._win.on("pointerdown", this._handlePointerDown.bind(this)); + this._pointerEventHandlersUuids[ "pointerup" ] = this._win.on("pointerup", this._handlePointerUp.bind(this)); + this._pointerEventHandlersUuids[ "pointermove" ] = this._win.on("pointermove", this._handlePointerMove.bind(this)); + } + else + { + this._win.off("pointerdown", this._pointerEventHandlersUuids[ "pointerdown" ]); + this._win.off("pointerup", this._pointerEventHandlersUuids[ "pointerup" ]); + this._win.off("pointermove", this._pointerEventHandlersUuids[ "pointermove" ]); + } + } + } + /** * Setter for the depth attribute. * * @param {Array.