properly organized button pt1.

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";
 
 /**
  * <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(
+		this._addAttribute("text", text, "");
-			"wasClicked",
+		this._addAttribute("font", font, "Arial");
-			false,
+		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(
+		this._addAttribute("timesOn", []);
-			"timesOn",
+		this._addAttribute("timesOff", []);
-			[],
+		this._addAttribute("numClicks", 0);
-		);
-
-		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;
+	}
 }