Skip to content

Commit 4c82760

Browse files
nikitaeverywherenikitaeverywhere
committed
sample diagram and working tree view
1 parent 632a911 commit 4c82760

File tree

8 files changed

+183
-12
lines changed

8 files changed

+183
-12
lines changed

‎package.json

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,17 @@
99

1010
},
1111
"devDependencies": {
12-
"express": "^5.0.0-alpha.1"
12+
"express": "^5.0.0-alpha.1",
13+
"gulp": "^3.8.10",
14+
"gulp-clean": "^0.3.1",
15+
"gulp-concat": "^2.4.1",
16+
"gulp-html-replace": "^1.4.1",
17+
"gulp-minify-css": "^0.3.11",
18+
"gulp-rename": "^1.2.0",
19+
"gulp-replace": "^0.5.0",
20+
"gulp-uglify": "^1.0.1",
21+
"gulp-wrap": "^0.5.0",
22+
"gulp-zip": "^2.0.2"
1323
},
1424
"scripts": {
1525
"test": "node test/testServer"

‎web/css/classView.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#classView {
2+
height: 100%;
3+
}

‎web/css/interface.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ html, body {
44
width: 100%;
55
height: 100%;
66
overflow: hidden;
7+
background-color: whitesmoke;
8+
font-family: monospace;
79
}
810

911
.ui-body {
@@ -15,9 +17,10 @@ html, body {
1517
float: left;
1618
width: 300px;
1719
height: 100%;
18-
overflow: auto;
1920
}
2021

2122
.ui-mainBlock {
23+
position: relative;
2224
margin-left: 300px;
25+
height: 100%;
2326
}

‎web/css/treeView.css

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,27 @@
22
position: relative;
33
display: block;
44
font-size: 16px;
5-
min-height: 100%;
5+
height: 100%;
6+
border-right: 1px solid lightgray;
7+
overflow: auto;
68
}
79

810
.tv-package-name.minimized + .tv-package-content {
911
display: none;
1012
}
1113

14+
.tv-class-name.selected {
15+
box-shadow: inset 0 0 2px 2px deepskyblue;
16+
}
17+
1218
.tv-class-name, .tv-package-name {
1319
padding: 3px;
1420
cursor: pointer;
1521
border-radius: 5px;
1622
-webkit-transition: all .2s ease;
23+
user-select: none;
24+
-webkit-user-select: none;
25+
-ms-user-select: none;
1726
}
1827

1928
.tv-class-name:hover, .tv-package-name:hover {
@@ -58,6 +67,7 @@
5867
}
5968

6069
.tv-package-name:hover:before {
70+
left: 4px;
6171
width: 22px;
6272
}
6373

‎web/index.html

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,29 @@
66
<link rel="stylesheet" href="css/interface.css"/>
77
<link rel="stylesheet" href="css/treeView.css"/>
88
<link rel="stylesheet" href="css/extras.css"/>
9+
<link rel="stylesheet" href="css/classView.css"/>
10+
<link rel="stylesheet" href="css/joint.min.css"/>
11+
<script type="text/javascript" src="js/joint.min.js"></script>
12+
<script type="text/javascript" src="js/joint.shapes.uml.min.js"></script>
13+
<script type="text/javascript" src="js/joint.layout.DirectedGraph.min.js"></script>
14+
<script type="text/javascript" src="js/ClassView.js"></script>
915
<script type="text/javascript" src="js/Lib.js"></script>
1016
<script type="text/javascript" src="js/CacheUMLExplorer.js"></script>
1117
<script type="text/javascript" src="js/ClassTree.js"></script>
1218
<script type="text/javascript" src="js/Source.js"></script>
1319
</head>
14-
<body onload="var cue = new CacheUMLExplorer(document.getElementById('treeView'))">
20+
<body onload="var cue = new CacheUMLExplorer(document.getElementById('treeView'), document.getElementById('classView'))">
1521
<div class="ui-body">
1622
<div class="ui-sideBlock">
1723
<div id="treeView">
1824

1925
</div>
2026
</div>
21-
<div class="ui-mainBlock"></div>
27+
<div class="ui-mainBlock">
28+
<div id="classView">
29+
30+
</div>
31+
</div>
2232
</div>
2333
</body>
2434
</html>

