Version History
The list below describes past changes and additions to NetDiagram:
ControlNode objects display custom HTML content, specified via their Template property. A node's DOM structure is created inside the Content div element, which is then rendered on top of the diagram canvas. Note that this prevents ControlNodes drawing in diagram' usual Z order, and they will always appear on top of other diagram items.
By default the diagram intercepts mouse events of all hosted html elements to enable moving nodes or drawing links. You can specify that interactive elements, such as buttons or text boxes, should receive input instead by setting their data-interactive attribute to true.
You can register event handlers for elements in the template by assigning function names to data-event attributes in the form data-event-'eventName'='handlerName'. Alternatively, you can attach event listeners using DOM API once NodeDomCreatedScript is called to signify that content is available. E.g. access child elements by calling args.getNode().getContent().querySelector(...) and attach handlers via elements' addEventListener method.
ControlNodes create DOM elements from their template only in the main diagram, and render images instead when shown in Overview or NodeListView. Note that in this case image elements in the template will render only if specified in base64 format. The Utils.toDataUrl method helps you convert an image URL to base64 data URL.
VideoNode objects display video streams, along with UI elements to play, pause, seek and change volume. Call node's setVideoLocation method to specify its video URL. Auto-playing is not supported at this time, and the video can be started only by users clicking the play button. VideoNode is built around Video component, which can also be used in CompositeNode templates.
Composite nodes can now contain buttons. Button components respond to user clicks by calling the JavaScript function whose name is assigned to their clickHandler attribute. A button can show a text label assigned to the text attribute, or an image whose URL is assigned to imageLocation. The following example adds a button to CompositeNode template:
JavaScript
 Copy Code
