🐛 Fix: Changing item display properties does not update the project's saved flag

Also fixed incorrect property name for `itemDisplay` (`item_display`)

Author: SnaveSutit

src/components/vanillaItemDisplayElementPanel.svelte

@@ -1,19 +1,20 @@
-<script lang="ts" context="module">
+<script lang="ts">
 	import { ITEM_DISPLAY_ITEM_DISPLAY_SELECT } from '../interface/panel/vanillaItemDisplayElement'
 	import { VanillaItemDisplay } from '../outliner/vanillaItemDisplay'
 	import { events } from '../util/events'
 	import { Valuable } from '../util/stores'
 	import { translate } from '../util/translation'
-</script>
 
-<script lang="ts">
 	let selectedDisplay = VanillaItemDisplay.selected.at(0)
+	let lastSelected = selectedDisplay
 
 	let item = new Valuable<string>('')
 	let error = new Valuable<string>('')
 	let itemDisplaySlot: HTMLDivElement
 	let visible = false
 
+	let unsub: (() => void) | undefined
+
 	events.UPDATE_SELECTION.subscribe(() => {
 		selectedDisplay = VanillaItemDisplay.selected.at(0)
 		if (!selectedDisplay || selected.length > 1) {
@@ -22,10 +23,49 @@
 			visible = false
 			return
 		}
-		item = selectedDisplay._item
+		$item = selectedDisplay.item
+		error = selectedDisplay.error
+		visible = true
+	})
+
+	events.UPDATE_SELECTION.subscribe(() => {
+		unsub?.()
+
+		lastSelected = selectedDisplay
+		selectedDisplay = VanillaItemDisplay.selected.at(0)
+
+		if (!selectedDisplay) {
+			visible = false
+			return
+		}
+
+		$item = selectedDisplay.item
 		error = selectedDisplay.error
 		ITEM_DISPLAY_ITEM_DISPLAY_SELECT.set(selectedDisplay.itemDisplay)
 		visible = true
+
+		unsub = item.subscribe(value => {
+			if (selectedDisplay == undefined || selectedDisplay !== lastSelected) {
+				lastSelected = selectedDisplay
+				return
+			}
+			if (value === selectedDisplay.item) return
+
+			Undo.initEdit({ elements: VanillaItemDisplay.selected })
+
+			if (VanillaItemDisplay.selected.length > 1) {
+				for (const display of VanillaItemDisplay.selected) {
+					display.item = value
+				}
+			} else {
+				selectedDisplay.item = value
+			}
+			Project!.saved = false
+
+			Undo.finishEdit(`Change Item Display's Item to "${$item}"`, {
+				elements: VanillaItemDisplay.selected,
+			})
+		})
 	})
 
 	requestAnimationFrame(() => {

src/interface/panel/vanillaItemDisplayElement.ts

@@ -1,7 +1,8 @@
 import { isCurrentFormat } from '../../blueprintFormat'
 import VanillaItemDisplayElementPanel from '../../components/vanillaItemDisplayElementPanel.svelte'
 import { PACKAGE } from '../../constants'
-import { VanillaItemDisplay } from '../../outliner/vanillaItemDisplay'
+import { ItemDisplayMode, VanillaItemDisplay } from '../../outliner/vanillaItemDisplay'
+import { events } from '../../util/events'
 import { injectSvelteCompomponentMod } from '../../util/injectSvelteComponent'
 import { translate } from '../../util/translation'
 
@@ -46,8 +47,11 @@ ITEM_DISPLAY_ITEM_DISPLAY_SELECT.get = function () {
 	if (!selected) return 'left'
 	return selected.itemDisplay
 }
-ITEM_DISPLAY_ITEM_DISPLAY_SELECT.set = function (this: BarSelect<string>, value: string) {
-	const selected = VanillaItemDisplay.selected[0]
+ITEM_DISPLAY_ITEM_DISPLAY_SELECT.set = function (
+	this: BarSelect<ItemDisplayMode>,
+	value: ItemDisplayMode
+) {
+	const selected = VanillaItemDisplay.selected.at(0)
 	if (!selected) return this
 	this.value = value
 	const name = this.getNameFor(value)
@@ -57,6 +61,32 @@ ITEM_DISPLAY_ITEM_DISPLAY_SELECT.set = function (this: BarSelect<string>, value:
 	if (!this.nodes.includes(this.node)) {
 		$(this.node).find('bb-select').text(name)
 	}
-	selected.itemDisplay = value
+
+	if (selected.itemDisplay === value) return this
+
+	Undo.initEdit({ elements: VanillaItemDisplay.selected })
+	if (VanillaItemDisplay.selected.length > 1) {
+		for (const display of VanillaItemDisplay.selected) {
+			display.itemDisplay = value
+		}
+	} else {
+		selected.itemDisplay = value
+	}
+	Project!.saved = false
+	Undo.finishEdit(`Change Item Display Node's Item Display Mode to ${value}`, {
+		elements: VanillaItemDisplay.selected,
+	})
 	return this
 }
+function updateItemDisplaySelect() {
+	console.log('updateItemDisplaySelect')
+	let value = VanillaItemDisplay.selected.at(0)?.itemDisplay
+	value ??= 'none'
+	ITEM_DISPLAY_ITEM_DISPLAY_SELECT.set(value)
+}
+events.UNDO.subscribe(() => {
+	updateItemDisplaySelect()
+})
+events.REDO.subscribe(() => {
+	updateItemDisplaySelect()
+})

src/outliner/vanillaItemDisplay.ts

@@ -12,10 +12,21 @@ import { translate } from '../util/translation'
 import { ResizableOutlinerElement } from './resizableOutlinerElement'
 import { sanitizeOutlinerElementName } from './util'
 
+export type ItemDisplayMode =
+	| 'none'
+	| 'thirdperson_lefthand'
+	| 'thirdperson_righthand'
+	| 'firstperson_lefthand'
+	| 'firstperson_righthand'
+	| 'head'
+	| 'gui'
+	| 'ground'
+	| 'fixed'
+
 interface VanillaItemDisplayOptions {
 	name?: string
 	item?: string
-	item_display?: string
+	itemDisplay?: ItemDisplayMode
 	position?: ArrayVector3
 	rotation?: ArrayVector3
 	scale?: ArrayVector3
@@ -33,7 +44,7 @@ export class VanillaItemDisplay extends ResizableOutlinerElement {
 
 	// Properties
 	public _item = new Valuable('minecraft:diamond')
-	public _itemDisplay = new Valuable('none')
+	public _itemDisplay = new Valuable<ItemDisplayMode>('none')
 	public config: IBlueprintBoneConfigJSON
 
 	public error = new Valuable('')
@@ -111,7 +122,7 @@ export class VanillaItemDisplay extends ResizableOutlinerElement {
 		if (this._itemDisplay === undefined) return 'none'
 		return this._itemDisplay.get()
 	}
-	set itemDisplay(value: string) {
+	set itemDisplay(value: ItemDisplayMode) {
 		if (this._itemDisplay === undefined) return
 		this._itemDisplay.set(value)
 	}
@@ -191,7 +202,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, 'string', 'itemDisplay', { default: 'none' })
 new Property(VanillaItemDisplay, 'object', 'config', {
 	get default() {
 		return new BoneConfig().toJSON()