forked from MindFusionComponents/JavaScript-Diagram-Samples
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathTutorial1.js
More file actions
69 lines (59 loc) · 1.86 KB
/
Tutorial1.js
File metadata and controls
69 lines (59 loc) · 1.86 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
61
62
63
64
65
66
67
68
69
var Diagram = MindFusion.Diagramming.Diagram;
var DiagramLink = MindFusion.Diagramming.DiagramLink;
var ShapeNode = MindFusion.Diagramming.ShapeNode;
var Rect = MindFusion.Drawing.Rect;
var LayeredLayout = MindFusion.Graphs.LayeredLayout;
var ArrayList = MindFusion.Collections.ArrayList;
var diagram;
$(document).ready(function ()
{
// create a Diagram component that wraps the "diagram" canvas
diagram = MindFusion.AbstractionLayer.createControl(Diagram, null, null, null, $("#diagram")[0]);
diagram.setLinkHeadShapeSize(2);
// pretend we are calling a web service
$.get("Tutorial1.txt", onResponse);
var mdiag = MindFusion.Diagramming;
mdiag.DiagramLink.prototype.setTextBounds = function ()
{
var pos = this.points.length % 2 == 1 ?
this.points[Math.floor(this.points.length / 2)] :
mdiag.Utils.mid(this.points[this.points.length / 2 - 1], this.points[this.points.length / 2]);
var bounds = new MindFusion.Drawing.Rect(pos.x, pos.y, 0, 0);
this.text.setBounds(bounds, 0);
};
});
function onResponse(json)
{
if (json)
{
var graph = MindFusion.AbstractionLayer.fromJson(json);
buildDiagram(graph);
}
}
function buildDiagram(graph)
{
var nodeMap = [];
var bounds = new Rect(0, 0, 18, 8);
// load node data
var nodes = graph.nodes;
ArrayList.forEach(nodes, function (node)
{
var diagramNode = diagram.getFactory().createShapeNode(bounds);
nodeMap[node.id] = diagramNode;
diagramNode.setText(node.name);
diagramNode.setBrush("LightCyan");
});
// load link data
var links = graph.links;
ArrayList.forEach(links, function (link)
{
var 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);
}