Last active
June 20, 2016 20:07
-
-
Save valrus/ee6c40a19cc928a1e6d67bf986ed67d6 to your computer and use it in GitHub Desktop.
SVG element collapses
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html><head><meta charset="UTF-8"><title>Keyboard</title><style>html,head,body { padding:0; margin:0; } | |
| body { font-family: calibri, helvetica, arial, sans-serif; }</style> | |
| </head> | |
| <body> | |
| <svg style="border: 1px solid black" height="300px" width="400px"> | |
| <path d="" stroke-width="1" stroke="black" fill="none"></path> | |
| </svg> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Html exposing (..) | |
| import Html.App as Html | |
| import Html.Attributes | |
| import Svg | |
| import Svg.Attributes | |
| import String | |
| import Mouse exposing (Position) | |
| -- MODEL | |
| type alias Size = | |
| { w : Int | |
| , h : Int | |
| } | |
| type alias Path = | |
| List Position | |
| type alias Drawing = | |
| { size : Size | |
| , start : Maybe Position | |
| , path : Path | |
| } | |
| type alias Model = | |
| { text : String | |
| , draw : Drawing | |
| , pos : Maybe Position | |
| , clicked : Bool | |
| } | |
| main = | |
| Html.program | |
| { init = init | |
| , view = view | |
| , update = update | |
| , subscriptions = subscriptions | |
| } | |
| init : ( Model, Cmd Msg ) | |
| init = | |
| ( Model "" (Drawing (Size 400 300) Nothing []) Nothing False, Cmd.none ) | |
| -- UPDATE | |
| type Msg | |
| = NoOp | |
| update : Msg -> Model -> ( Model, Cmd Msg ) | |
| update msg model = | |
| ( updateModel msg model, Cmd.none ) | |
| updateModel : Msg -> Model -> Model | |
| updateModel msg model = | |
| case msg of | |
| NoOp -> model | |
| -- SUBSCRIPTIONS | |
| subscriptions : Model -> Sub Msg | |
| subscriptions model = | |
| case model.pos of | |
| Nothing -> | |
| Sub.none | |
| Just _ -> | |
| Sub.none | |
| -- VIEW | |
| (=>) = | |
| (,) | |
| makeViewBox : Int -> Int -> List (Svg.Attribute Msg) | |
| makeViewBox w h = | |
| let | |
| w' = | |
| toString w | |
| h' = | |
| toString h | |
| in | |
| [ Svg.Attributes.width w' | |
| , Svg.Attributes.height h' | |
| ] | |
| view : Model -> Html Msg | |
| view model = | |
| svg | |
| ( | |
| makeViewBox model.draw.size.w model.draw.size.h | |
| ++ | |
| [ Svg.Attributes.style "border: 1px solid black" | |
| ] | |
| ) | |
| [ Svg.rect | |
| [ Svg.Attributes.x "0" | |
| , Svg.Attributes.y "0" | |
| , Svg.Attributes.width "400" | |
| , Svg.Attributes.height "300" | |
| ] | |
| [ ] | |
| ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The
svgelement produced by the Elm code collapses to have zero width and height 19 (or something, probably based on text size). The error is on line 109 where thesvgshould be replaced bySvg.svg; I was accidentally using thesvgfrom theHtmlmodule. (Thanks to Frederick Yankowski for the fix: https://groups.google.com/forum/#!topic/elm-discuss/wJqo26ffY3s)