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
First, sorry if my english sounds bad 🙂
I’m glad you’ve decided to take code for IE from .htc and put it in to .js. It’s more appropriate this way.
When I’ve seen you first article about SVG in IE, I also thought about doing something similar like RichDraw. My idea is to create a whiteboard. Ajax would be used to synchronize display on every client.
What do you think about that?
I think creating a multi-user whiteboard is a cool idea. The sharing would be tricky, but very cool.
I am working on a Javascript class for loading and saving diagrams (or anything) to online storages like S3 and Box.net
I am hoping to make a little application out of it. Maybe multi-user could be part of it.
Your idea about converting VML to SVG is very good because it would save a lot of trouble later.
With only SVG in mind, you can create components and build diagrams out of them. Something like a small MS Visio 🙂
How well is SVG grouping work? Can you move elements by moving a group or you have to move them one by one?
Maybe you can also create a helper Javascript class to handle copying directly a DOM SVG nodes from/to server.
Also, if this can help you to write more cross browser code, I’ve noticed that DOM method setAttribute works well in all browsers (setAttributeNS doesn’t), and clone method for copying object also works well.
In order for RichDraw to work which version of prototype framework do you use
The demo uses Prototype version 1.4.0
Mark
do you think that a Web application that someone could draw UML,DFD diagrams, using SVG as format for the shapes, can use RichDraw as a start, as a template?
I have a project like the above, and i must use the above technologies
– XML-SVG
– DOM
– Javascript
– PHP
i can use any Javascript Libraries and Frameworks in order to achieve my goal.Is something like that feasilble using Prototype,SVG,HTML?
Thanks in advance
One of the reasons I made RichDraw was so someone could build exactly that kind of web-based application. It’s definately a starting point. I’m going to add support to RichDraw for “addin” shape libraries. That would help you make the various kinds of special shapes.
Start playing around with the code to see if it has potential. You might find that it needs some feature that may be hard to implement. You never know until you start exploring.