@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,83 +1,83 @@
1
- # omdUtilities
2
-
3
- This module provides a collection of utility functions primarily used for mapping math.js AST nodes to OMD node classes, determining rendering behavior, and calculating text dimensions. These functions are internal helpers that support the core OMD node system.
4
-
5
- ## Functions
6
-
7
- ### `astToOmdType(type, ast)`
8
-
9
- Maps a math.js AST node type to its corresponding OMD node class. This function is crucial for dynamically creating the correct `omdNode` subclass based on the parsed expression.
10
-
11
- - **`type`** (`string`): The `type` property of the AST node (e.g., `"OperatorNode"`, `"ParenthesisNode"`).
12
- - **`ast`** (`object`): The full AST node object, which may contain additional context (e.g., `op` for `OperatorNode`, `fn` for `FunctionNode`).
13
- - **Returns**: `class` - The appropriate `omdNode` class constructor.
14
-
15
- **Detailed Logic:**
16
-
17
- - **`AssignmentNode`**: Returns `omdEquationNode`.
18
- - **`OperatorNode`**:
19
- - If `op` is `'-'` and `args.length` is `1` (unary minus), returns `omdUnaryExpressionNode`.
20
- - If `op` is `'='`, returns `omdEquationNode`.
21
- - If `op` is `'^'`, returns `omdPowerNode`.
22
- - If `op` is `'/'`, returns `omdRationalNode`.
23
- - Otherwise (binary operator), returns `omdBinaryExpressionNode`.
24
- - **`ParenthesisNode`**: Returns `omdParenthesisNode`.
25
- - **`ConstantNode`**: Returns `omdConstantNode`.
26
- - **`SymbolNode`**: Returns `omdVariableNode`.
27
- - **`FunctionNode`**:
28
- - If `fn.name` or `name` is `'multiply'` and `ast.implicit` is `true` (implicit multiplication), returns `omdBinaryExpressionNode`.
29
- - If `fn.name` or `name` is `'sqrt'`, returns `omdSqrtNode`.
30
- - Otherwise, returns `omdFunctionNode`.
31
- - **Default**: Returns `omdNode`.
32
-
33
- ### `getNodeForAST(ast)`
34
-
35
- A wrapper function that takes a complete math.js AST node and returns the corresponding OMD node class. It uses `astToOmdType` internally, handling cases where the AST might have a `mathjs` property indicating its type.
36
-
37
- - **`ast`** (`object`): The math.js AST node.
38
- - **Returns**: `class` - The appropriate `omdNode` class constructor.
39
-
40
- ### `getTextBounds(text, fontSize)`
41
-
42
- Calculates the rendered width and height of a given text string at a specific font size. This is achieved by creating a temporary, hidden `<span>` element in the DOM, applying the text and styling, measuring its dimensions, and then removing it.
43
-
44
- - **`text`** (`string`): The text content to measure.
45
- - **`fontSize`** (`number`): The font size in pixels.
46
- - **Returns**: `object` - An object with `width` and `height` properties.
47
-
48
- ### `shouldUseFractionNotation(ast)`
49
-
50
- Determines whether a division operation (represented by an AST node) should be rendered as a fraction (stacked numerator over denominator) or as a linear division (e.g., `a / b`). This decision is based on the complexity of the numerator and denominator.
51
-
52
- - **`ast`** (`object`): The AST node representing a division operation.
53
- - **Returns**: `boolean` - `true` if the division should be rendered as a fraction, `false` otherwise.
54
-
55
- ### `isComplexExpression(ast)`
56
-
57
- Checks if an AST node represents a "complex" expression, typically one that contains multiple operations or nested structures. This function is used by `shouldUseFractionNotation` to decide on the appropriate rendering style for fractions.
58
-
59
- - **`ast`** (`object`): The AST node to check.
60
- - **Returns**: `boolean` - `true` if the expression is considered complex, `false` otherwise.
61
-
62
- ## Example
63
-
64
- ```javascript
65
- import { getNodeForAST, getTextBounds } from '@teachinglab/omd'; // Assuming @teachinglab/omd exports these
66
- import * as math from 'mathjs';
67
-
68
- // Example of getting a node class for an expression
69
- const astExpression = math.parse('x + 2');
70
- const NodeClassExpression = getNodeForAST(astExpression);
71
- const nodeExpression = new NodeClassExpression(astExpression);
72
- console.log(nodeExpression.type); // e.g., "omdBinaryExpressionNode"
73
-
74
- // Example of getting a node class for an equation
75
- const astEquation = math.parse('y = 2x');
76
- const NodeClassEquation = getNodeForAST(astEquation);
77
- const nodeEquation = new NodeClassEquation(astEquation);
78
- console.log(nodeEquation.type); // "omdEquationNode"
79
-
80
- // Example of getting text bounds
81
- const bounds = getTextBounds('Hello World', 24);
82
- console.log(`Text width: ${bounds.width}, height: ${bounds.height}`);
1
+ # omdUtilities
2
+
3
+ This module provides a collection of utility functions primarily used for mapping math.js AST nodes to OMD node classes, determining rendering behavior, and calculating text dimensions. These functions are internal helpers that support the core OMD node system.
4
+
5
+ ## Functions
6
+
7
+ ### `astToOmdType(type, ast)`
8
+
9
+ Maps a math.js AST node type to its corresponding OMD node class. This function is crucial for dynamically creating the correct `omdNode` subclass based on the parsed expression.
10
+
11
+ - **`type`** (`string`): The `type` property of the AST node (e.g., `"OperatorNode"`, `"ParenthesisNode"`).
12
+ - **`ast`** (`object`): The full AST node object, which may contain additional context (e.g., `op` for `OperatorNode`, `fn` for `FunctionNode`).
13
+ - **Returns**: `class` - The appropriate `omdNode` class constructor.
14
+
15
+ **Detailed Logic:**
16
+
17
+ - **`AssignmentNode`**: Returns `omdEquationNode`.
18
+ - **`OperatorNode`**:
19
+ - If `op` is `'-'` and `args.length` is `1` (unary minus), returns `omdUnaryExpressionNode`.
20
+ - If `op` is `'='`, returns `omdEquationNode`.
21
+ - If `op` is `'^'`, returns `omdPowerNode`.
22
+ - If `op` is `'/'`, returns `omdRationalNode`.
23
+ - Otherwise (binary operator), returns `omdBinaryExpressionNode`.
24
+ - **`ParenthesisNode`**: Returns `omdParenthesisNode`.
25
+ - **`ConstantNode`**: Returns `omdConstantNode`.
26
+ - **`SymbolNode`**: Returns `omdVariableNode`.
27
+ - **`FunctionNode`**:
28
+ - If `fn.name` or `name` is `'multiply'` and `ast.implicit` is `true` (implicit multiplication), returns `omdBinaryExpressionNode`.
29
+ - If `fn.name` or `name` is `'sqrt'`, returns `omdSqrtNode`.
30
+ - Otherwise, returns `omdFunctionNode`.
31
+ - **Default**: Returns `omdNode`.
32
+
33
+ ### `getNodeForAST(ast)`
34
+
35
+ A wrapper function that takes a complete math.js AST node and returns the corresponding OMD node class. It uses `astToOmdType` internally, handling cases where the AST might have a `mathjs` property indicating its type.
36
+
37
+ - **`ast`** (`object`): The math.js AST node.
38
+ - **Returns**: `class` - The appropriate `omdNode` class constructor.
39
+
40
+ ### `getTextBounds(text, fontSize)`
41
+
42
+ Calculates the rendered width and height of a given text string at a specific font size. This is achieved by creating a temporary, hidden `<span>` element in the DOM, applying the text and styling, measuring its dimensions, and then removing it.
43
+
44
+ - **`text`** (`string`): The text content to measure.
45
+ - **`fontSize`** (`number`): The font size in pixels.
46
+ - **Returns**: `object` - An object with `width` and `height` properties.
47
+
48
+ ### `shouldUseFractionNotation(ast)`
49
+
50
+ Determines whether a division operation (represented by an AST node) should be rendered as a fraction (stacked numerator over denominator) or as a linear division (e.g., `a / b`). This decision is based on the complexity of the numerator and denominator.
51
+
52
+ - **`ast`** (`object`): The AST node representing a division operation.
53
+ - **Returns**: `boolean` - `true` if the division should be rendered as a fraction, `false` otherwise.
54
+
55
+ ### `isComplexExpression(ast)`
56
+
57
+ Checks if an AST node represents a "complex" expression, typically one that contains multiple operations or nested structures. This function is used by `shouldUseFractionNotation` to decide on the appropriate rendering style for fractions.
58
+
59
+ - **`ast`** (`object`): The AST node to check.
60
+ - **Returns**: `boolean` - `true` if the expression is considered complex, `false` otherwise.
61
+
62
+ ## Example
63
+
64
+ ```javascript
65
+ import { getNodeForAST, getTextBounds } from '@teachinglab/omd'; // Assuming @teachinglab/omd exports these
66
+ import * as math from 'mathjs';
67
+
68
+ // Example of getting a node class for an expression
69
+ const astExpression = math.parse('x + 2');
70
+ const NodeClassExpression = getNodeForAST(astExpression);
71
+ const nodeExpression = new NodeClassExpression(astExpression);
72
+ console.log(nodeExpression.type); // e.g., "omdBinaryExpressionNode"
73
+
74
+ // Example of getting a node class for an equation
75
+ const astEquation = math.parse('y = 2x');
76
+ const NodeClassEquation = getNodeForAST(astEquation);
77
+ const nodeEquation = new NodeClassEquation(astEquation);
78
+ console.log(nodeEquation.type); // "omdEquationNode"
79
+
80
+ // Example of getting text bounds
81
+ const bounds = getTextBounds('Hello World', 24);
82
+ console.log(`Text width: ${bounds.width}, height: ${bounds.height}`);
83
83
  ```
@@ -1,123 +1,123 @@
1
- # omdVariableNode
2
-
3
- Represents a variable (like `x`, `y`, `a`, `b`) in mathematical expressions. This node handles the visual representation of variables, their evaluation, and conversion to math.js AST.
4
-
5
- ## Class Definition
6
-
7
- ```javascript
8
- export class omdVariableNode extends omdLeafNode
9
- ```
10
-
11
- ## Constructor
12
-
13
- ### `new omdVariableNode(nodeData)`
14
-
15
- Creates a new `omdVariableNode` instance.
16
-
17
- - **`nodeData`** (`object` | `string`): The AST node data (from math.js, typically a `SymbolNode` with a `name` property) or the variable name as a string (e.g., `"x"`). The constructor extracts the variable `name` and creates the `textElement` for display.
18
-
19
- ## Static Methods
20
-
21
- ### `fromName(name)`
22
-
23
- Creates a variable node directly from a given name string. This is a convenience method for creating simple variable nodes without needing to construct a full AST object.
24
-
25
- - **`name`** (`string`): The variable name (e.g., `"x"`, `"theta"`).
26
- - **Returns**: `omdVariableNode` - A new instance of `omdVariableNode`.
27
-
28
- ## Public Properties
29
-
30
- - **`name`** (`string`): The name of the variable (e.g., `'x'`, `'y'`, `'theta'`).
31
- - **`type`** (`string`): Always `"omdVariableNode"`.
32
- - **`textElement`** (`jsvgTextLine`): The internal `jsvgTextLine` instance that displays the variable name.
33
-
34
- ## Public Methods
35
-
36
- ### `computeDimensions()`
37
-
38
- Calculates the dimensions of the node based on its text content, adding a small amount of padding around the variable name to improve visual spacing.
39
-
40
- - **Overrides**: `omdLeafNode.computeDimensions()`.
41
-
42
- ### `updateLayout()`
43
-
44
- Updates the layout of the node. This method primarily calls the superclass's `updateLayout`.
45
-
46
- - **Overrides**: `omdLeafNode.updateLayout()`.
47
-
48
- ### `toMathJSNode()`
49
-
50
- Converts the `omdVariableNode` to a math.js-compatible AST format. It creates a `SymbolNode` with the variable's `name`, `id`, and `provenance`.
51
-
52
- - **Returns**: `object` - A math.js-compatible AST node with `type: "SymbolNode"` and `name` set to the variable name. The returned object also includes `id`, `provenance`, and a `clone` method for compatibility.
53
-
54
- ### `highlight(color)`
55
-
56
- Applies a highlight to the node's background and sets the variable's text color to white for better contrast. This method respects the `isExplainHighlighted` lock.
57
-
58
- - **`color`** (`string`): The color of the highlight.
59
-
60
- ### `clearProvenanceHighlights()`
61
-
62
- Clears any provenance-related highlights from the node and resets the variable's text color to its default (black).
63
-
64
- ### `toString()`
65
-
66
- Converts the variable node to its string representation, which is simply its `name`.
67
-
68
- - **Returns**: `string` - The variable name.
69
-
70
- ### `evaluate(variables)`
71
-
72
- Evaluates the variable by looking up its value in the provided `variables` map. If the variable is not defined in the map, it throws an error.
73
-
74
- - **`variables`** (`object`): A map of variable names to their numeric values.
75
- - **Returns**: `number` - The value of the variable.
76
- - **Throws**: `Error` if the variable is not defined in the map.
77
-
78
- ## Internal Methods
79
-
80
- - **`parseName(nodeData)`**: Extracts the variable name from the constructor's `nodeData`. It handles both string input and AST objects with a `name` property.
81
- - **`parseType()`**: Sets the node's type. Always returns `"variable"`.
82
-
83
- ## Examples
84
-
85
- #### Creating Variables
86
-
87
- ```javascript
88
- import { omdVariableNode } from '@teachinglab/omd';
89
- import * as math from 'mathjs';
90
-
91
- // From a name string
92
- const nodeX = omdVariableNode.fromName('x');
93
- const nodeTheta = omdVariableNode.fromName('θ');
94
-
95
- // From AST data (e.g., from math.js parse result)
96
- const astNode = math.parse('y');
97
- const nodeY = new omdVariableNode(astNode);
98
-
99
- // Direct string name (less common, but supported)
100
- const nodeZ = new omdVariableNode('z');
101
- ```
102
-
103
- #### Rendering Variables
104
-
105
- ```javascript
106
- import { omdVariableNode } from '@teachinglab/omd';
107
- // import { jsvgContainer } from '@teachinglab/jsvg'; // if rendering directly
108
-
109
- const node = omdVariableNode.fromName('x');
110
- node.setFontSize(24);
111
- node.initialize(); // Computes dimensions and layout
112
-
113
- // To render, typically add to a parent node or an omdDisplay
114
- // const svgContainer = new jsvgContainer();
115
- // svgContainer.addChild(node);
116
- // document.body.appendChild(svgContainer.svgObject);
117
- ```
118
-
119
- ## See Also
120
-
121
- - [`omdLeafNode`](./omdLeafNode.md) - Parent class.
122
- - [`omdNode`](./omdNode.md) - Base class.
123
- - [`omdConstantNode`](./omdConstantNode.md) - For numeric values.
1
+ # omdVariableNode
2
+
3
+ Represents a variable (like `x`, `y`, `a`, `b`) in mathematical expressions. This node handles the visual representation of variables, their evaluation, and conversion to math.js AST.
4
+
5
+ ## Class Definition
6
+
7
+ ```javascript
8
+ export class omdVariableNode extends omdLeafNode
9
+ ```
10
+
11
+ ## Constructor
12
+
13
+ ### `new omdVariableNode(nodeData)`
14
+
15
+ Creates a new `omdVariableNode` instance.
16
+
17
+ - **`nodeData`** (`object` | `string`): The AST node data (from math.js, typically a `SymbolNode` with a `name` property) or the variable name as a string (e.g., `"x"`). The constructor extracts the variable `name` and creates the `textElement` for display.
18
+
19
+ ## Static Methods
20
+
21
+ ### `fromName(name)`
22
+
23
+ Creates a variable node directly from a given name string. This is a convenience method for creating simple variable nodes without needing to construct a full AST object.
24
+
25
+ - **`name`** (`string`): The variable name (e.g., `"x"`, `"theta"`).
26
+ - **Returns**: `omdVariableNode` - A new instance of `omdVariableNode`.
27
+
28
+ ## Public Properties
29
+
30
+ - **`name`** (`string`): The name of the variable (e.g., `'x'`, `'y'`, `'theta'`).
31
+ - **`type`** (`string`): Always `"omdVariableNode"`.
32
+ - **`textElement`** (`jsvgTextLine`): The internal `jsvgTextLine` instance that displays the variable name.
33
+
34
+ ## Public Methods
35
+
36
+ ### `computeDimensions()`
37
+
38
+ Calculates the dimensions of the node based on its text content, adding a small amount of padding around the variable name to improve visual spacing.
39
+
40
+ - **Overrides**: `omdLeafNode.computeDimensions()`.
41
+
42
+ ### `updateLayout()`
43
+
44
+ Updates the layout of the node. This method primarily calls the superclass's `updateLayout`.
45
+
46
+ - **Overrides**: `omdLeafNode.updateLayout()`.
47
+
48
+ ### `toMathJSNode()`
49
+
50
+ Converts the `omdVariableNode` to a math.js-compatible AST format. It creates a `SymbolNode` with the variable's `name`, `id`, and `provenance`.
51
+
52
+ - **Returns**: `object` - A math.js-compatible AST node with `type: "SymbolNode"` and `name` set to the variable name. The returned object also includes `id`, `provenance`, and a `clone` method for compatibility.
53
+
54
+ ### `highlight(color)`
55
+
56
+ Applies a highlight to the node's background and sets the variable's text color to white for better contrast. This method respects the `isExplainHighlighted` lock.
57
+
58
+ - **`color`** (`string`): The color of the highlight.
59
+
60
+ ### `clearProvenanceHighlights()`
61
+
62
+ Clears any provenance-related highlights from the node and resets the variable's text color to its default (black).
63
+
64
+ ### `toString()`
65
+
66
+ Converts the variable node to its string representation, which is simply its `name`.
67
+
68
+ - **Returns**: `string` - The variable name.
69
+
70
+ ### `evaluate(variables)`
71
+
72
+ Evaluates the variable by looking up its value in the provided `variables` map. If the variable is not defined in the map, it throws an error.
73
+
74
+ - **`variables`** (`object`): A map of variable names to their numeric values.
75
+ - **Returns**: `number` - The value of the variable.
76
+ - **Throws**: `Error` if the variable is not defined in the map.
77
+
78
+ ## Internal Methods
79
+
80
+ - **`parseName(nodeData)`**: Extracts the variable name from the constructor's `nodeData`. It handles both string input and AST objects with a `name` property.
81
+ - **`parseType()`**: Sets the node's type. Always returns `"variable"`.
82
+
83
+ ## Examples
84
+
85
+ #### Creating Variables
86
+
87
+ ```javascript
88
+ import { omdVariableNode } from '@teachinglab/omd';
89
+ import * as math from 'mathjs';
90
+
91
+ // From a name string
92
+ const nodeX = omdVariableNode.fromName('x');
93
+ const nodeTheta = omdVariableNode.fromName('θ');
94
+
95
+ // From AST data (e.g., from math.js parse result)
96
+ const astNode = math.parse('y');
97
+ const nodeY = new omdVariableNode(astNode);
98
+
99
+ // Direct string name (less common, but supported)
100
+ const nodeZ = new omdVariableNode('z');
101
+ ```
102
+
103
+ #### Rendering Variables
104
+
105
+ ```javascript
106
+ import { omdVariableNode } from '@teachinglab/omd';
107
+ // import { jsvgContainer } from '@teachinglab/jsvg'; // if rendering directly
108
+
109
+ const node = omdVariableNode.fromName('x');
110
+ node.setFontSize(24);
111
+ node.initialize(); // Computes dimensions and layout
112
+
113
+ // To render, typically add to a parent node or an omdDisplay
114
+ // const svgContainer = new jsvgContainer();
115
+ // svgContainer.addChild(node);
116
+ // document.body.appendChild(svgContainer.svgObject);
117
+ ```
118
+
119
+ ## See Also
120
+
121
+ - [`omdLeafNode`](./omdLeafNode.md) - Parent class.
122
+ - [`omdNode`](./omdNode.md) - Base class.
123
+ - [`omdConstantNode`](./omdConstantNode.md) - For numeric values.
@@ -1,74 +1,74 @@
1
-
2
- # SelectTool
3
-
4
- The `SelectTool` is a tool for selecting, moving, and deleting stroke segments on the canvas. It extends the `Tool` class.
5
-
6
- ## Class Definition
7
-
8
- ```javascript
9
- export class SelectTool extends Tool {
10
- // ...
11
- }
12
- ```
13
-
14
- ## Constructor
15
-
16
- ### `new SelectTool(canvas, [options])`
17
-
18
- Creates a new `SelectTool` instance.
19
-
20
- * **canvas** (`OMDCanvas`): The canvas instance.
21
- * **[options]** (`object`, optional): Configuration options for the tool.
22
- * **selectionColor** (`string`, optional): The color of the selection box. Defaults to `'#007bff'`.
23
- * **selectionOpacity** (`number`, optional): The opacity of the selection box. Defaults to `0.3`.
24
-
25
- ## Public Methods
26
-
27
- ### `onPointerDown(event)`
28
-
29
- Handles the pointer down event to start a selection.
30
-
31
- * **event** (`PointerEvent`): The pointer event.
32
-
33
- ### `onPointerMove(event)`
34
-
35
- Handles the pointer move event to update the selection box.
36
-
37
- * **event** (`PointerEvent`): The pointer event.
38
-
39
- ### `onPointerUp(event)`
40
-
41
- Handles the pointer up event to complete the selection.
42
-
43
- * **event** (`PointerEvent`): The pointer event.
44
-
45
- ### `onCancel()`
46
-
47
- Cancels the current selection operation.
48
-
49
- ### `onKeyboardShortcut(key, event)`
50
-
51
- Handles keyboard shortcuts for selection-related actions.
52
-
53
- * **key** (`string`): The key that was pressed.
54
- * **event** (`KeyboardEvent`): The keyboard event.
55
- * **Returns**: `boolean` - True if the shortcut was handled, false otherwise.
56
-
57
- ### `getCursor()`
58
-
59
- Gets the cursor for the tool.
60
-
61
- * **Returns**: `string` - The CSS cursor name.
62
-
63
- ### `clearSelection()`
64
-
65
- Clears the current selection.
66
-
67
- ## Properties
68
-
69
- * **displayName** (`string`): The display name of the tool.
70
- * **description** (`string`): A description of the tool.
71
- * **icon** (`string`): The icon for the tool.
72
- * **shortcut** (`string`): The keyboard shortcut for the tool.
73
- * **category** (`string`): The category of the tool.
74
- * **selectedSegments** (`Map<string, Set<number>>`): A map of selected segments, where the key is the stroke ID and the value is a set of segment indices.
1
+
2
+ # SelectTool
3
+
4
+ The `SelectTool` is a tool for selecting, moving, and deleting stroke segments on the canvas. It extends the `Tool` class.
5
+
6
+ ## Class Definition
7
+
8
+ ```javascript
9
+ export class SelectTool extends Tool {
10
+ // ...
11
+ }
12
+ ```
13
+
14
+ ## Constructor
15
+
16
+ ### `new SelectTool(canvas, [options])`
17
+
18
+ Creates a new `SelectTool` instance.
19
+
20
+ * **canvas** (`OMDCanvas`): The canvas instance.
21
+ * **[options]** (`object`, optional): Configuration options for the tool.
22
+ * **selectionColor** (`string`, optional): The color of the selection box. Defaults to `'#007bff'`.
23
+ * **selectionOpacity** (`number`, optional): The opacity of the selection box. Defaults to `0.3`.
24
+
25
+ ## Public Methods
26
+
27
+ ### `onPointerDown(event)`
28
+
29
+ Handles the pointer down event to start a selection.
30
+
31
+ * **event** (`PointerEvent`): The pointer event.
32
+
33
+ ### `onPointerMove(event)`
34
+
35
+ Handles the pointer move event to update the selection box.
36
+
37
+ * **event** (`PointerEvent`): The pointer event.
38
+
39
+ ### `onPointerUp(event)`
40
+
41
+ Handles the pointer up event to complete the selection.
42
+
43
+ * **event** (`PointerEvent`): The pointer event.
44
+
45
+ ### `onCancel()`
46
+
47
+ Cancels the current selection operation.
48
+
49
+ ### `onKeyboardShortcut(key, event)`
50
+
51
+ Handles keyboard shortcuts for selection-related actions.
52
+
53
+ * **key** (`string`): The key that was pressed.
54
+ * **event** (`KeyboardEvent`): The keyboard event.
55
+ * **Returns**: `boolean` - True if the shortcut was handled, false otherwise.
56
+
57
+ ### `getCursor()`
58
+
59
+ Gets the cursor for the tool.
60
+
61
+ * **Returns**: `string` - The CSS cursor name.
62
+
63
+ ### `clearSelection()`
64
+
65
+ Clears the current selection.
66
+
67
+ ## Properties
68
+
69
+ * **displayName** (`string`): The display name of the tool.
70
+ * **description** (`string`): A description of the tool.
71
+ * **icon** (`string`): The icon for the tool.
72
+ * **shortcut** (`string`): The keyboard shortcut for the tool.
73
+ * **category** (`string`): The category of the tool.
74
+ * **selectedSegments** (`Map<string, Set<number>>`): A map of selected segments, where the key is the stroke ID and the value is a set of segment indices.