big packages rendering warning, browsers size differences fix, IE fixes

Author: nikitaeverywhere

README.md

@@ -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
 

cache/projectTemplate.xml

@@ -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">
@@ -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
 
@@ -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>

package.json

@@ -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"

web/css/classView.css

@@ -1,3 +1,8 @@
+/* IE fix */
+svg {
+    overflow: hidden;
+}
+
 #classView {
     height: 100%;
     cursor: -webkit-grab; cursor: -moz-grab;

web/js/ClassView.js

@@ -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();
 
@@ -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);
@@ -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;
@@ -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;
+    })();
+
 };

web/js/Lib.js

@@ -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;
+
 };

web/js/UI.js

@@ -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();
 
@@ -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);

web/jsLib/joint.shapes.uml.js

@@ -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(''),
 
@@ -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() },
@@ -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;
             }});
         });
@@ -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'];