@teachinglab/omd 0.6.1 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +257 -251
- package/README.old.md +137 -137
- package/canvas/core/canvasConfig.js +202 -202
- package/canvas/drawing/segment.js +167 -167
- package/canvas/drawing/stroke.js +385 -385
- package/canvas/events/eventManager.js +444 -444
- package/canvas/events/pointerEventHandler.js +262 -262
- package/canvas/index.js +48 -48
- package/canvas/tools/PointerTool.js +71 -71
- package/canvas/tools/tool.js +222 -222
- package/canvas/utils/boundingBox.js +377 -377
- package/canvas/utils/mathUtils.js +258 -258
- package/docs/api/configuration-options.md +198 -198
- package/docs/api/eventManager.md +82 -82
- package/docs/api/focusFrameManager.md +144 -144
- package/docs/api/index.md +105 -105
- package/docs/api/main.md +62 -62
- package/docs/api/omdBinaryExpressionNode.md +86 -86
- package/docs/api/omdCanvas.md +83 -83
- package/docs/api/omdConfigManager.md +112 -112
- package/docs/api/omdConstantNode.md +52 -52
- package/docs/api/omdDisplay.md +87 -87
- package/docs/api/omdEquationNode.md +174 -174
- package/docs/api/omdEquationSequenceNode.md +258 -258
- package/docs/api/omdEquationStack.md +192 -192
- package/docs/api/omdFunctionNode.md +82 -82
- package/docs/api/omdGroupNode.md +78 -78
- package/docs/api/omdHelpers.md +87 -87
- package/docs/api/omdLeafNode.md +85 -85
- package/docs/api/omdNode.md +201 -201
- package/docs/api/omdOperationDisplayNode.md +117 -117
- package/docs/api/omdOperatorNode.md +91 -91
- package/docs/api/omdParenthesisNode.md +133 -133
- package/docs/api/omdPopup.md +191 -191
- package/docs/api/omdPowerNode.md +131 -131
- package/docs/api/omdRationalNode.md +144 -144
- package/docs/api/omdSequenceNode.md +128 -128
- package/docs/api/omdSimplification.md +78 -78
- package/docs/api/omdSqrtNode.md +144 -144
- package/docs/api/omdStepVisualizer.md +146 -146
- package/docs/api/omdStepVisualizerHighlighting.md +65 -65
- package/docs/api/omdStepVisualizerInteractiveSteps.md +108 -108
- package/docs/api/omdStepVisualizerLayout.md +70 -70
- package/docs/api/omdStepVisualizerNodeUtils.md +140 -140
- package/docs/api/omdStepVisualizerTextBoxes.md +76 -76
- package/docs/api/omdToolbar.md +130 -130
- package/docs/api/omdTranscriptionService.md +95 -95
- package/docs/api/omdTreeDiff.md +169 -169
- package/docs/api/omdUnaryExpressionNode.md +137 -137
- package/docs/api/omdUtilities.md +82 -82
- package/docs/api/omdVariableNode.md +123 -123
- package/docs/api/selectTool.md +74 -74
- package/docs/api/simplificationEngine.md +97 -97
- package/docs/api/simplificationRules.md +76 -76
- package/docs/api/simplificationUtils.md +64 -64
- package/docs/api/transcribe.md +43 -43
- package/docs/api-reference.md +85 -85
- package/docs/index.html +453 -453
- package/docs/index.md +38 -38
- package/docs/omd-objects.md +258 -258
- package/index.js +79 -79
- package/jsvg/index.js +3 -0
- package/jsvg/jsvg.js +898 -898
- package/jsvg/jsvgComponents.js +357 -358
- package/npm-docs/DOCUMENTATION_SUMMARY.md +220 -220
- package/npm-docs/README.md +251 -251
- package/npm-docs/api/api-reference.md +85 -85
- package/npm-docs/api/configuration-options.md +198 -198
- package/npm-docs/api/eventManager.md +82 -82
- package/npm-docs/api/expression-nodes.md +561 -561
- package/npm-docs/api/focusFrameManager.md +144 -144
- package/npm-docs/api/index.md +105 -105
- package/npm-docs/api/main.md +62 -62
- package/npm-docs/api/omdBinaryExpressionNode.md +86 -86
- package/npm-docs/api/omdCanvas.md +83 -83
- package/npm-docs/api/omdConfigManager.md +112 -112
- package/npm-docs/api/omdConstantNode.md +52 -52
- package/npm-docs/api/omdDisplay.md +87 -87
- package/npm-docs/api/omdEquationNode.md +174 -174
- package/npm-docs/api/omdEquationSequenceNode.md +258 -258
- package/npm-docs/api/omdEquationStack.md +192 -192
- package/npm-docs/api/omdFunctionNode.md +82 -82
- package/npm-docs/api/omdGroupNode.md +78 -78
- package/npm-docs/api/omdHelpers.md +87 -87
- package/npm-docs/api/omdLeafNode.md +85 -85
- package/npm-docs/api/omdNode.md +201 -201
- package/npm-docs/api/omdOperationDisplayNode.md +117 -117
- package/npm-docs/api/omdOperatorNode.md +91 -91
- package/npm-docs/api/omdParenthesisNode.md +133 -133
- package/npm-docs/api/omdPopup.md +191 -191
- package/npm-docs/api/omdPowerNode.md +131 -131
- package/npm-docs/api/omdRationalNode.md +144 -144
- package/npm-docs/api/omdSequenceNode.md +128 -128
- package/npm-docs/api/omdSimplification.md +78 -78
- package/npm-docs/api/omdSqrtNode.md +144 -144
- package/npm-docs/api/omdStepVisualizer.md +146 -146
- package/npm-docs/api/omdStepVisualizerHighlighting.md +65 -65
- package/npm-docs/api/omdStepVisualizerInteractiveSteps.md +108 -108
- package/npm-docs/api/omdStepVisualizerLayout.md +70 -70
- package/npm-docs/api/omdStepVisualizerNodeUtils.md +140 -140
- package/npm-docs/api/omdStepVisualizerTextBoxes.md +76 -76
- package/npm-docs/api/omdToolbar.md +130 -130
- package/npm-docs/api/omdTranscriptionService.md +95 -95
- package/npm-docs/api/omdTreeDiff.md +169 -169
- package/npm-docs/api/omdUnaryExpressionNode.md +137 -137
- package/npm-docs/api/omdUtilities.md +82 -82
- package/npm-docs/api/omdVariableNode.md +123 -123
- package/npm-docs/api/selectTool.md +74 -74
- package/npm-docs/api/simplificationEngine.md +97 -97
- package/npm-docs/api/simplificationRules.md +76 -76
- package/npm-docs/api/simplificationUtils.md +64 -64
- package/npm-docs/api/transcribe.md +43 -43
- package/npm-docs/guides/equations.md +854 -854
- package/npm-docs/guides/factory-functions.md +354 -354
- package/npm-docs/guides/getting-started.md +318 -318
- package/npm-docs/guides/quick-examples.md +525 -525
- package/npm-docs/guides/visualizations.md +682 -682
- package/npm-docs/index.html +12 -0
- package/npm-docs/json-schemas.md +826 -826
- package/omd/config/omdConfigManager.js +279 -267
- package/omd/core/index.js +158 -158
- package/omd/core/omdEquationStack.js +606 -547
- package/omd/core/omdUtilities.js +113 -113
- package/omd/display/omdDisplay.js +1045 -963
- package/omd/display/omdToolbar.js +501 -501
- package/omd/nodes/omdBinaryExpressionNode.js +459 -459
- package/omd/nodes/omdConstantNode.js +141 -141
- package/omd/nodes/omdEquationNode.js +1327 -1327
- package/omd/nodes/omdFunctionNode.js +351 -351
- package/omd/nodes/omdGroupNode.js +67 -67
- package/omd/nodes/omdLeafNode.js +76 -76
- package/omd/nodes/omdNode.js +556 -556
- package/omd/nodes/omdOperationDisplayNode.js +321 -321
- package/omd/nodes/omdOperatorNode.js +108 -108
- package/omd/nodes/omdParenthesisNode.js +292 -292
- package/omd/nodes/omdPowerNode.js +235 -235
- package/omd/nodes/omdRationalNode.js +295 -295
- package/omd/nodes/omdSqrtNode.js +307 -307
- package/omd/nodes/omdUnaryExpressionNode.js +227 -227
- package/omd/nodes/omdVariableNode.js +122 -122
- package/omd/simplification/omdSimplification.js +140 -140
- package/omd/simplification/omdSimplificationEngine.js +887 -887
- package/omd/simplification/package.json +5 -5
- package/omd/simplification/rules/binaryRules.js +1037 -1037
- package/omd/simplification/rules/functionRules.js +111 -111
- package/omd/simplification/rules/index.js +48 -48
- package/omd/simplification/rules/parenthesisRules.js +19 -19
- package/omd/simplification/rules/powerRules.js +143 -143
- package/omd/simplification/rules/rationalRules.js +725 -725
- package/omd/simplification/rules/sqrtRules.js +48 -48
- package/omd/simplification/rules/unaryRules.js +37 -37
- package/omd/simplification/simplificationRules.js +31 -31
- package/omd/simplification/simplificationUtils.js +1055 -1055
- package/omd/step-visualizer/omdStepVisualizer.js +947 -947
- package/omd/step-visualizer/omdStepVisualizerHighlighting.js +246 -246
- package/omd/step-visualizer/omdStepVisualizerLayout.js +892 -892
- package/omd/step-visualizer/omdStepVisualizerTextBoxes.js +200 -200
- package/omd/utils/aiNextEquationStep.js +106 -106
- package/omd/utils/omdNodeOverlay.js +638 -638
- package/omd/utils/omdPopup.js +1203 -1203
- package/omd/utils/omdStepVisualizerInteractiveSteps.js +684 -684
- package/omd/utils/omdStepVisualizerNodeUtils.js +267 -267
- package/omd/utils/omdTranscriptionService.js +123 -123
- package/omd/utils/omdTreeDiff.js +733 -733
- package/package.json +59 -57
- package/readme.html +184 -120
- package/src/index.js +74 -74
- package/src/json-schemas.md +576 -576
- package/src/omd-json-samples.js +147 -147
- package/src/omdApp.js +391 -391
- package/src/omdAppCanvas.js +335 -335
- package/src/omdBalanceHanger.js +199 -199
- package/src/omdColor.js +13 -13
- package/src/omdCoordinatePlane.js +541 -541
- package/src/omdExpression.js +115 -115
- package/src/omdFactory.js +150 -150
- package/src/omdFunction.js +114 -114
- package/src/omdMetaExpression.js +290 -290
- package/src/omdNaturalExpression.js +563 -563
- package/src/omdNode.js +383 -383
- package/src/omdNumber.js +52 -52
- package/src/omdNumberLine.js +114 -112
- package/src/omdNumberTile.js +118 -118
- package/src/omdOperator.js +72 -72
- package/src/omdPowerExpression.js +91 -91
- package/src/omdProblem.js +259 -259
- package/src/omdRatioChart.js +251 -251
- package/src/omdRationalExpression.js +114 -114
- package/src/omdSampleData.js +215 -215
- package/src/omdShapes.js +512 -512
- package/src/omdSpinner.js +151 -151
- package/src/omdString.js +49 -49
- package/src/omdTable.js +498 -498
- package/src/omdTapeDiagram.js +244 -244
- package/src/omdTerm.js +91 -91
- package/src/omdTileEquation.js +349 -349
- package/src/omdUtils.js +84 -84
- 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
|
```
|