@teachinglab/omd 0.6.0 → 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 -56
  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,86 +1,86 @@
1
- # omdBinaryExpressionNode
2
-
3
- Represents a binary operation in a mathematical expression, such as addition (`a + b`), subtraction, multiplication, or division. This node is a cornerstone of the expression tree, containing a left operand, a right operand, and an operator.
4
-
5
- ## Class Definition
6
-
7
- ```javascript
8
- export class omdBinaryExpressionNode extends omdNode
9
- ```
10
-
11
- ## Constructor
12
-
13
- ### `new omdBinaryExpressionNode(ast)`
14
-
15
- Creates a new `omdBinaryExpressionNode` instance.
16
-
17
- - **`ast`** (`object`): The abstract syntax tree (AST) node from a parser like math.js. It must contain:
18
- - `args`: An array with at least two operand nodes.
19
- - `op`: The operator symbol (e.g., `+`, `*`).
20
- - `fn`: The function name for the operation (e.g., `add`, `multiply`).
21
- - `implicit` (`boolean`, optional): `true` if the multiplication is implicit (e.g., `2x`).
22
-
23
- During construction, the node automatically handles a critical piece of mathematical convention: **implicit multiplication**. Based on the configuration in `omdConfigManager`, it will:
24
-
25
- 1. **Reorder Operands**: If it encounters an expression like `x * 2`, it will automatically reorder it to the conventional `2 * x` by swapping the left and right child nodes.
26
- 2. **Determine Implicit Form**: It checks if the combination of operands (e.g., a constant and a variable) should be represented implicitly. If so, it removes the visible operator (`*`) and marks the node as implicit.
27
-
28
- ## Public Properties
29
-
30
- - **`left`** ([`omdNode`](./omdNode.md)): The node representing the left-hand side of the operation.
31
- - **`right`** ([`omdNode`](./omdNode.md)): The node representing the right-hand side of the operation.
32
- - **`op`** ([`omdOperatorNode`](./omdOperatorNode.md) | `null`): The node for the operator. This is `null` for implicit multiplication.
33
- - **`operation`** (`string`): The name of the mathematical function (e.g., `'add'`, `'multiply'`).
34
- - **`isImplicit`** (`boolean`): `true` if the node represents implicit multiplication.
35
-
36
- ## Public Methods
37
-
38
- ### `clone()`
39
-
40
- Creates a deep, recursive clone of the node, including its children (`left`, `right`, `op`). The new node's `provenance` property will link back to the ID of this original node.
41
-
42
- - **Returns**: A new `omdBinaryExpressionNode` instance.
43
-
44
- ### `evaluate(variables)`
45
-
46
- Recursively evaluates the expression and returns the numerical result.
47
-
48
- - **`variables`** (`object`, optional): A map of variable names to their numeric values (e.g., `{ x: 5 }`).
49
- - **Returns**: `number` - The result of the calculation.
50
- - **Throws**: An `Error` for unsupported operations or division by zero.
51
-
52
- ### `needsParentheses()`
53
-
54
- Determines if this expression needs to be wrapped in parentheses to maintain the correct order of operations when it is a child of another binary expression.
55
-
56
- - **Returns**: `boolean` - `true` if parentheses are required.
57
-
58
- ### `setHighlight(highlightOn, color)`
59
-
60
- Applies or removes a highlight from the node and all of its children (left, right, and operator).
61
-
62
- - **`highlightOn`** (`boolean`): `true` to highlight, `false` to remove.
63
- - **`color`** (`string`, optional): The color of the highlight.
64
-
65
- ### `clearProvenanceHighlights()`
66
-
67
- Recursively clears all provenance-related highlights from this node and its children.
68
-
69
- ### `toMathJSNode()`
70
-
71
- Converts the node back into a math.js-compatible AST format.
72
-
73
- - **Returns**: `object` - A math.js OperatorNode.
74
-
75
- ### `toString()`
76
-
77
- Converts the node into a human-readable string, automatically handling parentheses for precedence.
78
-
79
- - **Returns**: `string` - The string representation of the expression.
80
-
81
- ## Internal Methods
82
-
83
- - **`_shouldUseImplicitMultiplication(left, right)`**: Checks the configuration to decide if implicit multiplication is appropriate for the given operand types.
84
- - **`_shouldReorderMultiplication(left, right)`**: Determines if operands should be swapped to follow convention (e.g., `variable * constant` -> `constant * variable`).
85
- - **`computeDimensions()`**: Calculates the bounding box of the expression.
86
- - **`updateLayout()`**: Positions the left operand, operator, and right operand correctly, aligning them along their baseline.
1
+ # omdBinaryExpressionNode
2
+
3
+ Represents a binary operation in a mathematical expression, such as addition (`a + b`), subtraction, multiplication, or division. This node is a cornerstone of the expression tree, containing a left operand, a right operand, and an operator.
4
+
5
+ ## Class Definition
6
+
7
+ ```javascript
8
+ export class omdBinaryExpressionNode extends omdNode
9
+ ```
10
+
11
+ ## Constructor
12
+
13
+ ### `new omdBinaryExpressionNode(ast)`
14
+
15
+ Creates a new `omdBinaryExpressionNode` instance.
16
+
17
+ - **`ast`** (`object`): The abstract syntax tree (AST) node from a parser like math.js. It must contain:
18
+ - `args`: An array with at least two operand nodes.
19
+ - `op`: The operator symbol (e.g., `+`, `*`).
20
+ - `fn`: The function name for the operation (e.g., `add`, `multiply`).
21
+ - `implicit` (`boolean`, optional): `true` if the multiplication is implicit (e.g., `2x`).
22
+
23
+ During construction, the node automatically handles a critical piece of mathematical convention: **implicit multiplication**. Based on the configuration in `omdConfigManager`, it will:
24
+
25
+ 1. **Reorder Operands**: If it encounters an expression like `x * 2`, it will automatically reorder it to the conventional `2 * x` by swapping the left and right child nodes.
26
+ 2. **Determine Implicit Form**: It checks if the combination of operands (e.g., a constant and a variable) should be represented implicitly. If so, it removes the visible operator (`*`) and marks the node as implicit.
27
+
28
+ ## Public Properties
29
+
30
+ - **`left`** ([`omdNode`](./omdNode.md)): The node representing the left-hand side of the operation.
31
+ - **`right`** ([`omdNode`](./omdNode.md)): The node representing the right-hand side of the operation.
32
+ - **`op`** ([`omdOperatorNode`](./omdOperatorNode.md) | `null`): The node for the operator. This is `null` for implicit multiplication.
33
+ - **`operation`** (`string`): The name of the mathematical function (e.g., `'add'`, `'multiply'`).
34
+ - **`isImplicit`** (`boolean`): `true` if the node represents implicit multiplication.
35
+
36
+ ## Public Methods
37
+
38
+ ### `clone()`
39
+
40
+ Creates a deep, recursive clone of the node, including its children (`left`, `right`, `op`). The new node's `provenance` property will link back to the ID of this original node.
41
+
42
+ - **Returns**: A new `omdBinaryExpressionNode` instance.
43
+
44
+ ### `evaluate(variables)`
45
+
46
+ Recursively evaluates the expression and returns the numerical result.
47
+
48
+ - **`variables`** (`object`, optional): A map of variable names to their numeric values (e.g., `{ x: 5 }`).
49
+ - **Returns**: `number` - The result of the calculation.
50
+ - **Throws**: An `Error` for unsupported operations or division by zero.
51
+
52
+ ### `needsParentheses()`
53
+
54
+ Determines if this expression needs to be wrapped in parentheses to maintain the correct order of operations when it is a child of another binary expression.
55
+
56
+ - **Returns**: `boolean` - `true` if parentheses are required.
57
+
58
+ ### `setHighlight(highlightOn, color)`
59
+
60
+ Applies or removes a highlight from the node and all of its children (left, right, and operator).
61
+
62
+ - **`highlightOn`** (`boolean`): `true` to highlight, `false` to remove.
63
+ - **`color`** (`string`, optional): The color of the highlight.
64
+
65
+ ### `clearProvenanceHighlights()`
66
+
67
+ Recursively clears all provenance-related highlights from this node and its children.
68
+
69
+ ### `toMathJSNode()`
70
+
71
+ Converts the node back into a math.js-compatible AST format.
72
+
73
+ - **Returns**: `object` - A math.js OperatorNode.
74
+
75
+ ### `toString()`
76
+
77
+ Converts the node into a human-readable string, automatically handling parentheses for precedence.
78
+
79
+ - **Returns**: `string` - The string representation of the expression.
80
+
81
+ ## Internal Methods
82
+
83
+ - **`_shouldUseImplicitMultiplication(left, right)`**: Checks the configuration to decide if implicit multiplication is appropriate for the given operand types.
84
+ - **`_shouldReorderMultiplication(left, right)`**: Determines if operands should be swapped to follow convention (e.g., `variable * constant` -> `constant * variable`).
85
+ - **`computeDimensions()`**: Calculates the bounding box of the expression.
86
+ - **`updateLayout()`**: Positions the left operand, operator, and right operand correctly, aligning them along their baseline.
@@ -1,84 +1,84 @@
1
- # omdCanvas
2
-
3
- The `omdCanvas` class is the core component for creating and managing an interactive 2D drawing surface. It provides the primary API for all canvas operations, including drawing and managing strokes, handling user input, and orchestrating various features like tools, a toolbar, and focus frames.
4
-
5
- ## Class Definition
6
-
7
- ```javascript
8
- export class omdCanvas
9
- ```
10
-
11
- ## Constructor
12
-
13
- ### `new omdCanvas(container, [options])`
14
-
15
- Creates a new `omdCanvas` instance within a specified container element.
16
-
17
- - **`container`** (`HTMLElement` | `string`): The HTML element or a CSS selector string for the container where the canvas will be rendered. Throws an error if the container is not found.
18
- - **`options`** (`object`, optional): Configuration options for the canvas. These are passed to the `CanvasConfig` class. See the [Configuration Options](./configuration-options.md) for details.
19
-
20
- ## Properties
21
-
22
- - **`container`** (`HTMLElement`): The HTML container element for the canvas.
23
- - **`config`** (`CanvasConfig`): The configuration object for the canvas.
24
- - **`svg`** (`SVGElement`): The main `<svg>` element that serves as the drawing surface.
25
- - **`backgroundLayer`** (`SVGGElement`): An SVG group (`<g>`) for background elements like the grid.
26
- - **`drawingLayer`** (`SVGGElement`): The SVG group where all drawing strokes are rendered.
27
- - **`uiLayer`** (`SVGGElement`): The SVG group for UI elements that overlay the drawing, such as selection boxes.
28
- - **`focusFrameLayer`** (`SVGGElement`): The SVG group dedicated to holding `FocusFrame` elements.
29
- - **`strokes`** (`Map<string, Stroke>`): A map of all stroke objects on the canvas, with their unique IDs as keys.
30
- - **`selectedStrokes`** (`Set<string>`): A set of the IDs of all currently selected strokes.
31
- - **`toolManager`** (`ToolManager`): The instance managing the active drawing tools (Pencil, Eraser, etc.).
32
- - **`eventManager`** (`EventManager`): The instance managing all user input events.
33
- - **`cursor`** (`Cursor`): The instance that manages the custom cursor's appearance and behavior.
34
- - **`toolbar`** (`Toolbar`): The UI toolbar for tool selection (if enabled in config).
35
- - **`focusFrameManager`** (`FocusFrameManager`): The instance managing focus frames (if enabled in config).
36
-
37
- ## Public Methods
38
-
39
- ### Stroke Management
40
-
41
- - **`addStroke(stroke)`**: Adds a `Stroke` object to the canvas and renders it. Emits `strokeAdded`.
42
- - **`removeStroke(strokeId)`**: Removes a stroke from the canvas by its ID. Emits `strokeRemoved`.
43
- - **`clear()`**: Removes all strokes from the canvas. Emits `cleared`.
44
-
45
- ### Selection
46
-
47
- - **`selectStrokes(strokeIds)`**: Programmatically selects a set of strokes by their IDs. Emits `selectionChanged`.
48
-
49
- ### Coordinate Conversion
50
-
51
- - **`clientToSVG(clientX, clientY)`**: Converts screen coordinates (e.g., from a mouse event) to the canvas's local SVG coordinate system.
52
- - **Returns**: `{ x, y }` object.
53
-
54
- ### Exporting
55
-
56
- - **`exportSVG()`**: Exports the canvas drawing as a clean SVG string. UI layers (`uiLayer`, `focusFrameLayer`) are excluded.
57
- - **`async exportImage([format], [quality])`**: Exports the canvas as a bitmap image.
58
- - **`format`** (`string`): `'png'`, `'jpeg'`, or `'webp'`. Default: `'png'`.
59
- - **`quality`** (`number`): For JPEG/WebP, a value from 0 to 1. Default: `1`.
60
- - **Returns**: `Promise<Blob>` that resolves with the image data.
61
-
62
- ### Canvas Management
63
-
64
- - **`resize(width, height)`**: Resizes the canvas. Emits `resized`.
65
- - **`toggleGrid()`**: Toggles the visibility of the background grid.
66
- - **`getInfo()`**: Returns an object with status information (dimensions, stroke count, active tool, etc.).
67
- - **`destroy()`**: Completely removes the canvas and all associated managers, event listeners, and DOM elements. Emits `destroyed`.
68
-
69
- ### Event Handling (Pub/Sub)
70
-
71
- - **`on(event, callback)`**: Registers a listener for a custom canvas event.
72
- - **`off(event, callback)`**: Removes a previously registered event listener.
73
- - **`emit(event, [data])`**: Dispatches a custom event to all registered listeners.
74
-
75
- ## Emitted Events
76
-
77
- The `omdCanvas` is an event emitter. You can listen for these events using the `on()` method.
78
-
79
- - `strokeAdded`, `strokeRemoved`, `cleared`: Fired for stroke operations.
80
- - `selectionChanged`: Fired when the set of selected strokes changes.
81
- - `resized`: Fired when the canvas dimensions change.
82
- - `pointerDown`, `pointerMove`, `pointerUp`, etc.: Raw input events, normalized by the `EventManager`.
83
- - `focusFrameCreated`, `focusFrameRemoved`, etc.: Events from the `FocusFrameManager`.
1
+ # omdCanvas
2
+
3
+ The `omdCanvas` class is the core component for creating and managing an interactive 2D drawing surface. It provides the primary API for all canvas operations, including drawing and managing strokes, handling user input, and orchestrating various features like tools, a toolbar, and focus frames.
4
+
5
+ ## Class Definition
6
+
7
+ ```javascript
8
+ export class omdCanvas
9
+ ```
10
+
11
+ ## Constructor
12
+
13
+ ### `new omdCanvas(container, [options])`
14
+
15
+ Creates a new `omdCanvas` instance within a specified container element.
16
+
17
+ - **`container`** (`HTMLElement` | `string`): The HTML element or a CSS selector string for the container where the canvas will be rendered. Throws an error if the container is not found.
18
+ - **`options`** (`object`, optional): Configuration options for the canvas. These are passed to the `CanvasConfig` class. See the [Configuration Options](./configuration-options.md) for details.
19
+
20
+ ## Properties
21
+
22
+ - **`container`** (`HTMLElement`): The HTML container element for the canvas.
23
+ - **`config`** (`CanvasConfig`): The configuration object for the canvas.
24
+ - **`svg`** (`SVGElement`): The main `<svg>` element that serves as the drawing surface.
25
+ - **`backgroundLayer`** (`SVGGElement`): An SVG group (`<g>`) for background elements like the grid.
26
+ - **`drawingLayer`** (`SVGGElement`): The SVG group where all drawing strokes are rendered.
27
+ - **`uiLayer`** (`SVGGElement`): The SVG group for UI elements that overlay the drawing, such as selection boxes.
28
+ - **`focusFrameLayer`** (`SVGGElement`): The SVG group dedicated to holding `FocusFrame` elements.
29
+ - **`strokes`** (`Map<string, Stroke>`): A map of all stroke objects on the canvas, with their unique IDs as keys.
30
+ - **`selectedStrokes`** (`Set<string>`): A set of the IDs of all currently selected strokes.
31
+ - **`toolManager`** (`ToolManager`): The instance managing the active drawing tools (Pencil, Eraser, etc.).
32
+ - **`eventManager`** (`EventManager`): The instance managing all user input events.
33
+ - **`cursor`** (`Cursor`): The instance that manages the custom cursor's appearance and behavior.
34
+ - **`toolbar`** (`Toolbar`): The UI toolbar for tool selection (if enabled in config).
35
+ - **`focusFrameManager`** (`FocusFrameManager`): The instance managing focus frames (if enabled in config).
36
+
37
+ ## Public Methods
38
+
39
+ ### Stroke Management
40
+
41
+ - **`addStroke(stroke)`**: Adds a `Stroke` object to the canvas and renders it. Emits `strokeAdded`.
42
+ - **`removeStroke(strokeId)`**: Removes a stroke from the canvas by its ID. Emits `strokeRemoved`.
43
+ - **`clear()`**: Removes all strokes from the canvas. Emits `cleared`.
44
+
45
+ ### Selection
46
+
47
+ - **`selectStrokes(strokeIds)`**: Programmatically selects a set of strokes by their IDs. Emits `selectionChanged`.
48
+
49
+ ### Coordinate Conversion
50
+
51
+ - **`clientToSVG(clientX, clientY)`**: Converts screen coordinates (e.g., from a mouse event) to the canvas's local SVG coordinate system.
52
+ - **Returns**: `{ x, y }` object.
53
+
54
+ ### Exporting
55
+
56
+ - **`exportSVG()`**: Exports the canvas drawing as a clean SVG string. UI layers (`uiLayer`, `focusFrameLayer`) are excluded.
57
+ - **`async exportImage([format], [quality])`**: Exports the canvas as a bitmap image.
58
+ - **`format`** (`string`): `'png'`, `'jpeg'`, or `'webp'`. Default: `'png'`.
59
+ - **`quality`** (`number`): For JPEG/WebP, a value from 0 to 1. Default: `1`.
60
+ - **Returns**: `Promise<Blob>` that resolves with the image data.
61
+
62
+ ### Canvas Management
63
+
64
+ - **`resize(width, height)`**: Resizes the canvas. Emits `resized`.
65
+ - **`toggleGrid()`**: Toggles the visibility of the background grid.
66
+ - **`getInfo()`**: Returns an object with status information (dimensions, stroke count, active tool, etc.).
67
+ - **`destroy()`**: Completely removes the canvas and all associated managers, event listeners, and DOM elements. Emits `destroyed`.
68
+
69
+ ### Event Handling (Pub/Sub)
70
+
71
+ - **`on(event, callback)`**: Registers a listener for a custom canvas event.
72
+ - **`off(event, callback)`**: Removes a previously registered event listener.
73
+ - **`emit(event, [data])`**: Dispatches a custom event to all registered listeners.
74
+
75
+ ## Emitted Events
76
+
77
+ The `omdCanvas` is an event emitter. You can listen for these events using the `on()` method.
78
+
79
+ - `strokeAdded`, `strokeRemoved`, `cleared`: Fired for stroke operations.
80
+ - `selectionChanged`: Fired when the set of selected strokes changes.
81
+ - `resized`: Fired when the canvas dimensions change.
82
+ - `pointerDown`, `pointerMove`, `pointerUp`, etc.: Raw input events, normalized by the `EventManager`.
83
+ - `focusFrameCreated`, `focusFrameRemoved`, etc.: Events from the `FocusFrameManager`.
84
84
  - `destroyed`: Fired when the `destroy()` method has completed.
