🛠️ Fix custom keyframe panel duplicating

Author: SnaveSutit

src/components/customKeyframePanel.svelte

@@ -4,14 +4,12 @@
 		setKeyframeExecuteCondition,
 	} from '../mods/customKeyframesMod'
 	import { Valuable } from '../util/stores'
-</script>
-
-<script lang="ts">
 	import { translate } from '../util/translation'
 	import CommandsKeyframePanel from './keyframePanels/commandsKeyframePanel.svelte'
 	import VariantKeyframePanel from './keyframePanels/variantKeyframePanel.svelte'
+</script>
 
-	export let currentPanel: Valuable<HTMLDivElement>
+<script lang="ts">
 	export let selectedKeyframe: _Keyframe
 
 	const executeCondition = new Valuable<string>(
@@ -23,7 +21,7 @@
 	})
 </script>
 
-<div class="container" bind:this={$currentPanel}>
+<div class="container">
 	{#if selectedKeyframe.channel === 'variant'}
 		<VariantKeyframePanel {selectedKeyframe} />
 	{:else if selectedKeyframe.channel === 'commands'}

src/interface/customKeyframePanel.ts

@@ -1,12 +1,12 @@
+import type { SvelteComponentDev } from 'svelte/internal'
 import { isCurrentFormat } from '../blueprintFormat'
 import CustomKeyframePanelSvelteComponent from '../components/customKeyframePanel.svelte'
 import { CUSTOM_CHANNELS } from '../mods/customKeyframesMod'
 import { events } from '../util/events'
 import { injectSvelteCompomponent } from '../util/injectSvelteComponent'
-import { Valuable } from '../util/stores'
 import { translate } from '../util/translation'
 
-const CURRENT_PANEL = new Valuable<HTMLDivElement | undefined>(undefined)
+let currentPanel: SvelteComponentDev | undefined = undefined
 
 export function injectCustomKeyframePanel(selectedKeyframe: _Keyframe) {
 	if (
@@ -32,23 +32,23 @@ export function injectCustomKeyframePanel(selectedKeyframe: _Keyframe) {
 	void injectSvelteCompomponent({
 		component: CustomKeyframePanelSvelteComponent,
 		props: {
-			currentPanel: CURRENT_PANEL as Valuable<HTMLDivElement>,
 			selectedKeyframe,
 		},
 		elementSelector() {
 			return element
 		},
-		postMount() {
+		postMount(comp) {
 			const label = jQuery('#panel_keyframe .panel_vue_wrapper #keyframe_type_label label')
 			if (label && selectedKeyframe.channel) {
 				const property = selectedKeyframe.animator.channels[selectedKeyframe.channel]
 				label.text(translate('panel.keyframe.keyframe_title', `${property.name}`))
 			}
+			currentPanel?.$destroy()
+			currentPanel = comp
 		},
 	})
 }
 
 events.SELECT_KEYFRAME.subscribe(kf => {
-	CURRENT_PANEL.get()?.remove()
-	requestAnimationFrame(() => injectCustomKeyframePanel(kf))
+	injectCustomKeyframePanel(kf)
 })