Skip to content

Commit b3a8b98

Browse files
nikitaeverywherenikitaeverywhere
committed
initial commit
1 parent 7f54422 commit b3a8b98

File tree

9 files changed

+330
-0
lines changed

9 files changed

+330
-0
lines changed

‎package.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "CacheUMLExplorer",
3+
"version": "0.0.1",
4+
"description": "An UML Class explorer for InterSystems Caché",
5+
"directories": {
6+
"test": "test"
7+
},
8+
"dependencies": {
9+
10+
},
11+
"devDependencies": {
12+
"express": "^5.0.0-alpha.1"
13+
},
14+
"scripts": {
15+
"test": "node test/testServer"
16+
},
17+
"repository": {
18+
"type": "git",
19+
"url": "https://github.com/ZitRos/CacheUMLExplorer"
20+
},
21+
"keywords": [
22+
"UMLExplorer",
23+
"Caché",
24+
"UML",
25+
"diagram"
26+
],
27+
"author": "ZitRo",
28+
"license": "MIT",
29+
"bugs": {
30+
"url": "https://github.com/ZitRos/CacheUMLExplorer/issues"
31+
},
32+
"homepage": "https://github.com/ZitRos/CacheUMLExplorer"
33+
}

‎test/testServer.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
var express = require("express"),
2+
app = express();
3+
4+
app.use(express.static(__dirname + "/../web"));
5+
6+
app.listen(80);
7+
8+
console.info("Server ready on port 80.");

‎web/css/interface.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
html, body {
2+
margin: 0;
3+
padding: 0;
4+
width: 100%;
5+
height: 100%;
6+
overflow: hidden;
7+
}
8+
9+
.ui-body {
10+
height: 100%;
11+
}
12+
13+
.ui-sideBlock {
14+
position: relative;
15+
float: left;
16+
width: 300px;
17+
height: 100%;
18+
overflow: auto;
19+
}
20+
21+
.ui-mainBlock {
22+
margin-left: 300px;
23+
}

‎web/css/treeView.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
#treeView {
2+
display: block;
3+
font-size: 16px;
4+
margin: 5px;
5+
}
6+
7+
.tv-package-name.minimized + .tv-package-content {
8+
display: none;
9+
}
10+
11+
.tv-class-name, .tv-package-name {
12+
padding: 3px;
13+
cursor: pointer;
14+
border-radius: 5px;
15+
-webkit-transition: all .2s ease;
16+
}
17+
18+
.tv-class-name:hover, .tv-package-name:hover {
19+
background: #b9ffff;
20+
font-weight: 900;
21+
padding-left: 30px;
22+
}
23+
24+
.tv-package-name {
25+
position: relative;
26+
padding-left: 20px;
27+
}
28+
29+
.tv-package-name:before {
30+
content: "";
31+
box-sizing: border-box;
32+
position: absolute;
33+
left: 2px;
34+
top: 5px;
35+
display: block;
36+
width: 8px;
37+
height: 4px;
38+
background: black;
39+
border: 1px solid gray;
40+
border-radius: 2px 2px 0 2px;
41+
-webkit-transition: all .2s ease;
42+
}
43+
44+
.tv-package-name:after {
45+
content: "";
46+
box-sizing: border-box;
47+
position: absolute;
48+
left: 2px;
49+
top: 8px;
50+
display: block;
51+
width: 16px;
52+
height: 10px;
53+
background: black;
54+
border: 1px solid gray;
55+
border-radius: 0 2px 2px 2px;
56+
-webkit-transition: all .2s ease;
57+
}
58+
59+
.tv-package-name:hover:before {
60+
width: 22px;
61+
}
62+
63+
.tv-package-name:hover:after {
64+
width: 26px;
65+
}
66+
67+
.tv-class-name {
68+
position: relative;
69+
padding-left: 20px;
70+
}
71+
72+
.tv-class-name:after {
73+
content: "";
74+
box-sizing: border-box;
75+
position: absolute;
76+
left: 6px;
77+
top: 7px;
78+
display: block;
79+
width: 10px;
80+
height: 10px;
81+
background: black;
82+
border: 1px solid gray;
83+
border-radius: 5px 5px 5px 5px;
84+
}
85+
86+
.tv-package .tv-package-content {
87+
padding-left: 20px;
88+
}

‎web/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>Caché UML explorer</title>
6+
<link rel="stylesheet" href="css/interface.css"/>
7+
<link rel="stylesheet" href="css/treeView.css"/>
8+
<script type="text/javascript" src="js/Lib.js"></script>
9+
<script type="text/javascript" src="js/CacheUMLExplorer.js"></script>
10+
<script type="text/javascript" src="js/ClassTree.js"></script>
11+
<script type="text/javascript" src="js/Source.js"></script>
12+
</head>
13+
<body onload="var cue = new CacheUMLExplorer(document.getElementById('treeView'))">
14+
<div class="ui-body">
15+
<div class="ui-sideBlock">
16+
<div id="treeView">
17+
18+
</div>
19+
</div>
20+
<div class="ui-mainBlock"></div>
21+
</div>
22+
</body>
23+
</html>

