From f7af329a28c66037425bfa77c7c7f752dc7432f4 Mon Sep 17 00:00:00 2001 From: lightest Date: Tue, 16 Apr 2024 18:05:11 +0100 Subject: [PATCH] multiline caption support with proper alignment within the button. --- src/visual/ButtonStim.js | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/src/visual/ButtonStim.js b/src/visual/ButtonStim.js index e457729..b276aa6 100644 --- a/src/visual/ButtonStim.js +++ b/src/visual/ButtonStim.js @@ -104,6 +104,8 @@ export class ButtonStim extends VisualStim this._addAttribute("timesOff", []); this._addAttribute("numClicks", 0); + this._estimateBoundingBox(); + if (this._autoLog) { this._psychoJS.experimentLogger.exp(`Created ${this.name} = ${util.toString(this)}`); @@ -138,15 +140,37 @@ export class ButtonStim extends VisualStim _composeTextConfig() { const fontSize = Math.round(this._getLengthPix(this._letterHeight)); + const size_px = util.to_px(this._size, this._units, this._win); return { fontFamily: this._font, fontSize, fill: new Color(this._color).int, - align: "center" + align: "center", + breakWords: true, + wordWrap: true, + wordWrapWidth: size_px[ 0 ] }; } + /** + * Estimate the bounding box. this._boundingBox is used by other components like mouse listeners. + * + * @override + * @protected + */ + _estimateBoundingBox() + { + // take the alignment into account: + const anchor = this._anchorTextToNum(this._anchor); + this._boundingBox = new PIXI.Rectangle( + this._pos[0] - anchor[0] * this._size[0], + this._pos[1] - anchor[1] * this._size[1], + this._size[0], + this._size[1], + ); + } + _updateIfNeeded() { if (!this._needUpdate) @@ -174,7 +198,6 @@ export class ButtonStim extends VisualStim 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); @@ -190,6 +213,9 @@ export class ButtonStim extends VisualStim this._pixiGraphics.drawRect(0, 0, size_px[0], size_px[1]); this._pixiGraphics.endFill(); this._pixiGraphics.closePath(); + this._pixiText.x = Math.round((size_px[ 0 ] - this._pixiText.width) * 0.5); + this._pixiText.y = Math.round((size_px[ 1 ] - this._pixiText.height) * 0.5); + // this._pixiText.width = size_px[ 0 ]; } this.anchor = this._anchor;