‎web/js/CacheUMLExplorer.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@
33
* @author ZitRo
44
* @see http://zitros.tk
55
* @param {HTMLElement} treeViewContainer
6+
* @param {HTMLElement} classViewContainer
67
* @constructor
78
*/
8-
var CacheUMLExplorer = function (treeViewContainer) {
9+
var CacheUMLExplorer = function (treeViewContainer, classViewContainer) {
910

1011
this.source = new Source();
1112
this.classTree = new ClassTree(treeViewContainer);
13+
this.classView = new ClassView(classViewContainer);
1214

1315
this.init();
1416

‎web/js/ClassTree.js

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ var ClassTree = function (treeViewContainer) {
77

88
this.container = treeViewContainer;
99
this.loader = null;
10+
this.SELECTED_CLASS_NAME = null;
11+
this.SELECTED_ELEMENT = null;
1012

1113
};
1214

@@ -28,9 +30,25 @@ ClassTree.prototype.removeLoader = function () {
2830

2931
};
3032

33+
ClassTree.prototype.selectClass = function (element, className) {
34+
35+
this.SELECTED_CLASS_NAME = className;
36+
37+
if (element !== this.SELECTED_ELEMENT) {
38+
if (this.SELECTED_ELEMENT) this.SELECTED_ELEMENT.classList.remove("selected");
39+
this.SELECTED_ELEMENT = element;
40+
}
41+
42+
if (!element.classList.contains("selected")) {
43+
element.classList.add("selected");
44+
}
45+
46+
};
47+
3148
ClassTree.prototype.updateTree = function (treeObject) {
3249

33-
var div = function () { return document.createElement("div"); };
50+
var self = this,
51+
div = function () { return document.createElement("div"); };
3452

3553
var packageClick = function (e) {
3654

@@ -44,7 +62,15 @@ ClassTree.prototype.updateTree = function (treeObject) {
4462

4563
};
4664

47-
var append = function (rootElement, elementName, isPackage) {
65+
var classClick = function (e) {
66+
67+
var el = e.target || e.srcElement;
68+
69+
self.selectClass(el, el.CLASS_NAME);
70+
71+
};
72+
73+
var append = function (rootElement, elementName, isPackage, path) {
4874

4975
var el1 = div(),
5076
el2, el3;
@@ -58,6 +84,8 @@ ClassTree.prototype.updateTree = function (treeObject) {
5884
} else {
5985
el1.className = "tv-class-name";
6086
el1.textContent = elementName;
87+
el1.addEventListener("click", classClick);
88+
el1.CLASS_NAME = path + (path ? "." : "") + elementName;
6189
}
6290

6391
rootElement.appendChild(el1);
@@ -66,7 +94,7 @@ ClassTree.prototype.updateTree = function (treeObject) {
6694

6795
};
6896

69-
var build = function (rootElement, object) {
97+
var build = function (rootElement, object, path) {
7098

7199
var i, element, rec,
72100
arr = [];
@@ -82,14 +110,19 @@ ClassTree.prototype.updateTree = function (treeObject) {
82110

83111
for (i in arr) {
84112
element = arr[i];
85-
if (rec = append(rootElement, element.name, typeof element.val === "object")) {
86-
build(rec, element.val);
113+
if (rec = append(
114+
rootElement,
115+
element.name,
116+
typeof element.val === "object",
117+
path.join(".")
118+
)) {
119+
build(rec, element.val, path.concat([element.name]));
87120
}
88121
}
89122

90123
};
91124

92-
build(this.container, treeObject);
125+
build(this.container, treeObject, []);
93126

94127
this.removeLoader();
95128

‎web/js/ClassView.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/**
2+
* Visualization for classes.
3+
* @constructor
4+
*/
5+
var ClassView = function (container) {
6+
7+
this.container = container;
8+
9+
this.init();
10+
11+
};
12+
13+
ClassView.prototype.init = function () {
14+
15+
var graph = new joint.dia.Graph;
16+
17+
var paper = new joint.dia.Paper({
18+
el: this.container,
19+
width: this.container.offsetWidth,
20+
height: this.container.offsetHeight,
21+
gridSize: 20,
22+
model: graph
23+
});
24+
25+
var uml = joint.shapes.uml;
26+
27+
var classes = {
28+
29+
mammal: new uml.Interface({
30+
position: { x:300 , y: 50 },
31+
size: { width: 240, height: 100 },
32+
name: 'Mammal',
33+
attributes: ['dob: Date'],
34+
methods: ['+ setDateOfBirth(dob: Date): Void','+ getAgeAsDays(): Numeric']
35+
}),
36+
37+
person: new uml.Abstract({
38+
position: { x:300 , y: 300 },
39+
size: { width: 240, height: 100 },
40+
name: 'Person',
41+
attributes: ['firstName: String','lastName: String'],
42+
methods: ['+ setName(first: String, last: String): Void','+ getName(): String']
43+
}),
44+
45+
bloodgroup: new uml.Class({
46+
position: { x:20 , y: 190 },
47+
size: { width: 220, height: 100 },
48+
name: 'BloodGroup',
49+
attributes: ['bloodGroup: String'],
50+
methods: ['+ isCompatible(bG: String): Boolean']
51+
}),
52+
53+
address: new uml.Class({
54+
position: { x:630 , y: 190 },
55+
size: { width: 160, height: 100 },
56+
name: 'Address',
57+
attributes: ['houseNumber: Integer','streetName: String','town: String','postcode: String'],
58+
methods: []
59+
}),
60+
61+
man: new uml.Class({
62+
position: { x:200 , y: 500 },
63+
size: { width: 180, height: 50 },
64+
name: 'Man'
65+
}),
66+
67+
woman: new uml.Class({
68+
position: { x:450 , y: 500 },
69+
size: { width: 180, height: 50 },
70+
name: 'Woman',
71+
methods: ['+ giveABrith(): Person []']
72+
})
73+
74+
75+
};
76+
77+
_.each(classes, function(c) { graph.addCell(c); });
78+
79+
var relations = [
80+
new uml.Generalization({
81+
source: { id: classes.man.id },
82+
target: { id: classes.person.id },
83+
router: { name: 'manhattan' },
84+
connector: { name: 'rounded' }
85+
}),
86+
new uml.Generalization({ source: { id: classes.woman.id }, target: { id: classes.person.id }}),
87+
new uml.Implementation({ source: { id: classes.person.id }, target: { id: classes.mammal.id }}),
88+
new uml.Aggregation({ source: { id: classes.person.id }, target: { id: classes.address.id }}),
89+
new uml.Composition({ source: { id: classes.person.id }, target: { id: classes.bloodgroup.id }})
90+
];
91+
92+
_.each(relations, function(r) { graph.addCell(r); });
93+
94+
joint.layout.DirectedGraph.layout(graph, {
95+
setLinkVertices: false,
96+
nodeSep: 100,
97+
rankSep: 100
98+
});
99+
100+
};

0 commit comments

Comments
 (0)