forked from MindFusionComponents/JavaScript-Diagram-Samples
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathTutorial1.ts
More file actions
60 lines (50 loc) · 1.37 KB
/
Copy pathTutorial1.ts
File metadata and controls
60 lines (50 loc) · 1.37 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/// <reference path="jquery.d.ts" />
/// <reference path="jsdiag.d.ts" />
import Diagram = MindFusion.Diagramming.Diagram;
import DiagramLink = MindFusion.Diagramming.DiagramLink;
import ShapeNode = MindFusion.Diagramming.ShapeNode;
import Rect = MindFusion.Drawing.Rect;
import LayeredLayout = MindFusion.Graphs.LayeredLayout;
var diagram: Diagram;
$(document).ready(function ()
{
// create a Diagram component that wraps the "diagram" canvas
diagram = Diagram.create($("#diagram")[0]);
diagram.setLinkHeadShapeSize(2);
// pretend we are calling a web service
$.get("Tutorial1.txt", onResponse);
});
function onResponse(json)
{
if (json)
{
var graph = $.parseJSON(json);
buildDiagram(graph);
}
}
function buildDiagram(graph)
{
var nodeMap = [];
// load node data
var nodes = graph.nodes;
nodes.forEach(function (node)
{
var diagramNode = diagram.getFactory().createShapeNode(0, 0, 18, 8);
nodeMap[node.id] = diagramNode;
diagramNode.setText(node.name);
diagramNode.setBrush("LightCyan");
});
// load link data
var links = graph.links;
links.forEach(function (link)
{
diagram.getFactory().createDiagramLink(
nodeMap[link.origin],
nodeMap[link.target]);
});
// arrange the graph
var layout = new LayeredLayout();
layout.nodeDistance = 10;
layout.layerDistance = 10;
diagram.arrange(layout);
}