@teachinglab/omd 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",
@@ -34,6 +34,7 @@
   "dependencies": {
     "@netlify/vite-plugin": "^2.5.4",
     "@teachinglab/jsvg": "0.1.1",
+    "@teachinglab/omd": "^0.3.1",
     "dotenv": "^17.2.1",
     "express": "^4.18.2",
     "mathjs": "^14.5.2",

package/src/index.js

@@ -8,6 +8,17 @@ export { omdTileEquation } from './omdTileEquation.js';
 // OMD Charts and Diagrams
 export { omdRatioChart } from './omdRatioChart.js';
 export { omdNumberLine } from './omdNumberLine.js';
+export { omdNumberTile } from './omdNumberTile.js';
+
+// OMD Mathematical Components
+export { omdEquation } from './omdEquation.js';
+export { omdExpression } from './omdExpression.js';
+export { omdTerm } from './omdTerm.js';
+export { omdNumber } from './omdNumber.js';
+export { omdVariable } from './omdVariable.js';
+export { omdPowerExpression } from './omdPowerExpression.js';
+export { omdRationalExpression } from './omdRationalExpression.js';
+export { omdFunction } from './omdFunction.js';
 
 // OMD Core Components
 export { omdApp } from './omdApp.js';

package/src/omdBalanceHanger.js

@@ -120,7 +120,8 @@ export class omdBalanceHanger extends jsvgGroup
         const displayHeight = Math.max(200, contentHeight + padding);
         this.setWidthAndHeight(displayWidth, displayHeight);
         this.svgObject.setAttribute("viewBox", `${-displayWidth/2} ${-displayHeight/2} ${displayWidth} ${displayHeight}`);
-        this.setPosition(-displayWidth / 2, -displayHeight / 2);
+        // Don't set position since the viewBox already handles centering
+        // this.setPosition(-displayWidth / 2, -displayHeight / 2);
     }
 
     makeValueStack( values, xOffset, yOffset )

package/src/omdEquation.js

@@ -7,7 +7,7 @@ import { omdTerm } from "./omdTerm.js";
 import { omdExpression } from "./omdExpression.js";
 import { omdVariable } from "./omdVariable.js";
 import { omdString } from "./omdString.js";
-
+import { omdNumber } from "./omdNumber.js";
 
 export class omdEquation extends omdMetaExpression
 {

package/src/omdNumber.js

@@ -1,7 +1,7 @@
 
 import { omdColor } from "./omdColor.js";
 import { omdMetaExpression } from "./omdMetaExpression.js"
-
+import { jsvgGroup, jsvgRect, jsvgTextBox } from "@teachinglab/jsvg";
 export class omdNumber extends omdMetaExpression
 {
     constructor( V = 1 )

package/src/omdNumberLine.js

@@ -50,13 +50,18 @@ export class omdNumberLine extends jsvgGroup
     {
         this.removeAllChildren();
 
+        // Set proper dimensions and viewBox for positioning
+        this.width = 360;
+        this.height = 70;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
+
         // make line
         this.line = new jsvgRect();
         // this.line.setStrokeColor( "black" );
         // this.line.setStrokeWidth( 1 );
         // this.line.setEndpoints( 0,0, 300, 0 );
         this.line.setWidthAndHeight(320,5);
-        this.line.setPosition( -10, -2.5 );
+        this.line.setPosition( 20, 22.5 );
         this.line.setFillColor( omdColor.mediumGray );
         this.line.setCornerRadius( 2.5 );
         this.addChild( this.line );
@@ -67,12 +72,12 @@ export class omdNumberLine extends jsvgGroup
             var N = i - this.min;
             var dX = 300 / (this.max - this.min);
 
-            var pX = N*dX;
+            var pX = 30 + N*dX;
 
             var tick = new jsvgLine();
             tick.setStrokeColor( "black" );
             tick.setStrokeWidth( 1 );
-            tick.setEndpoints( pX, -5, pX, 5 );
+            tick.setEndpoints( pX, 20, pX, 30 );
             this.addChild( tick );
 
             var tickText = new jsvgTextBox();
@@ -83,7 +88,7 @@ export class omdNumberLine extends jsvgGroup
             tickText.setFontSize( 10 );
             tickText.setAlignment("center");
             tickText.setText( i.toString() );
-            tickText.setPosition( pX-15, 10 );
+            tickText.setPosition( pX-15, 32 );
             this.addChild( tickText );
         }
 
@@ -94,12 +99,13 @@ export class omdNumberLine extends jsvgGroup
 
             var N = V - this.min;
             var dX = 300 / (this.max - this.min);
-            var pX = N*dX;
+            var pX = 30 + N*dX;
 
             var dot = new jsvgEllipse();
             dot.setFillColor( "black" );
-            dot.setWidthAndHeight( 10,10 );
-            dot.setPosition( pX, 0 );
+            dot.setStrokeWidth( 0 );
+            dot.setWidthAndHeight( 9,9 );
+            dot.setPosition( pX, 25 );
             this.addChild( dot );
         }
     }

