SVG in Sproutcore, access DOM-nodes with Sproutcore, bind sproutcore-events to DOM

Question

I'm experimenting with Sproutcore and am trying to use SVG (Standard Vector Graphics) within the sproutcore app. I need to be able to "draw" on a canvas of some kind, to display elements like lines, boxes, images. SVG has it all. My Idea was to include the SVG-Image using a StaticContentView:

 svg: SC.StaticContentView.design({ classNames: ['my-static-content-view'], content: "<svg version='1.1' width='970' height='219'> \\ <image id='someimage' x='410.5' y='122' width='25' height='25' xlink:href='"+static_url('/resources/layout/someimage.png')+"'></image> \\ </svg>", tagName: 'section' }) 

That works great so far, the svg-image is displayed inside the app, the subimage gets loaded too. Now my problem: I want to be able to manipulate the svg-image at runtime, add new nodes and bind sproutcore-events to the different nodes . For example: When the someimage up in the codesnippet gets clicked I want an event to be triggered. I figured I could bind events using

 SC.Event.add(someelement, "click", someHandler); 

But I need to be able to access the svg-DOM-node, the "someimage", in order to bind the event to it. I have googled and tried jQuery using $('someimage').get(0) and many other methods but nothing seems to work.

Can anybody give me a hint on how to access the element? Am I maybe doing it wrong using StaticContentView in the first place? Can I maybe build the SVG as a native Sproutcore-Element or View to make things easier?

Answer 1

Your solution might work, but is not correct. You should use the mouse* events to implement changes. By default SproutCore will already attach all events to your view, and it will check whether you have implemented the event functions on your view when the event happens.

From the mouse* event handlers you can then refer to the current view through CoreQuery by using this.$ and address the svg element / canvas element through a jQuery-like method.

The reason why your method is not correct is that it is very difficult now to pass on any changes to the content into the rest of the app without having to write glue code, which is one of the major elements SproutCore was written to replace.

I wrote a blog post a while ago which describes how to make a custom SC.View. While it doesn't exactly touch what you want to do, the basics are more or less the same.

https://mauritslamers.wordpress.com/2013/01/22/how-to-make-a-custom-view-in-sproutcore-html-style/

Edit: forgot link to blog post

Answer 2

It was actually quite easy, I'm a little ashamed I opened a new thread for this because that usually means I'm completely lost.

Solution: As mentioned above it's easy to bind sproutcore events to objects at runtime (eg when new DOM elements are added at runtime to make them trigger a sproutcore event) using

 SC.Event.add(elem, "click", someHandler); 

My problem was how to access the DOM-element. It turns out the common jQuery-function $() works on views too. I just had to call it directly on the StaticContentView, plus I forgot the # (duh). So in my example above it's possible to get the someimage-DOM-element with the following code:

 elem = svg.$('#someimage')[0]; 

Note that svg in the code above is the StaticContentView and not the svg-HTML-element inside the StaticContentView. I just realized that could be a little tricky to retrace.

So the complete code, executed somewhere inside your sproutcore app "App" with the mainPane containing only the StaticContentView "svg", looks like this:

 elem = App.mainPane.svg.$('#someimage')[0]; SC.Event.add( elem, "click", function(){alert('clicked!');} ); 

Hope someone runs into the same problems and saves some time reading this.

Something else: When the svg-view is not the topmost view on your pane it can be really handy to make use of the SC.outlet-method. Take a look here .