✨ Improve text display panel undo system and reactivity

Author: SnaveSutit

src/components/textDisplayElementPanel.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" context="module">
 	import { CodeJar } from '@novacbn/svelte-codejar'
 	import { Stopwatch } from 'src/util/stopwatch'
-	import { onDestroy } from 'svelte'
 	import {
 		TEXT_DISPLAY_ALIGNMENT_SELECT,
 		TEXT_DISPLAY_BACKGROUND_COLOR_PICKER,
@@ -11,8 +10,6 @@
 		TEXT_DISPLAY_WIDTH_SLIDER,
 	} from '../interface/panel/textDisplayElement'
 	import { TextDisplay } from '../outliner/textDisplay'
-	import EVENTS from '../util/events'
-	import { Valuable } from '../util/stores'
 	import { translate } from '../util/translation'
 
 	const HIGHLIGHT_CACHE = new Map<string, string>()
@@ -27,50 +24,36 @@
 		}
 		const stopwatch = new Stopwatch('Highlighting').start()
 		const result = Prism.highlight(code, Prism.languages[syntax], syntax)
-		stopwatch.debug(result)
+		stopwatch.debug({ code, result })
 		HIGHLIGHT_CACHE.set(code, result)
 		return result
 	}
 </script>
 
 <script lang="ts">
-	let selected = TextDisplay.selected.at(0)
+	export let selected: TextDisplay
 
-	let text = new Valuable(selected?.text ?? '')
-
-	let error = selected?.textError ?? new Valuable('')
+	let text = selected.text
+	let error = selected.textError
 
 	let codeJarElement: HTMLPreElement | undefined
 
-	let unsubFromText: (() => void) | undefined
-
-	const unsubFromEvent = EVENTS.UPDATE_SELECTION.subscribe(() => {
-		unsubFromText?.()
-
-		selected = TextDisplay.selected.at(0)
-		if (!selected || Group.first_selected) {
-			$text = ''
-			error = new Valuable('')
-			return
+	// Force the inputs to update
+	TEXT_DISPLAY_WIDTH_SLIDER.setValue(selected.lineWidth)
+	TEXT_DISPLAY_BACKGROUND_COLOR_PICKER.set(tinycolor(selected.backgroundColor))
+	TEXT_DISPLAY_SHADOW_TOGGLE.set(selected.shadow)
+	TEXT_DISPLAY_ALIGNMENT_SELECT.set(selected.align)
+	TEXT_DISPLAY_SEE_THROUGH_TOGGLE.set(selected.seeThrough)
+
+	$: {
+		if (selected.text !== text) {
+			Undo.initEdit({ elements: [selected] })
+			selected.text = text
+			selected.updateTextMesh()
+			Project!.saved = false
+			Undo.finishEdit(`Change Text Display Text`, { elements: [selected] })
 		}
-
-		$text = selected.text
-		error = selected.textError
-
-		// Force the inputs to update
-		TEXT_DISPLAY_WIDTH_SLIDER.setValue(selected.lineWidth)
-		const color = tinycolor(selected.backgroundColor)
-		TEXT_DISPLAY_BACKGROUND_COLOR_PICKER.set(color)
-		TEXT_DISPLAY_SHADOW_TOGGLE.set(selected.shadow)
-		TEXT_DISPLAY_ALIGNMENT_SELECT.set(selected.align)
-		TEXT_DISPLAY_SEE_THROUGH_TOGGLE.set(selected.seeThrough)
-
-		text.subscribe(v => {
-			console.log('Text changed:', v)
-			if (!selected) return
-			selected.text = v
-		})
-	})
+	}
 
 	const mountLineWidth = (node: HTMLDivElement) => {
 		node.appendChild(TEXT_DISPLAY_WIDTH_SLIDER.node)
@@ -109,25 +92,18 @@
 			// CodeJar doesn't capture undo correctly. So we have to fudge it a little.
 			requestAnimationFrame(() => {
 				if (selected && codeJarElement?.textContent != undefined) {
-					$text = codeJarElement.textContent
+					text = codeJarElement.textContent
 				}
 			})
 		}
 	}
-
-	onDestroy(() => {
-		unsubFromEvent()
-	})
 </script>
 
-<p class="panel_toolbar_label label" style={!!selected ? '' : 'visibility:hidden; height: 0px;'}>
+<p class="panel_toolbar_label label">
 	{translate('panel.text_display.title')}
 </p>
 
-<div
-	class="toolbar text-display-toolbar"
-	style={!!selected ? '' : 'visibility:hidden; height: 0px;'}
->
+<div class="toolbar text-display-toolbar">
 	<div class="content" use:mountLineWidth />
 	<div class="content" use:mountShadow />
 	<div class="content" use:mountAlignment />
@@ -145,7 +121,7 @@
 			bind:element={codeJarElement}
 			syntax="snbtTextComponent"
 			{highlight}
