Diagram Builder Mode

Essential Diagram can be used to create a rich Visio-like Diagram Builder application. This framework provides many utility controls to help you put such an application together very easily.

There are several drawing tools that let your users add basic shapes and lines to the diagram. This just makes it easy to put together a rich Diagram Building Environment.

Line Tool

It is used to draw a line with two points. The Orthogonal Line Tool is used to draw a line between two points using right angle bends.

PolyLine Tool

It is used to add lines containing two or more points to the symbol.

Rectangle Tool

The Rectangle Tool is used to draw a rectangular shape and the Rounded Rectangle tool can be used to draw a rectangle with rounded corners.

Ellipse Tool

It is used to draw ellipses.

Polygon Tool

It is used to add filled polygons to the symbol.

Curve Tool

It is used to add open curves to the symbol.

Closed Curve Tool

It is used to add closed curves to the symbol.

Spline Tool

It is used to add arcs to the symbol.

Bezier tool

It can be used to create parametric bezier curves.

Text Tool

It is used to add text nodes to any symbol on the canvas. The Diagram Web Control supports inclusion of standard and multi-line text in diagram nodes. Other features include in-place editing, font styles, fill styles, border styles, background styles and formatting options.

Use these nodes as is or make them part of a complex symbol as shown below.

Rich Text Tool

This tool is used to add a Rich Text Node that displays text in rich text format with different font styles and colors for different sections of the text.

Image Tool

It is used to add bitmap images to the symbol.

Essential Diagram comes with a number of editing tools that allow users to work interactively with the Diagram Control in context of Diagram Building applications. Besides a slew of built-in tools, custom tools providing custom functionality can be defined and added to the diagram controller.

Select Tool

This default tool will activate the select tool and deactivate any other active tools. Objects that are selected using the Select Tool are drawn with select handles. Multiple objects can be selected using the select tool by holding down SHIFT or the left mouse-button and dragging. The last object selected is the anchor object.

Align Tool

Using these tools, one or more nodes can be selected and aligned with respect to each other. You can apply relative alignment on a set of selected nodes with respect to the first node in the selection.

Layout Tool

The layout tools can be used to adjust the spacing and sizing of the diagram nodes. Below is a note on different possible layouts.

• Space Across - Evenly spaces the selected object along the x-axis
• Space Down - Evenly spaces the selected object along the y-axis
• Same Width - Sets the width of the selected object to match the width of anchor object
• Same Height - Sets the height of selected object to match the height of the anchor object
• Same Size - Sets the height and width of selected object to match anchor object

Nudge Tool

The Nudge tools trigger finer movement of nodes in the diagram.

• Nudge Up - Moves selected object up by one grid unit
• Nudge Down - Moves selected object down by one grid unit
• Nudge Left - Moves selected object left by one grid unit
• Nudge Right - Moves selected object right by one grid unit

Z-Order Tool

The nodes can be grouped and their Z-order can be changed by using the Z-Order tools.

• Group Tool - Creates new group using currently selected objects
• Ungroup Tool - Ungroup selected group
• Bring to Front - Moves selected object to top of Z-order of its layer
• Send to Back - Moves selected object to bottom of Z-order of its layer
• Bring Forward - Moves selected object up by one level in the Z-order of its layer
• Send Backward - Moves selected object down by one level in the Z-order of its layer

Rotate Tools

These tools can be used to rotate objects on the diagram canvas.

• Rotate Left - Rotates selected object left by 90 degrees
• Rotate Right- Rotates selected object right by 90 degrees
• Flip Vertical - Rotates selected object by 180 degrees around its local y-axis
• Flip Horizontal - Rotates the selected object by 180 degrees around its local x-axis

Pan Tool

It changes the cursor into a hand-symbol allowing the user to drag the diagram view port in any direction.

Zoom Tool - The Zoom tool allows the user to zoom in and out using the mouse and the magnification property in the view provides precise control.

Text Formatting Tools

The Diagram Control comes with sophisticated text formatting options such as subscript, superscript, uppercase conversion, lowercase conversion, font style and font color options.

The font color can also be styled with brushes using the Font Color Style Editor.

A Group is a node that acts as a transparent container for other nodes. It is a composite node that controls a set of child-nodes. The bounding rectangle of a group is the union of the bounds of its children. The group renders itself by iterating through its children and rendering them. Child-nodes cannot be selected or manipulated individually.

The Layout Grid provides visual cues at consistent spacing intervals and helps in creating configurable spacing intervals and colors. It includes support for point grid style, line grid style and Snap-to-grid.

The Rulers in Essential Diagram are Zoom and scroll aware and support English and metric units. They also include mouse position tracking.

Essential Diagram Undo/Redo is built on command architecture and the undo and redo stacks are maintained by the controller object.

While using Diagram Web Control diagrams are rendered as an Essential Diagram Document(.edd). These .edd files can be serialized to files and IO streams in the SOAP XML format.

Diagram symbol palettes can also be serialized into the SOAP format. Support for serializing visio symbols is also available.