Added mathematics tool. by dazsmith · Pull Request #124 · lovasoa/whitebophir

dazsmith · 2020-08-24T14:38:40Z

_{By opening a pull request, I certify that I hold the intellectual property of the code I am submitting,
and I am granting the initial authors of WBO a perpetual, worldwide, non-exclusive, royalty-free, and irrevocable license to this code.}

This code adds a "mathematics tool" which accepts (La)TeX code in a text box, formats it using mathjax, and displays it on the page. This is designed to address #109.

Explanation of code

The input LaTeX is stored in the aria-label attribute of the svg element created by mathjax. I don't think this is contrary to the designated use of this accessibility attribute, as it is reasonable to expect that a screen reader would benefit from accessing the input LaTeX code.
The color of the displayed mathematics is the color selected by the user, but the usual LaTeX color commands can be used to (locally) change the color. The user's color is stored in the stroke attribute of the rectangle of class clickhelper.
The rectangle of class clickhelper is appended to the output of mathjax to make it easier to select the displayed mathematics for future edits & moves using the move tool.
The edits to ellipse, pencil and rectangle tools and associated CSS and board.css are because mathjax outputs an svg element containing many other elements, whose fill attribute should not be set to none. Therefore, a new class, nofill, was created for those tools providing the original functionality.
The edits to the hand tool are to enable selection of the "parent" svg element containing all the mathjax output, so that not just a single part of the mathjax output is moved.

Some comments

I don't know whether or not line 7 of the new mathematics.js should be edited to include my name too. Please advise.

dazsmith · 2020-08-24T14:43:57Z

Perhaps the failed checks failed because of the edits to the pencil tool?

dazsmith · 2020-09-02T05:56:45Z

It was not the change to the pencil tool.
The issue was that the main canvas svg node required property xmlns:xlink="http://www.w3.org/1999/xlink" to be able to contain output of mathematics tool.
Solving that problem revealed a typo in a line I added.

I'm not sure why this issue only arises in the preview and not the boards.

droundy · 2020-09-12T15:34:09Z

This sounds great. Would you guess that this pull request is in a state where I could reasonably integrate it intro my whiteboards for classes starting in under two weeks?

dazsmith · 2020-09-12T15:35:59Z

I've been using it in my classes for 5 weeks with no problem.

droundy · 2020-09-12T15:58:30Z

If the mathjax a standard 2.7, or did you have to customize it? If it's standard, is there any reason not to source it from a CDN?

droundy · 2020-09-12T17:27:37Z

When I merge this with my code, I'm getting a problem in the preview, which unfortunately is pretty high priority for my plans to manage my dozen breakout rooms. :(

Edit: Never mind. I now realize I was looking at an incorrect path. (Embarrassing!)

droundy · 2020-09-12T17:51:29Z

I'm not sure how to directly contribute to someone else's pull request, so I'll note the one change I had to make here:

$ git diff
diff --git a/client-data/view.html b/client-data/view.html
index f595660..a22ff21 100644
--- a/client-data/view.html
+++ b/client-data/view.html
@@ -21,6 +21,7 @@
        <link rel="alternate" hreflang="{{.}}" href="{{../boardUriComponent}}?lang={{.}}" />
        {{/languages}}
        <script src="../polyfill.min.js"></script>
+       <script type="text/javascript" id="MathJax-script" src="https://mj.dasmithmaths.com/mathjax/tex-svg-full.js"></script>
 </head>
 
 <body>
@@ -94,6 +95,7 @@
        <script src="../tools/rect/rect.js"></script>
        <script src="../tools/ellipse/ellipse.js"></script>
        <script src="../tools/text/text.js"></script>
+       <script src="../tools/mathematics/mathematics.js"></script>
        <script src="../tools/eraser/eraser.js"></script>
        <script src="../tools/hand/hand.js"></script>
        <script src="../tools/grid/grid.js"></script>

Thanks for this great tool!

droundy · 2020-09-12T17:54:15Z

I notice that when I use math like $\frac{\sin x}{\cos x}$ the rendered math is often hidden by the edit field. Would it be possible to shift the edit field down just a bit more to help with this? It's even worse if I use an align environment or similar, so maybe we could just make the edit a bit transparent?

dazsmith · 2020-09-13T01:10:28Z

If the mathjax a standard 2.7, or did you have to customize it? If it's standard, is there any reason not to source it from a CDN?

It is standard mathjax, called with <script type="text/javascript" id="MathJax-script" src="https://mj.dasmithmaths.com/mathjax/tex-svg-full.js"></script>. I have never used mathjax before, so did not know if I could trust a public server, so just rolled my own. I haven't tried it with a public server, but I don't see why it wouldn't work, as long as they don't rate limit the mathjax requests in any way.

