Feature: integrals' from/to now mandatory, prettier
See the GitHub comment on this commit for screenshots. (Also copied below.)
Like #258 but for integrals rather than sums and products, integrals now
come with from and to blocks as an inextricable part of them.
Note that this means that integrals with only a subscript, e.g.
Stoke's theorem `\int_{\partal\Omega} \omega = \int_\Omega d\omega`,
can't be typed anymore, but #258 made an analogous sacrifice.
I originally intended this to be two PRs, one to fix how integrals look
and one to make the from/to blocks mandatory, but was stymied by the
vertical alignment of the superscript block (see the second test case).
The only way I could figure out to get that to work was .mq-sup-inner,
which doesn't exist in normal sup/sub blocks, I'm only able to add it by
making from/to blocks mandatory and inserting a span.mq-sup-inner into
the HTML template (luckily mandatory from/to blocks are what Desmos
needs anyway).
One nice thing: supsub no longer has to autodetect whether it's
currently serving as the from/to of an integral, we can get rid of all
the .mq-limit stuff AND the SupSub::respace() stuff, and get rid of it
from the redrawing/reflowing test.
Speaking of tests, there wasn't enough space for the spherical integral
in the rendered math column, so I made it wider, half instead of a third
of the page.
----
Before: <img width="238" alt="before" src="https://cloud.githubusercontent.com/assets/225809/14314220/d69bd5fc-fbaa-11e5-8487-2c79eef5bb1d.png">
After: <img width="241" alt="after" src="https://cloud.githubusercontent.com/assets/225809/14314221/d69e7118-fbaa-11e5-8954-551a5c06d495.png">
KaTeX: <img width="354" alt="katex" src="https://cloud.githubusercontent.com/assets/225809/14314365/9b258e2c-fbab-11e5-8594-d2e7617b4185.png">
[MathJax](http://mathb.in/55065): <img width="433" alt="mathjax" src="https://cloud.githubusercontent.com/assets/225809/14314364/9b2348b0-fbab-11e5-80eb-31a58c4910d1.png">
LaTeXiT: <img width="354" alt="katex" src="https://cloud.githubusercontent.com/assets/225809/14314355/92c3d07c-fbab-11e5-9d73-296a599e7a3a.png">
diff --git a/src/commands/math/commands.js b/src/commands/math/commands.js
index 414edaa..f4e1381 100644
--- a/src/commands/math/commands.js
+++ b/src/commands/math/commands.js
@@ -181,7 +181,6 @@
break;
}
}
- this.respace();
};
Options.p.charsThatBreakOutOfSupSub = '';
_.finalizeTree = function() {
@@ -230,10 +229,6 @@
}
return latex('_', this.sub) + latex('^', this.sup);
};
- _.respace = _.siblingCreated = _.siblingDeleted = function(opts, dir) {
- if (dir === R) return; // ignore if sibling only changed on the right
- this.jQ.toggleClass('mq-limit', this[L].ctrlSeq === '\\int ');
- };
_.addBlock = function(block) {
if (this.supsub === 'sub') {
this.sup = this.upInto = this.sub.upOutOf = block;
@@ -382,7 +377,23 @@
LatexCmds['∫'] =
LatexCmds['int'] =
-LatexCmds.integral = bind(Symbol,'\\int ','<big>∫</big>');
+LatexCmds.integral = P(SummationNotation, function(_, super_) {
+ _.init = function() {
+ var htmlTemplate =
+ '<span class="mq-int mq-non-leaf">'
+ + '<big>∫</big>'
+ + '<span class="mq-supsub mq-non-leaf">'
+ + '<span class="mq-sup"><span class="mq-sup-inner">&1</span></span>'
+ + '<span class="mq-sub">&0</span>'
+ + '<span style="display:inline-block;width:0">​</span>'
+ + '</span>'
+ + '</span>'
+ ;
+ Symbol.prototype.init.call(this, '\\int ', htmlTemplate);
+ };
+ // FIXME: refactor rather than overriding
+ _.createLeftOf = MathCommand.p.createLeftOf;
+});
var Fraction =
LatexCmds.frac =
diff --git a/src/css/math.less b/src/css/math.less
index 49a4214..9b7fb9e 100644
--- a/src/css/math.less
+++ b/src/css/math.less
@@ -90,6 +90,28 @@
font-size: 200%;
}
+ .mq-int {
+ > big {
+ display: inline-block;
+ .transform(scaleX(.7));
+ vertical-align: -.16em;
+ }
+
+ > .mq-supsub {
+ font-size: 80%;
+ vertical-align: -1.1em;
+ padding-right: .2em;
+
+ > .mq-sup > .mq-sup-inner {
+ vertical-align: 1.3em;
+ }
+
+ > .mq-sub {
+ margin-left: -.35em;
+ }
+ }
+ }
+
.mq-roman {
font-style: normal;
}
@@ -132,10 +154,6 @@
text-align: left;
font-size: 90%;
vertical-align: -.5em;
- &.mq-limit {
- font-size: 80%;
- vertical-align: -.4em;
- }
&.mq-sup-only {
vertical-align: .5em;
@@ -154,9 +172,6 @@
display: block;
float: left;
}
- &.mq-limit .mq-sub {
- margin-left: -.25em;
- }
.mq-binary-operator {
padding: 0 .1em;
diff --git a/test/visual.html b/test/visual.html
index cda3f14..1d2cf15 100644
--- a/test/visual.html
+++ b/test/visual.html
@@ -24,6 +24,9 @@
td {
width: 33%;
}
+#static-latex-rendering-table td {
+ width: 50%;
+}
#show-textareas-button {
float: right;
}
@@ -81,10 +84,10 @@
<h3>Redrawing</h3>
<p>
- <span id="reflowing-test">\sqrt{_0^1}</span>
+ <span id="reflowing-test">\sqrt{}</span>
should look the same as
<span class="mathquill-static-math">
- \sqrt{\pi\sqrt\sqrt\frac12\int_0^1}
+ \sqrt{\pi\sqrt\sqrt\frac12}
</span>
</p>
<script type="text/javascript">
@@ -96,7 +99,7 @@
var textarea = $('#reflowing-test textarea');
// paste some stuff that needs resizing
textarea.trigger('paste');
- textarea.val('\\pi\\sqrt{\\sqrt{\\frac12}}\\int');
+ textarea.val('\\pi\\sqrt{\\sqrt{\\frac12}}');
setTimeout(function() { if (count !== 1) throw 'reflow not called'; });
});
</script>
@@ -183,7 +186,7 @@
</table>
<h3>Static LaTeX rendering (<code>.mathquill-static-math</code>) tests</h3>
-<table>
+<table id="static-latex-rendering-table">
<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>
@@ -207,6 +210,8 @@
<tr><td><span class="mathquill-static-math">1+\sum_0^n+\sum_{i=0123}^n+\sum_0^{wordiness}</span><td><span>1+\sum_0^n+\sum_{i=0123}^n+\sum_0^{wordiness}</span>^M
<tr><td><span class="mathquill-static-math">x\ \ \ +\ \ \ y</span><td><span>x\ \ \ +\ \ \ y</span>^M
<tr><td><span class="mathquill-static-math">\sum _{n=0}^3\cos x</span><td><span>\sum _{n=0}^3\cos x</span>^M
+<tr><td><span class="mathquill-static-math">\int _{\phi =0}^{2\pi }\int _{\theta =0}^{\pi }\int _{r=0}^{\infty }f(r,\theta ,\phi )r^2\sin \theta drd\theta d\phi </span><td><span>\int _{\phi =0}^{2\pi }\int _{\theta =0}^{\pi }\int _{r=0}^{\infty }f(r,\theta ,\phi )r^2\sin \theta drd\theta d\phi </span>
+<tr><td><span class="mathquill-static-math">\int_0^{\frac{\frac{1}{2}}{3}} \int_0^{\frac{1}{\frac{2}{3}}} \int_0^{\frac{1}{\frac{2}{\frac{3}{\frac{4}{5}}}}}</span><td><span>\int_0^{\frac{\frac{1}{2}}{3}} \int_0^{\frac{1}{\frac{2}{3}}} \int_0^{\frac{1}{\frac{2}{\frac{3}{\frac{4}{5}}}}}</span>
<tr><td colspan=2><span id="sixes"></span>
<script>
$(function() {
