@teachinglab/omd 0.6.5 → 0.6.7

package/index.js

@@ -11,9 +11,6 @@
  * const { omdTable } = await import('@teachinglab/omd')
  */
 
-// Ensure math.js is available globally before loading modules that rely on window/global math
-import './omd/utils/registerMathGlobal.js';
-
 // Import everything first to ensure proper loading order
 import * as omdCore from './omd/core/index.js';
 import * as omdCanvas from './canvas/index.js';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.6.5",
+  "version": "0.6.7",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",
   "type": "module",
   "exports": {
     ".": "./index.js",
+    "./register-math": "./omd/utils/registerMathGlobal.js",
     "./package.json": "./package.json"
   },
   "files": [
@@ -56,4 +57,3 @@
     "vite": "^5.4.0"
   }
 }
-

package/src/index.js

@@ -3,11 +3,13 @@ export { omdTable } from './omdTable.js';
 export { omdBalanceHanger } from './omdBalanceHanger.js';
 export { omdCoordinatePlane } from './omdCoordinatePlane.js';
 export { omdTapeDiagram } from './omdTapeDiagram.js';
+export { omdDoubleTapeDiagram } from './omdDoubleTapeDiagram.js';
 export { omdTileEquation } from './omdTileEquation.js';
 
 // OMD Charts and Diagrams
 export { omdRatioChart } from './omdRatioChart.js';
 export { omdNumberLine } from './omdNumberLine.js';
+export { omdDoubleNumberLine } from './omdDoubleNumberLine.js';
 export { omdNumberTile } from './omdNumberTile.js';
 
 // OMD Mathematical Components
@@ -52,7 +54,8 @@ export default {
         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)
+        omdNumberLine: () => import('./omdNumberLine.js').then(m => m.omdNumberLine),
+        omdDoubleNumberLine: () => import('./omdDoubleNumberLine.js').then(m => m.omdDoubleNumberLine)
     },
     
     // Mathematical expressions

package/src/json-schemas.md

@@ -105,24 +105,85 @@ This document provides schemas and examples for the `loadFromJSON` method used i
 ### Schema
 ```json
 {
-  "values": ["array"],
-  "showValues": "boolean",
-  "colors": ["array"],
-  "labelSet": ["array"],
-  "unitWidth": "number"
+  "title": "string (optional)",
+  "values": ["array (required) - can be strings or objects with {value, showLabel, color}"],
+  "labelSet": ["array (optional) - objects with {startIndex, endIndex, label, showBelow}"],
+  "totalWidth": "number (optional, default: 300)"
 }
 ```
 
-### Example
+### Example with Simple Values
 ```json
 {
-  "values": [1, 2, 3],
-  "showValues": true,
-  "colors": ["#FF0000", "#00FF00", "#0000FF"],
+  "title": "Distance",
+  "totalWidth": 300,
+  "values": ["2x", "3", "x"],
   "labelSet": [
-    { "startIndex": 0, "endIndex": 2, "label": "Example Label", "showBelow": true }
+    { "startIndex": 0, "endIndex": 3, "label": "Total: 3x + 3", "showBelow": true },
+    { "startIndex": 0, "endIndex": 1, "label": "2x", "showBelow": false }
+  ]
+}
+```
+
+### Example with Value Objects
+```json
+{
+  "title": "Pencils",
+  "totalWidth": 320,
+  "values": [
+    { "value": "5", "showLabel": true, "color": "#93c5fd" },
+    { "value": "5", "showLabel": true, "color": "#93c5fd" },
+    { "value": "5", "showLabel": false, "color": "#fca5a5" }
   ],
-  "unitWidth": 30
+  "labelSet": [
+    { "startIndex": 0, "endIndex": 3, "label": "15 total", "showBelow": true }
+  ]
+}
+```
+
+---
+
+## 4b. `omdDoubleTapeDiagram`
+
+`omdDoubleTapeDiagram` represents two tape diagrams aligned by their start points.
+
+### Schema
+```json
+{
+  "topTapeDiagram": "object (omdTapeDiagram)",
+  "bottomTapeDiagram": "object (omdTapeDiagram)",
+  "spacing": "number (optional, default: 10)"
+}
+```
+
+### Example
+```json
+{
+  "topTapeDiagram": {
+    "title": "Pencils",
+    "totalWidth": 320,
+    "values": [
+      { "value": "5", "color": "#93c5fd" },
+      { "value": "5", "color": "#93c5fd" },
+      { "value": "5", "color": "#93c5fd" }
+    ],
+    "labelSet": [
+      { "startIndex": 0, "endIndex": 3, "label": "15 total", "showBelow": true }
+    ]
+  },
+  "bottomTapeDiagram": {
+    "title": "Cost",
+    "totalWidth": 320,
+    "values": [
+      { "value": "$2", "color": "#fca5a5" },
+      { "value": "$2", "color": "#fca5a5" },
+      { "value": "$2", "color": "#fca5a5" }
+    ],
+    "labelSet": [
+      { "startIndex": 0, "endIndex": 3, "label": "$6 total", "showBelow": true }
+    ]
+  },
+  "spacing": 80
 }
 ```
 
