class search feature

nikitaeverywhere · nikitaeverywhere · commit e86de0c25bbe · 2015-05-30T20:51:10.000+03:00
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ An UML Class explorer for InterSystems Caché.
 
 ## Screenshots
 
-![Demo](https://cloud.githubusercontent.com/assets/4989256/7799624/f0255216-0310-11e5-8783-06300fc6d957.png)
+![Demo](https://cloud.githubusercontent.com/assets/4989256/7898598/7d367720-070d-11e5-9177-dded6abf93e1.png)
 
 ## Installation
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "CacheUMLExplorer",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "An UML Class explorer for InterSystems Caché",
   "directories": {
     "test": "test"
diff --git a/web/css/interface.css b/web/css/interface.css
@@ -15,13 +15,13 @@ html, body {
 .ui-sideBlock {
     position: relative;
     float: left;
-    width: 250px;
+    width: 200px;
     height: 100%;
 }
 
 .ui-mainBlock {
     position: relative;
-    margin-left: 250px;
+    margin-left: 200px;
     height: 100%;
 }
 
diff --git a/web/css/treeView.css b/web/css/treeView.css
@@ -5,6 +5,26 @@
     height: 100%;
     border-right: 1px solid lightgray;
     overflow: auto;
+    box-sizing: border-box;
+    padding-top: 24px;
+}
+
+.ui-sideSearchBlock {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1;
+}
+
+.ui-sideSearchBlock > input {
+    display: block;
+    box-sizing: border-box;
+    border: 1px solid gray;
+    border-radius: 5px;
+    width: 196px;
+    margin: 1px 1px 1px 2px;
+    height: 22px;
 }
 
 .tv-package-name.minimized + .tv-package-content {
diff --git a/web/index.html b/web/index.html
@@ -28,6 +28,9 @@
 <body onload="cue = new CacheUMLExplorer(document.getElementById('treeView'), document.getElementById('svgContainer'))">
     <div class="ui-body" id="ui-body">
         <div class="ui-sideBlock">
+            <div class="ui-sideSearchBlock">
+                <input type="search" id="classTreeSearch" placeholder="Search..."/>
+            </div>
             <div id="treeView">
 
             </div>
diff --git a/web/js/CacheUMLExplorer.js b/web/js/CacheUMLExplorer.js
@@ -28,7 +28,8 @@ var CacheUMLExplorer = function (treeViewContainer, classViewContainer) {
         svgContainer: id("svgContainer"),
         methodDescription: id("methodDescription"),
         methodViewBounds: id("methodViewBounds"),
-        namespaces: id("namespaces")
+        namespaces: id("namespaces"),
+        classTreeSearch: id("classTreeSearch")
     };
 
     this.UI = new UI(this);
diff --git a/web/js/ClassTree.js b/web/js/ClassTree.js
@@ -6,19 +6,28 @@
  */
 var ClassTree = function (parent, treeViewContainer) {
 
+    var self = this;
+
     this.cacheUMLExplorer = parent;
     this.container = treeViewContainer;
     this.loader = null;
     this.SELECTED_NAME = null;
     this.SELECTED_TYPE = null; // "class" || "package"
     this.SELECTED_ELEMENT = null;
+    this.treeObject = null;
+
+    this.cacheUMLExplorer.elements.classTreeSearch.addEventListener("input", function (e) {
+        self.searchChanged.call(self, (e.target || e.srcElement).value);
+    });
 
 };
 
 ClassTree.prototype.showLoader = function () {
 
     if (this.loader) return;
 
+    this.cacheUMLExplorer.elements.classTreeSearch.value = "";
+    this.treeObject = null;
     this.loader = document.createElement("div");
     this.loader.className = "spinner";
     this.container.appendChild(this.loader);
@@ -28,6 +37,8 @@ ClassTree.prototype.showLoader = function () {
 ClassTree.prototype.removeLoader = function () {
 
     if (!this.loader) return;
+
+    this.cacheUMLExplorer.elements.classTreeSearch.value = "";
     this.loader.parentNode.removeChild(this.loader);
     this.loader = null;
 
@@ -61,7 +72,36 @@ ClassTree.prototype.packageSelected = function (element, packageName) {
 
 };
 
-ClassTree.prototype.updateTree = function (treeObject) {
+ClassTree.prototype.searchChanged = function (query) {
+
+    var o = this.treeObject;
+
+    if (!o) return;
+    query = query.toLowerCase();
+
+    var searchClone = function (o, copyFlag) {
+        var i, matches = 0, lm, t, clone = {}, cpf;
+        for (i in o) {
+            lm = 0; cpf = false;
+            if (i.toLowerCase().indexOf(query) !== -1) { lm += 1; matches++; cpf = true; }
+            if (typeof o[i] === "object") {
+                lm += (t = searchClone(o[i], cpf)).matches;
+                matches += t.matches;
+            } else t = { obj: o[i] };
+            if (copyFlag || lm !== 0) clone[i] = t.obj;
+        }
+        return { matches: matches, obj: clone };
+    };
+
+    this.updateTree(searchClone(o).obj || {}, true);
+
+};
+
+/**
+ * @param treeObject
+ * @param {boolean} [doNotChangeRoot] - Determines to restrict assign of this.treeObject.
+ */
+ClassTree.prototype.updateTree = function (treeObject, doNotChangeRoot) {
 
     var self = this,
         div = function () { return document.createElement("div");},
@@ -159,4 +199,6 @@ ClassTree.prototype.updateTree = function (treeObject) {
 
     build(this.container, treeObject, [], 0);
 
+    if (!doNotChangeRoot) this.treeObject = treeObject;
+
 };

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "CacheUMLExplorer",`
`3`		`- "version": "0.11.1",`
	`3`	`+ "version": "0.12.0",`
`4`	`4`	`"description": "An UML Class explorer for InterSystems Caché",`
`5`	`5`	`"directories": {`
`6`	`6`	`"test": "test"`
Original file line number	Diff line number	Diff line change
`@@ -15,13 +15,13 @@ html, body {`
`15`	`15`	`.ui-sideBlock {`
`16`	`16`	`position: relative;`
`17`	`17`	`float: left;`
`18`		`- width: 250px;`
	`18`	`+ width: 200px;`
`19`	`19`	`height: 100%;`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`.ui-mainBlock {`
`23`	`23`	`position: relative;`
`24`		`- margin-left: 250px;`
	`24`	`+ margin-left: 200px;`
`25`	`25`	`height: 100%;`
`26`	`26`	`}`
`27`	`27`