math-notation 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +158 -0
- package/dist/CurlyBraceListOption.svg +3 -0
- package/dist/formulize.cjs.js +24587 -0
- package/dist/formulize.cjs.js.map +1 -0
- package/dist/formulize.es.js +24569 -0
- package/dist/formulize.es.js.map +1 -0
- package/dist/formulize.svg +9 -0
- package/dist/formulize.umd.js +24582 -0
- package/dist/formulize.umd.js.map +1 -0
- package/dist/mass.svg +25 -0
- package/dist/show-expression-border.svg +15 -0
- package/dist/show-expression-shadow.svg +4 -0
- package/dist/show-formula-border.svg +15 -0
- package/dist/show-formula-shadow.svg +4 -0
- package/dist/show-label-border.svg +15 -0
- package/dist/show-label-shadow.svg +4 -0
- package/dist/show-step-border.svg +15 -0
- package/dist/show-step-shadow.svg +4 -0
- package/dist/show-var-border.svg +15 -0
- package/dist/show-var-shadow.svg +4 -0
- package/dist/style.css +3000 -0
- package/dist/types/index.d.ts +1764 -0
- package/dist/velocity.svg +30 -0
- package/package.json +156 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Eric Dai
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
# Formulize
|
|
2
|
+
|
|
3
|
+
An API for interactive mathematical formula built with React, TypeScript, and Vite that provides real-time formula visualization and computation capabilities.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Formulize API** - Declarative API for programmatic "executable" formula configuration
|
|
8
|
+
- **Multi-Engine Computation** - Support for manual step-through, symbolic algebra
|
|
9
|
+
- **Real-time Visualization** - 2D/3D plotting with D3.js and Plotly.js integration
|
|
10
|
+
- **Variable Management** - Dependency tracking and automatic recomputation
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
### Quick Start (Recommended)
|
|
15
|
+
|
|
16
|
+
Install with all peer dependencies automatically:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npx install-peerdeps formulize-math
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install formulize-math
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Manual Peer Dependencies Installation
|
|
27
|
+
|
|
28
|
+
Formulize requires several peer dependencies. Install them based on your needs:
|
|
29
|
+
|
|
30
|
+
**Core (Required):**
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npm install react react-dom mobx mobx-react-lite mobx-state-tree
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
**Math Rendering (Required):**
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npm install mathjax-full better-react-mathjax katex mathjs
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
**Formula Canvas (Required for FormulaComponent):**
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
npm install @xyflow/react lucide-react lodash
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
**3D Plotting (Optional - for Plot3D):**
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
npm install plotly.js-dist d3
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
**Code Editor (Optional - for step-through debugging):**
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
npm install codemirror @codemirror/autocomplete @codemirror/lang-javascript @codemirror/language @codemirror/legacy-modes @codemirror/state @codemirror/view @uiw/react-codemirror
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
**All-in-one installation:**
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
npm install formulize-math react react-dom mobx mobx-react-lite mobx-state-tree mathjax-full better-react-mathjax katex mathjs @xyflow/react lucide-react lodash plotly.js-dist d3 codemirror @codemirror/autocomplete @codemirror/lang-javascript @codemirror/language @codemirror/legacy-modes @codemirror/state @codemirror/view @uiw/react-codemirror
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Don't forget to import the CSS:
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import "formulize-math/style.css";
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Technology Stack
|
|
73
|
+
|
|
74
|
+
- **Frontend**: React 18 + TypeScript + Vite
|
|
75
|
+
- **State Management**: MobX with decorators
|
|
76
|
+
- **Math Rendering**: KaTeX, MathJax
|
|
77
|
+
- **Code Editor**: CodeMirror 6
|
|
78
|
+
- **Visualization**: D3.js, Plotly.js
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## Development
|
|
83
|
+
|
|
84
|
+
### Prerequisites
|
|
85
|
+
|
|
86
|
+
- Node.js (version 16 or higher)
|
|
87
|
+
- npm or yarn
|
|
88
|
+
|
|
89
|
+
### Setup
|
|
90
|
+
|
|
91
|
+
```bash
|
|
92
|
+
npm install
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### Development
|
|
96
|
+
|
|
97
|
+
Start the development server:
|
|
98
|
+
|
|
99
|
+
```bash
|
|
100
|
+
npm run dev
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
The application will be available at `http://localhost:3005`
|
|
104
|
+
|
|
105
|
+
### Building
|
|
106
|
+
|
|
107
|
+
Build for production:
|
|
108
|
+
|
|
109
|
+
```bash
|
|
110
|
+
npm run build
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
Preview the production build:
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
npm run preview
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Code Quality
|
|
120
|
+
|
|
121
|
+
Run linting:
|
|
122
|
+
|
|
123
|
+
```bash
|
|
124
|
+
npm run lint
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
Run TypeScript type checking:
|
|
128
|
+
|
|
129
|
+
```bash
|
|
130
|
+
tsc
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Deployment
|
|
134
|
+
|
|
135
|
+
Deploy to docs/forge/ directory:
|
|
136
|
+
|
|
137
|
+
```bash
|
|
138
|
+
npm run deploy
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## Project Structure
|
|
142
|
+
|
|
143
|
+
- `src/api/` - Formulize API and computation engines
|
|
144
|
+
- `src/renderer/` - Core interactive formula components
|
|
145
|
+
- `src/visualizations/` - 2D/3D plotting engines
|
|
146
|
+
- `src/types/` - TypeScript type definitions
|
|
147
|
+
- `src/examples/` - Example formula API configurations
|
|
148
|
+
|
|
149
|
+
## Architecture
|
|
150
|
+
|
|
151
|
+
The application uses a multi-store MobX architecture with:
|
|
152
|
+
|
|
153
|
+
- **computationStore** - Variable computation and evaluation
|
|
154
|
+
|
|
155
|
+
Three computation engines are available:
|
|
156
|
+
|
|
157
|
+
- **manual** - Manual step-through with JS interpreter
|
|
158
|
+
- **symbolic-algebra** - Mathematical computation engine
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="32" height="64" viewBox="0 0 32 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M8 12V20C8 22.2 6.2 24 4 24H0V40H4C6.2 40 8 41.8 8 44V52C8 58.6 13.4 64 20 64H32V56H20C17.8 56 16 54.2 16 52V44C16 38.8 12.64 34.32 8 32.68V31.32C12.64 29.68 16 25.2 16 20V12C16 9.8 17.8 8 20 8H32V0H20C13.4 0 8 5.4 8 12Z" fill="black"/>
|
|
3
|
+
</svg>
|