2426021684 / elm-collage / Collage.Events

Use this module to make your graphics interactive. It is as easy as you think it is.

collage
  |> onClick Clicked

Will send the message Clicked to your update function where you can handle it. You will probably need some way to identify your objects to keep track of which object the user clicked on:

drawing.collage
  |> onClick (ClickedOn drawing.id)

where drawing : { r | collage : Collage, id : Id }

Contents

Mouse events

onClick : msg -> Collage msg -> Collage msg

onDoubleClick : msg -> Collage msg -> Collage msg

onMouseDown : (Collage.Point -> msg) -> Collage msg -> Collage msg

onMouseUp : (Collage.Point -> msg) -> Collage msg -> Collage msg

onMouseMove : (Collage.Point -> msg) -> Collage msg -> Collage msg

onMouseEnter : (Collage.Point -> msg) -> Collage msg -> Collage msg

onMouseLeave : (Collage.Point -> msg) -> Collage msg -> Collage msg

onMouseOver : (Collage.Point -> msg) -> Collage msg -> Collage msg

onMouseOut : (Collage.Point -> msg) -> Collage msg -> Collage msg

Focus events

onFocusIn : msg -> Collage msg -> Collage msg

onFocusOut : msg -> Collage msg -> Collage msg

Custom events

on : String -> Json.Decode.Decoder msg -> Collage msg -> Collage msg

Adds a custom event handler to a collage.

The first argument specifies the event name (as you would give it to JavaScript's addEventListener). The second argument will be used to decode the Json response from the event listener. If the decoder succeeds, the resulting message will be passed along to your update function.

onClick : msg -> Collage msg -> Collage msg
onClick msg =
  on "click" (Json.succeed msg)