@@ -398,25 +459,85 @@ This document provides schemas and examples for the `loadFromJSON` method used i
 
 ## 15. `omdNumberLine`
 
-`omdNumberLine` represents a number line with labeled ticks and optional dots.
+`omdNumberLine` represents a number line with labeled ticks, optional title, custom increments, units, arrows, and special numbers.
 
 ### Schema
 ```json
 {
-  "min": "number",
-  "max": "number",
-  "dotValues": ["array"],
-  "label": "string"
+  "title": "string (optional)",
+  "min": "number (required)",
+  "max": "number (required)",
+  "increment": "number (optional, default: 1)",
+  "showLeftArrow": "boolean (optional, default: false)",
+  "showRightArrow": "boolean (optional, default: false)",
+  "units": "string (optional)",
+  "hideDefaultNumbers": "boolean (optional, default: false)",
+  "specialNumbers": ["array (optional)"],
+  "totalWidth": "number (optional, default: 320)",
+  "dotValues": ["array (optional)"]
 }
 ```
 
 ### Example
 ```json
 {
+  "title": "Distance",
   "min": 0,
   "max": 10,
-  "dotValues": [1, 5, 7],
-  "label": "Number Line"
+  "increment": 1,
+  "units": " cm",
+  "dotValues": [1, 5, 7]
+}
+```
+
+### Example with Special Numbers
+```json
+{
+  "title": "Height",
+  "min": 0,
+  "max": 100,
+  "increment": 10,
+  "specialNumbers": [25, 75],
+  "units": " m",
+  "showRightArrow": true,
+  "hideDefaultNumbers": false,
+  "totalWidth": 400
+}
+```
+
+---
+
+## 15b. `omdDoubleNumberLine`
+
+`omdDoubleNumberLine` represents two number lines aligned by their start points, useful for showing proportional relationships.
+
+### Schema
+```json
+{
+  "topNumberLine": "object (omdNumberLine)",
+  "bottomNumberLine": "object (omdNumberLine)",
+  "spacing": "number (optional, default: 10)"
+}
+```
+
+### Example
+```json
+{
+  "topNumberLine": {
+    "title": "Hours",
+    "min": 0,
+    "max": 10,
+    "showRightArrow": true,
+    "increment": 1
+  },
+  "bottomNumberLine": {
+    "showRightArrow": true,
+    "title": "Miles",
+    "min": 0,
+    "max": 50,
+    "increment": 10
+  },
+  "spacing": 15
 }
 ```
 

package/src/omd.js

@@ -12,7 +12,9 @@ import { omdEquation } from "./omdEquation.js";
 import { omdEquationNode } from "../omd/nodes/omdEquationNode.js";
 import { omdFunction } from "./omdFunction.js";
 import { omdNumberLine } from "./omdNumberLine.js";
+import { omdDoubleNumberLine } from "./omdDoubleNumberLine.js";
 import { omdTapeDiagram } from "./omdTapeDiagram.js";
+import { omdDoubleTapeDiagram } from "./omdDoubleTapeDiagram.js";
 import { omdBalanceHanger } from "./omdBalanceHanger.js";
 import { omdNumberTile } from "./omdNumberTile.js";
 import { omdRatioChart } from "./omdRatioChart.js";
@@ -122,12 +124,18 @@ export class omd extends jsvgContainer
             case "numberLine":
                 N = new omdNumberLine();
                 break;
+            case "doubleNumberLine":
+                N = new omdDoubleNumberLine();
+                break;
             case "balanceHanger":
                 N = new omdBalanceHanger();
                 break;
             case "tapeDiagram":
                 N = new omdTapeDiagram();
                 break;
+            case "doubleTapeDiagram":
+                N = new omdDoubleTapeDiagram();
+                break;
             case "numberTile":
                 N = new omdNumberTile();
                 break;

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/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);
         }
     }
 

package/src/omdTapeDiagram.js

@@ -111,30 +111,26 @@ export class omdTapeDiagram extends jsvgGroup
 
         this.type = "omdTapeDiagram";
 
+        this.title = "";
         this.values = []; 
-        this.showValues = true;
-        this.colors = [];
         this.labelSet = [];
-        this.unitWidth = 30;
+        this.totalWidth = 300;
         this.updateLayout();
     }
 
     loadFromJSON( data )
     {
-        if ( typeof data.values != "undefined" )
-            this.values = data.values;
+        if ( typeof data.title !== "undefined" )
+            this.title = data.title;
 
-        if ( typeof data.showValues != "undefined" )
-            this.showValues = data.showValues;
-
-        if ( typeof data.colors != "undefined" )
-            this.colors = data.colors;
+        if ( typeof data.values !== "undefined" )
+            this.values = data.values;
 
-        if ( typeof data.labelSet != "undefined" )
+        if ( typeof data.labelSet !== "undefined" )
             this.labelSet = data.labelSet;
 
-        if ( typeof data.unitWidth != "undefined" )
-            this.unitWidth = data.unitWidth;
+        if ( typeof data.totalWidth !== "undefined" )
+            this.totalWidth = data.totalWidth;
 
         this.updateLayout();
     }
