Skip to content

Instantly share code, notes, and snippets.

@john-kelly
Last active May 9, 2016 07:17
Show Gist options
  • Save john-kelly/4e67f85416c160a261bf9f7ec0b4b58c to your computer and use it in GitHub Desktop.
Save john-kelly/4e67f85416c160a261bf9f7ec0b4b58c to your computer and use it in GitHub Desktop.
Elm 0.16 vs 0.17 for simple circle dragging program.
import Effects
import Html exposing (Html)
import Mouse
import StartApp exposing (start)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Svg.Events exposing (..)
main =
(start
{ init = (init, Effects.none)
, update = (\ a m -> (update a m, Effects.none))
, view = view
, inputs = [ Signal.map ChangeCirclePosition circlePosition ]
}
).html
-- INPUTS
draggingMailbox : Signal.Mailbox Bool
draggingMailbox = Signal.mailbox False
circlePosition : Signal (Int, Int)
circlePosition =
let
draggingAndPosition = Signal.map2 (,) draggingMailbox.signal Mouse.position
in
Signal.filterMap
(\ (dragging, pos) -> if dragging then Just pos else Nothing)
init
draggingAndPosition
-- MODEL
type alias Model = (Int, Int)
init : Model
init = (0, 0)
-- UPDATE
type Action = ChangeCirclePosition (Int, Int)
update : Action -> Model -> Model
update action model =
case action of
ChangeCirclePosition pos -> pos
-- VIEW
view : Signal.Address Action -> Model -> Html
view address (x, y) =
Svg.svg
[ width "500px"
, height "500px"
, Svg.Attributes.style "border: 1px solid black"
]
[ circle
[ onMouseDown (Signal.message draggingMailbox.address True)
, onMouseUp (Signal.message draggingMailbox.address False)
, cx (toString x)
, cy (toString y)
, r "45"
]
[]
]
import Html exposing (Html)
import Html.App exposing (program)
import Mouse exposing (moves)
import Platform.Sub
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Svg.Events exposing (..)
main =
program
{ init = (init, Cmd.none)
, view = view
, update = (\msg model -> (update msg model, Cmd.none))
, subscriptions = subscriptions
}
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
moves (\ {x, y} -> MouseMove (x, y))
-- MODEL
type alias Model =
{ position: (Int, Int)
, dragging: Bool
}
init : Model
init =
{ position = (0, 0)
, dragging = False
}
-- UPDATE
type Msg
= MouseDown
| MouseMove (Int, Int)
| MouseUp
update : Msg -> Model -> Model
update msg model =
case msg of
MouseDown -> {model | dragging = True}
MouseUp -> {model | dragging = False}
MouseMove pos ->
if model.dragging then
{model | position = pos}
else
model
-- VIEW
view : Model -> Html Msg
view { position, dragging } =
let
(x,y) = position
in
Svg.svg
[ width "500px"
, height "500px"
, Svg.Attributes.style "border: 1px solid black"
]
[ circle
[ onMouseDown MouseDown
, onMouseUp MouseUp
, cx (toString x)
, cy (toString y)
, r "45"
]
[]
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment