@teachinglab/omd 0.6.6 → 0.7.0

package/src/omdDoubleNumberLine.js

@@ -0,0 +1,72 @@
+import { omdColor } from "./omdColor.js";
+import { jsvgGroup } from "@teachinglab/jsvg";
+import { omdNumberLine } from "./omdNumberLine.js";
+
+export class omdDoubleNumberLine extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();  
+
+        this.type = "omdDoubleNumberLine";
+
+        this.topNumberLine = new omdNumberLine();
+        this.bottomNumberLine = new omdNumberLine();
+        
+        this.spacing = 30;
+        
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        // Load spacing first, before updating layout
+        if ( typeof data.spacing !== "undefined" ) {
+            this.spacing = data.spacing;
+        }
+
+        if ( typeof data.topNumberLine !== "undefined" ) {
+            this.topNumberLine.loadFromJSON(data.topNumberLine);
+        }
+
+        if ( typeof data.bottomNumberLine !== "undefined" ) {
+            this.bottomNumberLine.loadFromJSON(data.bottomNumberLine);
+        }
+
+        // Don't call updateLayout here - let it be called separately
+        // This prevents double-calling and ensures spacing is used
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.removeAllChildren();
+
+        // Calculate the maximum left padding needed to align the start of the lines
+        const topLeftPadding = this.topNumberLine.title ? 80 : 20;
+        const bottomLeftPadding = this.bottomNumberLine.title ? 80 : 20;
+        const maxLeftPadding = Math.max(topLeftPadding, bottomLeftPadding);
+
+        // Position top number line
+        const topXOffset = maxLeftPadding - topLeftPadding;
+        this.topNumberLine.setPosition(topXOffset, 0);
+        this.addChild(this.topNumberLine);
+
+        // Position bottom number line - spacing controls the gap
+        // If spacing = 0, they overlap. If spacing = 10, there's a 10px gap between them
+        const bottomXOffset = maxLeftPadding - bottomLeftPadding;
+        this.bottomNumberLine.setPosition(bottomXOffset, this.spacing);
+        this.addChild(this.bottomNumberLine);
+
+        // Set overall dimensions
+        const maxWidth = Math.max(
+            this.topNumberLine.width + topXOffset,
+            this.bottomNumberLine.width + bottomXOffset
+        );
+        this.width = maxWidth;
+        this.height = 70 + this.spacing; // Top line (70px) + spacing
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
+    }
+
+}

package/src/omdDoubleTapeDiagram.js

@@ -0,0 +1,115 @@
+
+import { jsvgGroup } from "@teachinglab/jsvg";
+import { omdTapeDiagram } from "./omdTapeDiagram.js";
+
+export class omdDoubleTapeDiagram extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdDoubleTapeDiagram";
+
+        this.topTapeDiagram = new omdTapeDiagram();
+        this.bottomTapeDiagram = new omdTapeDiagram();
+        
+        this.spacing = 30;
+        
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        // Load spacing first, before updating layout
+        if ( typeof data.spacing !== "undefined" ) {
+            this.spacing = data.spacing;
+        }
+
+        if ( typeof data.topTapeDiagram !== "undefined" ) {
+            this.topTapeDiagram.loadFromJSON(data.topTapeDiagram);
+        }
+
+        if ( typeof data.bottomTapeDiagram !== "undefined" ) {
+            this.bottomTapeDiagram.loadFromJSON(data.bottomTapeDiagram);
+        }
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.removeAllChildren();
+
+        // Calculate total numeric values for both tapes to determine unit width
+        const topTotal = this.calculateTotalValue(this.topTapeDiagram);
+        const bottomTotal = this.calculateTotalValue(this.bottomTapeDiagram);
+        
+        // Find the maximum total to determine a consistent unit width
+        const maxTotal = Math.max(topTotal, bottomTotal);
+        const baseWidth = 300; // Base width for the longest tape
+        const unitWidth = maxTotal > 0 ? baseWidth / maxTotal : baseWidth;
+        
+        // Set each tape's width based on its total value
+        this.topTapeDiagram.totalWidth = topTotal * unitWidth;
+        this.bottomTapeDiagram.totalWidth = bottomTotal * unitWidth;
+        
+        // Force update of both tape diagrams with new widths
+        this.topTapeDiagram.updateLayout();
+        this.bottomTapeDiagram.updateLayout();
+
+        // Calculate the maximum left padding needed to align the start of the tapes
+        const topLeftPadding = this.topTapeDiagram.title ? 80 : 20;
+        const bottomLeftPadding = this.bottomTapeDiagram.title ? 80 : 20;
+        const maxLeftPadding = Math.max(topLeftPadding, bottomLeftPadding);
+
+        // Position top tape diagram
+        const topXOffset = maxLeftPadding - topLeftPadding;
+        this.topTapeDiagram.setPosition(topXOffset, 0);
+        this.addChild(this.topTapeDiagram);
+
+        // Position bottom tape diagram
+        // spacing controls the gap between the bottom of top tape and top of bottom tape
+        const bottomXOffset = maxLeftPadding - bottomLeftPadding;
+        const bottomYPosition = this.topTapeDiagram.height + this.spacing;
+        this.bottomTapeDiagram.setPosition(bottomXOffset, bottomYPosition);
+        this.addChild(this.bottomTapeDiagram);
+
+        // Set overall dimensions
+        const maxWidth = Math.max(
+            this.topTapeDiagram.width + topXOffset,
+            this.bottomTapeDiagram.width + bottomXOffset
+        );
+        this.width = maxWidth;
+        this.height = this.topTapeDiagram.height + this.spacing + this.bottomTapeDiagram.height;
+        this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
+    }
+
+    calculateTotalValue(tapeDiagram)
+    {
+        let total = 0;
+        
+        for (const valueData of tapeDiagram.values) {
+            let value = "";
+            
+            // Handle both old format (simple values) and new format (objects)
+            if (typeof valueData === "object" && valueData !== null) {
+                value = valueData.value || "";
+            } else {
+                value = valueData.toString();
+            }
+
+            // Parse numeric value from string (e.g., "3", "2x", "5y")
+            const match = value.match(/^([0-9.]+)?([a-zA-Z]*)$/);
+            if (match) {
+                const coefficient = match[1] ? parseFloat(match[1]) : (match[2] ? 1 : 1);
+                total += coefficient;
+            } else {
+                total += 1; // Default for unparseable values
+            }
+        }
+        
+        return total;
+    }
+
+}

