mirror of
https://github.com/psychopy/psychojs.git
synced 2025-05-10 10:40:54 +00:00
merge with 2024.2.0
This commit is contained in:
lightest
commit
a897cf5945
25
.github/workflows/main.yml
vendored
Normal file
25
.github/workflows/main.yml
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
name: Build Branch
|
||||
on: workflow_dispatch
|
||||
|
||||
jobs:
|
||||
build_all:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
with:
|
||||
path: app
|
||||
- uses: actions/setup-node@master
|
||||
with:
|
||||
node-version: 19
|
||||
- name: Install Node dependencies
|
||||
run: |
|
||||
cd app
|
||||
npm install
|
||||
|
||||
- name: Build
|
||||
run: |
|
||||
cd app
|
||||
echo "testing GITHUB_REF with details availability: ${GITHUB_REF#refs/heads/}"
|
||||
npm run build:js && npm run build:css
|
||||
echo "executing ls out on the directory:"
|
||||
ls out
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -1,3 +1,6 @@
|
||||
.vscode/
|
||||
dist
|
||||
out
|
||||
node_modules
|
||||
src/test_experiment.js
|
||||
src/test_resources
|
||||
|
||||
1228
package-lock.json
generated
1228
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "psychojs",
|
||||
"version": "2023.2.0",
|
||||
"version": "2024.2.0",
|
||||
"private": true,
|
||||
"description": "Helps run in-browser neuroscience, psychology, and psychophysics experiments",
|
||||
"license": "MIT",
|
||||
@ -15,6 +15,9 @@
|
||||
},
|
||||
"main": "./src/index.js",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"vitebuild": "vite build",
|
||||
"preview": "vite preview",
|
||||
"build": "npm run build:js && npm run build:css && npm run build:docs",
|
||||
"build:css": "node ./scripts/build.css.cjs",
|
||||
"build:docs": "jsdoc src -c jsdoc.json & cp jsdoc.css docs/styles/",
|
||||
@ -31,6 +34,7 @@
|
||||
"a11y-dialog": "^7.5.0",
|
||||
"docdash": "^1.2.0",
|
||||
"esbuild-plugin-glsl": "^1.0.5",
|
||||
"gifuct-js": "^2.1.2",
|
||||
"howler": "^2.2.1",
|
||||
"log4javascript": "github:Ritzlgrmft/log4javascript",
|
||||
"pako": "^1.0.10",
|
||||
@ -41,6 +45,8 @@
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^5.1.6",
|
||||
"vite-plugin-glsl": "^1.2.1",
|
||||
"csslint": "^1.0.5",
|
||||
"dprint": "^0.15.3",
|
||||
"esbuild": "^0.12.1",
|
||||
|
||||
@ -49,6 +49,12 @@ export class EventManager
|
||||
// clock reset when mouse is moved:
|
||||
moveClock: new Clock(),
|
||||
};
|
||||
|
||||
// storing touches in both map and array for fast search and fast access if touchID is known
|
||||
this._touchInfo = {
|
||||
touchesArray: [],
|
||||
touchesMap: {}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
@ -140,6 +146,19 @@ export class EventManager
|
||||
return this._mouseInfo;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns all the data gathered about touches.
|
||||
*
|
||||
* @name module:core.EventManager#getTouchInfo
|
||||
* @function
|
||||
* @public
|
||||
* @return {object} the touch info.
|
||||
*/
|
||||
getTouchInfo ()
|
||||
{
|
||||
return this._touchInfo;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all events from the event buffer.
|
||||
*
|
||||
@ -200,7 +219,6 @@ export class EventManager
|
||||
|
||||
self._mouseInfo.buttons.pressed[event.button] = 1;
|
||||
self._mouseInfo.buttons.times[event.button] = self._psychoJS._monotonicClock.getTime() - self._mouseInfo.buttons.clocks[event.button].getLastResetTime();
|
||||
|
||||
self._mouseInfo.pos = [event.offsetX, event.offsetY];
|
||||
|
||||
this._psychoJS.experimentLogger.data("Mouse: " + event.button + " button down, pos=(" + self._mouseInfo.pos[0] + "," + self._mouseInfo.pos[1] + ")");
|
||||
@ -212,10 +230,21 @@ export class EventManager
|
||||
|
||||
self._mouseInfo.buttons.pressed[0] = 1;
|
||||
self._mouseInfo.buttons.times[0] = self._psychoJS._monotonicClock.getTime() - self._mouseInfo.buttons.clocks[0].getLastResetTime();
|
||||
self._mouseInfo.pos = [event.changedTouches[0].pageX, event.changedTouches[0].pageY];
|
||||
|
||||
// we use the first touch, discarding all others:
|
||||
const touches = event.changedTouches;
|
||||
self._mouseInfo.pos = [touches[0].pageX, touches[0].pageY];
|
||||
this._touchInfo.touchesArray = new Array(event.touches.length);
|
||||
this._touchInfo.touchesMap = {};
|
||||
let i;
|
||||
for (i = 0; i < event.touches.length; i++)
|
||||
{
|
||||
this._touchInfo.touchesArray[i] = {
|
||||
id: event.touches[i].identifier,
|
||||
force: event.touches[i].force,
|
||||
pos: [event.touches[i].pageX, event.touches[i].pageY],
|
||||
busy: false
|
||||
};
|
||||
this._touchInfo.touchesMap[event.touches[i].identifier] = this._touchInfo.touchesArray[i];
|
||||
}
|
||||
|
||||
this._psychoJS.experimentLogger.data("Mouse: " + event.button + " button down, pos=(" + self._mouseInfo.pos[0] + "," + self._mouseInfo.pos[1] + ")");
|
||||
}, false);
|
||||
@ -249,10 +278,20 @@ export class EventManager
|
||||
|
||||
self._mouseInfo.buttons.pressed[0] = 0;
|
||||
self._mouseInfo.buttons.times[0] = self._psychoJS._monotonicClock.getTime() - self._mouseInfo.buttons.clocks[0].getLastResetTime();
|
||||
self._mouseInfo.pos = [event.changedTouches[0].pageX, event.changedTouches[0].pageY];
|
||||
|
||||
// we use the first touch, discarding all others:
|
||||
const touches = event.changedTouches;
|
||||
self._mouseInfo.pos = [touches[0].pageX, touches[0].pageY];
|
||||
this._touchInfo.touchesArray = new Array(event.touches.length);
|
||||
this._touchInfo.touchesMap = {};
|
||||
let i;
|
||||
for (i = 0; i < event.touches.length; i++)
|
||||
{
|
||||
this._touchInfo.touchesArray[i] = {
|
||||
id: event.touches[i].identifier,
|
||||
force: event.touches[i].force,
|
||||
pos: [event.touches[i].pageX, event.touches[i].pageY]
|
||||
};
|
||||
this._touchInfo.touchesMap[event.touches[i].identifier] = this._touchInfo.touchesArray[i];
|
||||
}
|
||||
|
||||
this._psychoJS.experimentLogger.data("Mouse: " + event.button + " button up, pos=(" + self._mouseInfo.pos[0] + "," + self._mouseInfo.pos[1] + ")");
|
||||
}, false);
|
||||
@ -270,10 +309,20 @@ export class EventManager
|
||||
event.preventDefault();
|
||||
|
||||
self._mouseInfo.moveClock.reset();
|
||||
self._mouseInfo.pos = [event.changedTouches[0].pageX, event.changedTouches[0].pageY];
|
||||
|
||||
// we use the first touch, discarding all others:
|
||||
const touches = event.changedTouches;
|
||||
self._mouseInfo.pos = [touches[0].pageX, touches[0].pageY];
|
||||
this._touchInfo.touchesArray = new Array(event.touches.length);
|
||||
this._touchInfo.touchesMap = {};
|
||||
let i;
|
||||
for (i = 0; i < event.touches.length; i++)
|
||||
{
|
||||
this._touchInfo.touchesArray[i] = {
|
||||
id: event.touches[i].identifier,
|
||||
force: event.touches[i].force,
|
||||
pos: [event.touches[i].pageX, event.touches[i].pageY]
|
||||
};
|
||||
this._touchInfo.touchesMap[event.touches[i].identifier] = this._touchInfo.touchesArray[i];
|
||||
}
|
||||
}, false);
|
||||
|
||||
// (*) wheel
|
||||
|
||||
@ -314,6 +314,46 @@ export class ServerManager extends PsychObject
|
||||
return pathStatusData.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get full data of a resource.
|
||||
*
|
||||
* @name module:core.ServerManager#getFullResourceData
|
||||
* @function
|
||||
* @public
|
||||
* @param {string} name - name of the requested resource
|
||||
* @param {boolean} [errorIfNotDownloaded = false] whether or not to throw an exception if the
|
||||
* resource status is not DOWNLOADED
|
||||
* @return {Object} full available data for resource, or undefined if the resource has been registered
|
||||
* but not downloaded yet.
|
||||
* @throws {Object.<string, *>} exception if no resource with that name has previously been registered
|
||||
*/
|
||||
getFullResourceData (name, errorIfNotDownloaded = false)
|
||||
{
|
||||
const response = {
|
||||
origin: "ServerManager.getResource",
|
||||
context: "when getting the value of resource: " + name,
|
||||
};
|
||||
|
||||
const pathStatusData = this._resources.get(name);
|
||||
|
||||
if (typeof pathStatusData === "undefined")
|
||||
{
|
||||
|
||||
// throw { ...response, error: 'unknown resource' };
|
||||
throw Object.assign(response, { error: "unknown resource" });
|
||||
}
|
||||
|
||||
if (errorIfNotDownloaded && pathStatusData.status !== ServerManager.ResourceStatus.DOWNLOADED)
|
||||
{
|
||||
throw Object.assign(response, {
|
||||
error: name + " is not available for use (yet), its current status is: "
|
||||
+ util.toString(pathStatusData.status),
|
||||
});
|
||||
}
|
||||
|
||||
return pathStatusData;
|
||||
}
|
||||
|
||||
/**
|
||||
* Release a resource.
|
||||
*
|
||||
@ -662,6 +702,19 @@ export class ServerManager extends PsychObject
|
||||
}
|
||||
}
|
||||
|
||||
cacheResourceData (name, dataToCache)
|
||||
{
|
||||
const pathStatusData = this._resources.get(name);
|
||||
|
||||
if (typeof pathStatusData === "undefined")
|
||||
{
|
||||
// throw { ...response, error: 'unknown resource' };
|
||||
throw Object.assign(response, { error: "unknown resource" });
|
||||
}
|
||||
|
||||
pathStatusData.cachedData = dataToCache;
|
||||
}
|
||||
|
||||
/**
|
||||
* Block the experiment until the specified resources have been downloaded.
|
||||
*
|
||||
@ -1265,7 +1318,7 @@ export class ServerManager extends PsychObject
|
||||
const pathExtension = (pathParts.length > 1) ? pathParts.pop() : undefined;
|
||||
|
||||
// preload.js with forced binary:
|
||||
if (["csv", "odp", "xls", "xlsx", "json"].indexOf(extension) > -1)
|
||||
if (["csv", "odp", "xls", "xlsx", "json", "gif"].indexOf(extension) > -1)
|
||||
{
|
||||
preloadManifest.push(/*new createjs.LoadItem().set(*/ {
|
||||
id: name,
|
||||
@ -1310,7 +1363,7 @@ export class ServerManager extends PsychObject
|
||||
preloadManifest.push(/*new createjs.LoadItem().set(*/ {
|
||||
id: name,
|
||||
src: pathStatusData.path,
|
||||
crossOrigin: "Anonymous",
|
||||
crossOrigin: "Anonymous"
|
||||
} /*)*/);
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,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
|
||||
@ -71,6 +73,8 @@ export class Window extends PsychObject
|
||||
name,
|
||||
fullscr = false,
|
||||
color = new Color("black"),
|
||||
backgroundImage = "",
|
||||
backgroundFit = "cover",
|
||||
gamma = 1,
|
||||
contrast = 1,
|
||||
units = "pix",
|
||||
@ -93,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;
|
||||
});
|
||||
@ -108,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();
|
||||
@ -139,6 +141,12 @@ export class Window extends PsychObject
|
||||
}
|
||||
}
|
||||
|
||||
static BACKGROUND_FIT_ENUM = {
|
||||
cover: 0,
|
||||
contain: 1,
|
||||
auto: 2
|
||||
};
|
||||
|
||||
/**
|
||||
* Close the window.
|
||||
*
|
||||
@ -152,7 +160,7 @@ export class Window extends PsychObject
|
||||
}
|
||||
|
||||
this._rootContainer.destroy();
|
||||
|
||||
|
||||
if (document.body.contains(this._renderer.view))
|
||||
{
|
||||
document.body.removeChild(this._renderer.view);
|
||||
@ -166,7 +174,6 @@ export class Window extends PsychObject
|
||||
}
|
||||
|
||||
this._renderer.destroy();
|
||||
|
||||
window.removeEventListener("resize", this._resizeCallback);
|
||||
window.removeEventListener("orientationchange", this._resizeCallback);
|
||||
|
||||
@ -316,7 +323,7 @@ export class Window extends PsychObject
|
||||
*/
|
||||
removePixiObject(pixiObject)
|
||||
{
|
||||
this._stimsContainer.removeChild(pixiObject);
|
||||
this._stimsContainer.removeChild(pixiObject);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -361,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.
|
||||
*
|
||||
@ -373,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
|
||||
@ -467,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];
|
||||
@ -477,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];
|
||||
|
||||
@ -490,28 +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) =>
|
||||
{
|
||||
// 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);
|
||||
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();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -544,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}.
|
||||
*
|
||||
|
||||
14
src/index.html
Normal file
14
src/index.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Test Experiment</title>
|
||||
<link rel="stylesheet" href="./index.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/preloadjs@1.0.1/lib/preloadjs.min.js"></script>
|
||||
<script type="module" src="test_experiment.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
src/test_resources/cool.gif
Normal file
BIN
src/test_resources/cool.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 868 KiB |
BIN
src/test_resources/delorean.gif
Normal file
BIN
src/test_resources/delorean.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 MiB |
278
src/util/GifParser.js
Normal file
278
src/util/GifParser.js
Normal file
@ -0,0 +1,278 @@
|
||||
/**
|
||||
* Tool for parsing gif files and decoding it's data to frames.
|
||||
*
|
||||
* @author "Matt Way" (https://github.com/matt-way), Nikita Agafonov (https://github.com/lightest)
|
||||
* @copyright (c) 2015 Matt Way, (c) 2020-2022 Open Science Tools Ltd. (https://opensciencetools.org)
|
||||
* @license Distributed under the terms of the MIT License
|
||||
*
|
||||
* @note Based on https://github.com/matt-way/gifuct-js
|
||||
*
|
||||
*/
|
||||
|
||||
import GIF from 'js-binary-schema-parser/lib/schemas/gif'
|
||||
import { parse } from 'js-binary-schema-parser'
|
||||
import { buildStream } from 'js-binary-schema-parser/lib/parsers/uint8'
|
||||
|
||||
/**
|
||||
* Deinterlace function from https://github.com/shachaf/jsgif
|
||||
*/
|
||||
|
||||
export const deinterlace = (pixels, width) => {
|
||||
const newPixels = new Array(pixels.length)
|
||||
const rows = pixels.length / width
|
||||
const cpRow = function(toRow, fromRow) {
|
||||
const fromPixels = pixels.slice(fromRow * width, (fromRow + 1) * width)
|
||||
newPixels.splice.apply(newPixels, [toRow * width, width].concat(fromPixels))
|
||||
}
|
||||
|
||||
// See appendix E.
|
||||
const offsets = [0, 4, 2, 1]
|
||||
const steps = [8, 8, 4, 2]
|
||||
|
||||
var fromRow = 0
|
||||
for (var pass = 0; pass < 4; pass++) {
|
||||
for (var toRow = offsets[pass]; toRow < rows; toRow += steps[pass]) {
|
||||
cpRow(toRow, fromRow)
|
||||
fromRow++
|
||||
}
|
||||
}
|
||||
|
||||
return newPixels
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* javascript port of java LZW decompression
|
||||
* Original java author url: https://gist.github.com/devunwired/4479231
|
||||
*/
|
||||
|
||||
export const lzw = (minCodeSize, data, pixelCount, memoryBuffer, bufferOffset) => {
|
||||
const MAX_STACK_SIZE = 4096
|
||||
const nullCode = -1
|
||||
const npix = pixelCount
|
||||
var available,
|
||||
clear,
|
||||
code_mask,
|
||||
code_size,
|
||||
end_of_information,
|
||||
in_code,
|
||||
old_code,
|
||||
bits,
|
||||
code,
|
||||
i,
|
||||
datum,
|
||||
data_size,
|
||||
first,
|
||||
top,
|
||||
bi,
|
||||
pi
|
||||
|
||||
// const dstPixels = new Array(pixelCount)
|
||||
// const prefix = new Array(MAX_STACK_SIZE)
|
||||
// const suffix = new Array(MAX_STACK_SIZE)
|
||||
// const pixelStack = new Array(MAX_STACK_SIZE + 1)
|
||||
|
||||
const dstPixels = new Uint8Array(memoryBuffer, bufferOffset, pixelCount)
|
||||
const prefix = new Uint16Array(MAX_STACK_SIZE)
|
||||
const suffix = new Uint16Array(MAX_STACK_SIZE)
|
||||
const pixelStack = new Uint8Array(MAX_STACK_SIZE + 1)
|
||||
|
||||
// Initialize GIF data stream decoder.
|
||||
data_size = minCodeSize
|
||||
clear = 1 << data_size
|
||||
end_of_information = clear + 1
|
||||
available = clear + 2
|
||||
old_code = nullCode
|
||||
code_size = data_size + 1
|
||||
code_mask = (1 << code_size) - 1
|
||||
for (code = 0; code < clear; code++) {
|
||||
// prefix[code] = 0
|
||||
suffix[code] = code
|
||||
}
|
||||
|
||||
// Decode GIF pixel stream.
|
||||
var datum, bits, count, first, top, pi, bi
|
||||
datum = bits = count = first = top = pi = bi = 0
|
||||
for (i = 0; i < npix; ) {
|
||||
if (top === 0) {
|
||||
if (bits < code_size) {
|
||||
// get the next byte
|
||||
datum += data[bi] << bits
|
||||
|
||||
bits += 8
|
||||
bi++
|
||||
continue
|
||||
}
|
||||
// Get the next code.
|
||||
code = datum & code_mask
|
||||
datum >>= code_size
|
||||
bits -= code_size
|
||||
// Interpret the code
|
||||
if (code > available || code == end_of_information) {
|
||||
break
|
||||
}
|
||||
if (code == clear) {
|
||||
// Reset decoder.
|
||||
code_size = data_size + 1
|
||||
code_mask = (1 << code_size) - 1
|
||||
available = clear + 2
|
||||
old_code = nullCode
|
||||
continue
|
||||
}
|
||||
if (old_code == nullCode) {
|
||||
pixelStack[top++] = suffix[code]
|
||||
old_code = code
|
||||
first = code
|
||||
continue
|
||||
}
|
||||
in_code = code
|
||||
if (code == available) {
|
||||
pixelStack[top++] = first
|
||||
code = old_code
|
||||
}
|
||||
while (code > clear) {
|
||||
pixelStack[top++] = suffix[code]
|
||||
code = prefix[code]
|
||||
}
|
||||
|
||||
first = suffix[code] & 0xff
|
||||
pixelStack[top++] = first
|
||||
|
||||
// add a new string to the table, but only if space is available
|
||||
// if not, just continue with current table until a clear code is found
|
||||
// (deferred clear code implementation as per GIF spec)
|
||||
if (available < MAX_STACK_SIZE) {
|
||||
prefix[available] = old_code
|
||||
suffix[available] = first
|
||||
available++
|
||||
if ((available & code_mask) === 0 && available < MAX_STACK_SIZE) {
|
||||
code_size++
|
||||
code_mask += available
|
||||
}
|
||||
}
|
||||
old_code = in_code
|
||||
}
|
||||
// Pop a pixel off the pixel stack.
|
||||
top--
|
||||
dstPixels[pi++] = pixelStack[top]
|
||||
i++
|
||||
}
|
||||
|
||||
// for (i = pi; i < npix; i++) {
|
||||
// dstPixels[i] = 0 // clear missing pixels
|
||||
// }
|
||||
|
||||
return dstPixels
|
||||
}
|
||||
|
||||
export const parseGIF = arrayBuffer => {
|
||||
const byteData = new Uint8Array(arrayBuffer)
|
||||
return parse(buildStream(byteData), GIF)
|
||||
}
|
||||
|
||||
const generatePatch = image => {
|
||||
const totalPixels = image.pixels.length
|
||||
const patchData = new Uint8ClampedArray(totalPixels * 4)
|
||||
for (var i = 0; i < totalPixels; i++) {
|
||||
const pos = i * 4
|
||||
const colorIndex = image.pixels[i]
|
||||
const color = image.colorTable[colorIndex] || [0, 0, 0]
|
||||
patchData[pos] = color[0]
|
||||
patchData[pos + 1] = color[1]
|
||||
patchData[pos + 2] = color[2]
|
||||
patchData[pos + 3] = colorIndex !== image.transparentIndex ? 255 : 0
|
||||
}
|
||||
|
||||
return patchData
|
||||
}
|
||||
|
||||
export const decompressFrame = (frame, gct, buildImagePatch, memoryBuffer, memoryOffset) => {
|
||||
if (!frame.image) {
|
||||
console.warn('gif frame does not have associated image.')
|
||||
return
|
||||
}
|
||||
|
||||
const { image } = frame
|
||||
|
||||
// get the number of pixels
|
||||
const totalPixels = image.descriptor.width * image.descriptor.height
|
||||
// do lzw decompression
|
||||
var pixels = lzw(image.data.minCodeSize, image.data.blocks, totalPixels, memoryBuffer, memoryOffset)
|
||||
|
||||
// deal with interlacing if necessary
|
||||
if (image.descriptor.lct.interlaced) {
|
||||
pixels = deinterlace(pixels, image.descriptor.width)
|
||||
}
|
||||
|
||||
const resultImage = {
|
||||
pixels: pixels,
|
||||
dims: {
|
||||
top: frame.image.descriptor.top,
|
||||
left: frame.image.descriptor.left,
|
||||
width: frame.image.descriptor.width,
|
||||
height: frame.image.descriptor.height
|
||||
}
|
||||
}
|
||||
|
||||
// color table
|
||||
if (image.descriptor.lct && image.descriptor.lct.exists) {
|
||||
resultImage.colorTable = image.lct
|
||||
} else {
|
||||
resultImage.colorTable = gct
|
||||
}
|
||||
|
||||
// add per frame relevant gce information
|
||||
if (frame.gce) {
|
||||
resultImage.delay = (frame.gce.delay || 10) * 10 // convert to ms
|
||||
resultImage.disposalType = frame.gce.extras.disposal
|
||||
// transparency
|
||||
if (frame.gce.extras.transparentColorGiven) {
|
||||
resultImage.transparentIndex = frame.gce.transparentColorIndex
|
||||
}
|
||||
}
|
||||
|
||||
// create canvas usable imagedata if desired
|
||||
if (buildImagePatch) {
|
||||
resultImage.patch = generatePatch(resultImage)
|
||||
}
|
||||
|
||||
return resultImage
|
||||
}
|
||||
|
||||
export const decompressFrames = (parsedGif, buildImagePatches) => {
|
||||
// return parsedGif.frames
|
||||
// .filter(f => f.image)
|
||||
// .map(f => decompressFrame(f, parsedGif.gct, buildImagePatches))
|
||||
let totalPixels = 0;
|
||||
let framesWithData = 0;
|
||||
let out ;
|
||||
let i, j = 0;
|
||||
|
||||
for (i = 0; i < parsedGif.frames.length; i++) {
|
||||
if (parsedGif.frames[i].image)
|
||||
{
|
||||
totalPixels += parsedGif.frames[i].image.descriptor.width * parsedGif.frames[i].image.descriptor.height;
|
||||
framesWithData++;
|
||||
}
|
||||
}
|
||||
|
||||
// const dstPixels = new Uint16Array(totalPixels);
|
||||
// let frameStart = 0;
|
||||
// let frameEnd = 0;
|
||||
|
||||
const buf = new ArrayBuffer(totalPixels);
|
||||
let bufOffset = 0;
|
||||
out = new Array(framesWithData);
|
||||
|
||||
for (i = 0; i < parsedGif.frames.length; i++) {
|
||||
if (parsedGif.frames[i].image)
|
||||
{
|
||||
out[j] = decompressFrame(parsedGif.frames[i], parsedGif.gct, buildImagePatches, buf, bufOffset);
|
||||
bufOffset += parsedGif.frames[i].image.descriptor.width * parsedGif.frames[i].image.descriptor.height;
|
||||
// out[j] = decompressFrame(parsedGif.frames[i], parsedGif.gct, buildImagePatches, prefix, suffix, pixelStack, dstPixels, frameStart, frameEnd);
|
||||
j++;
|
||||
}
|
||||
}
|
||||
|
||||
return out;
|
||||
}
|
||||
441
src/visual/AnimatedGIF.js
Normal file
441
src/visual/AnimatedGIF.js
Normal file
@ -0,0 +1,441 @@
|
||||
/**
|
||||
* Animated gif sprite.
|
||||
*
|
||||
* @author Nikita Agafonov (https://github.com/lightest), Matt Karl (https://github.com/bigtimebuddy)
|
||||
* @copyright (c) 2020-2022 Open Science Tools Ltd. (https://opensciencetools.org)
|
||||
* @license Distributed under the terms of the MIT License
|
||||
*
|
||||
* @note Based on https://github.com/pixijs/gif and heavily modified.
|
||||
*
|
||||
*/
|
||||
|
||||
import * as PIXI from "pixi.js-legacy";
|
||||
|
||||
/**
|
||||
* Runtime object to play animated GIFs. This object is similar to an AnimatedSprite.
|
||||
* It support playback (seek, play, stop) as well as animation speed and looping.
|
||||
*/
|
||||
class AnimatedGIF extends PIXI.Sprite
|
||||
{
|
||||
/**
|
||||
* Default options for all AnimatedGIF objects.
|
||||
* @property {PIXI.SCALE_MODES} [scaleMode=PIXI.SCALE_MODES.LINEAR] - Scale mode to use for the texture.
|
||||
* @property {boolean} [loop=true] - To enable looping.
|
||||
* @property {number} [animationSpeed=1] - Speed of the animation.
|
||||
* @property {boolean} [autoUpdate=true] - Set to `false` to manage updates yourself.
|
||||
* @property {boolean} [autoPlay=true] - To start playing right away.
|
||||
* @property {Function} [onComplete=null] - The completed callback, optional.
|
||||
* @property {Function} [onLoop=null] - The loop callback, optional.
|
||||
* @property {Function} [onFrameChange=null] - The frame callback, optional.
|
||||
* @property {number} [fps=PIXI.Ticker.shared.FPS] - Default FPS.
|
||||
*/
|
||||
static defaultOptions = {
|
||||
scaleMode: PIXI.SCALE_MODES.LINEAR,
|
||||
fps: PIXI.Ticker.shared.FPS,
|
||||
loop: true,
|
||||
animationSpeed: 1,
|
||||
autoPlay: true,
|
||||
autoUpdate: true,
|
||||
onComplete: null,
|
||||
onFrameChange: null,
|
||||
onLoop: null
|
||||
};
|
||||
|
||||
/**
|
||||
* @param frames - Data of the GIF image.
|
||||
* @param options - Options for the AnimatedGIF
|
||||
*/
|
||||
constructor(decompressedFrames, options)
|
||||
{
|
||||
// Get the options, apply defaults
|
||||
const { scaleMode, width, height, ...rest } = Object.assign({},
|
||||
AnimatedGIF.defaultOptions,
|
||||
options
|
||||
);
|
||||
|
||||
super(new PIXI.Texture(PIXI.BaseTexture.fromBuffer(new Uint8Array(width * height * 4), width, height, options)));
|
||||
this._name = options.name;
|
||||
this._useFullFrames = false;
|
||||
this._decompressedFrameData = decompressedFrames;
|
||||
this._origDims = { width, height };
|
||||
let i, j, time = 0;
|
||||
this._frameTimings = new Array(decompressedFrames.length);
|
||||
for (i = 0; i < decompressedFrames.length; i++)
|
||||
{
|
||||
this._frameTimings[i] =
|
||||
{
|
||||
start: time,
|
||||
end: time + decompressedFrames[i].delay
|
||||
};
|
||||
time += decompressedFrames[i].delay;
|
||||
}
|
||||
this.duration = this._frameTimings[decompressedFrames.length - 1].end;
|
||||
this._fullPixelData = [];
|
||||
if (options.fullFrames !== undefined && options.fullFrames.length > 0)
|
||||
{
|
||||
this._fullPixelData = options.fullFrames;
|
||||
this._useFullFrames = true;
|
||||
}
|
||||
this._playing = false;
|
||||
this._currentTime = 0;
|
||||
this._isConnectedToTicker = false;
|
||||
Object.assign(this, rest);
|
||||
|
||||
// Draw the first frame
|
||||
this.currentFrame = 0;
|
||||
this._prevRenderedFrameIdx = -1;
|
||||
if (this.autoPlay)
|
||||
{
|
||||
this.play();
|
||||
}
|
||||
}
|
||||
|
||||
static updatePixelsForOneFrame (decompressedFrameData, pixelBuffer, gifWidth)
|
||||
{
|
||||
let i = 0;
|
||||
let patchRow = 0, patchCol = 0;
|
||||
let offset = 0;
|
||||
let colorData;
|
||||
|
||||
if (decompressedFrameData.pixels.length === pixelBuffer.length / 4)
|
||||
{
|
||||
// Not all GIF files are perfectly optimized
|
||||
// and instead of having tiny patch of pixels that actually changed from previous frame
|
||||
// they would have a full next frame.
|
||||
// Knowing that, we can go faster by skipping math needed to determine where to put new pixels
|
||||
// and just place them 1 to 1 over existing frame (probably internal browser optimizations also kick in).
|
||||
// For large amounts of gifs running simultaniously this results in 58+FPS vs 15-25+FPS for "else" case.
|
||||
for (i = 0; i < decompressedFrameData.pixels.length; i++) {
|
||||
if (decompressedFrameData.pixels[i] !== decompressedFrameData.transparentIndex) {
|
||||
colorData = decompressedFrameData.colorTable[decompressedFrameData.pixels[i]];
|
||||
offset = i * 4;
|
||||
pixelBuffer[offset] = colorData[0];
|
||||
pixelBuffer[offset + 1] = colorData[1];
|
||||
pixelBuffer[offset + 2] = colorData[2];
|
||||
pixelBuffer[offset + 3] = 255;
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
for (i = 0; i < decompressedFrameData.pixels.length; i++) {
|
||||
if (decompressedFrameData.pixels[i] !== decompressedFrameData.transparentIndex) {
|
||||
colorData = decompressedFrameData.colorTable[decompressedFrameData.pixels[i]];
|
||||
patchRow = (i / decompressedFrameData.dims.width) | 0;
|
||||
patchCol = i % decompressedFrameData.dims.width;
|
||||
offset = (gifWidth * (decompressedFrameData.dims.top + patchRow) + decompressedFrameData.dims.left + patchCol) * 4;
|
||||
pixelBuffer[offset] = colorData[0];
|
||||
pixelBuffer[offset + 1] = colorData[1];
|
||||
pixelBuffer[offset + 2] = colorData[2];
|
||||
pixelBuffer[offset + 3] = 255;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
static computeFullFrames (decompressedFrames, gifWidth, gifHeight)
|
||||
{
|
||||
let t = performance.now();
|
||||
let i, j;
|
||||
let patchRow = 0, patchCol = 0;
|
||||
let offset = 0;
|
||||
let colorData;
|
||||
let pixelData = new Uint8Array(gifWidth * gifHeight * 4);
|
||||
let fullPixelData = new Uint8Array(gifWidth * gifHeight * 4 * decompressedFrames.length);
|
||||
for (i = 0; i < decompressedFrames.length; i++)
|
||||
{
|
||||
AnimatedGIF.updatePixelsForOneFrame(decompressedFrames[i], pixelData, gifWidth);
|
||||
fullPixelData.set(pixelData, pixelData.length * i);
|
||||
}
|
||||
console.log("full frames construction time", performance.now() - t);
|
||||
return fullPixelData;
|
||||
}
|
||||
|
||||
_constructNthFullFrame (desiredFrameIdx, prevRenderedFrameIdx, decompressedFrames, pixelBuffer)
|
||||
{
|
||||
let t = performance.now();
|
||||
// saving to variable instead of referencing object in the loop wins up to 5ms!
|
||||
// (at the moment of development observed on Win10, Chrome 103.0.5060.114 (Official Build) (64-bit))
|
||||
const gifWidth = this._origDims.width;
|
||||
let i;
|
||||
for (i = prevRenderedFrameIdx + 1; i <= desiredFrameIdx; i++)
|
||||
{
|
||||
// this._updatePixelsForOneFrame(decompressedFrames[i], pixelBuffer);
|
||||
AnimatedGIF.updatePixelsForOneFrame(decompressedFrames[i], pixelBuffer, gifWidth)
|
||||
}
|
||||
// console.log("constructed frames from", prevRenderedFrameIdx, "to", desiredFrameIdx, "(", desiredFrameIdx - prevRenderedFrameIdx, ")", performance.now() - t);
|
||||
}
|
||||
|
||||
/** Stops the animation. */
|
||||
stop()
|
||||
{
|
||||
if (!this._playing)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this._playing = false;
|
||||
if (this._autoUpdate && this._isConnectedToTicker)
|
||||
{
|
||||
PIXI.Ticker.shared.remove(this.update, this);
|
||||
this._isConnectedToTicker = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** Plays the animation. */
|
||||
play()
|
||||
{
|
||||
if (this._playing)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this._playing = true;
|
||||
if (this._autoUpdate && !this._isConnectedToTicker)
|
||||
{
|
||||
PIXI.Ticker.shared.add(this.update, this, PIXI.UPDATE_PRIORITY.HIGH);
|
||||
this._isConnectedToTicker = true;
|
||||
}
|
||||
|
||||
// If were on the last frame and stopped, play should resume from beginning
|
||||
if (!this.loop && this.currentFrame === this._decompressedFrameData.length - 1)
|
||||
{
|
||||
this._currentTime = 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current progress of the animation from 0 to 1.
|
||||
* @readonly
|
||||
*/
|
||||
get progress()
|
||||
{
|
||||
return this._currentTime / this.duration;
|
||||
}
|
||||
|
||||
/** `true` if the current animation is playing */
|
||||
get playing()
|
||||
{
|
||||
return this._playing;
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the object transform for rendering. You only need to call this
|
||||
* if the `autoUpdate` property is set to `false`.
|
||||
*
|
||||
* @param deltaTime - Time since last tick.
|
||||
*/
|
||||
update(deltaTime)
|
||||
{
|
||||
if (!this._playing)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
const elapsed = this.animationSpeed * deltaTime / PIXI.settings.TARGET_FPMS;
|
||||
const currentTime = this._currentTime + elapsed;
|
||||
const localTime = currentTime % this.duration;
|
||||
|
||||
const localFrame = this._frameTimings.findIndex((ft) =>
|
||||
ft.start <= localTime && ft.end > localTime);
|
||||
|
||||
if (this._prevRenderedFrameIdx > localFrame)
|
||||
{
|
||||
this._prevRenderedFrameIdx = -1;
|
||||
}
|
||||
|
||||
if (currentTime >= this.duration)
|
||||
{
|
||||
if (this.loop)
|
||||
{
|
||||
this._currentTime = localTime;
|
||||
this.updateFrameIndex(localFrame);
|
||||
if (typeof this.onLoop === "function")
|
||||
{
|
||||
this.onLoop();
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
this._currentTime = this.duration;
|
||||
this.updateFrameIndex(this._decompressedFrameData.length - 1);
|
||||
if (typeof this.onComplete === "function")
|
||||
{
|
||||
this.onComplete();
|
||||
}
|
||||
this.stop();
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
this._currentTime = localTime;
|
||||
this.updateFrameIndex(localFrame);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Redraw the current frame, is necessary for the animation to work when
|
||||
*/
|
||||
updateFrame()
|
||||
{
|
||||
// if (!this.dirty)
|
||||
// {
|
||||
// return;
|
||||
// }
|
||||
|
||||
if (this._prevRenderedFrameIdx === this._currentFrame)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Update the current frame
|
||||
if (this._useFullFrames)
|
||||
{
|
||||
this.texture.baseTexture.resource.data = new Uint8Array
|
||||
(
|
||||
this._fullPixelData.buffer, this._currentFrame * this._origDims.width * this._origDims.height * 4,
|
||||
this._origDims.width * this._origDims.height * 4
|
||||
);
|
||||
}
|
||||
else
|
||||
{
|
||||
// this._updatePixelsForOneFrame(this._decompressedFrameData[this._currentFrame], this.texture.baseTexture.resource.data);
|
||||
this._constructNthFullFrame(this._currentFrame, this._prevRenderedFrameIdx, this._decompressedFrameData, this.texture.baseTexture.resource.data);
|
||||
}
|
||||
|
||||
this.texture.update();
|
||||
// Mark as clean
|
||||
// this.dirty = false;
|
||||
this._prevRenderedFrameIdx = this._currentFrame;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the object using the WebGL renderer
|
||||
*
|
||||
* @param {PIXI.Renderer} renderer - The renderer
|
||||
* @private
|
||||
*/
|
||||
_render(renderer)
|
||||
{
|
||||
let t = performance.now();
|
||||
this.updateFrame();
|
||||
// console.log("t2", this._name, performance.now() - t);
|
||||
super._render(renderer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the object using the WebGL renderer
|
||||
*
|
||||
* @param {PIXI.CanvasRenderer} renderer - The renderer
|
||||
* @private
|
||||
*/
|
||||
_renderCanvas(renderer)
|
||||
{
|
||||
this.updateFrame();
|
||||
super._renderCanvas(renderer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to use PIXI.Ticker.shared to auto update animation time.
|
||||
* @default true
|
||||
*/
|
||||
get autoUpdate()
|
||||
{
|
||||
return this._autoUpdate;
|
||||
}
|
||||
|
||||
set autoUpdate(value)
|
||||
{
|
||||
if (value !== this._autoUpdate)
|
||||
{
|
||||
this._autoUpdate = value;
|
||||
|
||||
if (!this._autoUpdate && this._isConnectedToTicker)
|
||||
{
|
||||
PIXI.Ticker.shared.remove(this.update, this);
|
||||
this._isConnectedToTicker = false;
|
||||
}
|
||||
else if (this._autoUpdate && !this._isConnectedToTicker && this._playing)
|
||||
{
|
||||
PIXI.Ticker.shared.add(this.update, this);
|
||||
this._isConnectedToTicker = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Set the current frame number */
|
||||
get currentFrame()
|
||||
{
|
||||
return this._currentFrame;
|
||||
}
|
||||
|
||||
set currentFrame(value)
|
||||
{
|
||||
this.updateFrameIndex(value);
|
||||
this._currentTime = this._frameTimings[value].start;
|
||||
}
|
||||
|
||||
/** Internally handle updating the frame index */
|
||||
updateFrameIndex(value)
|
||||
{
|
||||
if (value < 0 || value >= this._decompressedFrameData.length)
|
||||
{
|
||||
throw new Error(`Frame index out of range, expecting 0 to ${this.totalFrames}, got ${value}`);
|
||||
}
|
||||
if (this._currentFrame !== value)
|
||||
{
|
||||
this._currentFrame = value;
|
||||
// this.dirty = true;
|
||||
if (typeof this.onFrameChange === "function")
|
||||
{
|
||||
this.onFrameChange(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the total number of frame in the GIF.
|
||||
*/
|
||||
get totalFrames()
|
||||
{
|
||||
return this._decompressedFrameData.length;
|
||||
}
|
||||
|
||||
/** Destroy and don't use after this. */
|
||||
destroy()
|
||||
{
|
||||
this.stop();
|
||||
super.destroy(true);
|
||||
this._decompressedFrameData = null;
|
||||
this._fullPixelData = null;
|
||||
this.onComplete = null;
|
||||
this.onFrameChange = null;
|
||||
this.onLoop = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cloning the animation is a useful way to create a duplicate animation.
|
||||
* This maintains all the properties of the original animation but allows
|
||||
* you to control playback independent of the original animation.
|
||||
* If you want to create a simple copy, and not control independently,
|
||||
* then you can simply create a new Sprite, e.g. `const sprite = new Sprite(animation.texture)`.
|
||||
*/
|
||||
clone()
|
||||
{
|
||||
return new AnimatedGIF([...this._decompressedFrameData], {
|
||||
autoUpdate: this._autoUpdate,
|
||||
loop: this.loop,
|
||||
autoPlay: this.autoPlay,
|
||||
scaleMode: this.texture.baseTexture.scaleMode,
|
||||
animationSpeed: this.animationSpeed,
|
||||
width: this._origDims.width,
|
||||
height: this._origDims.height,
|
||||
onComplete: this.onComplete,
|
||||
onFrameChange: this.onFrameChange,
|
||||
onLoop: this.onLoop,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export { AnimatedGIF };
|
||||
@ -39,6 +39,7 @@ export class ButtonStim extends TextBox
|
||||
* @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(
|
||||
{
|
||||
@ -62,6 +63,7 @@ export class ButtonStim extends TextBox
|
||||
italic,
|
||||
autoDraw,
|
||||
autoLog,
|
||||
draggable,
|
||||
boxFn,
|
||||
multiline
|
||||
} = {},
|
||||
@ -90,6 +92,7 @@ export class ButtonStim extends TextBox
|
||||
alignment: "center",
|
||||
autoDraw,
|
||||
autoLog,
|
||||
draggable,
|
||||
boxFn
|
||||
});
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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",
|
||||
|
||||
515
src/visual/GifStim.js
Normal file
515
src/visual/GifStim.js
Normal file
@ -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.<number>} [options.pos= [0, 0]] - the position of the center of the stimulus
|
||||
* @param {string} [options.units= 'norm'] - the units of the stimulus vertices, size and position
|
||||
* @param {number} [options.ori= 0.0] - the orientation (in degrees)
|
||||
* @param {number} [options.size] - the size of the rendered image (the size of the image will be used if size is not specified)
|
||||
* @param {Color} [options.color= 'white'] the background color
|
||||
* @param {number} [options.opacity= 1.0] - the opacity
|
||||
* @param {number} [options.contrast= 1.0] - the contrast
|
||||
* @param {number} [options.depth= 0] - the depth (i.e. the z order)
|
||||
* @param {number} [options.texRes= 128] - the resolution of the text
|
||||
* @param {boolean} [options.loop= true] - whether or not to loop the animation
|
||||
* @param {boolean} [options.autoPlay= true] - whether or not to autoPlay the animation
|
||||
* @param {boolean} [options.animationSpeed= 1] - animation speed, works as multiplyer e.g. 1 - normal speed, 0.5 - half speed, 2 - twice as fast etc.
|
||||
* @param {boolean} [options.interpolate= false] - whether or not the image is interpolated
|
||||
* @param {boolean} [options.flipHoriz= false] - whether or not to flip horizontally
|
||||
* @param {boolean} [options.flipVert= false] - whether or not to flip vertically
|
||||
* @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
|
||||
*/
|
||||
export class GifStim extends util.mix(VisualStim).with(ColorMixin)
|
||||
{
|
||||
constructor({
|
||||
name,
|
||||
win,
|
||||
image,
|
||||
mask,
|
||||
precomputeFrames,
|
||||
pos,
|
||||
units,
|
||||
ori,
|
||||
size,
|
||||
color,
|
||||
opacity,
|
||||
contrast,
|
||||
texRes,
|
||||
depth,
|
||||
interpolate,
|
||||
loop,
|
||||
autoPlay,
|
||||
animationSpeed,
|
||||
flipHoriz,
|
||||
flipVert,
|
||||
autoDraw,
|
||||
autoLog
|
||||
} = {})
|
||||
{
|
||||
super({ name, win, units, ori, opacity, depth, pos, size, autoDraw, autoLog });
|
||||
|
||||
this._resource = undefined;
|
||||
|
||||
this._addAttribute("precomputeFrames", precomputeFrames, false);
|
||||
this._addAttribute("image", image);
|
||||
this._addAttribute("mask", mask);
|
||||
this._addAttribute("color", color, "white", this._onChange(true, false));
|
||||
this._addAttribute("contrast", contrast, 1.0, this._onChange(true, false));
|
||||
this._addAttribute("texRes", texRes, 128, this._onChange(true, false));
|
||||
this._addAttribute("interpolate", interpolate, false);
|
||||
this._addAttribute("flipHoriz", flipHoriz, false, this._onChange(false, false));
|
||||
this._addAttribute("flipVert", flipVert, false, this._onChange(false, false));
|
||||
this._addAttribute("loop", loop, true);
|
||||
this._addAttribute("autoPlay", autoPlay, true);
|
||||
this._addAttribute("animationSpeed", animationSpeed, 1);
|
||||
|
||||
// estimate the bounding box:
|
||||
this._estimateBoundingBox();
|
||||
|
||||
if (this._autoLog)
|
||||
{
|
||||
this._psychoJS.experimentLogger.exp(`Created ${this.name} = ${this.toString()}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for the playing property.
|
||||
*
|
||||
* @name module:visual.GifStim#isPlaying
|
||||
* @public
|
||||
*/
|
||||
get isPlaying ()
|
||||
{
|
||||
if (this._pixi)
|
||||
{
|
||||
return this._pixi.playing;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for the duration property. Shows animation duration time in milliseconds.
|
||||
*
|
||||
* @name module:visual.GifStim#duration
|
||||
* @public
|
||||
*/
|
||||
get duration ()
|
||||
{
|
||||
if (this._pixi)
|
||||
{
|
||||
return this._pixi.duration;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Starts GIF playback.
|
||||
*
|
||||
* @name module:visual.GifStim#play
|
||||
* @public
|
||||
*/
|
||||
play ()
|
||||
{
|
||||
if (this._pixi)
|
||||
{
|
||||
this._pixi.play();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Pauses GIF playback.
|
||||
*
|
||||
* @name module:visual.GifStim#pause
|
||||
* @public
|
||||
*/
|
||||
pause ()
|
||||
{
|
||||
if (this._pixi)
|
||||
{
|
||||
this._pixi.stop();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set wether or not to loop the animation.
|
||||
*
|
||||
* @name module:visual.GifStim#setLoop
|
||||
* @public
|
||||
* @param {boolean} [loop=true] - flag value
|
||||
* @param {boolean} [log=false] - whether or not to log.
|
||||
*/
|
||||
setLoop (loop, log = false)
|
||||
{
|
||||
this._setAttribute("loop", loop, log);
|
||||
if (this._pixi)
|
||||
{
|
||||
this._pixi.loop = loop;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set wether or not to autoplay the animation.
|
||||
*
|
||||
* @name module:visual.GifStim#setAutoPlay
|
||||
* @public
|
||||
* @param {boolean} [autoPlay=true] - flag value
|
||||
* @param {boolean} [log=false] - whether or not to log.
|
||||
*/
|
||||
setAutoPlay (autoPlay, log = false)
|
||||
{
|
||||
this._setAttribute("autoPlay", autoPlay, log);
|
||||
if (this._pixi)
|
||||
{
|
||||
this._pixi.autoPlay = autoPlay;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set animation speed of the animation.
|
||||
*
|
||||
* @name module:visual.GifStim#setAnimationSpeed
|
||||
* @public
|
||||
* @param {boolean} [animationSpeed=1] - multiplyer of the animation speed e.g. 1 - normal, 0.5 - half speed, 2 - twice as fast.
|
||||
* @param {boolean} [log=false] - whether or not to log.
|
||||
*/
|
||||
setAnimationSpeed (animationSpeed = 1, log = false)
|
||||
{
|
||||
this._setAttribute("animationSpeed", animationSpeed, log);
|
||||
if (this._pixi)
|
||||
{
|
||||
this._pixi.animationSpeed = animationSpeed;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setter for the image attribute.
|
||||
*
|
||||
* @name module:visual.GifStim#setImage
|
||||
* @public
|
||||
* @param {HTMLImageElement | string} image - the name of the image resource or HTMLImageElement corresponding to the image
|
||||
* @param {boolean} [log= false] - whether or not to log
|
||||
*/
|
||||
setImage(image, log = false)
|
||||
{
|
||||
const response = {
|
||||
origin: "GifStim.setImage",
|
||||
context: "when setting the image of GifStim: " + this._name,
|
||||
};
|
||||
|
||||
try
|
||||
{
|
||||
// image is undefined: that's fine but we raise a warning in case this is a symptom of an actual problem
|
||||
if (typeof image === "undefined")
|
||||
{
|
||||
this.psychoJS.logger.warn("setting the image of GifStim: " + this._name + " with argument: undefined.");
|
||||
this.psychoJS.logger.debug("set the image of GifStim: " + this._name + " as: undefined");
|
||||
}
|
||||
else if (typeof image === "string")
|
||||
{
|
||||
// image is a string: it should be the name of a resource, which we load
|
||||
const fullRD = this.psychoJS.serverManager.getFullResourceData(image);
|
||||
console.log("gif resource", fullRD);
|
||||
if (fullRD.cachedData === undefined)
|
||||
{
|
||||
// How GIF works: http://www.matthewflickinger.com/lab/whatsinagif/animation_and_transparency.asp
|
||||
let t0 = performance.now();
|
||||
let parsedGif = parseGIF(fullRD.data);
|
||||
let pt = performance.now() - t0;
|
||||
let t2 = performance.now();
|
||||
let decompressedFrames = decompressFrames(parsedGif, false);
|
||||
let dect = performance.now() - t2;
|
||||
let fullFrames;
|
||||
if (this._precomputeFrames)
|
||||
{
|
||||
fullFrames = AnimatedGIF.computeFullFrames(decompressedFrames, parsedGif.lsd.width, parsedGif.lsd.height);
|
||||
}
|
||||
this._resource = { parsedGif, decompressedFrames, fullFrames };
|
||||
this.psychoJS.serverManager.cacheResourceData(image, this._resource);
|
||||
console.log(`animated gif "${this._name}",`, "parse=", pt, "decompress=", dect);
|
||||
}
|
||||
else
|
||||
{
|
||||
this._resource = fullRD.cachedData;
|
||||
}
|
||||
|
||||
// this.psychoJS.logger.debug(`set resource of GifStim: ${this._name} as ArrayBuffer(${this._resource.length})`);
|
||||
const hasChanged = this._setAttribute("image", image, log);
|
||||
if (hasChanged)
|
||||
{
|
||||
this._onChange(true, true)();
|
||||
}
|
||||
}
|
||||
}
|
||||
catch (error)
|
||||
{
|
||||
throw Object.assign(response, { error });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setter for the mask attribute.
|
||||
*
|
||||
* @name module:visual.GifStim#setMask
|
||||
* @public
|
||||
* @param {HTMLImageElement | string} mask - the name of the mask resource or HTMLImageElement corresponding to the mask
|
||||
* @param {boolean} [log= false] - whether of not to log
|
||||
*/
|
||||
setMask(mask, log = false)
|
||||
{
|
||||
const response = {
|
||||
origin: "GifStim.setMask",
|
||||
context: "when setting the mask of GifStim: " + this._name,
|
||||
};
|
||||
|
||||
try
|
||||
{
|
||||
// mask is undefined: that's fine but we raise a warning in case this is a sympton of an actual problem
|
||||
if (typeof mask === "undefined")
|
||||
{
|
||||
this.psychoJS.logger.warn("setting the mask of GifStim: " + this._name + " with argument: undefined.");
|
||||
this.psychoJS.logger.debug("set the mask of GifStim: " + this._name + " as: undefined");
|
||||
}
|
||||
else
|
||||
{
|
||||
// mask is a string: it should be the name of a resource, which we load
|
||||
if (typeof mask === "string")
|
||||
{
|
||||
mask = this.psychoJS.serverManager.getResource(mask);
|
||||
}
|
||||
|
||||
// mask should now be an actual HTMLImageElement: we raise an error if it is not
|
||||
if (!(mask instanceof HTMLImageElement))
|
||||
{
|
||||
throw "the argument: " + mask.toString() + ' is not an image" }';
|
||||
}
|
||||
|
||||
this.psychoJS.logger.debug("set the mask of GifStim: " + this._name + " as: src= " + mask.src + ", size= " + mask.width + "x" + mask.height);
|
||||
}
|
||||
|
||||
this._setAttribute("mask", mask, log);
|
||||
this._onChange(true, false)();
|
||||
}
|
||||
catch (error)
|
||||
{
|
||||
throw Object.assign(response, { error });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to interpolate (linearly) the texture in the stimulus.
|
||||
*
|
||||
* @name module:visual.GifStim#setInterpolate
|
||||
* @public
|
||||
* @param {boolean} interpolate - interpolate or not.
|
||||
* @param {boolean} [log=false] - whether or not to log
|
||||
*/
|
||||
setInterpolate (interpolate = false, log = false)
|
||||
{
|
||||
this._setAttribute("interpolate", interpolate, log);
|
||||
if (this._pixi instanceof PIXI.Sprite) {
|
||||
this._pixi.texture.baseTexture.scaleMode = interpolate ? PIXI.SCALE_MODES.LINEAR : PIXI.SCALE_MODES.NEAREST;
|
||||
this._pixi.texture.baseTexture.update();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setter for the size attribute.
|
||||
*
|
||||
* @param {undefined | null | number | number[]} size - the stimulus size
|
||||
* @param {boolean} [log= false] - whether of not to log
|
||||
*/
|
||||
setSize(size, log = false)
|
||||
{
|
||||
// size is either undefined, null, or a tuple of numbers:
|
||||
if (typeof size !== "undefined" && size !== null)
|
||||
{
|
||||
size = util.toNumerical(size);
|
||||
if (!Array.isArray(size))
|
||||
{
|
||||
size = [size, size];
|
||||
}
|
||||
}
|
||||
|
||||
this._setAttribute("size", size, log);
|
||||
|
||||
if (this._pixi)
|
||||
{
|
||||
const size_px = util.to_px(size, this.units, this.win);
|
||||
const scaleX = size_px[0] / this._pixi.texture.width;
|
||||
const scaleY = size_px[1] / this._pixi.texture.height;
|
||||
this._pixi.scale.x = this.flipHoriz ? -scaleX : scaleX;
|
||||
this._pixi.scale.y = this.flipVert ? scaleY : -scaleY;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Estimate the bounding box.
|
||||
*
|
||||
* @name module:visual.GifStim#_estimateBoundingBox
|
||||
* @function
|
||||
* @override
|
||||
* @protected
|
||||
*/
|
||||
_estimateBoundingBox()
|
||||
{
|
||||
const size = this._getDisplaySize();
|
||||
if (typeof size !== "undefined")
|
||||
{
|
||||
this._boundingBox = new PIXI.Rectangle(
|
||||
this._pos[0] - size[0] / 2,
|
||||
this._pos[1] - size[1] / 2,
|
||||
size[0],
|
||||
size[1],
|
||||
);
|
||||
}
|
||||
|
||||
// TODO take the orientation into account
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the stimulus, if necessary.
|
||||
*
|
||||
* @name module:visual.GifStim#_updateIfNeeded
|
||||
* @private
|
||||
*/
|
||||
_updateIfNeeded()
|
||||
{
|
||||
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 = undefined;
|
||||
|
||||
// no image to draw: return immediately
|
||||
if (typeof this._resource === "undefined")
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
const gifOpts =
|
||||
{
|
||||
name: this._name,
|
||||
width: this._resource.parsedGif.lsd.width,
|
||||
height: this._resource.parsedGif.lsd.height,
|
||||
fullFrames: this._resource.fullFrames,
|
||||
scaleMode: this._interpolate ? PIXI.SCALE_MODES.LINEAR : PIXI.SCALE_MODES.NEAREST,
|
||||
loop: this._loop,
|
||||
autoPlay: this._autoPlay,
|
||||
animationSpeed: this._animationSpeed
|
||||
};
|
||||
|
||||
let t = performance.now();
|
||||
this._pixi = new AnimatedGIF(this._resource.decompressedFrames, gifOpts);
|
||||
console.log(`animatedGif "${this._name}" instancing:`, performance.now() - t);
|
||||
|
||||
// add a mask if need be:
|
||||
if (typeof this._mask !== "undefined")
|
||||
{
|
||||
// Building new PIXI.BaseTexture each time we create a mask, to avoid PIXI's caching and use a unique resource.
|
||||
this._pixi.mask = PIXI.Sprite.from(new PIXI.Texture(new PIXI.BaseTexture(this._mask)));
|
||||
|
||||
// a 0.5, 0.5 anchor is required for the mask to be aligned with the image
|
||||
this._pixi.mask.anchor.x = 0.5;
|
||||
this._pixi.mask.anchor.y = 0.5;
|
||||
this._pixi.addChild(this._pixi.mask);
|
||||
}
|
||||
|
||||
// since _texture.width may not be immediately available but the rest of the code needs its value
|
||||
// we arrange for repeated calls to _updateIfNeeded until we have a width:
|
||||
if (this._pixi.texture.width === 0)
|
||||
{
|
||||
this._needUpdate = true;
|
||||
this._needPixiUpdate = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this._pixi.zIndex = -this._depth;
|
||||
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._pixi.texture.width;
|
||||
const scaleY = size_px[1] / this._pixi.texture.height;
|
||||
this._pixi.scale.x = this.flipHoriz ? -scaleX : scaleX;
|
||||
this._pixi.scale.y = this.flipVert ? scaleY : -scaleY;
|
||||
|
||||
// set the position, rotation, and anchor (image centered on pos):
|
||||
this._pixi.position = to_pixiPoint(this.pos, this.units, this.win);
|
||||
this._pixi.rotation = -this.ori * Math.PI / 180;
|
||||
this._pixi.anchor.x = 0.5;
|
||||
this._pixi.anchor.y = 0.5;
|
||||
|
||||
// re-estimate the bounding box, as the texture's width may now be available:
|
||||
this._estimateBoundingBox();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the size of the display image, which is either that of the GifStim or that of the image
|
||||
* it contains.
|
||||
*
|
||||
* @name module:visual.GifStim#_getDisplaySize
|
||||
* @private
|
||||
* @return {number[]} the size of the displayed image
|
||||
*/
|
||||
_getDisplaySize()
|
||||
{
|
||||
let displaySize = this.size;
|
||||
|
||||
if (this._pixi && typeof displaySize === "undefined")
|
||||
{
|
||||
// use the size of the texture, if we have access to it:
|
||||
if (typeof this._pixi.texture !== "undefined" && this._pixi.texture.width > 0)
|
||||
{
|
||||
const textureSize = [this._pixi.texture.width, this._pixi.texture.height];
|
||||
displaySize = util.to_unit(textureSize, "pix", this.win, this.units);
|
||||
}
|
||||
}
|
||||
|
||||
return displaySize;
|
||||
}
|
||||
}
|
||||
@ -426,6 +426,7 @@ export class GratingStim extends VisualStim
|
||||
* @param {String} [options.blendmode= "avg"] - blend mode of the stimulus, determines how the stimulus is blended with the background. Supported values: "avg", "add", "mul", "screen".
|
||||
* @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,
|
||||
@ -448,10 +449,11 @@ export class GratingStim extends VisualStim
|
||||
blendmode,
|
||||
autoDraw,
|
||||
autoLog,
|
||||
maskParams
|
||||
maskParams,
|
||||
draggable
|
||||
} = {})
|
||||
{
|
||||
super({ name, win, units, ori, opacity, depth, pos, anchor, size, autoDraw, autoLog });
|
||||
super({ name, win, units, ori, opacity, depth, pos, anchor, size, autoDraw, autoLog, draggable });
|
||||
|
||||
this._adjustmentFilter = new AdjustmentFilter({
|
||||
contrast
|
||||
|
||||
@ -46,6 +46,7 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin)
|
||||
* @param {boolean} [options.flipVert= false] - whether or not to flip vertically
|
||||
* @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 {ImageStim.AspectRatioStrategy} [options.aspectRatio= ImageStim.AspectRatioStrategy.VARIABLE] - the aspect ratio handling strategy
|
||||
* @param {number} [options.blurVal= 0] - the blur value. Goes 0 to as hish as you like. 0 is no blur.
|
||||
*/
|
||||
@ -70,10 +71,11 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin)
|
||||
autoDraw,
|
||||
autoLog,
|
||||
aspectRatio,
|
||||
draggable,
|
||||
blurVal
|
||||
} = {})
|
||||
{
|
||||
super({ name, win, units, ori, opacity, depth, pos, anchor, size, autoDraw, autoLog });
|
||||
super({ name, win, units, ori, opacity, depth, pos, anchor, size, autoDraw, autoLog, draggable });
|
||||
|
||||
// Holds an instance of PIXI blur filter. Used if blur value is passed.
|
||||
this._blurFilter = undefined;
|
||||
@ -146,7 +148,7 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin)
|
||||
* Setter for the image attribute.
|
||||
*
|
||||
* @param {HTMLImageElement | string} image - the name of the image resource or HTMLImageElement corresponding to the image
|
||||
* @param {boolean} [log= false] - whether of not to log
|
||||
* @param {boolean} [log= false] - whether or not to log
|
||||
*/
|
||||
setImage(image, log = false)
|
||||
{
|
||||
@ -214,7 +216,7 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin)
|
||||
* Setter for the mask attribute.
|
||||
*
|
||||
* @param {HTMLImageElement | string} mask - the name of the mask resource or HTMLImageElement corresponding to the mask
|
||||
* @param {boolean} [log= false] - whether of not to log
|
||||
* @param {boolean} [log= false] - whether or not to log
|
||||
*/
|
||||
setMask(mask, log = false)
|
||||
{
|
||||
@ -272,6 +274,12 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the amount of blur for image stimuli.
|
||||
*
|
||||
* @param {number} blurVal - the amount of blur. 0 is no blur, max is as high as you like.
|
||||
* @param {boolean} [log=false] - whether or not to log.
|
||||
*/
|
||||
setBlurVal (blurVal = 0, log = false)
|
||||
{
|
||||
this._setAttribute("blurVal", blurVal, log);
|
||||
@ -299,6 +307,96 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setter for the size attribute.
|
||||
*
|
||||
* @param {undefined | null | number | number[]} size - the stimulus size
|
||||
* @param {boolean} [log= false] - whether or not to log
|
||||
*/
|
||||
setSize(size, log = false)
|
||||
{
|
||||
if (!Array.isArray(size))
|
||||
{
|
||||
size = [size, size];
|
||||
}
|
||||
|
||||
if (Array.isArray(size) && size.length <= 1)
|
||||
{
|
||||
size = [size[0], size[0]];
|
||||
}
|
||||
|
||||
for (let i = 0; i < size.length; i++)
|
||||
{
|
||||
try
|
||||
{
|
||||
size[i] = util.toNumerical(size[i]);
|
||||
}
|
||||
catch (err)
|
||||
{
|
||||
// Failed to convert to numeric. Set to NaN.
|
||||
size[ i ] = NaN;
|
||||
}
|
||||
}
|
||||
|
||||
if (this._texture !== undefined)
|
||||
{
|
||||
size = this._ensureNaNSizeConversion(size, this._texture);
|
||||
this._applySizeToPixi(size);
|
||||
}
|
||||
|
||||
this._setAttribute("size", size, log);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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);
|
||||
let scaleX = size_px[0] / this._texture.width;
|
||||
let scaleY = size_px[1] / this._texture.height;
|
||||
if (this.aspectRatio === ImageStim.AspectRatioStrategy.FIT_TO_WIDTH)
|
||||
{
|
||||
scaleY = scaleX;
|
||||
}
|
||||
else if (this.aspectRatio === ImageStim.AspectRatioStrategy.FIT_TO_HEIGHT)
|
||||
{
|
||||
scaleX = scaleY;
|
||||
}
|
||||
else if (this.aspectRatio === ImageStim.AspectRatioStrategy.HORIZONTAL_TILING)
|
||||
{
|
||||
scaleX = 1.0;
|
||||
scaleY = 1.0;
|
||||
}
|
||||
this._pixi.scale.x = this.flipHoriz ? -scaleX : scaleX;
|
||||
this._pixi.scale.y = this.flipVert ? scaleY : -scaleY;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensures to convert NaN in the size values to proper, numerical values using given texture dimensions.
|
||||
*
|
||||
* @param {Array} size
|
||||
*/
|
||||
_ensureNaNSizeConversion(size, pixiTex)
|
||||
{
|
||||
if (Number.isNaN(size[0]) && Number.isNaN(size[1]))
|
||||
{
|
||||
size = util.to_unit([pixiTex.width, pixiTex.height], "pix", this._win, this._units);
|
||||
}
|
||||
else if (Number.isNaN(size[0]))
|
||||
{
|
||||
size[0] = size[1] * (pixiTex.width / pixiTex.height);
|
||||
}
|
||||
else if (Number.isNaN(size[1]))
|
||||
{
|
||||
size[1] = size[0] / (pixiTex.width / pixiTex.height);
|
||||
}
|
||||
|
||||
return size;
|
||||
}
|
||||
|
||||
/**
|
||||
* Estimate the bounding box.
|
||||
*
|
||||
@ -358,7 +456,7 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin)
|
||||
// Not using PIXI.Texture.from() on purpose, as it caches both PIXI.Texture and PIXI.BaseTexture.
|
||||
// As a result of that we can have multiple ImageStim instances using same PIXI.BaseTexture,
|
||||
// thus changing texture related properties like interpolation, or calling _pixi.destroy(true)
|
||||
// will affect all ImageStims who happen to share that BaseTexture.
|
||||
// will affect all ImageStims which happen to share that BaseTexture.
|
||||
const texOpts =
|
||||
{
|
||||
scaleMode: this._interpolate ? PIXI.SCALE_MODES.LINEAR : PIXI.SCALE_MODES.NEAREST
|
||||
@ -387,7 +485,6 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin)
|
||||
this._pixi = PIXI.Sprite.from(this._texture);
|
||||
}
|
||||
|
||||
|
||||
// add a mask if need be:
|
||||
if (typeof this._mask !== "undefined")
|
||||
{
|
||||
@ -423,30 +520,14 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin)
|
||||
this._pixi.zIndex = -this._depth;
|
||||
this._pixi.alpha = this.opacity;
|
||||
|
||||
// set the scale:
|
||||
const displaySize = this._getDisplaySize();
|
||||
const size_px = util.to_px(displaySize, this.units, this.win);
|
||||
let scaleX = size_px[0] / this._texture.width;
|
||||
let scaleY = size_px[1] / this._texture.height;
|
||||
if (this.aspectRatio === ImageStim.AspectRatioStrategy.FIT_TO_WIDTH)
|
||||
{
|
||||
scaleY = scaleX;
|
||||
}
|
||||
else if (this.aspectRatio === ImageStim.AspectRatioStrategy.FIT_TO_HEIGHT)
|
||||
{
|
||||
scaleX = scaleY;
|
||||
}
|
||||
else if (this.aspectRatio === ImageStim.AspectRatioStrategy.HORIZONTAL_TILING)
|
||||
{
|
||||
scaleX = 1.0;
|
||||
scaleY = 1.0;
|
||||
}
|
||||
// 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._getDisplaySize();
|
||||
|
||||
// note: this calls VisualStim.setAnchor, which properly sets the PixiJS anchor
|
||||
// from the PsychoPy text format
|
||||
this.anchor = this._anchor;
|
||||
this._pixi.scale.x = this.flipHoriz ? -scaleX : scaleX;
|
||||
this._pixi.scale.y = this.flipVert ? scaleY : -scaleY;
|
||||
|
||||
// set the position, rotation, and anchor (image centered on pos):
|
||||
this._pixi.position = to_pixiPoint(this.pos, this.units, this.win);
|
||||
|
||||
@ -53,6 +53,7 @@ export class MovieStim extends VisualStim
|
||||
* @param {boolean} [options.autoPlay= true] - whether or not to autoplay the video
|
||||
* @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,
|
||||
@ -77,10 +78,11 @@ export class MovieStim extends VisualStim
|
||||
noAudio,
|
||||
autoPlay,
|
||||
autoDraw,
|
||||
autoLog
|
||||
autoLog,
|
||||
draggable
|
||||
} = {})
|
||||
{
|
||||
super({ name, win, units, ori, opacity, pos, anchor, size, autoDraw, autoLog });
|
||||
super({ name, win, units, ori, opacity, pos, anchor, size, autoDraw, autoLog, draggable });
|
||||
|
||||
this.psychoJS.logger.debug("create a new MovieStim with name: ", name);
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -10,7 +10,7 @@ export class Progress extends VisualStim
|
||||
{
|
||||
name,
|
||||
win,
|
||||
units,
|
||||
units = "pix",
|
||||
ori,
|
||||
opacity,
|
||||
depth,
|
||||
@ -61,8 +61,7 @@ export class Progress extends VisualStim
|
||||
if (this._pixi !== undefined)
|
||||
{
|
||||
this._pixi.clear();
|
||||
const size_px = util.to_px(this.size, this.units, this.win);
|
||||
const pos_px = util.to_px(this.pos, this.units, this.win);
|
||||
const size_px = util.to_px(this._size, this._units, this._win);
|
||||
const progressWidth = size_px[0] * this._progress;
|
||||
if (this._fillTexture)
|
||||
{
|
||||
@ -80,11 +79,12 @@ export class Progress extends VisualStim
|
||||
{
|
||||
this._pixi.beginFill(new Color(this._fillColor).int, this._opacity);
|
||||
}
|
||||
|
||||
if (this._type === PROGRESS_TYPES.BAR)
|
||||
{
|
||||
this._pixi.drawRect(pos_px[0], pos_px[1], progressWidth, size_px[1]);
|
||||
this._pixi.drawRect(0, 0, progressWidth, size_px[1]);
|
||||
}
|
||||
// TODO: check out beginTextureFill(). Perhaps it will allow to use images as filling for progress.
|
||||
|
||||
this._pixi.endFill();
|
||||
|
||||
// TODO: is there a better way to ensure anchor works?
|
||||
@ -92,6 +92,26 @@ export class Progress extends VisualStim
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
@ -128,9 +148,10 @@ export class Progress extends VisualStim
|
||||
}
|
||||
|
||||
// set polygon position and rotation:
|
||||
// TODO: what's the difference bw to_px and to_pixiPoint?
|
||||
this._pixi.position = to_pixiPoint(this.pos, this.units, this.win);
|
||||
this._pixi.position = to_pixiPoint(this._pos, this._units, this._win);
|
||||
this._pixi.rotation = -this.ori * Math.PI / 180.0;
|
||||
|
||||
this._estimateBoundingBox();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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.
|
||||
*
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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(
|
||||
{
|
||||
@ -87,11 +88,12 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin)
|
||||
autoDraw,
|
||||
autoLog,
|
||||
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",
|
||||
|
||||
@ -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) =>
|
||||
|
||||
@ -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.<number>} depth - order in which stimuli is rendered, kind of css's z-index with a negative sign.
|
||||
* @param {boolean} [log= false] - whether of not to log
|
||||
*/
|
||||
setDepth (depth = 0, log = false) {
|
||||
setDepth(depth = 0, log = false)
|
||||
{
|
||||
this._setAttribute("depth", depth, log);
|
||||
if (this._pixi) {
|
||||
if (this._pixi)
|
||||
{
|
||||
this._pixi.zIndex = -this._depth;
|
||||
}
|
||||
}
|
||||
@ -217,6 +262,93 @@ export class VisualStim extends util.mix(MinimalStim).with(WindowMixin)
|
||||
return this._getBoundingBox_px().contains(objectPos_px[0], objectPos_px[1]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine whether a point that is nown to have pixel dimensions is inside the bounding box of the stimulus.
|
||||
*
|
||||
* @name module:visual.VisualStim#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)
|
||||
{
|
||||
return this._getBoundingBox_px().contains(point_px[0], point_px[1]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Release the PIXI representation, if there is one.
|
||||
*
|
||||
* @name module:core.VisualStim#release
|
||||
* @function
|
||||
* @public
|
||||
*
|
||||
* @param {boolean} [log= false] - whether or not to log
|
||||
*/
|
||||
release(log = false)
|
||||
{
|
||||
this.draggable = false;
|
||||
super.release(log);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handler of pointerdown event.
|
||||
*
|
||||
* @name module:visual.VisualStim#_handlePointerDown
|
||||
* @private
|
||||
* @param {Object} e - pointerdown event data.
|
||||
*/
|
||||
_handlePointerDown (e)
|
||||
{
|
||||
if (e.pixi === undefined || e.pixi !== this._pixi)
|
||||
{
|
||||
return;
|
||||
}
|
||||
let relativePos = [];
|
||||
let pixPos = util.to_unit(this._pos, this._units, this._win, "pix");
|
||||
relativePos[0] = e.originalEvent.pageX - this._win.size[0] * 0.5 - this._pixi.parent.position.x;
|
||||
relativePos[1] = -(e.originalEvent.pageY - this._win.size[1] * 0.5) - this._pixi.parent.position.y;
|
||||
this._associatedPointerId = e.originalEvent.pointerId;
|
||||
this._initialPointerOffset[0] = relativePos[0] - pixPos[0];
|
||||
this._initialPointerOffset[1] = relativePos[1] - pixPos[1];
|
||||
this.emit("pointerdown", e);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handler of pointerup event.
|
||||
*
|
||||
* @name module:visual.VisualStim#_handlePointerUp
|
||||
* @private
|
||||
* @param {Object} e - pointerup event data.
|
||||
*/
|
||||
_handlePointerUp (e)
|
||||
{
|
||||
if (e.originalEvent.pointerId === this._associatedPointerId)
|
||||
{
|
||||
this._associatedPointerId = undefined;
|
||||
this._initialPointerOffset.fill(0);
|
||||
this.emit("pointerup", e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handler of pointermove event.
|
||||
*
|
||||
* @name module:visual.VisualStim#_handlePointerMove
|
||||
* @private
|
||||
* @param {Object} e - pointermove event data.
|
||||
*/
|
||||
_handlePointerMove (e)
|
||||
{
|
||||
if (e.originalEvent.pointerId === this._associatedPointerId)
|
||||
{
|
||||
let newPos = [];
|
||||
newPos[ 0 ] = e.originalEvent.pageX - this._win.size[ 0 ] * 0.5 - this._pixi.parent.position.x - this._initialPointerOffset[ 0 ];
|
||||
newPos[ 1 ] = -(e.originalEvent.pageY - this._win.size[ 1 ] * 0.5) - this._pixi.parent.position.y - this._initialPointerOffset[ 1 ];
|
||||
this.setPos(util.to_unit(newPos, "pix", this._win, this._units));
|
||||
this.emit("pointermove", e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setter for the anchor attribute.
|
||||
*
|
||||
|
||||
@ -2,6 +2,7 @@ export * from "./ButtonStim.js";
|
||||
export * from "./Form.js";
|
||||
export * from "./ImageStim.js";
|
||||
export * from "./GratingStim.js";
|
||||
export * from "./GifStim.js";
|
||||
export * from "./MovieStim.js";
|
||||
export * from "./Polygon.js";
|
||||
export * from "./Rect.js";
|
||||
|
||||
40
vite.config.js
Normal file
40
vite.config.js
Normal file
@ -0,0 +1,40 @@
|
||||
import glsl from "vite-plugin-glsl"
|
||||
|
||||
const fileName = `psychojs-${process.env.npm_package_version}`;
|
||||
|
||||
export default {
|
||||
root: "./src/",
|
||||
base: "./",
|
||||
build:
|
||||
{
|
||||
outDir: "../out",
|
||||
emptyOutDir: true,
|
||||
sourcemap: true,
|
||||
minify: false,
|
||||
cssCodeSplit: true,
|
||||
lib:
|
||||
{
|
||||
name: "psychojs",
|
||||
fileName,
|
||||
entry: ["index.js", "index.css"]
|
||||
},
|
||||
// rollupOptions:
|
||||
// {
|
||||
// // make sure to externalize deps that shouldn't be bundled
|
||||
// // into your library
|
||||
// external: ['vue'],
|
||||
// output:
|
||||
// {
|
||||
// // Provide global variables to use in the UMD build
|
||||
// // for externalized deps
|
||||
// globals: {
|
||||
// vue: 'Vue',
|
||||
// },
|
||||
// },
|
||||
// }
|
||||
},
|
||||
plugins:
|
||||
[
|
||||
glsl()
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user