dazsmith · 2020-09-13T01:19:08Z

I'm not sure how to directly contribute to someone else's pull request, so I'll note the one change I had to make here:
...
Thanks for this great tool!

Thanks for the contribution. I can't find /client-data/view.html in either of lovasoa's branches. Where is this file?

Once I understand that ... I also don't know the best way for you to edit a pr, but I guess you could submit a pr to my repository, which I accept, thereby updating the branch for this pr too.

dazsmith · 2020-09-13T01:20:45Z

I notice that when I use math like $\frac{\sin x}{\cos x}$ the rendered math is often hidden by the edit field. Would it be possible to shift the edit field down just a bit more to help with this? It's even worse if I use an align environment or similar, so maybe we could just make the edit a bit transparent?

I had thought of trying to move the textbox up a bit but couldn't quickly figure it out so gave up. Transparency is a much better idea. I'll give it a go in the coming week.

droundy · 2020-09-13T13:42:35Z

Apparently I didn't make a pull request that I thought I had. At least I can't find record of it. So it seems that view.html is only in my repository. I should put together a pull request...

droundy · 2020-09-14T18:42:02Z

Hi @dazsmith , I just sent a pull request to you with some useful changes, hopefully you can merge it into this just fine.

Update to latest base version of WBO

Add missing space and reference to `xmlns:xlink` in svg root node.

…gn environment

dazsmith · 2020-10-21T04:46:16Z

I'm not sure why some of the checks failed and others passed. Can you comment, @lovasoa or @droundy ?

sents · 2022-09-06T09:45:43Z

Note that this PR uses setting of innerHTML of the data sent to the server. This allows potentially setting arbitrary HTML in the svg element. Setting innerHTML in an <svg> environment doesn't do anything so it doesn't allow arbitrary code to be executed to everybody seeing the board. However if somebody were to download the svg and embed in in a page a script tag would be executed. If there is interest in merging this eventually I can add code to filter <script>, <image>, <a> on the server side.

sents · 2022-09-06T10:08:58Z

@lovasoa I would really like to work on this PR but I can not commit to this pull request. Should I open another pull request?
@dazsmith Are you still interested on working on this?

dazsmith · 2022-09-07T12:26:02Z

@sents I would like to come back to working on this. I think if you submit a pull request to me, then I can merge it into this one.
I expect that with the upstream updates there is quite a bit of work to be done.
I'm not sure why it always failed the checks, but my guess is that downloading mathjax takes so long that it causes a timeout.

Your plan to filter <script> etc sounds good.

holema · 2022-12-28T14:13:13Z

Will you merge this PR @lovasoa? This PR seems to be great

dazsmith mentioned this pull request Sep 12, 2020

Add support for math using mathjax #125

Closed

dazsmith and others added 5 commits October 21, 2020 08:33

Merge pull request #2 from lovasoa/master

9b55aa9

Update to latest base version of WBO

Added mathematics tool.

b79ddca

Make preview of svg work.

ba012b9

Add missing space and reference to `xmlns:xlink` in svg root node.

switch to a CDN for serving mathjax

46c2a61

switch to semi-transparent textarea for mathematics, and embed in ali…

ad5880b

…gn environment

dazsmith force-pushed the math-tool branch from 3f3bebd to ad5880b Compare October 21, 2020 00:48

Fixed preview.

7e2e80d

sents mentioned this pull request May 21, 2021

Replace mover tool by selector tool #193

Merged

gigabyteservice mentioned this pull request Mar 19, 2022

Fixed: Download Svg Button #195

Merged

Uh oh!

Conversation

dazsmith commented Aug 24, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of code

Some comments

Uh oh!

dazsmith commented Aug 24, 2020

Uh oh!

dazsmith commented Sep 2, 2020

Uh oh!

droundy commented Sep 12, 2020

Uh oh!

dazsmith commented Sep 12, 2020

Uh oh!

droundy commented Sep 12, 2020

Uh oh!

droundy commented Sep 12, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

droundy commented Sep 12, 2020

Uh oh!

droundy commented Sep 12, 2020

Uh oh!

dazsmith commented Sep 13, 2020

Uh oh!

dazsmith commented Sep 13, 2020

Uh oh!

dazsmith commented Sep 13, 2020

Uh oh!

droundy commented Sep 13, 2020

Uh oh!

droundy commented Sep 14, 2020

Uh oh!

dazsmith commented Oct 21, 2020

Uh oh!

sents commented Sep 6, 2022

Uh oh!

sents commented Sep 6, 2022

Uh oh!

dazsmith commented Sep 7, 2022

Uh oh!

holema commented Dec 28, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dazsmith commented Aug 24, 2020 •

edited

Loading

droundy commented Sep 12, 2020 •

edited

Loading