You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/api/components.md
+47-9Lines changed: 47 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,56 +28,94 @@ If you want to add a function to the editor widget that is not present out of th
28
28
29
29
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.
30
30
31
-
Once you determine which component class to inherit from, you will need to override the `toHTML()` and `toLatex()` methods.
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)
32
34
33
35
## Defining `toHTML(cursorBlock, cursorPosition)`
34
-
This is where you will be able to define how the HTML is generated for your function. See the inheritance examples below to get a quick idea of how to implement this method. `toHTML()`takes two arguments:
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:
35
37
36
38
1.`cursorBlock` - The `Block` instance that the cursor is currently in
37
39
2.`cursorPosition` - The position of the cursor within the block it is in (`Number`)
38
40
39
-
You will likely not need to use these arguments yourself. 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 as they are to any recursive calls to `toHTML()` you make in your definition to preserve this functionality.
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.
40
42
41
-
You should return a string containing what the HTML representation of the component should look like in the editor window.
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).
42
44
43
45
## Defining `toLatex()`
44
-
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.
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).
45
49
46
50
## One Block Component
47
-
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.
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.
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.
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).
0 commit comments