@@ -1,113 +1,113 @@
1
- # omdConfigManager
2
-
3
- A module for managing the configuration of the OMD library. It handles loading settings from a JSON file, providing default values, and allowing runtime modifications.
4
-
5
- ## Overview
6
-
7
- The configuration is managed as a single JSON object. The system can be initialized with a path to a `omdConfig.json` file, or it will fall back to a default configuration. The manager supports both asynchronous and synchronous access to configuration values.
8
-
9
- ### Default Configuration
10
-
11
- If no `omdConfig.json` is found, the following default structure is used:
12
-
13
- ```json
14
- {
15
- "multiplication": {
16
- "symbol": "·",
17
- "forceImplicit": false,
18
- "implicitCombinations": {
19
- "constantVariable": true,
20
- "variableConstant": false,
21
- "parenthesisAfterVariable": true,
22
- "parenthesisAfterConstant": true,
23
- "variableParenthesis": true,
24
- "parenthesisParenthesis": true,
25
- "parenthesisVariable": true,
26
- "parenthesisConstant": true,
27
- "variableVariable": true
28
- }
29
- },
30
- "stepVisualizer": {
31
- "dotSizes": {
32
- "level0": 8,
33
- "level1": 6,
34
- "level2": 4
35
- },
36
- "fontWeights": {
37
- "level0": 400,
38
- "level1": 400,
39
- "level2": 400
40
- }
41
- }
42
- }
43
- ```
44
-
45
- ## Core Functions
46
-
47
- ### `async initializeConfig(configSource)`
48
-
49
- Loads the configuration from a file or object. It automatically detects the environment (browser or Node.js) to use the appropriate file loading mechanism (`fetch` or `fs`). This should be called once when your application starts.
50
-
51
- - **`configSource`** (`string` | `object`, optional): A path to a JSON configuration file or a configuration object to use directly.
52
- - **Returns**: `Promise<void>`
53
-
54
- ### `async getConfig()`
55
-
56
- Asynchronously gets the entire configuration object. If it hasn't been loaded yet, it will trigger the loading process with default settings.
57
-
58
- - **Returns**: `Promise<object>` - A promise that resolves to the configuration object.
59
-
60
- ### `getConfigSync()`
61
-
62
- Synchronously gets the configuration object.
63
-
64
- **Warning:** If called before `initializeConfig` has completed, this will return the default configuration, not the loaded one.
65
-
66
- - **Returns**: `object` - The configuration object.
67
-
68
- ### `setConfig(config)`
69
-
70
- Sets the entire configuration directly, merging it with the default values.
71
-
72
- - **`config`** (`object`): The configuration object to set.
73
-
74
- ### `getConfigValue(path)`
75
-
76
- Gets a specific configuration value using a dot-separated path (e.g., `'multiplication.symbol'`).
77
-
78
- - **Returns**: The value at the specified path.
79
-
80
- ### `setConfigValue(path, value)`
81
-
82
- Sets a specific configuration value using a dot-separated path.
83
-
84
- ## Utility Functions
85
-
86
- - **`getMultiplicationSymbol()`**: Returns the configured symbol for multiplication.
87
- - **`useImplicitMultiplication(combination)`**: Checks if implicit multiplication should be used, either globally or for a specific combination of operand types.
88
- - **`getDotRadius(level)`**: Gets the dot radius for a given step level in the `omdStepVisualizer`.
89
- - **`getFontWeight(level)`**: Gets the font weight for a given step level.
90
- - **`getDefaultConfig()`**: Returns a copy of the default configuration object.
91
- - **`isEnabled(category, setting)`**: Checks if a specific boolean setting is enabled.
92
- - **`updateConfig(category, setting, value)`**: Updates a top-level configuration setting.
93
- - **`resetConfig()`**: Throws an error. Direct file editing is required to reset the configuration.
94
- - **`async reloadConfig()`**: Forces a reload of the configuration from the original file path.
95
- - **`async getConfigAsync()`**: An alias for `getConfig()`.
96
-
97
- ## Example
98
-
99
- ```javascript
100
- import { initializeConfig, getConfigValue, setConfigValue } from '@teachinglab/omd';
101
-
102
- // Initialize at the start of your application
103
- (async () => {
104
- await initializeConfig();
105
-
106
- // Get a specific value
107
- const multSymbol = getConfigValue('multiplication.symbol'); // -> '·'
108
-
109
- // Change a value at runtime
110
- setConfigValue('multiplication.symbol', '*');
111
- const newSymbol = getConfigValue('multiplication.symbol'); // -> '*'
112
- })();
1
+ # omdConfigManager
2
+
3
+ A module for managing the configuration of the OMD library. It handles loading settings from a JSON file, providing default values, and allowing runtime modifications.
4
+
5
+ ## Overview
6
+
7
+ The configuration is managed as a single JSON object. The system can be initialized with a path to a `omdConfig.json` file, or it will fall back to a default configuration. The manager supports both asynchronous and synchronous access to configuration values.
8
+
9
+ ### Default Configuration
10
+
11
+ If no `omdConfig.json` is found, the following default structure is used:
12
+
13
+ ```json
14
+ {
15
+ "multiplication": {
16
+ "symbol": "·",
17
+ "forceImplicit": false,
18
+ "implicitCombinations": {
19
+ "constantVariable": true,
20
+ "variableConstant": false,
21
+ "parenthesisAfterVariable": true,
22
+ "parenthesisAfterConstant": true,
23
+ "variableParenthesis": true,
24
+ "parenthesisParenthesis": true,
25
+ "parenthesisVariable": true,
26
+ "parenthesisConstant": true,
27
+ "variableVariable": true
28
+ }
29
+ },
30
+ "stepVisualizer": {
31
+ "dotSizes": {
32
+ "level0": 8,
33
+ "level1": 6,
34
+ "level2": 4
35
+ },
36
+ "fontWeights": {
37
+ "level0": 400,
38
+ "level1": 400,
39
+ "level2": 400
40
+ }
41
+ }
42
+ }
43
+ ```
44
+
45
+ ## Core Functions
46
+
47
+ ### `async initializeConfig(configSource)`
48
+
49
+ Loads the configuration from a file or object. It automatically detects the environment (browser or Node.js) to use the appropriate file loading mechanism (`fetch` or `fs`). This should be called once when your application starts.
50
+
51
+ - **`configSource`** (`string` | `object`, optional): A path to a JSON configuration file or a configuration object to use directly.
52
+ - **Returns**: `Promise<void>`
53
+
54
+ ### `async getConfig()`
55
+
56
+ Asynchronously gets the entire configuration object. If it hasn't been loaded yet, it will trigger the loading process with default settings.
57
+
58
+ - **Returns**: `Promise<object>` - A promise that resolves to the configuration object.
59
+
60
+ ### `getConfigSync()`
61
+
62
+ Synchronously gets the configuration object.
63
+
64
+ **Warning:** If called before `initializeConfig` has completed, this will return the default configuration, not the loaded one.
65
+
66
+ - **Returns**: `object` - The configuration object.
67
+
68
+ ### `setConfig(config)`
69
+
70
+ Sets the entire configuration directly, merging it with the default values.
71
+
72
+ - **`config`** (`object`): The configuration object to set.
73
+
74
+ ### `getConfigValue(path)`
75
+
76
+ Gets a specific configuration value using a dot-separated path (e.g., `'multiplication.symbol'`).
77
+
78
+ - **Returns**: The value at the specified path.
79
+
80
+ ### `setConfigValue(path, value)`
81
+
82
+ Sets a specific configuration value using a dot-separated path.
83
+
84
+ ## Utility Functions
85
+
86
+ - **`getMultiplicationSymbol()`**: Returns the configured symbol for multiplication.
87
+ - **`useImplicitMultiplication(combination)`**: Checks if implicit multiplication should be used, either globally or for a specific combination of operand types.
88
+ - **`getDotRadius(level)`**: Gets the dot radius for a given step level in the `omdStepVisualizer`.
89
+ - **`getFontWeight(level)`**: Gets the font weight for a given step level.
90
+ - **`getDefaultConfig()`**: Returns a copy of the default configuration object.
91
+ - **`isEnabled(category, setting)`**: Checks if a specific boolean setting is enabled.
92
+ - **`updateConfig(category, setting, value)`**: Updates a top-level configuration setting.
93
+ - **`resetConfig()`**: Throws an error. Direct file editing is required to reset the configuration.
94
+ - **`async reloadConfig()`**: Forces a reload of the configuration from the original file path.
95
+ - **`async getConfigAsync()`**: An alias for `getConfig()`.
96
+
97
+ ## Example
98
+
99
+ ```javascript
100
+ import { initializeConfig, getConfigValue, setConfigValue } from '@teachinglab/omd';
101
+
102
+ // Initialize at the start of your application
103
+ (async () => {
104
+ await initializeConfig();
105
+
106
+ // Get a specific value
107
+ const multSymbol = getConfigValue('multiplication.symbol'); // -> '·'
108
+
109
+ // Change a value at runtime
110
+ setConfigValue('multiplication.symbol', '*');
111
+ const newSymbol = getConfigValue('multiplication.symbol'); // -> '*'
112
+ })();
113
113
  ```