4

I'm building an app with Vaadin 14 where the user is required to click an image and the coordinates from that click are then further processed. Vaadin seems to only offer click coordinates relative to the user's screen or browser. My app needs the coordinates to be relative to the component. Is there a way to accomplish this?

Gautham M
  • 4,816
  • 3
  • 15
  • 37
tuomasss
  • 71
  • 4
  • Does this answer your question? [Get position/offset of element relative to a parent container?](https://stackoverflow.com/questions/11634770/get-position-offset-of-element-relative-to-a-parent-container) – Simon Martinelli Mar 25 '21 at 07:40
  • @SimonMartinelli Unfortunately I'm not familiar with javascript at all. How can I access the image with javascript and perform the functions necessary to get the click positions? Thanks. – tuomasss Apr 05 '21 at 07:24

1 Answers1

3

The answer was to go through the Element API and use image.getElement().addEventListener("click", ...).addEventData(...) and thus pass the necessary info from browser to the server.

In my case:

Image image = ...
image.getElement().addEventListener("click", this::handleClick)
                .addEventData("event.offsetX")
                .addEventData("event.offsetY");

private void handleClick(DomEvent event) {
        JsonObject eventData = event.getEventData();
        double x = eventData.getNumber("event.offsetX");
        double y = eventData.getNumber("event.offsetY");

        String text = "X: " + x + ", Y: " + y;
        System.out.println(text);
    }

More info: https://vaadin.com/docs/v14/flow/element-api/tutorial-event-listener

tuomasss
  • 71
  • 4