click position within a component

Hi, I am trying to get the mouse click position within an Embedded image for some kind of interactivity.

Vaadin’s MouseEventDetails only provide ClientX/Y which are extracted from NativeEvent. That’s the mouse position over client browser window. I need to either get component’s current position or directly get relative mouse position over the component from the event.

There are lots of threads in the forum talking about component’s position, but I didn’t see any direct answer.

If develop in GWT, I would get the relative position from MouseEvent which inherits DomEvent. But in Vaadin, the MouseEventDetails is getting information from NativeEvent.

I am trying to build a custom widget in Vaadin but I don’t know how to get the relative position from NativeEvent.

Would someone light me up? And it could be great if future Vaadin can provide api for component position.

One way would be to extend ClickEventHandler and override onMouseUp(). There you have access to MouseUpEvent which contains event.getRelativeX(Element target). Another option is to copy/paste its implementation, which is based on the NativeEvent:

public int getRelativeX(Element target) {
    NativeEvent e = getNativeEvent();

    return e.getClientX() - target.getAbsoluteLeft() + target.getScrollLeft() +