@teachinglab/omd 0.1.0

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@teachinglab/omd",
+  "version": "0.1.0",
+  "description": "omd",
+  "main": "./index.js",
+  "module": "./index.js",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./core": "./omd/core/index.js",
+    "./visualizations": "./src/index.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "src/",
+    "omd/",
+    "jsvg/",
+    "docs/",
+    "canvas/"
+  ],
+  "keywords": [
+    "math",
+    "visualization",
+    "equations",
+    "educational",
+    "canvas",
+    "svg",
+    "interactive"
+  ],
+  "author": "jaredschiffman",
+  "license": "MIT",
+  "dependencies": {
+    "dotenv": "^17.2.1",
+    "express": "^4.18.2",
+    "mathjs": "^14.5.2",
+    "openai": "^4.28.0",
+    "@teachinglab/jsvg": "0.1.1"
+  },
+  "scripts": {
+    "start": "node --env-file=.env server.js",
+    "dev": "node --env-file=.env server.js"
+  },
+  "publishConfig": { "access": "public" }
+}

package/src/index.js

@@ -0,0 +1,62 @@
+// OMD Visualization Components
+export { omdTable } from './omdTable.js';
+export { omdBalanceHanger } from './omdBalanceHanger.js';
+export { omdCoordinatePlane } from './omdCoordinatePlane.js';
+export { omdTapeDiagram } from './omdTapeDiagram.js';
+export { omdTileEquation } from './omdTileEquation.js';
+
+// OMD Charts and Diagrams
+export { omdRatioChart } from './omdRatioChart.js';
+export { omdNumberLine } from './omdNumberLine.js';
+
+// OMD Core Components
+export { omdApp } from './omdApp.js';
+export { omdAppCanvas } from './omdAppCanvas.js';
+export { omd } from './omd.js';
+
+// OMD Utilities and Helpers
+export { omdColor } from './omdColor.js';
+// OMD Shape Classes
+export { 
+    omdRightTriangle,
+    omdIsoscelesTriangle, 
+    omdRectangle,
+    omdEllipse,
+    omdCircle,
+    omdRegularPolygon,
+    omdShapeLabelSet 
+} from './omdShapes.js';
+export { omdSpinner } from './omdSpinner.js';
+export { omdProblem } from './omdProblem.js';
+
+// Default export for organized access
+export default {
+    // Main visualizations (most commonly used)
+    visualizations: {
+        omdTable: () => import('./omdTable.js').then(m => m.omdTable),
+        omdBalanceHanger: () => import('./omdBalanceHanger.js').then(m => m.omdBalanceHanger),
+        omdCoordinatePlane: () => import('./omdCoordinatePlane.js').then(m => m.omdCoordinatePlane),
+        omdTapeDiagram: () => import('./omdTapeDiagram.js').then(m => m.omdTapeDiagram),
+        omdTileEquation: () => import('./omdTileEquation.js').then(m => m.omdTileEquation),
+        omdRatioChart: () => import('./omdRatioChart.js').then(m => m.omdRatioChart),
+        omdNumberLine: () => import('./omdNumberLine.js').then(m => m.omdNumberLine)
+    },
+    
+    // Mathematical expressions
+    expressions: {
+        omdExpression: () => import('./omdExpression.js').then(m => m.omdExpression),
+        omdEquation: () => import('./omdEquation.js').then(m => m.omdEquation),
+        omdMetaExpression: () => import('./omdMetaExpression.js').then(m => m.omdMetaExpression),
+        omdNaturalExpression: () => import('./omdNaturalExpression.js').then(m => m.omdNaturalExpression),
+        omdPowerExpression: () => import('./omdPowerExpression.js').then(m => m.omdPowerExpression),
+        omdRationalExpression: () => import('./omdRationalExpression.js').then(m => m.omdRationalExpression),
+        omdFunction: () => import('./omdFunction.js').then(m => m.omdFunction)
+    },
+    
+    // Core app components
+    app: {
+        omdApp: () => import('./omdApp.js').then(m => m.omdApp),
+        omdAppCanvas: () => import('./omdAppCanvas.js').then(m => m.omdAppCanvas),
+        omd: () => import('./omd.js').then(m => m.omd)
+    }
+}; 

