Category: VML

Its been a couple months since I released RichDraw. At the time I was looking around at the state of browser-based drawing and diagraming tools. Most were Java or ActiveX based. Now, I am finding lots of pure Javascript API’s and tools.

There also seems to be more of a push to create API’s, making it easier to create cross-browser applications. Each browser seems to support a slightly different technology. Even when they overlap, browser implementations are not always interoperable. Javascript wrappers are a big help.

Here are some Javascript libraries focused on cross-browser drawing:

• Dojo.gfx
• ExplorerCanvas
• RichDraw
• jsVectorGraphics
• jsDrawing

Here are some neat browser-based drawing applications:

• Whiteboard – A little colaborative whiteboard experiment. Uses the Dojo.gfx toolkit to do the rendering.
• Paintr – A weekend project by Anne van Kesteren. Uses suppport to do the rendering.
• Draw – Has the makings of a full-blown flowcharting tool. Many shape types and support for connectors. Currently IE only, but since it is built on RichDraw, Firefox and Opera could be supported as well.
• XDraw – Gavin Doughtie’s early work that may have started the Dojo.gfx toolkit.

Not an exhaustive list, but at least some evidence that drawing in a browser is getting serious.

Rich text editing is a feature that is finding it’s way into many new web applications. It’s becoming a feature that users can’t live without. We are also starting to see some graphical editing applications. In an effort to satisfy a potential, future, demand to have graphical editing everywhere (it could happen), I created a Javascript component called RichDraw.

RichDraw works in IE 6+, Firefox 1.5+ and Opera 9, using VML or SVG as the underlying renderer. Opera 9 has a small issue with the way I adjust/offset the mouse coordinates, but I’ll look into that. Currently the component supports:

• Creating basic shapes (rectangle, rounded rectangle and ellipse) and lines.
• Selecting shapes.
• Deleting selected shapes.
• Dragging shapes with mouse.
• Setting fill color.
• Setting line color and width.
• Retrieving the markup.

I don’t know if there are any real uses for RichDraw in it’s current state. There is a lot that could be done to enhance RichDraw and make it more usable. Probably the most important feature would be loading markup back into the editor. On the surface, that’s easy enough to add. However, there could be situations where the markup is saved from IE (VML) and loaded back into Firefox (SVG). This would not work. I am planning on converting the VML to SVG when retrieving and converting it back when loading. That way RichDraw always appears to be using SVG. I will build from my IESVG code to handle the conversions.

Other enhancements include:

• Resizing selected shapes.
• Ordering (Bring to Front, Send to Back).
• Scrollable workarea.
• Inserting text.
• Inserting images.

Required files: richdraw.js, svgrenderer.js, vmlrenderer.js

Demo file: richdraw_demo.htm

I made some changes to the IESVG behavior. I am trying to get better feature coverage without making the rendering too slow. I have been testing the code using some SVG images from different places, trying to figure out what parts of SVG seem to be more important than others. Recents chanegs include:

• Basic support for gradient fills. It’s pretty weak and may have not SVG-correct.
• Basic support for svg:g elements.
• Switched code to use DOM methods (appendChild and replaceChild) instead of slower, string-based methods.

I plan to add more support for gradients. I also plan to add some scripting support. You can do scripting now, but you need to treat the elements as VML, not SVG. I plan to add some methods to the VML elements to make them appear more SVG-like when scripting.

Files can be downloaded from here. I added the SVG lion to the samples:

Sample files: lion.htm (IE), lion.xhtml (Firefox)

Update: Fixed 404 on link above.

Inspired by Emil’s emulation of the canvas tag in IE, I put together a simple SVG emulation behavior for IE. As with Emil’s code, I am making use of Internet Explorer’s VML support. The behavior will walk the SVG element structure and attempt to convert to appropriate VML elements. It’s far from complete, but it does a decent job. Supported features include:

• Basic shapes: rect, ellipse, circle, polyline, polygon and path.
• Simple fills commands (in attributes and CSS): fill and fill-opacity.
• Simple stroke commands (in attributes and CSS): stroke, stroke-width, stroke-opacity and stroke-linejoin.

The behavior works on Inline-SVG, not standalone SVG files. Currently, the behavior only works on static SVG. You can’t use Javascript to interact with the SVG. Javascript can only access the VML elements. I plan to add support for and gradients (although this could be hard). I also want to eventually add support for scripting by adding SVG-like methods to the VML elements. You’ll notice that the SVG elements are in an explicit svg namespace. This seems to be a requirement for the behavior to work, but I am trying to remove the need.

Required files: iesvg.htc, iesvg.js

Sample files: iesvg_test.htm (IE), iesvg_test.xhtml (Firefox)

The sample files are exactly the same, only the extensions are different. Firefox must have Inline-SVG in an XHTML file. There is probably a way I can get Apache to trick Firefox into thinking the HTML file is an XHTML file (or get IE to think the XHTML file is an HTML file), but I haven’t got it working yet.

Update: Core files have been updated. Test files have gradient examples.