@teachinglab/omd 0.6.1 → 0.6.2

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 (198) hide show
  1. package/README.md +257 -251
  2. package/README.old.md +137 -137
  3. package/canvas/core/canvasConfig.js +202 -202
  4. package/canvas/drawing/segment.js +167 -167
  5. package/canvas/drawing/stroke.js +385 -385
  6. package/canvas/events/eventManager.js +444 -444
  7. package/canvas/events/pointerEventHandler.js +262 -262
  8. package/canvas/index.js +48 -48
  9. package/canvas/tools/PointerTool.js +71 -71
  10. package/canvas/tools/tool.js +222 -222
  11. package/canvas/utils/boundingBox.js +377 -377
  12. package/canvas/utils/mathUtils.js +258 -258
  13. package/docs/api/configuration-options.md +198 -198
  14. package/docs/api/eventManager.md +82 -82
  15. package/docs/api/focusFrameManager.md +144 -144
  16. package/docs/api/index.md +105 -105
  17. package/docs/api/main.md +62 -62
  18. package/docs/api/omdBinaryExpressionNode.md +86 -86
  19. package/docs/api/omdCanvas.md +83 -83
  20. package/docs/api/omdConfigManager.md +112 -112
  21. package/docs/api/omdConstantNode.md +52 -52
  22. package/docs/api/omdDisplay.md +87 -87
  23. package/docs/api/omdEquationNode.md +174 -174
  24. package/docs/api/omdEquationSequenceNode.md +258 -258
  25. package/docs/api/omdEquationStack.md +192 -192
  26. package/docs/api/omdFunctionNode.md +82 -82
  27. package/docs/api/omdGroupNode.md +78 -78
  28. package/docs/api/omdHelpers.md +87 -87
  29. package/docs/api/omdLeafNode.md +85 -85
  30. package/docs/api/omdNode.md +201 -201
  31. package/docs/api/omdOperationDisplayNode.md +117 -117
  32. package/docs/api/omdOperatorNode.md +91 -91
  33. package/docs/api/omdParenthesisNode.md +133 -133
  34. package/docs/api/omdPopup.md +191 -191
  35. package/docs/api/omdPowerNode.md +131 -131
  36. package/docs/api/omdRationalNode.md +144 -144
  37. package/docs/api/omdSequenceNode.md +128 -128
  38. package/docs/api/omdSimplification.md +78 -78
  39. package/docs/api/omdSqrtNode.md +144 -144
  40. package/docs/api/omdStepVisualizer.md +146 -146
  41. package/docs/api/omdStepVisualizerHighlighting.md +65 -65
  42. package/docs/api/omdStepVisualizerInteractiveSteps.md +108 -108
  43. package/docs/api/omdStepVisualizerLayout.md +70 -70
  44. package/docs/api/omdStepVisualizerNodeUtils.md +140 -140
  45. package/docs/api/omdStepVisualizerTextBoxes.md +76 -76
  46. package/docs/api/omdToolbar.md +130 -130
  47. package/docs/api/omdTranscriptionService.md +95 -95
  48. package/docs/api/omdTreeDiff.md +169 -169
  49. package/docs/api/omdUnaryExpressionNode.md +137 -137
  50. package/docs/api/omdUtilities.md +82 -82
  51. package/docs/api/omdVariableNode.md +123 -123
  52. package/docs/api/selectTool.md +74 -74
  53. package/docs/api/simplificationEngine.md +97 -97
  54. package/docs/api/simplificationRules.md +76 -76
  55. package/docs/api/simplificationUtils.md +64 -64
  56. package/docs/api/transcribe.md +43 -43
  57. package/docs/api-reference.md +85 -85
  58. package/docs/index.html +453 -453
  59. package/docs/index.md +38 -38
  60. package/docs/omd-objects.md +258 -258
  61. package/index.js +79 -79
  62. package/jsvg/index.js +3 -0
  63. package/jsvg/jsvg.js +898 -898
  64. package/jsvg/jsvgComponents.js +357 -358
  65. package/npm-docs/DOCUMENTATION_SUMMARY.md +220 -220
  66. package/npm-docs/README.md +251 -251
  67. package/npm-docs/api/api-reference.md +85 -85
  68. package/npm-docs/api/configuration-options.md +198 -198
  69. package/npm-docs/api/eventManager.md +82 -82
  70. package/npm-docs/api/expression-nodes.md +561 -561
  71. package/npm-docs/api/focusFrameManager.md +144 -144
  72. package/npm-docs/api/index.md +105 -105
  73. package/npm-docs/api/main.md +62 -62
  74. package/npm-docs/api/omdBinaryExpressionNode.md +86 -86
  75. package/npm-docs/api/omdCanvas.md +83 -83
  76. package/npm-docs/api/omdConfigManager.md +112 -112
  77. package/npm-docs/api/omdConstantNode.md +52 -52
  78. package/npm-docs/api/omdDisplay.md +87 -87
  79. package/npm-docs/api/omdEquationNode.md +174 -174
  80. package/npm-docs/api/omdEquationSequenceNode.md +258 -258
  81. package/npm-docs/api/omdEquationStack.md +192 -192
  82. package/npm-docs/api/omdFunctionNode.md +82 -82
  83. package/npm-docs/api/omdGroupNode.md +78 -78
  84. package/npm-docs/api/omdHelpers.md +87 -87
  85. package/npm-docs/api/omdLeafNode.md +85 -85
  86. package/npm-docs/api/omdNode.md +201 -201
  87. package/npm-docs/api/omdOperationDisplayNode.md +117 -117
  88. package/npm-docs/api/omdOperatorNode.md +91 -91
  89. package/npm-docs/api/omdParenthesisNode.md +133 -133
  90. package/npm-docs/api/omdPopup.md +191 -191
  91. package/npm-docs/api/omdPowerNode.md +131 -131
  92. package/npm-docs/api/omdRationalNode.md +144 -144
  93. package/npm-docs/api/omdSequenceNode.md +128 -128
  94. package/npm-docs/api/omdSimplification.md +78 -78
  95. package/npm-docs/api/omdSqrtNode.md +144 -144
  96. package/npm-docs/api/omdStepVisualizer.md +146 -146
  97. package/npm-docs/api/omdStepVisualizerHighlighting.md +65 -65
  98. package/npm-docs/api/omdStepVisualizerInteractiveSteps.md +108 -108
  99. package/npm-docs/api/omdStepVisualizerLayout.md +70 -70
  100. package/npm-docs/api/omdStepVisualizerNodeUtils.md +140 -140
  101. package/npm-docs/api/omdStepVisualizerTextBoxes.md +76 -76
  102. package/npm-docs/api/omdToolbar.md +130 -130
  103. package/npm-docs/api/omdTranscriptionService.md +95 -95
  104. package/npm-docs/api/omdTreeDiff.md +169 -169
  105. package/npm-docs/api/omdUnaryExpressionNode.md +137 -137
  106. package/npm-docs/api/omdUtilities.md +82 -82
  107. package/npm-docs/api/omdVariableNode.md +123 -123
  108. package/npm-docs/api/selectTool.md +74 -74
  109. package/npm-docs/api/simplificationEngine.md +97 -97
  110. package/npm-docs/api/simplificationRules.md +76 -76
  111. package/npm-docs/api/simplificationUtils.md +64 -64
  112. package/npm-docs/api/transcribe.md +43 -43
  113. package/npm-docs/guides/equations.md +854 -854
  114. package/npm-docs/guides/factory-functions.md +354 -354
  115. package/npm-docs/guides/getting-started.md +318 -318
  116. package/npm-docs/guides/quick-examples.md +525 -525
  117. package/npm-docs/guides/visualizations.md +682 -682
  118. package/npm-docs/index.html +12 -0
  119. package/npm-docs/json-schemas.md +826 -826
  120. package/omd/config/omdConfigManager.js +279 -267
  121. package/omd/core/index.js +158 -158
  122. package/omd/core/omdEquationStack.js +546 -546
  123. package/omd/core/omdUtilities.js +113 -113
  124. package/omd/display/omdDisplay.js +969 -962
  125. package/omd/display/omdToolbar.js +501 -501
  126. package/omd/nodes/omdBinaryExpressionNode.js +459 -459
  127. package/omd/nodes/omdConstantNode.js +141 -141
  128. package/omd/nodes/omdEquationNode.js +1327 -1327
  129. package/omd/nodes/omdFunctionNode.js +351 -351
  130. package/omd/nodes/omdGroupNode.js +67 -67
  131. package/omd/nodes/omdLeafNode.js +76 -76
  132. package/omd/nodes/omdNode.js +556 -556
  133. package/omd/nodes/omdOperationDisplayNode.js +321 -321
  134. package/omd/nodes/omdOperatorNode.js +108 -108
  135. package/omd/nodes/omdParenthesisNode.js +292 -292
  136. package/omd/nodes/omdPowerNode.js +235 -235
  137. package/omd/nodes/omdRationalNode.js +295 -295
  138. package/omd/nodes/omdSqrtNode.js +307 -307
  139. package/omd/nodes/omdUnaryExpressionNode.js +227 -227
  140. package/omd/nodes/omdVariableNode.js +122 -122
  141. package/omd/simplification/omdSimplification.js +140 -140
  142. package/omd/simplification/omdSimplificationEngine.js +887 -887
  143. package/omd/simplification/package.json +5 -5
  144. package/omd/simplification/rules/binaryRules.js +1037 -1037
  145. package/omd/simplification/rules/functionRules.js +111 -111
  146. package/omd/simplification/rules/index.js +48 -48
  147. package/omd/simplification/rules/parenthesisRules.js +19 -19
  148. package/omd/simplification/rules/powerRules.js +143 -143
  149. package/omd/simplification/rules/rationalRules.js +725 -725
  150. package/omd/simplification/rules/sqrtRules.js +48 -48
  151. package/omd/simplification/rules/unaryRules.js +37 -37
  152. package/omd/simplification/simplificationRules.js +31 -31
  153. package/omd/simplification/simplificationUtils.js +1055 -1055
  154. package/omd/step-visualizer/omdStepVisualizer.js +947 -947
  155. package/omd/step-visualizer/omdStepVisualizerHighlighting.js +246 -246
  156. package/omd/step-visualizer/omdStepVisualizerLayout.js +892 -892
  157. package/omd/step-visualizer/omdStepVisualizerTextBoxes.js +200 -200
  158. package/omd/utils/aiNextEquationStep.js +106 -106
  159. package/omd/utils/omdNodeOverlay.js +638 -638
  160. package/omd/utils/omdPopup.js +1203 -1203
  161. package/omd/utils/omdStepVisualizerInteractiveSteps.js +684 -684
  162. package/omd/utils/omdStepVisualizerNodeUtils.js +267 -267
  163. package/omd/utils/omdTranscriptionService.js +123 -123
  164. package/omd/utils/omdTreeDiff.js +733 -733
  165. package/package.json +59 -57
  166. package/readme.html +184 -120
  167. package/src/index.js +74 -74
  168. package/src/json-schemas.md +576 -576
  169. package/src/omd-json-samples.js +147 -147
  170. package/src/omdApp.js +391 -391
  171. package/src/omdAppCanvas.js +335 -335
  172. package/src/omdBalanceHanger.js +199 -199
  173. package/src/omdColor.js +13 -13
  174. package/src/omdCoordinatePlane.js +541 -541
  175. package/src/omdExpression.js +115 -115
  176. package/src/omdFactory.js +150 -150
  177. package/src/omdFunction.js +114 -114
  178. package/src/omdMetaExpression.js +290 -290
  179. package/src/omdNaturalExpression.js +563 -563
  180. package/src/omdNode.js +383 -383
  181. package/src/omdNumber.js +52 -52
  182. package/src/omdNumberLine.js +114 -112
  183. package/src/omdNumberTile.js +118 -118
  184. package/src/omdOperator.js +72 -72
  185. package/src/omdPowerExpression.js +91 -91
  186. package/src/omdProblem.js +259 -259
  187. package/src/omdRatioChart.js +251 -251
  188. package/src/omdRationalExpression.js +114 -114
  189. package/src/omdSampleData.js +215 -215
  190. package/src/omdShapes.js +512 -512
  191. package/src/omdSpinner.js +151 -151
  192. package/src/omdString.js +49 -49
  193. package/src/omdTable.js +498 -498
  194. package/src/omdTapeDiagram.js +244 -244
  195. package/src/omdTerm.js +91 -91
  196. package/src/omdTileEquation.js +349 -349
  197. package/src/omdUtils.js +84 -84
  198. package/src/omdVariable.js +51 -51
