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

Fix two issues of Button component

Browse Source 
Issue 1: Button height is incorrect, and its size is unchangeable with setSize() function
Issue 2: Multiline text in Button was piled together in one line, and text will disappear after setting multiline = true
This commit is contained in:
Alexanda 2024-10-28 22:24:42 +08:00 committed by GitHub
parent 9265fd8502
commit 5b39b2ef0c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 41 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/visual/ButtonStim.js
View File

@ -92,6 +92,30 @@ export class ButtonStim extends TextBox
autoLog,
boxFn
});
// Fix for the multiline text not being displayed correctly (displayed in one line)
// The default value of the multiline attribute is false.
// Revised version make sure that the multiline attribute is set correctly
this._multiline = typeof text === 'string' && text.includes('\n') ? true : false;
// Another place in TextBox.js should also be revised accordingly
// the _addListeners() function in TextInput.js was skipped in the ButtonStim
/* if (!(this instanceof ButtonStim))
{
this._pixi._addListeners();
this._addEventListeners();
} */
// the first two lines of _addListeners() are necessary for the
// display and update of multiline text in the ButtonStim,
// without influencing other listeners of the ButtonStim
/* _addListeners() {
this.on("added", this._onAdded.bind(this)),
this.on("removed", this._onRemoved.bind(this)),
this._dom_input.addEventListener("keydown",this._onInputKeyDown.bind(this)),
this._dom_input.addEventListener("input", this._onInputInput.bind(this)),
this._dom_input.addEventListener("keyup", this._onInputKeyUp.bind(this)),
this._dom_input.addEventListener("focus", this._onFocused.bind(this)),
this._dom_input.addEventListener("blur", this._onBlurred.bind(this));} */
this.psychoJS.logger.debug("create a new Button with name: ", name);

21
src/visual/TextBox.js
View File

@ -187,7 +187,7 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin)
this._letterHeight / 2.0,
this._onChange(true, true),
);
this._multiline = typeof text === 'string' && text.includes('\n') ? true : false;
this._addAttribute("multiline", multiline, false, this._onChange(true, true));
this._addAttribute("editable", editable, false, this._onChange(true, true));
this._addAttribute("autofocus", autofocus, true, this._onChange(true, false));
@ -519,7 +519,15 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin)
padding: `${padding_px}px`,
multiline: this._multiline,
text: this._text,
height: this._fitToContent ? "auto" : (this._multiline ? `${height_px}px` : undefined),
// fix the issue of incorect height and unchangeable size in ButtonStim
// Default "multiline" was set to "false" in ButtonStim
// So the height was always set to "undefined" in ButtonStim
// Revised version would check and set claculated ${height_px} if ButtonStim
height: this._fitToContent
? "auto"
: (this._multiline || this instanceof ButtonStim)
? `${height_px}px`
: undefined,
width: this._fitToContent ? "auto" : `${width_px}px`,
maxWidth: `${this.win.size[0]}px`,
maxHeight: `${this.win.size[1]}px`,
@ -585,10 +593,15 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin)
this._pixi = new TextInput(this._getTextInputOptions());
// listeners required for regular textboxes, but may cause problems with button stimuli
if (!(this instanceof ButtonStim))
{
// if is not a ButtonStim, call _addListeners() to add textBox listeners
// if is a ButtonStim, only add first two lines of _addListeners() to correctly display
// and update the multiline text, without influencing other listeners
if (!(this instanceof ButtonStim)) {
this._pixi._addListeners();
this._addEventListeners();
} else {this._pixi.on("added", this._pixi._onAdded.bind(this._pixi)),
this._pixi.on("removed", this._pixi._onRemoved.bind(this._pixi));
}
// check if other TextBox instances are already in focus