@teachinglab/omd 0.1.4 → 0.1.5
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/canvas/tools/EraserTool.js +1 -1
- package/canvas/tools/PencilTool.js +1 -1
- package/canvas/tools/SelectTool.js +1 -1
- package/docs/api/configuration-options.md +198 -104
- package/docs/api/eventManager.md +83 -68
- package/docs/api/focusFrameManager.md +145 -150
- package/docs/api/index.md +106 -91
- package/docs/api/main.md +63 -58
- package/docs/api/omdBinaryExpressionNode.md +86 -227
- package/docs/api/omdCanvas.md +84 -142
- package/docs/api/omdConfigManager.md +113 -192
- package/docs/api/omdConstantNode.md +53 -117
- package/docs/api/omdDisplay.md +87 -121
- package/docs/api/omdEquationNode.md +174 -161
- package/docs/api/omdEquationSequenceNode.md +259 -301
- package/docs/api/omdEquationStack.md +157 -103
- package/docs/api/omdFunctionNode.md +83 -141
- package/docs/api/omdGroupNode.md +79 -182
- package/docs/api/omdHelpers.md +88 -96
- package/docs/api/omdLeafNode.md +86 -163
- package/docs/api/omdNode.md +202 -101
- package/docs/api/omdOperationDisplayNode.md +118 -139
- package/docs/api/omdOperatorNode.md +92 -127
- package/docs/api/omdParenthesisNode.md +134 -122
- package/docs/api/omdPopup.md +192 -117
- package/docs/api/omdPowerNode.md +132 -127
- package/docs/api/omdRationalNode.md +145 -128
- package/docs/api/omdSimplification.md +79 -110
- package/docs/api/omdSqrtNode.md +144 -79
- package/docs/api/omdStepVisualizer.md +147 -115
- package/docs/api/omdStepVisualizerHighlighting.md +66 -61
- package/docs/api/omdStepVisualizerInteractiveSteps.md +109 -129
- package/docs/api/omdStepVisualizerLayout.md +71 -60
- package/docs/api/omdStepVisualizerTextBoxes.md +77 -68
- package/docs/api/omdToolbar.md +131 -102
- package/docs/api/omdTranscriptionService.md +96 -76
- package/docs/api/omdTreeDiff.md +170 -134
- package/docs/api/omdUnaryExpressionNode.md +137 -174
- package/docs/api/omdUtilities.md +83 -70
- package/docs/api/omdVariableNode.md +123 -148
- package/index.js +2 -2
- package/package.json +1 -1
package/docs/api/omdGroupNode.md
CHANGED
|
@@ -1,182 +1,79 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
new omdGroupNode(nodeData)
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
### See Also
|
|
81
|
-
|
|
82
|
-
# omdGroupNode
|
|
83
|
-
|
|
84
|
-
Represents a single grouping symbol, such as `(` or `)`, as a leaf node in the expression tree. This node is typically used for visual representation.
|
|
85
|
-
|
|
86
|
-
## Class: `omdGroupNode extends omdLeafNode`
|
|
87
|
-
|
|
88
|
-
```javascript
|
|
89
|
-
import { omdGroupNode } from './omd/nodes/omdGroupNode.js';
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
### Constructor
|
|
93
|
-
|
|
94
|
-
```javascript
|
|
95
|
-
new omdGroupNode(nodeData)
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
**Parameters:**
|
|
99
|
-
- `nodeData` {string} - The grouping symbol character to display
|
|
100
|
-
|
|
101
|
-
**Description:**
|
|
102
|
-
Creates a leaf node that visually represents a grouping symbol.
|
|
103
|
-
|
|
104
|
-
### Properties
|
|
105
|
-
|
|
106
|
-
Inherits all properties from [`omdLeafNode`](./omdLeafNode.md), plus:
|
|
107
|
-
|
|
108
|
-
#### `symbol`
|
|
109
|
-
- **Type:** string
|
|
110
|
-
- **Description:** The grouping symbol character (e.g., '(' or ')')
|
|
111
|
-
|
|
112
|
-
#### `type`
|
|
113
|
-
- **Type:** string
|
|
114
|
-
- **Description:** Always "parenthesis"
|
|
115
|
-
|
|
116
|
-
#### `textElement`
|
|
117
|
-
- **Type:** jsvgTextLine
|
|
118
|
-
- **Description:** The SVG text element displaying the symbol
|
|
119
|
-
|
|
120
|
-
### Methods
|
|
121
|
-
|
|
122
|
-
Inherits all methods from [`omdLeafNode`](./omdLeafNode.md), plus:
|
|
123
|
-
|
|
124
|
-
#### `parseSymbol(nodeData)`
|
|
125
|
-
Internal method to extract symbol from input.
|
|
126
|
-
- **Returns:** string - The input symbol unchanged
|
|
127
|
-
|
|
128
|
-
---
|
|
129
|
-
|
|
130
|
-
#### `parseType()`
|
|
131
|
-
Internal method to set node type.
|
|
132
|
-
- **Returns:** "parenthesis"
|
|
133
|
-
|
|
134
|
-
---
|
|
135
|
-
|
|
136
|
-
#### `clone()`
|
|
137
|
-
Creates a clone of the group node.
|
|
138
|
-
- **Returns:** omdGroupNode - A new instance with:
|
|
139
|
-
- Same text content
|
|
140
|
-
- Original node's ID added to provenance array
|
|
141
|
-
|
|
142
|
-
---
|
|
143
|
-
|
|
144
|
-
#### `computeDimensions()`
|
|
145
|
-
Calculates node dimensions based on text content.
|
|
146
|
-
Does NOT add padding, unlike other leaf nodes.
|
|
147
|
-
Overrides base class method.
|
|
148
|
-
|
|
149
|
-
---
|
|
150
|
-
|
|
151
|
-
#### `updateLayout()`
|
|
152
|
-
Updates the position of the node.
|
|
153
|
-
Overrides base class method.
|
|
154
|
-
|
|
155
|
-
---
|
|
156
|
-
|
|
157
|
-
#### `toMathJSNode()`
|
|
158
|
-
Converts to math.js AST format.
|
|
159
|
-
- **Returns:** Object - A math.js-compatible AST node with:
|
|
160
|
-
- `type`: "SymbolNode"
|
|
161
|
-
- `name`: The grouping symbol
|
|
162
|
-
|
|
163
|
-
### Example
|
|
164
|
-
|
|
165
|
-
```javascript
|
|
166
|
-
// Create grouping symbols
|
|
167
|
-
const leftParen = new omdGroupNode('(');
|
|
168
|
-
const rightParen = new omdGroupNode(')');
|
|
169
|
-
const leftBracket = new omdGroupNode('[');
|
|
170
|
-
|
|
171
|
-
// Render a symbol
|
|
172
|
-
const node = new omdGroupNode('(');
|
|
173
|
-
node.setFontSize(24);
|
|
174
|
-
node.computeDimensions(); // Calculate size (no padding)
|
|
175
|
-
node.updateLayout(); // Position the text element
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
### See Also
|
|
179
|
-
|
|
180
|
-
- [omdLeafNode](./omdLeafNode.md) - Parent class
|
|
181
|
-
- [omdNode](./omdNode.md) - Base class
|
|
182
|
-
- [omdParenthesisNode](./omdParenthesisNode.md) - For complete parenthetical expressions
|
|
1
|
+
# omdGroupNode
|
|
2
|
+
|
|
3
|
+
Represents a single grouping symbol, such as `(` or `)`, as a leaf node in the expression tree. This node is primarily used for visual representation and layout, rather than mathematical operations.
|
|
4
|
+
|
|
5
|
+
## Class Definition
|
|
6
|
+
|
|
7
|
+
```javascript
|
|
8
|
+
export class omdGroupNode extends omdLeafNode
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Constructor
|
|
12
|
+
|
|
13
|
+
### `new omdGroupNode(nodeData)`
|
|
14
|
+
|
|
15
|
+
Creates a new `omdGroupNode` instance.
|
|
16
|
+
|
|
17
|
+
- **`nodeData`** (`string`): The single character string representing the grouping symbol (e.g., `'('`, `')'`, `'['`, `']'`).
|
|
18
|
+
|
|
19
|
+
## Public Properties
|
|
20
|
+
|
|
21
|
+
- **`symbol`** (`string`): The grouping symbol character (e.g., `'('`).
|
|
22
|
+
- **`type`** (`string`): Always `"parenthesis"` for this node type.
|
|
23
|
+
- **`textElement`** (`jsvgTextLine`): The internal `jsvgTextLine` instance responsible for rendering the symbol.
|
|
24
|
+
|
|
25
|
+
## Public Methods
|
|
26
|
+
|
|
27
|
+
### `clone()`
|
|
28
|
+
|
|
29
|
+
Creates a deep clone of the group node. The new node's `provenance` array is updated to include the original node's ID.
|
|
30
|
+
|
|
31
|
+
- **Returns**: `omdGroupNode` - A new, identical instance of the group node.
|
|
32
|
+
|
|
33
|
+
### `computeDimensions()`
|
|
34
|
+
|
|
35
|
+
Calculates the dimensions of the node based on its text content. Unlike other leaf nodes, `omdGroupNode` does *not* add extra padding around the symbol, allowing for tighter visual integration.
|
|
36
|
+
|
|
37
|
+
- **Overrides**: `omdLeafNode.computeDimensions()`.
|
|
38
|
+
|
|
39
|
+
### `updateLayout()`
|
|
40
|
+
|
|
41
|
+
Updates the position of the node's internal text element. This method primarily calls the superclass's `updateLayout`.
|
|
42
|
+
|
|
43
|
+
- **Overrides**: `omdLeafNode.updateLayout()`.
|
|
44
|
+
|
|
45
|
+
### `toMathJSNode()`
|
|
46
|
+
|
|
47
|
+
Converts the `omdGroupNode` to a math.js-compatible AST format. It represents the grouping symbol as a `SymbolNode`.
|
|
48
|
+
|
|
49
|
+
- **Returns**: `object` - A math.js-compatible AST node with `type: "SymbolNode"` and `name` set to the grouping symbol. The returned object also includes a `clone` method for compatibility.
|
|
50
|
+
|
|
51
|
+
## Internal Methods
|
|
52
|
+
|
|
53
|
+
- **`parseSymbol(nodeData)`**: Extracts the symbol from the constructor's `nodeData`. Returns the input string unchanged.
|
|
54
|
+
- **`parseType()`**: Sets the node's type. Always returns `"parenthesis"`.
|
|
55
|
+
|
|
56
|
+
## Example
|
|
57
|
+
|
|
58
|
+
```javascript
|
|
59
|
+
// Create grouping symbols
|
|
60
|
+
const leftParen = new omdGroupNode('(');
|
|
61
|
+
const rightParen = new omdGroupNode(')');
|
|
62
|
+
const leftBracket = new omdGroupNode('[');
|
|
63
|
+
|
|
64
|
+
// Render a symbol
|
|
65
|
+
const node = new omdGroupNode('(');
|
|
66
|
+
node.setFontSize(24);
|
|
67
|
+
node.initialize(); // Computes dimensions and layout
|
|
68
|
+
|
|
69
|
+
// Add to an SVG container to display
|
|
70
|
+
// const svgContainer = new jsvgContainer();
|
|
71
|
+
// svgContainer.addChild(node);
|
|
72
|
+
// document.body.appendChild(svgContainer.svgObject);
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## See Also
|
|
76
|
+
|
|
77
|
+
- [`omdLeafNode`](./omdLeafNode.md) - The parent class for all leaf nodes.
|
|
78
|
+
- [`omdNode`](./omdNode.md) - The base class for all OMD nodes.
|
|
79
|
+
- [`omdParenthesisNode`](./omdParenthesisNode.md) - For complete parenthetical expressions that contain other nodes.
|
package/docs/api/omdHelpers.md
CHANGED
|
@@ -1,96 +1,88 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
// You can then render these nodes using omdDisplay or omdCanvas
|
|
91
|
-
const display = new omdDisplay(container);
|
|
92
|
-
display.render(expression);
|
|
93
|
-
|
|
94
|
-
// Or for the step visualizer
|
|
95
|
-
// display.render(stepVisualizer);
|
|
96
|
-
```
|
|
1
|
+
# omdHelpers
|
|
2
|
+
|
|
3
|
+
`omdHelpers` is a collection of convenience functions designed to simplify common tasks when working with the OMD library. These helpers abstract away underlying complexities, making it easier to create and manipulate mathematical expressions and visualizations.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
The `omdHelpers` object is exported from the main `omd/core/index.js` entry point, making its functions readily available for use in your project.
|
|
8
|
+
|
|
9
|
+
## Functions
|
|
10
|
+
|
|
11
|
+
### `createNodeFromExpression(expression, mathInstance)`
|
|
12
|
+
|
|
13
|
+
Creates an `omdNode` instance from a string representation of a mathematical expression. This function parses the expression using the provided math.js instance and instantiates the appropriate `omdNode` subclass.
|
|
14
|
+
|
|
15
|
+
- **`expression`** (`string`): The mathematical expression as a string (e.g., `"x^2 + 2x + 1"`).
|
|
16
|
+
- **`mathInstance`** (`object`): The math.js instance to use for parsing the expression (e.g., `window.math`).
|
|
17
|
+
- **Returns**: `omdNode` - The root `omdNode` of the created expression tree.
|
|
18
|
+
|
|
19
|
+
```javascript
|
|
20
|
+
import { omdHelpers } from '@teachinglab/omd';
|
|
21
|
+
// Assuming math.js is loaded globally as window.math
|
|
22
|
+
|
|
23
|
+
const expressionNode = omdHelpers.createNodeFromExpression('2x + 5', window.math);
|
|
24
|
+
// expressionNode will be an instance of omdBinaryExpressionNode or another omdNode subclass
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### `createEquation(equationString)`
|
|
28
|
+
|
|
29
|
+
Creates an `omdEquationNode` instance from a string representation of an equation. This is a specialized helper for equations, ensuring proper parsing and node creation.
|
|
30
|
+
|
|
31
|
+
- **`equationString`** (`string`): The equation as a string (e.g., `"x + 2 = 5"`).
|
|
32
|
+
- **Returns**: `omdEquationNode` - The created `omdEquationNode`.
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
import { omdHelpers } from '@teachinglab/omd';
|
|
36
|
+
|
|
37
|
+
const equation = omdHelpers.createEquation('3y - 7 = 14');
|
|
38
|
+
// equation will be an instance of omdEquationNode
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### `createStepVisualizer(equationStrings)`
|
|
42
|
+
|
|
43
|
+
Creates an `omdStepVisualizer` instance from an array of equation strings. This is useful for quickly setting up a step-by-step solution display.
|
|
44
|
+
|
|
45
|
+
- **`equationStrings`** (`Array<string>`): An array of strings, where each string represents an equation step (e.g., `["2x = 10", "x = 5"]`).
|
|
46
|
+
- **Returns**: `omdStepVisualizer` - The created `omdStepVisualizer` instance.
|
|
47
|
+
|
|
48
|
+
```javascript
|
|
49
|
+
import { omdHelpers } from '@teachinglab/omd';
|
|
50
|
+
|
|
51
|
+
const steps = [
|
|
52
|
+
'4x + 8 = 20',
|
|
53
|
+
'4x = 12',
|
|
54
|
+
'x = 3'
|
|
55
|
+
];
|
|
56
|
+
const visualizer = omdHelpers.createStepVisualizer(steps);
|
|
57
|
+
// visualizer will be an instance of omdStepVisualizer
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Example Usage
|
|
61
|
+
|
|
62
|
+
```javascript
|
|
63
|
+
import { omdDisplay, omdHelpers } from '@teachinglab/omd';
|
|
64
|
+
// Assuming math.js is loaded globally as window.math
|
|
65
|
+
|
|
66
|
+
// Get a container element (assuming it exists in your HTML)
|
|
67
|
+
const container = document.getElementById('math-display-area');
|
|
68
|
+
|
|
69
|
+
// Create an expression node using a helper
|
|
70
|
+
const expression = omdHelpers.createNodeFromExpression('a^2 + b^2', window.math);
|
|
71
|
+
|
|
72
|
+
// Create an equation using a helper
|
|
73
|
+
const equation = omdHelpers.createEquation('E = mc^2');
|
|
74
|
+
|
|
75
|
+
// Create a step visualizer using a helper
|
|
76
|
+
const solutionSteps = [
|
|
77
|
+
'x + 5 = 10',
|
|
78
|
+
'x = 5'
|
|
79
|
+
];
|
|
80
|
+
const stepVisualizer = omdHelpers.createStepVisualizer(solutionSteps);
|
|
81
|
+
|
|
82
|
+
// You can then render these nodes using omdDisplay or omdCanvas
|
|
83
|
+
const display = new omdDisplay(container);
|
|
84
|
+
display.render(expression);
|
|
85
|
+
|
|
86
|
+
// Or for the step visualizer
|
|
87
|
+
// display.render(stepVisualizer);
|
|
88
|
+
```
|