Merge pull request #606 from mathquill/fix.sin-squared
Fix sin^2(x), and sin^2 x as cursor moves through #visual
diff --git a/src/commands/math/basicSymbols.js b/src/commands/math/basicSymbols.js
index 979ae9d..2cad131 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 b108046..639cdf9 100644
--- a/test/unit/css.test.js
+++ b/test/unit/css.test.js
@@ -81,4 +81,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>
