Show/Hide existing textbox rather than destroy

[dtturcotte]

Hello, I see here that you can use textBox.destroy() to destroy a textBox after use.

But I want to be cognizant of performance, so I'd prefer to create a single textBox once, then start/stop the existing textBox with new text, and show/hide the existing textBox as needed.

I don't see these methods in the textBox docs.

this.rexUI.hide(this.textBox) and this.textBox.hide() produce the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'parent')

at

var _hide = function (gameObject, hidden) {
    if (!gameObject) {
        return;
    }
    var config = GetSizerConfig(gameObject);
    config.hidden = hidden;

    var parent = gameObject.rexContainer.parent; <---------- HERE
    if (parent) {
        parent.setChildVisible(gameObject, !hidden);
    } else {
        this.setVisible(!hidden)
    }
};

---

My code and attempts:

Parent scene:

class GUIScene extends Phaser.Scene {
    rexUI: RexUIPlugin
    private dialogueComponent: DialogueComponent
    ...

   create() {
        this.dialogueComponent = new DialogueComponent(this, 50, 100, this.rexUI)
        ...
   }

}

Dialogue Component:

class DialogueComponent extends Phaser.GameObjects.Container {
    public scene: Phaser.Scene
    public x: number
    public y: number
    private rexUI: any
    private textBox: any
	
    constructor(scene: Phaser.Scene, x: number, y: number, rexUI: any) {
        super(scene, x, y)

        this.scene = scene
	this.rexUI = rexUI
        this.x = x
        this.y = y

	this.textBox = this.addTextBox()
        this.add(this.textBox) <-- ATTEMPTING TO ADD TEXTBOX TO PARENT CONTAINER OBJ AND THEN HIDE CONTAINER
        this.scene.add.existing(this)
 
        // I'VE TRIED THESE SEPARATELY
        this.rexUI.hide(this.textBox) <-- PRODUCES ERROR ABOVE
        this.setVisible(false) <-- DOES NOT HIDE TEXTBOX
    }
   ...

[rexrainbow]

hide() is used to set child element of ui to invisible, and exclude it when layout().
On the other word, set child element of ui to invisible without hide() will still be layout().

In your case, if this textbox is the top-most ui panel, you can simply use textbox.setVisible(false).

Moreover container.add(this.textBox) only add textbox but not its children game object into p3container.
Please try textbox.addToContainer(p3Container) to add textbox and its children all to p3container.

[rexrainbow]

Bug in textBox.hide() is fixed, please get latest version of rexui plugin
( npm package will upgrade at end of this month )