introducing colors

Author: nikitaeverywhere

package.json

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

web/css/classView.css

@@ -16,7 +16,7 @@ svg {
 }
 
 .uml-class-name-rect {
-    fill: lightgray;
+    /*fill: lightgray;*/
 }
 
 .uml-class-attrs-rect, .uml-class-methods-rect {
@@ -57,7 +57,7 @@ text {
 .uml-class-attrs-label {
     font-family: monospace;
     font-weight: 900;
-    fill: orange;
+    fill: rgb(255, 97, 0);
 }
 
 .uml-class-methods-label {

web/js/ClassView.js

@@ -112,6 +112,7 @@ ClassView.prototype.renderInfoGraphic = function () {
         classes: {
             "Shared object": {
                 super: "Super object",
+                classType: "Serial",
                 parameters: {
                     "Also inherit Super object": {}
                 },
@@ -189,11 +190,15 @@ ClassView.prototype.renderInfoGraphic = function () {
                 }
             },
             "Super object": {
+                classType: "Persistent",
                 methods: {},
                 properties: {},
-                parameters: {}
+                parameters: {
+                    "(This class is %Persistent)": {}
+                }
             },
             "HELP": {
+                classType: "Registered",
                 parameters: {
                     "See the basics here!": {}
                 }
@@ -216,20 +221,73 @@ ClassView.prototype.renderInfoGraphic = function () {
 
 };
 
+/**
+ * Filter some inherits.
+ *
+ * @param data
+ */
+ClassView.prototype.filterInherits = function (data) {
+
+    if (!data || !data.inheritance) return;
+
+    var p1, p2, filter = {
+        "%Library.Persistent": true,
+        "%Persistent": true,
+        "%Library.SerialObject": true,
+        "%SerialObject": true,
+        "%Library.RegisteredObject": true,
+        "%RegisteredObject": true,
+        "%Library.DataType": true,
+        "%DataType": true
+    };
+
+    for (p1 in data.inheritance) { // classes
+        for (p2 in data.inheritance[p1]) { // inherits
+            if (filter.hasOwnProperty(p2)) delete data.inheritance[p1][p2];
+        }
+    }
+
+    for (p1 in data.classes) {
+        if (filter.hasOwnProperty(p1)) delete data.classes[p1];
+    }
+
+};
+
 /**
  * Returns array of signs to render or empry array.
  *
  * @param classMetaData
  */
-ClassView.prototype.getClassSigns = function (classMetaData) {
+ClassView.prototype.getClassSignsAndType = function (classMetaData) {
 
-    var signs = [];
+    var signs = [], sup = lib.obj((classMetaData["super"] || "").split(",")), ct, CT = "NORMAL";
 
-    if (classMetaData["classType"]) signs.push({
-        icon: lib.image.greenPill,
-        text: lib.capitalize(classMetaData["classType"]),
-        textStyle: "fill:rgb(130,0,255)"
-    });
+    if (classMetaData["classType"] || sup) {
+        ct = classMetaData["classType"];
+        if (sup.hasOwnProperty("%Library.Persistent") || sup.hasOwnProperty("%Persistent")) {
+            ct = "Persistent";
+        }
+        if (sup.hasOwnProperty("%Library.SerialObject") || sup.hasOwnProperty("%SerialObject")) {
+            ct = "Serial";
+        }
+        if (
+                sup.hasOwnProperty("%Library.RegisteredObject")
+                || sup.hasOwnProperty("%RegisteredObject")
+            ) {
+            ct = "Registered";
+        }
+        if (sup.hasOwnProperty("%Library.DataType") || sup.hasOwnProperty("%DataType")) {
+            ct = "Datatype";
+        }
+        if (ct) {
+            CT = ct;
+            signs.push({
+                icon: lib.image.greenPill,
+                text: lib.capitalize(ct),
+                textStyle: "fill:rgb(130,0,255)"
+            });
+        }
+    }
     if (classMetaData["ABSTRACT"]) signs.push({
         icon: lib.image.crystalBall,
         text: "Abstract",
@@ -253,7 +311,7 @@ ClassView.prototype.getClassSigns = function (classMetaData) {
         text: "Hidden"
     });
 
-    return signs;
+    return { signs: signs, classType: CT };
 
 };
 
@@ -291,6 +349,7 @@ ClassView.prototype.createClassInstance = function (name, classMetaData) {
         classProps = classMetaData["properties"],
         classMethods = classMetaData["methods"],
         keyWordsArray = [name],
+        signsAndType,
         self = this;
 
     var classInstance = new joint.shapes.uml.Class({
@@ -341,7 +400,8 @@ ClassView.prototype.createClassInstance = function (name, classMetaData) {
             }
             return arr;
         })(classMethods),
-        classSigns: this.getClassSigns(classMetaData),
+        classSigns: (signsAndType = this.getClassSignsAndType(classMetaData)).signs,
+        classType: signsAndType.classType,
         SYMBOL_12_WIDTH: self.SYMBOL_12_WIDTH
     });
 
@@ -444,6 +504,8 @@ ClassView.prototype.confirmRender = function (data) {
         uml = joint.shapes.uml, relFrom, relTo,
         classes = {}, connector;
 
+    this.filterInherits(data);
+
     // Reset view and zoom again because it may cause visual damage to icons.
     // Don't ask me why. Just believe we need this peace of code.
     this.zoom(null);

web/js/Lib.js

@@ -42,7 +42,7 @@ joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({
         attrs: {
             rect: { 'width': 0 },
 
-            '.uml-class-name-rect': { 'stroke': 'black', 'stroke-width': 1, 'fill': '#3498db' },
+            '.uml-class-name-rect': { 'stroke': 'black', 'stroke-width': 1, 'fill': 'rgb(177, 205, 255)' },
             '.uml-class-params-rect': { 'stroke': 'black', 'stroke-width': 1, 'fill': 'white' },
             '.uml-class-attrs-rect': { 'stroke': 'black', 'stroke-width': 1, 'fill': '#2980b9' },
             '.uml-class-methods-rect': { 'stroke': 'black', 'stroke-width': 1, 'fill': '#2980b9' },
@@ -94,9 +94,23 @@ joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({
             ],
             self = this,
             classSigns = this.get('classSigns'),
+            CLASS_TYPE = this.get('classType'),
             SYMBOL_12_WIDTH = this.get('SYMBOL_12_WIDTH') || 6.6,
             i, j, blockWidth, left = 3, top = 3, w, positions = [], sign;
 
+        // set color head according to class type
+        var headColor;
+        switch (CLASS_TYPE) {
+            case "Persistent": headColor = "rgb(255,219,170)"; break; // light orange
+            case "Serial": headColor = "rgb(252,255,149)"; break; // light yellow
+            case "Registered": headColor = "rgb(192,255,170)"; break; // light green
+            case "Datatype": headColor = "rgb(193,250,255)"; break; // light blue
+            case "Stream": headColor = "rgb(246,188,255)"; break; // light magenta
+            case "View": headColor = "rgb(255,188,188)"; break; // light red
+            case "Index": headColor = "rgb(228,228,228)"; break; // light gray
+        }
+        if (headColor) this.attributes.attrs[".uml-class-name-rect"].fill = headColor;
+
         var subLabelWidth = function (sign) { // object
             return sign.text.length * SYMBOL_12_WIDTH + (sign.icon ? 13 : 0)
         };