akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-24 07:37:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Close #537 implement alphabetical sort in output

Browse Source
This commit is contained in:
Misode
2024-10-04 16:42:47 +02:00
parent 22c8566819
commit fab3088799
3 changed files with 37 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/components/generator/SourcePanel.tsx
View File

@@ -1,10 +1,10 @@
import { DataModel } from '@mcschema/core'
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
import { useLocale } from '../../contexts/index.js'
import { useModel } from '../../hooks/index.js'
import { useLocalStorage, useModel } from '../../hooks/index.js'
import { getOutput } from '../../schema/transformOutput.js'
import type { BlockStateRegistry } from '../../services/index.js'
import { getSourceFormats, getSourceIndent, getSourceIndents, parseSource, stringifySource } from '../../services/index.js'
import { getSourceFormats, getSourceIndent, getSourceIndents, parseSource, sortData, stringifySource } from '../../services/index.js'
import { Store } from '../../Store.js'
import { message } from '../../Utils.js'
import { Btn, BtnMenu } from '../index.js'
@@ -30,6 +30,7 @@ export function SourcePanel({ name, model, blockStates, doCopy, doDownload, doIm
const { locale } = useLocale()
const [indent, setIndent] = useState(Store.getIndent())
const [format, setFormat] = useState(Store.getFormat())
const [sort, setSort] = useLocalStorage('misode_output_sort', 'schema')
const [highlighting, setHighlighting] = useState(Store.getHighlighting())
const [braceLoaded, setBraceLoaded] = useState(false)
const download = useRef<HTMLAnchorElement>(null)
@@ -40,9 +41,12 @@ export function SourcePanel({ name, model, blockStates, doCopy, doDownload, doIm
const editor = useRef<Editor>()
const getSerializedOutput = useCallback((model: DataModel, blockStates: BlockStateRegistry) => {
const data = getOutput(model, blockStates)
let data = getOutput(model, blockStates)
if (sort === 'alphabetically') {
data = sortData(data)
}
return stringifySource(data, format, indent)
}, [indent, format])
}, [indent, format, sort])
useEffect(() => {
retransform.current = () => {
@@ -80,7 +84,7 @@ export function SourcePanel({ name, model, blockStates, doCopy, doDownload, doIm
console.error(e)
}
}
}, [model, blockStates, indent, format, highlighting])
}, [model, blockStates, indent, format, sort, highlighting])
useEffect(() => {
if (highlighting) {
@@ -156,7 +160,7 @@ export function SourcePanel({ name, model, blockStates, doCopy, doDownload, doIm
editor.current.configure(indent, format === 'snbt' ? 'yaml' : format)
retransform.current()
}
}, [indent, format, highlighting, braceLoaded])
}, [indent, format, sort, highlighting, braceLoaded])
useEffect(() => {
if (doCopy && model && blockStates) {
@@ -210,6 +214,8 @@ export function SourcePanel({ name, model, blockStates, doCopy, doDownload, doIm
<Btn label={locale(`format.${key}`)} active={format === key}
onClick={() => changeFormat(key)} />)}
<hr />
<Btn icon={sort === 'alphabetically' ? 'square_fill' : 'square'} label={locale('sort_alphabetically')}
onClick={() => setSort(sort === 'alphabetically' ? 'schema' : 'alphabetically')} />
<Btn icon={highlighting ? 'square_fill' : 'square'} label={locale('highlighting')}
onClick={() => changeHighlighting(!highlighting)} />
</BtnMenu>