Implement ClickEvent.getRelativeY()

[mvysny]

Describe your motivation

Vaadin 8 used to offer MouseEvents.getRelativeY() which would return the mouse position (y coordinate) when the click took place, relative to the clicked component.

Unfortunately, there's no such function in Vaadin 23's ClickEvent - it offers screenY and clientY but the relativeY value can not be calculated from those values.

Describe the solution you'd like

A ClickEvent.getRelativeY() function, mimicking Vaadin 8's MouseEvents.getRelativeY(). Also ContextMenuEvent.getRelativeY() function.

[mvysny]

Workaround: poll bounding client rect and calculate the relativeY value ourselves. The disadvantage is that this requires an additional request roundtrip to the server:

div.addClickListener(e -> {
  div.getElement().executeJs("return this.getBoundingClientRect().top;").then(Double.class, viewportY ->
    Notification.show("" + (e.clientY - viewportY)");
  });
});

[mshabarov]

Could you please describe the case where it's needed? Is it a map or drawing component where you want to know the exact position within the component's area?

[mvysny]

Thanks! The customer has built something akin to a scrollbar. Think of it as an "overview map" in a text editor (please see the screenshot). When the overview map is clicked, it uses the "relativeY" value to calculate the position in the text, then scrolls to that position in the text.

In customer's case the "overview map" scrolls a Grid instead, but otherwise the functionality is identical to the one of a text editor.