feat(TreeEditor): new display modes

closes #588

src/components/Editors/TreeEditor/Highlight.vue

@@ -53,7 +53,6 @@ export default {
 	mixins: [
 		HighlighterMixin([
 			'string',
-			'number',
 			'variable',
 			'definition',
 			'keyword',

src/components/Editors/TreeEditor/Tree/CommonTree.vue

@@ -27,21 +27,22 @@
 			>
 				mdi-chevron-right
 			</v-icon>
-			<span v-if="tree.parent.type === 'object'">
+			<span v-if="showArrayIndices || tree.parent.type === 'object'">
 				<!-- Debugging helper -->
 				<span v-if="isDevMode">
 					s: {{ tree.type }} p: {{ tree.parent.type }}
 				</span>
 
-				<span @dblclick="tree.toggleOpen()"> <slot /> </span>:</span
+				<span @dblclick="tree.toggleOpen()"> <slot /> </span
+				>{{ hideBracketsWithinTreeEditor ? undefined : ':' }}</span
 			>
 			<!-- Spacer to make array objects easier to select -->
 			<span
+				v-else-if="!showArrayIndices"
 				:class="{
 					'mx-2': pointerDevice !== 'touch',
 					'mx-6': pointerDevice === 'touch',
 				}"
-				v-else
 			/>
 
 			<span class="px-1" @click.stop.prevent="tree.toggleOpen()">
@@ -110,7 +111,18 @@ export default {
 		}
 	},
 	computed: {
+		hideBracketsWithinTreeEditor() {
+			if (!settingsState.editor) return false
+			return settingsState.editor.hideBracketsWithinTreeEditor || false
+		},
+		showArrayIndices() {
+			if (!settingsState.editor) return false
+			return settingsState.editor.showArrayIndices || false
+		},
+
 		openingBracket() {
+			if (this.hideBracketsWithinTreeEditor) return
+
 			if (this.tree.isOpen) return brackets[this.tree.type][0]
 			else if (Object.keys(this.tree.children).length > 0)
 				return `${brackets[this.tree.type][0]}...${
@@ -121,6 +133,8 @@ export default {
 			}`
 		},
 		closingBracket() {
+			if (this.hideBracketsWithinTreeEditor) return
+
 			return this.tree.isOpen ? brackets[this.tree.type][1] : undefined
 		},
 	},

src/components/Editors/TreeEditor/Tree/TreeChildren.vue

@@ -16,7 +16,10 @@
 				:treeEditor="treeEditor"
 				@setActive="$emit('setActive')"
 			>
-				<Highlight :value="key" />
+				<span v-if="tree.type === 'array'" :style="numberDef">{{
+					key
+				}}</span>
+				<Highlight v-else :value="key" />
 			</component>
 		</Draggable>
 	</div>
@@ -29,9 +32,11 @@ import { pointerDevice } from '/@/utils/pointerDevice.ts'
 import Draggable from 'vuedraggable'
 import { settingsState } from '/@/components/Windows/Settings/SettingsState.ts'
 import { MoveEntry } from '../History/MoveEntry.ts'
+import { HighlighterMixin } from '/@/components/Mixins/Highlighter'
 
 export default {
 	name: 'TreeChildren',
+	mixins: [HighlighterMixin(['number'])],
 	components: {
 		Highlight,
 		Draggable,

src/components/Windows/Settings/setupSettings.ts

@@ -409,6 +409,25 @@ export async function setupSettings(settings: SettingsWindow) {
 			default: true,
 		})
 	)
+	settings.addControl(
+		new Toggle({
+			category: 'editor',
+			name: 'windows.settings.editor.showArrayIndices.name',
+			description: 'windows.settings.editor.showArrayIndices.description',
+			key: 'showArrayIndices',
+			default: false,
+		})
+	)
+	settings.addControl(
+		new Toggle({
+			category: 'editor',
+			name: 'windows.settings.editor.hideBracketsWithinTreeEditor.name',
+			description:
+				'windows.settings.editor.hideBracketsWithinTreeEditor.description',
+			key: 'hideBracketsWithinTreeEditor',
+			default: false,
+		})
+	)
 
 	// Projects
 	settings.addControl(

src/locales/en.json

@@ -892,6 +892,14 @@
 				"dragAndDropTreeNodes": {
 					"name": "Drag and Drop Tree Nodes",
 					"description": "Disable/enable drag & drop for tree nodes inside of bridge.'s tree editor"
+				},
+				"showArrayIndices": {
+					"name": "Show Array Indices",
+					"description": "Show indices for array elements inside of bridge.'s tree editor"
+				},
+				"hideBracketsWithinTreeEditor": {
+					"name": "Hide Brackets",
+					"description": "Hide brackets within bridge.'s tree editor"
 				}
 			}
 		},