Generic event handler in SVG

[Max Poliakovski]

Hello crews,

I'm currently experimenting with rendering musical notation in the browser. For that purpose, I leverage Ractive + SVG.

After being able to render a simple piece of music, I'd like to add some basic editing, for example, clicking on musical objects should show their properties.

Because a typical musical score can have several hundreds of musical symbols, adding event handlers to every single object (and thus cluttering the code with "on-click"-like expressions) doesn't look like a good idea. Moreover, I'm not sure about the performance of this method.

Is it possible to create a kind of generic event handler in Ractive, attached to the SVG, and then figure out the precise event target? Something like this fiddle (for the moment being, it doesn't work due to cross-origin issues but it shows the proof of concept)?

I'd greatly appreciate any suggestions (and perhaps real-world examples) regarding event handling in big documents.

Thank you in advance!

Cheers

Max

[Chris Reeves]

If you're using Ractive >= 0.8, there's actually event delegation built in that applies at the top level iterative sections in the template as long as there's at least one element above the section e.g. <g>{{#each note}}<circle on-click="['I am delegated']" />{{/each}}</g>. It handles all of the (known) weird corner cases associated with handling events between SVGs and the regular DOM.

I don't really have any examples, and I'm pretty lousy with svg, but it sounds like it would be a pretty fun project.

Thanks, Chris

--
You received this message because you are subscribed to the Google Groups "Ractive.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Max Poliakovski]

Hello Chris,

If you're using Ractive >= 0.8, there's actually event delegation built in that applies at the top level iterative sections in the template as long as there's at least one element above the section e.g. <g>{{#each note}}<circle on-click="['I am delegated']" />{{/each}}</g>. It handles all of the (known) weird corner cases associated with handling events between SVGs and the regular DOM.

Thank you for pointing me to the things already implemented in Ractive. This indeed looks less cluttered. I'll try it out later tonight.

 

...but it sounds like it would be a pretty fun project.

Yes, it's indeed an exciting stuff! What I'm most excited about is the great possibility to use templates with SVG making such a complex stuff like music notation look like a breeze. You look at this and you immediately know what it does.

Currently, there are only two JS libraries for engraving music notation in the browser. Both of them use the imperative programming style resulting in quite large, impossible-to-understand code with a great amount of boilerplate.

On the other hand, Ractive's declarative approach enables me to render a simple music piece using only about 300 lines of code! I'm not sure if I'll be able to maintain this simplicity for bigger scores without resorting to more complex stuff. We'll see.

I plan to publish the code soon so everyone can take a look at it.

Cheers

Max