diff --git a/src/visual/ButtonStim.js b/src/visual/ButtonStim.js index cadc819..e457729 100644 --- a/src/visual/ButtonStim.js +++ b/src/visual/ButtonStim.js @@ -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"; /** *

ButtonStim visual stimulus.

* - * @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; + } }