Improve colors, prefab visualization

flecs-hub · May 22, 2024 · 3573673 · 3573673
1 parent 95fb984
commit 3573673
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/etc/v4/query_editor/css/colors.css b/etc/v4/query_editor/css/colors.css
@@ -27,6 +27,7 @@
   --bright-green: #A2D8B4;
   --bright-blue: rgb(86, 168, 248);
   --bright-red: #EF8784;
+  --cyan: #00AABB;
 
   --bg-color-alt: rgb(10,12,14);
   --bg-color:     hsl(214, 10%, 11%);

diff --git a/etc/v4/query_editor/js/components/pages/entities/entity-subtree.vue b/etc/v4/query_editor/js/components/pages/entities/entity-subtree.vue
@@ -45,13 +45,14 @@ const treeQueryResult = ref();
 
 onMounted(() => {
   const q = `
-    (ChildOf, ${props.path}), 
-    ?Module, 
-    ?Component, 
-    ?Prefab, 
-    ?Disabled, 
-    ?ChildOf(_, $this), 
-    ?IsA($this, $base|self)`
+    (flecs.core.ChildOf, ${props.path}), 
+    ?flecs.core.Module, 
+    ?flecs.core.Component,
+    ?flecs.core.Query,
+    ?flecs.core.Prefab, 
+    ?flecs.core.Disabled, 
+    ?flecs.core.ChildOf(_, $this), 
+    ?flecs.core.IsA($this, $base|self)`
     ;
 
   treeQuery.value = 
@@ -76,10 +77,11 @@ onMounted(() => {
         treeItem.path = path;
         treeItem.isModule = item.is_set[1];
         treeItem.isComponent = item.is_set[2];
-        treeItem.isPrefab = item.is_set[3];
-        treeItem.isDisabled = item.is_set[4];
-        treeItem.isParent = item.is_set[5];
-        treeItem.baseEntity = item.is_set[6] ? item.vars["base"] : undefined;
+        treeItem.isQuery = item.is_set[3];
+        treeItem.isPrefab = item.is_set[4];
+        treeItem.isDisabled = item.is_set[5];
+        treeItem.isParent = item.is_set[6];
+        treeItem.baseEntity = item.is_set[7] ? item.vars["base"] : undefined;
         sortedItems.push(treeItem);
       }
 

diff --git a/etc/v4/query_editor/js/components/pages/entities/entity-tree-icon.vue b/etc/v4/query_editor/js/components/pages/entities/entity-tree-icon.vue
@@ -27,8 +27,10 @@ const fillColor = computed(() => {
     return "#FFE100";
   } else if (props.item.isComponent) {
     return "#4981B5";
-  } else if (props.item.isPrefab) {
+  } else if (props.item.isQuery) {
     return "#DDE0E6";
+  } else if (props.item.isPrefab) {
+    return "var(--purple)";
   } else {
     return "var(--green)";
   }

diff --git a/etc/v4/query_editor/js/components/pages/entities/entity-tree-item.vue b/etc/v4/query_editor/js/components/pages/entities/entity-tree-item.vue
@@ -11,7 +11,9 @@
         <entity-tree-icon :item="item"></entity-tree-icon>
       </div>
       <div class="entity-tree-item-name noselect">
-        {{ item.name }}
+        <span>
+          {{ item.name }}<template v-if="item.baseEntity"><span class="entity-tree-item-base">&nbsp;:&nbsp;{{ item.baseEntity }}</span></template>
+        </span>
       </div>
     </div>
     <template v-if="expand">
@@ -128,4 +130,8 @@ div.entity-tree-item-name {
   color: var(--primary-text);
 }
 
+span.entity-tree-item-base {
+  color: var(--secondary-text);
+}
+
 </style>