svgBox

[ialdencoots]

I'm a bit curious as to your desire to remove svgBox from this module, as having explicitly defined dimensions for a graphical element seems very useful. Is there another way of achieving the same effect without this function that would be preferable?

Additionally, is there any way to set the attributes of the svg object that's generated by svg and svgBox with the current implementation? If not, that's something I'd like to see. I was hoping to be able to get click events bubbled up to parents, but the svg element seems to be blocking their triggers.

[danfishgold]

Here's a specific use case: If I'm making an argyle pattern, its boundary will be a zig zag line because of the diamond shapes. With svgBox I can trim them, but svg would include the zig zag edges and the background.

[timjs]

Hi guys, thanks for sharing your concerns!

I'm thinking about including a way to pad and frame the envelopes of collages, so you would be able to say something like

zigzag : Collage msg
zigzag = ...

-- Shrink the visible area of the collage by 40 pixels 
smallerOutput : Collage msg
smallerOutput =
    zigzag
    |> frame -40
    |> svg

See this part of the Diagrams manual for more details. Please tell me if this would be enough for your use case or that a svgBox function would be more user friendly.

Another way of doing this right now is to use impose:

boundingBox : Collage msg
boundingBox =
    rectangle 40 60
    |> filled transparent

imposedOutput : Collage msg
imposedOuput =
    impose zigzag boundingBox
    |> svg

Although the actual semantics of the impose function are up to debate. See #19 and #17 and add your thoughts!

About the bubbling up of events @ialdencoots, could you open a new issue with a concrete example of the functionality you'd like to see? I'd like to investigate your issue further.

[timjs]

In the next major version the impose example would be written like:

boundingBox : Collage msg
boundingBox =
    rectangle 40 60
    |> filled empty

imposedOutput : Collage msg
imposedOuput =
    zigzag
    |> withEnvelope boundingBox
    |> svg

Note the usage of empty vs transparent (#18) and the new function withEnvelope (#19).

[georgefst]

FWIW, in my app, I wanted to fit a collage to the whole page. I initially thought I needed svgBox, then found that I was better off with the lower-level svgExplicit (no awkward, unnecessary scrollbars).

i.e. instead of:

f = Collage.Render.svgBox (x,y)

I used:

f = Collage.Render.svgExplicit [ viewBox -(x // 2) -(y // 2) x y ]

viewBox : Int -> Int -> Int -> Int -> Html.Attribute msg
viewBox x y w h = Attr.attribute "viewBox" <| String.join " " <| List.map String.fromInt [x,y,w,h]