package/src/json-schemas.md

@@ -0,0 +1,109 @@
+# OMD JSON Schemas
+
+## tapeDiagram
+```json
+{
+  "omdType": "tapeDiagram",
+  "values": [number|string, ...], //any numbers should be inputted as NUMBERS, e.g 4 not '4'
+  "colors": [string, ...],
+  "labelSet": [
+    {
+      "omdType": "omdTapeLabel",
+      "startIndex": number, //inclusive
+      "endIndex": number, //exclusive
+      "label": string,
+      "showBelow": boolean
+    }
+  ],
+  "unitWidth": number,
+  "showValues": boolean
+}
+```
+
+- values: segment magnitudes or expressions (strings allowed).
+- colors: per-segment fills (optional; falls back to lightGray).
+- labelSet: range labels either by indices (startIndex/endIndex) or by absolute values (startValue/endValue).
+- unitWidth: pixel width per numeric unit.
+
+## balanceHanger
+```json
+{
+  "omdType": "balanceHanger",
+  "leftValues": [number|string, ...],
+  "rightValues": [number|string, ...],
+  "tilt": "left" | "right" | "none",
+  "fontFamily": string,
+  "fontSize": number
+}
+```
+
+- leftValues/rightValues: stacks rendered on each side.
+- tilt: beam visual tilt.
+
+## coordinatePlane
+```json
+{
+  "omdType": "coordinatePlane",
+  "xMin": number,
+  "xMax": number,
+  "yMin": number,
+  "yMax": number,
+  "xLabel": string,
+  "yLabel": string,
+  "axisLabelOffsetPx": number,
+  "size": "small" | "medium" | "large",
+  "tickInterval": number,
+  "tickLabelOffsetPx": number,
+  "forceAllTickLabels": boolean,
+  "graphEquations": [
+    {
+      "equation": string,            // supports 'y = ...' or expression in x
+      "domain": { "min": number, "max": number },
+      "color": string,
+      "strokeWidth": number,
+      "label": string,
+      "labelAtX": number,
+      "labelPosition": "above" | "below" | "left" | "right"
+    }
+  ],
+  "lineSegments": [
+    { "point1": [number, number], "point2": [number, number], "color": string, "strokeWidth": number }
+  ],
+  "dotValues": [ [number, number, string?], ... ],
+  "shapeSet": [
+    { "omdType": "rightTriangle" | "isoscelesTriangle" | "rectangle" | "ellipse" | "circle" | "regularPolygon", /* shape-specific fields */ }
+  ]
+}
+```
+
+- graphEquations: each equation plotted within its domain.
+- lineSegments: raw segment overlays.
+- dotValues: points as [x, y, optionalColor].
+- shapeSet: geometric overlays rendered in plane units.
+
+## table
+```json
+{
+  "omdType": "table",
+  "title": string,
+  "headers": [string, ...],
+  "data": [ [any, ...], ... ],      // array-of-arrays; columns align with headers
+  "equation": string,                // optional; generates rows from y=f(x) takes precendence over any data provided
+  "xMin": number,
+  "xMax": number,
+  "stepSize": number,
+  "fontFamily": string,
+  "headerFontFamily": string,
+  "fontSize": number,
+  "headerFontSize": number,
+  "cellHeight": number,
+  "headerHeight": number,
+  "minCellWidth": number,
+  "maxCellWidth": number,
+  "padding": number
+}
+```
+
+- If equation is provided, rows are generated in range [xMin, xMax] with stepSize.
+- When autoSizeCells is true, widths are inferred from content.
+

package/src/omd-json-samples.js

