search

pixijs / pixi-ui

Provide a definitive user experience in your PixiJS application without any frontend library!
https://pixijs.io/pixi-ui/
MIT License
300 stars 49 forks source link

global position of ui element #48

Closed sebastienjouhans closed 4 years ago

sebastienjouhans commented 4 years ago

I am trying to get the position (x,y) of a ui element (button, text, etc) so i can work out when a virtual pointer collided with it.

I can easily get the width and the height of any ui elements but the x,y do not seem to be exposed.

1) Is there a way to get the x and y coordinate of a ui element? 2) is there a way to perform a hit test?

ShukantPal commented 4 years ago

@sebastienjouhans I don't think Widget exposes the global (x, y) coordinates because it itself doesn't track them. What you can get is the local (x,y) coordinates using the layout measure.

https://github.com/pixijs/pixi-ui/blob/5971dde42d3bf09eb635972d02790d8d997a46b2/packages/core/src/Widget.ts#L61

which is

https://github.com/pixijs/pixi-ui/blob/5971dde42d3bf09eb635972d02790d8d997a46b2/packages/core/src/layout-options/Insets.ts#L5

You can also use insetContainer to get the world bounds of the widget's contents (+ any padding you applied, use contentContainer for without padding).

https://github.com/pixijs/pixi-ui/blob/5971dde42d3bf09eb635972d02790d8d997a46b2/packages/core/src/Widget.ts#L41

via

widget.insetContainer.getBounds()

Hit testing is not done in this project. That's because it uses the interaction events fired on the insetContainer, which is done by PixiJS out-of-the-box.

sebastienjouhans commented 4 years ago

That worked! thanks

ShukantPal commented 4 years ago

@sebastienjouhans My bad that this repo is in sort of a "dumb frozen" state. The current code has some stuff that is in a transitionary phase so it won't reflect what's published.

The published API uses EventBroker:

https://github.com/pixijs/pixi-ui/blob/5971dde42d3bf09eb635972d02790d8d997a46b2/packages/core/src/Widget.ts#L521

which is here:

https://github.com/pixijs/pixi-ui/blob/5971dde42d3bf09eb635972d02790d8d997a46b2/packages/core/src/event/EventBroker.ts#L15

It has a click manager:

https://github.com/pixijs/pixi-ui/blob/5971dde42d3bf09eb635972d02790d8d997a46b2/packages/core/src/event/ClickManager.ts#L175

It might work if you fire a mousedown, mouseup event manually on the insetContainer:

insetContainer.fire('mousedown', <your_fake_event>);
ShukantPal commented 4 years ago

Ah, nvm you deleted that comment. I can help you if you're working on something that needs help 👍