Fix sin^2(x), and sin^2 x as cursor moves through #visual See GitHub comment for screenshots/GIFs (source copied below). Before (notice space before paren): <img width="176" alt="static_before" src="https://cloud.githubusercontent.com/assets/225809/14372074/280414d4-fcf2-11e5-8652-fc44eb8eb3cb.png">  After: <img width="183" alt="static_after" src="https://cloud.githubusercontent.com/assets/225809/14372073/280404e4-fcf2-11e5-94ff-ec9fbc59f41d.png"> 
diff --git a/src/commands/math/basicSymbols.js b/src/commands/math/basicSymbols.js index 9b19d5b..46ad6b8 100644 --- a/src/commands/math/basicSymbols.js +++ b/src/commands/math/basicSymbols.js
@@ -123,11 +123,18 @@ last.ctrlSeq += (isBuiltIn ? ' ' : '}'); if (TwoWordOpNames.hasOwnProperty(word)) last[L][L][L].jQ.addClass('mq-last'); if (!shouldOmitPadding(first[L])) first.jQ.addClass('mq-first'); - if (!shouldOmitPadding(last[R]) && !(last[R] instanceof Bracket)) { - // also omit space between operator name and paren like in sin(x) - last.jQ.addClass('mq-last'); + if (!shouldOmitPadding(last[R])) { if (last[R] instanceof SupSub) { - last.jQ.addClass('mq-followed-by-supsub'); + var supsub = last[R]; // XXX monkey-patching, but what's the right thing here? + // Have operatorname-specific code in SupSub? A CSS-like language to style the + // math tree, but which ignores cursor and selection (which CSS can't)? + var respace = supsub.siblingCreated = supsub.siblingDeleted = function() { + supsub.jQ.toggleClass('mq-after-operator-name', !(supsub[R] instanceof Bracket)); + }; + respace(); + } + else { + last.jQ.toggleClass('mq-last', !(last[R] instanceof Bracket)); } }
diff --git a/src/css/math.less b/src/css/math.less index 8260cd7..fd828b0 100644 --- a/src/css/math.less +++ b/src/css/math.less
@@ -216,16 +216,8 @@ var.mq-operator-name.mq-first { padding-left: .2em; } - var.mq-operator-name.mq-last { + var.mq-operator-name.mq-last, .mq-supsub.mq-after-operator-name { padding-right: .2em; - - &.mq-followed-by-supsub { - padding-right: 0; - - + .mq-supsub { - padding-right: .2em; - } - } } ////
diff --git a/test/unit/css.test.js b/test/unit/css.test.js index 044e03f..ec065ce 100644 --- a/test/unit/css.test.js +++ b/test/unit/css.test.js
@@ -55,4 +55,29 @@ $(mq.el()).remove(); }); + + test('operator name spacing e.g. sin x', function() { + var mq = MathQuill.MathField($('<span></span>').appendTo(mock)[0]); + + mq.typedText('sin'); + var n = jQuery('#mock var.mq-operator-name:last'); + assert.equal(n.text(), 'n'); + assert.ok(!n.is('.mq-last')); + + mq.typedText('x'); + assert.ok(n.is('.mq-last')); + + mq.keystroke('Left').typedText('('); + assert.ok(!n.is('.mq-last')); + + mq.keystroke('Backspace').typedText('^'); + assert.ok(!n.is('.mq-last')); + var supsub = jQuery('#mock .mq-supsub'); + assert.ok(supsub.is('.mq-after-operator-name')); + + mq.typedText('2').keystroke('Tab').typedText('('); + assert.ok(!supsub.is('.mq-after-operator-name')); + + $(mq.el()).empty(); + }); });
diff --git a/test/visual.html b/test/visual.html index 1126837..1c6f44f 100644 --- a/test/visual.html +++ b/test/visual.html
@@ -187,7 +187,7 @@ <tr><td><span class="mathquill-static-math">^{\frac{as}{ }df}</span><td><span>^{\frac{as}{ }df}</span> <tr><td><span class="mathquill-static-math">e^{i\pi}+1=0</span><td><span>e^{i\pi}+1=0</span> <tr><td><span class="mathquill-static-math">\sqrt[n]{1}</span><td><span>\sqrt[n]{1}</span> -<tr><td><span class="mathquill-static-math">\sin^2 x</span></td><td><span>\sin^2 x</span> +<tr><td><span class="mathquill-static-math">\sin ^2x+\sin ^2\left(x\right)+\sin ^2(x)</span></td><td><span>\sin ^2x+\sin ^2\left(x\right)+\sin ^2(x)</span> <tr><td><span class="mathquill-static-math">12a\sin b</span></td><td><span>12a\sin b</span> <tr><td><span class="mathquill-static-math">1a^2 \sin b</span></td><td><span>1a^2 \sin b</span> <tr><td><span class="mathquill-static-math">a + \sin b</span></td><td><span>a + \sin b</span>
