show PIXI hit areas

draw_crosshair.js

class Crosshair {    
    constructor(size = 3, color = "red") {
        this.element = document.createElement("span");
        this.element.textContent = "+";

        this.style = this.element.style;
        this.style.color = color;
        this.style.fontFamily = "Arial";
        this.style.fontSize = `${size}em`;
        this.style.fontWeight = "";
        this.style.userSelect = "none";
        this.style.pointerEvents = "none";
        this.style.margin = "-0.52em -0.3em";
        this.style.lineHeight = "1em"
        this.style.padding = "0px";
        this.style.border = "none";    
        this.style.position = "absolute";
    }

    set x(value) {
        this.style.left = `${value}px`;
    }

    set y(value) {
        this.style.top = `${value}px`;
    }

    setPosition(x, y) {
        this.x = x;
        this.y = y;
    }

    static drawAt(name, size, color, x, y) {
        if (!Crosshair.instances) {
            Crosshair.instances = {};
        }

        if (!Crosshair.instances[name]) {            
            Crosshair.instances[name] = new Crosshair(size, color);
            document.body.appendChild(Crosshair.instances[name].element);
        }

        const c = Crosshair.instances[name];
        c.setPosition(x, y);
    }
}

function clickPixiPositionByName(name) {    
    var pixiElement = APP.safeGetChildByName(name);
    const bounds = getPixiBounds(pixiElement);
    Crosshair.drawAt("Reference", 3, "orange", bounds.x, bounds.y);
    return bounds;
}

document.body.addEventListener("click", (e) => {
   Crosshair.drawAt("click", 3, "red", e.clientX, e.clientY);
});

showHitAreas.js

function showInteractiveAreas () {
    const root = APP.safeGetChildByName("");

    const debugHitArea = "DebugHitArea";
    const queue = [root];

    while (queue.length > 0) {
        const element = queue.pop();

        if (element.name === debugHitArea)
            element.parent.removeChild(element);

        queue.push(...(element.children || []));

        if (!element.interactive) continue;

        const g = new PIXI.Graphics();
        g.alpha = 0.5;
        g.name = debugHitArea;
        element.addChild(g);

        if (element.hitArea) {
            g.lineStyle(2, 0xFFBD01, 1);
            g.beginFill(0xC34288);
            const { x, y, width, height } = element.hitArea;
            g.drawRect(x, y, width, height);
        } else {
            g.lineStyle(2, 0xFFBD01, 1);
            g.beginFill(0x888888);
            const { x, y } = element.anchor ? element.anchor : { x: 0, y: 0 };
            const { width, height } = element;
            g.drawRect(-width * x, -height * y, width, height);
        }
    }
}