[Bug or Features?] invisible Views block underlying Views from having the interactive hand mouse cursor

[mise]

Also I think invisible Views can itself still get the hand icon, which looks really strange

Let me know if you like these kinds of posts, or maybe you want me to post them elsewhere? I hope I can help you to make improvements.

[Wolfsbane]

? I haven' worked with views, so I don't have an opinion on it, but I'm curious to see it. Do you have a sample project you can upload so I can take a peak?

5 hours ago, mise said:

Let me know if you like these kinds of posts

You're good.  I'm not sure about others, but I read 'em. I'd reply more, but some of the topics I just have no experience in (*yet*).

[enpu]

What exactly do you mean by "Views"?

[mise]

I'm sorry that was confusing! I should have made an example:

this is for the invisible issue (issue posted in title i hope to get around to as well):

game.module(
    'game.main'
)
.body(() => {
game.createScene('Main', {
    init: function() {
        var container = new game.Container();
        container.addTo(this.stage);
        
        var graphics = new game.Graphics();
        graphics.drawRect(100, 100, 100, 100);
        graphics.interactive = true;
        graphics.buttonMode = true;
        
        graphics.addTo(container);
        container.visible = false;
    }
});

[Wolfsbane]

Aah, I see. I think that's fine. (feature, not a bug). If I have a big, single image, I might want to add a whole bunch of different, 'invisible' clickable areas on it, that do different functions.

The issue of the top (invisible) layer blocking the bottom (visible?) layer, you can work around by sorting the layers.

E.g. with the layer you want to be clicked, or 'ontop', you can use:

container.toTop();

Enpu made a post here, describing how you could go about sorting a whole bunch of different layers, etc, to get them on top.

 

[mise]

I would say you could use alpha = 0 to get clickable areas. Rearranging layers seems like a strange way to hide things. Right now I'm working around it by setting x and y outside the screen, at least then I don't have to remember previous order which can become very complicated if you have many layers. I just have to remember previous x/y which is not relative.

[Wolfsbane]

Quote

I would say you could use alpha = 0 to get clickable areas.

Hmm, good point. So I took a closer look at the code. I'm not sure if it's a bug still, but it's unclear behavior (so maybe a bit bug-ish?)

So in input.js, we have:

/**
        @method _processEvent
        @param {String} eventName
        @param {MouseEvent|TouchEvent} event
        @return {Object} item
        @private
    **/
    _processEvent: function(eventName, event) {
        for (var i = this.items.length - 1; i >= 0; i--) {
            var item = this.items[i];
            if (!item._interactive || !item.visible) continue;
            if (this._hitTest(item, event.canvasX, event.canvasY)) {
                if (!item[eventName](event.canvasX, event.canvasY, event.identifier, event)) {
                    return item;
                }
            }
        }
    },

And it actually *does* a visibility check. 

The issue here seems to be: The graphics item is the one that is interactive, and that is still visible=true (but the container it's in is visible=false). I guess if you set the container visible= false, it doesn't draw it's children anymore, but it *doesn't* update all it's children to be visible = false, too. So as far as the mouse click event is concerned, the graphic item is still interactive, and still visible.

I don't... know if this is a bug. It's definitely a bit unexpected.

The quick fix in your scenario is to make the graphic itself visible = false. Just put an extra function on the container, and make it when it sets itself visible/invisible, it sets it's children visible/invisible, too.

I will say that the interactive hand cursor position is bugging a bit in your example you posted. E.g. it highlight from from 0,0,200,200, which is not correct (it should only be from 100,100).

If we change the drawing to be like this:

game.module(
    'game.main'
)
.body(() => {
    game.createScene('Main', {
        init: function() {
            var container = new game.Container();
            container.addTo(this.stage);
            
            var graphics = new game.Graphics();
            graphics.drawRect(0, 0, 100, 100);
            graphics.position.set(100,100);
            graphics.interactive = true;
            //graphics.visible = false;
            graphics.buttonMode = true;
            
            graphics.addTo(container);
            container.visible = false;
        }
    });
});

The hand cursor highlight 0,0,100,100. If you make the container visible, it highlights 100,100,200,200. This is odd, and not correct.

Quote

Rearranging layers seems like a strange way to hide things. 

Well, as per the _processEvent code above, it's just that the first interactive object consumes the mouse click. You could change this, if required. I don't think there is a way currently in the Panda Engine to make 2 items stacked on top of each other both process a mouse click event. (But I might be wrong..!)