Mouse tracking in clojurescript / reagent / reagi?

Question

I am trying to deal with reagent in clojurescript with a simple drawing program.

I am looking for an example of how to access the mouse position in the basic "FRP" style with Reagi .

In various reagent examples, I see things that look like this:

[:p [:onmousemove (fn (evt) ...)]] 

to attach a handler to a DOM element.

And to make the Reagi behavior, I want to write something like this:

 (def mouse-positions (r/behavior ( ... ))) 

But how do I combine these two so that the handler that I add to the DOM element loads the Reagi behavior?

Secondly, since I am using a reagent, I expect these DOM nodes to be recreated regularly. Presumably, I will need to bind the event handler to the Reagi thread again. How to provide this?

amuses

Answer 1

I wonder if the Reagi event stream will be better suited. Something like:

 (defonce mouse-events (r/events {:x 0 :y 0})) (defn home-page [] [:div {:onMouseMove (fn [event] (r/deliver mouse-events {:x (.-clientX event) :y (.-clientY event)}))}]) 

You can then highlight the stream of events with @mouse-events . You do not need to worry about having to re-bind to the event stream, since it contains a link to it.

However, keep in mind that pushing a value into the Reagi stream will not cause Reagent to re-render the node that references it directly. To do this, you will need some kind of reagent atom.

If you are creating a drawing application, I assume that your state / atom will be saved elsewhere, and you swap! or reset! to trigger a visualization.

Also note that both the behavior and the events contain only a reference to the newest value, which may not be ideal for a paint application. There is also a Reagi buffer that can help with this.