🐛 Fix keyframe panel mods

Author: SnaveSutit

src/index.ts

@@ -129,3 +129,5 @@ EVENTS.PLUGIN_FINISHED_LOADING.subscribe(() => {
 		openChangelogDialog()
 	}
 })
+
+import './plugin'

src/interface/keyframeEasings.ts

@@ -1,5 +1,6 @@
 import { registerPatch } from 'blockbench-patch-manager'
 import { injectComponent } from 'svelte-patching-tools'
+import { activeProjectIsBlueprintFormat } from '../formats/blueprint'
 import KeyframeEasingsSvelte from '../svelteComponents/keyframeEasings.svelte'
 import EVENTS from '../util/events'
 
@@ -12,24 +13,43 @@ function isFirstKeyframe(kf: _Keyframe) {
 }
 
 let unmountCallback: (() => Promise<void>) | null = null
-let selectedKeyframe: _Keyframe | undefined
+let currentUpdatePromise: Promise<void> | null = null
 
-registerPatch({
-	id: 'animated_java:mounted-svelte/keyframe-easings',
-	apply() {
-		const unsub = EVENTS.UPDATE_KEYFRAME_SELECTION.subscribe(async () => {
-			selectedKeyframe = Timeline.selected.at(0)
-			await unmountCallback?.()
-			if (!selectedKeyframe || isFirstKeyframe(selectedKeyframe)) return
+const updatePanel = () => {
+	if (currentUpdatePromise) {
+		return currentUpdatePromise.then(() => {
+			void updatePanel()
+		})
+	}
 
+	currentUpdatePromise = new Promise(async resolve => {
+		await unmountCallback?.()
+		if (!activeProjectIsBlueprintFormat()) return
+
+		const selectedKeyframe = Timeline.selected.at(0)
+		if (selectedKeyframe && !isFirstKeyframe(selectedKeyframe)) {
 			unmountCallback = injectComponent({
 				component: KeyframeEasingsSvelte,
 				props: { selectedKeyframe },
-				elementSelector(): HTMLElement | null {
-					return document.querySelector('#panel_keyframe')
+				elementSelector() {
+					return Panels.keyframe.node
+				},
+				postMount() {
+					currentUpdatePromise = null
+					resolve()
 				},
 			})
-		})
+		} else {
+			currentUpdatePromise = null
+			resolve()
+		}
+	})
+}
+
+registerPatch({
+	id: 'animated_java:mounted-svelte/keyframe-easings',
+	apply() {
+		const unsub = EVENTS.UPDATE_KEYFRAME_SELECTION.subscribe(() => void updatePanel())
 
 		return { unsub }
 	},

src/panels/customKeyframe/customKeyframe.ts

@@ -1,12 +1,61 @@
 import { registerPatch } from 'blockbench-patch-manager'
 import { injectComponent } from 'svelte-patching-tools'
-import { EFFECT_ANIMATOR_CHANNELS, isCustomKeyframeChannel } from '../../mods/customKeyframes'
+import { EFFECT_ANIMATOR_CHANNELS } from '../../mods/customKeyframes'
 import EVENTS from '../../util/events'
 import { localize as translate } from '../../util/lang'
 import CommandsKeyframePanel from './commandsKeyframe.svelte'
 import VariantKeyframePanel from './variantKeyframe.svelte'
 
 let unmountCallback: (() => Promise<void>) | null = null
+let currentUpdatePromise: Promise<void> | null = null
+
+const updatePanel = () => {
+	if (currentUpdatePromise) {
+		return currentUpdatePromise.then(() => {
+			void updatePanel()
+		})
+	}
+
+	currentUpdatePromise = new Promise(async resolve => {
+		await unmountCallback?.()
+
+		// if (!activeProjectIsBlueprintFormat()) return
+
+		const keyframe = Timeline.selected.at(0)
+		if (keyframe) {
+			let component: any
+			switch (keyframe.channel) {
+				case EFFECT_ANIMATOR_CHANNELS.VARIANT:
+					component = VariantKeyframePanel
+					break
+
+				case EFFECT_ANIMATOR_CHANNELS.FUNCTION:
+					component = CommandsKeyframePanel
+					break
+
+				default:
+					currentUpdatePromise = null
+					resolve()
+					return
+			}
+
+			unmountCallback = injectComponent({
+				component,
+				props: { keyframe },
+				elementSelector() {
+					return Panels.keyframe.node
+				},
+				postMount() {
+					currentUpdatePromise = null
+					resolve()
+				},
+			})
+		} else {
+			currentUpdatePromise = null
+			resolve()
+		}
+	})
+}
 
 registerPatch({
 	id: 'animated_java:panel/custom-keyframe-data-points',
@@ -18,46 +67,8 @@ registerPatch({
 		Language.data['timeline.function'] = translate('effect_animator.timeline.function')
 
 		const unsubs = [
-			EVENTS.UPDATE_KEYFRAME_SELECTION.subscribe(async () => {
-				await unmountCallback?.()
-				unmountCallback = null
-
-				const keyframe = Timeline.selected.at(0)
-				const isCustomKeyframe = isCustomKeyframeChannel(keyframe?.channel ?? '')
-
-				if (keyframe && isCustomKeyframe) {
-					let component: any
-					switch (keyframe.channel) {
-						case EFFECT_ANIMATOR_CHANNELS.VARIANT:
-							component = VariantKeyframePanel
-							break
-
-						case EFFECT_ANIMATOR_CHANNELS.FUNCTION:
-							component = CommandsKeyframePanel
-							break
-
-						default:
-							console.error(`Unknown custom keyframe channel: '${keyframe.channel}'`)
-							return
-					}
-
-					unmountCallback = injectComponent({
-						component,
-						props: { keyframe },
-						elementSelector(): HTMLElement | null {
-							return document.querySelector(
-								'#panel_keyframe .panel_vue_wrapper .keyframe_data_point'
-							)
-						},
-						// hideTargetChildren: true,
-					})
-				}
-			}),
-
-			EVENTS.UNSELECT_AJ_PROJECT.subscribe(async () => {
-				await unmountCallback?.()
-				unmountCallback = null
-			}),
+			EVENTS.UPDATE_KEYFRAME_SELECTION.subscribe(() => void updatePanel()),
+			EVENTS.UNSELECT_AJ_PROJECT.subscribe(() => void updatePanel()),
 		]
 
 		return { unsubs }

src/svelteComponents/keyframeEasings.svelte

@@ -58,6 +58,7 @@
 		} else {
 			kf.easing = getEasingFunctionName(type, mode)
 		}
+		Project.saved = false
 	}
 
 	function setKeyframeEasingArg(kf: _Keyframe, arg: number | undefined) {
@@ -66,6 +67,7 @@
 		} else {
 			kf.easingArgs = [arg]
 		}
+		Project.saved = false
 	}
 
 	function getEasingFunctionName(type: string, mode = 'inout') {