@@ -142,104 +138,182 @@ export class omdTapeDiagram extends jsvgGroup
     setValues( newValues )
     {
         this.values = newValues;
+        this.updateLayout();
     }
 
     updateLayout()
     {
         this.removeAllChildren();
 
-        // console.log( this.values );
+        const leftPadding = this.title ? 80 : 20;
+        const rightPadding = 20;
+        const titleWidth = 70;
+        
+        // Add title if present
+        if (this.title) {
+            const titleText = new jsvgTextBox();
+            titleText.setWidthAndHeight(titleWidth, 30);
+            titleText.setFontFamily("Albert Sans");
+            titleText.setFontColor("black");
+            titleText.setFontSize(12);
+            titleText.setAlignment("left");
+            titleText.setText(this.title);
+            titleText.setPosition(5, 5);
+            this.addChild(titleText);
+        }
 
-        // make box with text
-        var pX = 0;
+        // Parse values and calculate proportional widths
+        const parsedValues = [];
+        let totalNumericValue = 0;
+        
+        for (const valueData of this.values) {
+            let value = "";
+            let showLabel = true;
+            let color = omdColor.lightGray;
+            let numericValue = 1; // default for non-numeric
+
+            // Handle both old format (simple values) and new format (objects)
+            if (typeof valueData === "object" && valueData !== null) {
+                value = valueData.value || "";
+                showLabel = valueData.showLabel !== undefined ? valueData.showLabel : true;
+                color = valueData.color || omdColor.lightGray;
+            } else {
+                value = valueData.toString();
+            }
+
+            // Parse numeric value from string (e.g., "3", "2x", "5y")
+            // Extract coefficient from expressions like "2x", "3", "0.5y"
+            const match = value.match(/^([0-9.]+)?([a-zA-Z]*)$/);
+            if (match) {
+                const coefficient = match[1] ? parseFloat(match[1]) : (match[2] ? 1 : 1);
+                const variable = match[2] || "";
+                numericValue = coefficient;
+            }
+
+            parsedValues.push({ value, showLabel, color, numericValue });
+            totalNumericValue += numericValue;
+        }
+
+        // Calculate width for each segment based on proportion
+        var pX = leftPadding;
         var indexPositions = [];
-        for( var i=0; i<this.values.length; i++ )
-        {
+        
+        for (const parsed of parsedValues) {
             indexPositions.push(pX);
 
-            var value = this.values[i];
-            var W = 30;
-            if ( typeof value == "string" )
-            {
-                W = 20 + value.length*10;
-            }
-            else
-            {
-                W = value * this.unitWidth;
-            }
-            
+            // Calculate proportional width
+            const proportion = totalNumericValue > 0 ? parsed.numericValue / totalNumericValue : 1 / parsedValues.length;
+            const segmentWidth = this.totalWidth * proportion;
 
-            // make box
+            // Make box
             var box = new jsvgRect();
-            box.setWidthAndHeight( W, 30 );
+            box.setWidthAndHeight(segmentWidth, 30);
             box.setCornerRadius(5);
-            box.setStrokeColor( "white" );
-            box.setStrokeWidth( 1 );
-            
-            // Use custom color if available, otherwise default to light gray
-            var boxColor = omdColor.lightGray;
-            if ( this.colors && this.colors.length > i && this.colors[i] )
-            {
-                boxColor = this.colors[i];
+            box.setStrokeColor("white");
+            box.setStrokeWidth(1);
+            box.setFillColor(parsed.color);
+            box.setPosition(pX, 0);
+            this.addChild(box);
+
+            // Make box text (if showLabel is true)
+            if (parsed.showLabel) {
+                var boxText = new jsvgTextBox();
+                boxText.setWidthAndHeight(segmentWidth, 30);
+                boxText.setFontFamily("Albert Sans");
+                boxText.setFontColor("black");
+                boxText.setFontSize(18);
+                boxText.setAlignment("center");
+                boxText.setVerticalCentering();
+                boxText.setText(parsed.value);
+                boxText.setPosition(pX, 0);
+                this.addChild(boxText);
             }
-            box.setFillColor( boxColor );
-            
-            box.setPosition( pX, 0 );
-            this.addChild( box );
-
-            // make box text
-            var boxText = new jsvgTextBox();
-            boxText.setWidthAndHeight( W,30 );
-            boxText.setText ( this.name );
-            boxText.setFontFamily( "Albert Sans" );
-            boxText.setFontColor( "black" );
-            boxText.setFontSize( 18 );
-            boxText.setAlignment("center");
-            boxText.setVerticalCentering();
-            boxText.setText( value.toString() );
-            boxText.setPosition( pX, 0 );
-            this.addChild( boxText );
-
-            pX += W;
+
+            pX += segmentWidth;
         }
 
         indexPositions.push(pX);
 
-        // Calculate actual content dimensions
-        var contentWidth = pX; // Total width of all boxes
-        var contentHeight = 30; // Height of the tape
-        var labelHeight = 0;
+        // Calculate dimensions
+        var contentWidth = pX - leftPadding;
+        var contentHeight = 30;
+        var topLabelSpace = 0;
+        var bottomLabelSpace = 0;
 
-        // Check if labels extend the height
-        for ( var labelData of this.labelSet )
-        {
-            if ( labelData.showBelow )
-                labelHeight = Math.max(labelHeight, 70); // 40 offset + 30 text height
-            else
-                labelHeight = Math.max(labelHeight, 30); // 20 offset above + 10 buffer
-        }
-        
-        if ( labelHeight > 0 )
-            contentHeight += labelHeight;
+        // Sort labels by span length (number of segments they cover)
+        const sortedLabels = this.labelSet.slice().map((labelData, index) => ({
+            data: labelData,
+            span: (labelData.endIndex || 0) - (labelData.startIndex || 0)
+        })).sort((a, b) => a.span - b.span); // Shortest first
 
-        // make label text
-        for ( var labelData of this.labelSet )
+        // Track occupied label layers to prevent overlap
+        const topLayers = [];
+        const bottomLayers = [];
+
+        // Make label text
+        for ( const item of sortedLabels )
         {
-            var T = new omdTapeLabel();
-            T.unitWidth = this.unitWidth;
+            const labelData = item.data;
+            const T = new omdTapeLabel();
             T.setIndexPositions( indexPositions );
             T.loadFromJSON( labelData );
-            if ( T.showBelow )
-                T.setPosition( 0, 40 );
-            else
-                T.setPosition( 0, -10 );
-            this.addChild( T )
+            
+            if ( T.showBelow ) {
+                // Find the lowest available layer for this label
+                let layer = 0;
+                const start = labelData.startIndex || 0;
+                const end = labelData.endIndex || 0;
+                
+                while (layer < bottomLayers.length) {
+                    const conflicts = bottomLayers[layer].some(occupied => 
+                        !(end <= occupied.start || start >= occupied.end)
+                    );
+                    if (!conflicts) break;
+                    layer++;
+                }
+                
+                if (layer === bottomLayers.length) {
+                    bottomLayers.push([]);
+                }
+                bottomLayers[layer].push({ start, end });
+                
+                const yPos = 40 + (layer * 35); // Stack labels with 35px spacing
+                T.setPosition(0, yPos);
+                bottomLabelSpace = Math.max(bottomLabelSpace, yPos + 30);
+            } else {
+                // Find the highest available layer for this label
+                let layer = 0;
+                const start = labelData.startIndex || 0;
+                const end = labelData.endIndex || 0;
+                
+                while (layer < topLayers.length) {
+                    const conflicts = topLayers[layer].some(occupied => 
+                        !(end <= occupied.start || start >= occupied.end)
+                    );
+                    if (!conflicts) break;
+                    layer++;
+                }
+                
+                if (layer === topLayers.length) {
+                    topLayers.push([]);
+                }
+                topLayers[layer].push({ start, end });
+                
+                const yPos = -10 - (layer * 35); // Stack labels upward with 35px spacing
+                T.setPosition(0, yPos);
+                topLabelSpace = Math.max(topLabelSpace, (layer + 1) * 35);
+            }
+            
+            this.addChild( T );
         }
-
-        // Set proper bounds to hug the content
-        this.setWidthAndHeight( contentWidth, contentHeight );
-        // Fix the viewBox to match our actual content dimensions (no padding)
-        this.svgObject.setAttribute("viewBox", `0 0 ${contentWidth} ${contentHeight}`);
+        // Set proper dimensions including space for labels above and below
+        this.width = leftPadding + contentWidth + rightPadding;
+        this.height = topLabelSpace + contentHeight + bottomLabelSpace;
+        // Adjust viewBox to show everything including title and labels
+        const viewBoxY = -topLabelSpace;
+        const viewBoxHeight = this.height;
+        this.svgObject.setAttribute("viewBox", `0 ${viewBoxY} ${this.width} ${viewBoxHeight}`);
+        this.svgObject.setAttribute("viewBox", `0 ${-topLabelSpace} ${this.width} ${this.height}`);
     }
 
 }