Label as Data

labelAsData.elm

import Html exposing (Html)
import Html.Attributes exposing (style)
import Color exposing (Color)
import Mouse

(=>) = (,)

toRgbaString color = 
  let {red, green, blue, alpha} = Color.toRgb color 
  in 
      "rgba(" ++ toString red ++ ", " ++ toString green ++ ", " ++ toString blue ++ ", " ++ toString alpha ++ ")"

type alias Vector = 
  { x : Int 
  , y : Int
  }

type alias Text = 
  { value  : String 
  , font   : String
  , size   : Int
  , color  : Color
  , weight : Int
  }


type alias Border = 
  { size  : Int
  , color : Color
  , style : BorderStyle
  }
  
type BorderStyle 
  = Dotted
  | Solid
  | Dashed
  
toBorderStyleString style = 
  case style of 
    Dotted -> "dotted"
    Solid -> "solid"
    Dashed -> "dashed"


type alias Label = 
  { position : Vector
  , size     : Vector 
  , text     : Text
  , border   : Border
  }
  
  
label : Label 
label = 
  { position = 
      { x = 100
      , y = 100
      }
  , size = 
      { x = 100
      , y = 40
      }
  , text = 
      { value = "LABEL"
      , font = "Helvetica Neue, Helvetica, sans-serif"
      , size = 16
      , color = Color.red
      , weight = 100
      }
  , border = 
      { size = 10
      , color = Color.green
      , style = Dotted
      }
  }

view : Label -> Html
view label = 
  let 
      labelStyle = 
        [ "position"    => "absolute"
        , "left"        => (toString label.position.x ++ "px")
        , "top"         => (toString label.position.y ++ "px")
        , "width"       => (toString label.size.x ++ "px")
        , "height"      => (toString label.size.y ++ "px")
        , "font-family" => label.text.font
        , "font-size"   => (toString label.text.size ++ "pt")
        , "color"       => (toRgbaString label.text.color)
        , "weight"      => toString label.text.weight
        , "border-width" => (toString label.border.size ++ "px")
        , "border-style" => (toBorderStyleString label.border.style)
        , "border-color" => (toRgbaString label.border.color)
        , "display"      => "flex"
        , "align-items"  => "center"
        , "justify-content" => "center"
        ]
   in 
     Html.div 
       [ style labelStyle ] 
       [ Html.text label.text.value ]




update (x,y) label = 
  { label | position <- Vector x y }

main = 
  Signal.map view 
    (Signal.foldp update label Mouse.position)