labelsandboxes.elm

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


(=>) = (,)

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


type Element 
  = Text Layout TextDefinition
  | Box Layout BoxDefinition
  
type alias Vector = 
  { x : Int
  , y : Int
  }
  
type alias Layout = 
  { size : Vector
  , position : Vector
  }
  
  
type Alignment
  = Start
  | Center
  | End
  
type FontStyle 
  = Normal
  | Italic
  | Oblique
  
type alias TextDefinition = 
  { value  : String
  , color  : Color
  , size   : Int
  , style  : FontStyle
  , weight : Int
  , font : String
  , alignment : 
      { vertical : Alignment
      , horizontal : Alignment
      }
  }
  
  


type BorderStyle 
  = Dotted
  | Dashed
  | Solid

type alias BoxDefinition = 
  { color : Color
  , border : 
      { style : BorderStyle
      , color : Color
      , size  : Int 
      }
  }




text : Layout -> TextDefinition -> Html
text layout definition = 
  let
  
      alignment a = 
        case a of 
          Start -> "flex-start"
          Center -> "center"
          End -> "flex-end"
  
      fontStyle s = 
        case s of 
          Normal -> "normal"
          Italic -> "italic"
          Oblique -> "oblique"
  
      textStyle = 
        [ "position" => "absolute"
        , "top" => (toString layout.position.y ++ "px")
        , "left" => (toString layout.position.x ++ "px")
        , "width" => (toString layout.size.x ++ "px")
        , "height" => (toString layout.size.y ++ "px")
        , "color" => (toRgbaString definition.color)
        , "font-size" => (toString definition.size ++ "pt")
        , "font-style" => fontStyle definition.style
        , "font-weight" => toString definition.weight
        , "font-family" => definition.font
        --, "background-color" => "red"
        , "display" => "flex"
        , "align-items" => alignment definition.alignment.vertical
        , "justify-content" => alignment definition.alignment.horizontal
        ]
  in 
      Html.div 
          [ style textStyle ]
          [ Html.text definition.value ]
  



box : Layout -> BoxDefinition -> Html
box layout definition = 
  let 
  
      borderStyle b = 
        case b of 
          Solid -> "solid"
          Dashed -> "dashed"
          Dotted -> "dotted"
  
      boxStyle = 
        [ "position" => "absolute"
        , "top" => (toString layout.position.y ++ "px")
        , "left" => (toString layout.position.x ++ "px")
        , "width" => (toString layout.size.x ++ "px")
        , "height" => (toString layout.size.y ++ "px")
        , "background-color" => (toRgbaString definition.color)
        , "border-style" => borderStyle definition.border.style
        , "border-color" => toRgbaString definition.border.color
        , "border-width" => (toString definition.border.size ++ "px")
        ]
        
  in 
      Html.div 
          [ style boxStyle ]
          []


view : Element -> Html
view element = 
  case element of 
    Text layout definition -> text layout definition
    Box layout definition -> box layout definition


testBox = 
  Box
    { position = 
        { x = 50
        , y = 400
        }
    , size = 
        { x = 100
        , y = 50
        }
    }
    { color = Color.green
    , border = 
        { color = Color.red
        , style = Solid
        , size  = 0
        }
    }
    
  
  
testText =   
    Text 
      { position = 
          { x = 100
          , y = 100
          }
      , size = 
          { x = 100
          , y = 50
          }
      }
      { value = "TEXT"
      , color = Color.blue
      , size  = 32
      , weight = 100
      , style = Normal
      , font = "Helvetica Neue, Helvetica, sans-serif"
      , alignment = 
          { horizontal = Center
          , vertical = Center
          }
      }  
  
main = 
  Html.div 
      []
      [ view testBox
      , view testText
      ]