pointer events on overlapping actors

[spustlik]

Hi,
than you for you effort in exceliburjs, it is fantastic framework.

I am at the beginning and trying to use actor pointer events, but in my scene there are overlapping actors (using z-index).

But with no luck - in some configuration events are fired on all actors (if pointerenter or pointerleave), or pointerleave is not called when moving from back actor to front actor.CAncelling event doesn't help.
This is my code:

class TestScene extends ex.Scene {
    onInitialize(game: ex.Engine) {
        super.onInitialize(game);
        let a = this.addActor(ex.vec(100, 100));
        a.z = 10;
        let b = this.addActor(ex.vec(130, 130));
        b.z = 20;
    }
    private addActor(pos: ex.Vector) {
        let a = new ex.Actor({ width: 200, height: 100, pos: pos, anchor: ex.vec(0, 0), opacity: 0.8 });
        let r = new ex.Rectangle({ width: a.width, height: a.height, strokeColor: ex.Color.Green, lineWidth: 5, color: ex.Color.Red });
        a.graphics.use(r);
        this.add(a);
        a.pointer.useGraphicsBounds = true;
        a.events.on('pointermove', (ev) => {
            r.color = ex.Color.Black;
            ev.cancel();
        });
        a.events.on('pointerleave', (ev) => {
            r.color = ex.Color.Red;
        });
        a.events.on('pointerdown', (ev) => {
            console.log('pointer down on ' + a.id);
            ev.cancel();
        });
        return a;
    }
}

what i am doing wrong? Or how to achieve clicking and moving on actors, but only on topmost?
Thank you for any advice, Jan 

[eonarheim]

Hi @spustlik thanks for the post and the kind words!

I'll dig into this today and see what I find.

A couple possible work arounds, but I'll dig in more today

1. Pointer events tunnel in z-order, so canceling the event on the "top most" will prevent it from tunneling down. Some examples from our sandbox tests

2. If you have actors where you don't want any pointer events to fire ever you can disable or remove the pointer component

   actor.pointer.useColliderShape = false;
   actor.pointer.useGraphicsBounds = false;
   // or remove
   actor.removeComponent(PointerComponent);

[spustlik]

Thank you for reply.
I tested it in my example, and it works with "pointerdown" event.
But "pointerenter" and "pointerleave" are called on underlaying actor(s), even if i call ev.cancel().
Any results of your dig?

[eonarheim]

@spustlik Thanks for the great sample!

Looking at your sample and the pointer emit code, this feels like it might be a bug. The enter and leave events don't work the same way internally so I'm suspecting something odd is happening. Leave and enter are synthesized by looking at native events across frames this makes it a little tricky.

I'll make a bug for now to track work against this

[eonarheim]

#3059

[spustlik]

Thank you for reply.
Until solved, it is possible to use detecting actors under pointer and "hover" only topmost. But also "unhover" others.

        actor.events.on('pointermove', (evt) => {
            var pointed = this.actors
                .filter(a => a.graphics.bounds.contains(evt.screenPos));
            //remove hover from all, but not me
            this.getActors(a => a != actor).forEach(a => a.hover = false);
            //there are some in front of me
            if (pointed.filter(a => a.z > actor.z).length > 0) {
                return;
            }
            actor.hover = true;
        });
        actor.events.on('pointerleave', (evt) => {
            actor.hover = false;
        });