PIXI.Container events

[loryruta]

Hello all, I'm having a weird issue that I can't figure out, I've also compared my code with the PIXI's examples code but it's still not working.

Basically I have a class called Bag that extends PIXI.Container that is made up of a Sprite (texture, that can be "opened" or "closed"), and a text telling how many cards there are inside.
The Bag can be hovered or clicked by the cursor and do something based on those events.
So I register all the needed events directly on the Bag (that is a PIXI.Container), but none of the is called!

import * as PIXI from "pixi.js";
import {app} from "../index";
import Texture = PIXI.Texture;

export class Bag extends PIXI.Container {
    cards: Array<Card>;

    sprite: PIXI.Sprite;
    text: PIXI.Text;

    static BAG_OPENED: Texture;
    static BAG_CLOSED: Texture;

    static fetchResources() {
        const resources = PIXI.Loader.shared.resources;
        let spritesheet;

        spritesheet = resources["bag"].spritesheet;
        Bag.BAG_OPENED = spritesheet.textures["bag_opened.png"];
        Bag.BAG_CLOSED = spritesheet.textures["bag_closed.png"];
    }

    constructor(cards: Array<Card>) {
        super();
        this.cards = cards;

        Bag.fetchResources();

        this.sprite = new PIXI.Sprite(Bag.BAG_CLOSED);

        this.text = new PIXI.Text(
            this.cards.length.toString(),
            new PIXI.TextStyle({
                fill: 0xffffff,
            })
        );
        this.text.y = this.sprite.height;

        this.addChild(this.sprite);
        this.addChild(this.text);

        this.interactive = true;
        this.buttonMode = true;
    }

    listen() {
        this.on("pointerdown", function () {
            console.log("Pointer down!"); // NOT CALLED! <----------------------
        });
    }

    unlisten() {
        console.log("[Bag] Unlistening...");
    }

    static fromModality(modality: string) {
        const resource = PIXI.Loader.shared.resources["modalities/" + modality];
        return new Bag(resource.data);
    }
}

I instantiate the Bag and listen() in another part of code:

// init the bag
this.bag = Bag.fromModality("classical");

// add the bag to a newly app.stage and listen for events
app.stage = new PIXI.Container();
app.stage.addChild(this.bag);
this.bag.listen();

What I learned from debugging is:
- listen() is reached
- the event "pointermove" works but it's not relative to the PIXI.Container
- the bag is successfully added to the stage since I can clearly view it in the screen

Where am I wrong? ?

[ivan.popelyshev]

Hello!

It should work. Check that there's no other elements on top of canvas.

Please share the whole demo.