@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.
- 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 +546 -546
- package/omd/core/omdUtilities.js +113 -113
- package/omd/display/omdDisplay.js +969 -962
- 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
package/docs/api/omdUtilities.md
CHANGED
|
@@ -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.
|
package/docs/api/selectTool.md
CHANGED
|
@@ -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.
|