Improve array visualization

Author: SanderMertens

etc/js/components/widgets/inspector/entity-inspector-field.vue

@@ -363,16 +363,14 @@ div.value-bool::after {
 div.value-bool label.bool-checkbox {
   display: flex;
   align-items: center;
-  padding: 4px;
-  padding-left: 8px;
 }
 
 div.value-bool label.bool-checkbox input[type="checkbox"] {
   -webkit-appearance: none;
   appearance: none;
   background-color: var(--bg-input);
-  width: 16px;
-  height: 16px;
+  width: 15.5px;
+  height: 19.5px;
   border-radius: var(--border-radius-medium);
   cursor: pointer;
   position: relative;
@@ -382,7 +380,7 @@ div.value-bool label.bool-checkbox input[type="checkbox"]:checked::after {
   content: '';
   position: absolute;
   left: 9px;
-  top: 3px;
+  top: 5px;
   width: 5px;
   height: 10px;
   border: solid #4981B5;

etc/js/components/widgets/inspector/entity-inspector-kv.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="chevron noselect" @click.stop="toggle">
+  <div v-if="showChevron" class="chevron noselect" @click.stop="toggle">
     <template v-if="typeof value === 'object' && value !== null">
       <expand-button
         :expand="expand">
       </expand-button>
     </template>
   </div>
-  <div class="key noselect" @click.stop="toggle">
+  <div class="key noselect" :class="{'no-chevron': !showChevron}" @click.stop="toggle">
     {{  keyname }}
   </div>
-  <div class="value noselect" @click.stop="toggle">
+  <div class="value noselect" :class="{'no-chevron': !showChevron}" @click.stop="toggle">
     <template v-if="typeof value === 'object'">
       <entity-inspector-preview
         :value="value"
@@ -54,6 +54,7 @@ const props = defineProps({
   value: {required: true},
   type: {type: Object, required: true},
   readonly: {type: Boolean, required: true},
+  showChevron: {type: Boolean, required: false, default: true},
 });
 
 const emit = defineEmits(["setValue"]);
@@ -66,7 +67,11 @@ function toggle() {
 
 function setValue(evt, key) {
   if (evt.hasOwnProperty("key")) {
-    emit('setValue', { key: `${key}.${evt.key}`, value: evt.value });
+    if (evt.key.startsWith('[')) {
+      emit('setValue', { key: `${key}${evt.key}`, value: evt.value });
+    } else {
+      emit('setValue', { key: `${key}.${evt.key}`, value: evt.value });
+    }
   } else {
     emit('setValue', { key: key, value: evt.value });
   }
@@ -98,11 +103,19 @@ div.key {
   min-height: 28px;
 }
 
+div.key.no-chevron {
+  grid-column: 1;
+}
+
 div.value {
   grid-column: 3;
   cursor: pointer;
 }
 
+div.value.no-chevron {
+  grid-column: 2;
+}
+
 div.nested-value {
   grid-column: 1 / -1;
   padding-left: 5px;

etc/js/components/widgets/inspector/entity-inspector-value.vue

@@ -1,24 +1,30 @@
 <template>
   <div>
     <template v-if="isArray(type, value)">
-      <div class="array-list">
+      <div class="prop-grid" :class="{'no-chevron': !hasComplexChildren}">
         <template v-for="(item, index) in value">
-          <div class="array-item">
-            <span class="array-index">{{ index }}:</span>
-            <span class="array-value">{{ item }}</span>
-          </div>
+          <entity-inspector-kv
+            :path="path + '[' + index + ']'"
+            :keyname="String(index)"
+            :value="item"
+            :type="type[1]"
+            :readonly="readonly"
+            :showChevron="hasComplexChildren"
+            @setValue="(evt) => emitArrayValue(evt, index)">
+          </entity-inspector-kv>
         </template>
       </div>
     </template>
     <template v-else-if="isObject(type, value)">
-      <div class="prop-grid">
+      <div class="prop-grid" :class="{'no-chevron': !hasComplexChildren}">
         <template v-for="(value, key) in value">
           <entity-inspector-kv
             :path="path + '.' + key"
             :keyname="key"
             :value="value"
             :type="type[key]"
             :readonly="readonly"
+            :showChevron="hasComplexChildren"
             @setValue="(evt) => emit('setValue', evt)">
           </entity-inspector-kv>
         </template>
@@ -40,7 +46,7 @@ export default { name: "entity-inspector-value" }
 </script>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import { defineProps, defineEmits, computed } from 'vue';
 
 const props = defineProps({
   path: {type: String, required: true},
@@ -51,13 +57,40 @@ const props = defineProps({
 
 const emit = defineEmits(["setValue"]);
 
-function isArray(type, value) {
-  if (type) {
-    return Array.isArray(type);
+const hasComplexChildren = computed(() => {
+  if (Array.isArray(props.value)) {
+    return props.value.some(v => typeof v === 'object' && v !== null);
+  } else if (typeof props.value === 'object' && props.value !== null) {
+    return Object.values(props.value).some(v => typeof v === 'object' && v !== null);
   }
+  return false;
+});
+
+function emitArrayValue(evt, index) {
+  const prefix = String(index);
+  if (evt.hasOwnProperty("key")) {
+    let subkey = evt.key;
+    if (subkey === prefix) {
+      emit('setValue', { key: `[${index}]`, value: evt.value });
+    } else if (subkey.startsWith(prefix + '.')) {
+      emit('setValue', { key: `[${index}].${subkey.slice(prefix.length + 1)}`, value: evt.value });
+    }
+  } else {
+    emit('setValue', { key: `[${index}]`, value: evt.value });
+  }
+}
+
+function isArray(type, value) {
   return Array.isArray(value);
 }
 
+function arrayElementType(type) {
+  if (Array.isArray(type) && type[0] === "array") {
+    return type[1];
+  }
+  return type;
+}
+
 function isObject(type, value) {
   if (type) {
     if (Array.isArray(type)) {
@@ -78,30 +111,9 @@ div.prop-grid {
   grid-template-columns: 16px auto 1fr;
 }
 
-div.array-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+div.prop-grid.no-chevron {
+  grid-template-columns: auto 1fr;
 }
 
-div.array-item {
-  display: flex;
-  gap: 8px;
-  padding: 4px;
-  background-color: var(--bg-content);
-  border-radius: var(--border-radius-small);
-}
-
-span.array-index {
-  color: var(--secondary-text);
-  font-weight: 500;
-  min-width: 2em;
-}
-
-span.array-value {
-  color: var(--orange);
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-}
 
 </style>