MindFusion.Diagramming for JavaScript Programmer's Guide
Tutorial 4: Custom Nodes Integration

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  Copy Code

<!-- The NodeListView component is bound to the canvas element below -->
<div style="width: 250px; height: 500px; overflow: auto; border: 1px solid black;">

<canvas id="nodeListView" width="62" height="70">
    This page requires a browser that supports HTML 5 Canvas element.
</canvas>

</div>

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  Copy Code

<button onclick="diagram.copyToClipboard()">copy</button>
<button onclick="diagram.cutToClipboard()">cut</button>
<button onclick="diagram.pasteFromClipboard(5, 5)">paste</button>
<button onclick="diagram.undo()">undo</button>
<button onclick="diagram.redo()">redo</button>

4. Add shortcuts to the NodeListView and Size classes in Tutorial4.js and define a nodeListView variable.

JavaScript  Copy Code

var NodeListView = MindFusion.Diagramming.NodeListView;

var Size = MindFusion.Drawing.Size;

var nodeListView = null;

5. Add a clone method override to the OrgChartNode prototype.

JavaScript  Copy Code

// support for the NodeListView drag'n'drop
clone: function ()
{
    Diagram.suppressSetDirty = true;
    var copy = OrgChartNode.callBaseMethod(this, "clone", []);

    copy.setTitle(this.getTitle());
    copy.setFullName(this.getFullName());
    copy.setNodeImageLocation(this.getNodeImageLocation());

    Diagram.suppressSetDirty = false;
    return copy;
},

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  Copy Code

// clipboard support
toJson: function ()
{
    var json = OrgChartNode.callBaseMethod(this, "toJson", []);

    json.title = this.getTitle();
    json.fullName = this.getFullName();
    json.nodeImageLocation = this.getNodeImageLocation();

    return json;
},

fromJson: function (json)
{
    OrgChartNode.callBaseMethod(this, "fromJson", [json]);

    this.setTitle(json.title);
    this.setFullName(json.fullName);
    this.setNodeImageLocation(json.nodeImageLocation);

    return json;
},

7. In order to enable undo / redo of changes done on OrgChartNode, add saveState and restoreState method overrides to the prototype definition:

JavaScript  Copy Code

// undo/redo
saveState: function ()
{
    var state = OrgChartNode.callBaseMethod(this, "saveState", []);

    state.title = this.getTitle();
    state.fullName = this.getFullName();
    state.nodeImageLocation = this.getNodeImageLocation();

    return state;
},

restoreState: function (state)
{
    OrgChartNode.callBaseMethod(this, "restoreState", [state]);

    this.setTitle(state.title);
    this.setFullName(state.fullName);
    this.setNodeImageLocation(state.nodeImageLocation);
},

8. In order to enable drawing OrgChartNodes with the mouse, add the following code to the Sys.Application.load handler:

JavaScript  Copy Code

// enable drawing of custom nodes interactively
diagram.setCustomNodeType(OrgChartNode);
diagram.setBehavior(Behavior.Custom);

9. To enable undo / redo support on the Diagram object, set its undoEnabled property to true in the Sys.Application.load handler.

JavaScript  Copy Code
// enable undo/redo support
diagram.setUndoEnabled(true);

10. Finally, add initialization code for the  NodeListView to the load hadler.

JavaScript  Copy Code

// create a NodeListView component that wraps the "nodeListView" canvas
nodeListView = $create(NodeListView, null, null, null, $get("nodeListView"));
nodeListView.setMeasureUnit(6);
nodeListView.setPadding(1);
nodeListView.setIconSize(new Size(60, 25));
nodeListView.setDefaultNodeSize(new Size(60, 25));

// create and add two nodes to the node list
var node1 = new OrgChartNode(nodeListView);
node1.setTitle("CEO");
node1.setFullName("John Smith");
node1.setText("Our beloved leader. \r\nThe CEO of this great corporation.");
node1.setNodeImageLocation("icon4.png");
nodeListView.addNode(node1, "");

var node2 = new OrgChartNode(nodeListView);
node2.setTitle("CIO");
node2.setFullName("Bob Smith");
node2.setText("The CIO of this great corporation.");
node2.setNodeImageLocation("icon5.png");
nodeListView.addNode(node2, "");

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: