Merge remote-tracking branch 'upstream/master'

README.md

@@ -1,9 +1,9 @@
 # CacheUMLExplorer
-An UML Class explorer for InterSystems Caché. It can build UML class diagram for any class or even for whole package in Caché.
+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é.
 
 ## Screenshots
 
-![2015-04-21_214058](https://cloud.githubusercontent.com/assets/4989256/7260103/6c1e2a20-e870-11e4-8bf0-9832885be9ab.png)
+![2015-04-21_214058](https://cloud.githubusercontent.com/assets/4989256/7396518/65ba1924-eeaa-11e4-808b-5f648c0011e4.png)
 
 ## Installation
 

cache/projectTemplate.xml

@@ -3,7 +3,7 @@
 <Class name="UMLExplorer.ClassView">
 <Description>
 Class contains methods that return structured class data.</Description>
-<TimeChanged>63670,72515.130814</TimeChanged>
+<TimeChanged>63671,64479.682329</TimeChanged>
 <TimeCreated>63653,67019.989197</TimeCreated>
 
 <Method name="getClassTree">
@@ -60,6 +60,7 @@ return structured data about class</Description>
 
     set oProperties = ##class(%ZEN.proxyObject).%New()
     set oClass.NAMESPACE = $NAMESPACE
+    set oClass.ABSTRACT = classDefinition.Abstract
     set oClass.super = classDefinition.Super
     set oClass.properties = oProperties
     set count = classDefinition.Properties.Count()
@@ -220,7 +221,7 @@ return structured data about class</Description>
 </Class>
 
 
-<Project name="UMLExplorer" LastModified="2015-04-28 19:55:49.450783">
+<Project name="UMLExplorer" LastModified="2015-04-28 23:30:37.941872">
   <Items>
     <ProjectItem name="UMLExplorer.ClassView" type="CLS"></ProjectItem>
     <ProjectItem name="UMLExplorer.Router" type="CLS"></ProjectItem>

gulpfile.js

@@ -60,7 +60,10 @@ gulp.task("gatherLibs", ["clean"], function () {
 gulp.task("gatherScripts", ["clean", "gatherLibs"], function () {
     return gulp.src("web/js/*.js")
         .pipe(concat("CacheUMLExplorer.js"))
-        .pipe(replace(/[^\s]+\/\*build.replace:(.*)\*\//g, "$1"))
+        .pipe(replace(/[^\s]+\/\*build\.replace:(.*)\*\//g, function (part, match) {
+            var s = match.toString();
+            return s.replace(/pkg\.([a-zA-Z]+)/g, function (p,a) { return pkg[a]; });
+        }))
         .pipe(wrap("CacheUMLExplorer = (function(){<%= contents %> return CacheUMLExplorer;}());"))
         .pipe(uglify({
             output: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "CacheUMLExplorer",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "An UML Class explorer for InterSystems Caché",
   "directories": {
     "test": "test"
@@ -18,7 +18,7 @@
     "gulp-minify-css": "^0.3.11",
     "gulp-postcss": "^5.1.3",
     "gulp-rename": "^1.2.0",
-    "gulp-replace": "^0.5.0",
+    "gulp-replace": "^0.5.3",
     "gulp-strip-comments": "^1.0.1",
     "gulp-uglify": "^1.2.0",
     "gulp-wrap": "^0.5.0",

web/css/extras.css

@@ -140,6 +140,28 @@
     left: 9px;
 }
 
+.icon.info:after {
+    content: "";
+    background-color: #fff;
+    width: 4px;
+    height: 10px;
+    border-radius: 1px;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+
+.icon.info:before {
+    content: "";
+    background-color: #fff;
+    width: 4px;
+    height: 4px;
+    border-radius: 2px;
+    position: absolute;
+    top: 4px;
+    left: 10px;
+}
+
 .icon.scaleNormal:after {
     content: "1:1";
     position: absolute;

web/css/interface.css

@@ -48,6 +48,41 @@ html, body {
     padding: .5em;
 }
 
+.ui-topRightToolBar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .5em;
+}
+
 #className {
     text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
+}
+
+.central {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: table;
+}
+
+.central > div {
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+}
+
+.central > div > div {
+    display: inline-block;
+}
+
+.message {
+    font-size: 14pt;
+    background: rgba(245, 245, 245, 0.9);
+    -webkit-transition: all .2s ease;
+    -moz-transition: all .2s ease;
+    -o-transition: all .2s ease;
+    transition: all .2s ease;
 }

web/index.html

@@ -20,18 +20,22 @@
     <script type="text/javascript" src="js/CacheUMLExplorer.js"></script>
     <script type="text/javascript" src="js/ClassTree.js"></script>
     <script type="text/javascript" src="js/Source.js"></script>
+    <script type="text/javascript" src="js/UI.js"></script>
     <!-- endbuild -->
 </head>
 <body onload="cue = new CacheUMLExplorer(document.getElementById('treeView'), document.getElementById('classView'))">
-    <div class="ui-body">
+    <div class="ui-body" id="ui-body">
         <div class="ui-sideBlock">
             <div id="treeView">
 
             </div>
         </div>
         <div class="ui-mainBlock">
             <div class="ui-ClassInfo">
-                <span id="className"></span>
+                <span id="className">Welcome!</span>
+            </div>
+            <div class="ui-topRightToolBar">
+                <div id="button.showInfo" class="icon info"></div>
             </div>
             <div class="ui-leftBottomToolBar">
                 <div id="button.downloadSVG" class="icon download"></div>

web/js/CacheUMLExplorer.js

@@ -8,15 +8,20 @@
  */
 var CacheUMLExplorer = function (treeViewContainer, classViewContainer) {
 
+    var id = function (e) { return document.getElementById(e); };
+
     this.elements = {
-        className: document.getElementById("className"),
+        uiBody: id("ui-body"),
+        className: id("className"),
         treeViewContainer: treeViewContainer,
         classViewContainer: classViewContainer,
-        zoomInButton: document.getElementById("button.zoomIn"),
-        zoomOutButton: document.getElementById("button.zoomOut"),
-        zoomNormalButton: document.getElementById("button.zoomNormal")
+        zoomInButton: id("button.zoomIn"),
+        zoomOutButton: id("button.zoomOut"),
+        zoomNormalButton: id("button.zoomNormal"),
+        infoButton: id("button.showInfo")
     };
 
+    this.UI = new UI(this);
     this.source = new Source();
     this.classTree = new ClassTree(this, treeViewContainer);
     this.classView = new ClassView(this, classViewContainer);
@@ -43,6 +48,19 @@ CacheUMLExplorer.prototype.init = function () {
         }
     }
 
+    this.elements.infoButton.addEventListener("click", function () {
+        self.UI.displayMessage(
+            "Caché UML explorer v"
+            + "[NOT-BUILT]"/*build.replace:"pkg.version"*/
+            + "<br/>for InterSystems Cach&eacute;"
+            + "<br/>By Nikita Savchenko"
+            + "<br/><a target=\"_blank\" href=\"https://github.com/intersystems-ru/UMLExplorer\">"
+            + "Project page</a> / <a target=\"_blank\" "
+            + "href=\"https://github.com/intersystems-ru/UMLExplorer/issues\">Bug tracker</a>"
+            + "<br/><br/>Enjoy!"
+        );
+    });
+
     enableSVGDownload(this.classTree);
 
 };

web/js/UI.js

@@ -0,0 +1,56 @@
+/**
+ * User interface functions.
+ * @param {CacheUMLExplorer} cacheUMLExplorer
+ * @constructor
+ */
+var UI = function (cacheUMLExplorer) {
+
+    this.cacheUMLExplorer = cacheUMLExplorer;
+    this.BODY = cacheUMLExplorer.elements.uiBody;
+
+    /**
+     * @type {HTMLElement}
+     * @private
+     */
+    this.messageElement = null;
+
+};
+
+/**
+ * Display hovering message.
+ *
+ * @param {string} text
+ * @param {boolean} [removeByClick] - Define whether user be able to remove message by clicking on
+ *                                    it.
+ */
+UI.prototype.displayMessage = function (text, removeByClick) {
+
+    this.removeMessage();
+
+    var self = this,
+        d1 = document.createElement("div"),
+        d2 = document.createElement("div"),
+        d3 = document.createElement("div");
+
+    d1.className = "central message";
+    d1.style.opacity = 0;
+    d3.innerHTML = text;
+    d2.appendChild(d3);
+    d1.appendChild(d2);
+    this.BODY.appendChild(d1);
+    this.messageElement = d1;
+    setTimeout(function () { if (d1) d1.style.opacity = 1; }, 25);
+    if (removeByClick === undefined || removeByClick) d1.addEventListener("click", function () {
+        self.removeMessage();
+    });
+
+};
+
+UI.prototype.removeMessage = function () {
+
+    if (this.messageElement) {
+        this.messageElement.parentNode.removeChild(this.messageElement);
+        this.messageElement = null;
+    }
+
+};

web/jsLib/joint.js

@@ -17222,9 +17222,9 @@ if ( typeof window === "object" && typeof window.document === "object" ) {
 							tspan.node.style[j] = setup["STYLES"][j];
 						}
 					}
-					if (opt.clickHandler) {
-						tspan.node.onclick = opt.clickHandler;
-					}
+				}
+				if (opt.clickHandler) {
+					tspan.node.onclick = opt.clickHandler;
 				}
 		// Make sure the textContent is never empty. If it is, add an additional 
 		// space (an invisible character) so that following lines are correctly

web/jsLib/joint.shapes.uml.js

@@ -103,7 +103,9 @@ joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({
 
             attrs['.uml-class-' + rect.type + '-text'].text = lines.join('\n');
             if (nameClickHandler) {
-                if (rect.type === "name") attrs['.uml-class-' + rect.type + '-text'].clickHandler = nameClickHandler;
+                if (rect.type === "name") {
+                    attrs['.uml-class-' + rect.type + '-text'].clickHandler = nameClickHandler;
+                }
             }
             attrs['.uml-class-' + rect.type + '-rect'].height = rectHeight;
             attrs['.uml-class-' + rect.type + '-rect'].transform = 'translate(0,'+ offsetY + ')';