✨ Add node config property display configuration

Allows customization of how config properties values are represented in the UI. E.g. Makes it possible to differentiate between a file path and a string.

Author: SnaveSutit

src/lang/en.yml

@@ -89,42 +89,43 @@ dialog:
         label: Storage-based
         description: 42% Slower than function-based, but creates far fewer function files.
 
+config:
+  common:
+    label: Common
+    options:
+      billboard: Billboard
+      brightnessOverride: Brightness
+      glowColor: Glow Color
+      glowing: Glowing
+      inheritSettings: Inherit Settings
+      invisible: Invisible
+      nbt: NBT
+      overrideBrightness: Override Brightness
+      overrideGlowColor: Override Glow Color
+      shadowRadius: Shadow Radius
+      shadowStrength: Shadow Strength
+      useNBT: Use NBT
+
+  animated_java:text_display:
+    label: Text Display
+    options:
+      alignment: Alignment
+      backgroundColor: Background Color
+      lineWidth: Line Width
+      seeThrough: See Through
+      shadow: Shadow
+      textComponent: Text Component
+
+  animated_java:item_display:
+    label: Item Display
+
+  animated_java:block_display:
+    label: Block Display
+
 panel:
   display:
     title: Display
 
-    common:
-      label: Common
-      options:
-        billboard: Billboard
-        brightnessOverride: Brightness
-        glowColor: Glow Color
-        glowing: Glowing
-        inheritSettings: Inherit Settings
-        invisible: Invisible
-        nbt: NBT
-        overrideBrightness: Override Brightness
-        overrideGlowColor: Override Glow Color
-        shadowRadius: Shadow Radius
-        shadowStrength: Shadow Strength
-        useNBT: Use NBT
-
-    animated_java:text_display:
-      label: Text Display
-      options:
-        alignment: Alignment
-        backgroundColor: Background Color
-        lineWidth: Line Width
-        seeThrough: See Through
-        shadow: Shadow
-        textComponent: Text Component
-
-    animated_java:item_display:
-      label: Item Display
-
-    animated_java:block_display:
-      label: Block Display
-
 node:
   structure.title: |-
     Structure - (Animated Java)

src/systems/node-configs/index.ts

@@ -126,15 +126,61 @@ export class BlockDisplayConfig extends SerializableConfig<BlockDisplayConfig> {
 
 @SerializableConfig.decorate
 export class TextDisplayConfig extends SerializableConfig<TextDisplayConfig> {
-	alignment: Alignment = 'center'
+	@SerializableConfig.configurePropertyDisplay({
+		get displayName() {
+			return translate('config.animated_java:text_display.options.alignment')
+		},
+		displayMode: 'select',
+		options: ['center', 'left', 'right'],
+	})
+	alignment?: Alignment = 'center'
+
+	@SerializableConfig.configurePropertyDisplay({
+		get displayName() {
+			return translate('config.animated_java:text_display.options.backgroundColor')
+		},
+		displayMode: 'color',
+	})
 	backgroundColor = '#0000003f'
+
+	@SerializableConfig.configurePropertyDisplay({
+		get displayName() {
+			return translate('config.animated_java:text_display.options.lineWidth')
+		},
+		displayMode: 'color',
+	})
 	lineWidth? = 200
-	seeThrough = false
-	shadow = false
+
+	@SerializableConfig.configurePropertyDisplay({
+		get displayName() {
+			return translate('config.animated_java:text_display.options.seeThrough')
+		},
+		displayMode: 'checkbox',
+	})
+	seeThrough? = false
+
+	@SerializableConfig.configurePropertyDisplay({
+		get displayName() {
+			return translate('config.animated_java:text_display.options.shadow')
+		},
+		displayMode: 'checkbox',
+	})
+	shadow? = false
+
+	@SerializableConfig.configurePropertyDisplay({
+		get displayName() {
+			return translate('config.animated_java:text_display.options.textComponent')
+		},
+		displayMode: 'code_editor',
+		syntax: 'json',
+	})
 	textComponent?: string
 
 	public toNBT(compound = new NbtCompound()) {
 		console.error('toNBT not implemented for TextDisplayConfig!')
 		return compound
 	}
 }
+
+const TEST = new TextDisplayConfig()
+console.log(TEST, TEST.getPropertyDescription('alignment'))

src/systems/node-configs/serializableConfig.ts

@@ -42,6 +42,8 @@ export class SerializableConfig<
 		__inheritedKeys__: Array<keyof T>
 	},
 > {
+	private static __propertyDisplayConfigs__: Partial<Record<string, PropertyDisplayConfig>> = {}
+
 	private __defaultValues__ = {} as Record<string, any>
 	private __inheritedKeys__ = new Set<keyof T>()
 	private __getLocal__ = false
@@ -301,6 +303,10 @@ export class SerializableConfig<
 		return entries
 	}
 
