diff --git a/package.json b/package.json index c9501834..882f3ca9 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,10 @@ "author": "Misode", "license": "MIT", "dependencies": { + "@types/split.js": "^1.4.0", "copy-webpack-plugin": "^6.0.1", "minecraft-schemas": "^0.1.2", + "split.js": "^1.5.11", "ts-loader": "^7.0.4", "typescript": "^3.9.3", "webpack": "^4.43.0", diff --git a/public/index.html b/public/index.html index ea138dde..9d3d98a4 100644 --- a/public/index.html +++ b/public/index.html @@ -4,14 +4,29 @@ Document + - -
-
-
-
+
+
+ +
+
+
+
+
+ +
+ +
+
+
diff --git a/public/styles/global.css b/public/styles/global.css new file mode 100644 index 00000000..b6b83ca5 --- /dev/null +++ b/public/styles/global.css @@ -0,0 +1,92 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.container { + background-color: #ffffff; +} + +.header { + display: flex; + padding: 10px; + height: 56px; + /* background: #2e2e2e; */ + border-bottom: 2px #ccc solid; + color: #343a40 +} + +.content { + display: flex; + height: calc(100vh - 56px); + overflow-y: hidden; +} + +.tree { + padding: 1rem; + overflow-y: auto; +} + +.source textarea { + width: 100%; + height: calc(100vh - 56px - 30px - 13px); + padding: 0.4rem; + border: none; + white-space: pre; + overflow-wrap: normal; + overflow-x: auto; + tab-size: 4; + -moz-tab-size: 4; + -o-tab-size: 4; + -webkit-tab-size: 4; + outline: none; +} + +.source textarea::selection { + background-color: rgba(103, 134, 221, 0.6); +} + +.source-controls { + padding: 0.4rem; + display: flex; + flex-direction: row-reverse; +} + +.gutter.gutter-horizontal { + border-left: 2px solid #ccc; + float: left; + cursor: ew-resize; +} + + +.btn { + display: inline; + border: none; + color: #ffffff; + background: #5c615f; + padding: 7px 20px; + cursor: pointer; + outline: none; + transition: background-color 0.2s; +} + +.btn:hover { + background: #787c7b; +} + +.dropdown { + display: inline; + border: none; + color: #ffffff; + background: #5c615f; + padding: 7px 7px; + cursor: pointer; + outline: none; + font-size: 1rem; + transition: background-color 0.2s; +} + +.dropdown:hover { + background: #787c7b; +} diff --git a/src/app/app.ts b/src/app/app.ts index 9caf364c..a8f42666 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,5 +1,6 @@ import { DataModel, + IView, TreeView, SourceView, ConditionSchema, @@ -7,41 +8,46 @@ import { AdvancementSchema, LOCALES } from 'minecraft-schemas' +import Split from 'split.js' import { SandboxSchema } from './Sandbox' -const predicateModel = new DataModel(ConditionSchema) -const lootTableModel = new DataModel(LootTableSchema) -const advancementModel = new DataModel(AdvancementSchema) -const sandboxModel = new DataModel(SandboxSchema) +const models: { + [key: string]: DataModel +} = { + 'loot-table': new DataModel(LootTableSchema), + 'predicate': new DataModel(ConditionSchema), + 'advancement': new DataModel(AdvancementSchema), + 'sandbox': new DataModel(SandboxSchema) +} -let model = lootTableModel +let model = models["loot-table"] -let sourceView = new SourceView(model, document.getElementById('source')!, {indentation: 2}) -let treeView = new TreeView(model, document.getElementById('view')!) +let treeViewEl = document.getElementById('tree-view')! +let sourceviewEl = document.getElementById('source-view')! +Split([treeViewEl, sourceviewEl], { + sizes: [66, 34] +}) -const modelSelector = document.createElement('select') -modelSelector.value = 'predicate' -modelSelector.innerHTML = ` - - - - ` +const views: { + [key: string]: IView +} = { + 'tree': new TreeView(model, treeViewEl), + 'source': new SourceView(model, sourceviewEl.getElementsByTagName('textarea')[0], {indentation: 2}) +} + +const modelSelector = (document.getElementById('model-selector') as HTMLInputElement) modelSelector.addEventListener('change', evt => { - if (modelSelector.value === 'sandbox') { - model = sandboxModel - } else if (modelSelector.value === 'loot-table') { - model = lootTableModel - } else if (modelSelector.value === 'advancement') { - model = advancementModel - } else { - model = predicateModel + model = models[modelSelector.value] + for (const v in views) { + views[v].setModel(model) } - sourceView.setModel(model) - treeView.setModel(model) model.invalidate() }) -document.getElementById('header')?.append(modelSelector) + +setTimeout(() => { + window.scroll(0, 0) +}, 1000) fetch('build/locales-schema/en.json') .then(r => r.json())