@teachinglab/omd 0.3.8 → 0.4.0

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 (21) hide show
  1. package/canvas/core/canvasConfig.js +3 -3
  2. package/canvas/core/omdCanvas.js +479 -479
  3. package/canvas/events/eventManager.js +14 -4
  4. package/canvas/features/focusFrameManager.js +284 -286
  5. package/canvas/features/resizeHandleManager.js +482 -0
  6. package/canvas/tools/EraserTool.js +321 -322
  7. package/canvas/tools/PencilTool.js +321 -324
  8. package/canvas/tools/PointerTool.js +71 -0
  9. package/canvas/tools/SelectTool.js +902 -457
  10. package/canvas/tools/toolManager.js +389 -393
  11. package/canvas/ui/cursor.js +462 -437
  12. package/canvas/ui/toolbar.js +291 -290
  13. package/docs/omd-objects.md +258 -0
  14. package/jsvg/jsvg.js +898 -0
  15. package/jsvg/jsvgComponents.js +359 -0
  16. package/omd/nodes/omdEquationSequenceNode.js +1280 -1246
  17. package/package.json +1 -1
  18. package/src/json-schemas.md +546 -78
  19. package/src/omd.js +212 -109
  20. package/src/omdEquation.js +188 -162
  21. package/src/omdProblem.js +216 -11
