Align #60

alexf101 · 2017-07-28T05:56:30Z

Support align* environments for displaying and editing multi-line equations.

To get this working with a minimum of code duplication, I've massaged the matrix environment slightly to have certain parameters configurable that were previously not. In particular, there's now an htmlColumnSeparator for adding non-editable visual content to separate the columns, which in this case is the ' = ' sign.

Customary GIF :)

Requires:

Tests
This branch is based off Support for 'leftRightIntoCmdGoes' config in the matrix element #59, and should be rebased after that is merged.

…trix. This lets the user cross over the top or bottom of the matrix naturally without getting caught inside it, using the same config option as for fractions.

By overriding moveTowards and moveOutOf on matrix and MatrixCell respectively, we can avoid changing {up,down}Into into functions and so keep these changes restricted to affecting the matrix environment.

…delimiter ('=').

alexf101 · 2017-10-25T05:33:10Z

Hi @eoghanmcilwaine!

I've merged master into this and added a unit test and visual test.

This is the visual test output:

However, it's not quite right yet - I'd really like it to respond to click events by placing the cursor in the near row. At the moment, it appears to put the cursor in the top row if you miss. I was wondering if you have any idea how to accomplish that in MathQuill?

eoghanmcilwaine

Hi @alexf101, nice work here.

To answer your question - the cursor positioning after a click is set by the seek controller method. It basically puts the cursor inside/beside the math object you've clicked.

Because the =s down the middle are just some extra html inserted into the {align*} table rather than being math objects in their own right, all seek knows is that you've clicked somewhere on the {align*} object. So the cursor is inserted at the top of the table somewhere.

I think the solution would probably be to allow mathquill to parse and insert the =s as normal (well not exactly as normal because it'd be great to keep the extra <td> around the = somehow).

Incidentally this could help reduce the divergence between Matrix and Align* as the column delimiter would no longer be different. I'm just doing a review of your code - it's a good solution in general but one thing I'm not sure about is adding Align-specific conditional stuff to Matrix (it's like this classic code smell). There's probably a neater way. I'm having a go at using a common abstract ancestor for Align and Matrix but there could be a slicker way.

eoghanmcilwaine · 2017-10-27T18:38:29Z

src/commands/math/commands.js

