🚧 Fix multi-blueprint loading issues ( #207 )

Author: SnaveSutit

src/blockbenchTypeMods.d.ts

@@ -39,6 +39,8 @@ declare global {
 		textDisplays: TextDisplay[]
 		vanillaItemDisplays: VanillaItemDisplay[]
 		vanillaBlockDisplays: VanillaBlockDisplay[]
+
+		loadingPromises?: Array<Promise<unknown>>
 	}
 
 	// eslint-disable-next-line @typescript-eslint/naming-convention

src/blueprintFormat.ts

@@ -220,6 +220,8 @@ export const BLUEPRINT_CODEC = new Blockbench.Codec('animated_java_blueprint', {
 		console.log(`Parsing Animated Java Blueprint from '${path}'...`)
 		if (!Project) throw new Error('No project to parse into')
 
+		Project.loadingPromises = []
+
 		Project.save_path = model.meta.save_location || path
 
 		if (model.meta.box_uv !== undefined) {
@@ -268,22 +270,32 @@ export const BLUEPRINT_CODEC = new Blockbench.Codec('animated_java_blueprint', {
 			const defaultTexture = Texture.getDefault()
 			for (const element of model.elements) {
 				const newElement = OutlinerElement.fromSave(element, true)
-				if (newElement instanceof Cube) {
-					for (const face in newElement.faces) {
-						if (element.faces) {
-							const texture =
-								element.faces[face].texture !== undefined &&
-								Texture.all[element.faces[face].texture]
-							if (texture) {
-								newElement.faces[face].texture = texture.uuid
+				switch (true) {
+					case newElement instanceof Cube: {
+						for (const face in newElement.faces) {
+							if (element.faces) {
+								const texture =
+									element.faces[face].texture !== undefined &&
+									Texture.all[element.faces[face].texture]
+								if (texture) {
+									newElement.faces[face].texture = texture.uuid
+								}
+							} else if (
+								defaultTexture &&
+								newElement.faces &&
+								newElement.faces[face].texture !== undefined
+							) {
+								newElement.faces[face].texture = defaultTexture.uuid
 							}
-						} else if (
-							defaultTexture &&
-							newElement.faces &&
-							newElement.faces[face].texture !== undefined
-						) {
-							newElement.faces[face].texture = defaultTexture.uuid
 						}
+						break
+					}
+					case newElement instanceof AnimatedJava.API.TextDisplay:
+					case newElement instanceof AnimatedJava.API.VanillaItemDisplay:
+					case newElement instanceof AnimatedJava.API.VanillaBlockDisplay: {
+						// ES-Lint doesn't like the types here for some reason, so I'm casing them to please it.
+						Project.loadingPromises.push(newElement.waitForReady() as Promise<void>)
+						break
 					}
 				}
 			}
@@ -537,39 +549,51 @@ export const BLUEPRINT_FORMAT = new Blockbench.ModelFormat({
 			}
 		}
 
+		const thisProject = Project
 		Project.variants ??= []
 		Project.last_used_export_namespace = Project.animated_java.export_namespace
 		const updateBoundingBoxIntervalId = setInterval(() => {
 			updateBoundingBox()
 		}, 500)
 		events.UNLOAD.subscribe(() => clearInterval(updateBoundingBoxIntervalId), true)
 		events.UNINSTALL.subscribe(() => clearInterval(updateBoundingBoxIntervalId), true)
-		requestAnimationFrame(() => {
-			Project!.pluginMode = new Valuable(Project!.animated_java.enable_plugin_mode)
-			// Remove the default title
-			const element = document.querySelector('#tab_bar_list .icon-armor_stand.icon')
-			element?.remove()
-			// Custom title
-			void injectSvelteCompomponent({
-				elementSelector: () => {
-					const titles = [
-						...document.querySelectorAll(`.project_tab[title="${project.name}"]`),
-					]
-					if (titles.length) {
-						return titles[0]
-					}
-				},
-				prepend: true,
-				svelteComponent: ProjectTitleSvelte,
-				svelteComponentProperties: { pluginMode: Project!.pluginMode },
-			})
 
-			Project!.materials[TRANSPARENT_TEXTURE.uuid] = TRANSPARENT_TEXTURE_MATERIAL
-			TRANSPARENT_TEXTURE.updateMaterial()
+		thisProject.materials[TRANSPARENT_TEXTURE.uuid] = TRANSPARENT_TEXTURE_MATERIAL
+		TRANSPARENT_TEXTURE.updateMaterial()
 
-			if (Variant.all.length === 0) new Variant('Default', true)
-			Variant.selectDefault()
-		})
+		Project.loadingPromises ??= []
+		Project.loadingPromises.push(
+			new Promise<void>(resolve => {
+				requestAnimationFrame(() => {
+					thisProject.pluginMode = new Valuable(
+						thisProject.animated_java.enable_plugin_mode
+					)
+					// Remove the default title
+					const element = document.querySelector('#tab_bar_list .icon-armor_stand.icon')
+					element?.remove()
+					// Custom title
+					void injectSvelteCompomponent({
+						elementSelector: () => {
+							const titles = [
+								...document.querySelectorAll(
+									`.project_tab[title="${project.name}"]`
+								),
+							]
+							if (titles.length) {
+								return titles[0]
+							}
+						},
+						prepend: true,
+						svelteComponent: ProjectTitleSvelte,
+						svelteComponentProperties: { pluginMode: thisProject.pluginMode },
+					})
+
+					if (Variant.all.length === 0) new Variant('Default', true)
+					Variant.selectDefault()
+				})
+				resolve()
+			})
+		)
 	},
 
 	onActivation() {

src/components/blueprintLoadingPopup.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" context="module">
+	import ArmorStandRunningGif from '../assets/armor_stand_running.webp'
+	import { Valuable } from '../util/stores'
+</script>
+
+<script lang="ts">
+	export let progress: Valuable<number>
+	export let maxProgress: Valuable<number>
+</script>
+
+<div>
+	<progress value={$progress} max={$maxProgress} />
+	<!-- svelte-ignore a11y-missing-attribute -->
+	<img src={ArmorStandRunningGif} width="64" />
+</div>
+
+<style>
+	div {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	img {
+		margin-left: 16px;
+	}
+	progress {
+		flex-grow: 1;
+	}
+</style>

src/index.ts

@@ -44,6 +44,7 @@ import './mods/saveProjectAsActionMod'
 import './mods/variantPreviewCubeFaceMod'
 import './mods/showDefaultPoseMod'
 import './mods/addLocatorActionMod'
+import './mods/blockbenchReadMod'
 // Outliner
 import './outliner/textDisplay'
 import './outliner/vanillaItemDisplay'
@@ -81,6 +82,7 @@ import { VanillaItemDisplay } from './outliner/vanillaItemDisplay'
 import { VanillaBlockDisplay, debugBlockState, debugBlocks } from './outliner/vanillaBlockDisplay'
 import { BLOCKSTATE_REGISTRY } from './systems/minecraft/blockstateManager'
 import { exportProject } from './systems/exporter'
+import { openBlueprintLoadingDialog } from './interface/blueprintLoadingPopup'
 
 // Show loading popup
 void showLoadingPopup().then(async () => {
@@ -135,6 +137,7 @@ globalThis.AnimatedJava = {
 		debugBlockState,
 		BLOCKSTATE_REGISTRY,
 		exportProject,
+		openBlueprintLoadingDialog,
 	},
 }
 

src/interface/blueprintLoadingPopup.ts

@@ -0,0 +1,36 @@
+import BlueprintLoadingPopup from '../components/blueprintLoadingPopup.svelte'
+import { PACKAGE } from '../constants'
+import { Valuable } from '../util/stores'
+import { SvelteDialog } from '../util/svelteDialog'
+import { translate } from '../util/translation'
+
+export const PROGRESS = new Valuable(0)
+export const MAX_PROGRESS = new Valuable(1)
+
+let instance: SvelteDialog | null = null
+
+export function openBlueprintLoadingDialog() {
+	PROGRESS.set(0)
+	MAX_PROGRESS.set(1)
+
+	instance = new SvelteDialog({
+		id: `${PACKAGE.name}:blueprintLoadingPopup`,
+		title: translate('dialog.blueprint_loading.title'),
+		width: 128,
+		svelteComponent: BlueprintLoadingPopup,
+		svelteComponentProperties: {
+			progress: PROGRESS,
+			maxProgress: MAX_PROGRESS,
+		},
+		preventKeybinds: true,
+		buttons: [],
+	}).show()
+	return dialog
+}
+
+export function closeBlueprintLoadingDialog() {
+	if (instance) {
+		instance.close(0)
+	}
+	instance = null
+}

src/lang/en.yml

@@ -366,6 +366,9 @@ animated_java.dialog.animation_properties.swap_columns_button.tooltip: Swap List
 ## Export Progress Dialog
 animated_java.dialog.export_progress.title: Exporting...
 
+## Blueprint Loading Dialog
+animated_java.dialog.blueprint_loading.title: Loading Blueprint...
+
 ### Panels
 
 ## Variants Panel

src/mods/blockbenchReadMod.ts

@@ -0,0 +1,55 @@
+import { PACKAGE } from '../constants'
+import {
+	closeBlueprintLoadingDialog,
+	openBlueprintLoadingDialog,
+	PROGRESS,
+} from '../interface/blueprintLoadingPopup'
+import { createBlockbenchMod } from '../util/moddingTools'
+
+createBlockbenchMod(
+	`${PACKAGE.name}:blockbenchReadMod`,
+	{
+		original: Blockbench.read,
+	},
+	context => {
+		async function asyncRead(
+			files: Parameters<typeof Blockbench.read>['0'],
+			options: Parameters<typeof Blockbench.read>['1'],
+			cb: Parameters<typeof Blockbench.read>['2']
+		) {
+			for (const file of files) {
+				context.original([file], options, cb)
+				await new Promise<void>(r => {
+					if (Project?.loadingPromises) {
+						openBlueprintLoadingDialog()
+						const promises: Array<Promise<unknown>> = []
+						for (const promise of Project.loadingPromises) {
+							promises.push(
+								new Promise<void>(r => {
+									promise.finally(() => {
+										PROGRESS.set(PROGRESS.get() + 1)
+										r()
+									})
+								})
+							)
+						}
+						void Promise.all(promises).finally(() => {
+							closeBlueprintLoadingDialog()
+							r()
+						})
+						return
+					}
+					r()
+				})
+			}
+		}
+
+		Blockbench.read = function (files, options, cb) {
+			void asyncRead(files, options, cb).catch(console.error)
+		}
+		return context
+	},
+	context => {
+		Blockbench.read = context.original
+	}
+)

src/outliner/textDisplay.ts

@@ -317,7 +317,7 @@ export class TextDisplay extends ResizableOutlinerElement {
 
 	async waitForReady() {
 		while (!this.ready) {
-			await new Promise(resolve => setTimeout(resolve, 100))
+			await new Promise(resolve => setTimeout(resolve, 1000 / framespersecond))
 		}
 	}
 

src/outliner/vanillaBlockDisplay.ts

@@ -53,6 +53,8 @@ export class VanillaBlockDisplay extends ResizableOutlinerElement {
 	// eslint-disable-next-line @typescript-eslint/naming-convention
 	public preview_controller = PREVIEW_CONTROLLER
 
+	public ready = false
+
 	constructor(data: VanillaBlockDisplayOptions, uuid = guid()) {
 		super(data, uuid)
 		VanillaBlockDisplay.all.push(this)
@@ -105,6 +107,12 @@ export class VanillaBlockDisplay extends ResizableOutlinerElement {
 		this._block.set(value)
 	}
 
+	async waitForReady() {
+		while (!this.ready) {
+			await new Promise(resolve => setTimeout(resolve, 1000 / framespersecond))
+		}
+	}
+
 	public sanitizeName(): string {
 		this.name = toSafeFuntionName(this.name)
 		const otherNodes = [
@@ -232,6 +240,8 @@ export const PREVIEW_CONTROLLER = new NodePreviewController(VanillaBlockDisplay,
 				el.preview_controller.updateTransform(el)
 				el.mesh.visible = el.visibility
 				TickUpdates.selection = true
+
+				el.ready = true
 			})
 			.catch(err => {
 				console.error(err)

src/outliner/vanillaItemDisplay.ts

@@ -49,6 +49,8 @@ export class VanillaItemDisplay extends ResizableOutlinerElement {
 	// eslint-disable-next-line @typescript-eslint/naming-convention
 	public preview_controller = PREVIEW_CONTROLLER
 
+	public ready = false
+
 	constructor(data: VanillaItemDisplayOptions, uuid = guid()) {
 		super(data, uuid)
 		VanillaItemDisplay.all.push(this)
@@ -104,6 +106,12 @@ export class VanillaItemDisplay extends ResizableOutlinerElement {
 		this._item.set(value)
 	}
 
+	async waitForReady() {
+		while (!this.ready) {
+			await new Promise(resolve => setTimeout(resolve, 1000 / framespersecond))
+		}
+	}
+
 	public sanitizeName(): string {
 		this.name = toSafeFuntionName(this.name)
 		const otherNodes = [
@@ -229,6 +237,8 @@ export const PREVIEW_CONTROLLER = new NodePreviewController(VanillaItemDisplay,
 				el.preview_controller.updateTransform(el)
 				el.mesh.visible = el.visibility
 				TickUpdates.selection = true
+
+				el.ready = true
 			})
 			.catch(err => {
 				if (typeof err.message === 'string') {