package/src/omdRatioChart.js

@@ -22,9 +22,17 @@ export class omdRatioChart extends jsvgGroup
     {
         if ( typeof data.valueA != "undefined" )
             this.valueA = data.valueA;
+        if ( typeof data.numerator != "undefined" )
+            this.valueA = data.numerator;
 
         if ( typeof data.valueB != "undefined" )
             this.valueB = data.valueB;
+        if ( typeof data.denominator != "undefined" ) {
+            // For fractions: denominator = total tiles, numerator = filled tiles
+            // So valueB should be (denominator - numerator) = unfilled tiles
+            this.valueA = data.numerator;
+            this.valueB = data.denominator - data.numerator;
+        }
 
         if ( typeof data.renderType != "undefined" )
             this.renderType = data.renderType;
@@ -78,6 +86,11 @@ export class omdRatioChart extends jsvgGroup
         if ( this.size == "small" )
             circleSize = 40;
 
+        // Set dimensions for the pie chart
+        this.width = circleSize;
+        this.height = circleSize;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
+
         // holder group
         var G = new jsvgGroup();
         G.setPosition( circleSize/2, circleSize/2 );
@@ -143,6 +156,7 @@ export class omdRatioChart extends jsvgGroup
 
         this.width = R.width;
         this.height = R.height;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
 
         // make top dots
         var pX = spacer;
@@ -204,6 +218,11 @@ export class omdRatioChart extends jsvgGroup
 
         var p = this.valueA / ( this.valueA + this.valueB );
 
+        // Set dimensions for the bar chart
+        this.width = W;
+        this.height = 30;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
+
         var B1 = new jsvgRect();
         B1.setWidthAndHeight( W, 30 );
         // B1.setCornerRadius(5);

package/src/omdShapes.js

@@ -1,6 +1,6 @@
 
 import { omdColor } from "./omdColor.js";
-import { jsvgGroup, jsvgPath, jsvgLine, jsvgTextLine } from "@teachinglab/jsvg";
+import { jsvgGroup, jsvgPath, jsvgLine, jsvgTextLine, jsvgEllipse } from "@teachinglab/jsvg";
 
 export class omdRightTriangle extends jsvgGroup
 {

package/src/omdTapeDiagram.js

@@ -1,5 +1,5 @@
 import { omdColor } from "./omdColor.js";
-import { jsvgGroup, jsvgRect, jsvgTextBox } from "@teachinglab/jsvg";
+import { jsvgGroup, jsvgRect, jsvgTextBox, jsvgLine} from "@teachinglab/jsvg";
 
 export class omdTapeLabel extends jsvgGroup
 {

package/src/omdTerm.js

@@ -1,7 +1,7 @@
 
 import { omdColor } from "./omdColor.js";
 import { omdMetaExpression } from "./omdMetaExpression.js"
-
+import { jsvgGroup, jsvgRect, jsvgTextBox } from "@teachinglab/jsvg";
 export class omdTerm extends omdMetaExpression
 {
     constructor( coefficient=1, variable='', exponent=1 )