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 }
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
onFocusIn : msg -> Collage msg -> Collage msg
onFocusOut : msg -> Collage msg -> Collage msg
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)