Skip to content

Commit da0fd69

Browse files
authored
Merge pull request #63 from hrushikeshrv/issue_62
Fix #62 -- Recategorize UI tabs
2 parents 6ef7806 + 6b64955 commit da0fd69

30 files changed

Lines changed: 3488 additions & 1766 deletions

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,5 @@ node_modules
33
_test/
44
dist
55
.vscode
6+
_site/
7+
.jekyll_cache/

docs/Gemfile.lock

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ GEM
1111
eventmachine (1.2.7)
1212
ffi (1.16.3)
1313
forwardable-extended (2.6.0)
14-
google-protobuf (3.25.1-arm64-darwin)
15-
google-protobuf (3.25.1-x86_64-linux)
14+
google-protobuf (3.25.1)
1615
http_parser.rb (0.8.0)
1716
i18n (1.14.1)
1817
concurrent-ruby (~> 1.0)
@@ -66,6 +65,8 @@ GEM
6665
safe_yaml (1.0.5)
6766
sass-embedded (1.69.5-arm64-darwin)
6867
google-protobuf (~> 3.23)
68+
sass-embedded (1.69.5-x64-mingw-ucrt)
69+
google-protobuf (~> 3.23)
6970
sass-embedded (1.69.5-x86_64-linux-gnu)
7071
google-protobuf (~> 3.23)
7172
terminal-table (3.0.2)
@@ -75,11 +76,12 @@ GEM
7576

7677
PLATFORMS
7778
arm64-darwin-23
79+
x64-mingw-ucrt
7880
x86_64-linux
7981

8082
DEPENDENCIES
8183
jekyll (~> 4.3.3)
8284
just-the-docs (= 0.7.0)
8385

8486
BUNDLED WITH
85-
2.3.26
87+
2.3.26

docs/_config.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,8 @@ nav_external_links:
2929
- title: Raise an Issue
3030
url: https://github.com/hrushikeshrv/guimath/issues
3131
opens_in_new_tab: true
32+
- title: Ask a Question
33+
url: https://github.com/hrushikeshrv/guimath/discussions
34+
opens_in_new_tab: true
3235

3336
favicon_ico: "/media/favicon.png"

docs/api/components.md

Lines changed: 57 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,47 +24,98 @@ Each component is made up of blocks. A block is just a generic container that re
2424
![GUIMath Structure](../media/guimath-structure.svg)
2525

2626
# Writing Your Own Components
27-
If you want to add a function to the editor widget that is not present out of the box, you will need to write a component class that will inherit from one of GUIMath's built-in component classes. You will then have to override the `toLatex()` method of the class to define how the LaTeX should be generated for your component.
27+
If you want to add a function to the editor widget that is not present out of the box, you will need to write a component class that will inherit from one of GUIMath's built-in component classes. You will then have to define how the component is rendered into HTML and LaTeX by defining the `toHTML()` and `toLatex()` methods.
2828

2929
To identify which component class you should inherit from, determine how many blocks your function has. For example, a fraction has two blocks - the numerator and the denominator, and the square root function has just one block. As a guideline, you can usually consider each `{}` in the LaTeX representation of a function as a block - fraction is written as `\frac{}{}`, therefore it has 2 blocks, and square root is written as `\sqrt{}`, and therefore has only 1 block.
3030

31-
Once you determine which component class to inherit from, you will need to override the `toLatex()` method. This is where you will be able to define how the LaTeX is generated for your function. Inside the `toLatex()` method, you can access the `blocks` attribute of the instance, and call `toLatex()` for each block to construct the final LaTeX expression step-by-step. There is an example implementation under each heading below to demonstrate.
31+
Once you determine which component class to inherit from, you will need to override the `toHTML()` and `toLatex()` methods.
32+
33+
For any questions about implementing custom components, please [start a discussion on GitHub](https://github.com/hrushikeshrv/guimath/discussions)
34+
35+
## Defining `toHTML(cursorBlock, cursorPosition)`
36+
This is where you will be able to define how the HTML is generated for your function. See the examples below to get a quick idea of how to implement this method. `toHTML()` is supplied two arguments:
37+
38+
1. `cursorBlock` - The `Block` instance that the cursor is currently in
39+
2. `cursorPosition` - The position of the cursor within the block it is in (`Number`)
40+
41+
You will likely not need to use these arguments yourself in your implementation. They are used during rendering to provide feedback for hover and click events, and to highlight which `Block` the cursor is currently in. All this is handled by the `GUIMath` and `Block` class for you. However, it is important that you pass these same arguments to any recursive calls to `toHTML()` you make to preserve this functionality.
42+
43+
You should return a string containing what the HTML representation of the component should look like in the editor window. For more guidance on how to implement this method, see the examples below or [start a discussion on GitHub](https://github.com/hrushikeshrv/guimath/discussions).
44+
45+
## Defining `toLatex()`
46+
This is where you will be able to define how the LaTeX is generated for your function. See the examples below to get a quick idea of how to implement this method.
47+
48+
Inside the `toLatex()` method, you can access the `blocks` attribute of the `GUIMath` instance, and call `toLatex()` for each block to construct the final LaTeX expression step-by-step. There is an example implementation under each heading below to demonstrate. For more guidance on how to implement this method, see the examples below or [start a discussion on GitHub](https://github.com/hrushikeshrv/guimath/discussions).
3249

3350
## One Block Component
34-
Inherit from this class if your function has one block. Examples of functions which have one block include $ \sqrt{\boxed{}} $, $ \sin{\boxed{}} $, $ \sin^{2}{\boxed{}} $, etc.
51+
Inherit from this class if your function has one block. Examples of functions which have one block include square root ($ \sqrt{\boxed{}} $), sine ($ \sin{\boxed{}} $), sine squared ($ \sin^{2}{\boxed{}} $), etc.
3552

3653
### Inheritance Example: $ \sin^{2}{\boxed{}} $
3754
```javascript
3855
class SinSquaredComponent extends OneBlockComponent {
3956
toLatex() {
4057
return `\\sin^{2}{${this.blocks[0].toLatex()}}`;
4158
}
59+
60+
toHTML(cursorBlock, cursorPosition) {
61+
return `
62+
<div class="_guimath_component _guimath_flexbox_row">
63+
<div class='_guimath_block' style="font-style: normal;">sin</div>
64+
<div class='_guimath_block _guimath_small_block' style="top: -0.5em">2</div>
65+
<div class='_guimath_block'>${this.blocks[0].toHTML(cursorBlock, cursorPosition)}</div>
66+
</div>
67+
`;
68+
}
4269
}
4370
```
4471

4572
## Two Block Component
46-
Inherit from this class if your function has two blocks. Examples of functions which have two blocks include $ \frac{\boxed{}}{\boxed{}} $, $ \sqrt[\boxed{}]{\boxed{}} $, etc.
73+
Inherit from this class if your function has two blocks. Examples of functions which have two blocks include fraction ($ \frac{\boxed{}}{\boxed{}} $), n-th root ($ \sqrt[\boxed{}]{\boxed{}} $), etc.
4774

4875
### Inheritance Example: $ \frac{\boxed{}}{\boxed{}} $
4976
```javascript
5077
class Fraction extends TwoBlockComponent {
5178
toLatex() {
5279
return `\\frac{${this.blocks[0].toLatex()}}{${this.blocks[1].toLatex()}}`;
5380
}
81+
82+
toHTML(cursorBlock, cursorPosition) {
83+
return `
84+
<div class="_guimath_component _guimath_flexbox_column">
85+
<div class='_guimath_block' style='border-bottom: 2px solid var(--default-font-color); padding-bottom: 0.35em;'>${this.blocks[0].toHTML(cursorBlock, cursorPosition)}</div>
86+
<div class='_guimath_block' style='padding-top: 0.05em;'>${this.blocks[1].toHTML(cursorBlock, cursorPosition)}</div>
87+
</div>
88+
`;
89+
}
5490
}
5591
```
5692

5793
## Three Block Component
58-
Inherit from this class if your function has three blocks. Examples of functions which have three blocks include $ \sum_{\boxed{}}^{\boxed{}}{\boxed{}} $, $ \int_{\boxed{}}^{\boxed{}}{\boxed{}} $, etc.
94+
Inherit from this class if your function has three blocks. Examples of functions which have three blocks include sum ($ \sum_{\boxed{}}^{\boxed{}}{\boxed{}} $), integral ($ \int_{\boxed{}}^{\boxed{}}{\boxed{}} $), etc.
5995

6096
### Inheritance Example: $ \left.\frac{\boxed{}}{\boxed{}}\right|_{\boxed{}} $
6197
```javascript
6298
class OneSidedFence extends ThreeBlockComponent {
6399
toLatex() {
64100
return `\\left.\\frac{${this.blocks[0].toLatex()}}{${this.blocks[1].toLatex()}}\\right|_{${this.blocks[2].toLatex()}}`;
65101
}
102+
103+
toHTML(cursorBlock, cursorPosition) {
104+
return `
105+
<div class="_guimath_component _guimath_flexbox_column">
106+
<div class="_guimath_flexbox_row">
107+
<div style="border-right: 2px solid var(--default-font-color);">
108+
<div class='_guimath_block' style='border-bottom: 2px solid var(--default-font-color); padding-bottom: 0.35em;'>${this.blocks[0].toHTML(cursorBlock, cursorPosition)}</div>
109+
<div class='_guimath_block' style='padding-top: 0.05em;'>${this.blocks[1].toHTML(cursorBlock, cursorPosition)}</div>
110+
</div>
111+
<div class="_guimath_small_block" style="align-self: flex-end; justify-self: flex-end;">
112+
${this.blocks[2].toHTML(cursorBlock, cursorPosition)}
113+
</div>
114+
</div>
115+
</div>`;
116+
}
66117
}
67118
```
68119

69120
## Base Component Class
70-
Inherit from this class if your function has more than three blocks.
121+
Inherit from this class if your function has more than three blocks. For more guidance on how to extend this class, [start a discussion on GitHub](https://github.com/hrushikeshrv/guimath/discussions).

docs/api/guimath-instance.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Currently, the following options are supported -
2929
| `id` | String | `""` | Additional id to add to the GUIMath widget's root element. |
3030

3131
## Writing A Success Callback
32-
The success callback you supply is run when the user is done entering an equation and clicks on the “✔” button. This is where you will be able to access the LaTeX for the entered equation, and handle it however you want. It is recommended to supply this function after creating an GUIMath instance instead of passing it to the constructor, just because supplying it later lets you use both regular functions and arrow functions as the callback without having to worry about `this` in context.
32+
The success callback you supply is run when the user is done entering an equation and clicks on the “✔” button. This is where you will be able to access the LaTeX for the entered equation, and handle it however you want. It is recommended to supply this function after creating a GUIMath instance instead of passing it to the constructor, just because supplying it later lets you use both regular functions and arrow functions as the callback without having to worry about `this` in context.
3333

3434
The success callback is passed two arguments -
3535

docs/css/fonts/LICENSE-NewCM.txt

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
This is version 1.0, dated 22 June 2009, of the GUST Font License.
2+
(GUST is the Polish TeX Users Group, http://www.gust.org.pl)
3+
4+
For the most recent version of this license see http://www.gust.org.pl/fonts/licenses/GUST-FONT-LICENSE.txt or http://tug.org/fonts/licenses/GUST-FONT-LICENSE.txt
5+
6+
This work may be distributed and/or modified under the conditions of the LaTeX Project Public License, either version 1.3c of this license or (at your option) any later version.
7+
8+
Please also observe the following clause:
9+
10+
1) it is requested, but not legally required, that derived works be distributed only after changing the names of the fonts comprising this work and given in an accompanying "manifest", and that the files comprising the Work, as listed in the manifest, also be given new names. Any exceptions to this request are also given in the manifest.
11+
12+
We recommend the manifest be given in a separate file named MANIFEST-<fontid>.txt, where <fontid> is some unique identification of the font family. If a separate "readme" file accompanies the Work, we recommend a name of the form README-<fontid>.txt.
13+
14+
The latest version of the LaTeX Project Public License is in http://www.latex-project.org/lppl.txt and version 1.3c or later is part of all distributions of LaTeX version 2006/05/20 or later.
260 KB
Binary file not shown.
227 KB
Binary file not shown.

docs/css/fonts/NewCM10-Bold.woff2

209 KB
Binary file not shown.

0 commit comments

Comments
 (0)