important changes: extended hover description for all class elements, minor fixes

Author: nikitaeverywhere

cache/projectTemplate.xml

@@ -4,7 +4,7 @@
 <Description>
 Cache UML Explorer vX.X.X/*build.replace:pkg.version*/
 Class contains methods that return structured classes/packages data.</Description>
-<TimeChanged>63830,81286.756889</TimeChanged>
+<TimeChanged>63843,54972.140109</TimeChanged>
 <TimeCreated>63653,67019.989197</TimeCreated>
 
 <Method name="getAllNamespacesList">
@@ -94,6 +94,7 @@ Return structured data about class.</Description>
     set package = $LISTTOSTRING($LIST($LISTFROMSTRING(classDefinition.Name, "."), 1, *-1),".")
     set oProperties = ##class(%ZEN.proxyObject).%New()
     set oQueries = ##class(%ZEN.proxyObject).%New()
+    set oIndices = ##class(%ZEN.proxyObject).%New()
 
     set oClass.NAMESPACE = $NAMESPACE
     set oClass.SYSTEM = classDefinition.System
@@ -171,6 +172,19 @@ Return structured data about class.</Description>
         do oQueries.%DispatchSetProperty(q.Name, oProp)
     }
 
+    #dim ind as %Dictionary.IndexDefinition
+    set oClass.indices = oIndices
+    set props = ##class(%Dictionary.ClassDefinition).%OpenId("%Dictionary.IndexDefinition")
+    for i=1:1:classDefinition.Indices.Count() {
+        set oProp = ##class(%ZEN.proxyObject).%New()
+        set ind = classDefinition.Indices.GetAt(i)
+        for j=1:1:props.Properties.Count() {
+            set pname = props.Properties.GetAt(j).Name
+            set:(pname '= "parent") $PROPERTY(oProp, pname) = $PROPERTY(ind, pname)
+        }
+        do oIndices.%DispatchSetProperty(ind.Name, oProp)
+    }
+
     do ..collectInheritance(oData, oClass.super)
 
     quit oClass

package.json

@@ -1,6 +1,6 @@
 {
   "name": "CacheUMLExplorer",
-  "version": "1.5.1",
+  "version": "1.6.1",
   "description": "An UML Class explorer for InterSystems Caché",
   "directories": {
     "test": "test"
@@ -9,7 +9,7 @@
   "devDependencies": {
     "autoprefixer-core": "^5.1.11",
     "express": "^5.0.0-alpha.1",
-    "gulp": "^3.8.11",
+    "gulp": "^3.9.0",
     "gulp-add-src": "^0.2.0",
     "gulp-clean": "^0.3.1",
     "gulp-concat": "^2.4.1",

web/css/extras.css

@@ -311,4 +311,12 @@
 .icon.list:hover:after {
     left: 4px;
     box-shadow: inset 0 0 0 32px #ffcc1b, 0 -7px 0 0 #ffcc1b, 0 7px 0 0 #ffcc1b;
+}
+
+.underlined {
+    text-decoration: underline;
+}
+
+.clickable {
+    cursor: pointer;
 }

web/css/hoverMessage.css

@@ -13,6 +13,7 @@
 
 .line-hoverable {
     cursor: pointer;
+    font-style: italic;
     -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
     -o-transition: all .5s ease;
@@ -30,6 +31,5 @@
     left: 0;
     top: 0;
     padding: 20px;
-    cursor: pointer;
 
 }

web/css/interface.css

@@ -86,6 +86,7 @@ html, body {
 .message {
     font-size: 14pt;
     background: rgba(245, 245, 245, 0.9);
+    z-index: 1;
     -webkit-transition: all .2s ease;
     -moz-transition: all .2s ease;
     -o-transition: all .2s ease;

web/js/ClassView.js

@@ -133,7 +133,7 @@ ClassView.prototype.renderInfoGraphic = function () {
                         abstract: 1
                     },
                     "Class method": {
-                        classMethod: 1
+                        ClassMethod: 1
                     },
                     "Client method": {
                         clientMethod: 1
@@ -349,28 +349,143 @@ ClassView.prototype.getClassSigns = function (classMetaData) {
 /**
  * Returns array of icons according to method metadata.
  *
- * @param method
+ * @param property
  */
-ClassView.prototype.getPropertyIcons = function (method) {
+ClassView.prototype.getPropertyIcons = function (property) {
 
     var icons = [];
 
-    if (typeof method["Private"] !== "undefined") {
-        icons.push({ src: lib.image[method["Private"] ? "minus" : "plus"] });
+    if (typeof property["Private"] !== "undefined") {
+        icons.push({ src: lib.image[property["Private"] ? "minus" : "plus"] });
+    }
+    if (property["Abstract"]) icons.push({ src: lib.image.crystalBall });
+    if (property["ClientMethod"]) icons.push({ src: lib.image.user });
+    if (property["Final"]) icons.push({ src: lib.image.blueFlag });
+    if (property["NotInheritable"]) icons.push({ src: lib.image.redFlag });
+    if (property["SqlProc"]) icons.push({ src: lib.image.table });
+    if (property["WebMethod"]) icons.push({ src: lib.image.earth });
+    if (property["ZenMethod"]) icons.push({ src: lib.image.zed });
+    if (property["ReadOnly"]) icons.push({ src: lib.image.eye });
+    if (property["index"]) {
+        icons.push(
+            property["index"]["Unique"] ? { src: lib.image.keyRed }
+            : (property["index"]["PrimaryKey"] || property["index"]["IDKey"])
+            ? { src: lib.image.keyGreen } : { src: lib.image.keyYellow }
+        );
     }
-    if (method["Abstract"]) icons.push({ src: lib.image.crystalBall });
-    if (method["ClientMethod"]) icons.push({ src: lib.image.user });
-    if (method["Final"]) icons.push({ src: lib.image.blueFlag });
-    if (method["NotInheritable"]) icons.push({ src: lib.image.redFlag });
-    if (method["SqlProc"]) icons.push({ src: lib.image.table });
-    if (method["WebMethod"]) icons.push({ src: lib.image.earth });
-    if (method["ZenMethod"]) icons.push({ src: lib.image.zed });
-    if (method["ReadOnly"]) icons.push({ src: lib.image.eye });
 
     return icons;
 
 };
 
+/**
+ * @param prop
+ * @param {string} type = ["parameter", "property", "method", "query"]
+ * @returns {string}
+ */
+ClassView.prototype.getPropertyHoverText = function (prop, type) {
+
+    var ind, i, desc = "",
+        indexText = {
+            "IdKey": function () { return "IdKey"; },
+            "Type": function (type) { return "Type="+type; },
+            "Internal": function () { return "Internal"; },
+            "Extent": function () { return "Extent"; },
+            "PrimaryKey": function () { return "PrimaryKey"; },
+            "Unique": function () { return "Unique"; }
+        },
+        propText = {
+            "Calculated": 1,
+            "Final": 1,
+            "Identity": 1,
+            "InitialExpression": function (data) {
+                return (data === "\"\"")
+                    ? ""
+                    : "<span class=\"syntax-keyword\">InitialExpression</span>="
+                        + lib.highlightCOS(data + "")
+            },
+            "Internal": 1,
+            "MultiDimensional": 1,
+            "NoModBit": 1,
+            "NotInheritable": 1,
+            "Private": 1,
+            "ReadOnly": 1,
+            "Relationship": function (data, p) {
+                return "<span class=\"syntax-keyword\">Relationship</span> [ Cardinality="
+                    + p["Cardinality"] + ", Inverse=" + p["Inverse"] + " ]";
+            },
+            "Required": 1,
+            "SqlComputed": function (data, p) {
+                return p["SqlComputeCode"]
+                    ? "<span class=\"syntax-keyword\">SqlComputed</span> [ SqlComputeCode={"
+                        + lib.highlightCOS(p["SqlComputeCode"]) + "} ]"
+                    : "";
+            },
+            "Transient": 1,
+            // -- methods
+            "Abstract": 1,
+            // "ClassMethod": 1, - they're underlined
+            "ClientMethod": 1,
+            "CodeMode": function (data) {
+                return data === "code" ? "" : "<span class=\"syntax-keyword\">CodeMode</span>="
+                    + "<span class=\"syntax-string\">" + data + "</span>";
+            },
+            "ForceGenerate": 1,
+            "NoContext": 1,
+            "NotForProperty": 1,
+            "ReturnResultsets": 1,
+            "SoapAction": function (data) {
+                return data === "[default]" ? ""
+                    : "<span class=\"syntax-keyword\">SoapAction</span>="
+                        + "<span class=\"syntax-string\">" + data + "</span>";
+            },
+            "SqlProc": 1,
+            "WebMethod": 1,
+            "ZenMethod": 1,
+            // -- parameters
+            "Encoded": 1,
+            // -- queries
+            "SqlView": 1
+        };
+
+    if (ind = prop["index"]) {
+        desc += "<span class=\"syntax-keyword\">INDEX</span> <span class=\"syntax-string\">"
+            + ind["Name"] + "</span> " + (function () {
+                var txt = [];
+                for (i in ind) {
+                    if (indexText[i] && ind[i]) txt.push(indexText[i](ind[i]));
+                }
+                return txt.join(", ");
+            })()
+            + "\n";
+    }
+
+    var txt = [], val;
+    for (i in prop) {
+        if (propText[i] && (prop[i] || i === "InitialExpression")) {
+            val = propText[i] === 1
+                ? "<span class=\"syntax-keyword\">" + i + "</span>"
+                : propText[i](prop[i], prop);
+            if (val !== "") txt.push(val);
+        }
+    }
+    if (txt.length) desc += txt.join(", ");
+
+    // Display FormalSpec in methods?
+
+    if (desc && prop["Description"]) desc += "<hr/>";
+    desc += prop["Description"] || "";
+
+    if (desc && type) {
+        desc = "<span class=\"underlined\"><span class=\"syntax-keyword\">" + lib.capitalize(type)
+            + "</span> <span class=\"syntax-string\">" + (prop["Name"] || "") + "</span></span>:"
+            + ("<br/>") + desc;
+    }
+
+    return desc;
+
+};
+
 /**
  * @param {string} name
  * @param classMetaData
@@ -401,7 +516,7 @@ ClassView.prototype.createClassInstance = function (name, classMetaData) {
                 keyWordsArray.push(n);
                 arr.push({
                     text: n + (params[n]["Type"] ? ": " + params[n]["Type"] : ""),
-                    hover: params[n]["Description"] || "",
+                    hover: self.getPropertyHoverText(params[n], "parameter"),
                     icons: self.getPropertyIcons(params[n])
                 });
             }
@@ -413,7 +528,7 @@ ClassView.prototype.createClassInstance = function (name, classMetaData) {
                 keyWordsArray.push(n);
                 arr.push({
                     text: n + (ps[n]["Type"] ? ": " + ps[n]["Type"] : ""),
-                    hover: ps[n]["Description"] || "",
+                    hover: self.getPropertyHoverText(ps[n], "property"),
                     icons: self.getPropertyIcons(ps[n])
                 });
             }
@@ -427,11 +542,11 @@ ClassView.prototype.createClassInstance = function (name, classMetaData) {
                     text: n + (met[n]["ReturnType"] ? ": " + met[n]["ReturnType"] : ""),
                     styles: (function (t) {
                         return t ? { textDecoration: "underline" } : {}
-                    })(met[n]["classMethod"]),
+                    })(met[n]["ClassMethod"]),
                     clickHandler: (function (n) {
                         return function () { self.showMethodCode(name, n); }
                     })(n),
-                    hover: met[n]["Description"] || "",
+                    hover: self.getPropertyHoverText(met[n], "method"),
                     icons: self.getPropertyIcons(met[n])
                 });
             }
@@ -444,7 +559,7 @@ ClassView.prototype.createClassInstance = function (name, classMetaData) {
                 arr.push({
                     text: n,
                     icons: self.getPropertyIcons(qrs[n]),
-                    hover: qrs[n]["SqlQuery"],
+                    hover: self.getPropertyHoverText(qrs[n], "query"),
                     clickHandler: (function (q, className) {
                         return function () { self.showQuery(className, q); }
                     })(qrs[n], name)

web/js/HoverMessage.js

@@ -2,7 +2,7 @@ var HoverMessage = function (text, clickHandler) {
 
     var self = this;
 
-    this.clickHandler = typeof clickHandler === "function" ? clickHandler : function () {};
+    this.clickHandler = typeof clickHandler === "function" ? clickHandler : null;
     this.element = document.createElement("div");
     this.element.className = "hoverMessage";
     this.element.innerHTML = text;
@@ -19,9 +19,13 @@ var HoverMessage = function (text, clickHandler) {
             })(e, this))) return;
         self.detach();
     });
-    this.container.addEventListener("click", function () {
-        self.clickHandler();
-    });
+
+    if (this.clickHandler) {
+        if (this.container.classList) this.container.classList.add("clickable");
+        this.container.addEventListener("click", function () {
+            if (!lib.getSelection()) self.clickHandler();
+        });
+    }
 
 };
 
@@ -30,7 +34,8 @@ HoverMessage.prototype.attach = function (screenX, screenY) {
     var e = this.container, w;
 
     document.body.appendChild(e);
-    e.style.width = (w = Math.min(e.offsetWidth, window.innerWidth/2)) + "px";
+    // +1 to width fixes "X.4234" rational part that may appear on SVG
+    e.style.width = (w = Math.ceil(Math.min(e.offsetWidth, window.innerWidth/2) + 1)) + "px";
     e.style.top = (screenY - e.offsetHeight + 15) + "px";
     e.style.left = Math.min(window.innerWidth - w - 10, screenX - w/2) + "px";