some class keywords visualization as icons with labels add

Author: nikitaeverywhere

README.md

@@ -10,10 +10,12 @@ An UML Class explorer for InterSystems Caché.
 
 ## Screenshots
 
-![2015-04-21_214058](https://cloud.githubusercontent.com/assets/4989256/7525432/180dafd8-f512-11e4-80dc-3c5721d3b858.png)
+![Demo](https://cloud.githubusercontent.com/assets/4989256/7586381/19008d24-f8b5-11e4-8893-a63d5373dfa1.png)
 
 ## Installation
 
+To install Caché UML Explorer, you need to import UMLExplorer package to Caché and then set up a WEB-application.
+
 ###### Import classes to Caché
 To install Caché UML class explorer, download the [latest release](https://github.com/ZitRos/CacheUMLExplorer/releases) or build project by yourself. Then import XML file inside <code>Cache</code> directory of archive or directory.
 

cache/projectTemplate.xml

@@ -3,7 +3,7 @@
 <Class name="UMLExplorer.ClassView">
 <Description>
 Class contains methods that return structured classes/packages data.</Description>
-<TimeChanged>63680,46308.140173</TimeChanged>
+<TimeChanged>63684,52343.305666</TimeChanged>
 <TimeCreated>63653,67019.989197</TimeCreated>
 
 <Method name="getClassTree">
@@ -62,10 +62,14 @@ Return structured data about class.</Description>
     do oData.classes.%DispatchSetProperty(classDefinition.Name, oClass) // prevent from recursive setup
     set package = $LISTTOSTRING($LIST($LISTFROMSTRING(classDefinition.Name, "."), 1, *-1),".")
     set oProperties = ##class(%ZEN.proxyObject).%New()
+    set oClass.super = classDefinition.Super
     set oClass.NAMESPACE = $NAMESPACE
     set oClass.SYSTEM = classDefinition.System
+    set oClass.PROCEDUREBLOCK = classDefinition.ProcedureBlock
     set oClass.ABSTRACT = classDefinition.Abstract
-    set oClass.super = classDefinition.Super
+    set oClass.FINAL = classDefinition.Final
+    set oClass.HIDDEN = classDefinition.Hidden
+    set oClass.classType = classDefinition.ClassType
 
     if (oData.restrictPackage) && ('..inPackage(oData.basePackageName, package)) quit oClass
 
@@ -263,7 +267,7 @@ Returns structured package data</Description>
 </Class>
 
 
-<Project name="UMLExplorer" LastModified="2015-05-08 00:09:34.590786">
+<Project name="UMLExplorer" LastModified="2015-05-08 19:38:35.423206">
   <Items>
     <ProjectItem name="UMLExplorer.ClassView" type="CLS"></ProjectItem>
     <ProjectItem name="UMLExplorer.Router" type="CLS"></ProjectItem>

gulpfile.js

@@ -97,12 +97,12 @@ gulp.task("addHTMLFile", ["clean"], function () {
         .pipe(gulp.dest("build/web/"));
 });
 
-gulp.task("copyLICENSE", ["clean"], function (){
+gulp.task("copyLICENSE", ["clean"], function () {
     return gulp.src("LICENSE")
         .pipe(gulp.dest("build/"));
 });
 
-gulp.task("copyREADME", ["clean"], function (){
+gulp.task("copyREADME", ["clean"], function () {
     return gulp.src("readme.md")
         .pipe(gulp.dest("build/"));
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "CacheUMLExplorer",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "An UML Class explorer for InterSystems Caché",
   "directories": {
     "test": "test"

web/js/ClassView.js

@@ -73,6 +73,48 @@ ClassView.prototype.openClassDoc = function (className, nameSpace) {
 
 };
 
+/**
+ * Returns array of signs to render or empry array.
+ *
+ * @private
+ * @param classMetaData
+ */
+ClassView.prototype.getClassSigns = function (classMetaData) {
+
+    var signs = [];
+
+    if (classMetaData["classType"]) signs.push({
+        icon: lib.image.greenPill,
+        text: classMetaData["classType"],
+        textStyle: "fill:rgb(130,0,255)"
+    });
+    if (classMetaData["ABSTRACT"]) signs.push({
+        icon: lib.image.iceCube,
+        text: "Abstract",
+        textStyle: "fill:rgb(130,0,255)"
+    });
+    if (classMetaData["FINAL"]) signs.push({
+        icon: lib.image.blueFlag,
+        text: "Final",
+        textStyle: "fill:rgb(130,0,255)"
+    });
+    if (classMetaData["SYSTEM"]) signs.push({
+        icon: lib.image.chip,
+        text: "System/" + classMetaData["SYSTEM"]
+    });
+    if (classMetaData["PROCEDUREBLOCK"] === 0) signs.push({
+        icon: lib.image.moleculeCubeCross,
+        text: "NotProcBlock"
+    });
+    if (classMetaData["HIDDEN"]) signs.push({
+        icon: lib.image.ghost,
+        text: "Hidden"
+    });
+
+    return signs;
+
+};
+
 /**
  * @param {string} name
  * @param classMetaData
@@ -90,7 +132,7 @@ ClassView.prototype.createClassInstance = function (name, classMetaData) {
     };
 
     var classInstance = new joint.shapes.uml.Class({
-        name: (classMetaData["ABSTRACT"] ? ["<<Abstract>>", name] : [name]),
+        name: name,
         params: (function (params) {
             var arr = [], n;
             for (n in params) {
@@ -129,6 +171,7 @@ ClassView.prototype.createClassInstance = function (name, classMetaData) {
                 self.openClassDoc(name, classMetaData["NAMESPACE"]);
             }
         },
+        classSigns: this.getClassSigns(classMetaData),
         SYMBOL_12_WIDTH: self.SYMBOL_12_WIDTH
     });
 

web/js/Lib.js

@@ -23,23 +23,24 @@ joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({
             '<rect class="uml-class-methods-rect"/>',
             '<text class="uml-class-methods-label">Methods</text>',
           '</g>',
-          //'<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(''),
 
+    HEAD_EMPTY_LINES: 0, // controls number of empty lines in header
+
     defaults: joint.util.deepSupplement({
 
         type: 'uml.Class',
 
-        size: { width: 300, height: 300 },
+        MIN_WIDTH: 100,
+        size: { width: 0, height: 300 },
 
         attrs: {
-            rect: { 'width': 200 },
+            rect: { 'width': 0 },
 
             '.uml-class-name-rect': { 'stroke': 'black', 'stroke-width': 1, 'fill': '#3498db' },
             '.uml-class-params-rect': { 'stroke': 'black', 'stroke-width': 1, 'fill': 'white' },
@@ -77,27 +78,72 @@ joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({
         name: [],
         params: [],
         attributes: [],
-        methods: []
+        methods: [],
+        classSigns: []
 
     }, joint.shapes.basic.Generic.prototype.defaults),
 
-    initialize: function() {
+    initialize: function () {
+
+        var rects = [
+                { type: 'name', text: this.getClassName() },
+                { type: 'params', text: this.get('params') },
+                { type: 'attrs', text: this.get('attributes') },
+                { type: 'methods', text: this.get('methods') }
+            ],
+            self = this,
+            classSigns = this.get('classSigns'),
+            SYMBOL_12_WIDTH = this.get('SYMBOL_12_WIDTH') || 6.6,
+            i, blockWidth, left = 3, top = 3, w;
+
+        // preserve space for sub-labels
+        w = 0; for (i in classSigns) {
+            w += classSigns[i].text.length * SYMBOL_12_WIDTH + (classSigns[i].icon ? 13 : 0) + (i ? 3 : 0);
+            i = 1;
+        }
+
+        this.defaults.size.width = Math.max(this.defaults.MIN_WIDTH, Math.min(w, 250));
+        _.each(rects, function (rect) {
+            (rect.text instanceof Array ? rect.text : [rect.text]).forEach(function (s) {
+                var t = s.split("\x1b")[0].length*SYMBOL_12_WIDTH + 8;
+                if (t > self.defaults.size.width) {
+                    self.defaults.size.width = t;
+                }
+            });
+        });
+
+        blockWidth = this.defaults.size.width;
 
-        this.on('change:name change:attributes change:methods', function() {
+        if (classSigns.length) this.HEAD_EMPTY_LINES = 1;
+
+        for (i in classSigns) {
+            w = classSigns[i].text.length*SYMBOL_12_WIDTH + (classSigns[i].icon ? 13 : 0);
+            if (left + w - 3 > blockWidth) { top += 12; left = 3; this.HEAD_EMPTY_LINES++; }
+            this.markup += '<g transform="translate(' + left + ', ' + top + ')">' +
+                (classSigns[i].icon ? '<image xlink:href="' + classSigns[i].icon +
+                '" width="13" height="13"/>' : '') + '<text fill="black" font-size="11" ' +
+                (classSigns[i].textStyle ? 'style="' + classSigns[i].textStyle + '"' : '') +
+                ' x="' + (classSigns[i].icon ? 13 : 0) + '" y="10">' + classSigns[i].text +
+                '</text></g>';
+            left += w + 3;
+        }
+
+        this.on('change:name change:attributes change:methods', function () {
             this.updateRectangles();
 	        this.trigger('uml-update');
         }, this);
 
         this.updateRectangles();
 
         joint.shapes.basic.Generic.prototype.initialize.apply(this, arguments);
+
     },
 
-    getClassName: function() {
+    getClassName: function () {
         return this.get('name');
     },
 
-    updateRectangles: function() {
+    updateRectangles: function () {
 
         var attrs = this.get('attrs'),
             self = this,
@@ -110,25 +156,19 @@ joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({
             { type: 'methods', text: this.get('methods') }
         ];
 
-        var offsetY = 0,
-            maxWidth = 100;
+        var offsetY = 0;
 
         var dp = self.get("directProps") || {},
             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*SYMBOL_12_WIDTH + 8; if (t > maxWidth) {
-                maxWidth = t;
-            }});
-        });
-
-        this.attributes.size.width = maxWidth; // max width assign
-
         _.each(rects, function(rect) {
 
             var lines = _.isArray(rect.text) ? rect.text : [rect.text];
 
-            //if (rect.type === "name") lines.unshift("");
+            if (rect.type === "name") {
+                if (self.HEAD_EMPTY_LINES) lines.unshift("");
+                for (var i = 0; i < self.HEAD_EMPTY_LINES; i++) lines.unshift("");
+            }
 
             var rectHeight = lines.length * 12 + (lines.length ? 10 : 0),
                 rectText = attrs['.uml-class-' + rect.type + '-text'],
@@ -156,7 +196,9 @@ joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({
         });
 
         this.attributes.size.height = offsetY;
-        this.attributes.attrs.rect.width = maxWidth;
+        this.attributes.size.width = this.defaults.size.width; // max width assign
+        this.attributes.attrs.rect.width = this.defaults.size.width;
+
     }
 
 });