Getting mouse coordinates from elm-svg events

[Michelle Fullwood]

Hello,

I'm experimenting with making a freehand drawing component using elm-svg. I have most of the code mocked up, but I can't figure out how to get mouse coordinates from Svg.Events.

Basically, I want to have actions that look something like this:

type Action
  = StartStroke Float Float
  | ContinueStroke Float Float
  | EndStroke Float Float

where the floats are the (x, y) coordinates relative to the SVG element. These actions should be activated by Svg.Events.mouseup, mousedown, and mousemove, but I need to figure out how to supply the (x, y) coordinates to the action.

I have everything more or less set up in this gist, with the exception of having the actions activated by the mouse events: https://gist.github.com/michelleful/c298d7e9a22a4bb5e1ec

The end result I'm hoping for is something like this (made with d3.js): http://bl.ocks.org/michelleful/3d2d634c570c9164db8e

I read through this thread (https://groups.google.com/forum/#!searchin/elm-discuss/svg/elm-discuss/6nv1KkBs1a8/cCERU1eyYqIJ) which discusses how to do dragging in elm-svg, but couldn't figure out how to get that approach to work with StartApp.

If someone could give me some pointers on how to proceed, I'd be very grateful! (And if I'm doing something ridiculous, approach-wise or in my Elm code, please let me know also.)

Thanks,
Michelle

[Justin]

I ran into a similar issue for one of my projects.

I ended up doing the following, first update to using the non-simple version of the StartApp (so you can feed in other signals) and have then have Mouse.postion feed in as an additional input signal. To do this you will have to write an action for when the mouse position changes and update your update function so you can store the current mouse position in your model. Then when you receive one of the Svg.Events you will have to translate the current mouse position to a position within the Svg.

In my project the svg is setup to dynamically change sizes based off of the window as well so I had to capture the current Window.dimensions signal value and use that when performing the translation of the mouse coordinates.

Let me know if you want more details.

I am also curious to see what others suggest as well.

Thanks,

-Justin

[Magnus Rundberget]

Hi !

Fun challenge. Not really worked much with svg and never with elm. So others might have better ideas.
Did some changes which you can see in this gist: https://gist.github.com/rundis/f9df26c9cf184b36e5c1

Hightlights:
- Moved from using startapp.simple to full startapp.
- Mapped the mouseEvents signal from elm-drag to your actions
- changed from float to int (maybe not kosher, but simplest since mouseSignals are Int's)

hope it helps
cheers
-magnus

[Michelle Fullwood]

Hi Magnus,

Wow, thanks so much for filling in the code snippet, it works great! It looks like I have to study up a bit on how the more complex StartApp works, but I more or less understand all the code and have learned a lot from it. It looks like I will have to do some corrections to the (x, y) coordinates when the SVG doesn't fill the window but I can see where to put the correcting code for that.

Thanks again!

Michelle

[Michelle Fullwood]

Hi Justin,

Thanks so much for the advice. It looks like Magnus' solution was very similar to yours. As you point out, I'll have to translate the (x, y) window coordinates to the svg coordinates. If you have more details on how to do this (e.g. get the position of the svg element in the window), that would be great, but I can also dig around and figure stuff out from here.

Thanks,

Michelle

[Justin]

Yeah nice job Magnus!

Unfortunately you have reached the edge of my knowledge. For me what I ended up doing was just encoding whatever Html/Css logic I was using into the translation. So for example in my case when I build the svg I specify that it should be 80% of the screens width with a 40px header and footer. My logic to translate from window coordinates to svg coordinates then just duplicates that logic to do the translation.

I have some ideas about how to restructure the logic to try and remove some of the duplication but have not looked into it yet.

Would be excited to know if you figured something else out

Thanks,

-Justin