🚧 Text Display Improvements / Fixes

- Added #234
- Fixed text displays not saving or exporting `shadow` toggle.
- Fixed text displays not saving or exporting `background`.

Author: SnaveSutit

src/components/textDisplayElementPanel.svelte

@@ -8,6 +8,7 @@
 		TEXT_DISPLAY_BACKGROUND_COLOR_PICKER,
 		TEXT_DISPLAY_SHADOW_TOGGLE,
 		TEXT_DISPLAY_ALIGNMENT_SELECT,
+		TEXT_DISPLAY_SEE_THROUGH_TOGGLE,
 	} from '../interface/textDisplayElementPanel'
 	import { floatToHex } from '../util/misc'
 	import { translate } from '../util/translation'
@@ -30,6 +31,7 @@
 	let backgroundColorSlot: HTMLDivElement
 	let shadowSlot: HTMLDivElement
 	let alignmentSlot: HTMLDivElement
+	let seeThroughSlot: HTMLDivElement
 	let codeJar: CodeJar
 
 	events.UPDATE_SELECTION.subscribe(() => {
@@ -46,13 +48,15 @@
 		TEXT_DISPLAY_BACKGROUND_COLOR_PICKER.set(color)
 		TEXT_DISPLAY_SHADOW_TOGGLE.set(selected.shadow)
 		TEXT_DISPLAY_ALIGNMENT_SELECT.set(selected.align)
+		TEXT_DISPLAY_SEE_THROUGH_TOGGLE.set(selected.seeThrough)
 	})
 
 	requestAnimationFrame(() => {
 		lineWidthSlot.appendChild(TEXT_DISPLAY_WIDTH_SLIDER.node)
 		backgroundColorSlot.appendChild(TEXT_DISPLAY_BACKGROUND_COLOR_PICKER.node)
 		shadowSlot.appendChild(TEXT_DISPLAY_SHADOW_TOGGLE.node)
 		alignmentSlot.appendChild(TEXT_DISPLAY_ALIGNMENT_SELECT.node)
+		seeThroughSlot.appendChild(TEXT_DISPLAY_SEE_THROUGH_TOGGLE.node)
 		forceNoWrap()
 	})
 
@@ -72,6 +76,7 @@
 	<div class="content" bind:this={backgroundColorSlot}></div>
 	<div class="content" bind:this={shadowSlot}></div>
 	<div class="content" bind:this={alignmentSlot}></div>
+	<div class="content" bind:this={seeThroughSlot}></div>
 </div>
 
 <div

src/interface/textDisplayElementPanel.ts

