purescript-deprecated/purescript-dom

Result of getBoundingClientRect is incorrect

Closed this issue · 2 comments

type DomRect =
  { left :: Number
  , top :: Number
  , right :: Number
  , bottom :: Number
  , width :: Number
  , height :: Number
  }

foreign import getBoundingClientRect :: forall eff . HTMLElement -> Eff (dom :: DOM | eff) DomRect

shiftPos :: DomRect -> DomRect
shiftPos rect = rect
  { left = rect.left + 100
  , right = rect.right + 100
  , top = rect.top + 100
  , bottom = rect.bottom + 100
  }

foo = do
  rect <- getBoundingClientRect elem
  rect' <- shiftPos rect
  traceAnyA rect -- ClientRect {top: xxx, right: xxx, bottom: xxx, left: xxx, width: xxx, height: xxx}
  traceAnyA rect' -- Object {left: xxx, right: xxx, top: xxx, bottom: xxx}

As you can see doing record update on result of getBoundingClientRect is not correct.

I'm not sure how do we handle such cases, but what I see as possible solution is to change foreign function to this:

export.getBoundingClientRect = el => {
  let rect = el.getBoundingClientRect()
  return {
    left: rect.left
    ....
  }
}
garyb commented

I'm not sure how do we handle such cases, but what I see as possible solution is to change foreign function to this:

Agreed.

Will open PR then :p