🚧 Improve some types, and fix some dialog issues

SnaveSutit · SnaveSutit · commit df55e43bb284 · 2024-07-15T13:44:41.000-04:00
diff --git a/src/blueprintFormat.ts b/src/blueprintFormat.ts
@@ -3,7 +3,7 @@ import { BillboardMode, BoneConfig, LocatorConfig } from './nodeConfigs'
 import ProjectTitleSvelte from './components/projectTitle.svelte'
 import { PACKAGE } from './constants'
 import { events } from './util/events'
-import { injectSvelteCompomponent } from './util/injectSvelte'
+import { injectSvelteCompomponent } from './util/injectSvelteComponent'
 import { toSafeFuntionName } from './util/minecraftUtil'
 import { addProjectToRecentProjects } from './util/misc'
 import { Valuable } from './util/stores'
@@ -527,8 +527,8 @@ export const BLUEPRINT_FORMAT = new Blockbench.ModelFormat({
 			created() {
 				void injectSvelteCompomponent({
 					elementSelector: () => $('#format_page_animated_java_blueprint_mount')[0],
-					svelteComponent: FormatPageSvelte,
-					svelteComponentProperties: { format: BLUEPRINT_FORMAT },
+					component: FormatPageSvelte,
+					props: {},
 				})
 			},
 			template: `<div id="format_page_animated_java_blueprint_mount" style="display: flex; flex-direction: column; flex-grow: 1;"></div>`,
@@ -585,8 +585,8 @@ export const BLUEPRINT_FORMAT = new Blockbench.ModelFormat({
 							}
 						},
 						prepend: true,
-						svelteComponent: ProjectTitleSvelte,
-						svelteComponentProperties: { pluginMode: thisProject.pluginMode },
+						component: ProjectTitleSvelte,
+						props: { pluginMode: thisProject.pluginMode },
 					})
 
 					if (Variant.all.length === 0) new Variant('Default', true)
diff --git a/src/interface/aboutDialog.ts b/src/interface/aboutDialog.ts
@@ -8,8 +8,8 @@ export function openAboutDialog() {
 		id: `${PACKAGE.name}:aboutDialog`,
 		title: translate('dialog.about.title'),
 		width: 700,
-		svelteComponent: AboutSvelte,
-		svelteComponentProperties: {},
+		component: AboutSvelte,
+		props: {},
 		buttons: [translate('dialog.about.close_button')],
 		preventKeybinds: true,
 	}).show()
diff --git a/src/interface/animatedJavaLoadingPopup.ts b/src/interface/animatedJavaLoadingPopup.ts
@@ -1,6 +1,6 @@
 import { SvelteComponent } from 'svelte'
 import AnimatedJavaLoadingPopup from '../components/animatedJavaLoadingPopup.svelte'
-import { injectSvelteCompomponent } from '../util/injectSvelte'
+import { injectSvelteCompomponent } from '../util/injectSvelteComponent'
 import { Valuable } from '../util/stores'
 
 const LOADED = new Valuable(false)
