Brush mousedown/touchstart not getting correct position in scaled SVG

[ericgj]

Not sure if I'm not doing something right, but I have a 1d (X) brush that works perfectly only when the outer width exactly matches the viewBox width. When it is scaled up (the actual width > viewBox width), the left side of the brush overlay gets shifted to the right, and by a factor of the x position in the SVG so that towards the left side it's almost correct, but as you move right, it gets further and further offset. Likewise when it is scaled down (actual width < viewBox width), the left side of the overlay gets shifted to the left. Otherwise, other manipulation of the brush (moving, stretching, dragging etc.) works fine, it's just the initial positioning of the brush that's off.

Unless I'm doing something wrong, I suspect something in the event decoders is not working right. Perhaps decodeSVGTransformMatrix is not finding and therefore adjusting by the viewBox dimensions? Maybe be related to #92 ? My understanding of this corner of the DOM is pretty sketchy, so I'm not clear how you are getting to the viewBox which is in an ancestor node, from the top-level brush g which I'd think is the currentTarget ? Does baseVal somehow magically get you the viewBox of its ancestor nodes?

Thanks for any suggestions. elm-visualization rocks.

decodeSVGTransformMatrix : Decoder (Maybe Matrix2x3)
decodeSVGTransformMatrix =
    D.oneOf
        [ D.map3
            (\viewBox width height ->
                Just ( ( viewBox.width / width, 0, 0 ), ( 0, viewBox.height / height, 0 ) )
            )
            (D.at [ "currentTarget", "viewBox", "baseVal" ] decodeRect)
            (D.at [ "currentTarget", "width", "baseVal", "value" ] D.float)
            (D.at [ "currentTarget", "height", "baseVal", "value" ] D.float)
        , D.succeed Nothing
        ]

[ericgj]

Looking in Chrome dev tools it looks like the viewBox, width, and height data is put under currentTarget.viewportElement - described here as "The SVGElement which established the current viewport. Often the nearest ancestor <svg> element. null if the given element is the outermost <svg> element."