Skip to content

Commit

Permalink
big packages rendering warning, browsers size differences fix, IE fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
nikitaeverywhere committed May 8, 2015
1 parent aaf32a6 commit 63d372b
Show file tree
Hide file tree
Showing 8 changed files with 136 additions and 23 deletions.
9 changes: 8 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# CacheUMLExplorer
An UML Class explorer for InterSystems Caché. It is able to build UML class diagram for any class or even for whole package in Caché.
An UML Class explorer for InterSystems Caché.

##### Key features
+ Build class diagrams;
+ Build diagrams for any package or subpackage;
+ Edit diagrams after build;
+ Export diagrams as an image;
+ Zoom in and out, explore big packages and more.

## Screenshots

Expand Down
5 changes: 3 additions & 2 deletions cache/projectTemplate.xml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<Class name="UMLExplorer.ClassView">
<Description>
Class contains methods that return structured classes/packages data.</Description>
<TimeChanged>63680,165.360933</TimeChanged>
<TimeChanged>63680,46308.140173</TimeChanged>
<TimeCreated>63653,67019.989197</TimeCreated>

<Method name="getClassTree">
Expand Down Expand Up @@ -63,6 +63,7 @@ Return structured data about class.</Description>
set package = $LISTTOSTRING($LIST($LISTFROMSTRING(classDefinition.Name, "."), 1, *-1),".")
set oProperties = ##class(%ZEN.proxyObject).%New()
set oClass.NAMESPACE = $NAMESPACE
set oClass.SYSTEM = classDefinition.System
set oClass.ABSTRACT = classDefinition.Abstract
set oClass.super = classDefinition.Super
Expand Down Expand Up @@ -262,7 +263,7 @@ Returns structured package data</Description>
</Class>


<Project name="UMLExplorer" LastModified="2015-04-29 19:47:03.727613">
<Project name="UMLExplorer" LastModified="2015-05-08 00:09:34.590786">
<Items>
<ProjectItem name="UMLExplorer.ClassView" type="CLS"></ProjectItem>
<ProjectItem name="UMLExplorer.Router" type="CLS"></ProjectItem>
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "CacheUMLExplorer",
"version": "0.6.0",
"version": "0.6.1",
"description": "An UML Class explorer for InterSystems Caché",
"directories": {
"test": "test"
Expand Down
5 changes: 5 additions & 0 deletions web/css/classView.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/* IE fix */
svg {
overflow: hidden;
}

#classView {
height: 100%;
cursor: -webkit-grab; cursor: -moz-grab;
Expand Down
75 changes: 74 additions & 1 deletion web/js/ClassView.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ var ClassView = function (parent, container) {
this.MAX_PAPER_SCALE = 4;

this.CLASS_DOC_PATH = "/csp/documatic/%25CSP.Documatic.cls";
this.SYMBOL_12_WIDTH = 6.6;

this.init();

Expand Down Expand Up @@ -127,7 +128,8 @@ ClassView.prototype.createClassInstance = function (name, classMetaData) {
nameClickHandler: function () {
self.openClassDoc(name, classMetaData["NAMESPACE"]);
}
}
},
SYMBOL_12_WIDTH: self.SYMBOL_12_WIDTH
});

this.objects.push(classInstance);
Expand All @@ -139,6 +141,61 @@ ClassView.prototype.createClassInstance = function (name, classMetaData) {

ClassView.prototype.render = function (data) {

var self = this,
number = lib.countProperties(data["classes"]);

if (number < 30) return this.confirmRender(data);

var c = document.createElement("div"),
c1 = document.createElement("h3"),
cS = document.createElement("h6"),
c2 = document.createElement("div"),
load = document.createElement("div"),
lt = document.createElement("div"),
spinner = document.createElement("div"),
bOk = document.createElement("button"),
bOff = document.createElement("button");

c1.textContent = "Warning!";
cS.textContent = "There are a huge number of classes to render (over " + (number - (number % 10))
+ " elements)"
+ (function(n){var s=n<40?".":"!",c=0; while (n>50) { s+="!"; n-=10+c++; } return s; })(number)
+ " Rendering may take a lot of time.";

bOk.textContent = "Render this!";
bOk.style.color = "red";
bOff.textContent = "No, thanks";
load.style.textAlign = "center";
spinner.className = "spinner";
lt.innerHTML = "<br/><br/><br/><br/>Rendering, please wait...";
lt.style.textAlign = "center";

bOk.addEventListener("click", function () {
c.appendChild(load);
c1.parentNode.removeChild(c1);
cS.parentNode.removeChild(cS);
c2.parentNode.removeChild(c2);
setTimeout(function () {
self.confirmRender(data); self.cacheUMLExplorer.UI.removeMessage();
}, 25);
});
bOff.addEventListener("click", function () {
self.cacheUMLExplorer.UI.removeMessage();
});

c.appendChild(c1);
c.appendChild(cS);
c.appendChild(c2);
c2.appendChild(bOk);
c2.appendChild(bOff);
load.appendChild(lt);
load.appendChild(spinner);
this.cacheUMLExplorer.UI.displayMessage(c, false);

};

ClassView.prototype.confirmRender = function (data) {

var self = this, p, pp, className,
uml = joint.shapes.uml, relFrom, relTo,
classes = {}, connector;
Expand Down Expand Up @@ -349,4 +406,20 @@ ClassView.prototype.init = function () {
self.zoom(null);
});

this.SYMBOL_12_WIDTH = (function () {
var e = document.createElementNS("http://www.w3.org/2000/svg", "text"),
s = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
w;
s.appendChild(e);
s.setAttribute("xmlns", "http://www.w3.org/2000/svg");
s.setAttribute("version", "1.1");
e.setAttribute("font-family", "monospace");
e.setAttribute("font-size", "12");
e.textContent = "aBcDeFgGhH";
document.body.appendChild(s);
w = e.getBBox().width/10;
s.parentNode.removeChild(s);
return w;
})();

};
26 changes: 17 additions & 9 deletions web/js/Lib.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,28 @@ Lib.prototype.load = function (url, data, callback) {

xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
//try {
return callback(null, JSON.parse(xhr.responseText) || {})
//} catch (e) {
// console.error(e);
// return callback(
// "<h1>Unable to parse server response</h1><p>" + xhr.responseText + "</p>",
// null
// );
//}
return callback(null, JSON.parse(xhr.responseText) || {});
} else if (xhr.readyState === 4) {
callback(xhr.responseText + ", " + xhr.status + ": " + xhr.statusText);
}
};

