Skip to content

Fix two issues of Button component (now displays correct height and enables presentation of multiline) #604

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AlexandaJerry wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix two issues of Button component (now displays correct height and enables presentation of multiline) #604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions src/visual/ButtonStim.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
21 changes: 17 additions & 4 deletions src/visual/TextBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down Expand Up @@ -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`,
Expand Down Expand Up @@ -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
Expand Down