🚧 Add item_display mode to Item Displays

Author: SnaveSutit

src/components/vanillaItemDisplayElementPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" context="module">
+	import { ITEM_DISPLAY_ITEM_DISPLAY_SELECT } from '../interface/vanillaItemDisplayElementPanel'
 	import { VanillaItemDisplay } from '../outliner/vanillaItemDisplay'
 	import { events } from '../util/events'
 	import { Valuable } from '../util/stores'
@@ -10,6 +11,7 @@
 
 	let item = new Valuable<string>('')
 	let error = new Valuable<string>('')
+	let itemDisplaySlot: HTMLDivElement
 	let visible = false
 
 	events.UPDATE_SELECTION.subscribe(() => {
@@ -22,8 +24,13 @@
 		}
 		item = selectedDisplay._item
 		error = selectedDisplay.error
+		ITEM_DISPLAY_ITEM_DISPLAY_SELECT.set(selectedDisplay.itemDisplay)
 		visible = true
 	})
+
+	requestAnimationFrame(() => {
+		itemDisplaySlot.appendChild(ITEM_DISPLAY_ITEM_DISPLAY_SELECT.node)
+	})
 </script>
 
 <p class="panel_toolbar_label label" style={!!visible ? '' : 'visibility:hidden; height: 0px;'}>
@@ -38,6 +45,7 @@
 	<div class="content" style="width: 95%;">
 		<input type="text" bind:value={$item} />
 	</div>
+	<div class="content" bind:this={itemDisplaySlot}></div>
 </div>
 
 <div
@@ -71,4 +79,7 @@
 		font-size: 14px;
 		color: var(--color-error);
 	}
+	.custom-toolbar :global([toolbar_item='animated_java:itemDisplayAlignmentSelect']) {
+		margin: 0px 2px !important;
+	}
 </style>

src/interface/vanillaItemDisplayElementPanel.ts

@@ -1,5 +1,9 @@
+import { isCurrentFormat } from '../blueprintFormat'
 import VanillaItemDisplayElementPanel from '../components/vanillaItemDisplayElementPanel.svelte'
+import { PACKAGE } from '../constants'
+import { VanillaItemDisplay } from '../outliner/vanillaItemDisplay'
 import { injectSvelteCompomponentMod } from '../util/injectSvelteComponent'