xhr.send(data ? JSON.stringify(data) : undefined);

};

/**
* Return number of readable properties in object.
* @param object
*/
Lib.prototype.countProperties = function (object) {

var c = 0, p;

for (p in object) {
c++;
}

return c;

};
10 changes: 7 additions & 3 deletions web/js/UI.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ var UI = function (cacheUMLExplorer) {
/**
* Display hovering message.
*
* @param {string} text
* @param {string|HTMLElement} content
* @param {boolean} [removeByClick] - Define whether user be able to remove message by clicking on
* it.
*/
UI.prototype.displayMessage = function (text, removeByClick) {
UI.prototype.displayMessage = function (content, removeByClick) {

this.removeMessage();

Expand All @@ -34,7 +34,11 @@ UI.prototype.displayMessage = function (text, removeByClick) {

d1.className = "central message";
d1.style.opacity = 0;
d3.innerHTML = text;
if (content instanceof HTMLElement) {
d3.appendChild(content);
} else {
d3.innerHTML = content;
}
d2.appendChild(d3);
d1.appendChild(d2);
this.BODY.appendChild(d1);
Expand Down
27 changes: 21 additions & 6 deletions web/jsLib/joint.shapes.uml.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,20 @@ joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({
markup: [
'<g class="rotatable">',
'<g class="scalable">',
'<rect class="uml-class-name-rect"/><rect class="uml-class-params-rect"/><text class="uml-class-params-label">Parameters</text><rect class="uml-class-attrs-rect"/><text class="uml-class-attrs-label">Properties</text><rect class="uml-class-methods-rect"/><text class="uml-class-methods-label">Methods</text>',
'<rect class="uml-class-name-rect"/>',
'<rect class="uml-class-params-rect"/>',
'<text class="uml-class-params-label">Parameters</text>',
'<rect class="uml-class-attrs-rect"/>',
'<text class="uml-class-attrs-label">Properties</text>',
'<rect class="uml-class-methods-rect"/>',
'<text class="uml-class-methods-label">Methods</text>',
'</g>',
'<text class="uml-class-name-text"/><text class="uml-class-params-text"/><text class="uml-class-attrs-text"/><text class="uml-class-methods-text"/>',
//'<image xlink:href="img/icons/yellowCube.png" x="3" y="3" width="12" height="12"/>',
//'<text fill="black" font-size="12" x="16" y="13">System</text>',
'<text class="uml-class-name-text"/>',
'<text class="uml-class-params-text"/>',
'<text class="uml-class-attrs-text"/>',
'<text class="uml-class-methods-text"/>',
'</g>'
].join(''),

Expand Down Expand Up @@ -89,7 +100,8 @@ joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({
updateRectangles: function() {

var attrs = this.get('attrs'),
self = this;
self = this,
SYMBOL_12_WIDTH = this.get('SYMBOL_12_WIDTH') || 6.6;

var rects = [
{ type: 'name', text: this.getClassName() },
Expand All @@ -105,7 +117,7 @@ joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({
nameClickHandler = dp.nameClickHandler;

_.each(rects, function (rect) {
(rect.text instanceof Array ? rect.text : [rect.text]).forEach(function (s) { var t = s.split("\x1b")[0].length*6.66 + 8; if (t > maxWidth) {
(rect.text instanceof Array ? rect.text : [rect.text]).forEach(function (s) { var t = s.split("\x1b")[0].length*SYMBOL_12_WIDTH + 8; if (t > maxWidth) {
maxWidth = t;
}});
});
Expand All @@ -114,8 +126,11 @@ joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({

_.each(rects, function(rect) {

var lines = _.isArray(rect.text) ? rect.text : [rect.text],
rectHeight = lines.length * 12 + (lines.length ? 10 : 0),
var lines = _.isArray(rect.text) ? rect.text : [rect.text];

//if (rect.type === "name") lines.unshift("");

var rectHeight = lines.length * 12 + (lines.length ? 10 : 0),
rectText = attrs['.uml-class-' + rect.type + '-text'],
rectRect = attrs['.uml-class-' + rect.type + '-rect'],
rectLabel = attrs['.uml-class-' + rect.type + '-label'];
Expand Down

0 comments on commit 63d372b

Please sign in to comment.