-			bind:value={$text}
+			bind:value={text}
 			on:change={() => forceNoWrap()}
 			preserveIdent
 			history

src/interface/panel/textDisplayElement.ts

@@ -1,14 +1,45 @@
 import { JsonTextParser } from 'src/systems/jsonText/parser'
-import { registerMountSvelteComponentMod } from 'src/util/mountSvelteComponent'
+import EVENTS from 'src/util/events'
+import { registerProjectMod } from 'src/util/moddingTools'
+import { mountSvelteComponent } from 'src/util/mountSvelteComponent'
 import TextDisplayElementPanel from '../../components/textDisplayElementPanel.svelte'
-import { activeProjectIsBlueprintFormat } from '../../formats/blueprint'
+import { activeProjectIsBlueprintFormat, BLUEPRINT_FORMAT_ID } from '../../formats/blueprint'
 import { type Alignment, TextDisplay } from '../../outliner/textDisplay'
 import { translate } from '../../util/translation'
 
-registerMountSvelteComponentMod({
-	id: 'animated-java:panel/text-display',
-	component: TextDisplayElementPanel,
-	target: '#panel_element',
+let mounted: TextDisplayElementPanel | null = null
+
+const destroyMounted = () => {
+	mounted?.$destroy()
+	mounted = null
+}
+
+const updatePanel = () => {
+	destroyMounted()
+	const textDisplay = TextDisplay.selected.at(0)
+	if (textDisplay) {
+		mounted = mountSvelteComponent({
+			component: TextDisplayElementPanel,
+			props: { selected: textDisplay },
+			target: '#panel_element',
+		})
+	}
+}
+
+registerProjectMod({
+	id: 'animated-java:append-element-panel/text-display',
+
+	condition: project => project.format.id === BLUEPRINT_FORMAT_ID,
+
+	apply: () => {
+		const unsubscribers = [EVENTS.UPDATE_SELECTION.subscribe(updatePanel)]
+		return { unsubscribers }
+	},
+
+	revert: ({ unsubscribers }) => {
+		unsubscribers.forEach(u => u())
+		destroyMounted()
+	},
 })
 
 type Grammar = ReturnType<typeof Prism.languages.extend>
@@ -103,6 +134,7 @@ export const TEXT_DISPLAY_WIDTH_SLIDER = new NumSlider(
 			const newLineWidth = Math.clamp(value(selected.lineWidth), 1, 10000)
 			if (selected.lineWidth === newLineWidth) return
 			selected.lineWidth = newLineWidth
+			selected.updateTextMesh()
 			Project.saved = false
 		},
 	}
@@ -135,7 +167,13 @@ TEXT_DISPLAY_BACKGROUND_COLOR_PICKER.set = function (this: ColorPicker, color: t
 
 	const selected = TextDisplay.selected.at(0)
 	if (!selected) return this
+
+	const value = color.toHex8String()
+	if (selected.backgroundColor === value) return this
+
 	selected.backgroundColor = color.toHex8String()
+	selected.updateTextMesh()
+	Project!.saved = false
 	return this
 }
 TEXT_DISPLAY_BACKGROUND_COLOR_PICKER.change = function (
@@ -145,9 +183,13 @@ TEXT_DISPLAY_BACKGROUND_COLOR_PICKER.change = function (
 	if (!Project) return this
 	const selected = TextDisplay.selected.at(0)
 	if (!selected) return this
+
 	const newBackground = color.toHex8String()
+
 	if (selected.backgroundColor === newBackground) return this
+
 	selected.backgroundColor = newBackground
+	selected.updateTextMesh()
 	Project!.saved = false
 	return this
 }
@@ -166,6 +208,7 @@ export const TEXT_DISPLAY_SHADOW_TOGGLE = new Toggle(`animated-java:text-display
 		if (!selected) return
 		if (selected.shadow === TEXT_DISPLAY_SHADOW_TOGGLE.value) return
 		selected.shadow = TEXT_DISPLAY_SHADOW_TOGGLE.value
+		selected.updateTextMesh()
 		Project!.saved = false
 	},
 })
@@ -205,7 +248,12 @@ TEXT_DISPLAY_ALIGNMENT_SELECT.set = function (this: BarSelect<Alignment>, value:
 	if (!this.nodes.includes(this.node)) {
 		$(this.node).find('bb-select').text(name)
 	}
+
+	if (selected.align === value) return this
+
 	selected.align = value
+	selected.updateTextMesh()
+	Project!.saved = false
 	return this
 }
 
@@ -224,6 +272,7 @@ export const TEXT_DISPLAY_SEE_THROUGH_TOGGLE = new Toggle(
 			if (!selected) return
 			if (selected.seeThrough === TEXT_DISPLAY_SEE_THROUGH_TOGGLE.value) return
 			selected.seeThrough = TEXT_DISPLAY_SEE_THROUGH_TOGGLE.value
+			selected.updateTextMesh()
 			Project!.saved = false
 		},
 	}