This tutorial builds upon the OrgChartNode type from Tutorial 3. It shows how to fully integrate the custom type with other MindFusion.Diagramming for JavaScript features, such as clipboard support, undo support, creating nodes by drag-and-drop or drawing with the mouse on the canvas.
1. Create copies of Tutorial 3 files - Tutorail3.html and Tutorial3.js and name them Tuturial4.html and Tutorial4.js respectively.
2. Add a DIV and CANVAS elements to Tutorial4.html that will represent a NodeListView control:
HTML
![]() |
---|
<!-- The NodeListView component is bound to the canvas element below --> |
3. Add five buttons to the page - copy, cut, paste, undo and redo - and define click handlers that will be used to call the corresponding diagram methods.
HTML
![]() |
---|
<button onclick="diagram.copyToClipboard()">copy</button> |
4. Add shortcuts to the NodeListView and Size classes in Tutorial4.js and define a nodeListView variable.
JavaScript
![]() |
---|
var NodeListView = MindFusion.Diagramming.NodeListView; |
5. Add a clone method override to the OrgChartNode prototype.
JavaScript
![]() |
---|
// support for the NodeListView drag'n'drop |
6. To implement clipboard support of any new properties added by a custom item class, add fromJson and toJson method overrides to the prototype definition:
JavaScript
![]() |
---|
// clipboard support |
7. In order to enable undo / redo of changes done on OrgChartNode, add saveState and restoreState method overrides to the prototype definition:
JavaScript
![]() |
---|
// undo/redo |
8. In order to enable drawing OrgChartNodes with the mouse, add the following code to the Sys.Application.load handler:
JavaScript
![]() |
---|
// enable drawing of custom nodes interactively |
9. To enable undo / redo support on the Diagram object, set its undoEnabled property to true in the Sys.Application.load handler.
JavaScript
![]() |
---|
// enable undo/redo support diagram.setUndoEnabled(true); |
10. Finally, add initialization code for the NodeListView to the load hadler.
JavaScript
![]() |
---|
// create a NodeListView component that wraps the "nodeListView" canvas |
11. Publish MicrosoftAjax.js, MindFusion.Diagramming.js and the tutorial files using web server of your choice. Now you should see this if you open Tutorial4.html in a web browser and create some nodes: