@teachinglab/omd 0.3.3 → 0.3.5

package/canvas/core/omdCanvas.js

@@ -7,7 +7,7 @@ import { SelectTool } from '../tools/SelectTool.js';
 import { Cursor } from '../ui/cursor.js';
 import { Toolbar } from '../ui/toolbar.js';
 import { FocusFrameManager } from '../features/focusFrameManager.js';
-
+import {jsvgGroup} from '@teachinglab/jsvg'
 /**
  * Main OMD Canvas class
  * Provides the primary interface for creating and managing a drawing canvas

package/canvas/index.js

@@ -27,7 +27,6 @@ export { mathUtils } from './utils/mathUtils.js';
 
 // Focus frame system
 export { FocusFrameManager } from './features/focusFrameManager.js';
-import { omdCanvas } from './core/omdCanvas.js';
 /**
  * Quick setup function for common use cases
  * @param {HTMLElement|string} container - Container element or selector

package/canvas/ui/toolbar.js

@@ -1,4 +1,6 @@
 import {omdColor} from '../../src/omdColor.js';
+import { jsvgRect, jsvgGroup } from '@teachinglab/jsvg';
+import { jsvgButton } from '@teachinglab/jsvg';
 
 export class Toolbar {
     /**

package/index.js

@@ -13,10 +13,13 @@
 
 // Export everything from the core OMD library (equations, nodes, display, etc.)
 export * from './omd/core/index.js';
-
+export * from './canvas/index.js';
 // Export everything from the visualization components
 export * from './src/index.js';
 
+// Re-export canvas helpers/events so package consumers can import them from the package root
+export { EventManager } from './canvas/events/eventManager.js';
+
 // Export utility components
 export { omdNodeOverlay, omdNodeOverlayPresets } from './omd/utils/omdNodeOverlay.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "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/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();
 
@@ -88,7 +91,7 @@ export class omdRightTriangle extends jsvgGroup
             this.labelsHolder.addChild( L );
         }
 
-        // Set dimensions and viewBox for API compatibility
+        // 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}`);
@@ -213,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();
 
@@ -233,7 +239,7 @@ export class omdRectangle extends jsvgGroup
             this.labelsHolder.addChild( L );
         }
 
-        // Set dimensions and viewBox for API compatibility
+        // 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}`);
@@ -416,7 +422,7 @@ export class omdRegularPolygon extends jsvgGroup
         // 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}`);
+        this.svgObject.setAttribute('viewBox', `-${this.width/2} -${this.height/2} ${this.width} ${this.height}`);
     }
 }