127 lines
2.8 KiB
Markdown
127 lines
2.8 KiB
Markdown
# @aomao/plugin-math
|
|
|
|
Mathematical formula
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
$ yarn add @aomao/plugin-math
|
|
```
|
|
|
|
Add to engine
|
|
|
|
```ts
|
|
import Engine, {EngineInterface} from'@aomao/engine';
|
|
import Math, {MathComponent} from'@aomao/plugin-math';
|
|
|
|
new Engine(...,{ plugins:[ Math], cards:[ MathComponent ]})
|
|
```
|
|
|
|
## `Math` optional
|
|
|
|
```ts
|
|
//Use configuration
|
|
new Engine(...,{
|
|
config:{
|
|
[Math.pluginName]:{
|
|
//...Related configuration
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
### Request to generate formula code as picture or SVG
|
|
|
|
`action`: request address, always use `POST` request
|
|
|
|
`type`: default is `json`
|
|
|
|
`contentType`: By default, the request is initiated in the `application/json` type
|
|
|
|
`data`: POST these data together to the server when requesting
|
|
|
|
```ts
|
|
/**
|
|
* Request to generate formula svg address
|
|
*/
|
|
action: string;
|
|
/**
|
|
* Data return type, default json
|
|
*/
|
|
type?:'*' |'json' |'xml' |'html' |'text' |'js';
|
|
/**
|
|
* Additional data upload
|
|
*/
|
|
data?: {};
|
|
/**
|
|
* Request type, default application/json;
|
|
*/
|
|
contentType?: string;
|
|
```
|
|
|
|
After configuration, the plug-in will use the `content` field to POST to the specified `action` address, which contains the formula code
|
|
|
|
### Analyze server response data
|
|
|
|
Will find by default
|
|
|
|
The formula corresponds to the image address or `SVG` code: response.url || response.data && response.data.url
|
|
|
|
`result`: true is generated successfully, and data is the image address corresponding to the formula or the `SVG` code. false Failed to generate, data is the error message
|
|
|
|
```ts
|
|
/**
|
|
* Parse the generated Respone and return result: whether it is successful or not, data: success: the formula corresponds to the image address or `SVG` code, failure: error message
|
|
*/
|
|
parse?: (
|
|
response: any,
|
|
) => {
|
|
result: boolean;
|
|
data: string;
|
|
};
|
|
```
|
|
|
|
### Drawing interface
|
|
|
|
You can use the `https://g.yanmao.cc/latex` address to generate the `SVG` code corresponding to the formula. This project uses [mathjax](https://www.mathjax.org/) to generate `SVG` code
|
|
|
|
Demo site: [https://drawing.yanmao.cc/](https://drawing.yanmao.cc/)
|
|
|
|
Configuration:
|
|
|
|
```ts
|
|
[Math.pluginName]: {
|
|
action: `https://g.yanmao.cc/latex`,
|
|
parse: (res: any) => {
|
|
if(res.success) return {result: true, data: res.svg}
|
|
return {result: false}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Command
|
|
|
|
### Insert formula code
|
|
|
|
Parameter 1: Formula code
|
|
|
|
Parameter 2: The formula corresponds to the image address or `SVG` code
|
|
|
|
```ts
|
|
engine.command.execute(
|
|
Math.pluginName,
|
|
'Formula code', //optional
|
|
'The formula corresponds to the image address or `SVG` code', //optional
|
|
);
|
|
```
|
|
|
|
### Request to generate formula code image or SVG
|
|
|
|
Parameter 1: fixed as `query`
|
|
Parameter 2: callback after success
|
|
Parameter 3: Callback after failure. Optional
|
|
|
|
```ts
|
|
engine.command.execute(Math.pluginName, "query", success:(url: string) => void, failed: (message: string) => void);
|
|
```
|