diff --git a/src/visual/ButtonStim.js b/src/visual/ButtonStim.js index a75d763e..5a9cb283 100644 --- a/src/visual/ButtonStim.js +++ b/src/visual/ButtonStim.js @@ -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); diff --git a/src/visual/TextBox.js b/src/visual/TextBox.js index 3ab29ce3..fde81ca0 100644 --- a/src/visual/TextBox.js +++ b/src/visual/TextBox.js @@ -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