Add GitHub link and tweak flags code suggestions

scripts/interface/Interface.js

@@ -56,7 +56,20 @@ define([
 			this._downloadPNGFocus = this._downloadPNGFocus.bind(this);
 		}
 
-		buildOptions() {
+		buildOptionsLinks() {
+			const githubLink = makeNode('a', {
+				'class': 'github',
+				'href': 'https://github.com/davidje13/SequenceDiagram',
+				'target': '_blank',
+			});
+			githubLink.appendChild(makeText('GitHub'));
+
+			const options = makeNode('div', {'class': 'options links'});
+			options.appendChild(githubLink);
+			return options;
+		}
+
+		buildOptionsDownloads() {
 			this.downloadPNG = makeNode('a', {
 				'href': '#',
 				'download': 'SequenceDiagram.png',
@@ -76,7 +89,7 @@ define([
 			this.downloadSVG.appendChild(makeText('SVG'));
 			on(this.downloadSVG, ['click'], this._downloadSVGClick);
 
-			const options = makeNode('div', {'class': 'options'});
+			const options = makeNode('div', {'class': 'options downloads'});
 			options.appendChild(this.downloadPNG);
 			options.appendChild(this.downloadSVG);
 			return options;
@@ -137,11 +150,17 @@ define([
 			this.errorPane = makeNode('div', {'class': 'pane-error'});
 			this.errorText = makeText();
 			this.errorPane.appendChild(this.errorText);
-			this.viewPaneInner = makeNode('div', {'class': 'pane-view-inner'});
+			const viewPaneScroller = makeNode('div', {
+				'class': 'pane-view-scroller',
+			});
+			this.viewPaneInner = makeNode('div', {
+				'class': 'pane-view-inner',
+			});
 
-			const options = this.buildOptions();
+			viewPane.appendChild(viewPaneScroller);
-			viewPane.appendChild(this.viewPaneInner);
+			viewPaneScroller.appendChild(this.viewPaneInner);
-			viewPane.appendChild(options);
+			viewPane.appendChild(this.buildOptionsLinks());
+			viewPane.appendChild(this.buildOptionsDownloads());
 
 			container.appendChild(codePane);
 			container.appendChild(this.errorPane);

scripts/sequence/CodeMirrorMode.js

@@ -54,25 +54,35 @@ define(['core/ArrayUtilities'], (array) => {
 			'!': CM_ERROR,
 			'': exit,
 		}};
-		const pm = {type: 'operator', suggest: true, then: {
-			'+': CM_ERROR,
-			'-': CM_ERROR,
-			'*': op,
-			'!': op,
-			'': exit,
-		}};
-		const se = {type: 'operator', suggest: true, then: {
-			'+': op,
-			'-': op,
-			'*': CM_ERROR,
-			'!': CM_ERROR,
-			'': exit,
-		}};
 		return {
-			'+': pm,
+			'+': {type: 'operator', suggest: true, then: {
-			'-': pm,
+				'+': CM_ERROR,
-			'*': se,
+				'-': CM_ERROR,
-			'!': se,
+				'*': op,
+				'!': CM_ERROR,
+				'': exit,
+			}},
+			'-': {type: 'operator', suggest: true, then: {
+				'+': CM_ERROR,
+				'-': CM_ERROR,
+				'*': op,
+				'!': {type: 'operator', then: {
+					'+': CM_ERROR,
+					'-': CM_ERROR,
+					'*': CM_ERROR,
+					'!': CM_ERROR,
+					'': exit,
+				}},
+				'': exit,
+			}},
+			'*': {type: 'operator', suggest: true, then: {
+				'+': op,
+				'-': op,
+				'*': CM_ERROR,
+				'!': CM_ERROR,
+				'': exit,
+			}},
+			'!': op,
 			'': exit,
 		};
 	}

styles/main.css

@@ -44,6 +44,14 @@ html, body {
 	top: 0;
 	bottom: 0;
 	right: 0;
+}
+
+.pane-view-scroller {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
 	overflow: auto;
 }
 
@@ -76,16 +84,26 @@ html, body {
 }
 
 .options {
-	display: inline-block;
+	position: absolute;
-	position: fixed;
+	background: #FFFFFF;
+	font-family: sans-serif;
+	overflow: hidden;
+}
+
+.options.links {
+	top: 0;
+	right: 0;
+	border-bottom-left-radius: 5px;
+	border-bottom: 1px solid #EEEEEE;
+	border-left: 1px solid #EEEEEE;
+}
+
+.options.downloads {
 	bottom: 0;
 	right: 0;
-	background: #FFFFFF;
 	border-top-left-radius: 5px;
 	border-top: 1px solid #EEEEEE;
 	border-left: 1px solid #EEEEEE;
-	font-family: sans-serif;
-	overflow: hidden;
 }
 
 .options a {