Report errors beneath code [#5]

scripts/interface/Interface.js

@@ -139,6 +139,9 @@ define([
 		build(container) {
 			const codePane = makeNode('div', {'class': 'pane-code'});
 			const viewPane = makeNode('div', {'class': 'pane-view'});
+			this.errorPane = makeNode('div', {'class': 'pane-error'});
+			this.errorText = makeText();
+			this.errorPane.appendChild(this.errorText);
 			this.viewPaneInner = makeNode('div', {'class': 'pane-view-inner'});
 
 			const options = this.buildOptions();
@@ -146,6 +149,7 @@ define([
 			viewPane.appendChild(options);
 
 			container.appendChild(codePane);
+			container.appendChild(this.errorPane);
 			container.appendChild(viewPane);
 
 			this.code = this.buildEditor(codePane);
@@ -193,6 +197,20 @@ define([
 			}
 		}
 
+		markError(error) {
+			if(typeof error === 'object' && error.message) {
+				this.errorText.nodeValue = error.message;
+			} else {
+				this.errorText.nodeValue = error;
+			}
+			this.errorPane.setAttribute('class', 'pane-error error');
+		}
+
+		markOK() {
+			this.errorText.nodeValue = 'All OK';
+			this.errorPane.setAttribute('class', 'pane-error ok');
+		}
+
 		update(immediate = true) {
 			const src = this.code.getDoc().getValue();
 			this.saveCode(src);
@@ -201,10 +219,10 @@ define([
 				const parsed = this.parser.parse(src);
 				sequence = this.generator.generate(parsed);
 			} catch(e) {
-				// TODO
+				this.markError(e);
-				// console.log(e);
 				return;
 			}
+			this.markOK();
 
 			let delay = 0;
 			if(!immediate && this.renderedSeq) {

scripts/sequence/Generator.js

@@ -67,7 +67,7 @@ define(['core/ArrayUtilities'], (array) => {
 				const state = this.agentStates.get(agent) || DEFAULT_AGENT;
 				if(state.locked) {
 					if(checked) {
-						throw new Error('Cannot modify agent ' + agent);
+						throw new Error('Cannot begin/end agent: ' + agent);
 					} else {
 						return false;
 					}
@@ -173,8 +173,12 @@ define(['core/ArrayUtilities'], (array) => {
 		}
 
 		handleBlockSplit({mode, label}) {
-			if(this.currentNest.stage.sections[0].mode !== 'if') {
+			const containerMode = this.currentNest.stage.sections[0].mode;
-				throw new Error('Invalid block nesting');
+			if(containerMode !== 'if') {
+				throw new Error(
+					'Invalid block nesting ("else" inside ' +
+					containerMode + ')'
+				);
 			}
 			this.currentSection = {
 				mode,
@@ -186,7 +190,7 @@ define(['core/ArrayUtilities'], (array) => {
 
 		handleBlockEnd() {
 			if(this.nesting.length <= 1) {
-				throw new Error('Invalid block nesting');
+				throw new Error('Invalid block nesting (too many "end"s)');
 			}
 			const {hasContent, stage, agents} = this.nesting.pop();
 			this.currentNest = array.last(this.nesting);
@@ -240,7 +244,10 @@ define(['core/ArrayUtilities'], (array) => {
 			stages.forEach(this.handleStage);
 
 			if(this.nesting.length !== 1) {
-				throw new Error('Invalid block nesting');
+				throw new Error(
+					'Invalid block nesting (' +
+					(this.nesting.length - 1) + ' unclosed)'
+				);
 			}
 
 			this.setAgentVis(this.agents, false, meta.terminators || 'none');

styles/main.css

@@ -7,8 +7,10 @@ html, body {
 	position: absolute;
 	left: 0;
 	top: 0;
-	bottom: 0;
+	bottom: 100px;
 	width: 30%;
+	box-sizing: border-box;
+	border-right: 1px solid #808080;
 }
 
 .pane-code .CodeMirror {
@@ -48,6 +50,31 @@ html, body {
 .pane-view-inner {
 }
 
+.pane-error {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 30%;
+	height: 100px;
+	overflow: auto;
+	box-sizing: border-box;
+	padding: 5px 10px;
+	font-family: monospace;
+	background: #DDDDDD;
+	border-top: 1px solid #808080;
+	border-right: 1px solid #808080;
+}
+
+.pane-error.ok {
+	color: #007700;
+	background: #E8EEE8;
+}
+
+.pane-error.error {
+	color: #770000;
+	background: #EEE8E8;
+}
+
 .options {
 	display: inline-block;
 	position: fixed;