@teachinglab/omd 0.6.7 → 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.7",
+  "version": "0.7.0",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",

package/src/index.js

@@ -26,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';
@@ -73,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

@@ -677,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",
@@ -688,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/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
         }
     }
 
-}
+}