From 56747d6f6537f9ecc6d9166fa67e207bd88b2feb Mon Sep 17 00:00:00 2001 From: Grant Skinner Date: Sat, 23 Jan 2016 10:49:13 -0700 Subject: [PATCH] Rename Graph to Explain & add selected state for Details Signed-off-by: Grant Skinner --- index.html | 2 +- js/SourceHighlighter.js | 16 ++++++------- js/documentation.js | 7 +++--- js/views/DocView.js | 30 ++++++++++++++++--------- js/{utils/Graph.js => views/Explain.js} | 12 +++++----- scss/views/docView.scss | 13 +++++++---- 6 files changed, 48 insertions(+), 32 deletions(-) rename js/{utils/Graph.js => views/Explain.js} (92%) diff --git a/index.html b/index.html index 65bfd4c9..80917541 100644 --- a/index.html +++ b/index.html @@ -212,7 +212,7 @@

  • Replace
  • List
  • Details
    • -
  • Graph
    • +
  • Explain
    • diff --git a/js/SourceHighlighter.js b/js/SourceHighlighter.js index 8967feeb..f3741bd0 100644 --- a/js/SourceHighlighter.js +++ b/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; } } }; diff --git a/js/documentation.js b/js/documentation.js index e5606c5d..3585024b 100644 --- a/js/documentation.js +++ b/js/documentation.js @@ -69,7 +69,7 @@ var library = { { label:"List", desc:"The List tool lists all found matches."+ - "

    You can specify either a simple deliminator (ex. , or \\n), or use substitution tokens (ex. $& or $1) to generate more advanced reports.

    "+ + "

    You can specify either a simple delimiter (ex. , or \\n), or use substitution tokens (ex. $& or $1) to generate more advanced reports.

    "+ "

    Escaped characters compatible with the JS string format are supported, such as \\n, \\t & \\u0009.

    "+ "

    Roll over tokens for information.

    " }, @@ -79,8 +79,9 @@ var library = { "

    Click on a highlighted match in the Text panel to display details for that match.

    " }, { - label:"Graph", - desc:"The Graph tool displays a detailed breakdown of the Expression." + label:"Explain", + desc:"The Explain tool displays a detailed breakdown of the Expression."+ + "

    Mouse over the explanation to highlight the related tokens in the Expression panel.

    " } ] }, diff --git a/js/views/DocView.js b/js/views/DocView.js index 883972dd..6cbc8151 100644 --- a/js/views/DocView.js +++ b/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 += "

    Match #"+match.num+""+ @@ -632,15 +636,21 @@ p.updateTool = function (source, regex) { " Length: "+match[i].length+"

    "+ "

    "+TextUtils.htmlSafe(match[i])+"

    "; } - } else { - result = "click a match above for details"; } + + result += "

    click a match above for details

    "; $.el(".content",this.toolsResults).innerHTML = "
    "+result+"
    "; - } 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 () { diff --git a/js/utils/Graph.js b/js/views/Explain.js similarity index 92% rename from js/utils/Graph.js rename to js/views/Explain.js index 0b7914dd..4d346a0c 100644 --- a/js/utils/Graph.js +++ b/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; diff --git a/scss/views/docView.scss b/scss/views/docView.scss index cfcfe481..4efc8c38 100644 --- a/scss/views/docView.scss +++ b/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;