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. The code is also available in Samples folder of JsDiagram distribution.

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 NodeList component is bound to the canvas element below -->
<div style="position: absolute; top: 0px; bottom: 0px; left: 2px; right: 0px; width: 240px; height: 100%;">
    <canvas id="nodeListView" width="240">
    </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

<button onclick="diagramView.copyToClipboard()">copy</button>
<button onclick="diagramView.cutToClipboard()">cut</button>
<button onclick="diagramView.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

var NodeListView = MindFusion.Diagramming.NodeListView;

var Size = MindFusion.Drawing.Size;

var nodeListView = null;

5. Classes generated by calling classFromTemplate implement undo/redo, clipboard and serialization support for their auto-properties out of the box. When creating more complex types with their own data properties, you'd need to implement serialization and cloning for them yourself. Lets show how to implement the various operations by creating a new class that adds a custom property. Start by renaming the class from tutorial 3 to TemplatedBase, and creating a new OrgChartNode class that derives from it.

JavaScript

var TemplatedBase = CompositeNode.classFromTemplate("TemplatedBase",
    // ...

function OrgChartNode(parent) {
    var _this = TemplatedBase.call(this, parent);
    _this.cost = "low";
    return _this;
};

OrgChartNode.prototype.getCost = function () {
    return this.cost;
};

OrgChartNode.prototype.setCost = function (value) {
    this.cost = value;
};

Diagram.registerClass(OrgChartNode, "OrgChartNode", "OrgChartNode", 1, TemplatedBase);

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

JavaScript

// support for the NodeListView drag and drop
OrgChartNode.prototype.clone = function () {
    var copy = TemplatedBase.prototype.clone.call(this);
    copy.cost = this.cost;
    return copy;
};

7. 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 and serialization support
OrgChartNode.prototype.toJson = function () {
    var json = TemplatedBase.prototype.toJson.call(this);
    json.cost = this.cost;
    return json;
};OrgChartNode.prototype.fromJson = function (json) {
    TemplatedBase.prototype.fromJson.call(this, json);
    this.cost = json.cost;
};

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

JavaScript

// undo/redo
OrgChartNode.prototype.saveState = function () {
    var state = TemplatedBase.prototype.saveState.call(this);
    state.cost = this.cost;
    return state;
};OrgChartNode.prototype.restoreState = function (state) {
    TemplatedBase.prototype.restoreState.call(this, state);
    this.cost = state.cost;
};

9. In order to enable drawing OrgChartNodes with the mouse, add the following code to the DOMContentLoaded handler:

JavaScript

// enable drawing of custom nodes interactively
diagramView.behavior = Behavior.Custom;
diagram.customNodeType = OrgChartNode;

10. To enable undo / redo support on the Diagram object, set its undoEnabled property to true in the DOMContentLoaded handler.

JavaScript

// enable undo/redo support
diagram.undoEnabled = true;

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

JavaScript

// create a NodeListView component that wraps the "nodeListView" canvas
nodeListView = NodeListView.create(document.getElementById("nodeListView"));
nodeListView.measureUnit = 6;
nodeListView.padding = 1;
nodeListView.iconSize = new Size(65, 25);
nodeListView.defaultNodeSize = new Size(65, 25);

// create and add some nodes to the node list
var node1 = new OrgChartNode(nodeListView);
node1.title = "Skiing";
node1.fullName = "Winter";
node1.details =
    "Vacation in the snow. \r\n" +
    "Ski lessons, ski equipment and winter sports.";
node1.image = "snowman.png";
node1.cost = "high";
nodeListView.addNode(node1, "");

var node2 = new OrgChartNode(nodeListView);
node2.title = "Seaside";
node2.fullName = "Summer";
node2.details = "Sun bathing, swimming, catching tan.";
node2.image = "seaside.png";
node2.cost = "high";
nodeListView.addNode(node2, "");

12. Publish MindFusion.*.js and tutorial files using web server of your choice. Open Tutorial4.html in a web browser and you should be able to create nodes by drag and drop from NodeListView, copy and paste them, and redo/undo operations done on them.