@@ -863,7 +863,7 @@ LatexCmds.begin = P(MathCommand, function(_, super_) {
    var string = Parser.string;
    var regex = Parser.regex;
    return string('{')
-      .then(regex(/^[a-z]+/i))
+      .then(regex(/^[a-z*]+/i))  // LaTex uses * as a convention for alternative forms of a command, usually 'without automatic numbering'


Hey @alexf101, am I right in saying the asterisk can only come at the end? So it'd be something like ^[a-z]+\*?

Seems reasonable - I'm no latex expert, but I've only ever seen it used at the end.

@eoghanmcilwaine can you give me the mathquill.js and mathquill.css . I can't build

error message:
' undefinedError: Cannot read property 'eval' of null '

@eoghanmcilwaine thank you very much

@eoghanmcilwaine matrix . my email: [email protected]

eoghanmcilwaine · 2017-10-27T18:52:19Z

src/commands/math/commands.js

+// differently in latex. Nevertheless, we want it to render as a table so it's convenient to extend Matrix.
+Environments['align*'] = P(Matrix, function (_, super_) {
+  _.environment = 'align*';
+  _.extraTableClasses = 'rcl';


@alexf101 I think all mathquill classes start with mq- so best to stick with that convention here.

eoghanmcilwaine · 2017-11-28T18:41:57Z

test/visual.html

+    \begin{align*}
+                  y &= mx+c \\
+               y-c  &= mx   \\
+      \frac{y-c}{m} &= x


Can we encode the ampersands as &? Just so it's really unambiguous.

- Tighten regex to only allow * at the end - prefix mathquill class names with 'mq-' - Use '&' in HTML files instead of & for literal ampersand.

alexf101 · 2017-12-30T07:55:08Z

Ok, thanks so much for that information!

So the mental model I have is that the nearest parent object of any cell in the align* environment is the row (which probably differs somewhat from a Matrix in general, where some clients might consider the column as the parent, or the matrix itself).

Would it make sense (and solve the problem of click events on = moving the cursor to the top row instead of the nearest row) to define a MatrixRow extending MathBlock and reimplement using that?

It seems like a fairly deep reimplementation would be required to introduce a MatrixRow to the object - I would view this as a practical reason to follow your advice and separate the align environment from the matrix implementation, even if most of the code ends up being similar.

I'll try and have a crack at it - let me know if this approach makes sense to you, or something else :)

eoghanmcilwaine · 2018-01-02T17:20:20Z

Cheers @alexf101. I think you're spot on about rows making more sense as separate objects. It's a pretty big change though.

I came up with a solution to the cursor-in-top-row issue without changing seek or matrix - commit here. It's kind of hacky but self-contained at least.

By the way, I separated the matrix and align logic in another commit.
The diff is a bit long but the change is fairly simple: I've created a common ancestor "TabularEnv" that both matrix and align* inherit from. So for example TabularEnv has an addRow method but only Matrix has addColumn. See what you think, I reckon it's better this way as it removes some conditional complexity.

alexf101 · 2018-10-17T00:08:36Z

@eoghanmcilwaine Looks awesome! Let's move to the align-alternative branch :)

Is there a PR for merging align-alternative into MathQuill that I can jump on?

So sorry about the long delay - the usual story of too aggressive email filters on GitHub notifications, working on other projects, etc. I really appreciate the interest you've taken in this!

alexf101 · 2018-10-31T07:50:15Z

@eoghanmcilwaine I tried it out, and it seems to... kind of work? I have to click pretty precisely on the middle of the equals sign for it to stay in the same row. Is that your experience too, or did I make some mistakes merging your branch over our fork?

alexf101 added 9 commits July 12, 2017 17:09

Add direction-sensitive implementation of leftRightIntoCmdGoes for ma…

0e9eea9

…trix. This lets the user cross over the top or bottom of the matrix naturally without getting caught inside it, using the same config option as for fractions.

Implement as getEntryPoint and atExitPoint instead of updowninto.

a879bce

By overriding moveTowards and moveOutOf on matrix and MatrixCell respectively, we can avoid changing {up,down}Into into functions and so keep these changes restricted to affecting the matrix environment.

Calculate rowSize as we relink instead of doing extra work.

ba9e675

Add unit tests for leftRightIntoCmdGoes with matrices.

64a0879

Remove code for interpreting upDownInto as a function.

7cd5de4

align* environment for rendering multi-line equations using a custom …

b480298

…delimiter ('=').

Note in comment why '*' was added to the regex.

409a180

Add tests for align* environment.

d149b5c

Merge branch 'matrix' into align

37728a9

alexf101 force-pushed the align branch from e57c5b8 to cb5def7 Compare October 25, 2017 05:22

Add visual test for align*.

74793e2

alexf101 force-pushed the align branch from cb5def7 to 74793e2 Compare October 25, 2017 05:31

eoghanmcilwaine reviewed Nov 28, 2017

View reviewed changes

Small changes in response to Eoghan's comments:

90745f4

- Tighten regex to only allow * at the end - prefix mathquill class names with 'mq-' - Use '&' in HTML files instead of & for literal ampersand.

eoghanmcilwaine and others added 3 commits December 21, 2021 16:16

Create common ancestor for matrix and align*

0674b93

Keep cursor on correct row in align*

e6dc773

Ensures LESS compatibility (2.x) by adding package-lock.json.

11453e0

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Align #60

Align #60

alexf101 commented Jul 28, 2017 •

edited

Loading

alexf101 commented Oct 25, 2017

eoghanmcilwaine left a comment •

edited

Loading

eoghanmcilwaine Oct 27, 2017

alexf101 Dec 30, 2017

zyLear Aug 17, 2019 •

edited

Loading

zyLear Aug 17, 2019

zyLear Aug 17, 2019

zyLear Aug 17, 2019

eoghanmcilwaine Oct 27, 2017

alexf101 Dec 30, 2017

eoghanmcilwaine Nov 28, 2017

alexf101 Dec 30, 2017

alexf101 commented Dec 30, 2017

eoghanmcilwaine commented Jan 2, 2018 •

edited

Loading

alexf101 commented Oct 17, 2018

alexf101 commented Oct 31, 2018

Align #60

Are you sure you want to change the base?

Align #60

Conversation

alexf101 commented Jul 28, 2017 • edited Loading

alexf101 commented Oct 25, 2017

eoghanmcilwaine left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zyLear Aug 17, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexf101 commented Dec 30, 2017

eoghanmcilwaine commented Jan 2, 2018 • edited Loading

alexf101 commented Oct 17, 2018

alexf101 commented Oct 31, 2018

alexf101 commented Jul 28, 2017 •

edited

Loading

eoghanmcilwaine left a comment •

edited

Loading

zyLear Aug 17, 2019 •

edited

Loading

eoghanmcilwaine commented Jan 2, 2018 •

edited

Loading