Initial type editor

static/css/main.css

@@ -300,3 +300,19 @@ dialog#connection-data div.button {
   text-align: center;
   margin-top: 8px;
 }
+#editor-type-schema .label {
+  font-size: 1.25em;
+  font-weight: bold;
+  color: var(--section-color);
+}
+#editor-type-schema textarea {
+  font-family: monospace;
+  font-size: 0.85em;
+  margin-top: 16px;
+  width: 100%;
+  height: calc(100% - 96px);
+  min-height: calc(100vh - 380px);
+}
+#editor-type-schema img {
+  height: 32px;
+}

static/js/app.mjs

@@ -23,6 +23,7 @@ export class App {
 			'NODE_MOVE',
 			'NODE_SELECTED',
 			'TREE_RELOAD_NODE',
+			'TYPE_EDIT',
 			'TYPES_LIST_FETCHED',
 		]
 		for (const eventName of events)
@@ -106,6 +107,11 @@ export class App {
 					.catch(err => showError(err))
 				break
 
+			case 'TYPE_EDIT':
+				const editor = new TypeSchemaEditor(event.detail.Type)
+				document.getElementById('editor-type-schema').replaceChildren(editor.render())
+				break
+
 			default:
 				alert(`Unhandled event: ${event.type}`)
 				console.log(event)
@@ -712,6 +718,7 @@ export class TypesList {
 				<div class="title">${t.Schema.title || t.Name}</div>
 				`
 
+			tDiv.addEventListener('click', () => mbus.dispatch('TYPE_EDIT', { Type: t }))
 			div.appendChild(tDiv)
 		}
 
@@ -719,6 +726,32 @@ export class TypesList {
 	}// }}}
 }
 
+class TypeSchemaEditor {
+	constructor(dataType) {
+		this.type = dataType
+	}
+	render() {
+		const tmpl = document.createElement('template')
+		tmpl.innerHTML = `
+			<div>
+				<div style="float: left;" class="label">${this.type.Schema.title}</div>
+				<div style="float: right;"><img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/content-save.svg" /></div>
+			</div>
+			<div style="clear: both;">
+				<input type="text" class="name">
+			</div>
+			<textarea class="type-schema"></textarea>
+		`
+
+		tmpl.content.querySelector('.name').value = this.type.Name
+
+		const textarea = tmpl.content.querySelector('textarea')
+		textarea.value = JSON.stringify(this.type.Schema, null, 4)
+
+		return tmpl.content
+	}
+}
+
 class ConnectedNodes {
 	constructor(nodes) {// {{{
 		this.nodes = nodes

static/less/main.less

@@ -397,3 +397,24 @@ dialog#connection-data {
 		margin-top: 8px;
 	}
 }
+
+#editor-type-schema {
+	.label {
+		font-size: 1.25em;
+		font-weight: bold;
+		color: var(--section-color);
+	}
+
+	textarea {
+		font-family: monospace;
+		font-size: 0.85em;
+		margin-top: 16px;
+		width: 100%;
+		height: calc(100% - 96px);
+		min-height: calc(100vh - 380px);
+	}
+
+	img {
+		height: 32px;
+	}
+}