Add find in treeview button, improve treeview logic, improve treeview…

… performance
Kristofir · Nov 18, 2022 · 1466fac · 1466fac
1 parent c57edb9
commit 1466fac
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 21 deletions.
diff --git a/etc/css/style.css b/etc/css/style.css
@@ -718,6 +718,7 @@ span.inspector-button  {
   padding-left: 10px;
   padding-right: 10px;
   cursor: pointer;
+  height: 18px;
 }
 
 span.inspector-button:hover  {

diff --git a/etc/index.html b/etc/index.html
@@ -85,7 +85,8 @@
             </template>
           <inspector 
             :valid="valid"
-            v-on:select-entity="evt_follow_ref" 
+            v-on:select-entity="evt_follow_ref"
+            v-on:tree-navigate="evt_tree_navigate"
             v-on:select-query="evt_select_query"
             v-on:append-query="evt_append_query"
             v-on:panel-update="evt_panel_update"

diff --git a/etc/js/app.js b/etc/js/app.js
@@ -20,7 +20,7 @@ const INITIAL_REMOTE_REQUEST_TIMEOUT = 10000;
 const INITIAL_REQUEST_RETRY_INTERVAL = 200;
 
 // Interval at which the UI will poll the remote app.
-const REFRESH_INTERVAL = 1000;
+const REFRESH_INTERVAL = 10000;
 
 // Default port for the REST interface
 const DEFAULT_PORT = "27750";
@@ -623,6 +623,11 @@ var app = new Vue({
       this.set_entity(entity);
     },
 
+    evt_tree_navigate(entity) {
+      this.$refs.tree.select(entity);
+      this.$refs.tree.open();
+    },
+
     evt_select_query(query) {
       this.$refs.query.set_query(query);
       this.$refs.query.open();

diff --git a/etc/js/entity_inspector.js b/etc/js/entity_inspector.js
@@ -548,6 +548,11 @@ const inspector_component = Vue.component('inspector', {
         this.$emit('select-query', "?- " + this.entity.path);
       }
     },
+    navigate() {
+      if (this.entity) {
+        this.$emit('tree-navigate', this.entity.path);
+      }
+    },
     enable_entity() {
       app.enable_entity(this.entity.path);
     },
@@ -654,6 +659,16 @@ const inspector_component = Vue.component('inspector', {
           </div>
 
           <div class="inspector-buttons" v-if="connected">
+            <span class="inspector-button inspector-icon-button"
+              v-on:click="navigate">
+                &nbsp;<icon icon="codicons:list-tree" size="16"></icon>&nbsp;
+            </span>
+            <template v-if="is_query">
+              <span class="inspector-button"
+                v-on:click="set_as_query">
+                &nbsp;<icon icon="codicons:search" size="16"></icon>&nbsp;
+              </span>
+            </template>
             <template v-if="is_disabled">
               <span class="inspector-button" v-on:click="enable_entity">
                 Enable
@@ -664,12 +679,6 @@ const inspector_component = Vue.component('inspector', {
                 Disable
               </span>
             </template>
-            <template v-if="is_query">
-              <span class="inspector-button"
-                v-on:click="set_as_query">
-                Query
-              </span>
-            </template>
           </div>
 
           <div class="inspector-content">

diff --git a/etc/js/entity_tree.js b/etc/js/entity_tree.js
@@ -19,19 +19,14 @@ function subtree_height(entity_data) {
 
 Vue.component('entity-tree-item', {
   props: ['x', 'y', 'entity_data', 'selected_entity', 'width'],
-  mounted: function() {
-    this.expand = this.entity_data.expand;
-  },
   data: function() {
     return {
-      expand: false,
       text_elem: undefined
     }
   },
   methods: {
     toggle: function() {
       this.$emit('toggle', this.entity_data);
-      this.expand = this.entity_data.expand;
     },
     search: function() {
       this.$emit('select_query', this.entity_data.path);
@@ -73,7 +68,7 @@ Vue.component('entity-tree-item', {
 
       <template v-if="entity_data.has_children">
         <rect :x="xp" :y="y - 5" :width="5" height="1" fill="#44464D"></rect>
-        <image v-if="!expand"
+        <image v-if="!entity_data.expand"
           class="entity-tree-icon" 
           href="img/nav-right.png" 
           :x="xp + 2" :y="y - 12" 
@@ -341,7 +336,7 @@ Vue.component('entity-tree', {
       }
 
       const q = "(ChildOf, " + container.path + "), ?ChildOf(_, $This), ?Module, ?Component, ?Tag, ?Prefab, ?Disabled";
-      app.request_query('tree-' + container.path,  q, (reply) => {
+      app.request_query('tree-' + container.path, q, (reply) => {
         if (reply.error) {
           console.error("treeview: " + reply.error);
         } else {
@@ -389,6 +384,8 @@ Vue.component('entity-tree', {
         cur = this.root;
       }
 
+      app.request_abort('tree-' + cur.path);
+
       for (let k in cur.entities) {
         let ent = cur.entities[k];
         this.collapse_all(ent);
@@ -402,12 +399,11 @@ Vue.component('entity-tree', {
         return;
       }
 
-      cur.expand = true;
-
       this.update(cur, () => {
+        cur.expand = true;
+
         let next = cur.entities[elems[i]];
         if (!next) {
-          // console.error("entity-tree: cannot navigate to entity " + elems[i]);
           this.collapse_all();
         }
 
@@ -430,7 +426,9 @@ Vue.component('entity-tree', {
       this.collapse_all();
 
       this.select_recursive(entity, cur, elems, 0, (item) => {
-        this.evt_select(item);
+        if (entity != this.selected_entity) {
+          this.evt_select(item);
+        }
       });
     },
     set_selected_entity(entity) {
@@ -450,11 +448,10 @@ Vue.component('entity-tree', {
     evt_select_query: function(entity) {
       this.$emit('select_query', entity);
     },
-    evt_resize: function(elem) {
-    },
     open: function() {
       this.disabled = false;
       this.$emit("panel-update");
+      this.update_expanded();
     },
     close: function() {
       this.disabled = true;