✨ Improve block display block input and undo history

Author: SnaveSutit

src/components/vanillaBlockDisplayElementPanel.svelte

@@ -1,80 +1,57 @@
 <script lang="ts" context="module">
+	import { validateBlock } from 'src/util/minecraftUtil'
 	import { VanillaBlockDisplay } from '../outliner/vanillaBlockDisplay'
-	import EVENTS from '../util/events'
-	import { Valuable } from '../util/stores'
 	import { translate } from '../util/translation'
 </script>
 
 <script lang="ts">
-	let selectedDisplay = VanillaBlockDisplay.selected.at(0)
-	let lastSelected = selectedDisplay
+	export let selected: VanillaBlockDisplay
 
-	let block = new Valuable<string>('')
-	let error = new Valuable<string>('')
-	let visible = false
+	let block = selected.block
+	let error = selected.error
 
-	let unsub: (() => void) | undefined
+	$: {
+		$error = ''
+		if (selected.block !== block) {
+			void validateBlock(block)
+				.then(err => {
+					if (err) {
+						$error = err
+						console.log('Block validation error:', err)
+						return
+					}
+					console.log('Changing block to', block)
+					Undo.initEdit({ elements: [selected] })
 
-	EVENTS.UPDATE_SELECTION.subscribe(() => {
-		unsub?.()
+					selected.block = block
+					Project!.saved = false
 
-		lastSelected = selectedDisplay
-		selectedDisplay = VanillaBlockDisplay.selected.at(0)
-
-		if (!selectedDisplay) {
-			visible = false
-			return
+					Undo.finishEdit(`Change Block Display Block to "${block}"`, {
+						elements: [selected],
+					})
+				})
+				.catch(err => {
+					$error = err.message
+				})
 		}
-
-		$block = selectedDisplay.block
-		error = selectedDisplay.error
-		visible = true
-
-		unsub = block.subscribe(value => {
-			if (selectedDisplay == undefined || selectedDisplay !== lastSelected) {
-				lastSelected = selectedDisplay
-				return
-			}
-			if (value === selectedDisplay.block) return
-
-			Undo.initEdit({ elements: VanillaBlockDisplay.selected })
-
-			if (VanillaBlockDisplay.selected.length > 1) {
-				for (const display of VanillaBlockDisplay.selected) {
-					display.block = value
-				}
-			} else {
-				selectedDisplay.block = value
-			}
-			Project!.saved = false
-
-			Undo.finishEdit(`Change Block Display Block to "${$block}"`, {
-				elements: VanillaBlockDisplay.selected,
-			})
-		})
-	})
+	}
 </script>
 
-<p class="panel_toolbar_label label" style={!!visible ? '' : 'visibility:hidden; height: 0px;'}>
+<p class="panel_toolbar_label label">
 	{translate('panel.vanilla_block_display.title')}
 </p>
 
-<div
-	class="toolbar custom-toolbar"
-	style={!!visible ? '' : 'visibility:hidden; height: 0px;'}
-	title={translate('panel.vanilla_block_display.description')}
->
+<div class="toolbar custom-toolbar" title={translate('panel.vanilla_block_display.description')}>
 	<div class="content" style="width: 95%;">
-		<input type="text" bind:value={$block} />
+		<input type="text" bind:value={block} />
 	</div>
 </div>
 
-<div
-	class="error"
-	style={!!$error ? '' : 'visibility:hidden; height: 0px; color: var(--color-error);'}
->
-	{$error}
-</div>
+{#if $error}
+	<div class="error">
+		{$error}
+	</div>
+{/if}
 
 <style>
 	input {

src/index.ts

@@ -39,7 +39,7 @@ import { JsonText } from './systems/jsonText'
 import * as assetManager from './systems/minecraft/assetManager'
 import { getLatestVersionClientDownloadUrl } from './systems/minecraft/assetManager'
 import * as blockModelManager from './systems/minecraft/blockModelManager'
-import { BLOCKSTATE_REGISTRY } from './systems/minecraft/blockstateManager'
+import { BLOCKSTATE_REGISTRY, getBlockState } from './systems/minecraft/blockstateManager'
 import { getVanillaFont } from './systems/minecraft/fontManager'
 import * as itemModelManager from './systems/minecraft/itemModelManager'
 import './systems/minecraft/registryManager'
@@ -109,6 +109,7 @@ const AnimatedJavaApi = {
 	},
 	TELLRAW,
 	JsonText,
+	getBlockState,
 }
 window.AnimatedJava = AnimatedJavaApi
 

src/interface/panel/vanillaBlockDisplayElement.ts

@@ -1,8 +1,45 @@
-import { registerMountSvelteComponentMod } from 'src/util/mountSvelteComponent'
+import { BLUEPRINT_FORMAT_ID } from 'src/formats/blueprint'
+import { VanillaBlockDisplay } from 'src/outliner/vanillaBlockDisplay'
+import EVENTS from 'src/util/events'
+import { registerProjectMod } from 'src/util/moddingTools'
+import { mountSvelteComponent } from 'src/util/mountSvelteComponent'
 import VanillaBlockDisplayElementPanel from '../../components/vanillaBlockDisplayElementPanel.svelte'
 
-registerMountSvelteComponentMod({
+let mounted: VanillaBlockDisplayElementPanel | null = null
+
+const destroyMounted = () => {
+	mounted?.$destroy()
+	mounted = null
+}
+
+const updatePanel = () => {
+	destroyMounted()
+	const blockDisplay = VanillaBlockDisplay.selected.at(0)
+	if (blockDisplay) {
+		mounted = mountSvelteComponent({
+			component: VanillaBlockDisplayElementPanel,
+			props: { selected: blockDisplay },
+			target: '#panel_element',
+		})
+	}
+}
+
+registerProjectMod({
 	id: 'animated-java:append-element-panel/vanilla-block-display',
-	component: VanillaBlockDisplayElementPanel,
-	target: '#panel_element',
+
+	condition: project => project.format.id === BLUEPRINT_FORMAT_ID,
+
+	apply: () => {
+		const unsubscribers = [
+			EVENTS.UNDO.subscribe(updatePanel),
+			EVENTS.REDO.subscribe(updatePanel),
+			EVENTS.UPDATE_SELECTION.subscribe(updatePanel),
+		]
+		return { unsubscribers }
+	},
+
+	revert: ({ unsubscribers }) => {
+		unsubscribers.forEach(u => u())
+		destroyMounted()
+	},
 })

src/mods/globalCssMod.css

@@ -15,3 +15,14 @@ dialog.dialog pre:has(code) {
 #collection_properties_vue > ul > li {
 	max-width: unset !important;
 }
+
+#edit_history_list ul li {
+	height: unset !important;
+}
+
+#edit_history_list > ul > li label {
+	margin-right: auto !important;
+	overflow-x: auto !important;
+	white-space: nowrap !important;
+	max-width: 75% !important;
+}

src/outliner/vanillaBlockDisplay.ts

@@ -5,9 +5,8 @@ import { BoneConfig } from '../nodeConfigs'
 import { BlockModelMesh, getBlockModel } from '../systems/minecraft/blockModelManager'
 import { type BlockStateValue, getBlockState } from '../systems/minecraft/blockstateManager'
 import { MINECRAFT_REGISTRY } from '../systems/minecraft/registryManager'
-import { getCurrentVersion } from '../systems/minecraft/versionManager'
 import EVENTS from '../util/events'
-import { parseBlock } from '../util/minecraftUtil'
+import { validateBlock } from '../util/minecraftUtil'
 import { Valuable } from '../util/stores'
 import { translate } from '../util/translation'
 import { ResizableOutlinerElement } from './resizableOutlinerElement'
@@ -61,31 +60,8 @@ export class VanillaBlockDisplay extends ResizableOutlinerElement {
 
 		this.sanitizeName()
 
-		const updateBlock = async (newBlock: string) => {
-			if (!MINECRAFT_REGISTRY.block) {
-				requestAnimationFrame(() => void updateBlock(newBlock))
-				return
-			}
-			const parsed = await parseBlock(newBlock)
-			if (!parsed) {
-				this.error.set('Invalid block ID.')
-			} else if (
-				(parsed.resource.namespace === 'minecraft' || parsed.resource.namespace === '') &&
-				MINECRAFT_REGISTRY.block.has(parsed.resource.name)
-			) {
-				this.error.set('')
-				this.preview_controller.updateGeometry(this)
-			} else {
-				this.error.set(`This block does not exist in Minecraft ${getCurrentVersion()!.id}.`)
-			}
-			if (this.mesh?.outline instanceof THREE.LineSegments) {
-				if (this.error.get()) this.mesh.outline.material = ERROR_OUTLINE_MATERIAL
-				else this.mesh.outline.material = Canvas.outlineMaterial
-			}
-		}
-
-		this.__block.subscribe(value => {
-			void updateBlock(value)
+		this.__block.subscribe(() => {
+			void this.updateBlock()
 		})
 	}
 
@@ -99,6 +75,10 @@ export class VanillaBlockDisplay extends ResizableOutlinerElement {
 		this.__block.set(value)
 	}
 
+	getBlockValuable() {
+		return this.__block
+	}
+
 	sanitizeName(): string {
 		this.name = sanitizeOutlinerElementName(this.name, this.uuid)
 		return this.name
@@ -164,6 +144,19 @@ export class VanillaBlockDisplay extends ResizableOutlinerElement {
 		this.preview_controller.updateHighlight(this)
 	}
 
+	async updateBlock() {
+		const error = await validateBlock(this.block)
+		if (error) {
+			this.error.set(error)
+			if (this.mesh?.outline instanceof THREE.LineSegments) {
+				if (this.error.get()) this.mesh.outline.material = ERROR_OUTLINE_MATERIAL
+				else this.mesh.outline.material = Canvas.outlineMaterial
+			}
+			return
+		}
+		this.preview_controller.updateGeometry(this)
+	}
+
 	applyBlockModel(blockModel: BlockModelMesh) {
 		const mesh = this.mesh as THREE.Mesh
 		mesh.name = this.uuid
@@ -180,7 +173,6 @@ export class VanillaBlockDisplay extends ResizableOutlinerElement {
 		this.preview_controller.updateHighlight(this)
 		this.preview_controller.updateTransform(this)
 		mesh.visible = this.visibility
-		TickUpdates.selection = true
 	}
 }
 VanillaBlockDisplay.prototype.icon = VanillaBlockDisplay.icon
@@ -223,10 +215,9 @@ export const PREVIEW_CONTROLLER = new NodePreviewController(VanillaBlockDisplay,
 			.then(result => {
 				if (!result?.mesh) return
 				el.applyBlockModel(result)
-				TickUpdates.selection = true
 			})
 			.catch(err => {
-				console.error(err)
+				console.error('Failed to get block model:', err)
 				if (typeof err.message === 'string') {
 					el.error.set(err.message as string)
 				}

src/systems/minecraft/blockModelManager.ts

@@ -51,7 +51,6 @@ export async function getBlockModel(block: string): Promise<BlockModelMesh | und
 	await assetsLoaded()
 	let result = BLOCK_MODEL_CACHE.get(block)
 	if (!result) {
-		// console.warn(`Found no cached item model mesh for '${block}'`)
 		const parsed = await parseBlock(block)
 		if (!parsed) return undefined
 		if (BLACKLISTED_BLOCKS.has(block)) {
@@ -404,6 +403,31 @@ async function loadTexture(textures: IBlockModel['textures'], key: string): Prom
 	return texture
 }
 
+export function validateBlockState(block: IParsedBlock) {
+	if (!block.blockStateRegistryEntry) {
+		if (Object.keys(block.states).length > 0) {
+			return `${block.resource.name} has no block states`
+		}
+	} else {
+		for (const [k, v] of Object.entries(block.states)) {
+			if (!block.blockStateRegistryEntry.stateValues[k]) {
+				return (
+					`Invalid block state '${k}' for '${block.resource.name}'` +
+					` Expected one of: ${Object.keys(
+						block.blockStateRegistryEntry.stateValues
+					).join(', ')}`
+				)
+			} else if (!block.blockStateRegistryEntry.stateValues[k].includes(v)) {
+				return (
+					`Invalid block state value '${v.toString()}' for '${k}'.` +
+					` Expected one of: ${block.blockStateRegistryEntry.stateValues[k].join(', ')}`
+				)
+			}
+		}
+	}
+	return ''
+}
+
 export async function parseBlockState(block: IParsedBlock): Promise<BlockModelMesh> {
 	const path = getPathFromResourceLocation(block.resourceLocation, 'blockstates')
 	const blockstate = (await getJSONAsset(path + '.json')) as IBlockState

src/util/minecraftUtil.ts

@@ -1,4 +1,8 @@
 import * as pathjs from 'path'
+import { assetsLoaded } from 'src/systems/minecraft/assetManager'
+import { validateBlockState } from 'src/systems/minecraft/blockModelManager'
+import { MINECRAFT_REGISTRY } from 'src/systems/minecraft/registryManager'
+import { getCurrentVersion } from 'src/systems/minecraft/versionManager'
 import { SUPPORTED_MINECRAFT_VERSIONS } from '../systems/global'
 import {
 	BlockStateRegistryEntry,
@@ -259,6 +263,21 @@ export interface IParsedBlock {
 	blockStateRegistryEntry: BlockStateRegistryEntry | undefined
 }
 
+export async function validateBlock(block: string) {
+	if (!MINECRAFT_REGISTRY.block) await assetsLoaded()
+	const parsed = await parseBlock(block)
+	if (!parsed) {
+		return 'Invalid block ID.'
+	} else if (
+		(parsed.resource.namespace === 'minecraft' || parsed.resource.namespace === '') &&
+		MINECRAFT_REGISTRY.block.has(parsed.resource.name)
+	) {
+		return validateBlockState(parsed)
+	} else {
+		return `This block does not exist in Minecraft ${getCurrentVersion()!.id}.`
+	}
+}
+
 export async function parseBlock(block: string): Promise<IParsedBlock | undefined> {
 	const states: Record<string, ReturnType<typeof resolveBlockstateValueType>> = {}
 	if (block.includes('[')) {