+import { translate } from '../util/translation'
 
 injectSvelteCompomponentMod({
 	component: VanillaItemDisplayElementPanel,
@@ -8,3 +12,51 @@ injectSvelteCompomponentMod({
 		return document.querySelector('#panel_element')
 	},
 })
+
+export const ITEM_DISPLAY_ITEM_DISPLAY_SELECT = new BarSelect(
+	`${PACKAGE.name}:itemDisplayAlignmentSelect`,
+	{
+		name: translate('tool.item_display.item_display.title'),
+		icon: 'format_align_left',
+		description: translate('tool.item_display.item_display.description'),
+		condition: () => isCurrentFormat() && !!VanillaItemDisplay.selected.length,
+		options: {
+			none: translate('tool.item_display.item_display.options.none'),
+			thirdperson_lefthand: translate(
+				'tool.item_display.item_display.options.thirdperson_lefthand'
+			),
+			thirdperson_righthand: translate(
+				'tool.item_display.item_display.options.thirdperson_righthand'
+			),
+			firstperson_lefthand: translate(
+				'tool.item_display.item_display.options.firstperson_lefthand'
+			),
+			firstperson_righthand: translate(
+				'tool.item_display.item_display.options.firstperson_righthand'
+			),
+			head: translate('tool.item_display.item_display.options.head'),
+			gui: translate('tool.item_display.item_display.options.gui'),
+			ground: translate('tool.item_display.item_display.options.ground'),
+			fixed: translate('tool.item_display.item_display.options.fixed'),
+		},
+	}
+)
+ITEM_DISPLAY_ITEM_DISPLAY_SELECT.get = function () {
+	const selected = VanillaItemDisplay.selected[0]
+	if (!selected) return 'left'
+	return selected.itemDisplay
+}
+ITEM_DISPLAY_ITEM_DISPLAY_SELECT.set = function (this: BarSelect<string>, value: string) {
+	const selected = VanillaItemDisplay.selected[0]
+	if (!selected) return this
+	this.value = value
+	const name = this.getNameFor(value)
+	this.nodes.forEach(node => {
+		$(node).find('bb-select').text(name)
+	})
+	if (!this.nodes.includes(this.node)) {
+		$(this.node).find('bb-select').text(name)
+	}
+	selected.itemDisplay = value
+	return this
+}

src/lang/en.yml

@@ -503,6 +503,17 @@ animated_java.tool.text_display.see_through.description: Whether or not the text
 # Item Display Panel
 animated_java.panel.vanilla_item_display.title: Displayed Item
 animated_java.panel.vanilla_item_display.description: The item to display.
+animated_java.tool.item_display.item_display.title: Item Display Mode
+animated_java.tool.item_display.item_display.description: Which item model transform to apply to the item (as defined in display field in model JSON).
+animated_java.tool.item_display.item_display.options.none: None
+animated_java.tool.item_display.item_display.options.thirdperson_lefthand: Third Person Left Hand
+animated_java.tool.item_display.item_display.options.thirdperson_righthand: Third Person Right Hand
+animated_java.tool.item_display.item_display.options.firstperson_lefthand: First Person Left Hand
+animated_java.tool.item_display.item_display.options.firstperson_righthand: First Person Right Hand
+animated_java.tool.item_display.item_display.options.head: Head
+animated_java.tool.item_display.item_display.options.gui: GUI
+animated_java.tool.item_display.item_display.options.ground: Ground
+animated_java.tool.item_display.item_display.options.fixed: Fixed
 
 # Block Display Panel
 animated_java.panel.vanilla_block_display.title: Displayed Block

src/outliner/vanillaItemDisplay.ts

@@ -17,6 +17,7 @@ import { VanillaBlockDisplay } from './vanillaBlockDisplay'
 interface VanillaItemDisplayOptions {
 	name?: string
 	item?: string
+	item_display?: string
 	position?: ArrayVector3
 	rotation?: ArrayVector3
 	scale?: ArrayVector3
@@ -34,6 +35,7 @@ export class VanillaItemDisplay extends ResizableOutlinerElement {
 
 	// Properties
 	public _item = new Valuable('minecraft:diamond')
+	public _itemDisplay = new Valuable('none')
 	public config: IBlueprintBoneConfigJSON
 
 	public error = new Valuable('')
@@ -63,6 +65,7 @@ export class VanillaItemDisplay extends ResizableOutlinerElement {
 		this.extend(data)
 
 		this.item ??= 'minecraft:diamond'
+		this.itemDisplay ??= 'none'
 		this.position ??= [0, 0, 0]
 		this.rotation ??= [0, 0, 0]
 		this.scale ??= [1, 1, 1]
@@ -106,6 +109,15 @@ export class VanillaItemDisplay extends ResizableOutlinerElement {
 		this._item.set(value)
 	}
 
+	get itemDisplay() {
+		if (this._itemDisplay === undefined) return 'none'
+		return this._itemDisplay.get()
+	}
+	set itemDisplay(value: string) {
+		if (this._itemDisplay === undefined) return
+		this._itemDisplay.set(value)
+	}
+
 	async waitForReady() {
 		while (!this.ready) {
 			await new Promise(resolve => setTimeout(resolve, 1000 / framespersecond))
@@ -210,6 +222,7 @@ export class VanillaItemDisplay extends ResizableOutlinerElement {
 	}
 }
 new Property(VanillaItemDisplay, 'string', 'item', { default: 'minecraft:diamond' })
+new Property(VanillaItemDisplay, 'string', 'item_display', { default: 'none' })
 new Property(VanillaItemDisplay, 'object', 'config', {
 	get default() {
 		return new BoneConfig().toJSON()

src/systems/rigRenderer.ts

@@ -127,6 +127,7 @@ export interface IRenderedNodes {
 	ItemDisplay: IRenderedNode & {
 		type: 'item_display'
 		item: string
+		itme_display: string
 		/**
 		 * The base scale of the bone, used to offset any rescaling done to the bone's model due to exceeding the 3x3x3 model size limit.
 		 */
@@ -443,6 +444,7 @@ function renderItemDisplay(display: VanillaItemDisplay, rig: IRenderedRig) {
 		uuid: display.uuid,
 		parent: parentId,
 		item: display.item,
+		itme_display: display.itemDisplay,
 		base_scale: 1,
 		config: display.config,
 		default_transform: {} as INodeTransform,