hide data types from diagram option, options add

Author: nikitaeverywhere

README.md

@@ -13,15 +13,15 @@ An UML Class explorer for InterSystems Caché.
 
 ## Screenshots
 
-![Demo](https://cloud.githubusercontent.com/assets/4989256/7968221/00d348b0-0a38-11e5-81af-89c547655c12.png)
+![Demo](https://cloud.githubusercontent.com/assets/4989256/7972419/ec9ef408-0a54-11e5-96a1-8ef70e24a168.png)
 
 ## Installation
 
 To install latest Caché UML Explorer, you just need to import UMLExplorer package. Download the
 archive from [latest releases](https://github.com/ZitRos/CacheUMLExplorer/releases), and then import
 <code>Cache/CacheUMLExplorer-vX.X.X.xml</code> file.
 
-###### Web application
+###### Web applicationgulp
 Note that importing UMLExplorer.WebAppInstaller class will also create a /UMLExplorer application.
 If you want to create WEB application manually, please, do not import this class. Anyway, <b>
 importing this class requires %SYS permission.</b>

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>63697,66596.619226</TimeChanged>
+<TimeChanged>63706,86042.410811</TimeChanged>
 <TimeCreated>63653,67019.989197</TimeCreated>
 
 <Method name="getAllNamespacesList">
@@ -102,6 +102,7 @@ Return structured data about class.</Description>
     set oClass.HIDDEN = classDefinition.Hidden
     set oClass.classType = classDefinition.ClassType
     set oClass.serverOnly = classDefinition.ServerOnly // -
+    set oClass.isDataType = classDefinition.ClientDataTypeIsDefined()
 
     if (oData.restrictPackage) && ('..inPackage(oData.basePackageName, package)) quit oClass
 

package.json

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

web/css/extras.css

@@ -84,6 +84,31 @@
     box-shadow: 0 0 5px 2px #ffcc1b;
 }
 
+.icon.gear:before {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    width: 12px;
+    height: 12px;
+    border-radius: 12px;
+    border: 3px white dotted;
+}
+
+.icon.gear:after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 7px;
+    top: 7px;
+    width: 6px;
+    height: 6px;
+    box-shadow: 0 0 0 2px white, 0 0 0 2px white inset;
+    border-radius: 12px;
+    border: 2px solid transparent;
+}
+
 .icon.search:after {
     content: "";
     position: absolute;

web/css/settingsView.css

@@ -0,0 +1,28 @@
+#settingsView {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    height: 0;
+    background: rgba(245, 245, 245, 0.95);
+    z-index: 10;
+    -webkit-transition: all .5s ease;
+    -moz-transition: all .5s ease;
+    -o-transition: all .5s ease;
+    transition: all .5s ease;
+}
+
+#settingsView.active {
+    box-shadow: 0 0 5px black;
+    height: 100%;
+}
+
+#settingsView > div.head {
+    position: absolute;
+    width: 100%;
+    box-sizing: border-box;
+    top: 0;
+    left: 0;
+    padding: 1em;
+    z-index: 2;
+    text-align: right;
+}

web/index.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="css/classView.css"/>
     <link rel="stylesheet" href="css/joint.min.css"/>
     <link rel="stylesheet" href="css/methodCodeView.css"/>
+    <link rel="stylesheet" href="css/settingsView.css"/>
     <!-- endbuild -->
     <!-- build:js -->
     <script type="text/javascript" src="jsLib/joint.js"></script>
@@ -43,6 +44,7 @@
             <div class="ui-topRightToolBar">
                 <div id="button.showInfo" class="icon info"></div>
                 <div id="button.showHelp" class="icon help"></div>
+                <div id="button.showSettings" class="icon gear"></div>
                 <select id="namespaces" class="icon select">
                     <option value="Loading..." selected>Loading...</option>
                 </select>
@@ -79,6 +81,24 @@ <h2 id="methodLabel"></h2>
                 </div>
             </div>
         </div>
+        <div id="settingsView">
+            <div class="head">
+                <div id="closeSettings" class="icon cross"></div>
+            </div>
+            <div class="central">
+                <div>
+                    <div>
+                        <h1>
+                            Settings
+                        </h1>
+                        <label>
+                            <input id="setting.showDataTypesOnDiagram" type="checkbox"/>
+                            Show data types on diagram
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </body>
 </html>

