@teachinglab/omd 0.3.2 → 0.3.4

package/omd/core/omdEquationStack.js

@@ -536,4 +536,12 @@ export class omdEquationStack extends jsvgGroup {
         this.updateLayout();
         return true;
     }
+
+    /**
+     * Returns the SVG element for the entire equation stack.
+     * @returns {SVGElement} The SVG element representing the equation stack.
+     */
+    getSvg() {
+        return this.svgObject;
+    }
 } 

package/omd/display/omdDisplay.js

@@ -952,4 +952,12 @@ export class omdDisplay {
     getCurrentNode() {
         return this.node;
     }
+
+    /**
+     * Returns the SVG element for the entire display.
+     * @returns {SVGElement} The SVG element representing the display.
+     */
+    getSVG() {
+        return this.svg.svgObject;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",

package/src/omd-json-samples.js

@@ -105,11 +105,44 @@ export const tapeDiagramExample = {
     "showValues": true
 };
 
+// EQUATION STACK - Complete example showing step-by-step equation solving
+export const equationStackExample = {
+    "omdType": "equationStack",
+    "equations": [
+        "2x + 3 = 11",
+        "2x = 8", 
+        "x = 4"
+    ]
+};
+
+// EQUATION STACK - Multi-step algebraic solution
+export const equationStackMultiStepExample = {
+    "omdType": "equationStack", 
+    "equations": [
+        "3(x + 2) = 15",
+        "3x + 6 = 15",
+        "3x = 9",
+        "x = 3"
+    ]
+};
+
+// EQUATION STACK - Quadratic equation solution
+export const equationStackQuadraticExample = {
+    "omdType": "equationStack",
+    "equations": [
+        "x² + 5x + 6 = 0",
+        "(x + 2)(x + 3) = 0",
+    ]
+};
+
 // Export all examples for AI reference
 export const allExamples = {
     coordinatePlane: coordinatePlaneExample,
     table: tableExample,
     tableEquation: tableEquationExample,
     balanceHanger: balanceHangerExample,
-    tapeDiagram: tapeDiagramExample
+    tapeDiagram: tapeDiagramExample,
+    equationStack: equationStackExample,
+    equationStackMultiStep: equationStackMultiStepExample,
+    equationStackQuadratic: equationStackQuadraticExample
 };

package/src/omdEquation.js

@@ -114,6 +114,11 @@ export class omdEquation extends omdMetaExpression
 
         this.setWidthAndHeight( this.backRect.width, this.backRect.height );
 
+        // Set individual width/height properties and viewBox for API compatibility
+        this.width = this.backRect.width;
+        this.height = this.backRect.height;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
+
         if ( this.centerEquation )
         {
             var leftShift = this.leftExpression.width + this.equalSign.width*0.50;

package/src/omdExpression.js

@@ -100,5 +100,10 @@ export class omdExpression extends omdMetaExpression
         this.backRect.setWidthAndHeight( W + this.inset*2, 30 );
 
         this.setWidthAndHeight( this.backRect.width, this.backRect.height );
+
+        // Set individual width/height properties and viewBox for API compatibility
+        this.width = this.backRect.width;
+        this.height = this.backRect.height;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
     }
 }

package/src/omdShapes.js

@@ -68,12 +68,15 @@ export class omdRightTriangle extends jsvgGroup
 
     updateLayout()
     {
-        this.shapePath.clearPoints();
+        // Center the triangle within the viewBox
+        const offsetX = 10; // Left margin
+        const offsetY = this.unitScale * this.verticalLeg + 10; // Bottom margin
 
-        this.shapePath.addPoint( 0,0 );
-        this.shapePath.addPoint( this.unitScale*this.horizontalLeg,0 );
-        this.shapePath.addPoint( this.unitScale*this.horizontalLeg, -1.0*this.unitScale*this.verticalLeg );
-        this.shapePath.addPoint( 0,0 );
+        this.shapePath.clearPoints();
+        this.shapePath.addPoint(offsetX, offsetY);
+        this.shapePath.addPoint(offsetX + this.unitScale * this.horizontalLeg, offsetY);
+        this.shapePath.addPoint(offsetX + this.unitScale * this.horizontalLeg, offsetY - this.unitScale * this.verticalLeg);
+        this.shapePath.addPoint(offsetX, offsetY);
 
         this.shapePath.updatePath();
 
@@ -87,6 +90,11 @@ export class omdRightTriangle extends jsvgGroup
             L.initializeWithShapePath( this.shapePath, [A,B,C] );
             this.labelsHolder.addChild( L );
         }
+
+        // Set viewBox to center the shape
+        this.width = this.unitScale * this.horizontalLeg + 20;
+        this.height = this.unitScale * this.verticalLeg + 20;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
     }
 }
 
