PureScript Halogen coordinates of the element on the page

Question

How do I get the coordinates of the element itself on the page that triggered this event when I hover over it? In purescript there is an opportunity to take page, screen and client coordinates. Is it possible to know the coordinates of the element itself under the mouse?

Answer 1

I found a way to do this for example like this.

import DOM.Event.Event as DEE
import DOM.Event.MouseEvent as ME
import DOM.HTML.HTMLElement
import Halogen.HTML.Events as HE
import Halogen as H
import Halogen.HTML as HH
...

data Query a = Toggle HTMLElement a | ...

render :: State -> H.ComponentHTML Query
render state =
HH.html
[
  HE.onMouseEnter (\e -> HE.input_ (Toggle $ U.unsafeCoerce $ DEE.target $ ME.mouseEventToEvent e) e)
]
[HH.text state]

update :: forall eff. Query ~> H.ComponentDSL State Query Unit (Aff (dom :: DOM | eff))
update query = case query of
  RememberElementPos element next -> do
    posisition <- H.liftEff (getBoundingClientRect element) // this is the position of the element itself
    H.modify (\state -> updateState state position)
    pure next

updateState :: State -> DOMRect -> State
...