Improve editing UX and save chunks

Author: misode

editor/res/editor.css

@@ -16,19 +16,26 @@ html, body {
 }
 
 .nbt-content {
-	padding-top: 30px;
+	padding: 30px 0;
 }
 
 .nbt-tag {
 	height: 22px;
 	cursor: default;
 	user-select: none;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
 }
 
 .nbt-tag:hover {
 	background: #252526;
 }
 
+.nbt-tag.selected {
+	background-color: #3a3321;
+}
+
 .nbt-tag:not(.collapse) {
 	position: relative;
 	padding-left: 13px;
@@ -37,22 +44,21 @@ html, body {
 }
 
 div:last-child > .nbt-tag {
-	border-color: transparent;
+	border: none;
 }
 
 .nbt-tag:not(.collapse)::before {
 	content: '';
 	position: absolute;
 	width: 9px;
-	height: 8px;
+	height: 10px;
 	top: 0;
-	left: -1px;
+	left: 0;
 	border-bottom: 1px #777 solid;
 }
 
 div:last-child > .nbt-tag:not(.collapse)::before {
 	border-left: 1px #777 solid;
-	width: 10px;
 }
 
 .nbt-body {
@@ -69,6 +75,11 @@ div:last-child > .nbt-body {
 	font-style: italic;
 }
 
+.nbt-key {
+	margin-right: 5px;
+	line-height: 1;
+}
+
 .nbt-value {
 	font-family: var(--monospace);
 	font-size: 14px;
@@ -78,10 +89,13 @@ input.nbt-value {
 	background-color: #3c3c3c;
 	border: none;
 	color: var(--vscode-editor-foreground);
+	width: 250px;
 }
 
 span.nbt-value {
-	margin-left: 2px;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	margin: 0 2px;
 }
 
 .center {
@@ -108,6 +122,7 @@ span.nbt-value {
 	font-family: monospace;
 	font-size: 12px;
 	font-weight: bold;
+	margin-right: 5px;
 }
 
 .nbt-icon {
@@ -116,7 +131,8 @@ span.nbt-value {
 	background-size: 64px;
 	width: 16px;
 	height: 16px;
-	margin-bottom: -3px;
+	min-width: 16px;
+	margin-right: 5px;
 }
 
 .nbt-icon.byte-icon { background-position: 0 0; }
@@ -162,10 +178,6 @@ span.nbt-value {
 	display: flex;
 }
 
-.panel-menu > *:not(:last-child) {
-	margin-right: 5px;
-}
-
 .menu-spacer {
 	margin: 0 10px;
 }
@@ -184,6 +196,10 @@ span.nbt-value {
 	color: #d8b24a;
 }
 
+.btn.disabled {
+	display: none;
+}
+
 .spinner {
   position: absolute;
   top: 80px;
@@ -234,11 +250,25 @@ span.nbt-value {
 }
 
 .side-panel {
-	background-color: #252526;
+	background-color: #252526be;
 	position: absolute;
-	right: 20px;
-	top: 5px;
+	left: 20px;
+	top: 37px;
 	padding: 4px 8px;
+	max-width: 400px;
+	overflow: hidden;
+}
+
+.side-panel .nbt-content {
+	padding: 10px 0 0;
+}
+
+.side-panel .nbt-tag:hover {
+	background: #333333;
+}
+
+.side-panel .nbt-tag.selected {
+	background-color: #423a27;
 }
 
 .block-name {
@@ -268,10 +298,6 @@ span.nbt-value {
 	margin-bottom: 2px;
 }
 
-.side-panel .nbt-content {
-	padding-top: 10px;
-}
-
 .structure-size input {
 	width: 50px;
 	background: #3c3c3c;

editor/src/Editor.ts

@@ -4,17 +4,18 @@ import { SnbtEditor } from "./SnbtEditor";
 import { StructureEditor } from "./StructureEditor";
 import { TreeEditor } from "./TreeEditor";
 
-export type VsCode = {
+export type VSCode = {
 	postMessage(message: EditorMessage): void
 }
 
-declare function acquireVsCodeApi(): VsCode
+declare function acquireVsCodeApi(): VSCode
 const vscode = acquireVsCodeApi();
 
 const root = document.querySelector('.nbt-editor')
 
 const LOCALES = {
 	'copy': 'Copy',
+	'editTag': 'Edit Tag',
 	'grid': 'Show Grid',
   'panel.structure': '3D',
   'panel.region': 'Region',
@@ -44,6 +45,8 @@ export interface EditorPanel {
 	menu?(): Element[]
 }
 
+export type EditHandler = (edit: NbtEdit) => void
+
 class Editor {
 	private panels: {
 		[key: string]: {
@@ -53,18 +56,19 @@ class Editor {
 		}
 	} = {
 		'structure': {
-			editor: lazy(() => new StructureEditor(root, vscode)),
+			editor: lazy(() => new StructureEditor(root, vscode, this.makeEdit)),
 			options: ['structure', 'tree', 'snbt']
 		},
 		'region': {
-			editor: lazy(() => new RegionEditor(root, vscode))
+			editor: lazy(() => new RegionEditor(root, vscode, this.makeEdit)),
+			options: ['region']
 		},
 		'tree': {
-			editor: lazy(() => new TreeEditor(root, vscode)),
+			editor: lazy(() => new TreeEditor(root, vscode, this.makeEdit)),
 			options: ['tree', 'snbt']
 		},
 		'snbt': {
-			editor: lazy(() => new SnbtEditor(root, vscode))
+			editor: lazy(() => new SnbtEditor(root, vscode, this.makeEdit))
 		}
 	}
 
@@ -145,6 +149,10 @@ class Editor {
 		}
 	}
 
+	private makeEdit(edit: NbtEdit) {
+		vscode.postMessage({ type: 'edit', body: edit })
+	}
+
 	private applyEdit(edit: NbtEdit) {
 		for (let i = 0; i < edit.ops.length; i += 1) {
 				const op = edit.ops[i];

editor/src/NbtPath.ts

@@ -1,30 +1,65 @@
+import { NamedNbtTag } from "@webmc/nbt";
+
 export class NbtPath {
   private arr: (string | number)[]
 
-	constructor(arr: (string | number)[] = []) {
-		this.arr = arr;
+  constructor(arr: (string | number)[] = []) {
+    this.arr = arr;
+  }
+
+  public pop(count = 1) {
+    return new NbtPath(this.arr.slice(0, -count))
   }
 
-	public pop(count = 1) {
-		return new NbtPath(this.arr.slice(0, -count))
+  public shift(count = 1) {
+    return new NbtPath(this.arr.slice(count))
   }
 
   public push(...el: (string | number)[]) {
-		return new NbtPath([...this.arr, ...el])
+    return new NbtPath([...this.arr, ...el])
+  }
+
+  public head() {
+    return this.arr[0]
   }
 
-	public last() {
-		return this.arr[this.arr.length - 1]
+  public last() {
+    return this.arr[this.arr.length - 1]
   }
 
-	public length() {
-		return this.arr.length
+  public length() {
+    return this.arr.length
   }
 
-	public toString() {
-		return this.arr
-			.map(e => (typeof e === 'string') ? `.${e}` : `[${e}]`)
-			.join('')
-			.replace(/^\./, '')
-	}
+  public toString() {
+    return this.arr
+      .map(e => (typeof e === 'string') ? `.${e}` : `[${e}]`)
+      .join('')
+      .replace(/^\./, '')
+  }
+
+  public getFrom(data: NamedNbtTag) {
+    console.log(this.arr, data)
+    let value = data.value as any
+    let type = 'compound'
+
+    for (const el of this.arr) {
+      if (type === 'compound' && typeof el === 'string') {
+        type = value[el].type
+        value = value[el].value
+      } else if (type === 'list' && typeof el === 'number') {
+        type = value.type
+        value = value.value[el]
+      } else if (type.endsWith('Array') && typeof el === 'number') {
+        type = type.slice(-5)
+        value = value[el]
+      } else {
+        throw new Error(`Invalid path ${this.toString()}`)
+      }
+      if (value === undefined) {
+        throw new Error(`Invalid path ${this.toString()}`)
+      }
+    }
+    return { type, value }
+  }
 }

editor/src/RegionEditor.ts

@@ -1,14 +1,14 @@
 import { NbtChunk } from "@webmc/nbt";
 import { NbtFile, ViewMessage } from "../../src/types";
-import { VsCode } from "./Editor";
+import { EditHandler, VSCode } from "./Editor";
 import { NbtPath } from "./NbtPath";
 import { TreeEditor } from "./TreeEditor";
 
 export class RegionEditor extends TreeEditor {
   private chunks: Partial<NbtChunk>[]
 
-  constructor(root: Element, vscode: VsCode) {
-    super(root, vscode)
+  constructor(root: Element, vscode: VSCode, editHandler: EditHandler) {
+    super(root, vscode, editHandler)
   }
 
   redraw() {
@@ -41,8 +41,13 @@ export class RegionEditor extends TreeEditor {
 
   private drawChunk(path: NbtPath, chunk: Partial<NbtChunk>) {
     const expanded = chunk.nbt && this.isExpanded(path);
-    return `<div class="nbt-tag collapse" ${this.on('click', el => this.clickChunk(path, chunk, el))}>
-      ${this.drawCollapse(path)}
+    return `<div class="nbt-tag collapse" ${this.onLoad(el => {
+      el.addEventListener('click', () => this.select({
+        path, type: 'compound', data: () => path.shift().getFrom(this.chunks[path.head()].nbt), el
+      }))
+      el.addEventListener('dblclick', () => this.clickChunk(path, chunk, el))
+    })}>
+      ${this.drawCollapse(path, 'compound', (el) => this.clickChunk(path, chunk, el.parentElement))}
       ${this.drawIcon('chunk')}
       <span class="nbt-key">Chunk [${chunk.x}, ${chunk.z}]</span>
     </div>

editor/src/SnbtEditor.ts

@@ -1,11 +1,11 @@
 import { NbtFile } from "../../src/types";
-import { EditorPanel, locale, VsCode } from "./Editor";
+import { EditHandler, EditorPanel, locale, VSCode } from "./Editor";
 import { Snbt } from "./Snbt";
 
 export class SnbtEditor implements EditorPanel {
   private snbt: string
 
-  constructor(private root: Element, private vscode: VsCode) {
+  constructor(private root: Element, private vscode: VSCode, private editHandler: EditHandler) {
     this.snbt = ''
   }
 
@@ -15,7 +15,7 @@ export class SnbtEditor implements EditorPanel {
     const textarea = document.createElement('textarea')
     textarea.classList.add('snbt-editor')
     textarea.textContent = this.snbt
-    textarea.rows = (this.snbt.match(/\n/g)?.length ?? 0) + 2
+    textarea.rows = (this.snbt.match(/\n/g)?.length ?? 0) + 1
     textarea.readOnly = true
     content.append(textarea)
     this.root.append(content)