package/src/omd.js CHANGED
@@ -1,109 +1,212 @@
1
-
2
-
3
- import { omdColor } from "./omdColor.js";
4
- import { omdNumber } from "./omdNumber.js";
5
- import { omdVariable } from "./omdVariable.js";
6
- import { omdTerm } from "./omdTerm.js";
7
- import { omdOperator } from "./omdOperator.js";
8
- import { omdExpression } from "./omdExpression.js";
9
- import { omdPowerExpression } from "./omdPowerExpression.js";
10
- import { omdRationalExpression } from "./omdRationalExpression.js";
11
- import { omdEquation } from "./omdEquation.js";
12
- import { omdFunction } from "./omdFunction.js";
13
- import { omdNumberLine } from "./omdNumberLine.js";
14
- import { omdTapeDiagram } from "./omdTapeDiagram.js";
15
- import { omdBalanceHanger } from "./omdBalanceHanger.js";
16
- import { omdNumberTile } from "./omdNumberTile.js";
17
- import { omdRatioChart } from "./omdRatioChart.js";
18
- import { omdCoordinatePlane } from "./omdCoordinatePlane.js";
19
- import { omdSpinner } from "./omdSpinner.js";
20
- import { jsvgContainer } from "@teachinglab/jsvg";
21
-
22
- export class omd extends jsvgContainer
23
- {
24
- constructor()
25
- {
26
- super();
27
-
28
-
29
- this.setViewbox( 400,400 );
30
- this.setBackgroundColor( "#F8F8F4" );
31
- }
32
-
33
- setCanvasSize( W, H )
34
- {
35
- this.setViewbox( W,H );
36
- }
37
-
38
- setBackgroundColor( C )
39
- {
40
- this.svgObject.style.backgroundColor = C;
41
- }
42
-
43
- generateGraphic( jsonData )
44
- {
45
- this.removeAllChildren();
46
-
47
- var N = null;
48
-
49
- if ( jsonData.omdType == "number" ) { var N = new omdNumber(); }
50
-
51
- if ( jsonData.omdType == "variable" ) { var N = new omdVariable(); }
52
-
53
- if ( jsonData.omdType == "operator" ) { var N = new omdOperator(); }
54
-
55
- if ( jsonData.omdType == "term" ) { var N = new omdTerm(); }
56
-
57
- if ( jsonData.omdType == "expression" ) { var N = new omdExpression(); }
58
-
59
- if ( jsonData.omdType == "powerExpression" ) { var N = new omdPowerExpression(); }
60
-
61
- if ( jsonData.omdType == "rationalExpression" ) { var N = new omdRationalExpression(); }
62
-
63
- if ( jsonData.omdType == "function" ) { var N = new omdFunction(); }
64
-
65
- if ( jsonData.omdType == "equation" ) { var N = new omdEquation(); }
66
-
67
- if ( jsonData.omdType == "numberLine" ) { var N = new omdNumberLine(); }
68
-
69
- if ( jsonData.omdType == "balanceHanger" )
70
- {
71
- var N = new omdBalanceHanger();
72
- N.setPosition( 150, 0 );
73
- }
74
-
75
- if ( jsonData.omdType == "tapeDiagram" ) { var N = new omdTapeDiagram(); }
76
-
77
- if ( jsonData.omdType == "numberTile" ) { var N = new omdNumberTile(); }
78
-
79
- if ( jsonData.omdType == "ratioChart" ) { var N = new omdRatioChart(); }
80
-
81
- if ( jsonData.omdType == "coordinatePlane" ) { var N = new omdCoordinatePlane(); }
82
-
83
- if ( jsonData.omdType == "spinner" ) { var N = new omdSpinner(); }
84
-
85
- N.setPosition( 0,30 );
86
-
87
- // load from json
88
- N.loadFromJSON( jsonData );
89
-
90
- // add to the AI holder
91
- this.addChild( N );
92
- }
93
-
94
- getSVG()
95
- {
96
- return this.svgObject;
97
- }
98
-
99
- getDiv()
100
- {
101
- const newDiv = document.createElement("div");
102
- newDiv.style.width = this.width + 'px';
103
- newDiv.style.height = this.height + 'px';
104
- newDiv.style.overflow = 'visible'
105
- newDiv.appendChild( this.svgObject );
106
- return newDiv;
107
- }
108
- }
109
-
1
+
2
+
3
+ import { omdColor } from "./omdColor.js";
4
+ import { omdNumber } from "./omdNumber.js";
5
+ import { omdVariable } from "./omdVariable.js";
6
+ import { omdTerm } from "./omdTerm.js";
7
+ import { omdOperator } from "./omdOperator.js";
8
+ import { omdExpression } from "./omdExpression.js";
9
+ import { omdPowerExpression } from "./omdPowerExpression.js";
10
+ import { omdRationalExpression } from "./omdRationalExpression.js";
11
+ import { omdEquation } from "./omdEquation.js";
12
+ import { omdEquationNode } from "../omd/nodes/omdEquationNode.js";
13
+ import { omdFunction } from "./omdFunction.js";
14
+ import { omdNumberLine } from "./omdNumberLine.js";
15
+ import { omdTapeDiagram } from "./omdTapeDiagram.js";
16
+ import { omdBalanceHanger } from "./omdBalanceHanger.js";
17
+ import { omdNumberTile } from "./omdNumberTile.js";
18
+ import { omdRatioChart } from "./omdRatioChart.js";
19
+ import { omdCoordinatePlane } from "./omdCoordinatePlane.js";
20
+ import { omdSpinner } from "./omdSpinner.js";
21
+ import { omdTable } from "./omdTable.js";
22
+ import { omdTileEquation } from "./omdTileEquation.js";
23
+ import { omdRightTriangle } from "./omdShapes.js";
24
+ import { omdIsoscelesTriangle } from "./omdShapes.js";
25
+ import { omdRectangle } from "./omdShapes.js";
26
+ import { omdEllipse } from "./omdShapes.js";
27
+ import { omdCircle } from "./omdShapes.js";
28
+ import { omdRegularPolygon } from "./omdShapes.js";
29
+ import { jsvgContainer } from "@teachinglab/jsvg";
30
+
31
+ export class omd extends jsvgContainer
32
+ {
33
+ constructor()
34
+ {
35
+ super();
36
+
37
+
38
+ this.setViewbox( 400,400 );
39
+ this.setBackgroundColor( "#F8F8F4" );
40
+ }
41
+
42
+ setCanvasSize( W, H )
43
+ {
44
+ this.setViewbox( W,H );
45
+ }
46
+
47
+ setBackgroundColor( C )
48
+ {
49
+ this.svgObject.style.backgroundColor = C;
50
+ }
51
+
52
+ generateGraphic( jsonData )
53
+ {
54
+ this.removeAllChildren();
55
+
56
+ if (!jsonData || !jsonData.omdType) {
57
+ console.error('Invalid jsonData: missing omdType', jsonData);
58
+ return;
59
+ }
60
+
61
+ var N = null;
62
+ const omdType = jsonData.omdType;
63
+
64
+ // Use a switch statement for better performance and readability
65
+ switch (omdType) {
66
+ case "number":
67
+ N = new omdNumber();
68
+ break;
69
+ case "variable":
70
+ N = new omdVariable();
71
+ break;
72
+ case "operator":
73
+ N = new omdOperator();
74
+ break;
75
+ case "term":
76
+ N = new omdTerm();
77
+ break;
78
+ case "expression":
79
+ N = new omdExpression();
80
+ break;
81
+ case "powerExpression":
82
+ N = new omdPowerExpression();
83
+ break;
84
+ case "rationalExpression":
85
+ N = new omdRationalExpression();
86
+ break;
87
+ case "function":
88
+ N = new omdFunction();
89
+ break;
90
+ case "equation":
91
+ // ALWAYS prefer omdEquationNode for equations
92
+ if (jsonData.equation && typeof jsonData.equation === 'string' && jsonData.equation.includes('=')) {
93
+ try {
94
+ N = omdEquationNode.fromString(jsonData.equation);
95
+
96
+ // Properly initialize the equation node
97
+ if (typeof N.computeDimensions === 'function') {
98
+ N.computeDimensions();
99
+ }
100
+
101
+ if (typeof N.updateLayout === 'function') {
102
+ N.updateLayout();
103
+ }
104
+
105
+ N.setPosition(0, 30);
106
+ this.addChild(N);
107
+ return; // Early return - completely bypass old system
108
+ } catch (e) {
109
+ console.warn('⚠️ omdEquationNode failed, falling back to legacy omdEquation:', e);
110
+ }
111
+ }
112
+
113
+ // Legacy fallback for complex JSON structures
114
+ if (jsonData.leftExpression || jsonData.rightExpression) {
115
+ console.log('📝 Using legacy omdEquation for complex JSON structure');
116
+ N = new omdEquation();
117
+ } else {
118
+ console.warn('⚠️ Equation data missing both equation string and expression structure');
119
+ return;
120
+ }
121
+ break;
122
+ case "numberLine":
123
+ N = new omdNumberLine();
124
+ break;
125
+ case "balanceHanger":
126
+ N = new omdBalanceHanger();
127
+ break;
128
+ case "tapeDiagram":
129
+ N = new omdTapeDiagram();
130
+ break;
131
+ case "numberTile":
132
+ N = new omdNumberTile();
133
+ break;
134
+ case "ratioChart":
135
+ N = new omdRatioChart();
136
+ break;
137
+ case "coordinatePlane":
138
+ N = new omdCoordinatePlane();
139
+ break;
140
+ case "spinner":
141
+ N = new omdSpinner();
142
+ break;
143
+ case "table":
144
+ N = new omdTable();
145
+ break;
146
+ case "tileEquation":
147
+ N = new omdTileEquation();
148
+ break;
149
+ case "rightTriangle":
150
+ N = new omdRightTriangle();
151
+ break;
152
+ case "isoscelesTriangle":
153
+ N = new omdIsoscelesTriangle();
154
+ break;
155
+ case "rectangle":
156
+ N = new omdRectangle();
157
+ break;
158
+ case "ellipse":
159
+ N = new omdEllipse();
160
+ break;
161
+ case "circle":
162
+ N = new omdCircle();
163
+ break;
164
+ case "regularPolygon":
165
+ N = new omdRegularPolygon();
166
+ break;
167
+ default:
168
+ console.error(`Unsupported OMD type: ${omdType}. Available types: number, variable, operator, term, expression, powerExpression, rationalExpression, function, equation, numberLine, balanceHanger, tapeDiagram, numberTile, ratioChart, coordinatePlane, spinner, table, tileEquation, rightTriangle, isoscelesTriangle, rectangle, ellipse, circle, regularPolygon`);
169
+ return;
170
+ }
171
+
172
+ if (!N) {
173
+ console.error(`Failed to create OMD object for type: ${omdType}`);
174
+ return;
175
+ }
176
+
177
+ // Set default position
178
+ N.setPosition(0, 30);
179
+
180
+ // Special positioning for certain types
181
+ if (omdType === "balanceHanger") {
182
+ N.setPosition(150, 30);
183
+ }
184
+
185
+ try {
186
+ // Load from JSON
187
+ N.loadFromJSON(jsonData);
188
+ } catch (error) {
189
+ console.error(`Error loading JSON data for ${omdType}:`, error);
190
+ console.error('JSON data:', jsonData);
191
+ return;
192
+ }
193
+ // Add to the container
194
+ this.addChild(N);
195
+ }
196
+
197
+ getSVG()
198
+ {
199
+ return this.svgObject;
200
+ }
201
+
202
+ getDiv()
203
+ {
204
+ const newDiv = document.createElement("div");
205
+ newDiv.style.width = this.width + 'px';
206
+ newDiv.style.height = this.height + 'px';
207
+ newDiv.style.overflow = 'visible'
208
+ newDiv.appendChild( this.svgObject );
209
+ return newDiv;
210
+ }
211
+ }
212
+