package/src/omdEquation.js

@@ -9,6 +9,7 @@ import { omdVariable } from "./omdVariable.js";
 import { omdString } from "./omdString.js";
 import { omdNumber } from "./omdNumber.js";
 import { parseEquationString } from "./omdUtils.js";
+import { omdEquationNode } from "../omd/nodes/omdEquationNode.js";
 
 export class omdEquation extends omdMetaExpression
 {
@@ -37,12 +38,24 @@ export class omdEquation extends omdMetaExpression
 
         this.rightHolder = new jsvgGroup();
         this.equationStack.addChild( this.rightHolder );
+
+        this.equationNode = null;
     }
 
     // make an equation (x + 2) = (2x - 3)
 
     loadFromJSON( data )
     {
+        // Prefer math.js parsing into omdEquationNode for richer rendering (functions, rationals, roots)
+        if (typeof data.equation === 'string' && data.equation.trim()) {
+            try {
+                this._renderWithEquationNode(data.equation, data.fontSize);
+                return;
+            } catch (e) {
+                console.warn('⚠️ omdEquation math.js render failed, falling back to legacy parsing:', e?.message || e);
+            }
+        }
+
         // Helper function to fix operator symbols in termsAndOpers arrays
         function fixOperatorSymbols(expressionData) {
             if (expressionData && expressionData.termsAndOpers && Array.isArray(expressionData.termsAndOpers)) {
@@ -136,6 +149,37 @@ export class omdEquation extends omdMetaExpression
         this.updateLayout();
     }
 
+    _renderWithEquationNode(equationString, fontSize) {
+        if (typeof math === 'undefined' || typeof math.parse !== 'function') {
+            throw new Error('math.js is required to parse equation strings');
+        }
+
+        const eqNode = omdEquationNode.fromString(equationString);
+        if (typeof fontSize === 'number' && eqNode.setFontSize) {
+            eqNode.setFontSize(fontSize);
+        }
+
+        if (eqNode.hideBackgroundByDefault) eqNode.hideBackgroundByDefault();
+        if (eqNode.computeDimensions) eqNode.computeDimensions();
+        if (eqNode.updateLayout) eqNode.updateLayout();
+
+        // Clear the legacy stack and render just the parsed node
+        if (typeof this.equationStack.removeAllChildren === 'function') {
+            this.equationStack.removeAllChildren();
+        } else {
+            this.equationStack.childList = [];
+        }
+        this.equationStack.addChild(eqNode);
+        this.equationStack.setSpacer(0);
+
+        this.equationNode = eqNode;
+        this.leftExpression = null;
+        this.rightExpression = null;
+
+        this.centerEquation = false;
+        this.updateLayout();
+    }
+
 
     setLeftAndRightExpressions( leftExp, rightExp )
     {
@@ -156,6 +200,25 @@ export class omdEquation extends omdMetaExpression
 
     updateLayout()
     {
+        if (this.equationNode) {
+            const node = this.equationNode;
+            if (node.computeDimensions) node.computeDimensions();
+            if (node.updateLayout) node.updateLayout();
+
+            this.equationStack.doHorizontalLayout();
+            this.equationStack.setPosition(this.inset, this.inset);
+
+            const W = node.width || this.equationStack.width;
+            const H = node.height || this.equationStack.height;
+
+            this.backRect.setWidthAndHeight( W + this.inset*2, H + this.inset*2 );
+            this.setWidthAndHeight( this.backRect.width, this.backRect.height );
+            this.width = this.backRect.width;
+            this.height = this.backRect.height;
+            this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
+            return;
+        }
+
         this.leftHolder.setWidthAndHeight( this.leftExpression.width, this.leftExpression.height );
         this.rightHolder.setWidthAndHeight( this.rightExpression.width, this.rightExpression.height );
 
@@ -186,4 +249,4 @@ export class omdEquation extends omdMetaExpression
         }
     }
 
-}
+}

