HoshinoKoji/psychojs
1
0
Fork 0
mirror of https://github.com/psychopy/psychojs.git synced 2025-05-10 10:40:54 +00:00
Code Actions Packages Releases Activity

Depth value negated to have proper zIndex functionality;

Browse Source
This commit is contained in:
lgtst 2022-06-06 23:15:14 +03:00
parent 8a3c6c0a28
commit 0e58e6a7a4
8 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/visual/Form.js
View File

@ -36,7 +36,7 @@ import { VisualStim } from "./VisualStim.js";
* @param {Color} [options.color= Color('LightGray')] the color of the slider
* @param {number} [options.contrast= 1.0] - the contrast of the slider
* @param {number} [options.opacity= 1.0] - the opacity of the slider
* @param {number} [options.depth= 0] - the depth (i.e. the z order), note that the text, radio buttons and slider elements are at depth + 1
* @param {number} [options.depth= 0] - the depth (i.e. the z order), note that the text, radio buttons and slider elements are at depth - 1
*
* @param {number[]} [options.items= []] - the array of labels
* @param {number} [options.itemPadding= 0.05] - the granularity
@ -748,7 +748,7 @@ export class Form extends util.mix(VisualStim).with(ColorMixin)
color: this.itemColor,
ori: 0,
opacity: 1,
depth: this._depth + 1,
depth: this._depth - 1,
clipMask: this._stimuliClipMask,
};
const sliderOption = {
@ -766,7 +766,7 @@ export class Form extends util.mix(VisualStim).with(ColorMixin)
color: this.responseColor,
markerColor: this.markerColor,
opacity: 1,
depth: this._depth + 1,
depth: this._depth - 1,
clipMask: this._stimuliClipMask,
granularity: 1,
};
@ -777,7 +777,7 @@ export class Form extends util.mix(VisualStim).with(ColorMixin)
anchor: "left-top",
flip: false,
opacity: 1,
depth: this._depth + 1,
depth: this._depth - 1,
font: this.font,
letterHeight: this._fontSize * this._responseTextHeightRatio,
bold: false,
@ -946,7 +946,7 @@ export class Form extends util.mix(VisualStim).with(ColorMixin)
name: "scrollbar",
units: this._units,
color: this.itemColor,
depth: this._depth + 1,
depth: this._depth - 1,
pos: [0, 0],
size: [this._scrollbarWidth, this._size[1]],
style: [Slider.Style.SLIDER],
@ -1100,7 +1100,7 @@ export class Form extends util.mix(VisualStim).with(ColorMixin)
this._pixi.position = to_pixiPoint(this.pos, this.units, this.win);
this._pixi.alpha = this._opacity;
this._pixi.zIndex = this._depth;
this._pixi.zIndex = -this._depth;
// apply the form clip mask (n.b., that is not the stimuli clip mask):
this._pixi.mask = this._clipMask;

2
src/visual/GratingStim.js
View File

@ -758,7 +758,7 @@ export class GratingStim extends VisualStim
}
}
this._pixi.zIndex = this._depth;
this._pixi.zIndex = -this._depth;
this.opacity = this._opacity;
// set the scale:

6
src/visual/ImageStim.js
View File

@ -299,13 +299,13 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin)
// this._pixi.filters = [colorFilter];
}
this._pixi.zIndex = this._depth;
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._texture.width;
const size_px = util.to_px(displaySize, this.units, this.win);
const scaleX = size_px[0] / this._texture.width;
const scaleY = size_px[1] / this._texture.height;
this._pixi.scale.x = this.flipHoriz ? -scaleX : scaleX;
this._pixi.scale.y = this.flipVert ? scaleY : -scaleY;

2
src/visual/ShapeStim.js
View File

@ -256,6 +256,8 @@ export class ShapeStim extends util.mix(VisualStim).with(ColorMixin, WindowMixin
{
this._pixi.endFill();
}
this._pixi.zIndex = -this._depth;
}
// set polygon position and rotation:

2
src/visual/Slider.js
View File

@ -733,7 +733,7 @@ export class Slider extends util.mix(VisualStim).with(ColorMixin, WindowMixin)
this._pixi.position = this._getPosition_px();
this._pixi.alpha = this._opacity;
this._pixi.zIndex = this._depth;
this._pixi.zIndex = -this._depth;
// make sure that the dependent Stimuli are also updated:
for (const dependentStim of this._dependentStims)

2
src/visual/TextBox.js
View File

@ -652,7 +652,7 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin)
[this._pixi.x, this._pixi.y] = util.to_px(this._pos, this._units, this._win);
this._pixi.alpha = this._opacity;
this._pixi.zIndex = this._depth;
this._pixi.zIndex = -this._depth;
// apply the clip mask:
this._pixi.mask = this._clipMask;

2
src/visual/TextStim.js
View File

@ -429,7 +429,7 @@ export class TextStim extends util.mix(VisualStim).with(ColorMixin)
this._pixi.position = to_pixiPoint(this.pos, this.units, this.win);
this._pixi.alpha = this._opacity;
this._pixi.zIndex = this._depth;
this._pixi.zIndex = -this._depth;
// apply the clip mask:
this._pixi.mask = this._clipMask;

15
src/visual/VisualStim.js
View File

@ -181,6 +181,21 @@ export class VisualStim extends util.mix(MinimalStim).with(WindowMixin)
}
}
/**
* Setter for the depth attribute.
*
* @name module:visual.VisualStim#setDepth
* @public
* @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) {
this._setAttribute("depth", depth, log);
if (this._pixi) {
this._pixi.zIndex = -this._depth;
}
}
/**
* Determine whether an object is inside the bounding box of the stimulus.
*