@@ -0,0 +1,115 @@
+/**
+ * STREAMLINED OMD JSON SAMPLES
+ * One comprehensive example per visual type showing ALL properties
+ */
+
+// COORDINATE PLANE - Complete example with all features
+export const coordinatePlaneExample = {
+    "omdType": "coordinatePlane",
+    "size": "medium",
+    "xMin": -2,
+    "xMax": 6, 
+    "yMin": -1,
+    "yMax": 8,
+    "xLabel": "Time (hours)",
+    "yLabel": "Temperature (°C)",
+    "tickInterval": 1,
+    "tickLabelOffsetPx": 5,
+    "axisLabelOffsetPx": 20,
+    "paddingLeft": 60,
+    "paddingRight": 30,
+    "paddingTop": 30,
+    "paddingBottom": 60,
+    "graphEquations": [
+        {
+            "equation": "2*x + 1",
+            "domain": { "min": 0, "max": 4 },
+            "color": "blue", 
+            "strokeWidth": 3
+        },
+        {
+            "equation": "x**2 - 2*x + 3",
+            "domain": { "min": 1, "max": 5 },
+            "color": "red",
+            "strokeWidth": 2
+        }
+    ],
+    "dotValues": [
+        [1, 3, "green"],
+        [3, 5, "purple"],
+        [5, 7]
+    ],
+    "lineSegments": [
+        {
+            "point1": [0, 2],
+            "point2": [2, 6],
+            "color": "orange",
+            "strokeWidth": 2
+        }
+    ]
+};
+
+// TABLE - Complete example with all features  
+export const tableExample = {
+    "omdType": "table",
+    "title": "Student Scores",
+    "headers": ["Name", "Math", "Science", "Average"],
+    "data": [
+        ["Alice", 95, 88, 91.5],
+        ["Bob", 87, 92, 89.5],
+        ["Carol", 91, 85, 88]
+    ],
+    "highlightRows": [0],
+    "highlightCols": [3],
+    "cellColors": {
+        "1,1": "lightblue",
+        "2,2": "lightgreen"
+    },
+    "showBorders": true,
+    "alternateRowColors": true,
+    "headerBackgroundColor": "lightgray",
+    "width": 400,
+    "height": 250
+};
+
+// TABLE WITH EQUATION - Function table showing x/y values from equation
+export const tableEquationExample = {
+    "omdType": "table",
+    "title": "Function Table: y = 2x + 3",
+    "headers": ["x", "y"],
+    "equation": "y = 2x + 3",
+    "width": 350,
+    "height": 300
+};
+
+// BALANCE HANGER - Complete example
+export const balanceHangerExample = {
+    "omdType": "balanceHanger", 
+    "leftValues": [3, "x", 5],
+    "rightValues": [2, "y", 8],
+    "tilt": "left",
+    "showLabels": true,
+    "equilibrium": false
+};
+
+// TAPE DIAGRAM - Complete example (canonical schema)
+export const tapeDiagramExample = {
+    "omdType": "tapeDiagram",
+    "values": [2, 3],
+    "colors": ["#2386DB", "#DB2323"],
+    "labelSet": [
+        { "omdType": "omdTapeLabel", "startIndex": 0, "endIndex": 1, "label": "2x", "showBelow": false },
+        { "omdType": "omdTapeLabel", "startIndex": 1, "endIndex": 2, "label": "3", "showBelow": false },
+        { "omdType": "omdTapeLabel", "startIndex": 0, "endIndex": 2, "label": "5", "showBelow": true }
+    ],
+    "showValues": true
+};
+
+// Export all examples for AI reference
+export const allExamples = {
+    coordinatePlane: coordinatePlaneExample,
+    table: tableExample,
+    tableEquation: tableEquationExample,
+    balanceHanger: balanceHangerExample,
+    tapeDiagram: tapeDiagramExample
+};

package/src/omd.js

@@ -0,0 +1,109 @@
+
+
+import { omdColor } from "./omdColor.js";
+import { omdNumber } from "./omdNumber.js";
+import { omdVariable } from "./omdVariable.js";
+import { omdTerm } from "./omdTerm.js";
+import { omdOperator } from "./omdOperator.js";
+import { omdExpression } from "./omdExpression.js";
+import { omdPowerExpression } from "./omdPowerExpression.js";
+import { omdRationalExpression } from "./omdRationalExpression.js";
+import { omdEquation } from "./omdEquation.js";
+import { omdFunction } from "./omdFunction.js";
+import { omdNumberLine } from "./omdNumberLine.js";
+import { omdTapeDiagram } from "./omdTapeDiagram.js";
+import { omdBalanceHanger } from "./omdBalanceHanger.js";
+import { omdNumberTile } from "./omdNumberTile.js";
+import { omdRatioChart } from "./omdRatioChart.js";
+import { omdCoordinatePlane } from "./omdCoordinatePlane.js";
+import { omdSpinner } from "./omdSpinner.js";
+import { jsvgContainer } from "@teachinglab/jsvg";
+
+export class omd extends jsvgContainer
+{
+    constructor()
+    {
+        super();
+
+
+        this.setViewbox( 400,400 );
+        this.setBackgroundColor( "#F8F8F4" );
+    }
+
+    setCanvasSize( W, H )
+    {
+        this.setViewbox( W,H );
+    }
+
+    setBackgroundColor( C )
+    {
+        this.svgObject.style.backgroundColor =  C;
+    }
+    
+    generateGraphic( jsonData )
+    {
+        this.removeAllChildren();
+
+        var N = null;
+
+        if ( jsonData.omdType == "number" ) { var N = new omdNumber(); }
+
+        if ( jsonData.omdType == "variable" ) { var N = new omdVariable(); }
+
+        if ( jsonData.omdType == "operator" ) { var N = new omdOperator(); }
+        
+        if ( jsonData.omdType == "term" ) { var N = new omdTerm(); }
+
+        if ( jsonData.omdType == "expression" ) { var N = new omdExpression(); }
+
+        if ( jsonData.omdType == "powerExpression" ) { var N = new omdPowerExpression(); }
+
+        if ( jsonData.omdType == "rationalExpression" ) { var N = new omdRationalExpression(); }
+
+        if ( jsonData.omdType == "function" ) { var N = new omdFunction(); }
+
+        if ( jsonData.omdType == "equation" ) { var N = new omdEquation(); }
+
+        if ( jsonData.omdType == "numberLine" ) { var N = new omdNumberLine(); } 
+
+        if ( jsonData.omdType == "balanceHanger" )
+        {
+            var N = new omdBalanceHanger();
+            N.setPosition( 150, 0 );
+        }
+
+        if ( jsonData.omdType == "tapeDiagram" ) { var N = new omdTapeDiagram(); }
+
+        if ( jsonData.omdType == "numberTile" ) { var N = new omdNumberTile(); }
+
+        if ( jsonData.omdType == "ratioChart" ) { var N = new omdRatioChart(); } 
+
+        if ( jsonData.omdType == "coordinatePlane" ) { var N = new omdCoordinatePlane(); } 
+
+        if ( jsonData.omdType == "spinner" ) { var N = new omdSpinner(); } 
+
+        N.setPosition( 0,30 );
+
+        // load from json
+        N.loadFromJSON( jsonData );
+
+        // add to the AI holder
+        this.addChild( N );
+    }
+
+    getSVG()
+    {
+        return this.svgObject;
+    }
+
+    getDiv()
+    {
+        const newDiv = document.createElement("div");
+        newDiv.style.width = this.width + 'px';
+        newDiv.style.height = this.height + 'px';
+        newDiv.style.overflow = 'visible'
+        newDiv.appendChild( this.svgObject );
+        return newDiv;
+    }
+}
+