package/src/omdFactory.js

@@ -18,8 +18,10 @@
 import { omdBalanceHanger } from './omdBalanceHanger.js';
 import { omdTable } from './omdTable.js';
 import { omdTapeDiagram } from './omdTapeDiagram.js';
+import { omdDoubleTapeDiagram } from './omdDoubleTapeDiagram.js';
 import { omdCoordinatePlane } from './omdCoordinatePlane.js';
 import { omdNumberLine } from './omdNumberLine.js';
+import { omdDoubleNumberLine } from './omdDoubleNumberLine.js';
 import { omdNumberTile } from './omdNumberTile.js';
 import { omdRatioChart } from './omdRatioChart.js';
 import { omdTileEquation } from './omdTileEquation.js';
@@ -48,8 +50,10 @@ const OMD_TYPE_MAP = {
     'balanceHanger': omdBalanceHanger,
     'table': omdTable,
     'tapeDiagram': omdTapeDiagram,
+    'doubleTapeDiagram': omdDoubleTapeDiagram,
     'coordinatePlane': omdCoordinatePlane,
     'numberLine': omdNumberLine,
+    'doubleNumberLine': omdDoubleNumberLine,
     'numberTile': omdNumberTile,
     'ratioChart': omdRatioChart,
     'tileEquation': omdTileEquation,

package/src/omdNumberLine.js

@@ -1,6 +1,6 @@
 
 import { omdColor } from "./omdColor.js";
-import { jsvgGroup, jsvgRect, jsvgLine, jsvgTextBox, jsvgEllipse } from "@teachinglab/jsvg";
+import { jsvgGroup, jsvgRect, jsvgLine, jsvgTextBox, jsvgEllipse, jsvgPath } from "@teachinglab/jsvg";
 
 export class omdNumberLine extends jsvgGroup
 {
@@ -11,8 +11,16 @@ export class omdNumberLine extends jsvgGroup
 
         this.type = "omdNumberLine";
 
+        this.title = "";
         this.min = 0;
         this.max = 10;
+        this.increment = 1;
+        this.showLeftArrow = false;
+        this.showRightArrow = false;
+        this.units = "";
+        this.hideDefaultNumbers = false;
+        this.specialNumbers = [];
+        this.totalWidth = 320;
         this.dotValues = []; 
         this.label = "";  
         this.updateLayout();
@@ -20,16 +28,40 @@ export class omdNumberLine extends jsvgGroup
 
     loadFromJSON( data )
     {
-        if ( typeof data.min != "undefined" )
+        if ( typeof data.title !== "undefined" )
+            this.title = data.title;
+
+        if ( typeof data.min !== "undefined" )
             this.min = data.min;
 
-        if ( typeof data.max != "undefined" )
+        if ( typeof data.max !== "undefined" )
             this.max = data.max;
 
-        if ( typeof data.dotValues != "undefined" )
+        if ( typeof data.increment !== "undefined" )
+            this.increment = data.increment;
+
+        if ( typeof data.showLeftArrow !== "undefined" )
+            this.showLeftArrow = data.showLeftArrow;
+
+        if ( typeof data.showRightArrow !== "undefined" )
+            this.showRightArrow = data.showRightArrow;
+
+        if ( typeof data.units !== "undefined" )
+            this.units = data.units;
+
+        if ( typeof data.hideDefaultNumbers !== "undefined" )
+            this.hideDefaultNumbers = data.hideDefaultNumbers;
+
+        if ( typeof data.specialNumbers !== "undefined" )
+            this.specialNumbers = data.specialNumbers;
+
+        if ( typeof data.totalWidth !== "undefined" )
+            this.totalWidth = data.totalWidth;
+
+        if ( typeof data.dotValues !== "undefined" )
             this.dotValues = data.dotValues;
 
-        if ( typeof data.label != "undefined" )
+        if ( typeof data.label !== "undefined" )
             this.label = data.label;
 
         this.updateLayout();
@@ -52,63 +84,150 @@ export class omdNumberLine extends jsvgGroup
     {
         this.removeAllChildren();
 
+        const leftPadding = this.title ? 80 : 20;
+        const rightPadding = 20;
+        const arrowSize = 10;
+        const tickOverhang = 8; // How much the line extends past the end ticks
+        const lineWidth = this.totalWidth;
+        // Calculate usable width (space for ticks) - subtract space for arrows only
+        const usableLineWidth = lineWidth - (this.showLeftArrow ? arrowSize : 0) - (this.showRightArrow ? arrowSize : 0);
+        
         // Set proper dimensions and viewBox for positioning
-        this.width = 360;
+        this.width = leftPadding + lineWidth + rightPadding;
         this.height = 70;
         this.svgObject.setAttribute('viewBox', `0 0 ${this.width} ${this.height}`);
 
-        // make line
+        // Add title if present
+        if (this.title) {
+            const titleText = new jsvgTextBox();
+            titleText.setWidthAndHeight(70, 30);
+            titleText.setFontFamily("Albert Sans");
+            titleText.setFontColor("black");
+            titleText.setFontSize(12);
+            titleText.setAlignment("left");
+            titleText.setText(this.title);
+            titleText.setPosition(5, 20);
+            this.addChild(titleText);
+        }
+
+        // Calculate line position and width
+        // Line starts at: leftPadding + (arrow space if present), and extends past ticks by tickOverhang on each end
+        const lineStartX = leftPadding + (this.showLeftArrow ? arrowSize : 0);
+        const lineActualWidth = usableLineWidth; // This is the space between arrows (or edges), ticks go here with overhang
+
+        // Draw main line (extends past the first and last ticks by tickOverhang)
         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( 20, 22.5 );
-        this.line.setFillColor( omdColor.mediumGray );
-        this.line.setCornerRadius( 2.5 );
-        this.addChild( this.line );
-
-        // make ticks with text
-        for( var i=this.min; i<=this.max; i++ )
-        {
-            var N = i - this.min;
-            var dX = 300 / (this.max - this.min);
-
-            var pX = 30 + N*dX;
-
-            var tick = new jsvgLine();
-            tick.setStrokeColor( "black" );
-            tick.setStrokeWidth( 1 );
-            tick.setEndpoints( pX, 20, pX, 30 );
-            this.addChild( tick );
-
-            var tickText = new jsvgTextBox();
-            tickText.setWidthAndHeight( 30,30 );
-            tickText.setText ( this.name );
-            tickText.setFontFamily( "Albert Sans" );
-            tickText.setFontColor( "black" );
-            tickText.setFontSize( 10 );
+        this.line.setWidthAndHeight(lineActualWidth, 5);
+        this.line.setPosition(lineStartX, 22.5);
+        this.line.setFillColor(omdColor.mediumGray);
+        this.line.setCornerRadius(2.5);
+        this.addChild(this.line);
+
+        // Draw left arrow if needed
+        if (this.showLeftArrow) {
+            // Cover the rounded corner with a rectangle
+            const coverRect = new jsvgRect();
+            coverRect.setWidthAndHeight(3, 5);
+            coverRect.setPosition(lineStartX, 22.5);
+            coverRect.setFillColor(omdColor.mediumGray);
+            this.addChild(coverRect);
+            
+            const leftArrow = new jsvgPath();
+            const arrowY = 25;
+            const arrowX = leftPadding; // Arrow tip position
+            leftArrow.addPoint(arrowX + arrowSize, arrowY - 5);
+            leftArrow.addPoint(arrowX, arrowY);
+            leftArrow.addPoint(arrowX + arrowSize, arrowY + 5);
+            leftArrow.addPoint(arrowX + arrowSize, arrowY - 5); // Close the path
+            leftArrow.updatePath();
+            leftArrow.setFillColor(omdColor.mediumGray);
+            leftArrow.setStrokeWidth(0);
+            leftArrow.path.setAttribute("fill", omdColor.mediumGray);
+            this.addChild(leftArrow);
+        }
+
+        // Draw right arrow if needed
+        if (this.showRightArrow) {
+            // Cover the rounded corner with a rectangle
+            const coverRect = new jsvgRect();
+            coverRect.setWidthAndHeight(3, 5);
+            coverRect.setPosition(lineStartX + lineActualWidth - 3, 22.5);
+            coverRect.setFillColor(omdColor.mediumGray);
+            this.addChild(coverRect);
+            
+            const rightArrow = new jsvgPath();
+            const arrowY = 25;
+            const arrowX = leftPadding + lineWidth - arrowSize; // Arrow tip position
+            rightArrow.addPoint(arrowX, arrowY - 5);
+            rightArrow.addPoint(arrowX + arrowSize, arrowY);
+            rightArrow.addPoint(arrowX, arrowY + 5);
+            rightArrow.addPoint(arrowX, arrowY - 5); // Close the path
+            rightArrow.updatePath();
+            rightArrow.setFillColor(omdColor.mediumGray);
+            rightArrow.setStrokeWidth(0);
+            rightArrow.path.setAttribute("fill", omdColor.mediumGray);
+            this.addChild(rightArrow);
+        }
+
+        // Collect all numbers that should be displayed
+        const numbersToShow = new Set();
+        
+        // Add increment-based numbers if not hidden
+        if (!this.hideDefaultNumbers) {
+            for (let i = this.min; i <= this.max; i += this.increment) {
+                numbersToShow.add(i);
+            }
+        }
+
+        // Add special numbers
+        for (const num of this.specialNumbers) {
+            if (num >= this.min && num <= this.max) {
+                numbersToShow.add(num);
+            }
+        }
+
+        // Draw ticks and labels for all numbers
+        const sortedNumbers = Array.from(numbersToShow).sort((a, b) => a - b);
+        // Ticks are positioned with tickOverhang on both ends
+        const tickBaseX = lineStartX + tickOverhang;
+        const tickSpan = usableLineWidth - 2 * tickOverhang; // Space for ticks between the overhangs
+        for (const value of sortedNumbers) {
+            const normalized = (value - this.min) / (this.max - this.min);
+            const pX = tickBaseX + normalized * tickSpan;
+
+            // Draw tick
+            const tick = new jsvgLine();
+            tick.setStrokeColor("black");
+            tick.setStrokeWidth(1);
+            tick.setEndpoints(pX, 20, pX, 30);
+            this.addChild(tick);
+
+            // Draw label
+            const tickText = new jsvgTextBox();
+            tickText.setWidthAndHeight(40, 30);
+            tickText.setFontFamily("Albert Sans");
+            tickText.setFontColor("black");
+            tickText.setFontSize(10);
             tickText.setAlignment("center");
-            tickText.setText( i.toString() );
-            tickText.setPosition( pX-15, 32 );
-            this.addChild( tickText );
+            const labelText = this.units ? `${value}${this.units}` : value.toString();
+            tickText.setText(labelText);
+            tickText.setPosition(pX - 20, 32);
+            this.addChild(tickText);
         }
 
-        // make dots
-        for( var i=0; i<this.dotValues.length; i++ )
-        {
-            var V = this.dotValues[i];
-
-            var N = V - this.min;
-            var dX = 300 / (this.max - this.min);
-            var pX = 30 + N*dX;
-
-            var dot = new jsvgEllipse();
-            dot.setFillColor( "black" );
-            dot.setStrokeWidth( 0 );
-            dot.setWidthAndHeight( 9,9 );
-            dot.setPosition( pX, 25 );
-            this.addChild( dot );
+        // Draw dots
+        for (const V of this.dotValues) {
+            if (V < this.min || V > this.max) continue;
+            
+            const normalized = (V - this.min) / (this.max - this.min);
+            const pX = tickBaseX + normalized * tickSpan;
+
+            const dot = new jsvgEllipse();
+            dot.setFillColor("black");
+            dot.setStrokeWidth(0);
+            dot.setWidthAndHeight(8, 8);
+            dot.setPosition(pX, 25);
+            this.addChild(dot);
         }
     }