akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-30 17:49:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add tree controls

Browse Source
This commit is contained in:
Misode
2020-06-17 22:22:59 +02:00
parent 13b21d3b72
commit d4b0e77957
8 changed files with 112 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/Sandbox.ts
View File

@@ -29,7 +29,7 @@ SCHEMAS.register('foo', ObjectNode({
})
),
map: MapNode(
EnumNode(['pig', 'sheep']),
EnumNode(['pig', 'sheep'], 'pig'),
Resource(StringNode())
),
recursive: ListNode(

51
src/app/app.ts
View File

@@ -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', `<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>`)
})
el.querySelectorAll('.collapse.closed, button.add').forEach(e => {
e.insertAdjacentHTML('afterbegin', `<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>`)
})
el.querySelectorAll('.collapse.open, button.remove').forEach(e => {
e.insertAdjacentHTML('afterbegin', `<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>
`)
})
}
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')

36
src/generator.html
View File

@@ -38,7 +38,41 @@
</div>
</div>
<div class="content">
<div class="tree" id="tree-view"></div>
<div class="tree" id="tree-view">
<div class="tree-controls">
<button class="btn" id="tree-controls-toggle"><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></button>
<button class="btn" id="tree-controls-version-toggle"><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></button>
<button class="btn" id="tree-controls-reset">
<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>
<span data-i18n="reset"></span>
</button>
</div>
<div class="tree-controls-menu btn-group" id="tree-controls-menu">
<button class="btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path></svg>
<span data-i18n="undo"></span>
</button>
<button class="btn">
<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>
<span data-i18n="redo"></span>
</button>
</div>
<div class="tree-controls-menu btn-group" id="tree-controls-version-menu">
<button class="btn">
<span data-i18n="1.16"></span>
</button>
<button class="btn">
<span data-i18n="1.15"></span>
</button>
<button class="btn">
<span data-i18n="1.14"></span>
</button>
<button class="btn">
<span data-i18n="1.13"></span>
</button>
</div>
<div id="tree-view-output"></div>
</div>
<div class="source" id="source-view">
<div class="source-controls">
<button class="btn" id="source-controls-toggle"><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></button>

2
src/locales/en.json
View File

@@ -12,6 +12,8 @@
"dimension-type": "Dimension Type",
"sandbox": "Sandbox",
"language": "Language",
"reset": "Reset",
"classic_theme": "Classic Theme",
"copy": "Copy",
"download": "Download",
"share": "Share"

22
src/styles/global.css
View File

@@ -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;

1
src/styles/images/plus.svg
View File

@@ -1 +0,0 @@
<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>
Side by Side

Before

Width:  |  Height:  |  Size: 314 B

1
src/styles/images/trash.svg
View File

@@ -1 +0,0 @@
<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>
Side by Side

Before

Width:  |  Height:  |  Size: 496 B

40
src/styles/nodes.css
View File

@@ -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;