fixed click when dragging classes, show queries option add

Author: nikitaeverywhere

package.json

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

web/css/settingsView.css

@@ -29,4 +29,9 @@
 
 #settingsView table td {
     text-align: left;
+}
+
+#settingsView table td:nth-child(3) {
+    color: #888;
+    padding-left: 1em;
 }

web/index.html

@@ -98,26 +98,37 @@ <h1>
                             <tbody>
                             <tr>
                                 <td><input id="setting.showDataTypesOnDiagram" type="checkbox"/></td>
-                                <td><label for="setting.showDataTypesOnDiagram">Show Data Types</label></td>
+                                <td><label for="setting.showDataTypesOnDiagram">Render Data Types</label></td>
+                                <td>Show data type classes on diagram</td>
+                            </tr>
+                            <tr>
+                                <td><input id="setting.showClassIcons" type="checkbox"/></td>
+                                <td><label for="setting.showClassIcons">Show Icons Over Class Name</label></td>
+                                <td>Visualize class keywords</td>
                             </tr>
                             <tr>
                                 <td><input id="setting.showParameters" type="checkbox"/></td>
                                 <td><label for="setting.showParameters">Show Parameters</label></td>
+                                <td>Display block with class parameters</td>
                             </tr>
                             <tr>
                                 <td><input id="setting.showProperties" type="checkbox"/></td>
                                 <td><label for="setting.showProperties">Show Properties</label></td>
+                                <td>Display block with class properties</td>
                             </tr>
                             <tr>
                                 <td><input id="setting.showMethods" type="checkbox"/></td>
                                 <td><label for="setting.showMethods">Show Methods</label></td>
+                                <td>Display block with class methods</td>
                             </tr>
                             <tr>
                                 <td><input id="setting.showQueries" type="checkbox"/></td>
                                 <td><label for="setting.showQueries">Show Queries</label></td>
+                                <td>Display block with class queries</td>
                             </tr>
                             </tbody>
                         </table>
+                        <p id="settingsExtraText"></p>
                     </div>
                 </div>
             </div>

web/js/CacheUMLExplorer.js

@@ -37,8 +37,10 @@ var CacheUMLExplorer = function (treeViewContainer, classViewContainer) {
         diagramSearchButton: id("button.diagramSearch"),
         settingsView: id("settingsView"),
         closeSettings: id("closeSettings"),
+        settingsExtraText: id("settingsExtraText"),
         settings: {
             showDataTypesOnDiagram: id("setting.showDataTypesOnDiagram"),
+            showClassIcons: id("setting.showClassIcons"),
             showParameters: id("setting.showParameters"),
             showProperties: id("setting.showProperties"),
             showMethods: id("setting.showMethods"),
@@ -54,6 +56,7 @@ var CacheUMLExplorer = function (treeViewContainer, classViewContainer) {
     // note: this.elements is required to be modified with the same name as settings keys
     this.settings = {
         showDataTypesOnDiagram: settingsValue("showDataTypesOnDiagram"),
+        showClassIcons: settingsValue("showClassIcons", true),
         showParameters: settingsValue("showParameters", true),
         showProperties: settingsValue("showProperties", true),
         showMethods: settingsValue("showMethods", true),
@@ -73,12 +76,14 @@ var CacheUMLExplorer = function (treeViewContainer, classViewContainer) {
 
 CacheUMLExplorer.prototype.initSettings = function () {
 
-    var self = this;
+    var self = this,
+        textChanged = "Please, re-render diagram to make changes apply.";
 
     for (var st in this.elements.settings) {
         this.elements.settings[st].checked = this.settings[st];
         this.elements.settings[st].addEventListener("change", (function (st) {
             return function (e) {
+                self.elements.settingsExtraText.innerHTML = textChanged;
                 localStorage.setItem(
                     st,
                     self.settings[st] = (e.target || e.srcElement).checked
@@ -200,6 +205,7 @@ CacheUMLExplorer.prototype.init = function () {
         self.elements.settingsView.classList.add("active");
     });
     this.elements.closeSettings.addEventListener("click", function () {
+        self.elements.settingsExtraText.textContent = "";
         self.elements.settingsView.classList.remove("active");
     });
 

web/js/ClassView.js

@@ -310,6 +310,8 @@ ClassView.prototype.getClassSigns = function (classMetaData) {
 
     var signs = [], ct;
 
+    if (!this.cacheUMLExplorer.settings.showClassIcons) return signs;
+
     if (ct = classMetaData["$classType"]) {
         if (ct !== "Serial" && ct !== "Registered" && ct !== "Persistent" && ct !== "DataType") {
             signs.push({

web/jsLib/joint.js

@@ -17229,7 +17229,18 @@ if ( typeof window === "object" && typeof window.document === "object" ) {
 					}
 				}
 				if (typeof lines[i]["clickHandler"] === "function") {
-					tspan.node.addEventListener("click", lines[i]["clickHandler"]);
+					tspan.node.addEventListener("click", (function (el, handler) {
+						var clickable = true;
+						el.addEventListener("mousemove", function () {
+							clickable = false;
+						});
+						el.addEventListener("mousedown", function () {
+							clickable = true;
+						});
+						return function (e) {
+							if (clickable) handler(e);
+						};
+					})(tspan.node, lines[i]["clickHandler"]));
 					tspan.node["clickHandler"] = lines[i]["clickHandler"];
 					tspan.addClass('line-clickable');
 				}