Graph mouse overs.

Signed-off-by: Grant Skinner <[email protected]>

Author: gskinner

js/utils/Graph.js

@@ -28,9 +28,22 @@ var ExpressionHighlighter = require('../ExpressionHighlighter');
 
 var Graph = {};
 
-Graph.forExpression = function(expr, token) {
+Graph.forExpression = function(expr, token, highlighter) {
 	var groupClasses = ExpressionHighlighter.GROUP_CLASS_BY_TYPE, pre = "exp-";
 	var result = $.div(null, "graph"), el = result;
+	
+	var enterHandler = function(evt) {
+		var o = evt.currentTarget;
+		highlighter.selectToken(o.token);
+		$.addClass(o, "selected");
+		evt.stopPropagation();
+	};
+	var exitHandler = function(evt) {
+		highlighter.selectToken(null);
+		$.removeClass(evt.currentTarget, "selected");
+		evt.stopPropagation();
+	};
+	
 	while ((token = token.next) && (token.type != "close")) {
 		if (token.proxy) { continue; }
 
@@ -68,6 +81,12 @@ Graph.forExpression = function(expr, token) {
 		if (token.err) {
 			$.addClass(div, "error");
 		}
+		
+		if (!token.open) {
+			div.token = token;
+			div.addEventListener("mouseover", enterHandler);
+			div.addEventListener("mouseout", exitHandler);
+		}
 	}
 
 	return result;

js/views/DocView.js

@@ -628,7 +628,7 @@ p.updateTool = function (source, regex) {
 		$.el(".content",this.toolsResults).innerHTML = "<code><pre>"+result+"</code></pre>";
 	} else if (this.tool == "graph") {
 		var token = this.exprLexer.token, expr = this.expressionCM.getValue();
-		result = Graph.forExpression(expr, token);
+		result = Graph.forExpression(expr, token, this.expressionHighlighter);
 		$.empty($.el(".content",this.toolsResults)).appendChild(result);
 	}
 };

scss/views/docView.scss

@@ -138,21 +138,25 @@
 
 .tools .graph {
 	div {
-		padding: 0.5em;
+		padding: calc(0.5em + 1px);
 		margin-top: 0.75em;
 		display: block;
 		border: solid 1px rgba($title-bg,0.5);
 		color: rgba(0,0,0,0.66);
 	}
 
+	.selected {
+		border: solid 2px $title-bg;
+		padding: 0.5em;
+	}
+	
 	:first-child {
 		margin-top: 0;
 	}
 
-	.related {
-		margin-top: 0;
+	div.related {
+		margin-top: -1px;
 		background: rgba($title-bg,0.33);
-		border-top: none;
 	}
 
 	.error {