Dojox Diagramming Tool

Dojox Diagramming Tool is a cross-browser AJAX drawing and diagramming tool. It was developed based on Dojox.gfx, Dojox.sketch, Dijit and other utility components from Dojo Javascript library with the latest version 1.2.0 and J2EE as backend server. It's one component of visualization technologies for web-based viewing,navigation, and authoring of CxDA and Constellation Program and Project data.

The tool uses the vector graphics functionality that is a native capability in modern browsers. For the first part, DojoX javascript library was used as the base, an extensions library was developed to provide the capability to create drawing elements, edit and modify, copy and move, delete, persist and retrieve graphs. For the second part, the Dojo javascript library, the extensions library, and AJAX programming were used to create a basic scientific/engineering diagramming application that operates on diffrent web browsers, including Firefox, Internet Explore, Safari, Google Chrome and Camino.

Here's the test URL:
http://www.intrinsyx.com/sharon/MyEditor/test.html

All the basic features are available, except server-relatd AJAX features, such as 'save','open','image', as the web host doesn't support jsp. A recorded video is available to show server-related features( upload an image, save the current diagram to a svg file, open a svg file). Here's the video page:
http://www.intrinsyx.com/sharon/Demo_image.htm

Another video to show the shape drawing, editing from toolbar: http://www.intrinsyx.com/sharon/demo.swf

The details about the features in this project are described in the following 2 tables.

Applications	Features	How to Access the Features
Basic DojoX Diagramming Library	Shapes: The ability to draw different basic shapes (rectangle, rounded rectangle, circle, ellipse, triangle, polygon)	Click the shape icon on the tool bar, then drag the mouse on the drawing canvas to draw the shape.
	Connector: A connector is a line with optional arrows to connect two shapes.	Click one shape, then drag the mouse from this shape to the top of another shape, release the mouse.
	Selection: The ability to create a selection for a shape or group.	Click any shape or text.
	Resize: The ability to resize a shape or group.	Drag either one of the anchors to resize the shape or text to desired size.
	Delete: The ability to delete a selected shape or group	Select a shape, then click the 'delete' icon or press 'd'.
	Text: The text annotation/label for a shape	Double click a shape or text to edit the text annotion, press enter to exit the editing.
	Arrange: The ability to arrange the z-order of the shapes/group in the drawing canvas, including "bring to front" - bring the selected shape or group to the front of the drawing canvas, "bring to back" - bring the selected shape or group to the back of the drawing canvas	Click a shape or text, then click 'moveToFront'/'moveToBack' icon on the tool bar, or press 'f' or 'F' for "bring to front" , press 'b' or 'B' for "bring to back" feature.
	Undo: Cancel the previous command	Click 'Undo' icon on the tool bar, or press ctrl+z.
	Redo: Repeat the previous command	Click 'Redo' icon on the tool bar, or press ctrl+y.
	Duplicate: Duplicate the selected shape or group	Click 'Duplicate' icon on the tool bar or press ctrl+v.
	Group: Make the selected area (from multi-shapes) a group	Click 'Group' icon on the tool bar, then select shape or text, or use ctrl+click shape.
	Ungroup: Dissolve a group	Click 'UnGroup' icon on the tool bar, or click any white space on the canvas.
	Canvas navigation: The ability of zoom in, zoom out and pan in the drawing canvas.	Move the slider bar on the right of the tool bar, double click the slider bar for 'fit the screen'. Click 'pan' icon on the tool bar for paning, or use left/right/up/down arrow on the keyboard.
Advanced DojoX Diagramming Library and AJAX based schematic diagramming application	Other server-side related features: Insert: Insert an image to the drawing canvas; Save - serialization: Save the current drawing canvas to a JSON/xml file or image file; Open - de-serialization: Import or open a JSON/xml file or image file	Click 'ImageRect' icon on the tool bar to open a dialog, then select an image from local file system. Click 'Save' icon on the tool bar to save the current diagram to a svg file. Click 'Open' icon on the tool bar t o open a dialog, then select a svg file from local file system.
	Advanced Text annotation/Text effects: The ability to change text font, size, wrap, typeface.	Right click a shape to bring the menu, or click choose/enter value from tool bar.
	Shape effects: The ability to change the shape's line border (size, color, style), area (including fill color, background image), position and size (shape's position coordinates input, size input, rotation angle)	Right click a shape to bring the menu, or click choose/enter value from tool bar.
	More arrange functions: "increment" - increase the selected shape or group's z-order by 1, "decrement" - decrease the selected shape or group's z-order by 1.	This is a feature related to moveToBack.
	Across browser and OS: the ability of operation on IE, FF, Safari, Camino across Windows, Mac, and Linux.	Tested for IE 7, FF 3 and Safari 3.1.2 for Windows, Safari and Camino for Mac.
	AJAX: AJAX based serialization and de-serialization	As described above for 'insert', 'save', 'open', which are AJAX based serialization and de-serialization.
Client/Server side graph layout algorithms	Integration: work with CxDA AJAX developers to integrate the diagramming application in to the CxDA registry software	Scale test - a diagram up to 5000 shapes is tested. A diagram up to 1000 shapes can perform well.