@teachinglab/omd 0.6.1 → 0.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (198) hide show
  1. package/README.md +257 -251
  2. package/README.old.md +137 -137
  3. package/canvas/core/canvasConfig.js +202 -202
  4. package/canvas/drawing/segment.js +167 -167
  5. package/canvas/drawing/stroke.js +385 -385
  6. package/canvas/events/eventManager.js +444 -444
  7. package/canvas/events/pointerEventHandler.js +262 -262
  8. package/canvas/index.js +48 -48
  9. package/canvas/tools/PointerTool.js +71 -71
  10. package/canvas/tools/tool.js +222 -222
  11. package/canvas/utils/boundingBox.js +377 -377
  12. package/canvas/utils/mathUtils.js +258 -258
  13. package/docs/api/configuration-options.md +198 -198
  14. package/docs/api/eventManager.md +82 -82
  15. package/docs/api/focusFrameManager.md +144 -144
  16. package/docs/api/index.md +105 -105
  17. package/docs/api/main.md +62 -62
  18. package/docs/api/omdBinaryExpressionNode.md +86 -86
  19. package/docs/api/omdCanvas.md +83 -83
  20. package/docs/api/omdConfigManager.md +112 -112
  21. package/docs/api/omdConstantNode.md +52 -52
  22. package/docs/api/omdDisplay.md +87 -87
  23. package/docs/api/omdEquationNode.md +174 -174
  24. package/docs/api/omdEquationSequenceNode.md +258 -258
  25. package/docs/api/omdEquationStack.md +192 -192
  26. package/docs/api/omdFunctionNode.md +82 -82
  27. package/docs/api/omdGroupNode.md +78 -78
  28. package/docs/api/omdHelpers.md +87 -87
  29. package/docs/api/omdLeafNode.md +85 -85
  30. package/docs/api/omdNode.md +201 -201
  31. package/docs/api/omdOperationDisplayNode.md +117 -117
  32. package/docs/api/omdOperatorNode.md +91 -91
  33. package/docs/api/omdParenthesisNode.md +133 -133
  34. package/docs/api/omdPopup.md +191 -191
  35. package/docs/api/omdPowerNode.md +131 -131
  36. package/docs/api/omdRationalNode.md +144 -144
  37. package/docs/api/omdSequenceNode.md +128 -128
  38. package/docs/api/omdSimplification.md +78 -78
  39. package/docs/api/omdSqrtNode.md +144 -144
  40. package/docs/api/omdStepVisualizer.md +146 -146
  41. package/docs/api/omdStepVisualizerHighlighting.md +65 -65
  42. package/docs/api/omdStepVisualizerInteractiveSteps.md +108 -108
  43. package/docs/api/omdStepVisualizerLayout.md +70 -70
  44. package/docs/api/omdStepVisualizerNodeUtils.md +140 -140
  45. package/docs/api/omdStepVisualizerTextBoxes.md +76 -76
  46. package/docs/api/omdToolbar.md +130 -130
  47. package/docs/api/omdTranscriptionService.md +95 -95
  48. package/docs/api/omdTreeDiff.md +169 -169
  49. package/docs/api/omdUnaryExpressionNode.md +137 -137
  50. package/docs/api/omdUtilities.md +82 -82
  51. package/docs/api/omdVariableNode.md +123 -123
  52. package/docs/api/selectTool.md +74 -74
  53. package/docs/api/simplificationEngine.md +97 -97
  54. package/docs/api/simplificationRules.md +76 -76
  55. package/docs/api/simplificationUtils.md +64 -64
  56. package/docs/api/transcribe.md +43 -43
  57. package/docs/api-reference.md +85 -85
  58. package/docs/index.html +453 -453
  59. package/docs/index.md +38 -38
  60. package/docs/omd-objects.md +258 -258
  61. package/index.js +79 -79
  62. package/jsvg/index.js +3 -0
  63. package/jsvg/jsvg.js +898 -898
  64. package/jsvg/jsvgComponents.js +357 -358
  65. package/npm-docs/DOCUMENTATION_SUMMARY.md +220 -220
  66. package/npm-docs/README.md +251 -251
  67. package/npm-docs/api/api-reference.md +85 -85
  68. package/npm-docs/api/configuration-options.md +198 -198
  69. package/npm-docs/api/eventManager.md +82 -82
  70. package/npm-docs/api/expression-nodes.md +561 -561
  71. package/npm-docs/api/focusFrameManager.md +144 -144
  72. package/npm-docs/api/index.md +105 -105
  73. package/npm-docs/api/main.md +62 -62
  74. package/npm-docs/api/omdBinaryExpressionNode.md +86 -86
  75. package/npm-docs/api/omdCanvas.md +83 -83
  76. package/npm-docs/api/omdConfigManager.md +112 -112
  77. package/npm-docs/api/omdConstantNode.md +52 -52
  78. package/npm-docs/api/omdDisplay.md +87 -87
  79. package/npm-docs/api/omdEquationNode.md +174 -174
  80. package/npm-docs/api/omdEquationSequenceNode.md +258 -258
  81. package/npm-docs/api/omdEquationStack.md +192 -192
  82. package/npm-docs/api/omdFunctionNode.md +82 -82
  83. package/npm-docs/api/omdGroupNode.md +78 -78
  84. package/npm-docs/api/omdHelpers.md +87 -87
  85. package/npm-docs/api/omdLeafNode.md +85 -85
  86. package/npm-docs/api/omdNode.md +201 -201
  87. package/npm-docs/api/omdOperationDisplayNode.md +117 -117
  88. package/npm-docs/api/omdOperatorNode.md +91 -91
  89. package/npm-docs/api/omdParenthesisNode.md +133 -133
  90. package/npm-docs/api/omdPopup.md +191 -191
  91. package/npm-docs/api/omdPowerNode.md +131 -131
  92. package/npm-docs/api/omdRationalNode.md +144 -144
  93. package/npm-docs/api/omdSequenceNode.md +128 -128
  94. package/npm-docs/api/omdSimplification.md +78 -78
  95. package/npm-docs/api/omdSqrtNode.md +144 -144
  96. package/npm-docs/api/omdStepVisualizer.md +146 -146
  97. package/npm-docs/api/omdStepVisualizerHighlighting.md +65 -65
  98. package/npm-docs/api/omdStepVisualizerInteractiveSteps.md +108 -108
  99. package/npm-docs/api/omdStepVisualizerLayout.md +70 -70
  100. package/npm-docs/api/omdStepVisualizerNodeUtils.md +140 -140
  101. package/npm-docs/api/omdStepVisualizerTextBoxes.md +76 -76
  102. package/npm-docs/api/omdToolbar.md +130 -130
  103. package/npm-docs/api/omdTranscriptionService.md +95 -95
  104. package/npm-docs/api/omdTreeDiff.md +169 -169
  105. package/npm-docs/api/omdUnaryExpressionNode.md +137 -137
  106. package/npm-docs/api/omdUtilities.md +82 -82
  107. package/npm-docs/api/omdVariableNode.md +123 -123
  108. package/npm-docs/api/selectTool.md +74 -74
  109. package/npm-docs/api/simplificationEngine.md +97 -97
  110. package/npm-docs/api/simplificationRules.md +76 -76
  111. package/npm-docs/api/simplificationUtils.md +64 -64
  112. package/npm-docs/api/transcribe.md +43 -43
  113. package/npm-docs/guides/equations.md +854 -854
  114. package/npm-docs/guides/factory-functions.md +354 -354
  115. package/npm-docs/guides/getting-started.md +318 -318
  116. package/npm-docs/guides/quick-examples.md +525 -525
  117. package/npm-docs/guides/visualizations.md +682 -682
  118. package/npm-docs/index.html +12 -0
  119. package/npm-docs/json-schemas.md +826 -826
  120. package/omd/config/omdConfigManager.js +279 -267
  121. package/omd/core/index.js +158 -158
  122. package/omd/core/omdEquationStack.js +546 -546
  123. package/omd/core/omdUtilities.js +113 -113
  124. package/omd/display/omdDisplay.js +969 -962
  125. package/omd/display/omdToolbar.js +501 -501
  126. package/omd/nodes/omdBinaryExpressionNode.js +459 -459
  127. package/omd/nodes/omdConstantNode.js +141 -141
  128. package/omd/nodes/omdEquationNode.js +1327 -1327
  129. package/omd/nodes/omdFunctionNode.js +351 -351
  130. package/omd/nodes/omdGroupNode.js +67 -67
  131. package/omd/nodes/omdLeafNode.js +76 -76
  132. package/omd/nodes/omdNode.js +556 -556
  133. package/omd/nodes/omdOperationDisplayNode.js +321 -321
  134. package/omd/nodes/omdOperatorNode.js +108 -108
  135. package/omd/nodes/omdParenthesisNode.js +292 -292
  136. package/omd/nodes/omdPowerNode.js +235 -235
  137. package/omd/nodes/omdRationalNode.js +295 -295
  138. package/omd/nodes/omdSqrtNode.js +307 -307
  139. package/omd/nodes/omdUnaryExpressionNode.js +227 -227
  140. package/omd/nodes/omdVariableNode.js +122 -122
  141. package/omd/simplification/omdSimplification.js +140 -140
  142. package/omd/simplification/omdSimplificationEngine.js +887 -887
  143. package/omd/simplification/package.json +5 -5
  144. package/omd/simplification/rules/binaryRules.js +1037 -1037
  145. package/omd/simplification/rules/functionRules.js +111 -111
  146. package/omd/simplification/rules/index.js +48 -48
  147. package/omd/simplification/rules/parenthesisRules.js +19 -19
  148. package/omd/simplification/rules/powerRules.js +143 -143
  149. package/omd/simplification/rules/rationalRules.js +725 -725
  150. package/omd/simplification/rules/sqrtRules.js +48 -48
  151. package/omd/simplification/rules/unaryRules.js +37 -37
  152. package/omd/simplification/simplificationRules.js +31 -31
  153. package/omd/simplification/simplificationUtils.js +1055 -1055
  154. package/omd/step-visualizer/omdStepVisualizer.js +947 -947
  155. package/omd/step-visualizer/omdStepVisualizerHighlighting.js +246 -246
  156. package/omd/step-visualizer/omdStepVisualizerLayout.js +892 -892
  157. package/omd/step-visualizer/omdStepVisualizerTextBoxes.js +200 -200
  158. package/omd/utils/aiNextEquationStep.js +106 -106
  159. package/omd/utils/omdNodeOverlay.js +638 -638
  160. package/omd/utils/omdPopup.js +1203 -1203
  161. package/omd/utils/omdStepVisualizerInteractiveSteps.js +684 -684
  162. package/omd/utils/omdStepVisualizerNodeUtils.js +267 -267
  163. package/omd/utils/omdTranscriptionService.js +123 -123
  164. package/omd/utils/omdTreeDiff.js +733 -733
  165. package/package.json +59 -57
  166. package/readme.html +184 -120
  167. package/src/index.js +74 -74
  168. package/src/json-schemas.md +576 -576
  169. package/src/omd-json-samples.js +147 -147
  170. package/src/omdApp.js +391 -391
  171. package/src/omdAppCanvas.js +335 -335
  172. package/src/omdBalanceHanger.js +199 -199
  173. package/src/omdColor.js +13 -13
  174. package/src/omdCoordinatePlane.js +541 -541
  175. package/src/omdExpression.js +115 -115
  176. package/src/omdFactory.js +150 -150
  177. package/src/omdFunction.js +114 -114
  178. package/src/omdMetaExpression.js +290 -290
  179. package/src/omdNaturalExpression.js +563 -563
  180. package/src/omdNode.js +383 -383
  181. package/src/omdNumber.js +52 -52
  182. package/src/omdNumberLine.js +114 -112
  183. package/src/omdNumberTile.js +118 -118
  184. package/src/omdOperator.js +72 -72
  185. package/src/omdPowerExpression.js +91 -91
  186. package/src/omdProblem.js +259 -259
  187. package/src/omdRatioChart.js +251 -251
  188. package/src/omdRationalExpression.js +114 -114
  189. package/src/omdSampleData.js +215 -215
  190. package/src/omdShapes.js +512 -512
  191. package/src/omdSpinner.js +151 -151
  192. package/src/omdString.js +49 -49
  193. package/src/omdTable.js +498 -498
  194. package/src/omdTapeDiagram.js +244 -244
  195. package/src/omdTerm.js +91 -91
  196. package/src/omdTileEquation.js +349 -349
  197. package/src/omdUtils.js +84 -84
  198. package/src/omdVariable.js +51 -51