@@ -1,79 +1,79 @@
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.
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
79
  - [`omdParenthesisNode`](./omdParenthesisNode.md) - For complete parenthetical expressions that contain other nodes.
@@ -1,88 +1,88 @@
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);
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
88
  ```
@@ -1,86 +1,86 @@
1
- # omdLeafNode
2
-
3
- Represents a base class for all leaf nodes in the OMD expression tree, such as constants, variables, operators, and grouping symbols. This class provides fundamental functionalities for handling text content, computing dimensions, and managing layout for single-element nodes.
4
-
5
- ## Class Definition
6
-
7
- ```javascript
8
- export class omdLeafNode extends omdNode
9
- ```
10
-
11
- ## Constructor
12
-
13
- ### `new omdLeafNode(astNodeData)`
14
-
15
- Creates a new `omdLeafNode` instance. This is an abstract base class; you should use its concrete subclasses (e.g., `omdConstantNode`, `omdVariableNode`) instead.
16
-
17
- - **`astNodeData`** (`object`): The abstract syntax tree (AST) node data from a parser like math.js, containing information relevant to the leaf node.
18
-
19
- ## Public Properties
20
-
21
- - **`textElement`** (`jsvgTextLine`): The internal `jsvgTextLine` instance that renders the text content of the leaf node.
22
-
23
- ## Public Methods
24
-
25
- ### `clone()`
26
-
27
- Creates a deep clone of the leaf node. This method uses the original node's constructor to create a new instance, ensuring that the correct subclass is instantiated. The clone's `provenance` array is updated to include the original node's ID.
28
-
29
- - **Returns**: `omdLeafNode` - A new instance of the specific leaf node subclass.
30
-
31
- ### `updateTextElement(text)`
32
-
33
- Updates the text content displayed by the node's `textElement`. After updating the text, you typically need to call `computeDimensions()` and `updateLayout()` to reflect the change visually.
34
-
35
- - **`text`** (`string` | `number`): The new text content to display.
36
-
37
- ### `computeDimensions()`
38
-
39
- Calculates the dimensions (width and height) of the node based on its text content and current font size. It uses the `getTextBounds` utility function to accurately measure the text. This method also updates the font size of the internal `textElement`.
40
-
41
- - **Overrides**: `omdNode.computeDimensions()`.
42
-
43
- ### `updateLayout()`
44
-
45
- Updates the position of the node's internal text element to center it within the node's bounding box. This method primarily calls the internal `updateTextPosition()`.
46
-
47
- - **Overrides**: `omdNode.updateLayout()`.
48
-
49
- ## Internal Methods
50
-
51
- - **`createTextElement(text)`**: Creates and initializes a `jsvgTextLine` element with the given text. It sets the text anchor to `'middle'` and dominant baseline to `'middle'` for proper centering, and adds it as a child of this node.
52
- - **Returns**: `jsvgTextLine` - The created text element.
53
- - **`updateTextPosition()`**: Positions the `textElement` at the center of the node's calculated width and height.
54
-
55
- ## Example
56
-
57
- ```javascript
58
- // omdLeafNode is an abstract class—use concrete subclasses
59
- import { omdConstantNode } from './omdConstantNode.js';
60
- import { omdVariableNode } from './omdVariableNode.js';
61
- import { omdOperatorNode } from './omdOperatorNode.js';
62
-
63
- const constant = new omdConstantNode({ value: 5 });
64
- const variable = new omdVariableNode({ name: 'x' });
65
- const operator = new omdOperatorNode({ op: '+' });
66
-
67
- // All leaf nodes handle text rendering and layout similarly
68
- constant.initialize(); // Computes dimensions and layout
69
- variable.initialize();
70
- operator.initialize();
71
-
72
- // You can then add these to an omdDisplay or other container
73
- ```
74
-
75
- ## See Also
76
-
77
- Concrete implementations:
78
-
79
- - [`omdConstantNode`](./omdConstantNode.md) - For numeric values.
80
- - [`omdVariableNode`](./omdVariableNode.md) - For variables.
81
- - [`omdOperatorNode`](./omdOperatorNode.md) - For operators.
82
- - [`omdGroupNode`](./omdGroupNode.md) - For grouping symbols.
83
-
84
- Base class:
85
-
1
+ # omdLeafNode
2
+
3
+ Represents a base class for all leaf nodes in the OMD expression tree, such as constants, variables, operators, and grouping symbols. This class provides fundamental functionalities for handling text content, computing dimensions, and managing layout for single-element nodes.
4
+
5
+ ## Class Definition
6
+
7
+ ```javascript
8
+ export class omdLeafNode extends omdNode
9
+ ```
10
+
11
+ ## Constructor
12
+
13
+ ### `new omdLeafNode(astNodeData)`
14
+
15
+ Creates a new `omdLeafNode` instance. This is an abstract base class; you should use its concrete subclasses (e.g., `omdConstantNode`, `omdVariableNode`) instead.
16
+
17
+ - **`astNodeData`** (`object`): The abstract syntax tree (AST) node data from a parser like math.js, containing information relevant to the leaf node.
18
+
19
+ ## Public Properties
20
+
21
+ - **`textElement`** (`jsvgTextLine`): The internal `jsvgTextLine` instance that renders the text content of the leaf node.
22
+
23
+ ## Public Methods
24
+
25
+ ### `clone()`
26
+
27
+ Creates a deep clone of the leaf node. This method uses the original node's constructor to create a new instance, ensuring that the correct subclass is instantiated. The clone's `provenance` array is updated to include the original node's ID.
28
+
29
+ - **Returns**: `omdLeafNode` - A new instance of the specific leaf node subclass.
30
+
31
+ ### `updateTextElement(text)`
32
+
33
+ Updates the text content displayed by the node's `textElement`. After updating the text, you typically need to call `computeDimensions()` and `updateLayout()` to reflect the change visually.
34
+
35
+ - **`text`** (`string` | `number`): The new text content to display.
36
+
37
+ ### `computeDimensions()`
38
+
39
+ Calculates the dimensions (width and height) of the node based on its text content and current font size. It uses the `getTextBounds` utility function to accurately measure the text. This method also updates the font size of the internal `textElement`.
40
+
41
+ - **Overrides**: `omdNode.computeDimensions()`.
42
+
43
+ ### `updateLayout()`
44
+
45
+ Updates the position of the node's internal text element to center it within the node's bounding box. This method primarily calls the internal `updateTextPosition()`.
46
+
47
+ - **Overrides**: `omdNode.updateLayout()`.
48
+
49
+ ## Internal Methods
50
+
51
+ - **`createTextElement(text)`**: Creates and initializes a `jsvgTextLine` element with the given text. It sets the text anchor to `'middle'` and dominant baseline to `'middle'` for proper centering, and adds it as a child of this node.
52
+ - **Returns**: `jsvgTextLine` - The created text element.
53
+ - **`updateTextPosition()`**: Positions the `textElement` at the center of the node's calculated width and height.
54
+
55
+ ## Example
56
+
57
+ ```javascript
58
+ // omdLeafNode is an abstract class—use concrete subclasses
59
+ import { omdConstantNode } from './omdConstantNode.js';
60
+ import { omdVariableNode } from './omdVariableNode.js';
61
+ import { omdOperatorNode } from './omdOperatorNode.js';
62
+
63
+ const constant = new omdConstantNode({ value: 5 });
64
+ const variable = new omdVariableNode({ name: 'x' });
65
+ const operator = new omdOperatorNode({ op: '+' });
66
+
67
+ // All leaf nodes handle text rendering and layout similarly
68
+ constant.initialize(); // Computes dimensions and layout
69
+ variable.initialize();
70
+ operator.initialize();
71
+
72
+ // You can then add these to an omdDisplay or other container
73
+ ```
74
+
75
+ ## See Also
76
+
77
+ Concrete implementations:
78
+
79
+ - [`omdConstantNode`](./omdConstantNode.md) - For numeric values.
80
+ - [`omdVariableNode`](./omdVariableNode.md) - For variables.
81
+ - [`omdOperatorNode`](./omdOperatorNode.md) - For operators.
82
+ - [`omdGroupNode`](./omdGroupNode.md) - For grouping symbols.
83
+
84
+ Base class:
85
+
86
86
  - [`omdNode`](./omdNode.md) - The fundamental base class for all OMD nodes.