EasyDiagram.Net 1.2 BETA Documentation

GNU v2 License

Welcome – this is a short guide to getting you started building diagrams with EasyDiagram.NET. I hope you find it useful. Currently, the only available language is English.

 

Background Information

EasyDiagram.NET was first conceived of after finding this innovative way to draw direct lines using pure javascript: http://www.p01.org/articles/DHTML_techniques/Drawing_lines_in_JavaScript/

Using this idea, I build EasyDiagram.Net as a custom composite control with the various line angles as embedded resource gif files. From this alpha version, I changed the way the lines were being drawn by using a custom ashx handler and drawing the lines in GDI+ with additional work to make the images transparent. I also built out custom CSS border styles so that the diagrams could be created using pure CSS and no graphics at all (this is what I call orthogonal, or right-angle diagramming).

Additionally, I spent some time ensuring that the arrows were rendered correctly, and this too became a real-time graphic I created on the fly using GDI+.

 

Using EasyDiagram.NET

You need to first reference the dll by adding it to your toolbox inside visual studio if you intend on dragging it onto your webform. There is plenty of information on the web if you need help adding components to your toolbox.

Once EasyDiagram.NET exists in your toolbox, drag it onto an empty webform.  You will see both (1) DiagramContainer and (2) InternalDiagramNode listed in the toolbox once you’ve added the dll. Don’t do anything with InternalDiagramNode – that will be used perhaps in a future release for design-time support. At the present, once you drag the DiagramContainer onto the webform, you will see this markup:

<cc1:DiagramContainer ID="DiagramContainer1" runat="server" />
 

That’s the barebones diagram control. Here are a list of all the properties :

 <cc1:DiagramContainer ID="DiagramContainer1" runat="server"
  GlobalLineColor="333333"
  GlobalLineDecoration="Solid"
  AllowBodyDragging="false"
  GlobalLineType="Direct"
  GlobalLinePixelWidth="2"
  GlobalShowDetailsButton="false"
  NodeStatusCheckInterval="1500"
  PreloadImages="true"
  OnErrorCssClass="errorclass"
  OnWarningCssClass = "warningclass"
  OnInfoCssClass="infoclass"
  ZIndex="2000" />

• GlobalLineColor – specify the color of the lines and the arrows. NOTE: do not include the # when supplying a color, and do not use 000000 (black) because of  how the transparency works.  Any other hex color should be fine.
• GlobalLineDecoration – you can try dotted, but it looks weird. I’d stick with solid for now.
• AllowBodyDragging – this shouldn’t really be an option, it’s still being tested. Set to false or ignore (and it’s false by default).
• GlobalLineType – here we use the direct line type (you can also use right angle for orthogonal mode)
·
• GlobalLinePixelWidth – The diagram lines will be set to the pixel width you specify. – the arrows will also grow in proportion. Widths above 1 or 2 will look odd in conjunction with the direct line mode; use the right angle mode if you want to change the lines to be thicker.
• GlobalShowDetailsButton – this should be set to false.  It is in test mode – it shows a button next to each node. This has been temporary disabled.
• NodeStatusCheckInterval – the number of milliseconds that the node status interval will elapse. Used in conjuction with the interval elapsed event.
• PreloadImages – this only applies to Direct Line mode, and should only be set to false if you don’t want to preload the images used for direct line drawing.  This can become a problem, however, as the lines will appear wacky when dragging nodes unless the images are preloaded.
• OnError … OnWarning … OnInfoCssClass – these three represent the CSS class that should be applied to the node whenever the node status event is fired and populated.
• ZIndex – while public, you shouldn’t need to set this. It is used to ensure the right z-index order for the diagram.

 

Events

• OnDiagramInitialized
  • e.XOffSet & e.YOffSet – these are two properties of the event that let you know what the x and y offsets of the diagramcontainer are in relation to the upper left corner of the page.
• OnNodeDeleted
  • NodeUniqueIdentifier – this is the key that you can use to remove the node identifier from your data source.
• OnNodeRepositioned
  • X – the new X coordinate of the dropped node (you can save this to your datasource)
  • Y – the new Y coordinate of the dropped node
  • NodeUniqueIdentifier – a key to lookup the node in your datasource
• OnNodeDoubleClicked
  • NodeUniqueIdentifier – used to lookup node
  • ModalDialogueHeight – the height of the modal dialogue
  • ModalDialogueWidth – the width of the modal dialogue
  • ModalDialogueHtmlToDisplay – the HTML to display in the modal dialogue
  • NavigateUrl – a url to display in the modal dialogue (via an iframe)
  • ScriptsToExecuteOnModalWindowClose – javascripts that will execute on the modal window close
  • ScriptsToExecuteOnModalWindowShown – javascripts that will execute when the modal window is shown.
• OnNodeDetailsClicked
  • Same event items as above
• OnNodeStatusElapsed
  • This event fires at the interval set by the NodeStatusCheckInterval property. Populate the three possible node statuses like below:
  • e.AllStatuses[“NodeID”].Errors.Add(“here is an error”);
  • e.AllStatuses[“NodeID”].Warnings.Add(“here is a warning”);
  • e.AllStatuses[“NodeID”].Info.Add(“here is some info”);

Web.Config set up  - this must be included in your web.config in order to dynamically create the direct lines!

  <httpHandlers>
    <add verb="*" path="Heckel.EasyTools.Diagramming.ashx" type="Heckel.EasyTools.Diagramming.Drawing.Line, Heckel.EasyTools.Diagramming"/>
  </httpHandlers>