@@ -10,8 +10,8 @@ let activeComponent: SvelteComponent | undefined
 export async function showLoadingPopup() {
 	if (activeComponent) return
 	activeComponent = await injectSvelteCompomponent({
-		svelteComponent: AnimatedJavaLoadingPopup,
-		svelteComponentProperties: {
+		component: AnimatedJavaLoadingPopup,
+		props: {
 			loaded: LOADED,
 			offline: OFFLINE,
 		},
diff --git a/src/interface/animationPropertiesDialog.ts b/src/interface/animationPropertiesDialog.ts
@@ -8,16 +8,16 @@ export const DIALOG_ID = `${PACKAGE.name}:animationPropertiesDialog`
 
 export function openAnimationPropertiesDialog(animation: _Animation) {
 	const animationName = new Valuable(animation.name)
-	const loopMode = new Valuable(animation.loop)
+	const loopMode = new Valuable(animation.loop as string)
 	const loopDelay = new Valuable(Number(animation.loop_delay) || 0)
 	const excludedNodes = new Valuable(animation.excluded_nodes)
 
 	new SvelteDialog({
 		id: DIALOG_ID,
 		title: translate('dialog.animation_properties.title', animation.name),
 		width: 600,
-		svelteComponent: AniamtionPropertiesSvelteComponent,
-		svelteComponentProperties: {
+		component: AniamtionPropertiesSvelteComponent,
+		props: {
 			animationName,
 			loopMode,
 			loopDelay,
@@ -27,7 +27,7 @@ export function openAnimationPropertiesDialog(animation: _Animation) {
 		onConfirm() {
 			animation.name = animationName.get()
 			animation.createUniqueName(Blockbench.Animation.all)
-			animation.loop = loopMode.get()
+			animation.loop = loopMode.get() as any
 			animation.loop_delay = loopDelay.get().toString()
 			animation.excluded_nodes = excludedNodes.get()
 		},
diff --git a/src/interface/blueprintLoadingPopup.ts b/src/interface/blueprintLoadingPopup.ts
@@ -7,7 +7,7 @@ import { translate } from '../util/translation'
 export const PROGRESS = new Valuable(0)
 export const MAX_PROGRESS = new Valuable(1)
 
-let instance: SvelteDialog | null = null
+let instance: SvelteDialog<any, any> | null = null
 
 export function openBlueprintLoadingDialog() {
 	PROGRESS.set(0)
@@ -17,8 +17,8 @@ export function openBlueprintLoadingDialog() {
 		id: `${PACKAGE.name}:blueprintLoadingPopup`,
 		title: translate('dialog.blueprint_loading.title'),
 		width: 128,
-		svelteComponent: BlueprintLoadingPopup,
-		svelteComponentProperties: {
+		component: BlueprintLoadingPopup,
+		props: {
 			progress: PROGRESS,
 			maxProgress: MAX_PROGRESS,
 		},
diff --git a/src/interface/blueprintSettingsDialog.ts b/src/interface/blueprintSettingsDialog.ts
@@ -3,7 +3,7 @@ import { SvelteDialog } from '../util/svelteDialog'
 import { Valuable } from '../util/stores'
 import BlueprintSettingsDialogSvelteComponent from '../components/blueprintSettingsDialog.svelte'
 import { toSafeFuntionName } from '../util/minecraftUtil'
-import { defaultValues } from '../blueprintSettings'
+import { defaultValues, ExportMode } from '../blueprintSettings'
 import { translate } from '../util/translation'
 import { updateBoundingBox } from '../blueprintFormat'
 
@@ -29,8 +29,10 @@ function getSettings() {
 			}
 			return toSafeFuntionName(value)
 		}),
-		resourcePackExportMode: new Valuable(Project!.animated_java.resource_pack_export_mode),
-		dataPackExportMode: new Valuable(Project!.animated_java.data_pack_export_mode),
+		resourcePackExportMode: new Valuable(
+			Project!.animated_java.resource_pack_export_mode as string
+		),
+		dataPackExportMode: new Valuable(Project!.animated_java.data_pack_export_mode as string),
 		// Resource Pack Settings
 		displayItem: new Valuable(Project!.animated_java.display_item, value => {
 			if (!value) {
@@ -75,8 +77,9 @@ function setSettings(settings: ReturnType<typeof getSettings>) {
 	Project.animated_java.enable_plugin_mode = settings.enablePluginMode.get()
 	Project.pluginMode.set(settings.enablePluginMode.get()) // Required to update the project title.
 	Project.animated_java.export_namespace = settings.exportNamespace.get()
-	Project.animated_java.resource_pack_export_mode = settings.resourcePackExportMode.get()
-	Project.animated_java.data_pack_export_mode = settings.dataPackExportMode.get()
+	Project.animated_java.resource_pack_export_mode =
+		settings.resourcePackExportMode.get() as ExportMode
+	Project.animated_java.data_pack_export_mode = settings.dataPackExportMode.get() as ExportMode
 	// Resource Pack Settings
 	Project.animated_java.display_item = settings.displayItem.get()
 	Project.animated_java.custom_model_data_offset = settings.customModelDataOffset.get()
@@ -109,8 +112,8 @@ export function openBlueprintSettingsDialog() {
 		id: `${PACKAGE.name}:blueprintSettingsDialog`,
 		title: translate('dialog.blueprint_settings.title'),
 		width: 512,
-		svelteComponent: BlueprintSettingsDialogSvelteComponent,
-		svelteComponentProperties: settings,
+		component: BlueprintSettingsDialogSvelteComponent,
+		props: settings,
 		preventKeybinds: true,
 		onConfirm() {
 			setSettings(settings)
diff --git a/src/interface/boneConfigDialog.ts b/src/interface/boneConfigDialog.ts
@@ -65,7 +65,7 @@ export function openBoneConfigDialog(bone: Group) {
 
 	const oldConfig = BoneConfig.fromJSON(boneConfigJSON)
 
-	const billboard = new Valuable(oldConfig.billboard)
+	const billboard = new Valuable(oldConfig.billboard as string)
 	const overrideBrightness = new Valuable(oldConfig.overrideBrightness)
 	const brightnessOverride = new Valuable(oldConfig.brightnessOverride)
 	const enchanted = new Valuable(oldConfig.enchanted)
@@ -83,9 +83,9 @@ export function openBoneConfigDialog(bone: Group) {
 		id: `${PACKAGE.name}:boneConfig`,
 		title: translate('dialog.bone_config.title'),
 		width: 400,
-		svelteComponent: BoneConfigDialogSvelteComponent,
-		svelteComponentProperties: {
-			variant: Variant.selected,
+		component: BoneConfigDialogSvelteComponent,
+		props: {
+			variant: Variant.selected!,
 			billboard,
 			overrideBrightness,
 			brightnessOverride,
@@ -104,7 +104,7 @@ export function openBoneConfigDialog(bone: Group) {
 		onConfirm() {
 			const newConfig = new BoneConfig()
 
-			newConfig.billboard = billboard.get()
+			newConfig.billboard = billboard.get() as any
 			newConfig.overrideBrightness = overrideBrightness.get()
 			newConfig.brightnessOverride = brightnessOverride.get()
 			newConfig.enchanted = enchanted.get()
diff --git a/src/interface/customKeyframePanel.ts b/src/interface/customKeyframePanel.ts
@@ -1,7 +1,7 @@
 import CustomKeyframePanelSvelteComponent from '../components/customKeyframePanel.svelte'
 import { CUSTOM_CHANNELS } from '../mods/customKeyframesMod'
 import { events } from '../util/events'
-import { injectSvelteCompomponent } from '../util/injectSvelte'
+import { injectSvelteCompomponent } from '../util/injectSvelteComponent'
 import { Valuable } from '../util/stores'
 import { translate } from '../util/translation'
 
@@ -24,8 +24,11 @@ export function injectCustomKeyframePanel(selectedKeyframe: _Keyframe) {
 	}
 
 	void injectSvelteCompomponent({
-		svelteComponent: CustomKeyframePanelSvelteComponent,
-		svelteComponentProperties: { currentPanel: CURRENT_PANEL, selectedKeyframe },
+		component: CustomKeyframePanelSvelteComponent,
+		props: {
+			currentPanel: CURRENT_PANEL as Valuable<HTMLDivElement>,
+			selectedKeyframe,
+		},
 		elementSelector() {
 			return element
 		},
diff --git a/src/interface/exportProgressDialog.ts b/src/interface/exportProgressDialog.ts
@@ -28,8 +28,8 @@ export function openExportProgressDialog(debug?: boolean) {
 		id: `${PACKAGE.name}:exportProgressDialog`,
 		title: translate('dialog.export_progress.title'),
 		width: 512,
-		svelteComponent: ExportProgressDialogSvelteComponent,
-		svelteComponentProperties: {
+		component: ExportProgressDialogSvelteComponent,
+		props: {
 			progress: PROGRESS,
 			maxProgress: MAX_PROGRESS,
 			progressDescription: PROGRESS_DESCRIPTION,
diff --git a/src/interface/importAJModelLoader.ts b/src/interface/importAJModelLoader.ts
@@ -1,7 +1,7 @@
 import { SvelteComponentDev } from 'svelte/internal'
 import ImportAjModelLoaderDialog from '../components/importAJModelLoaderDialog.svelte'
 import { PACKAGE } from '../constants'
-import { injectSvelteCompomponent } from '../util/injectSvelte'
+import { injectSvelteCompomponent } from '../util/injectSvelteComponent'
 import { createModelLoader } from '../util/moddingTools'
 import { translate } from '../util/translation'
 import { openUnexpectedErrorDialog } from './unexpectedErrorDialog'
@@ -28,8 +28,8 @@ createModelLoader(`${PACKAGE.name}-upgradeAJModelLoader`, {
 			activeComponent.$destroy()
 		}
 		void injectSvelteCompomponent({
-			svelteComponent: ImportAjModelLoaderDialog,
-			svelteComponentProperties: {},
+			component: ImportAjModelLoaderDialog,
+			props: {},
 			elementSelector() {
 				return document.querySelector(`#${PACKAGE.name}-upgradeAJModelLoader-target`)
 			},
diff --git a/src/interface/keyframeEasings.ts b/src/interface/keyframeEasings.ts
@@ -1,9 +1,9 @@
 import KeyframeEasingsSvelte from '../components/keyframeEasings.svelte'
-import { injectSvelteCompomponentMod } from '../util/injectSvelte'
+import { injectSvelteCompomponentMod } from '../util/injectSvelteComponent'
 
 injectSvelteCompomponentMod({
-	svelteComponent: KeyframeEasingsSvelte,
-	svelteComponentProperties: {},
+	component: KeyframeEasingsSvelte,
+	props: {},
 	elementSelector() {
 		return $('#panel_keyframe')[0]
 	},
diff --git a/src/interface/locatorConfigDialog.ts b/src/interface/locatorConfigDialog.ts
@@ -20,8 +20,8 @@ export function openLocatorConfigDialog(locator: Locator) {
 		id: `${PACKAGE.name}:locatorConfig`,
 		title: translate('dialog.locator_config.title'),
 		width: 600,
-		svelteComponent: LocatorConfigDialog,
-		svelteComponentProperties: {
+		component: LocatorConfigDialog,
+		props: {
 			useEntity,
 			entityType,
 			summonCommands,
diff --git a/src/interface/textDisplayConfigDialog.ts b/src/interface/textDisplayConfigDialog.ts
@@ -13,7 +13,7 @@ export function openBoneConfigDialog(bone: TextDisplay) {
 	// Blockbench's JSON stringifier doesn't handle custom toJSON functions, so I'm storing the config JSON in the bone instead of the actual BoneConfig object
 	const oldConfig = TextDisplayConfig.fromJSON((bone.config ??= new TextDisplayConfig().toJSON()))
 
-	const billboard = new Valuable(oldConfig.billboard)
+	const billboard = new Valuable(oldConfig.billboard as string)
 	const overrideBrightness = new Valuable(oldConfig.overrideBrightness)
 	const brightnessOverride = new Valuable(oldConfig.brightnessOverride)
 	const glowing = new Valuable(oldConfig.glowing)
@@ -29,8 +29,8 @@ export function openBoneConfigDialog(bone: TextDisplay) {
 		id: `${PACKAGE.name}:textDisplayConfigDialog`,
 		title: translate('dialog.text_display_config.title'),
 		width: 400,
-		svelteComponent: TextDisplayConfigDialog,
-		svelteComponentProperties: {
+		component: TextDisplayConfigDialog,
+		props: {
 			variant: Variant.selected,
 			billboard,
 			overrideBrightness,
@@ -48,7 +48,7 @@ export function openBoneConfigDialog(bone: TextDisplay) {
 		onConfirm() {
 			const newConfig = new TextDisplayConfig()
 
-			newConfig.billboard = billboard.get()
+			newConfig.billboard = billboard.get() as any
 			newConfig.overrideBrightness = overrideBrightness.get()
 			newConfig.brightnessOverride = brightnessOverride.get()
 			newConfig.glowing = glowing.get()
diff --git a/src/interface/textDisplayElementPanel.ts b/src/interface/textDisplayElementPanel.ts
@@ -2,13 +2,13 @@ import { isCurrentFormat } from '../blueprintFormat'
 import TextDisplayElementPanel from '../components/textDisplayElementPanel.svelte'
 import { PACKAGE } from '../constants'
 import { Alignment, TextDisplay } from '../outliner/textDisplay'
-import { injectSvelteCompomponentMod } from '../util/injectSvelte'
+import { injectSvelteCompomponentMod } from '../util/injectSvelteComponent'
 import { floatToHex } from '../util/misc'
 import { translate } from '../util/translation'
 
 injectSvelteCompomponentMod({
-	svelteComponent: TextDisplayElementPanel,
-	svelteComponentProperties: {},
+	component: TextDisplayElementPanel,
+	props: {},
 	elementSelector() {
 		return document.querySelector('#panel_element')
 	},
diff --git a/src/interface/unexpectedErrorDialog.ts b/src/interface/unexpectedErrorDialog.ts
@@ -8,8 +8,8 @@ export function openUnexpectedErrorDialog(error: Error) {
 		id: `${PACKAGE.name}:unexpectedError`,
 		title: translate('dialog.unexpected_error.title'),
 		width: 600,
-		svelteComponent: UnexpectedErrorDialog,
-		svelteComponentProperties: {
+		component: UnexpectedErrorDialog,
+		props: {
 			error,
 		},
 		preventKeybinds: true,
diff --git a/src/interface/vanillaBlockDisplayConfigDialog.ts b/src/interface/vanillaBlockDisplayConfigDialog.ts
@@ -15,7 +15,7 @@ export function openVanillaBlockDisplayConfigDialog(display: VanillaBlockDisplay
 		(display.config ??= new TextDisplayConfig().toJSON())
 	)
 
-	const billboard = new Valuable(oldConfig.billboard)
+	const billboard = new Valuable(oldConfig.billboard as string)
 	const overrideBrightness = new Valuable(oldConfig.overrideBrightness)
 	const brightnessOverride = new Valuable(oldConfig.brightnessOverride)
 	const glowing = new Valuable(oldConfig.glowing)
@@ -31,8 +31,8 @@ export function openVanillaBlockDisplayConfigDialog(display: VanillaBlockDisplay
 		id: `${PACKAGE.name}:vanillaItemDisplayConfigDialog`,
 		title: translate('dialog.vanilla_block_display_config.title'),
 		width: 400,
-		svelteComponent: VanillaBlockDisplayConfigDialog,
-		svelteComponentProperties: {
+		component: VanillaBlockDisplayConfigDialog,
+		props: {
 			variant: Variant.selected,
 			billboard,
 			overrideBrightness,
@@ -50,7 +50,7 @@ export function openVanillaBlockDisplayConfigDialog(display: VanillaBlockDisplay
 		onConfirm() {
 			const newConfig = new TextDisplayConfig()
 
-			newConfig.billboard = billboard.get()
+			newConfig.billboard = billboard.get() as any
 			newConfig.overrideBrightness = overrideBrightness.get()
 			newConfig.brightnessOverride = brightnessOverride.get()
 			newConfig.glowing = glowing.get()
diff --git a/src/interface/vanillaBlockDisplayElementPanel.ts b/src/interface/vanillaBlockDisplayElementPanel.ts
@@ -1,9 +1,9 @@
 import VanillaBlockDisplayElementPanel from '../components/vanillaBlockDisplayElementPanel.svelte'
-import { injectSvelteCompomponentMod } from '../util/injectSvelte'
+import { injectSvelteCompomponentMod } from '../util/injectSvelteComponent'
 
 injectSvelteCompomponentMod({
-	svelteComponent: VanillaBlockDisplayElementPanel,
-	svelteComponentProperties: {},
+	component: VanillaBlockDisplayElementPanel,
+	props: {},
 	elementSelector() {
 		return document.querySelector('#panel_element')
 	},
diff --git a/src/interface/vanillaItemDisplayConfigDialog.ts b/src/interface/vanillaItemDisplayConfigDialog.ts
@@ -15,7 +15,7 @@ export function openVanillaItemDisplayConfigDialog(display: VanillaItemDisplay)
 		(display.config ??= new TextDisplayConfig().toJSON())
 	)
 
-	const billboard = new Valuable(oldConfig.billboard)
+	const billboard = new Valuable(oldConfig.billboard as string)
 	const overrideBrightness = new Valuable(oldConfig.overrideBrightness)
 	const brightnessOverride = new Valuable(oldConfig.brightnessOverride)
 	const glowing = new Valuable(oldConfig.glowing)
@@ -31,8 +31,8 @@ export function openVanillaItemDisplayConfigDialog(display: VanillaItemDisplay)
 		id: `${PACKAGE.name}:vanillaItemDisplayConfigDialog`,
 		title: translate('dialog.vanilla_item_display_config.title'),
 		width: 400,
-		svelteComponent: VanillaItemDisplayConfigDialog,
-		svelteComponentProperties: {
+		component: VanillaItemDisplayConfigDialog,
+		props: {
 			variant: Variant.selected,
 			billboard,
 			overrideBrightness,
@@ -50,7 +50,7 @@ export function openVanillaItemDisplayConfigDialog(display: VanillaItemDisplay)
 		onConfirm() {
 			const newConfig = new TextDisplayConfig()
 
-			newConfig.billboard = billboard.get()
+			newConfig.billboard = billboard.get() as any
 			newConfig.overrideBrightness = overrideBrightness.get()
 			newConfig.brightnessOverride = brightnessOverride.get()
 			newConfig.glowing = glowing.get()
diff --git a/src/interface/vanillaItemDisplayElementPanel.ts b/src/interface/vanillaItemDisplayElementPanel.ts
diff --git a/src/interface/variantConfigDialog.ts b/src/interface/variantConfigDialog.ts
diff --git a/src/interface/variantsPanel.ts b/src/interface/variantsPanel.ts
diff --git a/src/mods/formatIconMod.ts b/src/mods/formatIconMod.ts
diff --git a/src/util/injectSvelte.ts b/src/util/injectSvelte.ts
diff --git a/src/util/injectSvelteComponent.ts b/src/util/injectSvelteComponent.ts
diff --git a/src/util/misc.ts b/src/util/misc.ts
diff --git a/src/util/svelteDialog.ts b/src/util/svelteDialog.ts
diff --git a/src/util/sveltePanel.ts b/src/util/sveltePanel.ts