@@ -68,8 +68,7 @@ TEXT_DISPLAY_BACKGROUND_COLOR_PICKER.set = function (this: ColorPicker, color: s
 }
 TEXT_DISPLAY_BACKGROUND_COLOR_PICKER.change = function (
 	this: ColorPicker,
-	// @ts-ignore
-	color: tinycolor.Instance
+	color: InstanceType<typeof tinycolor>
 ) {
 	const selected = TextDisplay.selected[0]
 	if (!selected) return this
@@ -133,3 +132,28 @@ TEXT_DISPLAY_ALIGNMENT_SELECT.set = function (this: BarSelect<Alignment>, value:
 	selected.align = value
 	return this
 }
+
+export const TEXT_DISPLAY_SEE_THROUGH_TOGGLE = new Toggle(
+	`${PACKAGE.name}:textDisplaySeeThroughToggle`,
+	{
+		name: translate('tool.text_display.see_through.title'),
+		icon: 'check_box_outline_blank',
+		description: translate('tool.text_display.see_through.description'),
+		condition: () => isCurrentFormat() && !!TextDisplay.selected.length,
+		click() {
+			//
+		},
+		onChange() {
+			const scope = TEXT_DISPLAY_SEE_THROUGH_TOGGLE
+			scope.setIcon(scope.value ? 'check_box' : 'check_box_outline_blank')
+			const selected = TextDisplay.selected[0]
+			if (!selected) return
+			selected.seeThrough = TEXT_DISPLAY_SEE_THROUGH_TOGGLE.value
+		},
+	}
+)
+TEXT_DISPLAY_SEE_THROUGH_TOGGLE.set = function (value) {
+	if (this.value === value) return this
+	this.click()
+	return this
+}

src/lang/en.yml

@@ -486,6 +486,9 @@ animated_java.tool.text_display.text_alignment.options.left: Left
 animated_java.tool.text_display.text_alignment.options.center: Center
 animated_java.tool.text_display.text_alignment.options.right: Right
 
+animated_java.tool.text_display.see_through.title: See Through
+animated_java.tool.text_display.see_through.description: Whether or not the text display should be visible through blocks.
+
 # Vanilla Item Display Panel
 animated_java.panel.vanilla_item_display.title: Displayed Item
 animated_java.panel.vanilla_item_display.description: The item to display.

src/outliner/textDisplay.ts

@@ -71,6 +71,7 @@ export class TextDisplay extends ResizableOutlinerElement {
 	private _newShadow: boolean | undefined
 	private _align = new Valuable<Alignment>('center')
 	private _newAlign: Alignment | undefined
+	public seeThrough = false
 
 	constructor(data: TextDisplayOptions, uuid = guid()) {
 		super(data, uuid)
@@ -367,11 +368,14 @@ new Property(TextDisplay, 'number', 'lineWidth', { default: 200 })
 new Property(TextDisplay, 'string', 'backgroundColor', { default: '#000000' })
 new Property(TextDisplay, 'number', 'backgroundAlpha', { default: 0.25 })
 new Property(TextDisplay, 'string', 'align', { default: 'center' })
+new Property(TextDisplay, 'boolean', 'shadow', { default: false })
+new Property(TextDisplay, 'boolean', 'seeThrough', { default: false })
 new Property(TextDisplay, 'object', 'config', {
 	get default() {
 		return new TextDisplayConfig().toJSON()
 	},
 })
+
 OutlinerElement.registerType(TextDisplay, TextDisplay.type)
 
 export const PREVIEW_CONTROLLER = new NodePreviewController(TextDisplay, {

src/systems/datapackCompiler.ts

@@ -5,7 +5,7 @@ import animationMcb from './datapackCompiler/animation.mcb'
 import { AnyRenderedNode, IRenderedRig } from './rigRenderer'
 import { IRenderedAnimation } from './animationRenderer'
 import { Variant } from '../variants'
-import { NbtCompound, NbtFloat, NbtInt, NbtList, NbtString } from 'deepslate/lib/nbt'
+import { NbtByte, NbtCompound, NbtFloat, NbtInt, NbtList, NbtString } from 'deepslate/lib/nbt'
 import {
 	arrayToNbtFloatArray,
 	matrixToNbtFloatArray,
@@ -24,7 +24,7 @@ import {
 } from '../util/minecraftUtil'
 import { JsonText } from './minecraft/jsonText'
 import { MAX_PROGRESS, PROGRESS, PROGRESS_DESCRIPTION } from '../interface/exportProgressDialog'
-import { eulerFromQuaternion, roundTo } from '../util/misc'
+import { eulerFromQuaternion, floatToHex, roundTo, tinycolorToDecimal } from '../util/misc'
 import { setTimeout } from 'timers'
 import { MSLimiter } from '../util/msLimiter'
 
@@ -316,7 +316,12 @@ async function generateRootEntityPassengers(rig: IRenderedRig, rigHash: string)
 					'text',
 					new NbtString(node.text ? node.text.toString() : '"Invalid Text Component"')
 				)
+
+				const color = new tinycolor(node.backgroundColor + floatToHex(node.backgroundAlpha))
+				passenger.set('background', new NbtInt(tinycolorToDecimal(color)))
 				passenger.set('line_width', new NbtInt(node.lineWidth))
+				passenger.set('shadow', new NbtByte(node.shadow ? 1 : 0))
+				passenger.set('see_through', new NbtByte(node.seeThrough ? 1 : 0))
 
 				if (node.config) {
 					TextDisplayConfig.fromJSON(node.config).toNBT(passenger)

src/systems/rigRenderer.ts

@@ -119,6 +119,8 @@ export interface IRenderedNodes {
 		backgroundColor: string
 		backgroundAlpha: number
 		align: Alignment
+		shadow: boolean
+		seeThrough: boolean
 		scale: number
 		config?: IBlueprintTextDisplayConfigJSON
 	}
@@ -520,6 +522,8 @@ function renderTextDisplay(display: TextDisplay, rig: IRenderedRig): INodeStruct
 		backgroundColor: display.backgroundColor,
 		backgroundAlpha: display.backgroundAlpha,
 		align: display.align,
+		shadow: display.shadow,
+		seeThrough: display.seeThrough,
 		scale: 1,
 		config: display.config,
 	}

src/util/misc.ts

@@ -44,6 +44,11 @@ export function floatToHex(n: number) {
 		.padStart(2, '0')
 }
 
+export function tinycolorToDecimal(color: InstanceType<typeof tinycolor>) {
+	const rgba = color.toRgb()
+	return ((rgba.a * 255) << 24) | (rgba.r << 16) | (rgba.g << 8) | rgba.b
+}
+
 export function makeNotZero(vec: THREE.Vector3 | THREE.Euler) {
 	if (vec.x === 0) vec.x = 0.00001
 	if (vec.y === 0) vec.y = 0.00001

test_blueprints/armor_stand.ajblueprint

@@ -847,6 +847,25 @@
 			},
 			"uuid": "7747736f-85e2-338f-207e-53f8d3d2fa39",
 			"type": "locator"
+		},
+		{
+			"name": "text_display",
+			"position": [0, 38, 0],
+			"rotation": [0, 0, 0],
+			"scale": [1, 1, 1],
+			"visibility": true,
+			"item": "minecraft:diamond",
+			"config": {},
+			"block": "minecraft:stone",
+			"text": "\"Armor Stand\"",
+			"lineWidth": 200,
+			"backgroundColor": "#c91515",
+			"backgroundAlpha": 0.51,
+			"align": "center",
+			"shadow": true,
+			"seeThrough": true,
+			"uuid": "c2e217f1-b50a-5c9a-b342-71a35e984046",
+			"type": "animated_java:text_display"
 		}
 	],
 	"outliner": [
@@ -1355,7 +1374,8 @@
 			"visibility": true,
 			"autouv": 0,
 			"children": []
-		}
+		},
+		"c2e217f1-b50a-5c9a-b342-71a35e984046"
 	],
 	"textures": [
 		{