RichDraw – Simple VML/SVG Editor

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