diff --git a/src/Browser/Dom.elm b/src/Browser/Dom.elm index d992e4f..e0595cd 100644 --- a/src/Browser/Dom.elm +++ b/src/Browser/Dom.elm @@ -3,6 +3,7 @@ module Browser.Dom exposing , getViewport, Viewport, getViewportOf , setViewport, setViewportOf , getElement, Element + , getBbox, Bbox ) {-| This module allows you to manipulate the DOM in various ways. It covers: @@ -382,3 +383,28 @@ type alias Element = , height : Float } } + +{- +The SVGGraphicsElement.getBBox() allows us to determine the coordinates of the smallest rectangle +in which the object fits. The coordinates returned are with respect to the current svg space, +i.e. after the application of all geometry attributes on all the elements contained in the target element. + +Note: getBBox must return the actual bounding box at the time the method was called, +even in case the element has not yet been rendered. +It also neglects any transformation applied on the element or its parents. +-} + +getBbox : String -> Task Error Bbox +getBbox = + Elm.Kernel.Browser.getBbox + +{- +getBBox returns different values than getBoundingClientRect(), +as the latter returns value relative to the viewport +-} +type alias Bbox = + { x : Float + , y : Float + , width : Float + , height : Float + } diff --git a/src/Elm/Kernel/Browser.js b/src/Elm/Kernel/Browser.js index 1d2de05..35684e0 100644 --- a/src/Elm/Kernel/Browser.js +++ b/src/Elm/Kernel/Browser.js @@ -431,6 +431,26 @@ function _Browser_getElement(id) +// BBOX + + + +function _Browser_getBbox(id) +{ + return _Browser_withNode(id, function(node) + { + var bbox = node.getBBox(); + return { + __$x: bbox.x, + __$y: bbox.y, + __$width: bbox.width, + __$height: bbox.height + }; + }); +} + + + // LOAD and RELOAD