PixiJS - line stops being clickable when setting position

Question

I'm trying to draw clickable lines between some nodes in Pixi. In order to make the line clickable, I've wrapped it in an object that extends Container.

The code is as follows: given two points (x0,y0) (x1,y1), find the angle of the line, draw a straight line at (0,0), angle it correctly and set its transform coordonate to (x0,y0).

Something like:

rot = Math.atan((y1-y0)/(x1-x0));
len = Math.hypot(x0-x1, y0-y1);

this.graphics.lineTo(len,0);
// this.transform.position.set(x0,y0);
this.hitArea = this.getBounds();
this.rotation = rot;

The Container class is a simple wrapper containing a Graphics object and a mousedown event.

With line 4 commented, code works exactly as you'd expect. The line is clickable and there's no weird bounds issues at all. All lines start from the same origin point though, as expected. They haven't been moved yet.

If I move the line, while it now appears in the right spot, it completely stops reacting to any events. What gives? Is this a bug? How should I achieve this?

Edit: new to posting on SO. Here's what I've tried so far:

• drawing the line at x0,y0 from the start: clicking works! but this messes up rotation (as the object is now from 0,0 to x2,y2)
• not using a wrapper - events don't seem to work on lines unless you wrap them
• not bothering with rotation and just drawing the lines straight out - also works, but the bounding box is wrong if the lines are at an angle.

Answer 1

Ended up using rectangles and doing math to angle the rectangle between two points (arctan). The fill of the rect is clickable and thus does not have the problem metioned above.

I still think the behavior described above is a bug. Leaving this workaround here for people who might come across my question. Good luck!