@teachinglab/omd 0.3.8 → 0.3.9
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/canvas/core/canvasConfig.js +3 -3
- package/canvas/core/omdCanvas.js +479 -479
- package/canvas/events/eventManager.js +14 -4
- package/canvas/features/focusFrameManager.js +284 -286
- package/canvas/features/resizeHandleManager.js +482 -0
- package/canvas/index.js +2 -1
- package/canvas/tools/EraserTool.js +321 -322
- package/canvas/tools/PencilTool.js +321 -324
- package/canvas/tools/PointerTool.js +71 -0
- package/canvas/tools/SelectTool.js +902 -457
- package/canvas/tools/toolManager.js +389 -393
- package/canvas/ui/cursor.js +462 -437
- package/canvas/ui/toolbar.js +291 -290
- package/docs/omd-objects.md +258 -0
- package/jsvg/jsvg.js +898 -0
- package/jsvg/jsvgComponents.js +359 -0
- package/omd/nodes/omdEquationSequenceNode.js +1280 -1246
- package/package.json +1 -1
- package/src/json-schemas.md +546 -78
- package/src/omd.js +212 -109
- package/src/omdEquation.js +188 -162
- package/src/omdProblem.js +216 -11
package/src/omdEquation.js
CHANGED
|
@@ -1,163 +1,189 @@
|
|
|
1
|
-
|
|
2
|
-
import { omdColor } from "./omdColor.js";
|
|
3
|
-
import { jsvgLayoutGroup, jsvgGroup } from "@teachinglab/jsvg";
|
|
4
|
-
import { omdOperator } from "./omdOperator.js";
|
|
5
|
-
import { omdMetaExpression } from "./omdMetaExpression.js"
|
|
6
|
-
import { omdTerm } from "./omdTerm.js";
|
|
7
|
-
import { omdExpression } from "./omdExpression.js";
|
|
8
|
-
import { omdVariable } from "./omdVariable.js";
|
|
9
|
-
import { omdString } from "./omdString.js";
|
|
10
|
-
import { omdNumber } from "./omdNumber.js";
|
|
11
|
-
import { parseEquationString } from "./omdUtils.js";
|
|
12
|
-
|
|
13
|
-
export class omdEquation extends omdMetaExpression
|
|
14
|
-
{
|
|
15
|
-
constructor()
|
|
16
|
-
{
|
|
17
|
-
// initialization
|
|
18
|
-
super();
|
|
19
|
-
|
|
20
|
-
this.type = "omdPowerExpression";
|
|
21
|
-
|
|
22
|
-
this.leftExpression = null;
|
|
23
|
-
this.rightExpression = null;
|
|
24
|
-
|
|
25
|
-
this.centerEquation = true;
|
|
26
|
-
this.inset = 5;
|
|
27
|
-
|
|
28
|
-
this.equationStack = new jsvgLayoutGroup();
|
|
29
|
-
this.equationStack.setSpacer(-7);
|
|
30
|
-
this.addChild( this.equationStack );
|
|
31
|
-
|
|
32
|
-
this.leftHolder = new jsvgGroup();
|
|
33
|
-
this.equationStack.addChild( this.leftHolder );
|
|
34
|
-
|
|
35
|
-
this.equalSign = new omdOperator('=');
|
|
36
|
-
this.equationStack.addChild( this.equalSign );
|
|
37
|
-
|
|
38
|
-
this.rightHolder = new jsvgGroup();
|
|
39
|
-
this.equationStack.addChild( this.rightHolder );
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
// make an equation (x + 2) = (2x - 3)
|
|
43
|
-
|
|
44
|
-
loadFromJSON( data )
|
|
45
|
-
{
|
|
46
|
-
//
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
if (
|
|
70
|
-
else if (
|
|
71
|
-
else if (
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
this.
|
|
132
|
-
this.
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
this.
|
|
143
|
-
this.
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
this.
|
|
147
|
-
|
|
148
|
-
this.
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
this.
|
|
152
|
-
this.
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
1
|
+
|
|
2
|
+
import { omdColor } from "./omdColor.js";
|
|
3
|
+
import { jsvgLayoutGroup, jsvgGroup } from "@teachinglab/jsvg";
|
|
4
|
+
import { omdOperator } from "./omdOperator.js";
|
|
5
|
+
import { omdMetaExpression } from "./omdMetaExpression.js"
|
|
6
|
+
import { omdTerm } from "./omdTerm.js";
|
|
7
|
+
import { omdExpression } from "./omdExpression.js";
|
|
8
|
+
import { omdVariable } from "./omdVariable.js";
|
|
9
|
+
import { omdString } from "./omdString.js";
|
|
10
|
+
import { omdNumber } from "./omdNumber.js";
|
|
11
|
+
import { parseEquationString } from "./omdUtils.js";
|
|
12
|
+
|
|
13
|
+
export class omdEquation extends omdMetaExpression
|
|
14
|
+
{
|
|
15
|
+
constructor()
|
|
16
|
+
{
|
|
17
|
+
// initialization
|
|
18
|
+
super();
|
|
19
|
+
|
|
20
|
+
this.type = "omdPowerExpression";
|
|
21
|
+
|
|
22
|
+
this.leftExpression = null;
|
|
23
|
+
this.rightExpression = null;
|
|
24
|
+
|
|
25
|
+
this.centerEquation = true;
|
|
26
|
+
this.inset = 5;
|
|
27
|
+
|
|
28
|
+
this.equationStack = new jsvgLayoutGroup();
|
|
29
|
+
this.equationStack.setSpacer(-7);
|
|
30
|
+
this.addChild( this.equationStack );
|
|
31
|
+
|
|
32
|
+
this.leftHolder = new jsvgGroup();
|
|
33
|
+
this.equationStack.addChild( this.leftHolder );
|
|
34
|
+
|
|
35
|
+
this.equalSign = new omdOperator('=');
|
|
36
|
+
this.equationStack.addChild( this.equalSign );
|
|
37
|
+
|
|
38
|
+
this.rightHolder = new jsvgGroup();
|
|
39
|
+
this.equationStack.addChild( this.rightHolder );
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// make an equation (x + 2) = (2x - 3)
|
|
43
|
+
|
|
44
|
+
loadFromJSON( data )
|
|
45
|
+
{
|
|
46
|
+
// Helper function to fix operator symbols in termsAndOpers arrays
|
|
47
|
+
function fixOperatorSymbols(expressionData) {
|
|
48
|
+
if (expressionData && expressionData.termsAndOpers && Array.isArray(expressionData.termsAndOpers)) {
|
|
49
|
+
expressionData.termsAndOpers.forEach(item => {
|
|
50
|
+
if (item && item.omdType === 'operator' && item.symbol) {
|
|
51
|
+
// Ensure operator symbols are correct
|
|
52
|
+
if (item.symbol === '−') item.symbol = '-'; // Fix unicode minus
|
|
53
|
+
if (item.symbol === '＋') item.symbol = '+'; // Fix unicode plus
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
return expressionData;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// If explicit left/right JSON provided, build them according to their omdType
|
|
61
|
+
if ( typeof data.leftExpression != "undefined" && data.leftExpression )
|
|
62
|
+
{
|
|
63
|
+
let left = data.leftExpression;
|
|
64
|
+
// Fix operator symbols in left expression before processing
|
|
65
|
+
left = fixOperatorSymbols(left);
|
|
66
|
+
|
|
67
|
+
if ( left.omdType == "expression" ) this.leftExpression = new omdExpression();
|
|
68
|
+
else if ( left.omdType == "number" ) this.leftExpression = new omdNumber();
|
|
69
|
+
else if ( left.omdType == "variable" ) this.leftExpression = new omdVariable();
|
|
70
|
+
else if ( left.omdType == "term" ) this.leftExpression = new omdTerm();
|
|
71
|
+
else if ( left.omdType == "string" || typeof left == 'string' ) this.leftExpression = new omdExpression();
|
|
72
|
+
|
|
73
|
+
if (this.leftExpression && typeof this.leftExpression.loadFromJSON === 'function' && left && typeof left === 'object') {
|
|
74
|
+
this.leftExpression.loadFromJSON( left );
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
if (this.leftExpression) {
|
|
78
|
+
this.leftHolder.removeAllChildren();
|
|
79
|
+
this.leftHolder.addChild( this.leftExpression );
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
if ( typeof data.rightExpression != "undefined" && data.rightExpression )
|
|
84
|
+
{
|
|
85
|
+
let right = data.rightExpression;
|
|
86
|
+
// Fix operator symbols in right expression before processing
|
|
87
|
+
right = fixOperatorSymbols(right);
|
|
88
|
+
|
|
89
|
+
if ( right.omdType == "expression" ) this.rightExpression = new omdExpression();
|
|
90
|
+
else if ( right.omdType == "number" ) this.rightExpression = new omdNumber();
|
|
91
|
+
else if ( right.omdType == "variable" ) this.rightExpression = new omdVariable();
|
|
92
|
+
else if ( right.omdType == "term" ) this.rightExpression = new omdTerm();
|
|
93
|
+
else if ( right.omdType == "string" || typeof right == 'string' ) this.rightExpression = new omdExpression();
|
|
94
|
+
|
|
95
|
+
if (this.rightExpression && typeof this.rightExpression.loadFromJSON === 'function' && right && typeof right === 'object') {
|
|
96
|
+
this.rightExpression.loadFromJSON( right );
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
if (this.rightExpression) {
|
|
100
|
+
this.rightHolder.removeAllChildren();
|
|
101
|
+
this.rightHolder.addChild( this.rightExpression );
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// If no structured left/right provided but an `equation` string exists, try to parse it into structured expressions
|
|
106
|
+
if ( (!this.leftExpression || !this.rightExpression) && typeof data.equation === 'string' ) {
|
|
107
|
+
const parsed = parseEquationString(data.equation);
|
|
108
|
+
if ( parsed ) {
|
|
109
|
+
if (!this.leftExpression) this.leftExpression = new omdExpression();
|
|
110
|
+
if (!this.rightExpression) this.rightExpression = new omdExpression();
|
|
111
|
+
// pass parsed structured JSON to expressions
|
|
112
|
+
if (this.leftExpression && typeof this.leftExpression.loadFromJSON === 'function') this.leftExpression.loadFromJSON(parsed.leftExpression);
|
|
113
|
+
if (this.rightExpression && typeof this.rightExpression.loadFromJSON === 'function') this.rightExpression.loadFromJSON(parsed.rightExpression);
|
|
114
|
+
this.leftHolder.removeAllChildren(); this.leftHolder.addChild(this.leftExpression);
|
|
115
|
+
this.rightHolder.removeAllChildren(); this.rightHolder.addChild(this.rightExpression);
|
|
116
|
+
} else {
|
|
117
|
+
// fallback: treat sides as plain strings
|
|
118
|
+
const parts = String(data.equation || '').split('=');
|
|
119
|
+
const leftStr = (parts[0] || '').trim();
|
|
120
|
+
const rightStr = (parts[1] || '').trim();
|
|
121
|
+
if (!this.leftExpression) this.leftExpression = new omdString(leftStr || '');
|
|
122
|
+
if (!this.rightExpression) this.rightExpression = new omdString(rightStr || '');
|
|
123
|
+
if (this.leftExpression && typeof this.leftExpression.loadFromJSON === 'function' && typeof leftStr === 'string') this.leftExpression.loadFromJSON(leftStr);
|
|
124
|
+
if (this.rightExpression && typeof this.rightExpression.loadFromJSON === 'function' && typeof rightStr === 'string') this.rightExpression.loadFromJSON(rightStr);
|
|
125
|
+
this.leftHolder.removeAllChildren(); this.leftHolder.addChild(this.leftExpression);
|
|
126
|
+
this.rightHolder.removeAllChildren(); this.rightHolder.addChild(this.rightExpression);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// Guarded calls to hide backgrounds only when components exist
|
|
131
|
+
if (this.equalSign && typeof this.equalSign.hideBackgroundByDefault === 'function') this.equalSign.hideBackgroundByDefault();
|
|
132
|
+
if (this.leftExpression && typeof this.leftExpression.hideBackgroundByDefault === 'function') this.leftExpression.hideBackgroundByDefault();
|
|
133
|
+
if (this.rightExpression && typeof this.rightExpression.hideBackgroundByDefault === 'function') this.rightExpression.hideBackgroundByDefault();
|
|
134
|
+
|
|
135
|
+
this.centerEquation = false;
|
|
136
|
+
this.updateLayout();
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
setLeftAndRightExpressions( leftExp, rightExp )
|
|
141
|
+
{
|
|
142
|
+
this.leftExpression = leftExp;
|
|
143
|
+
this.leftHolder.removeAllChildren();
|
|
144
|
+
this.leftHolder.addChild( leftExp );
|
|
145
|
+
|
|
146
|
+
this.rightExpression = rightExp;
|
|
147
|
+
this.rightHolder.removeAllChildren();
|
|
148
|
+
this.rightHolder.addChild( rightExp );
|
|
149
|
+
|
|
150
|
+
this.equalSign.hideBackgroundByDefault();
|
|
151
|
+
this.leftExpression.hideBackgroundByDefault();
|
|
152
|
+
this.rightExpression.hideBackgroundByDefault();
|
|
153
|
+
|
|
154
|
+
this.updateLayout();
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
updateLayout()
|
|
158
|
+
{
|
|
159
|
+
this.leftHolder.setWidthAndHeight( this.leftExpression.width, this.leftExpression.height );
|
|
160
|
+
this.rightHolder.setWidthAndHeight( this.rightExpression.width, this.rightExpression.height );
|
|
161
|
+
|
|
162
|
+
// Layout the horizontal equation stack and place it with both horizontal and vertical inset
|
|
163
|
+
this.equationStack.doHorizontalLayout();
|
|
164
|
+
// Position the stack inside the back rectangle using inset for both X and Y
|
|
165
|
+
this.equationStack.setPosition( this.inset, this.inset );
|
|
166
|
+
|
|
167
|
+
var W = this.equationStack.width;
|
|
168
|
+
var H = this.equationStack.height;
|
|
169
|
+
|
|
170
|
+
// Size backRect to include top/bottom inset so internal content has consistent padding
|
|
171
|
+
this.backRect.setWidthAndHeight( W + this.inset*2, H + this.inset*2 );
|
|
172
|
+
|
|
173
|
+
this.setWidthAndHeight( this.backRect.width, this.backRect.height );
|
|
174
|
+
|
|
175
|
+
// Set individual width/height properties and viewBox for API compatibility
|
|
176
|
+
this.width = this.backRect.width;
|
|
177
|
+
this.height = this.backRect.height;
|
|
178
|
+
this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
|
|
179
|
+
|
|
180
|
+
if ( this.centerEquation )
|
|
181
|
+
{
|
|
182
|
+
var leftShift = this.leftExpression.width + this.equalSign.width*0.50;
|
|
183
|
+
// shift backRect and equationStack together but keep vertical inset
|
|
184
|
+
this.backRect.setPosition( -1.0 * leftShift + this.inset/2, 0 );
|
|
185
|
+
this.equationStack.setPosition( -1.0 * leftShift + this.inset + this.inset/2, this.inset );
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
163
189
|
}
|
package/src/omdProblem.js
CHANGED
|
@@ -8,12 +8,11 @@ export class omdProblem extends jsvgGroup
|
|
|
8
8
|
{
|
|
9
9
|
// initialization
|
|
10
10
|
super();
|
|
11
|
-
|
|
12
11
|
this.type = "omdProblem";
|
|
13
12
|
this.theText = "";
|
|
14
13
|
|
|
15
14
|
this.problemText = new jsvgTextBox();
|
|
16
|
-
this.problemText.setWidthAndHeight(
|
|
15
|
+
this.problemText.setWidthAndHeight( 250,30 );
|
|
17
16
|
this.problemText.setText ( "this it the problem text" );
|
|
18
17
|
this.problemText.setFontFamily( "Albert Sans" );
|
|
19
18
|
this.problemText.setFontColor( "black" );
|
|
@@ -21,21 +20,193 @@ export class omdProblem extends jsvgGroup
|
|
|
21
20
|
this.addChild( this.problemText );
|
|
22
21
|
}
|
|
23
22
|
|
|
24
|
-
loadFromJSON( data )
|
|
23
|
+
loadFromJSON( data, handleAIResponse = null )
|
|
25
24
|
{
|
|
25
|
+
console.log(data)
|
|
26
26
|
if ( typeof data.problemText != "undefined" )
|
|
27
27
|
this.theText = data.problemText;
|
|
28
28
|
|
|
29
29
|
if ( typeof data.visualization != "undefined" )
|
|
30
30
|
{
|
|
31
|
-
|
|
31
|
+
console.log(data)
|
|
32
|
+
this.visualJSON = data.visualiation;
|
|
32
33
|
console.log( this.visualJSON );
|
|
34
|
+
console.log('testing 1 ')
|
|
35
|
+
|
|
36
|
+
// // Fast-path: if the caller supplied an already-rendered SVG DOM element
|
|
37
|
+
// // (for example, captured from the canvas), use it directly instead of
|
|
38
|
+
// // trying to regenerate the graphic. This avoids constructing a temp
|
|
39
|
+
// // omd container and the related initialization issues.
|
|
40
|
+
if (data.svgElement) {
|
|
41
|
+
try {
|
|
42
|
+
// Ensure the problem text is set so measurement is accurate
|
|
43
|
+
this.problemText.setText(this.theText);
|
|
44
|
+
|
|
45
|
+
const padding = 10;
|
|
46
|
+
const SVG_NS = 'http://www.w3.org/2000/svg';
|
|
47
|
+
|
|
48
|
+
// utility: hidden measuring svg for getBBox when needed
|
|
49
|
+
function getMeasuringSVG() {
|
|
50
|
+
let m = document.getElementById('_omd_measuring_svg');
|
|
51
|
+
if (!m) {
|
|
52
|
+
m = document.createElementNS(SVG_NS, 'svg');
|
|
53
|
+
m.setAttribute('id', '_omd_measuring_svg');
|
|
54
|
+
m.style.position = 'absolute';
|
|
55
|
+
m.style.left = '-9999px';
|
|
56
|
+
m.style.top = '-9999px';
|
|
57
|
+
m.style.width = '1px';
|
|
58
|
+
m.style.height = '1px';
|
|
59
|
+
m.style.visibility = 'hidden';
|
|
60
|
+
document.body.appendChild(m);
|
|
61
|
+
}
|
|
62
|
+
return m;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
const incoming = data.svgElement;
|
|
66
|
+
const cloneRoot = incoming.cloneNode(true);
|
|
67
|
+
|
|
68
|
+
// Attempt 1: find a clip rect inside (common pattern)
|
|
69
|
+
let crop = null; // {x,y,width,height}
|
|
70
|
+
try {
|
|
71
|
+
const rect = cloneRoot.querySelector && cloneRoot.querySelector('clipPath rect');
|
|
72
|
+
if (rect) {
|
|
73
|
+
const x = parseFloat(rect.getAttribute('x') || '0');
|
|
74
|
+
const y = parseFloat(rect.getAttribute('y') || '0');
|
|
75
|
+
const w = parseFloat(rect.getAttribute('width') || '0');
|
|
76
|
+
const h = parseFloat(rect.getAttribute('height') || '0');
|
|
77
|
+
if (w > 0 && h > 0) crop = { x, y, width: w, height: h };
|
|
78
|
+
}
|
|
79
|
+
} catch (e) { /* ignore */ }
|
|
80
|
+
|
|
81
|
+
// Attempt 2: viewBox on root or nested svg
|
|
82
|
+
if (!crop) {
|
|
83
|
+
try {
|
|
84
|
+
let vb = null;
|
|
85
|
+
if (cloneRoot.getAttribute) vb = cloneRoot.getAttribute('viewBox');
|
|
86
|
+
if (!vb) {
|
|
87
|
+
const nested = cloneRoot.querySelector && cloneRoot.querySelector('svg');
|
|
88
|
+
if (nested && nested.getAttribute) vb = nested.getAttribute('viewBox');
|
|
89
|
+
}
|
|
90
|
+
if (vb) {
|
|
91
|
+
const parts = vb.trim().split(/\s+/).map(Number);
|
|
92
|
+
if (parts.length === 4) crop = { x: parts[0], y: parts[1], width: parts[2], height: parts[3] };
|
|
93
|
+
}
|
|
94
|
+
} catch (e) { /* ignore */ }
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// Attempt 3: measure bounding box by attaching to hidden SVG
|
|
98
|
+
if (!crop) {
|
|
99
|
+
const meas = getMeasuringSVG();
|
|
100
|
+
const wrapper = document.createElementNS(SVG_NS, 'g');
|
|
101
|
+
wrapper.appendChild(cloneRoot);
|
|
102
|
+
meas.appendChild(wrapper);
|
|
103
|
+
try {
|
|
104
|
+
const bb = wrapper.getBBox();
|
|
105
|
+
console.debug('omdProblem: measured bbox from wrapper', bb);
|
|
106
|
+
if (bb && bb.width > 0 && bb.height > 0) crop = { x: bb.x, y: bb.y, width: bb.width, height: bb.height };
|
|
107
|
+
} catch (e) {
|
|
108
|
+
// ignore
|
|
109
|
+
}
|
|
110
|
+
try { meas.removeChild(wrapper); } catch (_) {}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
if (!crop) crop = { x: 0, y: 0, width: 250, height: 250 };
|
|
115
|
+
|
|
116
|
+
// Allow caller to request a small margin around the crop to avoid clipping
|
|
117
|
+
const cropMargin = (data && typeof data.cropMargin === 'number') ? data.cropMargin : 6;
|
|
118
|
+
// expand crop safely
|
|
119
|
+
const expandedCrop = {
|
|
120
|
+
x: Math.max(0, crop.x - cropMargin),
|
|
121
|
+
y: Math.max(0, crop.y - cropMargin),
|
|
122
|
+
width: crop.width + cropMargin * 2,
|
|
123
|
+
height: crop.height + cropMargin * 2
|
|
124
|
+
};
|
|
125
|
+
crop = expandedCrop;
|
|
126
|
+
console.debug('omdProblem: final crop chosen (expanded)', crop);
|
|
127
|
+
|
|
128
|
+
// Build compact svg sized to crop area
|
|
129
|
+
const compact = document.createElementNS(SVG_NS, 'svg');
|
|
130
|
+
compact.setAttribute('width', String(crop.width));
|
|
131
|
+
compact.setAttribute('height', String(crop.height));
|
|
132
|
+
compact.setAttribute('viewBox', `0 0 ${crop.width} ${crop.height}`);
|
|
133
|
+
|
|
134
|
+
const contentWrapper = document.createElementNS(SVG_NS, 'g');
|
|
135
|
+
// don't apply arbitrary offsets; translate content so crop.x/y maps to 0,0
|
|
136
|
+
contentWrapper.setAttribute('transform', `translate(-55, -80)`);
|
|
137
|
+
contentWrapper.appendChild(cloneRoot);
|
|
138
|
+
compact.appendChild(contentWrapper);
|
|
139
|
+
|
|
140
|
+
// Position compact svg under the problem text
|
|
141
|
+
let textBoxHeight = 0;
|
|
142
|
+
try {
|
|
143
|
+
if (this.problemText.height) textBoxHeight = this.problemText.height;
|
|
144
|
+
else if (this.problemText.svgObject && this.problemText.svgObject.getBBox) textBoxHeight = this.problemText.svgObject.getBBox().height;
|
|
145
|
+
else textBoxHeight = 30;
|
|
146
|
+
} catch (e) { textBoxHeight = 30; }
|
|
33
147
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
148
|
+
// Center horizontally inside the problem box. Determine available width
|
|
149
|
+
// Caller can provide containerInfo to indicate the rounded-rect container dimensions
|
|
150
|
+
let containerWidth = 300;
|
|
151
|
+
let containerOffsetY = null;
|
|
152
|
+
let containerInnerPadding = 8;
|
|
153
|
+
try {
|
|
154
|
+
if (data && data.containerInfo) {
|
|
155
|
+
if (typeof data.containerInfo.width === 'number') containerWidth = data.containerInfo.width;
|
|
156
|
+
if (typeof data.containerInfo.offsetY === 'number') containerOffsetY = data.containerInfo.offsetY;
|
|
157
|
+
if (typeof data.containerInfo.innerPadding === 'number') containerInnerPadding = data.containerInfo.innerPadding;
|
|
158
|
+
} else if (this.width) containerWidth = this.width;
|
|
159
|
+
else if (this.problemText && this.problemText.width) containerWidth = Math.max(300, this.problemText.width);
|
|
160
|
+
} catch (e) { containerWidth = 300; }
|
|
161
|
+
|
|
162
|
+
const desiredY = Math.round((containerOffsetY !== null) ? (containerOffsetY + padding) : (textBoxHeight + padding));
|
|
163
|
+
|
|
164
|
+
// Ensure the compact SVG never extends outside the container: clamp and scale if needed
|
|
165
|
+
const innerPadding = containerInnerPadding; // keep some breathing room inside the rounded rectangle
|
|
166
|
+
const maxAllowedWidth = Math.max(20, containerWidth - innerPadding * 2);
|
|
167
|
+
let scale = 1;
|
|
168
|
+
if (crop.width > maxAllowedWidth) scale = maxAllowedWidth / crop.width;
|
|
169
|
+
const scaledWidth = Math.round(crop.width * scale);
|
|
170
|
+
const scaledHeight = Math.round(crop.height * scale);
|
|
171
|
+
|
|
172
|
+
// Apply scaled pixel dimensions to compact so it renders at the clamped size
|
|
173
|
+
compact.setAttribute('width', String(scaledWidth));
|
|
174
|
+
compact.setAttribute('height', String(scaledHeight));
|
|
175
|
+
|
|
176
|
+
// center: (containerWidth - scaledWidth) / 2, but don't go negative
|
|
177
|
+
let desiredX = Math.max(innerPadding, Math.round((containerWidth - scaledWidth) / 2));
|
|
178
|
+
|
|
179
|
+
console.debug('omdProblem: containerWidth, desiredX, desiredY', { containerWidth, desiredX, desiredY, cropWidth: crop.width, cropHeight: crop.height, scaledWidth, scaledHeight, scale });
|
|
180
|
+
|
|
181
|
+
const outerWrapper = document.createElementNS(SVG_NS, 'g');
|
|
182
|
+
outerWrapper.appendChild(compact);
|
|
183
|
+
outerWrapper.setAttribute('transform', `translate(${desiredX}, ${desiredY})`);
|
|
184
|
+
this.svgObject.appendChild(outerWrapper);
|
|
185
|
+
|
|
186
|
+
// Optional visual debug overlay: outlines the compact area if requested
|
|
187
|
+
if (data && data.debugPlacement) {
|
|
188
|
+
try {
|
|
189
|
+
const debugRect = document.createElementNS(SVG_NS, 'rect');
|
|
190
|
+
debugRect.setAttribute('x', '0');
|
|
191
|
+
debugRect.setAttribute('y', '0');
|
|
192
|
+
// debug rect shows the scaled layout area
|
|
193
|
+
debugRect.setAttribute('width', String(scaledWidth));
|
|
194
|
+
debugRect.setAttribute('height', String(scaledHeight));
|
|
195
|
+
debugRect.setAttribute('fill', 'none');
|
|
196
|
+
debugRect.setAttribute('stroke', 'rgba(255,0,0,0.9)');
|
|
197
|
+
debugRect.setAttribute('stroke-width', '2');
|
|
198
|
+
debugRect.setAttribute('pointer-events', 'none');
|
|
199
|
+
outerWrapper.appendChild(debugRect);
|
|
200
|
+
} catch (e) { console.warn('omdProblem: failed to add debugPlacement rect', e); }
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
this.updateLayout();
|
|
204
|
+
return;
|
|
205
|
+
} catch (e) {
|
|
206
|
+
console.warn('omdProblem: svgElement fast-path failed, falling back to regenerate:', e);
|
|
207
|
+
// fall through to regeneration attempt
|
|
208
|
+
}
|
|
209
|
+
}
|
|
39
210
|
}
|
|
40
211
|
|
|
41
212
|
this.updateLayout();
|
|
@@ -49,7 +220,41 @@ export class omdProblem extends jsvgGroup
|
|
|
49
220
|
|
|
50
221
|
updateLayout()
|
|
51
222
|
{
|
|
52
|
-
|
|
53
|
-
this.
|
|
223
|
+
// Update text content and size the problem container to fit the text and any child visualization
|
|
224
|
+
this.problemText.setText( this.theText );
|
|
225
|
+
|
|
226
|
+
// Measure the text box (use properties or fall back to getBBox)
|
|
227
|
+
let textBoxWidth = 400;
|
|
228
|
+
let textBoxHeight = 130;
|
|
229
|
+
try {
|
|
230
|
+
if (this.problemText.width) textBoxWidth = this.problemText.width;
|
|
231
|
+
if (this.problemText.height) textBoxHeight = this.problemText.height;
|
|
232
|
+
else if (this.problemText.svgObject && this.problemText.svgObject.getBBox) {
|
|
233
|
+
const bb = this.problemText.svgObject.getBBox();
|
|
234
|
+
if (bb.width) textBoxWidth = bb.width;
|
|
235
|
+
if (bb.height) textBoxHeight = bb.height;
|
|
236
|
+
}
|
|
237
|
+
} catch (e) {
|
|
238
|
+
// keep defaults
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
// Compute extra height from any visualization child we added
|
|
242
|
+
let extraHeight = 0;
|
|
243
|
+
try {
|
|
244
|
+
// Find a child that isn't the problemText (likely the visualization)
|
|
245
|
+
for (let i = 0; i < this.children.length; i++) {
|
|
246
|
+
const child = this.children[i];
|
|
247
|
+
if (child !== this.problemText && child && child.svgObject && child.svgObject.getBBox) {
|
|
248
|
+
const bb = child.svgObject.getBBox();
|
|
249
|
+
extraHeight = Math.max(extraHeight, bb.height + 20); // include padding
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
} catch (e) {
|
|
253
|
+
extraHeight = 0;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
const totalWidth = Math.max(300, textBoxWidth);
|
|
257
|
+
const totalHeight = Math.max(200, textBoxHeight + extraHeight + 20);
|
|
258
|
+
this.setWidthAndHeight( totalWidth, totalHeight );
|
|
54
259
|
}
|
|
55
260
|
}
|