package/package.json CHANGED
@@ -1,57 +1,59 @@
1
- {
2
- "name": "@teachinglab/omd",
3
- "version": "0.6.1",
4
- "description": "omd",
5
- "main": "./index.js",
6
- "module": "./index.js",
7
- "type": "module",
8
- "exports": {
9
- ".": "./index.js",
10
- "./package.json": "./package.json"
11
- },
12
- "files": [
13
- "index.js",
14
- "src/",
15
- "omd/",
16
- "docs/",
17
- "canvas/",
18
- "jsvg/" ,
19
- "npm-docs/",
20
- "README.md"
21
- ],
22
- "keywords": [
23
- "math",
24
- "visualization",
25
- "equations",
26
- "educational",
27
- "canvas",
28
- "svg",
29
- "interactive"
30
- ],
31
- "author": "jaredschiffman",
32
- "license": "MIT",
33
- "dependencies": {
34
- "@teachinglab/jsvg": "^0.1.1",
35
- "mathjs": "^14.5.2"
36
- },
37
- "scripts": {
38
- "dev": "npm run build:docs && vite",
39
- "build": "vite build && node copy-static.js && node build-docs.js",
40
- "build:docs": "node build-docs.js",
41
- "build:static": "node copy-static.js",
42
- "dev:netlify": "npm run build:docs && netlify dev"
43
- },
44
- "publishConfig": {
45
- "access": "public"
46
- },
47
- "devDependencies": {
48
- "@netlify/vite-plugin": "^2.5.4",
49
- "dotenv": "^17.2.1",
50
- "express": "^4.18.2",
51
- "glob": "^11.0.3",
52
- "marked": "^16.2.1",
53
- "openai": "^4.28.0",
54
- "vite": "^5.4.0"
55
- }
56
- }
57
-
1
+ {
2
+ "name": "@teachinglab/omd",
3
+ "version": "0.6.2",
4
+ "description": "omd",
5
+ "main": "./index.js",
6
+ "module": "./index.js",
7
+ "type": "module",
8
+ "exports": {
9
+ ".": "./index.js",
10
+ "./package.json": "./package.json"
11
+ },
12
+ "files": [
13
+ "index.js",
14
+ "src/",
15
+ "omd/",
16
+ "docs/",
17
+ "canvas/",
18
+ "jsvg/" ,
19
+ "npm-docs/",
20
+ "README.md"
21
+ ],
22
+ "keywords": [
23
+ "math",
24
+ "visualization",
25
+ "equations",
26
+ "educational",
27
+ "canvas",
28
+ "svg",
29
+ "interactive"
30
+ ],
31
+ "author": "jaredschiffman",
32
+ "license": "MIT",
33
+ "dependencies": {
34
+ "@teachinglab/jsvg": "^0.1.1",
35
+ "mathjs": "^14.5.2",
36
+ "openai": "6.6.0"
37
+ },
38
+ "scripts": {
39
+ "dev": "npm run build:docs && vite",
40
+ "build": "vite build && node copy-static.js && node build-docs.js && node build-npm-docs.js",
41
+ "build:docs": "node build-docs.js",
42
+ "build:npm-docs": "node build-npm-docs.js",
43
+ "build:static": "node copy-static.js",
44
+ "dev:netlify": "npm run build:docs && npm run build:npm-docs && netlify dev"
45
+ },
46
+ "publishConfig": {
47
+ "access": "public"
48
+ },
49
+ "devDependencies": {
50
+ "@netlify/vite-plugin": "^2.5.4",
51
+ "dotenv": "^17.2.1",
52
+ "express": "^4.18.2",
53
+ "glob": "^11.0.3",
54
+ "marked": "^16.2.1",
55
+ "openai": "^4.28.0",
56
+ "vite": "^5.4.0"
57
+ }
58
+ }
59
+
package/readme.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>OMD (Open Math Display) - OMD Documentation</title>
6
+ <title>OMD (On-screen Math Display) - OMD Documentation</title>
7
7
  <style>
