diff --git a/src/app/Sandbox.ts b/src/app/Sandbox.ts index 56cedb76..2b95cccb 100644 --- a/src/app/Sandbox.ts +++ b/src/app/Sandbox.ts @@ -29,7 +29,7 @@ SCHEMAS.register('foo', ObjectNode({ }) ), map: MapNode( - EnumNode(['pig', 'sheep']), + EnumNode(['pig', 'sheep'], 'pig'), Resource(StringNode()) ), recursive: ListNode( diff --git a/src/app/app.ts b/src/app/app.ts index 55c60c1a..fe24657d 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,4 +1,4 @@ -import { RegistryFetcher } from './RegistryFetcher' +import Split from 'split.js' import { DataModel, IView, @@ -13,8 +13,7 @@ import { locale, COLLECTIONS } from 'minecraft-schemas' -import Split from 'split.js' - +import { RegistryFetcher } from './RegistryFetcher' import { SandboxSchema } from './Sandbox' import { ErrorsView } from './ErrorsView' @@ -57,6 +56,13 @@ const treeViewObserver = (el: HTMLElement) => { el.querySelectorAll('.node-header[data-error]').forEach(e => { e.insertAdjacentHTML('beforeend', ``) }) + el.querySelectorAll('.collapse.closed, button.add').forEach(e => { + e.insertAdjacentHTML('afterbegin', ``) + }) + el.querySelectorAll('.collapse.open, button.remove').forEach(e => { + e.insertAdjacentHTML('afterbegin', ` + `) + }) } const publicPath = process.env.NODE_ENV === 'production' ? '/dev/' : '/'; @@ -78,11 +84,17 @@ Promise.all([ const errorsViewEl = document.getElementById('errors-view')! const errorsToggle = document.getElementById('errors-toggle')! const sourceViewOutput = (document.getElementById('source-view-output') as HTMLTextAreaElement) + const treeViewOutput = document.getElementById('tree-view-output')! const sourceControlsToggle = document.getElementById('source-controls-toggle')! const sourceControlsMenu = document.getElementById('source-controls-menu')! const sourceControlsCopy = document.getElementById('source-controls-copy')! const sourceControlsDownload = document.getElementById('source-controls-download')! const sourceToggle = document.getElementById('source-toggle')! + const treeControlsToggle = document.getElementById('tree-controls-toggle')! + const treeControlsMenu = document.getElementById('tree-controls-menu')! + const treeControlsVersionToggle = document.getElementById('tree-controls-version-toggle')! + const treeControlsVersionMenu = document.getElementById('tree-controls-version-menu')! + const treeControlsReset = document.getElementById('tree-controls-reset')! let selected = modelFromPath(location.pathname) @@ -95,22 +107,20 @@ Promise.all([ 'sandbox': new DataModel(SandboxSchema) } - const views: { [key: string]: IView } = { - 'tree': new TreeView(models[selected], treeViewEl, { + const views: IView[] = [ + new TreeView(models[selected], treeViewOutput, { showErrors: true, observer: treeViewObserver }), - 'source': new SourceView(models[selected], sourceViewOutput, { + new SourceView(models[selected], sourceViewOutput, { indentation: 2 }), - 'errors': new ErrorsView(models[selected], errorsViewEl) - } + new ErrorsView(models[selected], errorsViewEl) + ] const updateModel = (newModel: string) => { selected = newModel - for (const v in views) { - views[v].setModel(models[selected]) - } + views.forEach(v => v.setModel(models[selected])) selectedModel.textContent = locale(`title.${selected}`) modelSelectorMenu.innerHTML = '' @@ -224,6 +234,25 @@ Promise.all([ downloadAnchor.click() }) + treeControlsToggle.addEventListener('click', evt => { + treeControlsMenu.style.visibility = 'visible' + document.body.addEventListener('click', evt => { + treeControlsMenu.style.visibility = 'hidden' + }, { capture: true, once: true }) + }) + + treeControlsVersionToggle.addEventListener('click', evt => { + treeControlsVersionMenu.style.visibility = 'visible' + document.body.addEventListener('click', evt => { + treeControlsVersionMenu.style.visibility = 'hidden' + }, { capture: true, once: true }) + }) + + treeControlsReset.addEventListener('click', evt => { + models[selected].reset(models[selected].schema.default()) + addChecked(treeControlsReset) + }) + errorsToggle.addEventListener('click', evt => { if (errorsViewEl.classList.contains('hidden')) { errorsViewEl.classList.remove('hidden') diff --git a/src/generator.html b/src/generator.html index b67c04e7..07b68533 100644 --- a/src/generator.html +++ b/src/generator.html @@ -38,7 +38,41 @@
-
+
+
+ + + +
+
+ + +
+
+ + + + +
+
+
diff --git a/src/locales/en.json b/src/locales/en.json index 4dc7cbec..6ad5a163 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -12,6 +12,8 @@ "dimension-type": "Dimension Type", "sandbox": "Sandbox", "language": "Language", + "reset": "Reset", + "classic_theme": "Classic Theme", "copy": "Copy", "download": "Download", "share": "Share" diff --git a/src/styles/global.css b/src/styles/global.css index 14d789cf..c805f70a 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -172,29 +172,43 @@ body { .source textarea::selection { background-color: var(--selection); } + +.tree, +.source { + position: relative; +} + +.tree-controls, .source-controls { display: flex; flex-direction: row-reverse; position: absolute; - right: 17px; - top: 56px; + right: 0; + top: 0; padding: 5px; } +.tree-controls .btn:not(:first-child), .source-controls .btn:not(:first-child) { margin-right: 5px; } +.tree-controls-menu, .source-controls-menu { display: flex; visibility: hidden; flex-direction: column; position: absolute; - right: 17px; - top: 93px; + right: 0; + top: 37px; padding: 5px; } +.source-controls, +.source-controls-menu { + right: 17px +} + .gutter.gutter-horizontal { border-left: 2px solid; float: left; diff --git a/src/styles/images/plus.svg b/src/styles/images/plus.svg deleted file mode 100644 index cab0b033..00000000 --- a/src/styles/images/plus.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/styles/images/trash.svg b/src/styles/images/trash.svg deleted file mode 100644 index d3dc8942..00000000 --- a/src/styles/images/trash.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/styles/nodes.css b/src/styles/nodes.css index f8dc62a5..c9195bac 100644 --- a/src/styles/nodes.css +++ b/src/styles/nodes.css @@ -34,7 +34,7 @@ --category-function-border: #6b6b6b; } -.tree > .object-node > .node-body, +.tree > div > .object-node > .node-body, .choice-node > .object-node > .node-body { border-left: none; padding-left: 0; @@ -136,6 +136,17 @@ button.selected { border-color: var(--node-selected-border); } +label.collapse { + display: inline-flex; + align-items: center; +} + +label.collapse svg { + margin-right: 5px; + fill: var(--node-text); + transition: fill var(--style-transition); +} + label.collapse.closed, button.add { background-color: var(--node-add); @@ -148,22 +159,13 @@ button.remove { border-color: var(--node-remove-border); } -label.collapse::before, -button.remove::before { - padding-right: 5px; - position: relative; - top: 3px; -} - -button.remove::before, -button.add::after { +button.remove svg, +button.add svg { display: inline-block; position: relative; top: 2px; -} - -button.remove::before { - padding-right: 5px; + fill: var(--node-text); + transition: fill var(--style-transition); } .node-header > button.add:last-child { @@ -171,16 +173,6 @@ button.remove::before { border-bottom-right-radius: 6px; } -label.collapse.closed::before, -button.add::after { - content: url('./images/plus.svg'); -} - -label.collapse.open::before, -button.remove::before { - content: url('./images/trash.svg'); -} - .node-header[data-error] > svg { border: none; height: 34px;