Optimized tab formats

js/technical/displays.js

@@ -118,4 +118,77 @@ function constructBarStyle(layer, id) {
 			style.fillDims['clip-path'] = 'inset(0% 50% 0% 0%)'
 	}
 	return style
+}
+
+function constructTabFormat(layer, id, family){
+	let tabTemp, tabLayer, tabFunc, location, key
+	if (id === undefined){
+		tabTemp = tmp[layer].tabFormat
+		tabLayer = layers[layer].tabFormat
+		tabFunc = funcs[layer].tabFormat
+		location = tmp[layer]
+		key = "tabFormat"
+	}
+	else if (family === undefined) {
+		tabTemp = tmp[layer].tabFormat[id].content
+		tabLayer = layers[layer].tabFormat[id].content
+		tabFunc = funcs[layer].tabFormat[id].content
+		location = tmp[layer].tabFormat[id]
+		key = "content"
+
+	}
+	else {
+		tabTemp = tmp[layer].microtabs[family][id].content
+		tabLayer = layers[layer].microtabs[family][id].content
+		tabFunc = funcs[layer].microtabs[family][id].content
+		location = tmp[layer].microtabs[family][id]
+		key = "tabFormat"
+
+	}
+	if (isFunction(tabLayer)) {
+		
+		let bound = tabLayer.bind(layers[layer])
+		Vue.set(tabTemp, key, bound())
+	}
+	updateTempData(tabLayer, tabTemp, tabFunc)
+	return tabTemp
+}
+
+function updateTabFormats() {
+	updateTabFormat(player.tab)
+	updateTabFormat(player.navTab)
+}
+
+function updateTabFormat(layer) {
+	if (layers[layer]?.tabFormat === undefined) return
+
+	let tab = player.subtabs[layer]?.mainTabs
+	if (isFunction(layers[layer].tabFormat)) {
+		Vue.set(temp[layer], 'tabFormat', layers[layer].tabFormat())
+	}
+	else if (Array.isArray(layers[layer].tabFormat)) {
+		Vue.set(temp[layer], 'tabFormat', constructTabFormat(layer))
+	}
+	else if (isPlainObject(layers[layer].tabFormat)) {
+		if (layers[layer].tabFormat[tab].embedLayer === undefined)
+		Vue.set(temp[layer].tabFormat[tab], 'content', constructTabFormat(layer, tab))
+	}
+
+	// Check for embedded layer
+	if (isPlainObject(tmp[layer].tabFormat) && tmp[layer].tabFormat[tab].embedLayer !== undefined) { 
+		constructTabFormat(tmp[layer].tabFormat[tab].embedLayer)
+	}
+
+	// Update microtabs
+	for (family in layers[layer].microtabs) {
+		tab = player.subtabs[layer][family]
+
+		if (tmp[layer].microtabs[family][tab]) {
+
+			if (tmp[layer].microtabs[family][tab].embedLayer)
+				constructTabFormat(tmp[layer].microtabs[family][tab].embedLayer)
+			else
+				constructTabFormat(layer, tab, family)
+		}
+	}
 }

js/technical/systemComponents.js

@@ -6,7 +6,7 @@ var systemComponents = {
 				<div v-for="tab in Object.keys(data)">
 					<button v-if="data[tab].unlocked == undefined || data[tab].unlocked" v-bind:class="{tabButton: true, notify: subtabShouldNotify(layer, name, tab), resetNotify: subtabResetNotify(layer, name, tab)}"
 					v-bind:style="[{'border-color': tmp[layer].color}, (data[tab].glowColor && subtabShouldNotify(layer, name, tab) ? {'box-shadow': 'var(--hqProperty2a), 0 0 20px '  + data[tab].glowColor} : {}), tmp[layer].componentStyles['tab-button'], data[tab].buttonStyle]"
-						v-on:click="function(){player.subtabs[layer][name] = tab; needCanvasUpdate = true;}">{{tab}}</button>
+						v-on:click="function(){player.subtabs[layer][name] = tab; updateTabFormats(); needCanvasUpdate = true;}">{{tab}}</button>
 				</div>
 			</div>
 		`

js/technical/temp.js

@@ -117,6 +117,7 @@ function updateTempData(layerData, tmpData, funcsData) {
 	
 	for (item in funcsData){
 		if (Array.isArray(layerData[item])) {
+			if (item === "tabFormat" || item === "content") return // These are only updated when needed
 			updateTempData(layerData[item], tmpData[item], funcsData[item])
 		}
 		else if ((!!layerData[item]) && (layerData[item].constructor === Object) || (typeof layerData[item] === "object") && traversableClasses.includes(layerData[item].constructor.name)){