Nevron Diagram for .NET Features Overview
In This Topic
The Nevron Diagram for .NET is a fully managed, extensible and powerful diagramming framework, which can help you create feature rich diagramming solutions in WinForms and ASP.NET environments.
The product is built on top of the Nevron Presentation Framework and provides you with advanced capabilities for stunning visual impact, which you will not find in any other product - including commercial standalone diagramming applications.
The product lays on top of the Nevron Document Object Model (DOM), which ensures the consistency of its object model and design.
Nevron Diagram for .NET has been carefully designed to meet a vast amount of customization requests. It has an excellent object model and its API has been thoroughly refined to be as native and intuitive as possible. The product itself exploits a large set of design patterns, which ensures its scalability.
The features of the product can be logically divided into the following sections:
Diagram Document Object Model
The Diagram Document Object Model represents the set of elements, which you can use to build a diagramming document. The Diagram Document Object Model is built on top of the Nevron DOM and in the context of the Nevron Diagram .NET product is simply called DOM. Following is a brief summary of the most important DOM elements and features:
- Elements
Diagrams are constructed by elements, which reside in a hierarchy, the root of which is a diagramming document. The DOM provides an extended set of diagram elements, which can be subclassed and further extended.
- Documents
Documents are the root elements in the element hierarchies. They provide core support for services, view management and data exchange capabilities. Multiple views can display and edit a single document simultaneously. Currently there are two types of documents:
Drawing Documents - drawing documents are assembled from stencils, layers, shapes and guidelines. They provide you with the ability to define a vector drawing.
Library Documents - library documents are assembled from masters. They provide you with the ability to store and manage reusable drawing content.
-
Styling
The visual appearance of all diagram elements is controlled via styles. Styles can be locally specified (per each element individually) or reused via inheritance or style sheets. The usage of inheritance and style sheets greatly minimizes the effort needed to apply a consistent outlook to your diagram, which can easily be changed afterwards. It also decreases the diagram memory footprint.
-
Shapes and Groups
When constructing diagrams, you basically work with shapes. In Nevron Diagram for .NET there are two types of shapes:
- 2D shapes - 2D shapes represent boxes, containing vector or raster primitives and text. 2D shapes are also simply called "shapes".
- 1D shapes - 1D shapes represent lines with different geometry and behavior, which connect other shapes. 1D shapes are also simply called "connectors".
Nevron Diagram for .NET provides an extensive set of predefined shapes (see Predefined Shapes), but also lets you create custom shapes by simply composing drawing primitives (lines, polylines, curves, rectangles, ellipses, text blocks etc.).
All types of shapes can be grouped to create groups. Groups can also be 1D or 2D as you specify. Groups act as if they are a single shape, but are in fact composed from other shapes. Groups can also be used for the creation of custom shapes.
1D shapes have start and end plugs. Both 1D and 2D shapes can have an arbitrary number of ports. A diagram with connections is thus constructed by connecting plugs to ports. Nevron Diagram for .NET also supports an extended type of connection, which is performed by inward and outward ports - e.g. shapes can be connected by ports too.
All types of shapes can have control points. Control points are used to visually change the appearance of a shape by simply dragging them.
All types of shapes can have an arbitrary number of labels. Labels can be anchored to specific aspects of the shape.
Optionally expand-collapse, show-hide subtree and frame decorators can be applied to any 2D shape.
- Data Structures
Nevron Diagram for .NET has a built-in support for graph and tree data structures and the core operations with them. For example: performing different traversals - depth first, breadth first etc., checking whether the graph is acyclic, whether it is a tree and so forth).
Graph and tree data structures can be generated from the shapes of a drawing document. This gives you the needed flexibility to operate with a visually constructed diagram as if it is a simple graph or tree.
-
Routing
Nevron Diagram for .NET has built-in support for automatic obstacle avoidance routing. It addresses user laid-out diagrams in which certain connectors must be automatically rerouted not to cross any obstacles (shapes) in their path. Nevron Diagram for .NET provides support for both Mesh and Grid connectors routing, which is automatically performed. Addressed are issues like minimal bends, port headings, X/Y permeability etc.
-
Bridges
Bridges (hops) are a special type of decoration, which is displayed on connectors self-intersections or intersections with other connectors below it in the Z order. Bridges are automatically generated and maintained.
-
Print Manager
Drawings can be printed on single or multiple pages. Implemented is built in support for print preview and page setup.
-
Raster Image Export
Drawings can be exported to an image of any type (JPG, PNG, BMP etc.). For drawings defined in absolute measurement units (e.g. inches, millimeters etc.) you can also specify the target device resolution (helps you generate ready to print images).
-
Vector Image Export
Drawings can be exported to Pdf, Flash, SVG, Silverlight (XAML) and EMF vector formats.
-
Undo and Redo
The entire DOM is protected by history. Any property or method, which modifies the elements state records history. The history can contain an unlimited number of actions. History actions can be grouped in transactions. Transactions can be committed or rolled back. Nested transactions are also supported. The history is implemented as a service so you can easily override it, stop or pause it.
-
Batches
Batches serve as a functionality layer between documents and views. Batches are designed to operate with multiple elements and record a single history transaction. Batches take into account the element permissions. Most of operations, which views and commands perform with elements, are implemented with the help of batches.
-
Event Handling
All events are fired from an event sink service, which provides you with the ability to consistently intercept all types of events regardless of the diagram you work with. Interactivity events (mouse, keyboard and drag drop events) support event bubbling.
Automatic Layouts
The automatic arrangement of diagrams is an indispensable feature, especially when diagrams are either too large or are automatically generated. Nevron Diagram for .NET comes equipped with a sophisticated set of automatic layouts. Following is a brief overview:
- Force Directed Layouts
Implemented are barycenter, spring and symmetrical layouts. They are suitable for any kind of graph and produce straight line graph drawings.
- Layered Graph Layout
Layouts a graph in layers. It produces polyline graph drawings and is very appropriate for hierarchically organized graphs.
- Orthogonal Graph Layout
Draws a graph only with horizontal and vertical line segments. It is suitable for any kind of graph and addresses issues like crossing, bend and area minimization.
- Radial Graph Layout
Draws a graph in radial circles. It is suitable for any kind of graph and produces straight line graph drawings.
- Layered Tree Layout
Layouts a tree in layers. Produces straight line and orthogonal tree drawings.
- Compact Depth Tree Layout
Layouts a tree with minimal depth. Produces straight line and orthogonal tree drawings.
- Tip Over Tree Layout
Layouts a tree by placing children in either a row or a col. Produces orthogonal tree drawings.
- Balloon Tree Layout
Layouts a tree by placing the children in circles around their parents. Produces straight line tree drawings.
- Stack Layout
Stacks the cells in horizontal or vertical order.
- Flow Layout
Arranges the cells in horizontal or vertical lanes.
- Dock Layout
A space eating cells layout, which places vertices at per-vertex specified docking areas of the currently available layout area.
- Table Layout
Arranges the cells in a tabular manner.
Predefined Shapes
Nevron Diagram for .NET comes equipped with numerous predefined shapes, which can come handy in many applications. The predefined shapes are consistently created by shape factories. Currently implemented are shape factories, which create shapes from the following categories:
-
Basic Shapes
Basic geometry shapes (Rectangle, Square, Ellipse, Circle, Rounded Rectangle, N-Grams, N-Gons etc.). A total of 16 basic shapes are provided.
-
Flowcharting Shapes
Shapes related to flowcharting (Process, Decision, Document, Data etc.). A total of 31 flowcharting shapes are provided.
-
Symbol Shapes
Shapes for commonly used symbols (Man, Woman, Male, Female etc.). A total of 47 symbol shapes are provided.
-
Brainstorming Shapes
Shapes related to brainstorming (Smiley face, Frowny face, Attention, Note etc.). A total of 36 brainstorming shapes are provided.
-
Network Shapes
Shapes related to network modeling (Computer, Server, Printer, Terminal, Hub etc.). A total of 28 networking shapes are provided.
-
Simple Network Shapes
Simplified (with less details) shapes related to network modeling (Computer, Server, Printer, Terminal, Hub etc.). A total of 23 simple networking shapes are provided.
-
Traffic Signs Shapes
Traffic signs shapes (Stop, No entry, Speed limit etc.). A total of 54 traffic sign shapes are provided.
-
Electrical Symbols Shapes
Electrical symbols (Diode, Inductor, Capacitor, Resistor, PNP and NPN transistors etc.). A total of 91 electrical symbols are provided.
-
Floor Plan Shapes
produces shapes related to floor plans (Table, Chair, Couch, Desk, Sink etc.). A total of 110 floor plan shapes are provided.
-
Flags Shapes
Shapes representing country flags (USA flag, UK flag, France flag etc.). A total of 59 country flags are provided.
-
Travel Shapes
Shapes representing symbols related to travelling. A total of 54 travel shapes are provided.
-
Weather Shapes
Shapes related to weather (Sunny, Cloudy, Snow, Rain etc.). A total of 26 weather shapes are provided.
-
Food Shapes
Shapes related to food (Burger, Pizza, Apple etc.). A total of 33 food shapes are provided.
-
Business Process Shapes
Shapes related to business process modelling (Decision, Activity, Rule etc.). A total of 52 BPM shapes are provided.
-
Files and Folders Shapes
Shapes related to files and folders (Open Folder, File List, Mail etc.). A total of 28 shapes are provided.
This accounts to the incredible amount of 688 genuine clip-art shapes.
Windows Forms Specific Features
Nevron Diagram for .NET provides built-in support for developing thick client diagramming applications. It comes equipped with several ready to use controls, which can help you to create a standalone diagramming application in minutes. In fact, the Diagram Designer application, which is included in the package, is built by only assembling the following controls:
-
Drawing View
The drawing view helps you to display and edit drawing documents. Drawing views are feature-rich and help you to zoom, pan, stretch and fit documents. Drawing views can edit numerous shape features via interactive editors (trackers).
-
Library View
The library view helps you to display and edit library documents. You can drag and drop shapes from the library view to the drawing view and vice versa.
-
Pan and Zoom Control
The pan and zoom control helps you to display a bird's eye view of the document, which is being edited in its master drawing view. It also lets you interactively pan and zoom the master drawing view.
-
Diagram Command Bars Manager
The diagram command bars manager helps you to visualize and execute the set of predefined commands, which can be performed on drawing and library views.
-
Diagram Properties Browser
The diagram, properties browser helps you to instantly edit the properties of the document, the active layer, the selected element or the view.
-
Diagram Status Bar
The diagram status bar displays important information about the current state of a drawing view (size of the selected element, keyboard state, measurement unit etc.)
Nevron Diagram for .NET takes a radical approach towards processing the user gestures in both drawing and library views. All UI events are processed via tools, which are maintained by a controller, assigned to each view. This helps you to easily configure the way, in which the user interacts with your diagram, which is achieved by simply enabling/disabling certain tools. If the myriad of predefined tools does not fit in your particular integration case, you can enrich your application by implementing custom tools.
Nevron Diagram for .NET has the industry leading support for visual aids. Following is a brief overview:
-
Previews
All operations, which the user performs with shapes, are previewed. For example: if you move shapes, drag and drop shapes, rotate or resize shapes, the diagram will automatically generate previews for the shapes, upon which the operation is performed. This helps the user to see the effect of the action, before it is actually committed. All previewed actions can be canceled by pressing the Esc key.
-
Snapping
Previews are smartly snapped. Snapping is context sensitive. For example, if you move a connector plug, it tries to snap to inward ports first. If you move a shape, it tries to snap its outward ports to inward ports first. If you rotate a shape, the diagram tries to snap the rotation angle and so forth. Snapping can be tuned in numerous ways.
-
Grid and Rulers
All previews can be snapped to grid lines and ruler ticks. The grid and ruler components are built in each drawing view. Both the grid and rulers have smart scales - for example, if you zoom in/out the diagram, they try to adjust their tick steps automatically, in order to fill the view port area in the best way (e.g. automatically increase or decrease the step). They can of course have a fixed step too, if you prefer. Both grid and rulers can operate in different measurement units.
-
Auto Scrolling
Auto-scrolling helps the user to scroll the view, while moving shapes, by just moving the mouse close the view rims.
-
Attention to detail
Nevron Diagram for .NET pays great attention to visual aids details. For example: The cursors, which appear on resize handles, are properly oriented. Many operations accept Ctrl/Shift modifications (Ctrl + Move for example duplicates a shape). Tooltips appear on handles, control points, rulers etc. Connection ports are highlighted, to indicate connection. Selection target shapes are highlighted. Moved region bounds are projected on the rulers. Mouse cursor position is projected on rulers. Multiple moved shapes bounds are displayed. And many others…
ThinWeb (Web Forms and MVC) Specific Features
-
Client Side Tools
Rectangular Zoom Tool - allows the user to zoom in / out by dragging a selection range over the diagram
Pan Tool - allows the user to move the currently visible diagram viewport.
Scrolling - allows the user to move the currently visible diagram viewport using scrollbars.
Tooltips, Cursor Change and Browser Redirection Tool - allows for tooltips, cursor change and browser redirection on the client.
Client Side Events Tool - allows you to intercept mouse events per diagram element on the client.
Server Side Events Tool - allows you to intercept mouse events per diagram element on the server.
Postback Tool - Allows you to refresh the contents of the page by performing a postback to the server
- Custom Commands and Requests
Allows you to integrate the control with the rest of the page using AJAX.
- CSS Customization
Allows you to customize the appearance of different diagram elements such as scrollbars, toolbar, range selection etc.
- Automatic Update
Allows you to create a diagram that is automatically updated on a specified time interval.
- Tiled Diagram Rendering
Allows diagram images to be rendered in tiles (used for smooth Zooming, Scrolling and Panning).
- Toolbar
Integrated client side toolbar.
Web Forms Specific Features
Nevron Diagram for .NET provides built-in support for developing interactive thin client diagramming applications. It can operate either in Postback Mode or in AJAX mode. Following is a brief description of the thin client modes:
- ASP.NET AJAX Mode
Nevron Diagram for .NET comes with a powerful, yet easy to use built-in set of AJAX interactivity styles. It is based on the Nevron AJAX Framework, which is a reliable, fault tolerant and cross-browser compatible JavaScript library, that converts the simple diagram images inside your web page into an interactive client side application with flicker-free asynchronous image updates. Following is a brief overview of the AJAX features of Nevron Diagram for .NET:
Refresh and Auto Refresh
The diagram inside your web page can be configured to refresh itself within a specified update interval by simply enabling auto refresh and implementing the server side logic that will modify the diagram on refresh. The diagram can be updated also on demand through the client side JavaScript API, exposed by the Nevron AJAX Framework.
Client Side AJAX Tools
Most of the Nevron Diagram for .NET AJAX functionality is based on the controller/tools architecture. Pure client side tools that work with an updateable diagram image are the Tooltip tool, the Dynamic cursor tool and the Browser redirect tool.
In addition, a set of tools is available that intercept the user input and route it via AJAX calls to the server for processing. All mouse events can be enabled for AJAX routing, helping you to create drill-down functionality and add hover effects. The controller/tools architecture allows you to easily extend the AJAX functionality by creating new custom tools.
Reliability and Fault Tolerance
You should think of an AJAX web page as of a classical client-server application. The client is implemented with JavaScript classes, running within the browser's DOM. The server is your ASP.NET AJAX enabled web form. Client and server communicate asynchronously and once initialized, the client runs independently from the server and is operational even if the server is unavailable. The Nevron AJAX Framework implements all the necessary logic, required to adequately notify the user of server unavailability and to resume operation when the connection to the server is restored.
- ASP.NET Postback Mode
Nevron Diagram for .NET provides a set of useful features that help you to add interactivity to your web application, while sticking to the more traditional and simple postback technology:
Interactive Image Maps
Nevron Diagram for .NET can send an HTML image map to the client browser, which allows you to build web applications with drill down capabilities. The interactive image map helps you to add the following interactivity to your diagram:
- client side browser redirect, with configurable target URL for every diagram element;
- dynamic cursor, that changes when the user hovers over diagram elements
- client side tooltips.
It also provides a way to inject client side script blocks to be executed on user input on per-diagram element basis.
SVG Image Response
The SVG image response sends to the client a rich vector graphics image. This helps you to have the diagram image rescaled in the web browser without loss of quality, which would be the case if rescaling raster format images. The SVG format also allows for client side interactivity like mouse hover effects.