Rename Graph to Explain & add selected state for Details

Signed-off-by: Grant Skinner <info@gskinner.com>

index.html

@@ -212,7 +212,7 @@ <h1 class="tool-label"></h1>
 			<li class="button replace active" data-tool="replace">Replace</li>
 			<li class="button list" data-tool="list">List</li>
 			<li class="button details" data-tool="details">Details</li>
-			<li class="button graph" data-tool="graph">Graph</li>
+			<li class="button explain" data-tool="explain">Explain</li>
 		</ul>
 	</div>
 

js/SourceHighlighter.js

@@ -40,11 +40,12 @@ p.initialize = function (cm, canvas, fill) {
 	this.fill = fill || this.fill;
 };
 
-p.draw = function (matches, activeMatch) {
+p.draw = function (matches, activeMatch, selectedMatch) {
 	this.clear();
 	if (!matches || !matches.length) {
 		return;
 	}
+
 
 	var cm = this.cm;
 	var doc = cm.getDoc();
@@ -64,7 +65,6 @@ p.draw = function (matches, activeMatch) {
 
 	for (var i = 0, l = matches.length; i < l; i++) {
 		var match = matches[i];
-		var active = (match == activeMatch);
 		var start = match.index;
 		var end = match.end;
 		if (start > bottom) {
@@ -75,10 +75,11 @@ p.draw = function (matches, activeMatch) {
 		} // not visible, so don't mark.
 		var startPos = match.startPos || (match.startPos = doc.posFromIndex(start));
 		var endPos = match.endPos || (match.endPos = doc.posFromIndex(end));
+		var active = (match === activeMatch);
+		var selected = (match === selectedMatch);
 
-		if (active) {
-			ctx.globalAlpha = 0.6;
-		}
+		if (active || selected) { ctx.globalAlpha = 0.45; }
+
 		var startRect = cm.charCoords(startPos, "local");
 		var endRect = cm.charCoords(endPos, "local");
 
@@ -98,9 +99,8 @@ p.draw = function (matches, activeMatch) {
 			this.drawHighlight(ctx, 0, endRect.top, endRect.right, endRect.bottom, scroll.top, true);
 			// CMUtils.getEOLPos(this.sourceCM, startPos);
 		}
-		if (active) {
-			ctx.globalAlpha = 1;
-		}
+
+		if (active || selected) { ctx.globalAlpha = 1; }
 	}
 };
 

js/documentation.js

@@ -69,7 +69,7 @@ var library = {
 				{
 				label:"List",
 				desc:"The <b>List</b> tool lists all found matches."+
-					"<p>You can specify either a simple deliminator (ex. <code>,</code> or <code>\\n</code>), or use <a href='javascript:showLib(\"subst\")'>substitution tokens</a> (ex. <code>$&</code> or <code>$1</code>) to generate more advanced reports.</p>"+
+					"<p>You can specify either a simple delimiter (ex. <code>,</code> or <code>\\n</code>), or use <a href='javascript:showLib(\"subst\")'>substitution tokens</a> (ex. <code>$&</code> or <code>$1</code>) to generate more advanced reports.</p>"+
 					"<p>Escaped characters compatible with the JS string format are supported, such as <code>\\n</code>, <code>\\t</code> & <code>\\u0009</code>.</p>"+
 					"<p>Roll over tokens for information.</p>"
 				},
@@ -79,8 +79,9 @@ var library = {
 					"<p>Click on a highlighted match in the <b>Text</b> panel to display details for that match.</p>"
 				},
 				{
-				label:"Graph",
-				desc:"The <b>Graph</b> tool displays a detailed breakdown of the Expression."
+				label:"Explain",
+				desc:"The <b>Explain</b> tool displays a detailed breakdown of the <b>Expression</b>."+
+					"<p>Mouse over the explanation to highlight the related tokens in the <b>Expression</b> panel.</p>"
 				}
 			]
 			},

js/views/DocView.js

@@ -40,7 +40,7 @@ var SubstLexer = require('../SubstLexer');
 var Utils = require('../utils/Utils');
 
 var Docs = require('../utils/Docs');
-var Graph = require('../utils/Graph');
+var Explain = require('../views/Explain');
 var CodeMirror = require('codemirror');
 
 var DocView = function (element) {
@@ -88,6 +88,7 @@ p.saveTooltip = null;
 p.matches = null;
 p.error = null;
 p.hoverMatch = null;
+p.selectedMatch = null;
 p.exprLexer = null;
 p.toolsLexer = null;
 p.tool = null;
@@ -545,8 +546,8 @@ p.update = function () {
 	// used primarily to handle fwdslash errors.
 	if (this.exprLexer.errors.length || !regex) {
 		this.error = "ERROR";
-		this.updateTool();
 		this.updateResults();
+		this.updateTool();
 		return;
 	}
 
@@ -556,6 +557,7 @@ p.update = function () {
 		_this.matches = matches;
 
 		_this.updateResults();
+		_this.updateTool(str, regex);
 		$.defer(_this, _this.drawSourceHighlights, "draw");
 
 		if (ExpressionModel.isDirty()) {
@@ -565,8 +567,6 @@ p.update = function () {
 		if (ExpressionModel.id) {
 			BrowserHistory.go($.createID(ExpressionModel.id));
 		}
-
-		_this.updateTool(str, regex);
 	});
 };
 
@@ -583,6 +583,9 @@ p.getRegEx = function(global) {
 }
 
 p.updateTool = function (source, regex) {
+	var oldMatch = this.selectedMatch;
+	var match = this.selectedMatch = null;
+
 	if (!this.toolsEnabled) { return; }
 	source = source||this.sourceCM.getValue();
 	var result = "", toolsCM = this.getToolCM(), err = this.error;
@@ -619,7 +622,8 @@ p.updateTool = function (source, regex) {
 		}
 		this.toolsOutCM.setValue(result);
 	} else if (this.tool == "details") {
-		var cm = this.sourceCM, match=this.getMatchAt(cm.indexFromPos(cm.getCursor()), true);
+		var cm = this.sourceCM;
+		match = this.getMatchAt(cm.indexFromPos(cm.getCursor()), true);
 
 		if (match) {
 			result += "<h1><b>Match #"+match.num+"</b>"+ 
@@ -632,15 +636,21 @@ p.updateTool = function (source, regex) {
 					"  <b>Length:</b> "+match[i].length+"</h1>"+
 					"<p>"+TextUtils.htmlSafe(match[i])+"</p>";
 			}
-		} else {
-			result = "<i>click a <span class='match'>match</span> above for details</i>";
 		}
+
+		result += "<p class='info'>click a <span class='match'>match</span> above for details</p>";
 		$.el(".content",this.toolsResults).innerHTML = "<code><pre>"+result+"</code></pre>";
-	} else if (this.tool == "graph") {
+
+	} else if (this.tool == "explain") {
 		var token = this.exprLexer.token, expr = this.expressionCM.getValue();
-		result = Graph.forExpression(expr, token, this.expressionHighlighter);
+		result = Explain.forExpression(expr, token, this.expressionHighlighter);
 		$.empty($.el(".content",this.toolsResults)).appendChild(result);
 	}
+
+	if (match !== oldMatch) {
+		this.selectedMatch = match;
+		$.defer(this, this.drawSourceHighlights, "draw");
+	}
 };
 
 p.getMatchAt = function(index, inclusive) {
@@ -658,7 +668,7 @@ p.getMatchAt = function(index, inclusive) {
 };
 
 p.drawSourceHighlights = function () {
-	this.sourceHighlighter.draw(this.error == "ERROR" ? null : this.matches, this.hoverMatch);
+	this.sourceHighlighter.draw(this.error == "ERROR" ? null : this.matches, this.hoverMatch, this.selectedMatch);
 };
 
 p.updateResults = function () {

js/utils/Graph.js → js/views/Explain.js

@@ -22,15 +22,15 @@
  SOFTWARE.
  */
 
-var Utils = require('./Utils');
-var Docs = require('./Docs');
+var Utils = require('../utils//Utils');
+var Docs = require('../utils/Docs');
 var ExpressionHighlighter = require('../ExpressionHighlighter');
 
-var Graph = {};
+var Explain = {};
 
-Graph.forExpression = function(expr, token, highlighter) {
+Explain.forExpression = function(expr, token, highlighter) {
 	var groupClasses = ExpressionHighlighter.GROUP_CLASS_BY_TYPE, pre = "exp-";
-	var result = $.div(null, "graph"), el = result;
+	var result = $.div(null, "explain"), el = result;
 
 	var enterHandler = function(evt) {
 		var o = evt.currentTarget;
@@ -91,4 +91,4 @@ Graph.forExpression = function(expr, token, highlighter) {
 
 	return result;
 };
-module.exports = Graph;
+module.exports = Explain;

scss/views/docView.scss

@@ -136,7 +136,7 @@
 	}
 }
 
-.tools .graph {
+.tools .explain {
 	div {
 		padding: calc(0.5em + 1px);
 		margin-top: 0.75em;
@@ -189,7 +189,7 @@
 	}
 
 	/*
-	Expression backgrounds need to be transparent so the selection shows through, but it looks wrong for the graph.
+	Expression backgrounds need to be transparent so the selection shows through, but it looks wrong for the explain.
 	*/
 	.exp-group-0 { background: tint($group-color, 89%); }
 
@@ -228,7 +228,7 @@
 	.tool-list .editor.list, .tool-list .editor.out {
 		display: block;
 	}
-	.tool-details .tools.results, .tool-graph .tools.results {
+	.tool-details .tools.results, .tool-explain .tools.results {
 		display: block;
 	}
 }
@@ -257,11 +257,16 @@
 		.match {
 			background: $theme-color;
 		}
+
+		.info {
+			font-style: italic;
+			background: $editor-toolsres-bg;
+		}
 
 		h1 {
 			font-size: 1em;
 			margin: 0;
-			padding: 0.5em;
+			padding: $pad;
 			padding-left: $pad;
 			padding-right: $pad;
 			font-weight: normal;