Last active
May 9, 2016 07:17
-
-
Save john-kelly/4e67f85416c160a261bf9f7ec0b4b58c to your computer and use it in GitHub Desktop.
Elm 0.16 vs 0.17 for simple circle dragging program.
This file contains hidden or 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 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" | |
] | |
[] | |
] |
This file contains hidden or 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 (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