Canvas event listeners

mike1127 · June 27, 2018, 7:12pm

I’m fairly new to PureScript. I noticed that some handling of side-effects have changed recently… things seem to be using Effect now rather than Eff. This is related to my question, because I’d like to add an event listener to a canvas. My understanding is that in JS, you register a call back with an event listener. I’ve been looking for tutorials on callback in PureScript but I’m wondering if they are out of date now.

So, can someone give me a hint how to implement an event listener on a canvas, maybe pointing me to a modern tutorial or maybe giving me some example code?

Thanks,
Mike

chexxor · June 28, 2018, 6:42am

Chapter 9 in the PureScript by Example book is about canvas.
https://leanpub.com/purescript/read#leanpub-auto-canvas-graphics

mike1127 · June 28, 2018, 6:48am

Chapter 9 doesn’t mention callbacks or event listeners, as best I can tell, so it’s not much help.

PSBE uses Eff rather than Effect. In addition, the purescript-canvas library seems to be broken in purs 0.12. So I’m having a hard time following PSBE.

chexxor · June 28, 2018, 4:58pm

There’s lots of PureScript projects on Github. You can try searching for projects which use canvas, then find one which looks like it’s using canvas events:

Search using a term like this: https://github.com/search?q=language%3APureScript+canvas

Here’s one project I found which might be what you’re looking for.

github.com

craigdallimore/purescript-lightening/blob/master/src/Main.purs

module Main where

import Prelude

import Control.Apply (lift2)
import Control.Monad.Eff (Eff)
import Control.Monad.Eff.Console (CONSOLE, log)
import Control.Monad.Except (runExcept)
import Control.Monad.ST (ST, STRef, newSTRef, readSTRef, writeSTRef)
import DOM (DOM)
import DOM.Event.EventTarget (addEventListener, eventListener)
import DOM.Event.MouseEvent (eventToMouseEvent, pageX, pageY)
import DOM.Event.Types (Event)
import DOM.HTML as H
import DOM.HTML.Event.EventTypes (mousemove)
import DOM.HTML.Types (htmlDocumentToParentNode)
import DOM.HTML.Window (document, requestAnimationFrame)
import DOM.Node.ParentNode (QuerySelector(QuerySelector), querySelector)
import DOM.Node.Types (Element, ParentNode, elementToEventTarget)
import Data.AppState (AppState(..), initialAppState)

This file has been truncated. show original

It doesn’t solve the 0.12 problem, though.

prozacchiwawa · June 28, 2018, 8:39pm

I recently was playing with purescript-canvas
( https://github.com/prozacchiwawa/purescript-canvas-play )

I’ve been using bodil’s signal library which has been ported to 0.12. I’d recommend following that approach. You can easily enough pass a purescript function that emits a signal value to javascript to use. Remember to add an extra () when calling this function because effectful purescript functions require it.

I used this as a dependency, as it looks like the port forward hadn’t been accepted yet.
“justinwoo/purescript-canvas#c235db7581bc31a7774a8261e042ccc5fbf4523b”

Farily certain everything else is up to date with 0.12.

mike1127 · June 30, 2018, 9:14am

Hi prozacchiwawa:
I’m looking at your code. I don’t completely understand signals yet, but I had one question. I see you use ‘animationFrame’ from Signal.DOM to create a signal which generates a new time after every change in the animation time. I also see that you have the line:

timeSignal <- unwrap (map (\_ -> now) frames)

I don’t know if I misunderstand, but this looks like it’s taking a signal that is already the state of the current time, and then mapping ‘now’ on it. Would that not be redundant?

prozacchiwawa · June 30, 2018, 2:17pm

I wrote other stuff to use Data.DateTime.Instant so I mapped it to now from purescript-now.
It’s redundant in the sense that there’s already a Time coming through…
Probably should use a proper abstraction that can accept either but it was mostly messing around.