Add configurable indentation

src/app/Store.ts

@@ -5,6 +5,7 @@ export namespace Store {
 	export const ID_LANGUAGE = 'language'
 	export const ID_THEME = 'theme'
 	export const ID_VERSION = 'schema_version'
+	export const ID_INDENT = 'indentation'
 
 	export function getLanguage() {
 		return localStorage.getItem(ID_LANGUAGE) ?? 'en'
@@ -22,6 +23,10 @@ export namespace Store {
 		return '1.17'
 	}
 
+	export function getIndent() {
+		return localStorage.getItem(ID_INDENT) ?? '2_spaces'
+	}
+
 	export function setLanguage(language: string | undefined) {
 		if (language) localStorage.setItem(ID_LANGUAGE, language)
 	}
@@ -33,4 +38,8 @@ export namespace Store {
 	export function setVersion(version: VersionId | undefined) {
 		if (version) localStorage.setItem(ID_VERSION, version)
 	}
+
+	export function setIndent(indent: string) {
+		if (indent) localStorage.setItem(ID_INDENT, indent)
+	}
 }

src/app/components/SourcePanel.tsx

@@ -1,10 +1,18 @@
 import type { DataModel } from '@mcschema/core'
 import { ModelPath } from '@mcschema/core'
-import { useEffect, useRef } from 'preact/hooks'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { Btn, BtnMenu } from '.'
 import { useModel } from '../hooks'
 import { locale } from '../Locales'
 import { transformOutput } from '../schema/transformOutput'
 import type { BlockStateRegistry } from '../Schemas'
+import { Store } from '../Store'
+
+const INDENT: Record<string, number | string> = {
+	'2_spaces': 2,
+	'4_spaces': 4,
+	tabs: '\t',
+}
 
 type SourcePanelProps = {
 	lang: string,
@@ -18,21 +26,34 @@ type SourcePanelProps = {
 }
 export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload, doImport, onError }: SourcePanelProps) {
 	const loc = locale.bind(null, lang)
+	const [indent, setIndent] = useState(Store.getIndent())
 	const source = useRef<HTMLTextAreaElement>(null)
 	const download = useRef<HTMLAnchorElement>(null)
+	const retransform = useRef<Function>()
 
-	useModel(model, model => {
-		try {
-			const props = { blockStates: blockStates ?? {} }
-			const data = model.schema.hook(transformOutput, new ModelPath(model), model.data, props)
-			source.current.value = JSON.stringify(data, null, 2) + '\n'
-		} catch (e) {
-			onError(`Error getting JSON output: ${e.message}`)
-			console.error(e)
-			source.current.value = ''
+	useEffect(() => {
+		retransform.current = () => {
+			if (!model || !blockStates) return
+			try {
+				const props = { blockStates: blockStates ?? {} }
+				const data = model.schema.hook(transformOutput, new ModelPath(model), model.data, props)
+				source.current.value = JSON.stringify(data, null, INDENT[indent]) + '\n'
+			} catch (e) {
+				onError(`Error getting JSON output: ${e.message}`)
+				console.error(e)
+				source.current.value = ''
+			}
 		}
 	})
 
+	useModel(model, () => {
+		retransform.current()
+	})
+
+	useEffect(() => {
+		retransform.current()
+	}, [indent])
+
 	const onImport = () => {
 		try {
 			const data = JSON.parse(source.current.value)
@@ -65,7 +86,20 @@ export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload
 		}
 	}, [doImport])
 
+	const changeIndent = (value: string) => {
+		Store.setIndent(value)
+		setIndent(value)
+	}
+
 	return <> 
+		<div class="controls">
+			<BtnMenu icon="gear">
+				{Object.entries(INDENT).map(([key]) =>
+					<Btn label={loc(`indentation.${key}`)} active={indent === key}
+						onClick={() => changeIndent(key)}/>
+				)}
+			</BtnMenu>
+		</div>
 		<textarea ref={source} class="source" onChange={onImport} spellcheck={false} autocorrect="off" placeholder={loc('source_placeholder')}></textarea>
 		<a ref={download} style="display: none;"></a>
 	</>

src/locales/de.json

@@ -1,23 +1,23 @@
 {
-    "worldgen/template-pool": "Vorlagenauswahl",
-    "worldgen/surface-builder": "Oberflächengestalter",
-    "worldgen/structure-feature": "Strukturmekrmal",
-    "worldgen/processor-list": "Prozessorliste",
-    "worldgen/noise-settings": "Rauscheinstellungen",
-    "worldgen/feature": "Merkmal",
-    "worldgen/carver": "Borer",
-    "worldgen/biome": "Biom",
-    "preview": "Visualisieren",
-    "title.home": "Datenpaketgeneratoren",
-    "title.generator": "%0%-Generator",
-    "share": "Teilen",
-    "reset": "Zurücksetzen",
-    "predicate": "Prädikat",
-    "loot-table": "Beutetabelle",
-    "language": "Sprache",
-    "download": "Herunterladen",
-    "dimension": "Dimension",
-    "dimension-type": "Dimensionstyp",
-    "copy": "Kopieren",
-    "advancement": "Fortschritt"
+  "advancement": "Fortschritt",
+  "copy": "Kopieren",
+  "dimension-type": "Dimensionstyp",
+  "dimension": "Dimension",
+  "download": "Herunterladen",
+  "language": "Sprache",
+  "loot-table": "Beutetabelle",
+  "predicate": "Prädikat",
+  "preview": "Visualisieren",
+  "reset": "Zurücksetzen",
+  "share": "Teilen",
+  "title.generator": "%0%-Generator",
+  "title.home": "Datenpaketgeneratoren",
+  "worldgen/biome": "Biom",
+  "worldgen/carver": "Borer",
+  "worldgen/feature": "Merkmal",
+  "worldgen/noise-settings": "Rauscheinstellungen",
+  "worldgen/processor-list": "Prozessorliste",
+  "worldgen/structure-feature": "Strukturmekrmal",
+  "worldgen/surface-builder": "Oberflächengestalter",
+  "worldgen/template-pool": "Vorlagenauswahl"
 }

src/locales/en.json

@@ -8,16 +8,16 @@
   "dimension-type": "Dimension Type",
   "dimension": "Dimension",
   "download": "Download",
-  "error.block_state.missing_property": "Missing block property \"%0%\"",
   "fields": "Fields",
   "github": "GitHub",
   "home": "Home",
   "import": "Import",
+  "indentation.2_spaces": "2 spaces",
+  "indentation.4_spaces": "4 spaces",
+  "indentation.tabs": "Tabs",
   "item-modifier": "Item Modifier",
   "language": "Language",
   "loot-table": "Loot Table",
-  "maximize": "Maximize",
-  "minimize": "Minimize",
   "not_found.description": "The page you were looking for does not exist.",
   "no_presets": "No presets",
   "predicate": "Predicate",
@@ -36,7 +36,6 @@
   "title.home": "Data Pack Generators",
   "presets": "Presets",
   "preview": "Visualize",
-  "preview.show_density": "Show Density",
   "preview.scale": "Scale",
   "preview.depth": "Depth",
   "preview.width": "Width",

src/locales/fr.json

@@ -4,6 +4,9 @@
   "dimension": "Dimension",
   "dimension-type": "Type de dimension",
   "download": "Télécharger",
+  "indentation.2_spaces": "2 espaces",
+  "indentation.4_spaces": "4 espaces",
+  "indentation.tabs": "Onglets",
   "language": "Langage",
   "loot-table": "Table de butin",
   "predicate": "Prédicat",

src/locales/pt.json

@@ -1 +1,8 @@
-{}
+{
+  "copy": "Copiar",
+  "indentation.2_spaces": "2 Espaços",
+  "indentation.4_spaces": "4 Espaços",
+  "indentation.tabs": "Guias",
+  "theme.dark": "Escuro",
+  "theme.light": "Claro"
+}

src/locales/ru.json

@@ -5,6 +5,9 @@
   "dimension-type": "Тип измерения",
   "download": "Скачать",
   "fields": "Поля",
+  "indentation.2_spaces": "2 пробела",
+  "indentation.4_spaces": "4 пробела",
+  "indentation.tabs": "Табуляция",
   "item-modifier": "Модификатор предмета",
   "language": "Язык",
   "loot-table": "Таблица добычи",
@@ -12,7 +15,6 @@
   "preview": "Визуализировать",
   "preview.depth": "Глубина",
   "preview.scale": "Размер",
-  "preview.show_density": "Показать плотность",
   "preview.width": "Ширина",
   "redo": "Повторить",
   "reset": "Сбросить",

src/locales/sk.json

@@ -8,15 +8,12 @@
   "dimension-type": "Typ dimenzie",
   "dimension": "Dimenzia",
   "download": "Stiahnuť",
-  "error.block_state.missing_property": "Chýba údaj kocky \"%0%\"",
   "fields": "Polia",
   "github": "GitHub",
   "home": "Domov",
   "item-modifier": "Úprava itemov",
   "language": "Jazyk",
   "loot-table": "Zoznam lupov",
-  "maximize": "Maximalizovať",
-  "minimize": "Minimalizovať",
   "not_found.description": "Stránka ktorú ste vyhľadali neexistuje.",
   "predicate": "Predikát",
   "redo": "Znovu",
@@ -30,7 +27,6 @@
   "title.home": "Data Packové Generátory",
   "presets": "Prednastavenia",
   "preview": "Vizualizovať",
-  "preview.show_density": "Zobraziť hustotu",
   "preview.scale": "Veľkosť",
   "preview.depth": "Hĺbka",
   "preview.width": "Šírka",

src/locales/zh-cn.json

@@ -5,6 +5,9 @@
   "dimension-type": "维度类型",
   "download": "下载",
   "fields": "字段",
+  "indentation.2_spaces": "2 空格缩进",
+  "indentation.4_spaces": "4 空格缩进",
+  "indentation.tabs": "Tab 缩进",
   "item-modifier": "物品修饰器",
   "language": "语言",
   "loot-table": "战利品表",