Tutorial 7: Custom Nodes Integration

This tutorial shows how to fully integrate the custom type with other MvcDiagram features, such as clipboard support, undo support, creating nodes by drag-and-drop or drawing with the mouse on the canvas.

1. Create a custom node type

Follow steps 1-3 from Tutorial 6: Create a Custom Node Type.

2. Modify OrgChartNode class

Add the following methods to the OrgChartNode's declaration:

JavaScript

// support for the NodeListView drag'n'drop
clone()
{
    Diagram.suppressSetDirty = true;
    var copy = super.clone();

    copy.title = this.title;
    copy.fullName = this.fullName;
    copy.nodeImageLocation = this.nodeImageLocation;

    Diagram.suppressSetDirty = false;
    return copy;
}

// clipboard support
toJson()
{
    var json = super.toJson();

    json.title = this.title;
    json.fullName = this.fullName;
    json.nodeImageLocation = this.nodeImageLocation;

    return json;
}

fromJson(json)
{
    super.fromJson(json);

    this.title = json.title;
    this.fullName = json.fullName;
    this.nodeImageLocation = json.nodeImageLocation;
}

// undo/redo
saveState()
{
    var state = super.saveState();

    state.title = this.title;
    state.fullName = this.fullName;
    state.nodeImageLocation = this.nodeImageLocation;

    return state;
}

restoreState(state)
{
    super.restoreState(state);

    this.title = state.title;
    this.fullName = state.fullName;
    this.nodeImageLocation = state.nodeImageLocation;
}

3. Add a NodeListView control

Add a NodeListView control to the page:

HTML

@Html.NodeListView(
    ((NodeListView)ViewBag.NodeListView),
    new { style = "width:300px;height:500px;"})

Add the initialization code for the NodeListView to the onLoaded handler:

JavaScript

nodeListView = MindFusion.Diagramming.NodeListView.find("nodeListView1");
nodeListView.measureUnit = 6;
nodeListView.padding = 1;
nodeListView.iconSize = new Size(60, 25);
nodeListView.defaultNodeSize = new Size(60, 25);

4. Enable the undo/redo support

Set the diagram's undoEnabled property value to true in the onLoaded handler:

JavaScript

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

5. Call diagram methods

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

6. Running the application

Build and run. The image below depicts how the application would look like after adding some nodes and links: