@teachinglab/omd 0.1.4 → 0.1.6

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.
Files changed (47) hide show
  1. package/canvas/tools/EraserTool.js +1 -1
  2. package/canvas/tools/PencilTool.js +1 -1
  3. package/canvas/tools/SelectTool.js +1 -1
  4. package/docs/api/configuration-options.md +198 -104
  5. package/docs/api/eventManager.md +83 -68
  6. package/docs/api/focusFrameManager.md +145 -150
  7. package/docs/api/index.md +106 -91
  8. package/docs/api/main.md +63 -58
  9. package/docs/api/omdBinaryExpressionNode.md +86 -227
  10. package/docs/api/omdCanvas.md +84 -142
  11. package/docs/api/omdConfigManager.md +113 -192
  12. package/docs/api/omdConstantNode.md +53 -117
  13. package/docs/api/omdDisplay.md +87 -121
  14. package/docs/api/omdEquationNode.md +174 -161
  15. package/docs/api/omdEquationSequenceNode.md +259 -301
  16. package/docs/api/omdEquationStack.md +157 -103
  17. package/docs/api/omdFunctionNode.md +83 -141
  18. package/docs/api/omdGroupNode.md +79 -182
  19. package/docs/api/omdHelpers.md +88 -96
  20. package/docs/api/omdLeafNode.md +86 -163
  21. package/docs/api/omdNode.md +202 -101
  22. package/docs/api/omdOperationDisplayNode.md +118 -139
  23. package/docs/api/omdOperatorNode.md +92 -127
  24. package/docs/api/omdParenthesisNode.md +134 -122
  25. package/docs/api/omdPopup.md +192 -117
  26. package/docs/api/omdPowerNode.md +132 -127
  27. package/docs/api/omdRationalNode.md +145 -128
  28. package/docs/api/omdSimplification.md +79 -110
  29. package/docs/api/omdSqrtNode.md +144 -79
  30. package/docs/api/omdStepVisualizer.md +147 -115
  31. package/docs/api/omdStepVisualizerHighlighting.md +66 -61
  32. package/docs/api/omdStepVisualizerInteractiveSteps.md +109 -129
  33. package/docs/api/omdStepVisualizerLayout.md +71 -60
  34. package/docs/api/omdStepVisualizerTextBoxes.md +77 -68
  35. package/docs/api/omdToolbar.md +131 -102
  36. package/docs/api/omdTranscriptionService.md +96 -76
  37. package/docs/api/omdTreeDiff.md +170 -134
  38. package/docs/api/omdUnaryExpressionNode.md +137 -174
  39. package/docs/api/omdUtilities.md +83 -70
  40. package/docs/api/omdVariableNode.md +123 -148
  41. package/index.js +2 -2
  42. package/omd/core/index.js +9 -0
  43. package/omd/nodes/omdEquationSequenceNode.js +15 -0
  44. package/omd/utils/aiNextEquationStep.js +106 -0
  45. package/package.json +1 -1
  46. package/src/omdBalanceHanger.js +1 -1
  47. package/src/omdCoordinatePlane.js +1 -1
@@ -1,182 +1,79 @@
1
-
2
- Represents a single grouping symbol, such as `(` or `)`, as a leaf node in the expression tree. This node is typically used for visual representation.
3
-
4
- ## Class: `omdGroupNode extends omdLeafNode`
5
-
6
- ```javascript
7
- import { omdGroupNode } from './omd/nodes/omdGroupNode.js';
8
- ```
9
-
10
- ### Constructor
11
-
12
- ```javascript
13
- new omdGroupNode(nodeData)
14
- ```
15
-
16
- **Parameters:**
17
-
18
- **Description:**
19
- Creates a leaf node that visually represents a grouping symbol.
20
-
21
- ### Properties
22
-
23
- Inherits all properties from [`omdLeafNode`](./omdLeafNode.md), plus:
24
-
25
- #### `symbol`
26
-
27
- #### `type`
28
-
29
- #### `textElement`
30
-
31
- ### Methods
32
-
33
- Inherits all methods from [`omdLeafNode`](./omdLeafNode.md), plus:
34
-
35
- #### `parseSymbol(nodeData)`
36
- Internal method to extract symbol from input.
37
-
38
-
39
- #### `parseType()`
40
- Internal method to set node type.
41
-
42
-
43
- #### `clone()`
44
- Creates a clone of the group node.
45
- - Same text content
46
- - Original node's ID added to provenance array
47
-
48
-
49
- #### `computeDimensions()`
50
- Calculates node dimensions based on text content.
51
- Does NOT add padding, unlike other leaf nodes.
52
- Overrides base class method.
53
-
54
-
55
- #### `updateLayout()`
56
- Updates the position of the node.
57
- Overrides base class method.
58
-
59
-
60
- #### `toMathJSNode()`
61
- Converts to math.js AST format.
62
- - `type`: "SymbolNode"
63
- - `name`: The grouping symbol
64
-
65
- ### Examples
66
-
67
- ```javascript
68
- // Create grouping symbols
69
- const leftParen = new omdGroupNode('(');
70
- const rightParen = new omdGroupNode(')');
71
- const leftBracket = new omdGroupNode('[');
72
-
73
- // Render a symbol
74
- const node = new omdGroupNode('(');
75
- node.setFontSize(24);
76
- node.computeDimensions(); // Calculate size (no padding)
77
- node.updateLayout(); // Position the text element
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.
@@ -1,96 +1,88 @@
1
-
2
- # omdHelpers
3
-
4
- `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.
5
-
6
- ## Overview
7
-
8
- The `omdHelpers` object is exported from the main `omd/index.js` entry point, making its functions readily available for use in your project.
9
-
10
- ## Functions
11
-
12
- ### `createNodeFromExpression(expression, mathjs)`
13
-
14
- Creates an `omdNode` instance from a string representation of a mathematical expression. This function parses the expression using math.js and instantiates the appropriate `omdNode` subclass.
15
-
16
- - **Parameters:**
17
- - `expression` {string} - The mathematical expression as a string (e.g., `"x^2 + 2x + 1"`).
18
- - `mathjs` {object} - The math.js instance to use for parsing the expression.
19
- - **Returns:** {omdNode} The root `omdNode` of the created expression tree.
20
-
21
- ```javascript
22
- import { omdHelpers } from 'omd-library';
23
- import * as math from 'mathjs';
24
-
25
- const expressionNode = omdHelpers.createNodeFromExpression('2x + 5', math);
26
- // expressionNode will be an instance of omdBinaryExpressionNode or another omdNode subclass
27
- ```
28
-
29
- ---
30
-
31
- ### `createEquation(equationString)`
32
-
33
- Creates an `omdEquationNode` instance from a string representation of an equation. This is a specialized helper for equations, ensuring proper parsing and node creation.
34
-
35
- - **Parameters:**
36
- - `equationString` {string} - The equation as a string (e.g., `"x + 2 = 5"`).
37
- - **Returns:** {omdEquationNode} The created `omdEquationNode`.
38
-
39
- ```javascript
40
- import { omdHelpers } from 'omd-library';
41
-
42
- const equation = omdHelpers.createEquation('3y - 7 = 14');
43
- // equation will be an instance of omdEquationNode
44
- ```
45
-
46
- ---
47
-
48
- ### `createStepVisualizer(equationStrings)`
49
-
50
- Creates an `omdStepVisualizer` instance from an array of equation strings. This is useful for quickly setting up a step-by-step solution display.
51
-
52
- - **Parameters:**
53
- - `equationStrings` {Array<string>} - An array of strings, where each string represents an equation step (e.g., `["2x = 10", "x = 5"]`).
54
- - **Returns:** {omdStepVisualizer} The created `omdStepVisualizer` instance.
55
-
56
- ```javascript
57
- import { omdHelpers } from 'omd-library';
58
-
59
- const steps = [
60
- '4x + 8 = 20',
61
- '4x = 12',
62
- 'x = 3'
63
- ];
64
- const visualizer = omdHelpers.createStepVisualizer(steps);
65
- // visualizer will be an instance of omdStepVisualizer
66
- ```
67
-
68
- ## Example Usage
69
-
70
- ```javascript
71
- import { omdDisplay, omdHelpers } from 'omd-library';
72
- import * as math from 'mathjs';
73
-
74
- // Get a container element (assuming it exists in your HTML)
75
- const container = document.getElementById('math-display-area');
76
-
77
- // Create an expression node using a helper
78
- const expression = omdHelpers.createNodeFromExpression('a^2 + b^2', math);
79
-
80
- // Create an equation using a helper
81
- const equation = omdHelpers.createEquation('E = mc^2');
82
-
83
- // Create a step visualizer using a helper
84
- const solutionSteps = [
85
- 'x + 5 = 10',
86
- 'x = 5'
87
- ];
88
- const stepVisualizer = omdHelpers.createStepVisualizer(solutionSteps);
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
+ ```