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

Improve rendering and validating block states

Browse Source
This commit is contained in:
Misode
2021-06-25 02:38:42 +02:00
parent 14da8ba575
commit 373698ebbc
5 changed files with 129 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/components/SourcePanel.tsx
View File

@@ -4,24 +4,27 @@ import { useEffect, useRef } from 'preact/hooks'
import { useModel } from '../hooks'
import { locale } from '../Locales'
import { transformOutput } from '../schema/transformOutput'
import type { BlockStateRegistry } from '../Schemas'
type SourcePanelProps = {
lang: string,
name: string,
model: DataModel | null,
blockStates: BlockStateRegistry | null,
doCopy?: number,
doDownload?: number,
doImport?: number,
onError: (message: string) => unknown,
}
export function SourcePanel({ lang, name, model, doCopy, doDownload, doImport, onError }: SourcePanelProps) {
export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload, doImport, onError }: SourcePanelProps) {
const loc = locale.bind(null, lang)
const source = useRef<HTMLTextAreaElement>(null)
const download = useRef<HTMLAnchorElement>(null)
useModel(model, model => {
try {
const data = model.schema.hook(transformOutput, new ModelPath(model), model.data)
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}`)

15
src/app/components/Tree.tsx
View File

@@ -5,24 +5,25 @@ import { useModel } from '../hooks'
import { locale } from '../Locales'
import { Mounter } from '../schema/Mounter'
import { renderHtml } from '../schema/renderHtml'
import type { VersionId } from '../Schemas'
import type { BlockStateRegistry, VersionId } from '../Schemas'
type TreePanelProps = {
lang: string,
model: DataModel | null,
version: VersionId,
model: DataModel | null,
blockStates: BlockStateRegistry | null,
onError: (message: string) => unknown,
}
export function Tree({ lang, model, version, onError }: TreePanelProps) {
export function Tree({ lang, model, version, blockStates, onError }: TreePanelProps) {
const tree = useRef<HTMLDivElement>(null)
const redraw = useRef<Function>()
useEffect(() => {
redraw.current = () => {
if (!model) return
if (!model || !blockStates) return
try {
const mounter = new Mounter()
const props = { loc: locale.bind(null, lang), version, 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)
@@ -30,7 +31,7 @@ export function Tree({ lang, model, version, onError }: TreePanelProps) {
let html = rendered[2]
if (rendered[1]) {
html = `<div class="node ${type}-node" ${category ? `data-category="${category}"` : ''}>
<div class="node-header">${rendered[1]}</div>
<div class="node-header">${rendered[0]}${rendered[1]}</div>
<div class="node-body">${rendered[2]}</div>
</div>`
}
@@ -50,7 +51,7 @@ export function Tree({ lang, model, version, onError }: TreePanelProps) {
useEffect(() => {
redraw.current()
}, [lang])
}, [lang, model, blockStates])
return <div ref={tree} class="tree"></div>
}