Using p:resizable with an SVG element?

[Alan]

I am probably a little bit over the cliff here, but it would be great if this could be made to work.

I am using Primefaces 2.2.1 to render HTML 5 so I can embed SVG objects. Although there are some bumps with this and it only really works with Firefox 4, I am able to set and catch DOM events originating within the nodes inside the SVG document. Very cool.

What I want to do now is this:

Code: Select all

<p:panel id="panelGraphic">
    <ui:include src="images/some.svg" />
</p:panel>
<p:resizable for="panelGraphic" aspectRatio="true" />

Of course this doesn't work out of the box (no complaints I know HTML 5 stuff isn't a supported use case) but is there any way to make it work with some javascript glue?

Thanks in advance.

[Oleg]

Hi,

Code: Select all

I am able to set and catch DOM events originating within the nodes inside the SVG document. Very cool.

Yes, that's cool and an advantage of SVG in comparison to canvas.

I didn't understand your example. Are you using p:panel and p:resizable inside of SVG area?

[cagatay.civici]

Note that IE also does not support SVG so you need to write VML instead for SVG.

You can also catch events from canvas.

Canvas is far more superior than SVG. Incomparable.

http://www.canvasdemos.com/

[cagatay.civici]

Also canvas is a first class citizen of DOM.

http://www.w3.org/TR/html5/the-canvas-element.html

[cagatay.civici]

Still both SVG and Canvas are good, both have pros and cons, choice depends on what your requirements are.

And I'm out to lunch.

[Oleg]

Well, regarding IE, Canvas is not supported too for IE < 9. The same is for SVG. There are a lot of libraries which "add" Canvas / SVG support for IE < 9.

I still prefer SVG rather than Canvas. Here is a good article about both http://blogs.sitepoint.com/canvas-vs-svg-how-to-choose/ (really nice comparison and conclusion) Important is to keep in mind that SVG is vector based and canvas pixel based. Vector based graphics are scalable without losing quality (cool demo http://www.irunmywebsite.com/raphael/scaleraphael.php), can be created on server-side via XML or with graphics tool like Illustrator, etc. Canvas doesn't have that, it needs JavaScript API. I read on stackoverflow this definition

SVG

SVG is a Retained mode graphics therefore it is very easy and recommended for interactivity (like click events and all mouse events, because the event binds directly to the element in the DOM), it is great for maps etc. But it is not recommended for heavy animations since the DOM is generally slow. SVG is also not recommended for large data driven charts since it needs to do a lot of DOM manipulation. Additionally with the raphaeljs library, should simplify your work with SVG

Canvas

Canvas is immediate-mode graphic and is not part of the DOM tree, therefore its not best for binding mouse events. But is best for pixel based drawings and especially for objects that are high in animation's

I have worked with Canvas a long time ago. I can't remember, can you use jQuery event binding with Canvas? SVG allows this - not problem at all.

[Oleg]

In two sentences

In general, SVG is best suited to scalable and interactive graphics. Canvas is the best option for fast games or animations where hundreds of elements are being rendered.

So, I'm not a game developer and prefer therefore SVG

[Alan]

Wow, I like the discussion here about SVG vs. Canvas, but it is a bit far afield from my question. However I will make one comment about why I am using SVG instead of Canvas.

My development framework is that I compose highly realistic looking pictures of equipment that are going to be controlled by the application. The images are edited in Inkscape and other tools (such as Adobe Illustrator) that let me work in SVG. The equipment has buttons, connectors, and LEDs that can be clicked by the mouse or change color depending on status.

The easiest way to do this is to make those graphic artifacts SVG elements in the picture, and find them by well-formed IDs using JQuery or just window.getElementById(). Prior to HTML 5 that supports the SVG element, this didn't work because embedded SVG objects were not part of the document DOM. Now when I can find them, I can then do things to them like catch their DOM events, move them, animate them, change their style attributes with just the usual javascript DOM method calls.

I am not sure how this is done with a canvas element without a LOT more javascript code. Maybe there is a way, and maybe we will see a real cool p:canvas element in Primefaces in the future. If someone would like to comment on it I would like to know.

Anyway, my question was this. When I put up an svg element, it gets rendered in-line with a size that is specified by the width and height attributes of the svg element. I wanted the user to be able to click and drag the corner to adjust the size, and it looked like p:resizable was close to what I wanted.

Maybe my example obscured my question -- here it is refactored:

Code: Select all

<p:panel id="panelGraphic">
    <svg width="300" height="400" ,,, >  some svg stuff </svg>
</p:panel>
<p:resizable for="panelGraphic" aspectRatio="true" />

What I think needs to happen is that the click and drag action needs to be able to adjust the width/height attributes of the svg element as well as the p:panel element. Also the initial size of the p:panel needs to be adjusted to the size of the svg element. I think this could be done with a bit of javascript. Am I on the right track?

[Oleg]

Hi Alan,

If you work with pure SVG, why do you not use frameworks like jQuery SVG plugin, SVG-edit or Raphael? I made resizable with Raphael, similar to this answer in stackoverflow http://stackoverflow.com/questions/3614 ... les-in-svg

[Alan]

Oleg,

Thanks for the pointers. I am going to look into it. I wasn't aware that JQuery had a plugin for SVG. I would have thought it would have come up in the many google searches I have done.

Still I would like to get a smooth interface going between either my svg tag or one of the libraries' canvas elements and Primefaces.