+	getPropertyDescription<Key extends keyof T>(key: Key): PropertyDisplayConfig | undefined {
+		return this.constructor.prototype.__propertyDisplayConfigs__?.[key]
+	}
+
 	/**
 	 * Decorator to make a class a serializable config.
 	 */
@@ -316,4 +322,34 @@ export class SerializableConfig<
 			},
 		})
 	}
+
+	static configurePropertyDisplay(options: PropertyDisplayConfig) {
+		return ((target, key) => {
+			target.constructor.prototype.__propertyDisplayConfigs__ ??= {}
+			target.constructor.prototype.__propertyDisplayConfigs__[key] = options
+		}) satisfies PropertyDecorator
+	}
+}
+
+interface IPropertyDisplayConfig {
+	displayName: string
+}
+
+interface IPropertyDisplayConfigs {
+	select: IPropertyDisplayConfig & {
+		displayMode: 'select'
+		options: string[]
+	}
+	color: IPropertyDisplayConfig & {
+		displayMode: 'color'
+	}
+	checkbox: IPropertyDisplayConfig & {
+		displayMode: 'checkbox'
+	}
+	code_editor: IPropertyDisplayConfig & {
+		displayMode: 'code_editor'
+		syntax: string
+	}
 }
+
+export type PropertyDisplayConfig = IPropertyDisplayConfigs[keyof IPropertyDisplayConfigs]

src/ui/dialogs/bone-config/boneConfig.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
-	import Checkbox from '@svelte-components/dialog-items/checkbox.svelte'
-
+	
 	import { Valuable } from '../../../util/stores'
 	import { translate } from '../../../util/translation'
 
 	import { JsonText } from '@aj/systems/minecraft-temp/jsonText'
 	import { NbtCompound, NbtTag } from 'deepslate/lib/nbt'
-	import NodeConfigOption from './nodeConfigOption.svelte'
 
 	const IS_PLUGIN_MODE = Project?.animated_java?.environment === 'plugin'
 

src/ui/panels/display-panel/displayPanel.svelte

@@ -91,7 +91,7 @@
 			}}
 		>
 			{translate(
-				`panel.display.${selectedNode && Object.getPrototypeOf(selectedNode).constructor.type}.label`
+				`config.${selectedNode && Object.getPrototypeOf(selectedNode).constructor.type}.label`
 			)}
 		</p>
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -101,7 +101,7 @@
 				commonTabSelected = true
 			}}
 		>
-			{translate('panel.display.common.label')}
+			{translate('config.common.label')}
 		</p>
 	</div>
 
@@ -113,7 +113,7 @@
 						<li>
 							<div>
 								<div class="option-title">
-									{translate(`panel.display.common.options.${key}`)}
+									{translate(`config.common.options.${key}`)}
 								</div>
 								<div class="option-mode">{commonOptionModes.get(key)}</div>
 								<!-- svelte-ignore a11y-click-events-have-key-events -->

src/ui/panels/display-panel/index.ts

@@ -144,7 +144,7 @@ TEXT_DISPLAY_ALIGNMENT_SELECT.get = function () {
 	const selected = TextDisplay.selected[0]
 	if (!selected) return 'left'
 	const config = new TextDisplayConfig().fromJSON(selected.config)
-	return config.alignment
+	return config.alignment!
 }
 TEXT_DISPLAY_ALIGNMENT_SELECT.set = function (this: BarSelect<Alignment>, value: Alignment) {
 	const selected = TextDisplay.selected[0]

src/ui/panels/display-panel/textDisplayPage.svelte

@@ -51,7 +51,6 @@
 
 	import { TextDisplay } from '@aj/blockbench-additions/outliner-elements/textDisplay'
 	import { TextDisplayConfig } from '@aj/systems/node-configs'
-	import { translate } from '@aj/util/translation'
 	import { MODE_ICONS, type OptionMode } from '.'
 
 	export let textDisplay: TextDisplay
@@ -100,10 +99,11 @@
 
 <ul class="option-list">
 	{#each config.keys(true) as key}
+		{@const display = config.getPropertyDescription(key)}
 		<li>
 			<div>
 				<div class="option-title">
-					{translate(`panel.display.animated_java:text_display.options.${key}`)}
+					{display?.displayName}
 				</div>
 				<div class="option-mode">{OPTION_MODES.get(key)}</div>
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -115,9 +115,15 @@
 				</i>
 			</div>
 			{#if OPTION_MODES.get(key) === 'custom'}
-				<div class="option-value">
-					<input type="text" value={config[key]} />
-				</div>
+				{#if display?.displayMode === 'checkbox'}
+					<div class="option-value">
+						<input type="checkbox" checked={!!config[key]} />
+					</div>
+				{:else}
+					<div class="option-value">
+						<input type="text" value={config[key]} />
+					</div>
+				{/if}
 			{/if}
 		</li>
 	{/each}