@teachinglab/omd 0.6.6 → 0.7.0

package/canvas/features/resizeHandleManager.js

@@ -37,6 +37,10 @@ export class ResizeHandleManager {
         if (!element || !element.classList.contains('omd-item')) {
             return;
         }
+
+        if (element?.dataset?.locked === 'true') {
+            return;
+        }
         
         this.selectedElement = element;
         this._createSelectionBorder();

package/canvas/tools/SelectTool.js

@@ -72,7 +72,10 @@ export class SelectTool extends Tool {
         }
 
         const segmentSelection = this._findSegmentAtPoint(event.x, event.y);
-        const omdElement = this._findOMDElementAtPoint(event.x, event.y);
+        let omdElement = this._findOMDElementAtPoint(event.x, event.y);
+        if (omdElement?.dataset?.locked === 'true') {
+            omdElement = null;
+        }
 
         if (segmentSelection) {
             // Clicking on a stroke segment - clear OMD selection and handle segment selection
@@ -473,8 +476,11 @@ export class SelectTool extends Tool {
         
         // Check all OMD items in the layer
         const omdItems = omdLayer.querySelectorAll('.omd-item');
-        
+
         for (const item of omdItems) {
+            if (item?.dataset?.locked === 'true') {
+                continue;
+            }
             try {
                 // Get the bounding box of the item
                 const bbox = item.getBBox();

package/canvas/ui/toolbar.js

@@ -11,6 +11,9 @@ export class Toolbar {
         this.buttons = new Map();
         this.activeButton = null;
         this.omdColor = omdColor; // Use omdColor for consistent styling
+        this.toolbarWidth = 64;
+        this.toolbarHeight = 28;
+        this.customPosition = null;
         
         
         
@@ -44,8 +47,7 @@ export class Toolbar {
         
         
     // Initial size, will be updated after buttons are created
-    this.background.setWidthAndHeight(100, 54);
-    this.background.setCornerRadius(27); // Pill shape
+    this._setToolbarSize(this.toolbarWidth, this.toolbarHeight);
     this.background.setFillColor(this.omdColor.mediumGray); // Modern dark, semi-transparent
         
         
@@ -58,7 +60,7 @@ export class Toolbar {
         
         
         // Position the toolbar at bottom center
-        this._updatePosition();``
+        this._updatePosition();
         
     // Add to main SVG so it is rendered
     this.canvas.svg.appendChild(this.toolbarGroup.svgObject);
@@ -70,16 +72,12 @@ export class Toolbar {
      */
     _updatePosition() {
     const canvasRect = this.canvas.container.getBoundingClientRect();
-    const toolbarWidth = this.background.width;
-    const toolbarHeight = this.background.height;
+    const toolbarWidth = this.toolbarWidth;
+    const toolbarHeight = this.toolbarHeight;
             // Bottom center, 24px from bottom
         const x = (canvasRect.width - toolbarWidth) / 2;
         const y = canvasRect.height - toolbarHeight - 24;
-        
-        // Ensure toolbar stays within canvas bounds
-        const clampedX = Math.max(0, Math.min(x, canvasRect.width - toolbarWidth));
-        const clampedY = Math.max(0, Math.min(y, canvasRect.height - toolbarHeight));
-    this.toolbarGroup.setPosition(x, y);
+        this._applyPosition(x, y);
         
         // Debug the SVG object
         
@@ -88,14 +86,7 @@ export class Toolbar {
         this.toolbarGroup.svgObject.style.pointerEvents = 'auto';
         
         // Fix the viewBox to include the toolbar position
-        const bgWidth = this.background.width;
-        const bgHeight = this.background.height;
-        const viewBoxX = x;
-        const viewBoxY = y;
-        const viewBoxWidth = Math.max(500, x + bgWidth);
-        const viewBoxHeight = Math.max(500, y + bgHeight);
-        
-        this.toolbarGroup.svgObject.setAttribute('viewBox', `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`);
+        this._updateViewBox(x, y);
         
         // Don't set x/y attributes - let setPosition handle it via transform
         // this.toolbarGroup.svgObject.setAttribute('x', x);
@@ -109,9 +100,9 @@ export class Toolbar {
     _createToolButtons() {
         const tools = this.canvas.toolManager.getAllToolMetadata();
         
-        const buttonSize = 48;
-        const spacing = 8;
-        const padding = 6;
+        const buttonSize = 24;
+        const spacing = 4;
+        const padding = 4;
         let xPos = padding;
         const yPos = padding;
         tools.forEach(toolMeta => {
@@ -124,8 +115,7 @@ export class Toolbar {
         // Remove last spacing
         const totalWidth = xPos - spacing + padding;
         const totalHeight = buttonSize + 2 * padding;
-        this.background.setWidthAndHeight(totalWidth, totalHeight);
-        this.background.setCornerRadius(totalHeight / 2);
+        this._setToolbarSize(totalWidth, totalHeight);
         // Reposition after sizing
         this._updatePosition();
         
@@ -215,6 +205,33 @@ export class Toolbar {
             this.activeButton = null;
         }
     }
+
+    _setToolbarSize(width, height) {
+        this.toolbarWidth = width;
+        this.toolbarHeight = height;
+        this.background.setWidthAndHeight(width, height);
+        this.background.setCornerRadius(height / 2);
+    }
+
+    _applyPosition(x, y) {
+        const canvasRect = this.canvas.container.getBoundingClientRect();
+        const clampedX = Math.max(0, Math.min(x, canvasRect.width - this.toolbarWidth));
+        const clampedY = Math.max(0, Math.min(y, canvasRect.height - this.toolbarHeight));
+        this.customPosition = { x: clampedX, y: clampedY };
+        this.toolbarGroup.setPosition(clampedX, clampedY);
+        this._updateViewBox(clampedX, clampedY);
+    }
+
+    _updateViewBox(x, y) {
+        this.toolbarGroup.svgObject.setAttribute('viewBox', `${x} ${y} ${this.toolbarWidth} ${this.toolbarHeight}`);
+    }
+
+    setBoundaryPosition(lineY) {
+        const canvasRect = this.canvas.container.getBoundingClientRect();
+        const x = (canvasRect.width - this.toolbarWidth) / 2;
+        const y = lineY - this.toolbarHeight;
+        this._applyPosition(x, y);
+    }
     
     /**
      * Add custom button to toolbar

package/index.js

@@ -29,6 +29,7 @@ export { EventManager } from './canvas/events/eventManager.js';
 
 // Export utility components
 export { omdNodeOverlay, omdNodeOverlayPresets } from './omd/utils/omdNodeOverlay.js';
+export { omdTranscriptionService } from './omd/utils/omdTranscriptionService.js';
 
 // Re-export the most commonly used components for easy access
 export { omdTable } from './src/omdTable.js';
@@ -77,4 +78,4 @@ export default {
         const { omdDisplay } = await import('./omd/core/index.js');
         return new omdDisplay(container);
     }
-}; 
+};

package/jsvg/jsvgComponents.js

@@ -1,4 +1,5 @@
 import { jsvgGroup, jsvgRect, jsvgTextLine, jsvgImage, jsvgClipMask } from './jsvg.js';
+export * from './jsvg.js';
 
 // ================ jsvgButton ================================= //
 
@@ -355,4 +356,4 @@ export class jsvgScrollbox extends jsvgGroup
         }
     }
 
-}
+}

package/npm-docs/json-schemas.md

@@ -460,54 +460,39 @@ Tabular data display with customizable styling.
 
 #### `omdEquation`
 
-Complete mathematical equations with left and right sides.
+Complete mathematical equations. The visual component now uses the same math.js-powered parser and renderer as the interactive core (functions, rationals, roots, etc.).
 
-**Schema (String Form):**
+**Preferred schema (string form):**
 ```json
 {
-  "equation": "2x + 3 = 11"
+  "equation": "sin(x) + 2 = 3"
 }
 ```
 
-**Schema (Structured Form):**
+**Structured fallback (legacy):**
 ```typescript
 {
-  leftExpression: Expression | string,
-  rightExpression: Expression | string,
-  equation?: string
+  leftExpression?: Expression | string,
+  rightExpression?: Expression | string,
+  equation: string
 }
 ```
 
 **Examples:**
 ```json
-{
-  "equation": "2x + 3 = 11"
-}
+{ "equation": "sin(x) + 2 = 3" }
 ```
-
 ```json
-{
-  "leftExpression": {
-    "termsAndOpers": [
-      { "omdType": "term", "coefficient": 2, "variable": "x" },
-      { "omdType": "operator", "operator": "+" },
-      { "omdType": "number", "value": 3 }
-    ]
-  },
-  "rightExpression": {
-    "omdType": "number",
-    "value": 11
-  }
-}
+{ "equation": "(x^2 + 3x - 4)/(2x) = 5" }
 ```
 
 **Usage:**
 ```javascript
-// Simple string form
+// Preferred string form (math.js parsing)
 const eq = new omdEquation();
-eq.loadFromJSON({ equation: '2x + 3 = 11' });
+eq.loadFromJSON({ equation: 'sqrt(x+1) = 4', fontSize: 32 });
 
-// Structured form
+// Legacy structured form (if you already have parsed pieces)
 eq.loadFromJSON({
   leftExpression: { omdType: 'term', coefficient: 2, variable: 'x' },
   rightExpression: { omdType: 'number', value: 11 }

package/omd/display/omdDisplay.js

@@ -55,6 +55,8 @@ export class omdDisplay {
         const height = this.container.offsetHeight || 600;
 
         this.svg.setViewbox(width, height);
+        this.svg.svgObject.style.width = '100%';
+        this.svg.svgObject.style.height = '100%';
         this.svg.svgObject.style.verticalAlign = "middle";
         // Enable internal scrolling via native SVG scrolling if content overflows
         this.svg.svgObject.style.overflow = 'hidden';
@@ -768,18 +770,7 @@ export class omdDisplay {
     render(expression) {
         // Clear previous node
         if (this.node) {
-            if (this._contentGroup && this.node && this.node.svgObject) {
-                try {
-                    if (this.node.svgObject.parentNode === this._contentGroup) {
-                        this._contentGroup.removeChild(this.node.svgObject);
-                    }
-                } catch (e) {
-                    // Fallback to svg remove
-                    this.svg.removeChild(this.node);
-                }
-            } else {
-                this.svg.removeChild(this.node);
-            }
+            this.removeChild(this.node);
         }
 
         // Create node from expression
@@ -992,7 +983,7 @@ export class omdDisplay {
      */
     clear() {
         if (this.node) {
-            this.svg.removeChild(this.node);
+            this.removeChild(this.node);
             this.node = null;
         }
     }

package/omd/nodes/omdFunctionNode.js

@@ -100,6 +100,7 @@ export class omdFunctionNode extends omdNode {
         // Calculate dimensions using getTextBounds for consistency
         const ratio = fontSize / this.getRootFontSize();
         const spacing = 2 * ratio;
+        const parenSpacing = 2 * ratio; // Spacing between function name and opening parenthesis
         
         const functionNameBounds = getTextBounds(this.functionName, fontSize);
         const openParenBounds = getTextBounds('(', fontSize);
@@ -117,7 +118,7 @@ export class omdFunctionNode extends omdNode {
             }
         });
         
-        const totalWidth = functionNameBounds.width + openParenBounds.width + totalArgWidth + closeParenBounds.width + (spacing * 2);
+        const totalWidth = functionNameBounds.width + parenSpacing + openParenBounds.width + totalArgWidth + closeParenBounds.width + (spacing * 2);
         const totalHeight = Math.max(maxArgHeight, functionNameBounds.height, openParenBounds.height, closeParenBounds.height) + 4 * ratio;
         
         this.setWidthAndHeight(totalWidth, totalHeight);
@@ -132,6 +133,7 @@ export class omdFunctionNode extends omdNode {
         const argFontSize = fontSize * 5/6;
         const ratio = fontSize / this.getRootFontSize();
         const spacing = 2 * ratio;
+        const parenSpacing = 2 * ratio; // Spacing between function name and opening parenthesis
         
         let currentX = 0;
         const textY = this.height / 2;
@@ -140,6 +142,8 @@ export class omdFunctionNode extends omdNode {
         this.functionNameElement.setPosition(currentX, textY);
         currentX += getTextBounds(this.functionName, fontSize).width;
         
+        currentX += parenSpacing;
+
         // Position opening parenthesis
         this.openParenElement.setPosition(currentX, textY);
         currentX += getTextBounds('(', fontSize).width;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",

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
@@ -24,6 +26,12 @@ export { omdFunction } from './omdFunction.js';
 export { omdApp } from './omdApp.js';
 export { omdAppCanvas } from './omdAppCanvas.js';
 export { omd } from './omd.js';
+export { omdDisplay } from '../omd/display/omdDisplay.js';
+export { omdEquationNode } from '../omd/nodes/omdEquationNode.js';
+export { omdEquationStack } from '../omd/core/omdEquationStack.js';
+export { omdEquationSequenceNode } from '../omd/nodes/omdEquationSequenceNode.js';
+export { omdConstantNode } from '../omd/nodes/omdConstantNode.js';
+export { omdNodeOverlay, omdNodeOverlayPresets } from '../omd/utils/omdNodeOverlay.js';
 
 // OMD Utilities and Helpers
 export { omdColor } from './omdColor.js';
@@ -52,7 +60,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
@@ -70,6 +79,11 @@ export default {
     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)
+        omd: () => import('./omd.js').then(m => m.omd),
+        async createDisplay(container) {
+            const { omdDisplay } = await import('../omd/core/index.js');
+            return new omdDisplay(container);
+        }
     }
-}; 
+}; 
+// Force reload

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
 }
 ```
 
@@ -556,9 +677,16 @@ This document provides schemas and examples for the `loadFromJSON` method used i
 
 ## 20. `omdEquation`
 
-`omdEquation` represents a mathematical equation, such as "x + 2 = 5".
+`omdEquation` represents a mathematical equation and now uses the same math.js-powered parser/renderer as the interactive core (functions, rationals, roots, etc.).
 
-### Schema
+### Preferred schema (string form)
+```json
+{
+  "equation": "sin(x) + 2 = 3"
+}
+```
+
+### Structured fallback (legacy)
 ```json
 {
   "leftExpression": "object",
@@ -567,11 +695,10 @@ This document provides schemas and examples for the `loadFromJSON` method used i
 }
 ```
 
-### Example
+### Examples
 ```json
-{
-  "leftExpression": { "omdType": "term", "coefficient": 1, "variable": "x", "exponent": 1 },
-  "rightExpression": { "omdType": "number", "value": 5 },
-  "equation": "x + 2 = 5"
-}
-```
+{ "equation": "sin(x) + 2 = 3" }
+```
+```json
+{ "equation": "(x^2 + 3x - 4)/(2x) = 5" }
+```

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;