@@ -154,6 +162,11 @@ export class omdIsoscelesTriangle extends jsvgGroup
             L.initializeWithShapePath( this.shapePath );
             this.labelsHolder.addChild( L );
         }
+
+        // Set dimensions and viewBox for API compatibility
+        this.width = this.unitScale * this.triangleBase + 20;
+        this.height = this.unitScale * this.triangleHeight + 20;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
     }
 }
 
@@ -203,13 +216,16 @@ export class omdRectangle extends jsvgGroup
 
     updateLayout()
     {
-        this.shapePath.clearPoints();
+        // Center the rectangle within the viewBox
+        const offsetX = 10;
+        const offsetY = this.unitScale * this.rectHeight + 10;
 
-        this.shapePath.addPoint( 0,0 );
-        this.shapePath.addPoint( this.unitScale*this.rectWidth, 0 );
-        this.shapePath.addPoint( this.unitScale*this.rectWidth, -1.0*this.unitScale*this.rectHeight );
-        this.shapePath.addPoint( 0, -1.0*this.unitScale*this.rectHeight );
-        this.shapePath.addPoint( 0,0 );
+        this.shapePath.clearPoints();
+        this.shapePath.addPoint(offsetX, offsetY);
+        this.shapePath.addPoint(offsetX + this.unitScale * this.rectWidth, offsetY);
+        this.shapePath.addPoint(offsetX + this.unitScale * this.rectWidth, offsetY - this.unitScale * this.rectHeight);
+        this.shapePath.addPoint(offsetX, offsetY - this.unitScale * this.rectHeight);
+        this.shapePath.addPoint(offsetX, offsetY);
 
         this.shapePath.updatePath();
 
@@ -222,6 +238,11 @@ export class omdRectangle extends jsvgGroup
             L.initializeWithShapePath( this.shapePath, [A,B,"",""] );
             this.labelsHolder.addChild( L );
         }
+
+        // Set viewBox
+        this.width = this.unitScale * this.rectWidth + 20;
+        this.height = this.unitScale * this.rectHeight + 20;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
     }
 }
 
@@ -266,6 +287,11 @@ export class omdEllipse extends jsvgGroup
     updateLayout()
     {
         this.shapePath.setWidthAndHeight( this.rectWidth*this.unitScale, this.rectHeight*this.unitScale );
+
+        // Set dimensions and viewBox for API compatibility
+        this.width = this.rectWidth * this.unitScale + 20;
+        this.height = this.rectHeight * this.unitScale + 20;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
     }
 }
 
@@ -305,6 +331,11 @@ export class omdCircle extends jsvgGroup
     updateLayout()
     {
         this.shapePath.setWidthAndHeight( 2.0*this.radius*this.unitScale, 2.0*this.radius*this.unitScale );
+
+        // Set dimensions and viewBox for API compatibility
+        this.width = 2.0 * this.radius * this.unitScale + 20;
+        this.height = 2.0 * this.radius * this.unitScale + 20;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
     }
 }
 
@@ -387,6 +418,11 @@ export class omdRegularPolygon extends jsvgGroup
             L.initializeWithShapePath( this.shapePath, [ A ] );
             this.labelsHolder.addChild( L );
         }
+
+        // Set dimensions and viewBox for API compatibility
+        this.width = 2.0 * this.radius * this.unitScale + 20;
+        this.height = 2.0 * this.radius * this.unitScale + 20;
+        this.svgObject.setAttribute('viewBox', `-${this.width/2} -${this.height/2} ${this.width} ${this.height}`);
     }
 }
 

package/src/omdSpinner.js

@@ -136,7 +136,10 @@ export class omdSpinner extends jsvgGroup
         var A = -90 + 360.0 / this.divisions * (this.arrowPosition-0.5);
         this.arrow.setRotation( A );
 
-
+        // Set dimensions and viewBox for API compatibility
+        this.width = circleSize;
+        this.height = circleSize;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
 
         // var L = new jsvgLine();
         // var lineLength = circleSize*0.4;