Relative Mouse Position

elm-package.json

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "4.0.0 <= v < 5.0.0",
        "elm-lang/html": "1.0.0 <= v < 2.0.0",
        "elm-lang/mouse": "1.0.0 <= v < 2.0.0",
        "elm-lang/window": "1.0.0 <= v < 2.0.0",
        "evancz/elm-http": "3.0.1 <= v < 4.0.0"
    },
    "elm-version": "0.17.0 <= v < 0.18.0"
}

RelativeMouse.elm

import Html exposing (..)
import Html.App as App
import Html.Attributes exposing (..)
import Mouse exposing (Position)
import Window exposing (Size)
import Task

-- MODEL 

plottingSize = Size 600 400

plottingPos = Position 0 100

type alias Model = 
  { size : Size 
  , pos : Position
  , relPos : Position
  }

init : (Model, Cmd Msg)
init = 
  { size = Size 0 0 
  , pos = Position 0 0 
  , relPos = Position 0 0 
  } ! [Task.perform Resize Resize Window.size]  

-- UPDATE 

type Msg = Resize Size | MouseMove Position

update : Msg -> Model -> (Model, Cmd Msg)
update msg model = 
  case msg of 
    Resize size -> {model | size = size} ! []
    MouseMove pos -> 
      let 
        x = pos.x - (model.size.width - plottingSize.width)//2
        y = pos.y - plottingPos.y
      in 
        {model | pos = pos, relPos = Position x y } ! []

-- VIEW 

px v = (toString v) ++ "px" 

box : Size -> Position -> String -> (List (Html msg) -> Html msg)
box {width, height} {x,y} color = 
  div 
    [ style 
      [ ("position", "absolute")
      , ("width", px width), ("height", px height)
      , ("background", color)
      , ("top", px y), ("left", px x)]]

view : Model -> Html msg
view {size, pos, relPos} = 
  let 
    {width, height} = size
    x = (width - plottingSize.width)//2
    plotPos = {plottingPos | x = x}
  in 
    box size (Position 0 0) "grey" 
      [ box plottingSize plotPos "white" 
        [ div [] 
          [ text ("Absolute Mouse Position: "++(toString pos))]
        , div [] 
          [ text ("Relative Mouse Position: "++(toString relPos))]
        ] 
      ] 

-- WIRING 

subscriptions : Model -> Sub Msg
subscriptions _ =
  Sub.batch 
  [ Window.resizes Resize
  , Mouse.moves MouseMove
  ]


main : Program Never
main =
  App.program
    { init = init, update = update, view = view, subscriptions = subscriptions }