web/js/CacheUMLExplorer.js

@@ -19,6 +19,7 @@ var CacheUMLExplorer = function (treeViewContainer, classViewContainer) {
         zoomInButton: id("button.zoomIn"),
         zoomOutButton: id("button.zoomOut"),
         zoomNormalButton: id("button.zoomNormal"),
+        showSettingsButton: id("button.showSettings"),
         helpButton: id("button.showHelp"),
         infoButton: id("button.showInfo"),
         methodCodeView: id("methodCodeView"),
@@ -33,7 +34,18 @@ var CacheUMLExplorer = function (treeViewContainer, classViewContainer) {
         classTreeSearch: id("classTreeSearch"),
         searchBlock: id("searchBlock"),
         diagramSearch: id("diagramSearch"),
-        diagramSearchButton: id("button.diagramSearch")
+        diagramSearchButton: id("button.diagramSearch"),
+        settingsView: id("settingsView"),
+        closeSettings: id("closeSettings"),
+        settings: {
+            showDataTypesOnDiagram: id("setting.showDataTypesOnDiagram")
+        }
+    };
+
+    this.settings = {
+        showDataTypesOnDiagram:
+            localStorage.getItem("showDataTypesOnDiagram") === null ? false :
+                localStorage.getItem("showDataTypesOnDiagram") === "true"
     };
 
     this.UI = new UI(this);
@@ -42,10 +54,25 @@ var CacheUMLExplorer = function (treeViewContainer, classViewContainer) {
     this.classView = new ClassView(this, classViewContainer);
     this.NAMESPACE = null;
 
+    this.initSettings();
     this.init();
 
 };
 
+CacheUMLExplorer.prototype.initSettings = function () {
+
+    var self = this;
+
+    this.elements.settings.showDataTypesOnDiagram.checked = this.settings.showDataTypesOnDiagram;
+    this.elements.settings.showDataTypesOnDiagram.addEventListener("change", function (e) {
+        localStorage.setItem(
+            "showDataTypesOnDiagram",
+            self.settings.showDataTypesOnDiagram = (e.target || e.srcElement).checked
+        );
+    });
+
+};
+
 /**
  * Render namespaces.
  * @param nsData
@@ -153,6 +180,12 @@ CacheUMLExplorer.prototype.init = function () {
             self.setNamespace(ns);
         }
     });
+    this.elements.showSettingsButton.addEventListener("click", function () {
+        self.elements.settingsView.classList.add("active");
+    });
+    this.elements.closeSettings.addEventListener("click", function () {
+        self.elements.settingsView.classList.remove("active");
+    });
 
     enableSVGDownload(this.classTree);
 

web/js/ClassView.js

@@ -230,7 +230,7 @@ ClassView.prototype.filterInherits = function (data) {
 
     if (!data || !data.inheritance) return;
 
-    var p1, p2, filter = {
+    var p1, p2, toFilter = ["inheritance", "composition", "aggregation"], filter = {
         "%Library.Persistent": true,
         "%Persistent": true,
         "%Library.SerialObject": true,
@@ -241,14 +241,24 @@ ClassView.prototype.filterInherits = function (data) {
         "%DataType": true
     };
 
-    for (p1 in data.inheritance) { // classes
-        for (p2 in data.inheritance[p1]) { // inherits
-            if (filter.hasOwnProperty(p2)) delete data.inheritance[p1][p2];
+    var f = function (p) {
+        return filter.hasOwnProperty(p) || (data.classes[p] || {})["isDataType"] ||
+            lib.obj(((data.classes[p] || {}).super || "").split(",")).hasOwnProperty("%DataType");
+    };
+
+    if (this.cacheUMLExplorer.settings.showDataTypesOnDiagram)
+        return;
+
+    toFilter.forEach(function (p) {
+        for (p1 in data[p]) { // classes
+            for (p2 in data[p][p1]) { // inherits
+                if (f(p2)) delete data[p][p1][p2];
+            }
         }
-    }
+    });
 
     for (p1 in data.classes) {
-        if (filter.hasOwnProperty(p1)) delete data.classes[p1];
+        if (f(p1)) delete data.classes[p1];
     }
 
 };