1
0
mirror of https://github.com/psychopy/psychojs.git synced 2025-05-10 10:40:54 +00:00

properly organized button pt1.

This commit is contained in:
lightest 2024-04-11 20:33:17 +01:00
parent 74111a894f
commit 6c85a2056d

View File

@ -7,16 +7,18 @@
* @license Distributed under the terms of the MIT License
*/
import { VisualStim } from "./VisualStim.js";
import { Mouse } from "../core/Mouse.js";
import { TextBox } from "./TextBox.js";
import * as PIXI from "pixi.js-legacy";
import * as util from "../util/Util";
import { Color } from "../util/Color.js";
/**
* <p>ButtonStim visual stimulus.</p>
*
* @extends TextBox
* @extends VisualStim
*/
export class ButtonStim extends TextBox
export class ButtonStim extends VisualStim
{
/**
* @memberOf module:visual
@ -52,7 +54,7 @@ export class ButtonStim extends TextBox
padding,
anchor = "center",
units,
color,
color = "white",
fillColor = "darkgrey",
borderColor,
borderWidth = 0,
@ -73,23 +75,12 @@ export class ButtonStim extends TextBox
win,
name,
text,
font,
pos,
size,
padding,
anchor,
units,
color,
fillColor,
borderColor,
borderWidth,
opacity,
depth,
letterHeight,
multiline,
bold,
italic,
alignment: "center",
autoDraw,
autoLog,
draggable,
@ -97,29 +88,21 @@ export class ButtonStim extends TextBox
});
this.psychoJS.logger.debug("create a new Button with name: ", name);
this.listener = new Mouse({ name, win, autoLog });
this._addAttribute(
"wasClicked",
false,
);
this._addAttribute("text", text, "");
this._addAttribute("font", font, "Arial");
this._addAttribute("letterHeight", letterHeight, 20);
this._addAttribute("color", color, "white");
this._addAttribute("fillColor", fillColor, "darkgrey");
this._addAttribute("borderWidth", borderWidth, 1);
this._addAttribute("borderColor", borderColor, "black");
this._addAttribute("wasClicked", false, false);
// Arrays to store times of clicks on and off
this._addAttribute(
"timesOn",
[],
);
this._addAttribute(
"timesOff",
[],
);
this._addAttribute(
"numClicks",
0,
);
this._addAttribute("timesOn", []);
this._addAttribute("timesOff", []);
this._addAttribute("numClicks", 0);
if (this._autoLog)
{
@ -146,4 +129,79 @@ export class ButtonStim extends TextBox
{
return this.listener.isPressedIn(this, [1, 0, 0]);
}
reset()
{
}
_composeTextConfig()
{
const fontSize = Math.round(this._getLengthPix(this._letterHeight));
return {
fontFamily: this._font,
fontSize,
fill: new Color(this._color).int,
align: "center"
};
}
_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._pixiText.destroy(true);
this._pixiGraphics.destroy(true);
this._pixi.destroy();
}
this._pixi = new PIXI.Container();
this._pixiGraphics = new PIXI.Graphics();
const pixiTextConfig = this._composeTextConfig();
this._pixiText = new PIXI.Text(this._text, pixiTextConfig);
this._pixi.addChild(this._pixiGraphics, this._pixiText);
this._pixi.interactive = true;
const fillColor = new Color(this._fillColor);
this._pixiGraphics.beginFill(fillColor.int, 1);
if (this._borderWidth > 0)
{
this._pixiGraphics.lineStyle(this._borderWidth, this._borderColor, 1);
}
const size_px = util.to_px(this._size, this._units, this._win);
this._pixiGraphics.drawRect(0, 0, size_px[0], size_px[1]);
this._pixiGraphics.endFill();
this._pixiGraphics.closePath();
}
this.anchor = this._anchor;
this._pixi.scale.x = this._flipHoriz ? -1 : 1;
this._pixi.scale.y = this._flipVert ? 1 : -1;
this._pixi.rotation = -this._ori * Math.PI / 180;
[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;
// apply the clip mask:
this._pixi.mask = this._clipMask;
}
}