Sign in to follow this  
mise

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

? 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. :D 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*).

Share this post


Link to post
Share on other sites

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;
    }
});

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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..!)

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.