‎web/js/CacheUMLExplorer.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* UML class diagram visualization tool for InterSystems products.
3+
* @author ZitRo
4+
* @see http://zitros.tk
5+
* @param {HTMLElement} treeViewContainer
6+
* @constructor
7+
*/
8+
var CacheUMLExplorer = function (treeViewContainer) {
9+
10+
this.source = new Source();
11+
this.classTree = new ClassTree(treeViewContainer);
12+
13+
this.init();
14+
15+
};
16+
17+
CacheUMLExplorer.prototype.init = function () {
18+
19+
var self = this;
20+
21+
this.source.getClassTree(function (err, data) {
22+
if (!err) self.classTree.updateTree(data);
23+
});
24+
25+
};

‎web/js/ClassTree.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/**
2+
* Class tree representation.
3+
* @param {HTMLElement} treeViewContainer
4+
* @constructor
5+
*/
6+
var ClassTree = function (treeViewContainer) {
7+
8+
this.container = treeViewContainer;
9+
10+
};
11+
12+
ClassTree.prototype.updateTree = function (treeObject) {
13+
14+
var div = function () { return document.createElement("div"); };
15+
16+
var packageClick = function (e) {
17+
18+
var el = e.target || e.srcElement;
19+
20+
if (el.className.match(/minimized/)) {
21+
el.className = el.className.replace(/\s+?minimized/, "");
22+
} else {
23+
el.className += " minimized";
24+
}
25+
26+
};
27+
28+
var append = function (rootElement, elementName, isPackage) {
29+
30+
var el1 = div(),
31+
el2, el3;
32+
33+
if (isPackage) {
34+
el1.className = "tv-package";
35+
(el2 = div()).className = "tv-package-name minimized"; el2.textContent = elementName;
36+
(el3 = div()).className = "tv-package-content";
37+
el1.appendChild(el2); el1.appendChild(el3);
38+
el2.addEventListener("click", packageClick);
39+
} else {
40+
el1.className = "tv-class-name";
41+
el1.textContent = elementName;
42+
}
43+
44+
rootElement.appendChild(el1);
45+
46+
return el3 ? el3 : null;
47+
48+
};
49+
50+
var build = function (rootElement, object) {
51+
52+
var i, element, rec,
53+
arr = [];
54+
55+
for (i in object) {
56+
arr.push({ name: i, val: object[i] });
57+
}
58+
59+
arr.sort(function (a, b) {
60+
if (typeof a.val !== typeof b.val) return typeof a.val === "object" ? 0 : 1;
61+
return a.name > b.name ? 1 : -1;
62+
});
63+
64+
for (i in arr) {
65+
element = arr[i];
66+
if (rec = append(rootElement, element.name, typeof element.val === "object")) {
67+
build(rec, element.val);
68+
}
69+
}
70+
71+
};
72+
73+
build(this.container, treeObject);
74+
75+
};

‎web/js/Lib.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
var Lib = function () {},
2+
lib = new Lib();
3+
4+
/**
5+
* @param {string} url
6+
* @param {object} data
7+
* @param {function} callback
8+
* @private
9+
*/
10+
Lib.prototype.load = function (url, data, callback) {
11+
12+
var xhr = new XMLHttpRequest();
13+
14+
xhr.open(data ? "POST" : "GET", url);
15+
16+
xhr.onreadystatechange = function () {
17+
if (xhr.readyState === 4 && xhr.status === 200) {
18+
try {
19+
return callback(null, JSON.parse(xhr.responseText) || {})
20+
} catch (e) {
21+
return callback(
22+
"<h1>Unable to parse server response</h1><p>" + xhr.responseText + "</p>",
23+
null
24+
);
25+
}
26+
} else if (xhr.readyState === 4) {
27+
callback(xhr.responseText + ", " + xhr.status + ": " + xhr.statusText);
28+
}
29+
};
30+
31+
xhr.send(JSON.stringify(data));
32+
33+
};

‎web/js/Source.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
var Source = function () {
2+
3+
this.URL = "http://localhost:57773/UMLExplorerREST";
4+
5+
};
6+
7+
/**
8+
* Return class tree.
9+
* @param {Source~dataCallback} callback
10+
*/
11+
Source.prototype.getClassTree = function (callback) {
12+
13+
lib.load(this.URL + "/GetClassTree", null, callback);
14+
15+
};
16+
17+
/**
18+
* This callback handles data received directly from server.
19+
* @callback Source~dataCallback
20+
* @param {null|{error:string}} error
21+
* @param data
22+
*/

0 commit comments

Comments
 (0)