Masking blocks interactivity

[Zealot]

I'm extending the Container class as such:

class Layer extends PIXI.Container {
  // name: string;
  public overflowMask: PIXI.Graphics | null;

  constructor(options: LayerOptions) {
    super();

    this.zIndex = options.zIndex;
    this.name = options.id;
    this.sortableChildren = options.sortable;
    this.interactive = options.interactive;
    this.interactiveChildren = options.interactiveChildren || false;

    if (options.isMasked) {
      this.overflowMask = new PIXI.Graphics();
      this.overflowMask
        .beginFill(0x00000, 1)
        .drawRect(0, 0, 500, 500)
        .endFill();

      this.mask = this.overflowMask;
      this.addChild(this.overflowMask);
    } else {
      this.overflowMask = null;
    }
  }

  containsPoint(point: PIXI.Point): boolean {
    for (const child of this.children) {
      if (typeof (child as any).containsPoint === "function") {
        if ((child as any).containsPoint(point)) return true;
      }
    }
    return false;
  }
}

As mentioned here, I'm overriding the containsPoint method but my Container's children loses their interactivity when they fall out of the masked area, what am I missing here?

 

[themoonrat]

hitArea trumps mask which trumps bounds

So since you have a mask, that'll be what's checked for interactivity, not the container itself. Give it a hitArea and that'll be used instead of the mask for interactivity.

[Zealot]

41 minutes ago, themoonrat said:

hitArea trumps mask which trumps bounds

So since you have a mask, that'll be what's checked for interactivity, not the container itself. Give it a hitArea and that'll be used instead of the mask for interactivity.

I'm a little confused: do I need to give the Container a hitArea? Or its mask? I've been experimenting various approaches with no success. Thanks for your insight.

[themoonrat]

Giving the container a hitArea

[themoonrat]

https://pixijs.io/examples/#/interaction/custom-hitarea.js

[Zealot]

Sweet indeed! Giving the Container a hitArea works

Subsidiary question: my Container has a dynamic position (pixi-viewport) and I want to make sure its hitArea is always wrapping the whole stage, is there a way to do that? I guess I could just give it a massive hitArea, any other way? I tried override the containsPoint method, with no success:

containsPoint(point: PIXI.Point): boolean {
    return true;
  }

This removes all interactivity on the Container for some reason.