mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-23 07:10:41 +00:00
Use preact to render the tree (#155)
* Use preact to render the tree * More changes to renderHtml
This commit is contained in:
Misode
GitHub
11
package-lock.json
generated
11
package-lock.json
generated
@@ -14,6 +14,7 @@
|
||||
"@mcschema/java-1.16": "^0.6.3",
|
||||
"@mcschema/java-1.17": "^0.2.23",
|
||||
"@mcschema/locales": "^0.1.20",
|
||||
"rfdc": "^1.3.0",
|
||||
"seedrandom": "^3.0.5",
|
||||
"split.js": "^1.5.11"
|
||||
},
|
||||
@@ -2084,6 +2085,11 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/rfdc": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
|
||||
"integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA=="
|
||||
},
|
||||
"node_modules/rimraf": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
||||
@@ -4070,6 +4076,11 @@
|
||||
"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
|
||||
"dev": true
|
||||
},
|
||||
"rfdc": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
|
||||
"integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA=="
|
||||
},
|
||||
"rimraf": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
"@mcschema/java-1.16": "^0.6.3",
|
||||
"@mcschema/java-1.17": "^0.2.23",
|
||||
"@mcschema/locales": "^0.1.20",
|
||||
"rfdc": "^1.3.0",
|
||||
"seedrandom": "^3.0.5",
|
||||
"split.js": "^1.5.11"
|
||||
},
|
||||
|
||||
@@ -11,7 +11,7 @@ type BtnInputProps = {
|
||||
onChange?: (value: string) => unknown,
|
||||
}
|
||||
export function BtnInput({ icon, label, large, type, doSelect, value, onChange }: BtnInputProps) {
|
||||
const onKeyUp = onChange === undefined ? () => {} : (e: any) => {
|
||||
const onInput = onChange === undefined ? () => {} : (e: any) => {
|
||||
const value = (e.target as HTMLInputElement).value
|
||||
if (type !== 'number' || (!value.endsWith('.') && !isNaN(Number(value)))) {
|
||||
onChange?.(value)
|
||||
@@ -28,6 +28,6 @@ export function BtnInput({ icon, label, large, type, doSelect, value, onChange }
|
||||
return <div class={`btn btn-input ${large ? 'large-input' : ''}`} onClick={e => e.stopPropagation()}>
|
||||
{icon && Octicon[icon]}
|
||||
{label && <span>{label}</span>}
|
||||
<input ref={ref} type="text" value={value} onKeyUp={onKeyUp} />
|
||||
<input ref={ref} type="text" value={value} onInput={onInput} />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { ComponentChildren } from 'preact'
|
||||
import { useEffect, useState } from 'preact/hooks'
|
||||
import type { Octicon } from '.'
|
||||
import { Btn } from '.'
|
||||
import { useFocus } from '../hooks'
|
||||
|
||||
type BtnMenuProps = {
|
||||
icon?: keyof typeof Octicon,
|
||||
@@ -10,23 +10,10 @@ type BtnMenuProps = {
|
||||
children: ComponentChildren,
|
||||
}
|
||||
export function BtnMenu({ icon, label, relative, children }: BtnMenuProps) {
|
||||
const [active, setActive] = useState(false)
|
||||
|
||||
const hider = () => {
|
||||
setActive(false)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (active) {
|
||||
document.body.addEventListener('click', hider)
|
||||
}
|
||||
return () => {
|
||||
document.body.removeEventListener('click', hider)
|
||||
}
|
||||
}, [active])
|
||||
const [active, setActive] = useFocus()
|
||||
|
||||
return <div class={`btn-menu${relative === false ? ' no-relative' : ''}`}>
|
||||
<Btn icon={icon} label={label} onClick={() => setActive(true)} />
|
||||
<Btn icon={icon} label={label} onClick={setActive} />
|
||||
{active && <div class="btn-group">
|
||||
{children}
|
||||
</div>}
|
||||
|
||||
@@ -4,6 +4,7 @@ export const Octicon = {
|
||||
arrow_right: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"></path></svg>,
|
||||
chevron_down: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"></path></svg>,
|
||||
chevron_right: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"></path></svg>,
|
||||
chevron_up: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.22 9.78a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0l4.25 4.25a.75.75 0 01-1.06 1.06L8 6.06 4.28 9.78a.75.75 0 01-1.06 0z"></path></svg>,
|
||||
clippy: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>,
|
||||
code: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z"></path></svg>,
|
||||
dash: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 8a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H2.75A.75.75 0 012 8z"></path></svg>,
|
||||
@@ -14,17 +15,21 @@ export const Octicon = {
|
||||
gear: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.429 1.525a6.593 6.593 0 011.142 0c.036.003.108.036.137.146l.289 1.105c.147.56.55.967.997 1.189.174.086.341.183.501.29.417.278.97.423 1.53.27l1.102-.303c.11-.03.175.016.195.046.219.31.41.641.573.989.014.031.022.11-.059.19l-.815.806c-.411.406-.562.957-.53 1.456a4.588 4.588 0 010 .582c-.032.499.119 1.05.53 1.456l.815.806c.08.08.073.159.059.19a6.494 6.494 0 01-.573.99c-.02.029-.086.074-.195.045l-1.103-.303c-.559-.153-1.112-.008-1.529.27-.16.107-.327.204-.5.29-.449.222-.851.628-.998 1.189l-.289 1.105c-.029.11-.101.143-.137.146a6.613 6.613 0 01-1.142 0c-.036-.003-.108-.037-.137-.146l-.289-1.105c-.147-.56-.55-.967-.997-1.189a4.502 4.502 0 01-.501-.29c-.417-.278-.97-.423-1.53-.27l-1.102.303c-.11.03-.175-.016-.195-.046a6.492 6.492 0 01-.573-.989c-.014-.031-.022-.11.059-.19l.815-.806c.411-.406.562-.957.53-1.456a4.587 4.587 0 010-.582c.032-.499-.119-1.05-.53-1.456l-.815-.806c-.08-.08-.073-.159-.059-.19a6.44 6.44 0 01.573-.99c.02-.029.086-.075.195-.045l1.103.303c.559.153 1.112.008 1.529-.27.16-.107.327-.204.5-.29.449-.222.851-.628.998-1.189l.289-1.105c.029-.11.101-.143.137-.146zM8 0c-.236 0-.47.01-.701.03-.743.065-1.29.615-1.458 1.261l-.29 1.106c-.017.066-.078.158-.211.224a5.994 5.994 0 00-.668.386c-.123.082-.233.09-.3.071L3.27 2.776c-.644-.177-1.392.02-1.82.63a7.977 7.977 0 00-.704 1.217c-.315.675-.111 1.422.363 1.891l.815.806c.05.048.098.147.088.294a6.084 6.084 0 000 .772c.01.147-.038.246-.088.294l-.815.806c-.474.469-.678 1.216-.363 1.891.2.428.436.835.704 1.218.428.609 1.176.806 1.82.63l1.103-.303c.066-.019.176-.011.299.071.213.143.436.272.668.386.133.066.194.158.212.224l.289 1.106c.169.646.715 1.196 1.458 1.26a8.094 8.094 0 001.402 0c.743-.064 1.29-.614 1.458-1.26l.29-1.106c.017-.066.078-.158.211-.224a5.98 5.98 0 00.668-.386c.123-.082.233-.09.3-.071l1.102.302c.644.177 1.392-.02 1.82-.63.268-.382.505-.789.704-1.217.315-.675.111-1.422-.364-1.891l-.814-.806c-.05-.048-.098-.147-.088-.294a6.1 6.1 0 000-.772c-.01-.147.039-.246.088-.294l.814-.806c.475-.469.679-1.216.364-1.891a7.992 7.992 0 00-.704-1.218c-.428-.609-1.176-.806-1.82-.63l-1.103.303c-.066.019-.176.011-.299-.071a5.991 5.991 0 00-.668-.386c-.133-.066-.194-.158-.212-.224L10.16 1.29C9.99.645 9.444.095 8.701.031A8.094 8.094 0 008 0zm1.5 8a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM11 8a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>,
|
||||
globe: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.543 7.25h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.506 6.506 0 00-4.666 5.5zm2.733 1.5H1.543a6.506 6.506 0 004.666 5.5 11.13 11.13 0 01-.352-.552c-.715-1.192-1.437-2.874-1.581-4.948zm1.504 0h4.44a9.637 9.637 0 01-1.363 4.177c-.306.51-.612.919-.857 1.215a9.978 9.978 0 01-.857-1.215A9.637 9.637 0 015.78 8.75zm4.44-1.5H5.78a9.637 9.637 0 011.363-4.177c.306-.51.612-.919.857-1.215.245.296.55.705.857 1.215A9.638 9.638 0 0110.22 7.25zm1.504 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.506 6.506 0 004.666-5.5h-2.733zm2.733-1.5h-2.733c-.144-2.074-.866-3.756-1.58-4.948a11.738 11.738 0 00-.353-.552 6.506 6.506 0 014.666 5.5zM8 0a8 8 0 100 16A8 8 0 008 0z"></path></svg>,
|
||||
history: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"></path></svg>,
|
||||
info: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"></path></svg>,
|
||||
issue_opened: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>,
|
||||
kebab_horizontal: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>,
|
||||
link: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>,
|
||||
mark_github: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>,
|
||||
moon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M9.598 1.591a.75.75 0 01.785-.175 7 7 0 11-8.967 8.967.75.75 0 01.961-.96 5.5 5.5 0 007.046-7.046.75.75 0 01.175-.786zm1.616 1.945a7 7 0 01-7.678 7.678 5.5 5.5 0 107.678-7.678z"></path></svg>,
|
||||
play: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM6.379 5.227A.25.25 0 006 5.442v5.117a.25.25 0 00.379.214l4.264-2.559a.25.25 0 000-.428L6.379 5.227z"></path></svg>,
|
||||
plus: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 2a.75.75 0 01.75.75v4.5h4.5a.75.75 0 010 1.5h-4.5v4.5a.75.75 0 01-1.5 0v-4.5h-4.5a.75.75 0 010-1.5h4.5v-4.5A.75.75 0 018 2z"></path></svg>,
|
||||
plus_circle: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"></path></svg>,
|
||||
search: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg>,
|
||||
sun: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 10.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM8 12a4 4 0 100-8 4 4 0 000 8zM8 0a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V.75A.75.75 0 018 0zm0 13a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 018 13zM2.343 2.343a.75.75 0 011.061 0l1.06 1.061a.75.75 0 01-1.06 1.06l-1.06-1.06a.75.75 0 010-1.06zm9.193 9.193a.75.75 0 011.06 0l1.061 1.06a.75.75 0 01-1.06 1.061l-1.061-1.06a.75.75 0 010-1.061zM16 8a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0116 8zM3 8a.75.75 0 01-.75.75H.75a.75.75 0 010-1.5h1.5A.75.75 0 013 8zm10.657-5.657a.75.75 0 010 1.061l-1.061 1.06a.75.75 0 11-1.06-1.06l1.06-1.06a.75.75 0 011.06 0zm-9.193 9.193a.75.75 0 010 1.06l-1.06 1.061a.75.75 0 11-1.061-1.06l1.06-1.061a.75.75 0 011.061 0z"></path></svg>,
|
||||
sync: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 2.5a5.487 5.487 0 00-4.131 1.869l1.204 1.204A.25.25 0 014.896 6H1.25A.25.25 0 011 5.75V2.104a.25.25 0 01.427-.177l1.38 1.38A7.001 7.001 0 0114.95 7.16a.75.75 0 11-1.49.178A5.501 5.501 0 008 2.5zM1.705 8.005a.75.75 0 01.834.656 5.501 5.501 0 009.592 2.97l-1.204-1.204a.25.25 0 01.177-.427h3.646a.25.25 0 01.25.25v3.646a.25.25 0 01-.427.177l-1.38-1.38A7.001 7.001 0 011.05 8.84a.75.75 0 01.656-.834z"></path></svg>,
|
||||
tag: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg>,
|
||||
three_bars: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z"></path></svg>,
|
||||
trashcan: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>,
|
||||
unfold: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z"></path></svg>,
|
||||
upload: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.53 1.22a.75.75 0 00-1.06 0L3.72 4.97a.75.75 0 001.06 1.06l2.47-2.47v6.69a.75.75 0 001.5 0V3.56l2.47 2.47a.75.75 0 101.06-1.06L8.53 1.22zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"></path></svg>,
|
||||
x: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>,
|
||||
|
||||
@@ -49,6 +49,9 @@ export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload
|
||||
useModel(model, () => {
|
||||
retransform.current()
|
||||
})
|
||||
useEffect(() => {
|
||||
if (model) retransform.current()
|
||||
}, [model])
|
||||
|
||||
useEffect(() => {
|
||||
retransform.current()
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import type { DataModel } from '@mcschema/core'
|
||||
import { ModelPath } from '@mcschema/core'
|
||||
import { useEffect, useRef } from 'preact/hooks'
|
||||
import type { JSX } from 'preact'
|
||||
import { useErrorBoundary, useMemo, useRef, useState } from 'preact/hooks'
|
||||
import rfdc from 'rfdc'
|
||||
import { useModel } from '../hooks'
|
||||
import { locale } from '../Locales'
|
||||
import { Mounter } from '../schema/Mounter'
|
||||
import { renderHtml } from '../schema/renderHtml'
|
||||
import type { BlockStateRegistry, VersionId } from '../Schemas'
|
||||
const clone = rfdc()
|
||||
|
||||
type TreePanelProps = {
|
||||
lang: string,
|
||||
@@ -14,44 +15,29 @@ type TreePanelProps = {
|
||||
blockStates: BlockStateRegistry | null,
|
||||
onError: (message: string) => unknown,
|
||||
}
|
||||
export function Tree({ lang, model, version, blockStates, onError }: TreePanelProps) {
|
||||
const tree = useRef<HTMLDivElement>(null)
|
||||
const redraw = useRef<Function>()
|
||||
export function Tree({ lang, model, blockStates, onError }: TreePanelProps) {
|
||||
if (!model || !blockStates) return <></>
|
||||
|
||||
useEffect(() => {
|
||||
redraw.current = () => {
|
||||
if (!model || !blockStates) return
|
||||
try {
|
||||
const mounter = new Mounter()
|
||||
const props = { loc: locale.bind(null, lang), version, mounter, blockStates }
|
||||
const path = new ModelPath(model)
|
||||
const rendered = model.schema.hook(renderHtml, path, model.data, props)
|
||||
const category = model.schema.category(path)
|
||||
const type = model.schema.type(path)
|
||||
let html = rendered[2]
|
||||
if (rendered[1]) {
|
||||
html = `<div class="node ${type}-node" ${category ? `data-category="${category}"` : ''}>
|
||||
<div class="node-header">${rendered[0]}${rendered[1]}</div>
|
||||
<div class="node-body">${rendered[2]}</div>
|
||||
</div>`
|
||||
}
|
||||
tree.current.innerHTML = html
|
||||
mounter.mounted(tree.current)
|
||||
} catch (e) {
|
||||
onError(`Error rendering the tree: ${e.message}`)
|
||||
console.error(e)
|
||||
tree.current.innerHTML = ''
|
||||
}
|
||||
}
|
||||
const [error] = useErrorBoundary(e => {
|
||||
onError(`Error rendering the tree: ${e.message}`)
|
||||
console.error(e)
|
||||
})
|
||||
if (error) return <></>
|
||||
|
||||
const [state, setState] = useState(0)
|
||||
useModel(model, () => {
|
||||
redraw.current()
|
||||
setState(state => state + 1)
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
redraw.current()
|
||||
}, [lang, model, blockStates])
|
||||
const path = new ModelPath(model)
|
||||
const tree = useRef<JSX.Element | null>(null)
|
||||
useMemo(() => {
|
||||
const [prefix, suffix, body] = model.schema.hook(renderHtml, path, clone(model.data), lang, blockStates)
|
||||
tree.current = suffix?.props?.children.some((c: any) => c) ? <div class={`node ${model.schema.type(path)}-node`} data-category={model.schema.category(path)}>
|
||||
<div class="node-header">{prefix}{suffix}</div>
|
||||
<div class="node-body">{body}</div>
|
||||
</div> : body
|
||||
}, [lang, model, blockStates, state])
|
||||
|
||||
return <div ref={tree} class="tree"></div>
|
||||
return <div class="tree">{tree.current}</div>
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
export * from './useFocus'
|
||||
export * from './useModel'
|
||||
export * from './useOnDrag'
|
||||
export * from './useOnHover'
|
||||
|
||||
20
src/app/hooks/useFocus.ts
Normal file
20
src/app/hooks/useFocus.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { useEffect, useState } from 'preact/hooks'
|
||||
|
||||
export function useFocus(): [boolean, () => unknown] {
|
||||
const [active, setActive] = useState(false)
|
||||
|
||||
const hider = () => {
|
||||
setActive(false)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (active) {
|
||||
document.body.addEventListener('click', hider)
|
||||
}
|
||||
return () => {
|
||||
document.body.removeEventListener('click', hider)
|
||||
}
|
||||
}, [active])
|
||||
|
||||
return [active, () => setActive(true)]
|
||||
}
|
||||
@@ -12,7 +12,6 @@ export function useModel(model: DataModel | undefined | null, invalidated: (mode
|
||||
|
||||
useEffect(() => {
|
||||
model?.addListener(listener)
|
||||
listener.invalidated()
|
||||
return () => {
|
||||
model?.removeListener(listener)
|
||||
}
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
export const Octicon = {
|
||||
chevron_down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"></path></svg>',
|
||||
chevron_up: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.22 9.78a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0l4.25 4.25a.75.75 0 01-1.06 1.06L8 6.06 4.28 9.78a.75.75 0 01-1.06 0z"></path></svg>',
|
||||
clippy: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>',
|
||||
info: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"></path></svg>',
|
||||
issue_opened: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>',
|
||||
plus_circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"></path></svg>',
|
||||
trashcan: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>',
|
||||
}
|
||||
@@ -1,435 +0,0 @@
|
||||
import type { EnumOption, Hook, ValidationOption } from '@mcschema/core'
|
||||
import { DataModel, MapNode, ModelPath, ObjectNode, Path, relativePath, StringNode } from '@mcschema/core'
|
||||
import type { Localize } from '../Locales'
|
||||
import type { BlockStateRegistry, VersionId } from '../Schemas'
|
||||
import { hexId, htmlEncode } from '../Utils'
|
||||
import type { Mounter } from './Mounter'
|
||||
import { Octicon } from './Octicon'
|
||||
|
||||
export type TreeProps = {
|
||||
loc: Localize,
|
||||
mounter: Mounter,
|
||||
version: VersionId,
|
||||
blockStates: BlockStateRegistry,
|
||||
}
|
||||
|
||||
declare var ResizeObserver: any
|
||||
|
||||
const selectRegistries = ['loot_table.type', 'loot_entry.type', 'function.function', 'condition.condition', 'criterion.trigger', 'dimension.generator.type', 'dimension.generator.biome_source.type', 'carver.type', 'feature.type', 'decorator.type', 'feature.tree.minimum_size.type', 'block_state_provider.type', 'trunk_placer.type', 'foliage_placer.type', 'tree_decorator.type', 'int_provider.type', 'float_provider.type', 'height_provider.type', 'structure_feature.type', 'surface_builder.type', 'processor.processor_type', 'rule_test.predicate_type', 'pos_rule_test.predicate_type', 'template_element.element_type', 'block_placer.type']
|
||||
const hiddenFields = ['number_provider.type', 'score_provider.type', 'nbt_provider.type', 'int_provider.type', 'float_provider.type', 'height_provider.type']
|
||||
const flattenedFields = ['feature.config', 'decorator.config', 'int_provider.value', 'float_provider.value', 'block_state_provider.simple_state_provider.state', 'block_state_provider.rotated_block_provider.state', 'block_state_provider.weighted_state_provider.entries.entry.data', 'rule_test.block_state', 'structure_feature.config', 'surface_builder.config', 'template_pool.elements.entry.element']
|
||||
const inlineFields = ['loot_entry.type', 'function.function', 'condition.condition', 'criterion.trigger', 'dimension.generator.type', 'dimension.generator.biome_source.type', 'feature.type', 'decorator.type', 'block_state_provider.type', 'feature.tree.minimum_size.type', 'trunk_placer.type', 'foliage_placer.type', 'tree_decorator.type', 'block_placer.type', 'rule_test.predicate_type', 'processor.processor_type', 'template_element.element_type', 'nbt_operation.op', 'number_provider.value', 'score_provider.name', 'score_provider.target', 'nbt_provider.source', 'nbt_provider.target']
|
||||
const nbtFields = ['function.set_nbt.tag', 'advancement.display.icon.nbt', 'text_component_object.nbt', 'entity.nbt', 'block.nbt', 'item.nbt']
|
||||
|
||||
/**
|
||||
* Secondary model used to remember the keys of a map
|
||||
*/
|
||||
const keysModel = new DataModel(MapNode(
|
||||
StringNode(),
|
||||
StringNode()
|
||||
), { historyMax: 0 })
|
||||
|
||||
/**
|
||||
* Renders the node and handles events to update the model
|
||||
* @returns string HTML representation of this node using the given data
|
||||
*/
|
||||
export const renderHtml: Hook<[any, TreeProps], [string, string, string]> = {
|
||||
base() {
|
||||
return ['', '', '']
|
||||
},
|
||||
|
||||
boolean({ node }, path, value, props) {
|
||||
const onFalse = props.mounter.onClick(() => {
|
||||
path.model.set(path, node.optional() && value === false ? undefined : false)
|
||||
})
|
||||
const onTrue = props.mounter.onClick(() => {
|
||||
path.model.set(path, node.optional() && value === true ? undefined : true)
|
||||
})
|
||||
return ['', `<button${value === false ? ' class="selected"' : ' '}
|
||||
data-id="${onFalse}">${htmlEncode(props.loc('false'))}</button>
|
||||
<button${value === true ? ' class="selected"' : ' '}
|
||||
data-id="${onTrue}">${htmlEncode(props.loc('true'))}</button>`, '']
|
||||
},
|
||||
|
||||
choice({ choices, config, switchNode }, path, value, props) {
|
||||
const choice = switchNode.activeCase(path, true)
|
||||
const pathWithContext = (config?.context) ? new ModelPath(path.getModel(), new Path(path.getArray(), [config.context])) : path
|
||||
const pathWithChoiceContext = config?.choiceContext ? new Path([], [config.choiceContext]) : config?.context ? new Path([], [config.context]) : path
|
||||
|
||||
const [prefix, suffix, body] = choice.node.hook(this, pathWithContext, value, props)
|
||||
if (choices.length === 1) {
|
||||
return [prefix, suffix, body]
|
||||
}
|
||||
|
||||
const inputId = props.mounter.register(el => {
|
||||
(el as HTMLSelectElement).value = choice.type
|
||||
el.addEventListener('change', () => {
|
||||
const c = choices.find(c => c.type === (el as HTMLSelectElement).value) ?? choice
|
||||
path.model.set(path, c.change ? c.change(value) : c.node.default())
|
||||
})
|
||||
})
|
||||
const inject = `<select data-id="${inputId}">
|
||||
${choices.map(c => `<option value="${htmlEncode(c.type)}">
|
||||
${htmlEncode(pathLocale(props.loc, pathWithChoiceContext.contextPush(c.type)))}
|
||||
</option>`).join('')}
|
||||
</select>`
|
||||
|
||||
return [prefix, inject + suffix, body]
|
||||
},
|
||||
|
||||
list({ children }, path, value, props) {
|
||||
const onAdd = props.mounter.onClick(() => {
|
||||
if (!Array.isArray(value)) value = []
|
||||
path.model.set(path, [children.default(), ...value])
|
||||
})
|
||||
const onAddBottom = props.mounter.onClick(() => {
|
||||
if (!Array.isArray(value)) value = []
|
||||
path.model.set(path, [...value, children.default()])
|
||||
})
|
||||
const suffix = `<button class="add" data-id="${onAdd}" aria-label="${props.loc('button.add')}">${Octicon.plus_circle}</button>`
|
||||
|
||||
let body = ''
|
||||
if (Array.isArray(value)) {
|
||||
body = value.map((childValue, index) => {
|
||||
const onRemove = props.mounter.onClick(() => path.model.set(path.push(index), undefined))
|
||||
const onMoveUp = props.mounter.onClick(() => {
|
||||
[value[index - 1], value[index]] = [value[index], value[index - 1]]
|
||||
path.model.set(path, value)
|
||||
})
|
||||
const onMoveDown = props.mounter.onClick(() => {
|
||||
[value[index + 1], value[index]] = [value[index], value[index + 1]]
|
||||
path.model.set(path, value)
|
||||
})
|
||||
const childPath = path.push(index).contextPush('entry')
|
||||
const category = children.category(childPath)
|
||||
const [cPrefix, cSuffix, cBody] = children.hook(this, childPath, childValue, props)
|
||||
return `<div class="node-entry"><div class="node ${children.type(childPath)}-node" ${category ? `data-category="${htmlEncode(category)}"` : ''}>
|
||||
<div class="node-header">
|
||||
${error(props.loc, childPath, props.mounter)}
|
||||
${help(props.loc, childPath, props.mounter)}
|
||||
<button class="remove" data-id="${onRemove}" aria-label="${props.loc('button.remove')}">${Octicon.trashcan}</button>
|
||||
${value.length <= 1 ? '' : `<div class="node-move">
|
||||
<button class="move" data-id="${onMoveUp}" ${index === 0 ? 'disabled' : ''}>${Octicon.chevron_up}</button>
|
||||
<button class="move" data-id="${onMoveDown}" ${index === value.length - 1 ? 'disabled' : ''}>${Octicon.chevron_down}</button>
|
||||
</div>`}
|
||||
${cPrefix}
|
||||
<label ${contextMenu(props.loc, childPath, props.mounter)}>
|
||||
${htmlEncode(pathLocale(props.loc, childPath, `${index}`))}
|
||||
</label>
|
||||
${cSuffix}
|
||||
</div>
|
||||
${cBody ? `<div class="node-body">${cBody}</div>` : ''}
|
||||
</div>
|
||||
</div>`
|
||||
}).join('')
|
||||
if (value.length > 2) {
|
||||
body += `<div class="node-entry">
|
||||
<div class="node node-header">
|
||||
<button class="add" data-id="${onAddBottom}" aria-label="${props.loc('button.add')}">${Octicon.plus_circle}</button>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
return ['', suffix, body]
|
||||
},
|
||||
|
||||
map({ children, keys, config }, path, value, props) {
|
||||
const keyPath = new ModelPath(keysModel, new Path([hashString(path.toString())]))
|
||||
const onAdd = props.mounter.onClick(() => {
|
||||
const key = keyPath.get()
|
||||
path.model.set(path.push(key), children.default())
|
||||
})
|
||||
const blockState = config.validation?.validator === 'block_state_map'? props.blockStates?.[relativePath(path, config.validation.params.id).get()] : null
|
||||
const keysSchema = blockState?.properties
|
||||
? StringNode(null!, { enum: Object.keys(blockState.properties ?? {}) })
|
||||
: keys
|
||||
const keyRendered = keysSchema.hook(this, keyPath, keyPath.get() ?? '', props)
|
||||
const suffix = keyRendered[1] + `<button class="add" data-id="${onAdd}" aria-label="${props.loc('button.add')}">${Octicon.plus_circle}</button>`
|
||||
if (blockState && path.last() === 'Properties') {
|
||||
if (typeof value !== 'object') value = {}
|
||||
const properties = Object.entries(blockState.properties ?? {})
|
||||
.map(([key, values]) => [key, StringNode(null!, { enum: values })])
|
||||
Object.entries(blockState.properties ?? {}).forEach(([key, values]) => {
|
||||
if (typeof value[key] !== 'string') {
|
||||
path.model.errors.add(path.push(key), 'error.expected_string')
|
||||
} else if (!values.includes(value[key])) {
|
||||
path.model.errors.add(path.push(key), 'error.invalid_enum_option', value[key])
|
||||
}
|
||||
})
|
||||
return ObjectNode(Object.fromEntries(properties)).hook(this, path, value, props)
|
||||
}
|
||||
let body = ''
|
||||
if (typeof value === 'object' && value !== undefined) {
|
||||
body = Object.keys(value)
|
||||
.map(key => {
|
||||
const onRemove = props.mounter.onClick(() => path.model.set(path.push(key), undefined))
|
||||
const childPath = path.modelPush(key)
|
||||
const category = children.category(childPath)
|
||||
const childrenSchema = blockState
|
||||
? StringNode(null!, { enum: blockState.properties?.[key] ?? [] })
|
||||
: children
|
||||
if (blockState?.properties?.[key] && !blockState.properties?.[key].includes(value[key])) {
|
||||
path.model.errors.add(childPath, 'error.invalid_enum_option', value[key])
|
||||
}
|
||||
const [cPrefix, cSuffix, cBody] = childrenSchema.hook(this, childPath, value[key], props)
|
||||
return `<div class="node-entry"><div class="node ${children.type(childPath)}-node" ${category ? `data-category="${htmlEncode(category)}"` : ''}>
|
||||
<div class="node-header">
|
||||
${error(props.loc, childPath, props.mounter)}
|
||||
${help(props.loc, childPath, props.mounter)}
|
||||
<button class="remove" data-id="${onRemove}" aria-label="${props.loc('button.remove')}">${Octicon.trashcan}</button>
|
||||
${cPrefix}
|
||||
<label ${contextMenu(props.loc, childPath, props.mounter)}>
|
||||
${htmlEncode(key)}
|
||||
</label>
|
||||
${cSuffix}
|
||||
</div>
|
||||
${cBody ? `<div class="node-body">${cBody}</div>` : ''}
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
.join('')
|
||||
}
|
||||
return ['', suffix, body]
|
||||
},
|
||||
|
||||
number({ integer, config }, path, value, { mounter }) {
|
||||
const onChange = mounter.onChange(el => {
|
||||
const value = (el as HTMLInputElement).value
|
||||
const parsed = config?.color
|
||||
? parseInt(value.slice(1), 16)
|
||||
: integer ? parseInt(value) : parseFloat(value)
|
||||
path.model.set(path, parsed)
|
||||
})
|
||||
if (config?.color) {
|
||||
const hex = (value?.toString(16).padStart(6, '0') ?? '000000')
|
||||
return ['', `<input type="color" data-id="${onChange}" value="#${hex}">`, '']
|
||||
}
|
||||
return ['', `<input data-id="${onChange}" value="${value ?? ''}">`, '']
|
||||
},
|
||||
|
||||
object({ node, getActiveFields, getChildModelPath }, path, value, props) {
|
||||
let prefix = ''
|
||||
let suffix = ''
|
||||
if (node.optional()) {
|
||||
if (value === undefined) {
|
||||
suffix = `<button class="collapse closed" data-id="${props.mounter.onClick(() => path.model.set(path, node.default()))}" aria-label="${props.loc('button.expand')}">${Octicon.plus_circle}</button>`
|
||||
} else {
|
||||
suffix = `<button class="collapse open" data-id="${props.mounter.onClick(() => path.model.set(path, undefined))}" aria-label="${props.loc('button.collapse')}">${Octicon.trashcan}</button>`
|
||||
}
|
||||
}
|
||||
let body = ''
|
||||
if (typeof value === 'object' && value !== undefined && (!(node.optional() && value === undefined))) {
|
||||
const activeFields = getActiveFields(path)
|
||||
const activeKeys = Object.keys(activeFields)
|
||||
.filter(k => activeFields[k].enabled(path))
|
||||
body = activeKeys.map(k => {
|
||||
const field = activeFields[k]
|
||||
const childPath = getChildModelPath(path, k)
|
||||
const context = childPath.getContext().join('.')
|
||||
if (hiddenFields.includes(context)) {
|
||||
return ''
|
||||
}
|
||||
|
||||
const category = field.category(childPath)
|
||||
const [cPrefix, cSuffix, cBody] = field.hook(this, childPath, value[k], props)
|
||||
if (cPrefix.length === 0 && cSuffix.length === 0 && cBody.length === 0) {
|
||||
return ''
|
||||
}
|
||||
|
||||
const isFlattened = field.type(childPath) === 'object' && flattenedFields.includes(context)
|
||||
const isInlined = inlineFields.includes(context)
|
||||
if (isFlattened || isInlined) {
|
||||
prefix += `${error(props.loc, childPath, props.mounter)}${help(props.loc, childPath, props.mounter)}${cPrefix}`
|
||||
suffix += cSuffix
|
||||
return isFlattened ? cBody : ''
|
||||
}
|
||||
|
||||
return `<div class="node ${field.type(childPath)}-node ${cBody ? '' : 'no-body'}" ${category ? `data-category="${htmlEncode(category)}"` : ''}>
|
||||
<div class="node-header">
|
||||
${error(props.loc, childPath, props.mounter)}
|
||||
${help(props.loc, childPath, props.mounter)}
|
||||
${cPrefix}
|
||||
<label ${contextMenu(props.loc, childPath, props.mounter)}>
|
||||
${pathLocale(props.loc, childPath)}
|
||||
</label>
|
||||
${cSuffix}
|
||||
</div>
|
||||
${cBody ? `<div class="node-body">${cBody}</div>` : ''}
|
||||
</div>`
|
||||
})
|
||||
.join('')
|
||||
}
|
||||
return [prefix, suffix, body]
|
||||
},
|
||||
|
||||
string({ node, getValues, config }, path, value, props) {
|
||||
const inputId = props.mounter.register(el => {
|
||||
(el as HTMLSelectElement).value = value ?? ''
|
||||
el.addEventListener('change', evt => {
|
||||
const newValue = (el as HTMLSelectElement).value
|
||||
path.model.set(path, newValue.length === 0 ? undefined : newValue)
|
||||
evt.stopPropagation()
|
||||
})
|
||||
})
|
||||
let suffix
|
||||
const values = getValues()
|
||||
const context = path.getContext().join('.')
|
||||
if (nbtFields.includes(context)) {
|
||||
const keyPath = new ModelPath(keysModel, new Path([hashString(path.toString())]))
|
||||
const textareaId = props.mounter.register(el => {
|
||||
const textarea = el as HTMLTextAreaElement
|
||||
textarea.value = value ?? ''
|
||||
textarea.addEventListener('change', evt => {
|
||||
const newValue = textarea.value
|
||||
path.model.set(path, newValue.length === 0 ? undefined : newValue)
|
||||
evt.stopPropagation()
|
||||
})
|
||||
const sizes = keyPath.get()
|
||||
if (sizes) {
|
||||
textarea.style.width = `${sizes.split(' ')[0]}px`
|
||||
textarea.style.height = `${sizes.split(' ')[1]}px`
|
||||
}
|
||||
new ResizeObserver(() => {
|
||||
keyPath.set(`${textarea.offsetWidth} ${textarea.offsetHeight}`)
|
||||
}).observe(el)
|
||||
})
|
||||
suffix = `<textarea data-id="${textareaId}"></textarea>`
|
||||
} else if ((isEnum(config) && !config.additional)
|
||||
|| selectRegistries.includes(context) ) {
|
||||
let context = new Path([])
|
||||
if (isEnum(config) && typeof config.enum === 'string') {
|
||||
context = context.contextPush(config.enum)
|
||||
} else if (!isEnum(config) && config?.validator === 'resource' && typeof config.params.pool === 'string') {
|
||||
context = context.contextPush(config.params.pool)
|
||||
}
|
||||
suffix = `<select data-id="${inputId}">
|
||||
${node.optional() ? `<option value="">${props.loc('unset')}</option>` : ''}
|
||||
${values.map(v => `<option value="${htmlEncode(v)}">
|
||||
${pathLocale(props.loc, context.contextPush(v.replace(/^minecraft:/, '')))}
|
||||
</option>`).join('')}
|
||||
</select>`
|
||||
} else if (!isEnum(config) && config?.validator === 'block_state_key') {
|
||||
const blockState = props.blockStates?.[relativePath(path, config.params.id).get()]
|
||||
const values = Object.keys(blockState?.properties ?? {})
|
||||
suffix = `<select data-id="${inputId}">
|
||||
${values.map(v => `<option>${v}</option>`).join('')}
|
||||
</select>`
|
||||
} else {
|
||||
const datalistId = hexId()
|
||||
suffix = `<input data-id="${inputId}" ${values.length === 0 ? '' : `list="${datalistId}"`}>
|
||||
${values.length === 0 ? '' : `<datalist id="${datalistId}">
|
||||
${values.map(v => `<option value="${htmlEncode(v)}">`).join('')}
|
||||
</datalist>`}`
|
||||
}
|
||||
return ['', suffix, '']
|
||||
},
|
||||
}
|
||||
|
||||
function isEnum(value?: ValidationOption | EnumOption): value is EnumOption {
|
||||
return !!(value as any)?.enum
|
||||
}
|
||||
|
||||
function hashString(str: string) {
|
||||
var hash = 0, i, chr
|
||||
for (i = 0; i < str.length; i++) {
|
||||
chr = str.charCodeAt(i)
|
||||
hash = ((hash << 5) - hash) + chr
|
||||
hash |= 0
|
||||
}
|
||||
return hash
|
||||
}
|
||||
|
||||
function pathLocale(loc: Localize, path: Path, ...params: string[]) {
|
||||
const ctx = path.getContext()
|
||||
for (let i = 0; i < ctx.length; i += 1) {
|
||||
const key = ctx.slice(i).join('.')
|
||||
const result = loc(key, ...params)
|
||||
if (key !== result) {
|
||||
return result
|
||||
}
|
||||
}
|
||||
return htmlEncode(ctx[ctx.length - 1])
|
||||
}
|
||||
|
||||
function error(loc: Localize, path: ModelPath, mounter: Mounter) {
|
||||
const e = path.model.errors.get(path, true)
|
||||
if (e.length === 0) return ''
|
||||
const message = e[0].params ? loc(e[0].error, ...e[0].params) : loc(e[0].error)
|
||||
return popupIcon('node-error', 'issue_opened', htmlEncode(message), mounter)
|
||||
}
|
||||
|
||||
function help(loc: Localize, path: Path, mounter: Mounter) {
|
||||
const key = path.contextPush('help').getContext().join('.')
|
||||
const message = loc(key)
|
||||
if (message === key) return ''
|
||||
return popupIcon('node-help', 'info', htmlEncode(message), mounter)
|
||||
}
|
||||
|
||||
const popupIcon = (type: string, icon: keyof typeof Octicon, popup: string, mounter: Mounter) => {
|
||||
const onClick = mounter.onClick(el => {
|
||||
el.getElementsByTagName('span')[0].classList.add('show')
|
||||
document.body.addEventListener('click', () => {
|
||||
el.getElementsByTagName('span')[0].classList.remove('show')
|
||||
}, { capture: true, once: true })
|
||||
})
|
||||
return `<div class="node-icon ${type}" data-id="${onClick}">
|
||||
${Octicon[icon]}
|
||||
<span class="icon-popup">${popup}</span>
|
||||
</div>`
|
||||
}
|
||||
|
||||
const contextMenu = (loc: Localize, path: ModelPath, mounter: Mounter) => {
|
||||
const id = mounter.register(el => {
|
||||
const openMenu = () => {
|
||||
const popup = document.createElement('div')
|
||||
popup.classList.add('node-menu')
|
||||
|
||||
const message = loc(path.contextPush('help').getContext().join('.'))
|
||||
if (!message.endsWith('.help')) {
|
||||
popup.insertAdjacentHTML('beforeend', `<span class="menu-item help-item">${message}</span>`)
|
||||
}
|
||||
|
||||
const context = path.getContext().join('.')
|
||||
popup.insertAdjacentHTML('beforeend', `
|
||||
<div class="menu-item">
|
||||
<span class="btn">${Octicon.clippy}</span>
|
||||
Context: 
|
||||
<span class="menu-item-context">${context}</span>
|
||||
</div>`)
|
||||
popup.querySelector('.menu-item .btn')?.addEventListener('click', () => {
|
||||
const inputEl = document.createElement('input')
|
||||
inputEl.value = context
|
||||
el.appendChild(inputEl)
|
||||
inputEl.select()
|
||||
document.execCommand('copy')
|
||||
el.removeChild(inputEl)
|
||||
})
|
||||
|
||||
el.appendChild(popup)
|
||||
document.body.addEventListener('click', () => {
|
||||
try {el.removeChild(popup)} catch (e) {}
|
||||
}, { capture: true, once: true })
|
||||
document.body.addEventListener('contextmenu', () => {
|
||||
try {el.removeChild(popup)} catch (e) {}
|
||||
}, { capture: true, once: true })
|
||||
}
|
||||
el.addEventListener('contextmenu', evt => {
|
||||
openMenu()
|
||||
evt.preventDefault()
|
||||
})
|
||||
let timer: any = null
|
||||
el.addEventListener('touchstart', () => {
|
||||
timer = setTimeout(() => {
|
||||
openMenu()
|
||||
timer = null
|
||||
}, 800)
|
||||
})
|
||||
el.addEventListener('touchend', () => {
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
timer = null
|
||||
}
|
||||
})
|
||||
})
|
||||
return `data-id="${id}"`
|
||||
}
|
||||
336
src/app/schema/renderHtml.tsx
Normal file
336
src/app/schema/renderHtml.tsx
Normal file
@@ -0,0 +1,336 @@
|
||||
import type { BooleanHookParams, EnumOption, Hook, INode, NumberHookParams, StringHookParams, ValidationOption } from '@mcschema/core'
|
||||
import { DataModel, MapNode, ModelPath, ObjectNode, Path, relativePath, StringNode } from '@mcschema/core'
|
||||
import type { ComponentChildren, JSX } from 'preact'
|
||||
import { Octicon } from '../components/Octicon'
|
||||
import { useFocus } from '../hooks'
|
||||
import { locale } from '../Locales'
|
||||
import type { BlockStateRegistry } from '../Schemas'
|
||||
import { hexId } from '../Utils'
|
||||
|
||||
const selectRegistries = ['loot_table.type', 'loot_entry.type', 'function.function', 'condition.condition', 'criterion.trigger', 'dimension.generator.type', 'dimension.generator.biome_source.type', 'carver.type', 'feature.type', 'decorator.type', 'feature.tree.minimum_size.type', 'block_state_provider.type', 'trunk_placer.type', 'foliage_placer.type', 'tree_decorator.type', 'int_provider.type', 'float_provider.type', 'height_provider.type', 'structure_feature.type', 'surface_builder.type', 'processor.processor_type', 'rule_test.predicate_type', 'pos_rule_test.predicate_type', 'template_element.element_type', 'block_placer.type']
|
||||
const hiddenFields = ['number_provider.type', 'score_provider.type', 'nbt_provider.type', 'int_provider.type', 'float_provider.type', 'height_provider.type']
|
||||
const flattenedFields = ['feature.config', 'decorator.config', 'int_provider.value', 'float_provider.value', 'block_state_provider.simple_state_provider.state', 'block_state_provider.rotated_block_provider.state', 'block_state_provider.weighted_state_provider.entries.entry.data', 'rule_test.block_state', 'structure_feature.config', 'surface_builder.config', 'template_pool.elements.entry.element']
|
||||
const inlineFields = ['loot_entry.type', 'function.function', 'condition.condition', 'criterion.trigger', 'dimension.generator.type', 'dimension.generator.biome_source.type', 'feature.type', 'decorator.type', 'block_state_provider.type', 'feature.tree.minimum_size.type', 'trunk_placer.type', 'foliage_placer.type', 'tree_decorator.type', 'block_placer.type', 'rule_test.predicate_type', 'processor.processor_type', 'template_element.element_type', 'nbt_operation.op', 'number_provider.value', 'score_provider.name', 'score_provider.target', 'nbt_provider.source', 'nbt_provider.target']
|
||||
const nbtFields = ['function.set_nbt.tag', 'advancement.display.icon.nbt', 'text_component_object.nbt', 'entity.nbt', 'block.nbt', 'item.nbt']
|
||||
|
||||
/**
|
||||
* Secondary model used to remember the keys of a map
|
||||
*/
|
||||
const keysModel = new DataModel(MapNode(
|
||||
StringNode(),
|
||||
StringNode()
|
||||
), { historyMax: 0 })
|
||||
|
||||
type JSXTriple = [JSX.Element | null, JSX.Element | null, JSX.Element | null]
|
||||
type RenderHook = Hook<[any, string, BlockStateRegistry], JSXTriple>
|
||||
|
||||
type NodeProps<T> = T & { node: INode<any> } & { path: ModelPath } & { value: any} & { lang: string } & { states: BlockStateRegistry }
|
||||
|
||||
/**
|
||||
* Renders the node and handles events to update the model
|
||||
* @returns string HTML representation of this node using the given data
|
||||
*/
|
||||
export const renderHtml: RenderHook = {
|
||||
base() {
|
||||
return [null, null, null]
|
||||
},
|
||||
|
||||
boolean(params, path, value, lang, states) {
|
||||
return [null, <BooleanSuffix {...{...params, path, value, lang, states}} />, null]
|
||||
},
|
||||
|
||||
choice({ choices, config, switchNode }, path, value, lang, states) {
|
||||
const choice = switchNode.activeCase(path, true) as typeof choices[number]
|
||||
const contextPath = (config?.context) ? new ModelPath(path.getModel(), new Path(path.getArray(), [config.context])) : path
|
||||
const [prefix, suffix, body] = choice.node.hook(this, contextPath, value, lang, states)
|
||||
if (choices.length === 1) {
|
||||
return [prefix, suffix, body]
|
||||
}
|
||||
const choiceContextPath = config?.choiceContext ? new Path([], [config.choiceContext]) : config?.context ? new Path([], [config.context]) : path
|
||||
const set = (value: string) => {
|
||||
const c = choices.find(c => c.type === value) ?? choice
|
||||
console.log(c)
|
||||
path.model.set(path, c.change ? c.change(value) : c.node.default())
|
||||
}
|
||||
const inject = <select value={choice.type} onChange={(e) => set((e.target as HTMLSelectElement).value)}>
|
||||
{choices.map(c => <option value={c.type}>
|
||||
{pathLocale(lang, choiceContextPath.contextPush(c.type))}
|
||||
</option>)}
|
||||
</select>
|
||||
return [prefix, <>{inject}{suffix}</>, body]
|
||||
},
|
||||
|
||||
list({ children }, path, value, lang, states) {
|
||||
const onAdd = () => {
|
||||
if (!Array.isArray(value)) value = []
|
||||
path.model.set(path, [children.default(), ...value])
|
||||
}
|
||||
const onAddBottom = () => {
|
||||
if (!Array.isArray(value)) value = []
|
||||
path.model.set(path, [...value, children.default()])
|
||||
}
|
||||
const suffix = <button class="add" onClick={onAdd}>{Octicon.plus_circle}</button>
|
||||
const body = <>
|
||||
{(value && Array.isArray(value)) && value.map((cValue, index) => {
|
||||
const cPath = path.push(index).contextPush('entry')
|
||||
const onRemove = () => cPath.set(undefined)
|
||||
const onMoveUp = () => {
|
||||
const v = [...value];
|
||||
[v[index - 1], v[index]] = [v[index], v[index - 1]]
|
||||
path.model.set(path, v)
|
||||
}
|
||||
const onMoveDown = () => {
|
||||
const v = [...value];
|
||||
[v[index + 1], v[index]] = [v[index], v[index + 1]]
|
||||
path.model.set(path, v)
|
||||
}
|
||||
return <div class="node-entry">
|
||||
<TreeNode path={cPath} schema={children} value={cValue} lang={lang} states={states}>
|
||||
<button class="remove" onClick={onRemove}>{Octicon.trashcan}</button>
|
||||
{value.length > 1 && <div class="node-move">
|
||||
<button class="move" onClick={onMoveUp} disabled={index === 0}>{Octicon.chevron_up}</button>
|
||||
<button class="move" onClick={onMoveDown} disabled={index === value.length - 1}>{Octicon.chevron_down}</button>
|
||||
</div>}
|
||||
</TreeNode>
|
||||
</div>
|
||||
})}
|
||||
{(value && value.length > 2) && <div class="node-entry">
|
||||
<div class="node node-header">
|
||||
<button class="add" onClick={onAddBottom}>{Octicon.plus_circle}</button>
|
||||
</div>
|
||||
</div>}
|
||||
</>
|
||||
return [null, suffix, body]
|
||||
},
|
||||
|
||||
map({ children, keys, config }, path, value, lang, states) {
|
||||
const keyPath = new ModelPath(keysModel, new Path([hashString(path.toString())]))
|
||||
const onAdd = () => {
|
||||
const key = keyPath.get()
|
||||
path.model.set(path.push(key), children.default())
|
||||
}
|
||||
const blockState = config.validation?.validator === 'block_state_map' ? states?.[relativePath(path, config.validation.params.id).get()] : null
|
||||
const keysSchema = blockState?.properties
|
||||
? StringNode(null!, { enum: Object.keys(blockState.properties ?? {}) })
|
||||
: keys
|
||||
if (blockState && path.last() === 'Properties') {
|
||||
if (typeof value !== 'object') value = {}
|
||||
const properties = Object.entries(blockState.properties ?? {})
|
||||
.map(([key, values]) => [key, StringNode(null!, { enum: values })])
|
||||
Object.entries(blockState.properties ?? {}).forEach(([key, values]) => {
|
||||
if (typeof value[key] !== 'string') {
|
||||
path.model.errors.add(path.push(key), 'error.expected_string')
|
||||
} else if (!values.includes(value[key])) {
|
||||
path.model.errors.add(path.push(key), 'error.invalid_enum_option', value[key])
|
||||
}
|
||||
})
|
||||
return ObjectNode(Object.fromEntries(properties)).hook(this, path, value, lang, states)
|
||||
}
|
||||
const suffix = <>
|
||||
{keysSchema.hook(this, keyPath, keyPath.get() ?? '', lang, states)[1]}
|
||||
<button class="add" onClick={onAdd}>{Octicon.plus_circle}</button>
|
||||
</>
|
||||
const body = <>
|
||||
{typeof value === 'object' && Object.entries(value).map(([key, cValue]) => {
|
||||
const cPath = path.modelPush(key)
|
||||
const cSchema = blockState
|
||||
? StringNode(null!, { enum: blockState.properties?.[key] ?? [] })
|
||||
: children
|
||||
if (blockState?.properties?.[key] && typeof cValue === 'string'
|
||||
&& !blockState.properties?.[key].includes(cValue)) {
|
||||
path.model.errors.add(cPath, 'error.invalid_enum_option', cValue)
|
||||
}
|
||||
const onRemove = () => cPath.set(undefined)
|
||||
return <div class="node-entry" key={key}>
|
||||
<TreeNode schema={cSchema} path={cPath} value={cValue} lang={lang} states={states} label={key}>
|
||||
<button class="remove" onClick={onRemove}>{Octicon.trashcan}</button>
|
||||
</TreeNode>
|
||||
</div>
|
||||
})}
|
||||
</>
|
||||
return [null, suffix, body]
|
||||
},
|
||||
|
||||
number(params, path, value, lang, states) {
|
||||
return [null, <NumberSuffix {...{...params, path, value, lang, states}} />, null]
|
||||
},
|
||||
|
||||
object({ node, getActiveFields, getChildModelPath }, path, value, lang, states) {
|
||||
let prefix: JSX.Element | null = null
|
||||
let suffix: JSX.Element | null = null
|
||||
if (node.optional()) {
|
||||
if (value === undefined) {
|
||||
const onExpand = () => path.set(node.default())
|
||||
suffix = <button class="collapse closed" onClick={onExpand}>{Octicon.plus_circle}</button>
|
||||
} else {
|
||||
const onCollapse = () => path.set(undefined)
|
||||
suffix = <button class="collapse open" onClick={onCollapse}>{Octicon.trashcan}</button>
|
||||
}
|
||||
}
|
||||
const body = <>
|
||||
{(typeof value === 'object' && !(node.optional() && value === undefined)) &&
|
||||
Object.entries(getActiveFields(path))
|
||||
.filter(([_, child]) => child.enabled(path))
|
||||
.map(([key, child]) => {
|
||||
const cPath = getChildModelPath(path, key)
|
||||
const context = cPath.getContext().join('.')
|
||||
if (hiddenFields.includes(context)) return null
|
||||
const [cPrefix, cSuffix, cBody] = child.hook(this, cPath, value[key], lang, states)
|
||||
if (!cPrefix && !cSuffix && !((cBody?.props?.children?.length ?? 0) > 0)) return null
|
||||
const isFlattened = child.type(cPath) === 'object' && flattenedFields.includes(context)
|
||||
const isInlined = inlineFields.includes(context)
|
||||
if (isFlattened || isInlined) {
|
||||
prefix = <>{prefix}<ErrorPopup lang={lang} path={cPath} /><HelpPopup lang={lang} path={cPath} />{cPrefix}</>
|
||||
suffix = <>{suffix}{cSuffix}</>
|
||||
return isFlattened ? cBody : null
|
||||
}
|
||||
return <TreeNode schema={child} path={cPath} value={value[key]} lang={lang} states={states} />
|
||||
})
|
||||
}
|
||||
</>
|
||||
return [prefix, suffix, body]
|
||||
},
|
||||
|
||||
string(params, path, value, lang, states) {
|
||||
return [null, <StringSuffix {...{...params, path, value, lang, states}} />, null]
|
||||
},
|
||||
}
|
||||
|
||||
function BooleanSuffix({ path, node, value, lang }: NodeProps<BooleanHookParams>) {
|
||||
const set = (target: boolean) => {
|
||||
path.model.set(path, node.optional() && value === target ? undefined : target)
|
||||
}
|
||||
return <>
|
||||
<button class={value === false ? 'selected' : ''} onClick={() => set(false)}>{locale(lang, 'false')}</button>
|
||||
<button class={value === true ? 'selected' : ''} onClick={() => set(true)}>{locale(lang, 'true')}</button>
|
||||
</>
|
||||
}
|
||||
|
||||
function NumberSuffix({ path, config, integer, value }: NodeProps<NumberHookParams>) {
|
||||
const onChange = (evt: Event) => {
|
||||
const value = (evt.target as HTMLInputElement).value
|
||||
const parsed = config?.color
|
||||
? parseInt(value.slice(1), 16)
|
||||
: integer ? parseInt(value) : parseFloat(value)
|
||||
path.model.set(path, parsed)
|
||||
}
|
||||
return <input type={config?.color ? 'color' : 'text'} onChange={onChange}
|
||||
value={config?.color ? '#' + value?.toString(16).padStart(6, '0') ?? '#000000' : value ?? ''} />
|
||||
}
|
||||
|
||||
function StringSuffix({ path, getValues, config, node, value, lang, states }: NodeProps<StringHookParams>) {
|
||||
const onChange = (evt: Event) => {
|
||||
const newValue = (evt.target as HTMLSelectElement).value
|
||||
path.model.set(path, newValue.length === 0 ? undefined : newValue)
|
||||
evt.stopPropagation()
|
||||
}
|
||||
const values = getValues()
|
||||
const context = path.getContext().join('.')
|
||||
if (nbtFields.includes(context)) {
|
||||
return <textarea value={value ?? ''} onChange={onChange}></textarea>
|
||||
} else if ((isEnum(config) && !config.additional) || selectRegistries.includes(context)) {
|
||||
let context = new Path([])
|
||||
if (isEnum(config) && typeof config.enum === 'string') {
|
||||
context = context.contextPush(config.enum)
|
||||
} else if (!isEnum(config) && config?.validator === 'resource' && typeof config.params.pool === 'string') {
|
||||
context = context.contextPush(config.params.pool)
|
||||
}
|
||||
return <select value={value ?? ''} onChange={onChange}>
|
||||
{node.optional() && <option value="">{locale(lang, 'unset')}</option>}
|
||||
{values.map(v => <option value={v}>
|
||||
{pathLocale(lang, context.contextPush(v.replace(/^minecraft:/, '')))}
|
||||
</option>)}
|
||||
</select>
|
||||
} else if (!isEnum(config) && config?.validator === 'block_state_key') {
|
||||
const blockState = states?.[relativePath(path, config.params.id).get()]
|
||||
const values = Object.keys(blockState?.properties ?? {})
|
||||
return <select value={value ?? ''} onChange={onChange}>
|
||||
{values.map(v => <option>{v}</option>)}
|
||||
</select>
|
||||
} else {
|
||||
const datalistId = hexId()
|
||||
return <>
|
||||
<input value={value ?? ''} onChange={onChange}
|
||||
list={values.length > 0 ? datalistId : ''} />
|
||||
{values.length > 0 && <datalist id={datalistId}>
|
||||
{values.map(v => <option value={v} />)}
|
||||
</datalist>}
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
||||
type TreeNodeProps = {
|
||||
schema: INode<any>,
|
||||
path: ModelPath,
|
||||
value: any,
|
||||
lang: string,
|
||||
states: BlockStateRegistry,
|
||||
compare?: any,
|
||||
label?: string,
|
||||
children?: ComponentChildren,
|
||||
}
|
||||
function TreeNode({ label, schema, path, value, lang, states, children }: TreeNodeProps) {
|
||||
const type = schema.type(path)
|
||||
const category = schema.category(path)
|
||||
const [prefix, suffix, body] = schema.hook(renderHtml, path, value, lang, states)
|
||||
return <div class={`node ${type}-node`} data-category={category}>
|
||||
<div class="node-header">
|
||||
<ErrorPopup lang={lang} path={path} />
|
||||
<HelpPopup lang={lang} path={path} />
|
||||
{children}
|
||||
{prefix}
|
||||
<label>{label ?? pathLocale(lang, path, `${path.last()}`)}</label>
|
||||
{suffix}
|
||||
</div>
|
||||
{body && <div class="node-body">{body}</div>}
|
||||
</div>
|
||||
}
|
||||
|
||||
function isEnum(value?: ValidationOption | EnumOption): value is EnumOption {
|
||||
return !!(value as any)?.enum
|
||||
}
|
||||
|
||||
function hashString(str: string) {
|
||||
var hash = 0, i, chr
|
||||
for (i = 0; i < str.length; i++) {
|
||||
chr = str.charCodeAt(i)
|
||||
hash = ((hash << 5) - hash) + chr
|
||||
hash |= 0
|
||||
}
|
||||
return hash
|
||||
}
|
||||
|
||||
function pathLocale(lang: string, path: Path, ...params: string[]) {
|
||||
const ctx = path.getContext()
|
||||
for (let i = 0; i < ctx.length; i += 1) {
|
||||
const key = ctx.slice(i).join('.')
|
||||
const result = locale(lang, key, ...params)
|
||||
if (key !== result) {
|
||||
return result
|
||||
}
|
||||
}
|
||||
return ctx[ctx.length - 1]
|
||||
}
|
||||
|
||||
function ErrorPopup({ lang, path }: { lang: string, path: ModelPath }) {
|
||||
const e = path.model.errors.get(path, true)
|
||||
if (e.length === 0) return null
|
||||
const message = locale(lang, e[0].error, ...(e[0].params ?? []))
|
||||
return popupIcon('node-error', 'issue_opened', message)
|
||||
}
|
||||
|
||||
function HelpPopup({ lang, path }: { lang: string, path: Path }) {
|
||||
const key = path.contextPush('help').getContext().join('.')
|
||||
const message = locale(lang, key)
|
||||
if (message === key) return null
|
||||
return popupIcon('node-help', 'info', message)
|
||||
}
|
||||
|
||||
const popupIcon = (type: string, icon: keyof typeof Octicon, popup: string) => {
|
||||
const [active, setActive] = useFocus()
|
||||
|
||||
return <div class={`node-icon ${type}${active ? ' show' : ''}`} onClick={setActive}>
|
||||
{Octicon[icon]}
|
||||
<span class="icon-popup">{popup}</span>
|
||||
</div>
|
||||
}
|
||||
@@ -148,6 +148,10 @@
|
||||
border-color: var(--node-remove) !important;
|
||||
}
|
||||
|
||||
.node-header > *:focus {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/** Rounded corners */
|
||||
|
||||
.node-header > .node-icon {
|
||||
@@ -267,7 +271,7 @@ button.move:disabled {
|
||||
}
|
||||
|
||||
.node-icon svg:hover + .icon-popup,
|
||||
.node-icon .icon-popup.show {
|
||||
.node-icon.show .icon-popup {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user