|
|---|
| { component: "Button", brush: "#ccc", text: "Delete", width: 30, cornerRadius: 3.5, clickHandler: "onDeleteClick" } |
The Shape class used to specify ShapeNode geometry can also be used as a component in CompositeNode. When its isOutline attribute is set, the shape will control CompositeNode's geometry too, defining hit test and clip area, and link alignment points along node's border. If isOutline is disabled, the shape will serve mostly as a decorative element. The code below shows a sample fragment from node's template specifying shape component's properties:
| Json template
Copy Code
|
|---|
{ |
Diagrams can now be serialized in JSON format. This can be used for interoperability with MindFusion JavaScript diagramming library, or for general storage in JSON files or databases. To serialize a Diagram to a JSON string, call its SaveToJson method. To deserialize a diagram back from its JSON representation, call the LoadFromJson method. Custom item classes can implement JSON serialization for their additional properties by overriding the SaveToJson and LoadFromJson methods of DiagramItem. Such classes must be registered for serialization by calling the RegisterItemClass method and providing a string identifier for the clientClass parameter.
Diagram rendering and user interactions are now faster. The control redraws the smallest possible area after diagram changes, and compresses refresh operations into a single batch when possible. Custom node classes that need to draw outside of their Bounds should override the getRepaintBounds method to specify the repaint area.
Custom item types registry is now stored in the page session and is handled by the ItemTypeResolver class. It is no longer required to call the RegisterItemType method for every DiagramView and NodeListView instance, but instead call RegisterItemType method only once on the first DiagramView control. You can access the ItemTypeResolver registered for the current page through the static GetResolver method.
(client side / JavaScript)
FlowchartLayout recognizes program code-like patterns in the graph, such as loops, sequences and if/switch branchings, and arranges them recursively. FlowchartLayout could be used to arrange other types of graphs as well, though with some restrictions. For example it treats all back links as loops in the code, and expects that they are nested - loop links starting closer to the stop node should end closer to the start node. Another similar restriction is that there shouldn't be any cross-links that connect different branches of a decision sub-graph.
(client side / JavaScript)
The PathFinder class provides methods that help you find paths and cycles in a graph:
Path objects returned by these methods contain nodes, links and items arrays containing sequences of elements in the path. The new PathFinder sample page included in distribution demonstrates path finding and animations over the found paths.
Nodes and Text components with style text enabled can now contain <a> tags to create hyperlinks. When a link is clicked, the control raises hyperlinkClicked event to let you implement navigation:
| JavaScript
Copy Code
|
|---|
// node is a ShapeNode instance |
The CompositeNode class implements nodes whose appearance can be defined via composition of components and layout containers. The content of a composite node can be created by building a tree of components programmatically, or by loading a JSON template. This initial release includes layout containers such as StackPanel and GridPanel. Objects from the MindFusion.Drawing namespace now double as CompositeNode components (Image, Text, Path, Rect). Future versions will add interactive components like buttons and text editors.
arrangeAnimated methods added to Diagram and ContainerNode classes display movement of items from their original locations to new locations assigned by the layout object. This can be used to create an explode effect by starting new layout from overlapping nodes on same position, or an insertion effect by adding a new node to an existing layout.
The ExcelExporter class from MindFusion.Diagramming.Export.Excel.dll assembly exports diagrams to Excel Open XML format (XSLX) files. Diagrams are exported as Excel AutoShapes drawings. The Export overload that takes a DiagramDocument parameter creates a sheet for each DiagramPage in the document. The Export(Diagram) overload creates a single Excel sheet.
All kinds of user interaction are now carried out by controller objects. The startDraw method of BehaviorBase-derived classes that returned an opaque InteractionState instance has been replaced by createController method returning a controller of class specific to the modified item and interaction types. Built-in controllers include CreateNodeController, CreateLinkController, ModifyNodeController, ModifyLinkController, PanController. You can also create custom controllers by deriving and overriding the methods of SinglePointerController:
| JavaScript
Copy Code
|
|---|
SinglePointerController.prototype = |
The Diagram class provides record, stopRecording and replay methods that can be used to save and replay all user actions with keyboard and mouse. The replay method takes recording, timer and diagramJson parameters. The recording argument is an array of records returned by stopRecording. If the timer argument is set to true, events are replayed from a timer preserving their original timing, otherwise they are replayed immediately. Timer mode can be used to show tutorials played directly in the diagram. Immediate mode could be used to automate user interaction testing where an assertion is checked after replaying series of events. Recorded events could also be replayed as macros if ran on a diagram with items placed on same initial coordinates.
User interaction can now be tested automatically in several ways outlined below.
| JavaScript
Copy Code
|
|---|
onMouseDown: function (position, button) |
The Ruler control provides horizontal and vertical scales that help users measure and align diagram items. In order to set up a Ruler instance, create a Ruler element as a parent of the target DiagramView:
| aspx
Copy Code
|
|---|
<ndiag:Ruler runat="server" ID="ruler"> |
The diagram can now be used without JQuery and Microsoft Ajax libraries. To enable that mode, set ClientScriptMode to StandAlone for the DiagramView element. Stand-alone mode requires relatively modern browsers, the base feature-set against we test it is the one of IE11.
The shape of a ShapeNode can be flipped horizontally or vertically. Enable the AllowFlip property and the shape flips when an edge is dragged over its opposite edge. You can get or set current flip state using FlipX and FlipY properties.
Dependencies between diagram items are now expressed by rule objects and applied in sequence by the DiagramMediator class. Built-in dependencies are implemented by ItemFollowsContainerRule, AttachedFollowsMasterRule, LinkFollowsNodesRule, NodeFollowsSelectionRule rules. You can create custom rule objects with following API and add them to DiagramMediator.AllRules array to make items follow other items during user interaction:
| JavaScript
Copy Code
|
|---|
var MyRule = |
Extension methods in MindFusion.Diagramming.Fluent and MindFusion.Diagramming.Layout.Fluent namespaces add support for fluent programming style:
| C#
Copy Code
|
|---|
using MindFusion.Diagramming.Fluent; |
A FreeFormNode collects all points from users' mouse or touch input and displays them as node's outline. To let users draw free-form nodes interactively, set Behavior to DrawFreeForms or LinkFreeForms. Use the Points property of FreeFormNode to get or set outline points programmatically. If the Closed property is set, the node is drawn as a closed shape and its interior filled, or otherwise the node is drawn as a poly-line. If the distance between first and last points drawn by user is shorter than AutoCloseDistance, the node's Closed property is automatically set to true. AutoCloseDistance default value is float.MaxValue, so free-form nodes are always closed.
Additional drawing modes, convenient for touch input, convert FreeFormNode objects drawn by user to ShapeNode objects with matching shapes. To enable them, set Behavior to DrawFreeShapes or LinkFreeShapes. The shapes against which the user's input is matched are set via diagram's FreeFormTargets property. By default it contains Rectangle, Decision and Ellipse shapes.
(not available in ImageMap mode)
Columns and rows of a TableNode can now be resized interactively if its AllowResizeColumns or AllowResizeRows properties are enabled. In order to resize, move the mouse pointer to the border line on column's right side or row's bottom side until it shows resize cursor and start dragging. The control raises TableColumnResizing and TableRowResizing events to let you validate new size or prevent resizing some elements. The TableColumnResized and TableRowResized events are raised after the operation completes.
| XML
Copy Code
|
|---|
| <handlers> <add name="ImageHandler" path="ImageGen.ashx" verb="GET" type="MindFusion.Common.WebForms.ImageHandler, MindFusion.Common.WebForms"/> </handlers> |
ZoomControl can now be used with other MindFusion components and has been moved to MindFusion.Common.WebForms namespace and assembly.
The EnableStyledText property of ShapeNode allows using HTML-like formatting tags to apply various attributes to the node's text. At this time the component supports the following formatting tags:
There is no separate trial build of the control assemblies anymore. Instead, set the LicenseKey property to disable the component's evaluation mode and stop displaying trial messages. If your application contains more than one DiagramView instance or other controls by MindFusion, you could call MindFusion.Licensing.LicenseManager.AddLicense(key) to specify the key once instead of setting it per each control. License key strings are listed on the Keys & Downloads page at MindFusion's customer portal.
(not available in JavaApplet mode)
The ZoomControl class lets users change interactively the current zoom level and scroll position of a DiagramView. To set it up, add a ZoomControl element to the page and set the control's TargetId property to the id of a DiagramView. Set the ZoomStep and ScrollStep properties to specify the amount added to diagram's zoom level or scroll position by ZoomControl's buttons. You can customize the control's appearance by setting properties such as Fill, BorderColor, CornerRadius and TickPosition.
The SvgNode class represents nodes that can display SVG drawings. SVG graphics are rendered instead of Image, and on top of the geometry rendered by the base ShapeNode class. The SVG drawing of the node is specified through its SvgUrl property.
The SvgImporter class allows importing Scalable Vector Graphics files (*.svg) into MindFusion.Diagramming. Each top-level SVG group element is imported as a separate SvgNode, whose Content is set to the group's child elements. If the SVG file was exported from Visio or OpenOffice Draw, SvgImporter will create DiagramLink objects for groups it recognizes as connectors in order to recreate the original diagram model, though in this case it will not preserve fully the original appearance of connectors in SVG.
Tree maps represent hierarchies by nesting child nodes within their parents, where the areas of leaf nodes are proportional to their Weight values. Unlike other layout algorithms, TreeMapLayout expects hierarchies to be defined via grouping or containment (see AttachTo method and ContainerNode class), and will ignore any links in the diagram. The diagram area covered by the topmost nodes in a hierarchy is specified via the LayoutArea property. By default, the layout tries to keep the ratio of node sides as close as possible to one. However this could make it hard to distinguish separate levels of the hierarchy. To alleviate that, set Squarify to false, and child nodes will be arranged either as a row or a column inside their parent node, alternating directions for each level. The drawback is that when Weight ratios differ greatly or nodes contain many children, some nodes could end up with very narrow rectangles.
DecisionLayout arranges simple flowcharts consisting of decision boxes with up to three outgoing links per node and activity boxes with a single outgoing link per node. The nodes are arranged in columns and rows, whose distance depends on the HorizontalPadding and VerticalPadding property values. When links share the same row or column, they are placed at a distance specified via LinkPadding. The layout arranges nodes recursively starting from StartNode. If StartNode is not specified, the algorithm selects the root of the deepest branch of the graph's spanning tree as start node.
The package now includes a MindFusion.Diagramming-vsdoc.js file providing code completion information for the Canvas mode JavaScript API. To load it in Visual Studio, add a /// <reference path="MindFusion.Diagramming-vsdoc.js" /> tag to the top of your script files. Use the static Diagram.findDiagram method instead of $find to let Visual Studio infer the type of returned Diagram objects correctly.
The NodeListView is a listbox control that can host any type of DiagramNode -derived objects. Nodes from the NodeListView control can be dragged onto the DiagramView canvas, and when dropped will create a clone of the selected node at the mouse pointer position. NodeListView is supported in ImageMap and Canvas modes.
Now it is possible to resize multiple selected nodes simultaneously. To enable that, set the AllowMultipleResize property to true. When enabled, dragging a corner or side adjustment handle of any node resizes all nodes in the selection.
The Visio2013Exporter class can export the content of Diagram and DiagramDocument objects to Visio 2013 VSDX files. In order to use it, add a reference to the MindFusion.Diagramming.Export.Visio.dll assembly. Similarly to the VDX format exporter, Visio2013Exporter relies on a template file, called Visio2013.vxt, containing some boilerplate Visio XML code. The template must be either located in same folder as the application assemblies, or its path must be specified via the TemplatePath property. At this time the exporter supports shapes from Visio basic stencil.
~ The importer now supports Visio group shapes. Child shapes in groups are no longer lost when importing, and their corresponding diagram nodes are attached to the corresponding group node.
~ Visio NURBS curves are now imported as Bezier-style links.
~ Fix for importing connectors with applied rotation transform.
~ Shapes with a ‘hidden’ attribute in master definition are now imported as invisible items.
PdfExporter can now add headers and footers to exported pages. To specify their contents and font, set the HeaderFormat, HeaderFont, FooterFormat and FooterFont properties. Adding a %P placeholder to HeaderFormat or FooterFormat will render the current page number at its position.
The Visio2013Importer class can import .vsdx files, created by Visio 2013. In order to use it, you must add a reference to the MindFusion.Diagramming.Import.Visio.dll assembly. Various overloads of the Import method can be used to import the file into a DiagramDocument whose pages correspond to the Visio drawing pages, or into a single Diagram whose content is merged from all imported pages. Visio2013Importer supports the basic flowchart and data flow Visio stencils. For each node shape from the .vsdx file, the importer creates a ShapeNode object whose Shape, Text, Brush and Pen properties are set to values corresponding to the imported Visio shape. For each connector shape, the importer creates a DiagramLink object whose Origin and Destination are set to the corresponding imported nodes, and whose ControlPoints reflect the geometry of the connector.
The DrawImporter class can import .odg files, created by the OpenOffice Draw vector graphics editor. In order to use it, you must add a reference to the MindFusion.Diagramming.Import.Draw.dll assembly. Various overloads of the Import method can be used to import the OpenOffice drawing into a DiagramDocument whose pages correspond to the Draw pages, or into a single Diagram whose content is merged from all imported pages. DrawImporter supports shapes from the General and Flowchart shape palettes in Draw. For each node shape from the .odg file, the importer creates a ShapeNode object whose Shape, Text, Brush and Pen properties are set to values corresponding to the imported OpenOffice shape. For each connector shape, the importer creates a DiagramLink object whose Origin and Destination are set to the corresponding imported nodes, and whose ControlPoints reflect the geometry of the connector.
The following features are now also available in Canvas mode:
The appearance of the items in a diagram can now be modified using styles. The style represents a set of properties, which can be applied to an individual diagram item (by assigning it to the DiagramItem.Style property) or to all items of a specific type (by using a Theme). The styles can be easily expanded to include the properties in derived item classes.
The theme represents a collection of styles. Each style in the theme is associated with the diagram items of a specific type and affects all items of this type. Themes can be loaded from XML files. New themes can be created using the Theme Editor tool. Several pre-defined theme files are installed under the Themes subfolder of the control's root installation folder.
For more information about this new feature, check Styles and Themes.
(not available in Canvas mode)
Two visual effects, represented by GlassEffect and AeroEffect classes, can be applied to nodes. To apply an effect, create an instance of the respective class, set up its properties, then add the instance to the Effects collection of a node (or to Diagram.NodeEffects collection to apply it to all nodes). Effects can be added, removed or modified at any time and this will immediately reflect on the diagram. Effects of different types can be applied simultaneously. It is also possible to apply more than one effect of the same type.
For more information about this new feature, check Node Effects.
The OneWayLayout class ensures that links enter into nodes from the same general direction and exit them from the opposite side. If the graph contains cycles, some links bend around the nodes to keep the enter/exit direction consistent. The algorithm aims to minimize the number of such links.
Enable the AutoPostBack property to post back the page after user interaction and raise server side events in Canvas, JavaApplet and Silverlight modes. This is supported for the NodeCreated, LinkCreated, NodeModified, LinkModified, NodeDeleted, LinkDeleted, NodeDeleting and LinkDeleting events. If any of their client side *Script counterparts is set, it overrides the post-back processing and the respective server event is not raised.
(not available in Canvas mode)
The LinkLabel class allows multiple captions to be displayed for a single DiagramLink object. Link labels provide a set of properties allowing full customization of their display and positioning. Labels can also be arranged automatically to avoid overlapping nodes and other labels by setting LinkLabel.AutoArrange to true.
(not available in Canvas mode)
Items can now be assigned to layers, and layers can be hidden, locked or moved up/down in the Z order as a group. Set the LayerIndex property of items to associate them with layers in the Diagram.Layers collection. The Layer objects provide Visible, Locked and ZIndex properties, which will affect all items in the respective layer. Newly drawn items are added to the layer specified via Diagram.ActiveLayer.
The .NET 4 version of NetDiagram takes advantage of the Task Parallel Library (TPL) to enable parallelism on the different layout algorithms. Set the EnableParallelism property on the Layout class to true to enable arranging different subgraphs on different threads to possibly improve performance on multiprocessor systems. In addition, the maximum degree of concurrency can be manipulated through the MaxDegreeOfParallelism property. Note that only independent subgraphs are processed in parallel, so the SplitGraph property of layout classes that provide it must also be set.
(in JavaApplet and Silverlight modes)
The new magnifier tool allows users to interactively zoom in (or out) portions of the diagram by holding down a modifier key or pressing a mouse button. The magnifier's zoom factor and appearance can be customized. Additional information can be found in the corresponding section of Scrolling and Zooming.
NetDiagram allows attaching a node to another node, establishing a subordinate - master relationship between them. This can be done by calling attachTo on the client side in Canvas mode, or AttachTo on the server. When a master node is moved, all of its subordinates follow it, so that the initial distance between them stays constant. This happens both when a user moves the master node around, and when the node's position is changed using a method or a property.
If a diagram represents a tree structure, the tree branch starting from a node can be collapsed or expanded again in order to hide or display hierarchy details. To enable this, call the setExpandable method on the client or set the Expandable property on the server. There is a [±] button displayed beside an expandable node to allow users to collapse or expand the tree branch starting there. By default, pressing that button automatically toggles the Expanded property of the node and raises the TreeExpanded or TreeCollapsed events.
When running under the iOS Safari web browser, the control handles one-finger touch events to allow drawing and selecting items interactively. In addition, the hit-test area around adjustment handles is larger to make touch modifications easier. Two-finger gestures are delegated to the browser - they either scroll the canvas when dragging in the same direction or zoom the page when dragging in opposite directions. The preventDefaultTouch flag can be set to false to revert to the default one-finger touch behavior (scroll the whole page).
Recent Java and browser versions do not work very well when more than one applets are loaded on the page (e.g. IE crashes when reloading such pages, in some browsers Java objects cannot be passed between two applets). Hence we modified the DiagramApplet, used to host the client-side DiagramView control, to also show the miscellaneous UI controls such as Overview, ShapeListBox and Ruler. This approach also allowed us to expose these controls in Silverlight mode. The Java and Silverlight UI controls can be shown and customized using the following properties of the server DiagramView control:
The server-side ShapeListBox and Overview controls are still necessary in ImageMap and Canvas modes.
Set ClientSideMode to Canvas to render the diagram using an HTML5 Canvas element. You must also add "MindFusion.Diagramming.js" file to your web site, as well the Microsoft Ajax library script file (MicrosoftAjax.js), which is usually loaded automatically by the ScriptManager component. At this time, Canvas mode supports only ShapeNode and DiagramLink objects. In addition, it provides client-side support for Overview and ShapeListBox controls. A few layout algorithms are also available on the client side, although in simplified form, as implemented by the LayeredLayout, TreeLayout, SpringLayout and FractalLayout classes.
If AutoAlignNodes is enabled, the node currently being drawn or resized is aligned to another node so that a pair of their vertical or horizontal sides become collinear. To specify the maximal distance at which nodes are aligned, set the AutoAlignDistance property. The pair of aligned nodes is indicated visually by drawing an alignment guide using the pen assigned to AlignmentGuidePen.
FractalLayout is a tree layout algorithm that places child nodes symmetrically around their parent node. Nodes at the lowest level are arranged directly in a circle around their parent. At the upper level, the already arranged nodes form branches that are arranged in a circle around the new parent node. The algorithm is recursively repeated till the highest level is reached. If nodes in the tree have uniform number of children, the end result has fractal-like appearance (subsets of the graph look like scaled-down copies of the whole graph).
You can choose which node should be displayed at the center of the topmost circle by setting the Root property. If it is not specified, the algorithm automatically selects a root that leads to more balanced distribution of nodes.
SwfExporter creates Adobe Flash files representing the content of a diagram. In order to use this component, add references to the MindFusion.Diagramming.Export.Swf.dll and MindFusion.Swf.dll assemblies to your project. To export a diagram to SWF file, create an SwfExporter instance and call its Export method, passing a Diagram object as parameter. At the time of writing this, the diagram is exported as static image; interactivity is planned for next releases.
WmfExporter creates WMF (Windows MetaFile) images from the content of Diagram objects. In order to use this component, add a reference to the MindFusion.Diagramming.Export.Wmf.dll assembly to your project. To create a WMF file from a diagram, create a WmfExporter instance and call its Export method, passing a Diagram object as parameter.
CascadeLayout places nodes on a virtual grid and arranges links orthogonally, such that if the source graph is planar all links are guaranteed to have no more than two bends and will not intersect. By default the layout method arranges nodes in rows and link segments in columns; this can be changed by setting the Orientation property.
TriangularLayout places nodes on a virtual grid, such that if the source graph is planar, all links are guaranteed to have a single segment and not intersect. If the graph is not planar, its intersecting links can be optionally segmented and bended in order to improve readability. The layout method places the nodes from the external face on a triangle and recursively adds the rest of the nodes as vertices of internal triangles. As a result, it is very effective for near maximal-planar (a.k.a. triangular) graphs.
HierarchicalLayout places nodes on user-defined levels, such that if the source graph is level-planar, all links are guaranteed to have a single segment and will not intersect. A graph is considered level-planar if it is possible to draw it without link intersections when its nodes are positioned on predefined levels. The layout method requires that for each node LayoutTraits contains a HierarchicalLayoutTraits.Level entry specifying the level, and no two connected nodes must be on the same level.
SwimlaneLayout can be used to arrange process diagrams in which nodes representing activities are placed in swimlanes representing resources. The index of the resource allocated to an activity should be assigned to the corresponding node's LayoutTraits[SwimlaneLayoutTraits.Lane].
By default, the algorithm works with the diagram's LaneGrid, but its SwimlaneGrid property can be set to any class that implements ISwimlaneGrid. This allows applying the layout to a custom-drawn grid rendered through the DrawBackground event, or one composed of locked background nodes.
The lane grid lets you emphasize the relationship between a group of diagram items by displaying them in a distinct lane or cell within the grid. To display the lane grid, set the EnableLanes property of the Diagram class to true. In order to customize the grid, set the various attributes exposed by the LaneGrid property, which lets you specify the number of rows and columns, add headers, customize the cell appearance, etc. The new Lanes sample project uses the lane grid to let users draw Gantt charts.
Design-time support classes have been moved to a separate assembly. This allows NetDiagram controls to be added to the VS2010 toolbox. Now the MindFusion.Diagramming.WebForms.Design.dll assembly must be added to the GAC or copied to the site's bin folder in order to use control designers for the DiagramView, Overview and ShapeListBox controls.
The type of the HeadShape, BaseShape and IntermediateShape properties of DiagramLink has been changed from enum ArrowHead to class Shape, which is also used to define ShapeNode shapes. The ArrowHeads class now exposes Shape definitions that correspond to the ArrowHead enumeration members from previous versions. It is also possible to assign any Shapes member or a custom shape as an arrowhead. When used for arrowheads, position (50, 0) in the shape definition corresponds to the arrowhead's tip point.
The TreeViewNode class represents nodes that can display hierarchical data. The root items displayed in the node can be accessed through the RootItems property. New items can be added to and removed from the returned collection. The root items can have child items on their own and so on. For more information, refer to the TreeViewItem class.
FlowchartLayout recognizes program code -like patterns in the graph, such as loops, sequences and if/switch branchings, and arranges them recursively. FlowchartLayout could be used to arrange other types of graphs as well, though with some restrictions. For example it treats all back links as loops in the code, and expects that they are nested - loop links starting closer to the stop node should end closer to the start node. Another similar restriction is that there shouldn't be any cross-links that connect different branches of a decision sub-graph.
If the underlying graph if acyclic, TopologicalLayout arranges the nodes linearly in such a way that each node comes before all destination nodes of its outgoing links. The links are drawn as curves above the chain of nodes, with their height proportional to the distance between the nodes. If the graph is not acyclic, the layout algorithm finds an ordering with a minimal number of back links, and draws the back links below the chain of nodes.
A much faster link routing algorithm has been implemented. It can arrange a thousand links for just a few seconds, while older versions would require several minutes. Now it is also possible to create custom routing classes to be used when a link must be routed by implementing the ILinkRouter interface. An instance of such class can be set through the LinkRouter property of the Diagram. NetDiagram provides two classes that implement ILinkRouter - GridRouter and QuickRouter. By default LinkRouter is set to a QuickRouter instance.
The ActiveItemHandlesColor, SelectedItemHandlesColor and DisabledHandlesColor properties have been replaced by ActiveItemHandlesStyle, SelectedItemHandlesStyle and DisabledHandlesStyle. The HandlesVisualStyle objects returned by them provide sub-properties for greater control over the appearance of selection handles. The adjustment handles can now be painted not only in solid color but with arbitrary brushes, such as LinearGradientBrush and TextureBrush objects.
This version adds predefined Shape definitions that implement the Object Management Group / Business Process Management notation. They are available as members of the Shapes class and have names that start with a Bpmn prefix. They can also be accessed by ID using the FromId method of Shape.
The OrthogonalLayout class implements an orthogonal graph layout algorithm. Each link is drawn as a chain of alternating horizontal and vertical segments. Nodes are placed in a way that facilitates few links bends and crossings. This algorithm was designed for planar graphs where the nodes have at most four incident links, and produces best results with such graphs as input. It can arrange any arbitrary graph as well, by adding some dummy nodes and links to planarize the graph and reduce its vertex degree, and removing them after the layout.
CircularLayout distributes nodes evenly on the circumference of a circle at positions that result in as few link crossing as possible. Set its Radius property to specify the size of the layout circle. Set SiftingRounds to set the umber of fine-tuning crossing-reduction iterations.
The InteractivityExtender class implements a clipboard that allows copying and pasting diagram elements. To enable this, set the EnableClipboard property to true. A single diagram item or a selection of items can be copied, cut or pasted using the CTRL+C, CTRL+X and CTRL+V shortcuts. The item copies are saved as a part of the control's view state, and can be pasted even after a postback.
To let the user delete selected items in ImageMap mode by pressing the Del key, bind an InteractivityExtender to the DiagramView and set the DelKeyAction property.
To let the user draw items from a custom class, set the Behavior property of the diagram view to Custom, and set the CustomNodeType or CustomLinkType property to the Type object that corresponds to your class. Custom node or link types could be used to add new properties to the diagram element, or to implement custom rendering.
Now the ShapeListBox and Overview controls can be used in ImageMap mode. To enable user interaction with them, add ShapeListBoxExtender and OverviewExtender to the page and bind them to the respective controls.
Now you can do some changes to the properties of diagram items on the client side. When posting back, changed items are sent via JSON to the server where the server side DOM is updated accordingly. To enable this, set the EnableItemsDOM property to true. The JavaScript API is shown in the .js files available under the "Client side DOM" subfolder of the NetDiagram installation folder.
Set ClientSideMode to Silverlight and the diagram will be rendered in the browser using the Microsoft Silverlight plugin. At this time the NetDiagram's Silverlight API is not accessible from JavaScript. If you need to handle events or change the diagram on the client side, you can do so by creating a custom Silverlight application and assigning the URL to its .xap file to the SilverlightSource property. You can use the SilverlightApp sample that comes with NetDiagram as a template.
The OrthogonalLayout class from previous NetDiagram versions has been renamed to OrthogonalRouter.
Now diagram elements can be created and modified interactively in ImageMap mode. To enable this, add an InteractivityExtender to the form and set its TargetControlID property to the ID of the DiagramView control. This associates a few JavaScript event handlers with the DIV element rendered by the DiagramView. The scripts render additional DIV or IMG elements to provide visual feedback on the new position of items being modified. When the user releases the mouse button, the mouse coordinates as posted back to the server, where the diagram image is updated to reflect the new item position. For an example showing ImageMap interactivity in combination with an UpdatePanel, check the Interactivity sample included in the NetDiagram package.
This is a service release which provides a few bug-fixes and customer requested features:
NetDiagram 2 implements the Model-View-Controller (MVC) architectural pattern. The MVC design pattern as applied to NetDiagram separates the diagram data (model) from its representation to the user (view) and controlling it by the user (controller). According to the MVC design pattern, NetDiagram Version 2 provides two new classes instead of the FlowChart class, namely Diagram and DiagramView.
The ContainerNode class implements diagram nodes that can function as containers for other nodes. Containers can be folded to hide their content, and unfolded to show it again. Containers can be nested one within another, without limitation on the depth of nesting.
In addition to PdfExporter which is available since version 1, NetDiagram 2 includes the VisioExporter, VisioImporter, SvgExporter and DxfExporter components, which provide support for the Microsoft Visio XML Drawing, W3C's Scalable Vector Graphics and the AutoDesk Drawing Exchange formats.
OrthogonalRouter_Broken is a secondary layout algorithm that can be used to arrange links after an initial node arrangement has already been applied. In older versions, it was available only on the server side. Now it can be applied on the client-side as well. Use the createOrthogonalLayout method of ScriptHelper to get an instance of the OrthogonalLayout Java class which can be used from JavaScript.
In older versions the layout algorithms placed unconnected subgraphs either in a row or in a column. Now it is possible to place the unconnected subgraphs in such a way that the diagram covers a minimal area. To enable that, set MultipleGraphsPlacement to MinimalArea.
Now all drawing is done through the IGraphics interface, for which the control provides GdiGrahics, SvgGraphics and PdfGraphics implementations. Thus the files created by SvgExporter and PdfExporter can contain custom-drawn elements, which you draw either by handling custom drawing events or by implementing the Draw method in your custom item types.