8
8
  body {
9
9
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
@@ -145,9 +145,100 @@
145
145
  </div>
146
146
 
147
147
  <div class="content">
148
- <h1 id="omd-open-math-display">OMD (Open Math Display)</h1>
149
- <p>OMD is a JavaScript library for creating interactive mathematical interfaces in web applications. Build everything from simple equation displays to complex step-by-step solution systems with rich visual feedback and user interaction.</p>
148
+ <h1 id="omd-on-screen-math-display">OMD (On-screen Math Display)</h1>
149
+ <blockquote>
150
+ <p>A JavaScript library for creating interactive mathematical interfaces in web applications</p>
151
+ </blockquote>
152
+ <p><a href="https://www.npmjs.com/package/@teachinglab/omd"><img src="https://img.shields.io/npm/v/@teachinglab/omd.svg" alt="npm version"></a><br><a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT"></a></p>
153
+ <p>OMD is a comprehensive JavaScript library for building rich, interactive mathematical experiences in the browser. From simple equation displays to complex step-by-step solution systems with full visual feedback and user interaction.</p>
150
154
  <p><img src="https://i.imgur.com/CdtEi33.png" alt="OMD Demo"></p>
155
+ <h2 id="full-documentation">📖 Full Documentation</h2>
156
+ <p><strong><a href="https://your-site.netlify.app/npm-docs/">View the complete documentation →</a></strong></p>
157
+ <p>The full documentation includes interactive examples, detailed API references, and comprehensive guides.</p>
158
+ <h2 id="quick-start">Quick Start</h2>
159
+ <h3 id="installation">Installation</h3>
160
+ <pre><code class="language-bash">npm install @teachinglab/omd
161
+ </code></pre>
162
+ <h3 id="basic-usage">Basic Usage</h3>
163
+ <pre><code class="language-javascript">import { omdDisplay } from &#39;@teachinglab/omd&#39;;
164
+
165
+ // Create a math display
166
+ const container = document.getElementById(&#39;math-container&#39;);
167
+ const display = new omdDisplay(container);
168
+
169
+ // Render an equation
170
+ display.render(&#39;2x + 3 = 11&#39;);
171
+ </code></pre>
172
+ <h2 id="documentation">Documentation</h2>
173
+ <h3 id="getting-started">Getting Started</h3>
174
+ <ul>
175
+ <li><strong><a href="npm-docs/guides/getting-started.html">Installation &amp; Setup</a></strong> - Get up and running with OMD</li>
176
+ <li><strong><a href="npm-docs/guides/quick-examples.html">Quick Examples</a></strong> - Common use cases and code snippets</li>
177
+ <li><strong><a href="npm-docs/guides/factory-functions.html">Factory Functions</a></strong> - Creating objects from JSON (AI-friendly)</li>
178
+ </ul>
179
+ <h3 id="core-concepts">Core Concepts</h3>
180
+ <h4 id="1-global-context-amp-configuration">1. Global Context &amp; Configuration</h4>
181
+ <p>Learn about the foundational systems that power OMD:</p>
182
+ <ul>
183
+ <li><strong><a href="npm-docs/api/omdConfigManager.html">Configuration Manager</a></strong> - Library-wide settings and theming</li>
184
+ <li><strong><a href="npm-docs/api/configuration-options.html">Configuration Options</a></strong> - Complete list of available settings</li>
185
+ <li><strong><a href="npm-docs/api/omdDisplay.html">Display System</a></strong> - Main rendering engine</li>
186
+ <li><strong><a href="npm-docs/api/omdCanvas.html">Canvas System</a></strong> - Multi-expression layout manager</li>
187
+ <li><strong><a href="npm-docs/api/eventManager.html">Event Manager</a></strong> - Event handling and coordination</li>
188
+ <li><strong><a href="npm-docs/api/omdHelpers.html">Helpers &amp; Utilities</a></strong> - Utility functions for common tasks</li>
189
+ </ul>
190
+ <h4 id="2-visualizations">2. Visualizations</h4>
191
+ <p>Interactive visual components for teaching and learning:</p>
192
+ <h5 id="number-amp-ratio-visualizations">Number &amp; Ratio Visualizations</h5>
193
+ <ul>
194
+ <li><strong><a href="npm-docs/guides/visualizations.md#number-line">Number Line</a></strong> - <code>omdNumberLine</code> - Interactive number lines with dots and labels</li>
195
+ <li><strong><a href="npm-docs/guides/visualizations.md#number-tiles">Number Tiles</a></strong> - <code>omdNumberTile</code> - Visual counting tiles with dots</li>
196
+ <li><strong><a href="npm-docs/guides/visualizations.md#tape-diagrams">Tape Diagrams</a></strong> - <code>omdTapeDiagram</code> - Part-whole relationship diagrams</li>
197
+ <li><strong><a href="npm-docs/guides/visualizations.md#ratio-charts">Ratio Charts</a></strong> - <code>omdRatioChart</code> - Pie and bar chart ratio visualizations</li>
198
+ <li><strong><a href="npm-docs/guides/visualizations.md#balance-hanger">Balance Hanger</a></strong> - <code>omdBalanceHanger</code> - Balance scale visualizations</li>
199
+ </ul>
200
+ <h5 id="graphing-amp-geometry">Graphing &amp; Geometry</h5>
201
+ <ul>
202
+ <li><strong><a href="npm-docs/guides/visualizations.md#coordinate-plane">Coordinate Plane</a></strong> - <code>omdCoordinatePlane</code> - 2D graphing with functions and shapes</li>
203
+ <li><strong><a href="npm-docs/guides/visualizations.md#shapes">Shapes</a></strong> - <code>omdShapes</code> - Geometric shapes (circles, rectangles, polygons, triangles)</li>
204
+ <li><strong><a href="npm-docs/guides/visualizations.md#spinner">Spinner</a></strong> - <code>omdSpinner</code> - Interactive circular spinners</li>
205
+ </ul>
206
+ <h5 id="data-display">Data Display</h5>
207
+ <ul>
208
+ <li><strong><a href="npm-docs/guides/visualizations.md#tables">Tables</a></strong> - <code>omdTable</code> - Data tables with customizable styling</li>
209
+ <li><strong><a href="npm-docs/guides/visualizations.md#function-graphs">Function Graphs</a></strong> - Plotting mathematical functions</li>
210
+ </ul>
211
+ <h4 id="3-equations-amp-expressions">3. Equations &amp; Expressions</h4>
212
+ <p>The heart of mathematical notation and manipulation:</p>
213
+ <h5 id="core-expression-components">Core Expression Components</h5>
214
+ <ul>
215
+ <li><strong><a href="npm-docs/api/expression-nodes.html">Expression Nodes</a></strong> - Understanding the node tree structure and omdEquationNode class</li>
216
+ <li><strong><a href="npm-docs/api/omdEquationNode.html">omdEquationNode</a></strong> - Complete equations with manipulation methods (e.g., <code>2x + 3 = 11</code>)</li>
217
+ <li><strong><a href="npm-docs/guides/equations.md#expressions">omdExpression</a></strong> - Mathematical expressions (e.g., <code>3x² + 5</code>)</li>
218
+ <li><strong><a href="npm-docs/guides/equations.md#terms">omdTerm</a></strong> - Individual terms (e.g., <code>3x²</code>)</li>
219
+ <li><strong><a href="npm-docs/guides/equations.md#numbers">omdNumber</a></strong> - Numeric constants</li>
220
+ <li><strong><a href="npm-docs/guides/equations.md#variables">omdVariable</a></strong> - Variables (e.g., <code>x</code>, <code>y</code>)</li>
221
+ <li><strong><a href="npm-docs/guides/equations.md#operators">omdOperator</a></strong> - Mathematical operators (+, -, ×, ÷)</li>
222
+ </ul>
223
+ <h5 id="advanced-expression-types">Advanced Expression Types</h5>
224
+ <ul>
225
+ <li><strong><a href="npm-docs/guides/equations.md#power-expressions">omdPowerExpression</a></strong> - Exponentiation (e.g., <code>(x+1)²</code>)</li>
226
+ <li><strong><a href="npm-docs/guides/equations.md#rational-expressions">omdRationalExpression</a></strong> - Fractions (e.g., <code>(x+1)/(x-1)</code>)</li>
227
+ <li><strong><a href="npm-docs/guides/equations.md#functions">omdFunction</a></strong> - Mathematical functions (e.g., <code>f(x) = 2x + 1</code>)</li>
228
+ <li><strong><a href="npm-docs/guides/equations.md#tile-equations">omdTileEquation</a></strong> - Visual tile-based equations</li>
229
+ </ul>
230
+ <h5 id="step-by-step-solutions">Step-by-Step Solutions</h5>
231
+ <ul>
232
+ <li><strong><a href="npm-docs/api/omdEquationStack.html">Equation Stack</a></strong> - Sequenced solution steps</li>
233
+ <li><strong><a href="npm-docs/api/omdStepVisualizer.html">Step Visualizer</a></strong> - Interactive step visualization</li>
234
+ <li><strong><a href="npm-docs/api/omdSimplification.html">Simplification Engine</a></strong> - Rule-based expression simplification</li>
235
+ <li><strong><a href="npm-docs/api/simplificationRules.html">Simplification Rules</a></strong> - Available transformation rules</li>
236
+ </ul>
237
+ <h3 id="complete-api-reference">Complete API Reference</h3>
238
+ <ul>
239
+ <li><strong><a href="npm-docs/api/api-reference.html">Full API Documentation</a></strong> - Complete reference for all components</li>
240
+ <li><strong><a href="npm-docs/json-schemas.html">JSON Schemas</a></strong> - Detailed JSON structure for all components</li>
241
+ </ul>
151
242
  <h2 id="features">Features</h2>
152
243
  <h3 id="interactive-math-rendering"><strong>Interactive Math Rendering</strong></h3>
153
244
  <ul>
@@ -173,145 +264,118 @@
173
264
  <li>Progressive step revelation</li>
174
265
  <li>Visual operation feedback and highlighting</li>
175
266
  </ul>
176
- <h2 id="installation">Installation</h2>
177
- <h3 id="npm">npm</h3>
178
- <pre><code class="language-bash">npm install @teachinglab/omd
267
+ <h2 id="guides">Guides</h2>
268
+ <h3 id="by-use-case">By Use Case</h3>
269
+ <ul>
270
+ <li><strong><a href="npm-docs/guides/equations.html">Creating Equations</a></strong> - Work with equations and expressions</li>
271
+ <li><strong><a href="npm-docs/guides/visualizations.html">Visualizations Guide</a></strong> - All visualization components</li>
272
+ <li><strong><a href="npm-docs/guides/step-by-step.html">Step-by-Step Solutions</a></strong> - Building interactive solutions</li>
273
+ <li><strong><a href="npm-docs/guides/interactive-features.html">Interactive Features</a></strong> - Drag &amp; drop, toolbars, and more</li>
274
+ </ul>
275
+ <h3 id="advanced-topics">Advanced Topics</h3>
276
+ <ul>
277
+ <li><strong><a href="npm-docs/guides/expression-tree.html">Expression Tree Structure</a></strong> - Understanding the AST</li>
278
+ <li><strong><a href="npm-docs/guides/custom-rules.html">Custom Simplification Rules</a></strong> - Extending the simplification engine</li>
279
+ <li><strong><a href="npm-docs/guides/theming.html">Theming &amp; Styling</a></strong> - Customizing appearance</li>
280
+ <li><strong><a href="npm-docs/guides/performance.html">Performance Optimization</a></strong> - Best practices for large applications</li>
281
+ </ul>
282
+ <h2 id="architecture">Architecture</h2>
283
+ <pre><code>OMD Library Structure
284
+ ├── Core Systems
285
+ │ ├── Configuration Manager (Global settings)
286
+ │ ├── Display System (Rendering engine)
287
+ │ └── Event Manager (Coordination)
288
+ │
289
+ ├── Visualizations
290
+ │ ├── Number Visualizations (Number line, tiles, tape diagrams)
291
+ │ ├── Graphing (Coordinate plane, functions)
292
+ │ └── Data Display (Tables, charts)
293
+ │
294
+ └── Equations &amp; Expressions
295
+ ├── Node System (Expression tree)
296
+ ├── Equation Components (Equations, terms, operators)
297
+ ├── Advanced Expressions (Powers, rationals, functions)
298
+ └── Step-by-Step System (Simplification, visualization)
179
299
  </code></pre>
180
- <h2 id="basic-usage">Basic Usage</h2>
181
- <pre><code class="language-javascript">import { omdDisplay } from &#39;@teachinglab/omd&#39;;
300
+ <h2 id="examples">Examples</h2>
301
+ <h3 id="creating-objects-from-json-factory-method">Creating Objects from JSON (Factory Method)</h3>
302
+ <pre><code class="language-javascript">import { createFromJSON } from &#39;@teachinglab/omd&#39;;
182
303
 
183
- // Create a math display
184
- const container = document.getElementById(&#39;math-container&#39;);
185
- const display = new omdDisplay(container);
304
+ // AI-generated or dynamic JSON data
305
+ const jsonData = {
306
+ omdType: &#39;numberLine&#39;,
307
+ min: 0,
308
+ max: 10,
309
+ dotValues: [2, 5, 8]
310
+ };
186
311
 
187
- // Render an equation
188
- display.render(&#39;2x + 3 = 11&#39;);
312
+ // Create the object - no switch statement needed!
313
+ const numberLine = createFromJSON(jsonData);
314
+ </code></pre>
315
+ <h3 id="basic-equation">Basic Equation</h3>
316
+ <pre><code class="language-javascript">import { omdDisplay, omdEquationNode } from &#39;@teachinglab/omd&#39;;
317
+
318
+ const display = new omdDisplay(document.getElementById(&#39;container&#39;));
319
+ const equation = omdEquationNode.fromString(&#39;2x + 3 = 11&#39;);
320
+ display.render(equation);
189
321
  </code></pre>
190
- <h3 id="step-by-step-solutions">Step-by-Step Solutions</h3>
191
- <pre><code class="language-javascript">import { omdEquationStack, omdEquationNode } from &#39;@teachinglab/omd&#39;;
322
+ <h3 id="step-by-step-solution">Step-by-Step Solution</h3>
323
+ <pre><code class="language-javascript">import { omdEquationStack } from &#39;@teachinglab/omd&#39;;
192
324
 
193
- // Create solution steps
194
325
  const steps = [
195
- omdEquationNode.fromString(&#39;2x + 3 = 11&#39;),
196
- omdEquationNode.fromString(&#39;2x = 8&#39;),
197
- omdEquationNode.fromString(&#39;x = 4&#39;)
326
+ &#39;2x + 3 = 11&#39;,
327
+ &#39;2x = 8&#39;,
328
+ &#39;x = 4&#39;
198
329
  ];
199
330
 
200
- // Create interactive equation stack
201
- const stack = new omdEquationStack(steps, {
331
+ const stack = new omdEquationStack(steps.map(s =&gt;
332
+ omdEquationNode.fromString(s)
333
+ ), {
202
334
  toolbar: true,
203
335
  stepVisualizer: true
204
336
  });
205
337
 
206
338
  display.render(stack);
207
339
  </code></pre>
208
- <h2 id="core-concepts">Core Concepts</h2>
209
- <h3 id="nodes-building-blocks"><strong>Nodes</strong> - Building Blocks</h3>
210
- <p>Every mathematical element is a node in an expression tree:</p>
211
- <ul>
212
- <li><code>omdEquationNode</code> - Complete equations (e.g., <code>2x + 3 = 11</code>)</li>
213
- <li><code>omdConstantNode</code> - Numbers (e.g., <code>5</code>, <code>3.14</code>)</li>
214
- <li><code>omdVariableNode</code> - Variables (e.g., <code>x</code>, <code>y</code>)</li>
215
- <li><code>omdBinaryExpressionNode</code> - Operations (e.g., <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>)</li>
216
- </ul>
217
- <h3 id="sequences-solution-steps"><strong>Sequences</strong> - Solution Steps</h3>
218
- <p>Group related equations for step-by-step solving:</p>
219
- <pre><code class="language-javascript">const sequence = new omdEquationSequenceNode([
220
- equation1, equation2, equation3
221
- ]);
222
- </code></pre>
223
- <h3 id="display-rendering-engine"><strong>Display</strong> - Rendering Engine</h3>
224
- <p>Handles layout, centering, and visualization:</p>
225
- <pre><code class="language-javascript">const display = new omdDisplay(container, {
226
- fontSize: 36,
227
- centerContent: true
340
+ <h3 id="coordinate-plane-with-function">Coordinate Plane with Function</h3>
341
+ <pre><code class="language-javascript">import { omdCoordinatePlane } from &#39;@teachinglab/omd&#39;;
342
+
343
+ const plane = new omdCoordinatePlane();
344
+ plane.loadFromJSON({
345
+ xMin: -10, xMax: 10,
346
+ yMin: -10, yMax: 10,
347
+ graphEquations: [
348
+ { equation: &#39;y = x^2 - 4&#39;, color: &#39;#e11d48&#39;, strokeWidth: 2 }
349
+ ]
228
350
  });
351
+
352
+ display.render(plane);
229
353
  </code></pre>
230
- <h2 id="interactive-examples">Interactive Examples</h2>
231
- <p>Explore OMD&#39;s capabilities with our comprehensive examples:</p>
232
- <table>
233
- <thead>
234
- <tr>
235
- <th>Category</th>
236
- <th>Example</th>
237
- <th>Description</th>
238
- </tr>
239
- </thead>
240
- <tbody><tr>
241
- <td><strong>Getting Started</strong></td>
242
- <td><a href="examples/minimal.html">Minimal</a></td>
243
- <td>Basic equation rendering</td>
244
- </tr>
245
- <tr>
246
- <td></td>
247
- <td><a href="examples/simple-usage.html">Simple Usage</a></td>
248
- <td>Interactive features</td>
249
- </tr>
250
- <tr>
251
- <td><strong>Advanced</strong></td>
252
- <td><a href="examples/expression-playground.html">Expression Playground</a></td>
253
- <td>Full manipulation interface</td>
254
- </tr>
255
- <tr>
256
- <td></td>
257
- <td><a href="examples/drag-and-drop-playground.html">Drag &amp; Drop</a></td>
258
- <td>Intuitive interaction</td>
259
- </tr>
260
- <tr>
261
- <td><strong>Educational</strong></td>
262
- <td><a href="examples/worked-solution.html">Worked Solutions</a></td>
263
- <td>Step-by-step solving</td>
264
- </tr>
265
- <tr>
266
- <td></td>
267
- <td><a href="examples/kids-interactive.html">Kids Interactive</a></td>
268
- <td>Child-friendly interface</td>
269
- </tr>
270
- <tr>
271
- <td><strong>Components</strong></td>
272
- <td><a href="examples/equation-stack-test.html">Equation Stack</a></td>
273
- <td>Stacked equations</td>
274
- </tr>
275
- <tr>
276
- <td></td>
277
- <td><a href="examples/canvas-multiple-nodes.html">Canvas Demo</a></td>
278
- <td>Multi-expression layouts</td>
279
- </tr>
280
- </tbody></table>
281
- <p><strong><a href="examples/index.html">Browse All Examples</a></strong></p>
282
- <h2 id="documentation">Documentation</h2>
283
- <table>
284
- <thead>
285
- <tr>
286
- <th>Resource</th>
287
- <th>Description</th>
288
- </tr>
289
- </thead>
290
- <tbody><tr>
291
- <td><strong><a href="docs/api-reference.html">API Reference</a></strong></td>
292
- <td>Complete component documentation</td>
293
- </tr>
294
- <tr>
295
- <td><strong><a href="docs/user-guide.html">User Guide</a></strong></td>
296
- <td>Getting started and tutorials</td>
297
- </tr>
298
- </tbody></table>
299
- <h2 id="architecture">Architecture</h2>
300
- <pre><code>OMD Library Structure
301
- ├── Display Layer (omdDisplay)
302
- ├── Node System (Expression tree components)
303
- ├── UI Components (Toolbar, Step visualizer)
304
- ├── Core Systems (Simplification, Layout)
305
- └── Utilities (Configuration, Helpers)
354
+ <h3 id="number-line-visualization">Number Line Visualization</h3>
355
+ <pre><code class="language-javascript">import { omdNumberLine } from &#39;@teachinglab/omd&#39;;
356
+
357
+ const numberLine = new omdNumberLine();
358
+ numberLine.loadFromJSON({
359
+ min: 0,
360
+ max: 10,
361
+ dotValues: [2, 5, 8],
362
+ label: &#39;Number Line Example&#39;
363
+ });
364
+
365
+ display.render(numberLine);
306
366
  </code></pre>
307
367
  <h2 id="dependencies">Dependencies</h2>
308
368
  <ul>
309
- <li><strong>JSVG</strong> - High-performance SVG rendering</li>
369
+ <li><strong>JSVG</strong> (<code>@teachinglab/jsvg</code>) - High-performance SVG rendering</li>
310
370
  <li><strong>math.js</strong> - Mathematical expression parsing</li>
311
- <li><strong>Modern Browser</strong> - ES6 modules, SVG support</li>
371
+ <li><strong>Modern Browser</strong> - ES6 modules, SVG support required</li>
312
372
  </ul>
373
+ <h2 id="license">License</h2>
374
+ <p>MIT License - see <a href="../LICENSE">LICENSE</a> for details</p>
375
+ <h2 id="contributing">Contributing</h2>
376
+ <p>We welcome contributions! See our <a href="../CONTRIBUTING.html">contributing guidelines</a> for more information.</p>
313
377
  <hr>
314
- <p><strong>Ready to get started?</strong> Check out our <a href="examples/index.html">examples</a> or dive into the <a href="docs/api-reference.html">documentation</a>!</p>
378
+ <p><strong>Ready to get started?</strong> Check out the <a href="npm-docs/guides/getting-started.html">Getting Started Guide</a> or explore the <a href="npm-docs/json-schemas.html">JSON Schemas</a> for detailed component configurations.</p>
315
379
 
316
380
  </div>
317
381
 
package/src/index.js CHANGED
@@ -1,75 +1,75 @@
1
- // OMD Visualization Components
2
- export { omdTable } from './omdTable.js';
3
- export { omdBalanceHanger } from './omdBalanceHanger.js';
4
- export { omdCoordinatePlane } from './omdCoordinatePlane.js';
5
- export { omdTapeDiagram } from './omdTapeDiagram.js';
6
- export { omdTileEquation } from './omdTileEquation.js';
7
-
8
- // OMD Charts and Diagrams
9
- export { omdRatioChart } from './omdRatioChart.js';
10
- export { omdNumberLine } from './omdNumberLine.js';
11
- export { omdNumberTile } from './omdNumberTile.js';
12
-
13
- // OMD Mathematical Components
14
- export { omdEquation } from './omdEquation.js';
15
- export { omdExpression } from './omdExpression.js';
16
- export { omdTerm } from './omdTerm.js';
17
- export { omdNumber } from './omdNumber.js';
18
- export { omdVariable } from './omdVariable.js';
19
- export { omdPowerExpression } from './omdPowerExpression.js';
20
- export { omdRationalExpression } from './omdRationalExpression.js';
21
- export { omdFunction } from './omdFunction.js';
22
-
23
- // OMD Core Components
24
- export { omdApp } from './omdApp.js';
25
- export { omdAppCanvas } from './omdAppCanvas.js';
26
- export { omd } from './omd.js';
27
-
28
- // OMD Utilities and Helpers
29
- export { omdColor } from './omdColor.js';
30
- export { createFromJSON, getSupportedTypes, isTypeSupported } from './omdFactory.js';
31
-
32
- // OMD Shape Classes
33
- export {
34
- omdRightTriangle,
35
- omdIsoscelesTriangle,
36
- omdRectangle,
37
- omdEllipse,
38
- omdCircle,
39
- omdRegularPolygon,
40
- omdShapeLabelSet
41
- } from './omdShapes.js';
42
- export { omdSpinner } from './omdSpinner.js';
43
- export { omdProblem } from './omdProblem.js';
44
-
45
- // Default export for organized access
46
- export default {
47
- // Main visualizations (most commonly used)
48
- visualizations: {
49
- omdTable: () => import('./omdTable.js').then(m => m.omdTable),
50
- omdBalanceHanger: () => import('./omdBalanceHanger.js').then(m => m.omdBalanceHanger),
51
- omdCoordinatePlane: () => import('./omdCoordinatePlane.js').then(m => m.omdCoordinatePlane),
52
- omdTapeDiagram: () => import('./omdTapeDiagram.js').then(m => m.omdTapeDiagram),
53
- omdTileEquation: () => import('./omdTileEquation.js').then(m => m.omdTileEquation),
54
- omdRatioChart: () => import('./omdRatioChart.js').then(m => m.omdRatioChart),
55
- omdNumberLine: () => import('./omdNumberLine.js').then(m => m.omdNumberLine)
56
- },
57
-
58
- // Mathematical expressions
59
- expressions: {
60
- omdExpression: () => import('./omdExpression.js').then(m => m.omdExpression),
61
- omdEquation: () => import('./omdEquation.js').then(m => m.omdEquation),
62
- omdMetaExpression: () => import('./omdMetaExpression.js').then(m => m.omdMetaExpression),
63
- omdNaturalExpression: () => import('./omdNaturalExpression.js').then(m => m.omdNaturalExpression),
64
- omdPowerExpression: () => import('./omdPowerExpression.js').then(m => m.omdPowerExpression),
65
- omdRationalExpression: () => import('./omdRationalExpression.js').then(m => m.omdRationalExpression),
66
- omdFunction: () => import('./omdFunction.js').then(m => m.omdFunction)
67
- },
68
-
69
- // Core app components
70
- app: {
71
- omdApp: () => import('./omdApp.js').then(m => m.omdApp),
72
- omdAppCanvas: () => import('./omdAppCanvas.js').then(m => m.omdAppCanvas),
73
- omd: () => import('./omd.js').then(m => m.omd)
74
- }
1
+ // OMD Visualization Components
2
+ export { omdTable } from './omdTable.js';
3
+ export { omdBalanceHanger } from './omdBalanceHanger.js';
4
+ export { omdCoordinatePlane } from './omdCoordinatePlane.js';
5
+ export { omdTapeDiagram } from './omdTapeDiagram.js';
6
+ export { omdTileEquation } from './omdTileEquation.js';
7
+
8
+ // OMD Charts and Diagrams
9
+ export { omdRatioChart } from './omdRatioChart.js';
10
+ export { omdNumberLine } from './omdNumberLine.js';
11
+ export { omdNumberTile } from './omdNumberTile.js';
12
+
13
+ // OMD Mathematical Components
14
+ export { omdEquation } from './omdEquation.js';
15
+ export { omdExpression } from './omdExpression.js';
16
+ export { omdTerm } from './omdTerm.js';
17
+ export { omdNumber } from './omdNumber.js';
18
+ export { omdVariable } from './omdVariable.js';
19
+ export { omdPowerExpression } from './omdPowerExpression.js';
20
+ export { omdRationalExpression } from './omdRationalExpression.js';
21
+ export { omdFunction } from './omdFunction.js';
22
+
23
+ // OMD Core Components
24
+ export { omdApp } from './omdApp.js';
25
+ export { omdAppCanvas } from './omdAppCanvas.js';
26
+ export { omd } from './omd.js';
27
+
28
+ // OMD Utilities and Helpers
29
+ export { omdColor } from './omdColor.js';
30
+ export { createFromJSON, getSupportedTypes, isTypeSupported } from './omdFactory.js';
31
+
32
+ // OMD Shape Classes
33
+ export {
34
+ omdRightTriangle,
35
+ omdIsoscelesTriangle,
36
+ omdRectangle,
37
+ omdEllipse,
38
+ omdCircle,
39
+ omdRegularPolygon,
40
+ omdShapeLabelSet
41
+ } from './omdShapes.js';
42
+ export { omdSpinner } from './omdSpinner.js';
43
+ export { omdProblem } from './omdProblem.js';
44
+
45
+ // Default export for organized access
46
+ export default {
47
+ // Main visualizations (most commonly used)
48
+ visualizations: {
49
+ omdTable: () => import('./omdTable.js').then(m => m.omdTable),
50
+ omdBalanceHanger: () => import('./omdBalanceHanger.js').then(m => m.omdBalanceHanger),
51
+ omdCoordinatePlane: () => import('./omdCoordinatePlane.js').then(m => m.omdCoordinatePlane),
52
+ omdTapeDiagram: () => import('./omdTapeDiagram.js').then(m => m.omdTapeDiagram),
53
+ omdTileEquation: () => import('./omdTileEquation.js').then(m => m.omdTileEquation),
54
+ omdRatioChart: () => import('./omdRatioChart.js').then(m => m.omdRatioChart),
55
+ omdNumberLine: () => import('./omdNumberLine.js').then(m => m.omdNumberLine)
56
+ },
57
+
58
+ // Mathematical expressions
59
+ expressions: {
60
+ omdExpression: () => import('./omdExpression.js').then(m => m.omdExpression),
61
+ omdEquation: () => import('./omdEquation.js').then(m => m.omdEquation),
62
+ omdMetaExpression: () => import('./omdMetaExpression.js').then(m => m.omdMetaExpression),
63
+ omdNaturalExpression: () => import('./omdNaturalExpression.js').then(m => m.omdNaturalExpression),
64
+ omdPowerExpression: () => import('./omdPowerExpression.js').then(m => m.omdPowerExpression),
65
+ omdRationalExpression: () => import('./omdRationalExpression.js').then(m => m.omdRationalExpression),
66
+ omdFunction: () => import('./omdFunction.js').then(m => m.omdFunction)
67
+ },
68
+
69
+ // Core app components
70
+ app: {
71
+ omdApp: () => import('./omdApp.js').then(m => m.omdApp),
72
+ omdAppCanvas: () => import('./omdAppCanvas.js').then(m => m.omdAppCanvas),
73
+ omd: () => import('./omd.js').then(m => m.omd)
74
+ }
75
75
  };