Setting hitArea on container - not behaving as expected

[cnwerb]

Firstly I'd like to say I'm very sorry for making so many topics, I'm working on a fairly large project using pixi and I gather a lot of questions as I work through.

I have created a custom container class which extends `PIXI.Container`, and I am trying to set a polygonal hit area on this class. Unfortunately, it seems to not be working as expected - the container is registering mouse events from outside of the click area.

My custom class is generated when a user drags and drops onto the pixi root container. As such a lot of my code is within it's constructor.

Here is the relevant code:

export class OperationInstance extends Container {

    constructor(mousePosition){
        super();
        this.interactive = true;

        //Init background...
        var backgroundSprite = PIXI.Sprite.fromImage(/*path*/);
        backgroundSprite.interactive = true;
        backgroundSprite.anchor.set(0.4, 0.5);
        backgroundSprite.scale.set(0.3, 0.3);
        backgroundSprite.position.set(mousePosition.x, mousePosition.y);

        //Primitive object for testing the hit area
        var testGraphics = new PIXI.Graphics();
        testGraphics.lineStyle(1, 0xFF3300, 1);
        testGraphics.drawPolygon([
            (mousePosition.x - backgroundSprite.width/2.4),(mousePosition.y - backgroundSprite.height/2),
            (mousePosition.x - backgroundSprite.width/2.4),(mousePosition.y + backgroundSprite.height/2),
            (mousePosition.x + backgroundSprite.width/3.7),(mousePosition.y + backgroundSprite.height/2),
            (mousePosition.x + backgroundSprite.width/1.5),(mousePosition.y + backgroundSprite.height/60),
            (mousePosition.x + backgroundSprite.width/3.7),(mousePosition.y - backgroundSprite.height/2),
            (mousePosition.x - backgroundSprite.width/2.4),(mousePosition.y - backgroundSprite.height/2)
        ]);

        this.hitArea = new PIXI.Polygon([
            (mousePosition.x - backgroundSprite.width/2.4),(mousePosition.y - backgroundSprite.height/2),
            (mousePosition.x - backgroundSprite.width/2.4),(mousePosition.y + backgroundSprite.height/2),
            (mousePosition.x + backgroundSprite.width/3.7),(mousePosition.y + backgroundSprite.height/2),
            (mousePosition.x + backgroundSprite.width/1.5),(mousePosition.y + backgroundSprite.height/60),
            (mousePosition.x + backgroundSprite.width/3.7),(mousePosition.y - backgroundSprite.height/2),
            (mousePosition.x - backgroundSprite.width/2.4),(mousePosition.y - backgroundSprite.height/2)
        ]);

        this.on('mouseover', this.mouseoverAction, this);
        this.on('mousedown', this.clickAction, this);

        //Add all of the above to this...
        this.addChild(backgroundSprite);
    }

    mouseoverAction(){
        console.log("mouseover on " + this.baseOperation.name);
    }

    clickAction(){
        console.log("click on " + this.baseOperation.name);
    }
}

 

I have attached an image of what it looks like when the above class is placed onto the pixi root container and rendered, and also the original asset file of the background sprite.

You can see the red border of the primitive graphics object, which should be exactly where the hit area sits on the screen (see in my code that the polygons are exactly the same). When I click or mouseover outside of the hit area, the functions still log on my console. But this ONLY happens when there's a click or mouseover in the blue circled areas on the picture above.

I'm totally stumped as to what is causing this, what could it be?