setVisible on container not setting visibility of DOMElements in the container

[sudhirquestai]

Version

• Phaser Version: Master

• Operating system: Mac OS

• Browser: Chrome/Safari

Description

If a DOMElement is added to a container and then we try to set the visibility (e.g to hide it) on the container it does not work. Setting visibility on the element directly works. However if you set visibility on the container then after that even setting visibility on the element does not work. Modified code from phaser examples to illustrate the problem below.

Example Test Code

var config = {
    type: Phaser.AUTO,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        parent: 'phaser-example',
        width: 800,
        height: 600
    },
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    dom: {
        createContainer: true
    },
    scene: {
        preload: preload,
        create: create
    }
};

var element;
var cont;

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('einstein', 'assets/pics/ra-einstein.png');
}

function create ()
{
    var div = document.createElement('div');
    div.style = 'background-color: lime; width: 220px; height: 100px; font: 48px Arial; font-weight: bold';
    div.innerText = 'Phaser 3';

    element = this.add.dom(400, 300, div);

    cont = this.add.container(0,0);

    cont.add(element);

    cont.setVisible(false);
    // uncommenting below will also not work unless we comment out the cont.setVisible(false)
    //element.setVisible(false);

    this.add.image(400, 300, 'einstein');
}

Additional Information

[photonstorm]

Hmm, I think I'd rather make it so that you can't add a DOM Element to a Container at all. They shouldn't be thought of as being part of the Phaser display list. Maybe we need a DOM Container?

[rgk]

I would assume most case scenarios are trying to align DOM elements with game objects. You could essentially nest all the information inside one element instead of a DOM Container right? The only pro to a DOM container I can think of would be ease, but I still think it should all be bundled in the same Container object for the first reason stated. Alternative could be adding a follow function to the DOM element and removing it from container also.

[sudhirquestai]

Yes -- most cases are where we want the DOM elements and phaser elements aligned and in the same groups/containers. In my use case I have a container with some phaser objects and some Dom objects and then another container setup the same way. And depending on the case, I want to hide or show the entire container --- this keeps phaser and dom in sync.

[photonstorm]

This is really difficult to solve for the following reasons:

1. Container children are rendered when the Container itself is rendered. If the Container isn't visible, this whole process is skipped. This means that the DOMElement 'render' function is never called, because the Container doesn't invoke it, so this function can't check to see if it should hide itself by looking at its parent. So the visible check needs to happen somewhere else.

2. To resolve it, a Container would need to have its own special setVisible handler and visible setter, that iterates all children, checks for DOM Elements, and sets their visible state accordingly. The DOM Element would also need to override its own setVisible method in order to ignore it if the parent is hidden, regardless if it is visible or not. This then needs duplicating for all properties (alpha, position, scale, etc), as the same problem exists for them all. This is a huge change for such an edge-case, not to mention highly inefficient.

3. None of the other Container properties are passed onto the DOMElement. Transform the Container and the DOM Element will just ignore it. While it could reflect the parent transform, we hit the same issue of then it only working if the Container renders.

I think the only possible solution, without messing around with the Container code, is to have the DOM Element added to the updateList, and in its update it can check the state of its parent, rather than during render. Also, when added to a Container, the Container shouldn't remove it from the display list, and should probably pass on its transform to it.

I'll have a look at this next week, but as it stands simply blocking the addition of DOM into Containers would solve a lot of problems. I don't buy that it's used for alignment currently, because the DOM elements totally ignore the Container transform anyway, but I can see how it could be used for this. It's going to need more careful thinking about though.

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

[sudhirquestai]

Tested the fix in master. It works great for us. Thanks a lot Rich.