@teachinglab/omd 0.2.8 → 0.2.9

package/canvas/drawing/stroke.js

@@ -1,5 +1,5 @@
 import { BoundingBox } from '../utils/boundingBox.js';
-
+import { jsvgPath } from '@teachinglab/jsvg';
 /**
  * Represents a drawing stroke made up of connected points
  */

package/omd/display/omdDisplay.js

@@ -28,6 +28,13 @@ export class omdDisplay {
         this.svg = new jsvgContainer();
         this.node = null;
 
+        // Internal guards to prevent recursive resize induced growth
+        this._suppressResizeObserver = false; // When true, _handleResize is a no-op
+        this._lastViewbox = null;             // Cache last applied viewBox string
+        this._lastContentExtents = null;      // Cache last measured content extents to detect real growth
+        this._viewboxLocked = false;          // When true, suppress micro growth adjustments
+        this._viewboxLockThreshold = 8;       // Require at least 8px growth once locked
+
         // Set up the SVG
         this._setupSVG();
     }
@@ -65,8 +72,13 @@ export class omdDisplay {
     }
 
     _handleResize() {
+        if (this._suppressResizeObserver) return; // Prevent re-entrant resize loops
         const width = this.container.offsetWidth;
         const height = this.container.offsetHeight;
+        // Skip if size unchanged; avoids loops where internal changes trigger observer without real container delta
+        if (this._lastContainerWidth === width && this._lastContainerHeight === height) return;
+        this._lastContainerWidth = width;
+        this._lastContainerHeight = height;
         this.svg.setViewbox(width, height);
 
         if (this.options.centerContent && this.node) {
@@ -132,8 +144,50 @@ export class omdDisplay {
         const desiredW = Math.max(curW, desiredRight - desiredX);
         const desiredH = Math.max(curH, desiredBottom - desiredY);
 
-        if (desiredW !== curW || desiredH !== curH) {
-            this.svg.svgObject.setAttribute('viewBox', `${desiredX} ${desiredY} ${desiredW} ${desiredH}`);
+        // Guard: If the desired size change is negligible (< 0.5px), skip.
+        const widthDelta = Math.abs(desiredW - curW);
+        const heightDelta = Math.abs(desiredH - curH);
+
+        // Safety cap to avoid runaway expansion due to logic errors.
+        const MAX_DIM = 10000; // arbitrary large but finite limit
+        if (desiredW > MAX_DIM || desiredH > MAX_DIM) {
+            console.warn('omdDisplay: viewBox growth capped to prevent runaway expansion', desiredW, desiredH);
+            return;
+        }
+
+        if (widthDelta < 0.5 && heightDelta < 0.5) return;
+
+        // Detect repeated growth with identical content extents (suggests feedback loop)
+        const curExtSignature = `${minX},${minY},${maxX},${maxY}`;
+        if (this._lastContentExtents === curExtSignature && heightDelta > 0 && desiredH > curH) {
+            return; // content unchanged, skip
+        }
+
+        // If locked, only allow substantial growth
+        if (this._viewboxLocked) {
+            const growW = desiredW - curW;
+            const growH = desiredH - curH;
+            if (growW < this._viewboxLockThreshold && growH < this._viewboxLockThreshold) {
+                return; // ignore micro growth attempts
+            }
+        }
+
+        const newViewBox = `${desiredX} ${desiredY} ${desiredW} ${desiredH}`;
+        if (this._lastViewbox === newViewBox) return;
+
+        this._suppressResizeObserver = true;
+        try {
+            this.svg.svgObject.setAttribute('viewBox', newViewBox);
+        } finally {
+            // Allow ResizeObserver events after microtask; use timeout to defer
+            setTimeout(() => { this._suppressResizeObserver = false; }, 0);
+        }
+        this._lastViewbox = newViewBox;
+        this._lastContentExtents = curExtSignature;
+
+        // Lock if the growth applied was small; prevents future tiny increments
+        if (heightDelta < 2 && widthDelta < 2 && !this._viewboxLocked) {
+            this._viewboxLocked = true;
         }
     }
 
@@ -397,6 +451,12 @@ export class omdDisplay {
 
     centerNode() {
         if (!this.node) return;
+        if (!this._centerCallCount) this._centerCallCount = 0;
+        this._centerCallCount++;
+        if (this._centerCallCount > 500) {
+            console.warn('omdDisplay: excessive centerNode calls detected; halting further centering to prevent loop');
+            return;
+        }
         const containerWidth = this.container.offsetWidth || 0;
         const containerHeight = this.container.offsetHeight || 0;
 
@@ -423,7 +483,6 @@ export class omdDisplay {
                     // For step visualizers, use sequenceWidth/Height instead of total dimensions to exclude visualizer elements from autoscale
                     contentWidth = seq.sequenceWidth || seq.width;
                     contentHeight = seq.sequenceHeight || seq.height;
-                    console.log('omdDisplay: Using sequence dimensions for autoscale - sequenceWidth:', seq.sequenceWidth, 'sequenceHeight:', seq.sequenceHeight, 'width:', seq.width, 'height:', seq.height, 'contentWidth:', contentWidth, 'contentHeight:', contentHeight);
                 }
                 if (seq.getCurrentStep) {
                     const step = seq.getCurrentStep();
@@ -433,12 +492,10 @@ export class omdDisplay {
                         const stepHeight = seq.sequenceHeight || step.height;
                         contentWidth = Math.max(contentWidth, stepWidth);
                         contentHeight = Math.max(contentHeight, stepHeight);
-                        console.log('omdDisplay: Considering step dimensions - stepWidth:', stepWidth, 'stepHeight:', stepHeight, 'finalContentWidth:', contentWidth, 'finalContentHeight:', contentHeight);
                     }
                 }
             }
         }
-        console.log('omdDisplay: Final content dimensions for autoscale - width:', contentWidth, 'height:', contentHeight);
 
         // Compute scale to keep within bounds
         let scale = 1;
@@ -458,14 +515,12 @@ export class omdDisplay {
             if (this.node) {
                 const ctorName = this.node.constructor?.name;
                 hasStepVisualizer = (ctorName === 'omdStepVisualizer') || this.node.type === 'omdStepVisualizer' || (typeof omdStepVisualizer !== 'undefined' && this.node instanceof omdStepVisualizer);
-                console.log('omdDisplay: Step visualizer detection (node) ctor:', ctorName, 'type:', this.node.type, 'detected:', hasStepVisualizer);
             }
 
             if (hasStepVisualizer) {
                 // Preserve existing scale if already set on node; otherwise lock to 1.
                 const existingScale = (this.node && typeof this.node.scale === 'number') ? this.node.scale : undefined;
                 scale = (existingScale && existingScale > 0) ? existingScale : 1;
-                console.log('omdDisplay: Step visualizer detected - locking scale at', scale);
             } else {
                 const hPad = this.options.edgePadding || 0;
                 const vPadTop = this.options.topMargin || 0;
@@ -483,7 +538,6 @@ export class omdDisplay {
                 const maxScale = (typeof this.options.maxScale === 'number') ? this.options.maxScale : 1;
                 scale = Math.min(sx, sy, maxScale);
                 if (!isFinite(scale) || scale <= 0) scale = 1;
-                console.log('omdDisplay: Autoscale calculation - availW:', availW, 'availH:', availH, 'contentW:', contentWidth, 'contentH:', contentHeight, 'scale:', scale);
             }
         }
 
@@ -511,6 +565,14 @@ export class omdDisplay {
         const willOverflowHoriz = scaledWidthFinal > containerWidth;
         const willOverflowVert = totalNeededH > containerHeight;
 
+        // Avoid looping if content dimension signature hasn't changed
+        const contentSig = `${contentWidth}x${contentHeight}x${scale}`;
+        if (this._lastCenterSignature === contentSig && !willOverflowHoriz && !willOverflowVert) {
+            // Only update position; skip expensive ensureViewboxFits
+            if (this.node.setPosition) this.node.setPosition(x, this.options.topMargin);
+            return;
+        }
+
         if (willOverflowHoriz || willOverflowVert) {
             // Set scale but do NOT reposition node (preserve its absolute positions).
             if (this.node.setScale) this.node.setScale(scale);
@@ -546,6 +608,8 @@ export class omdDisplay {
             }
             if (this.options.debugExtents) this._drawDebugOverlays();
         }
+
+        this._lastCenterSignature = contentSig;
     }
 
     fitToContent() {
@@ -880,4 +944,12 @@ export class omdDisplay {
             node.positionToolbarOverlay(containerWidth, containerHeight, padding);
         }
     }
+
+    /**
+     * Public API: returns the currently rendered root node (could be a step visualizer, sequence, or plain node)
+     * @returns {object|null}
+     */
+    getCurrentNode() {
+        return this.node;
+    }
 }

package/omd/step-visualizer/omdStepVisualizer.js

@@ -86,7 +86,6 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
                 this.textBoxManager.clearAllTextBoxes();
             }
             const after = this.textBoxManager?.stepTextBoxes?.length || 0;
-            if (before !== after) console.log('omdStepVisualizer: closeActiveDot removed text boxes', before, '->', after);
         } catch (e) { /* no-op */ }
     }
 
@@ -136,7 +135,7 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
             // Text boxes
             textBoxOptions: {
                 backgroundColor: omdColor.white,
-                borderColor: omdColor.lightGray,
+                borderColor: 'none',
                 borderWidth: 1,
                 borderRadius: 5,
                 padding: 8, // Minimal padding for tight fit

package/omd/utils/omdNodeOverlay.js

@@ -7,7 +7,7 @@
  */
 
 import { omdPopup } from './omdPopup.js';
-import { jsvgGroup } from '@teachinglab/jsvg';
+import { jsvgGroup, jsvgRect } from '@teachinglab/jsvg';
 
 /**
  * A flexible overlay system for covering nodes with customizable elements

package/omd/utils/omdPopup.js

@@ -1,4 +1,4 @@
-import { jsvgGroup, jsvgRect, jsvgButton, jsvgTextBox } from '@teachinglab/jsvg';
+import { jsvgGroup, jsvgRect, jsvgButton, jsvgLayoutGroup, jsvgTextInput  } from '@teachinglab/jsvg';
 /**
  * omdPopup - Handles popup creation and management for node overlays
  */

package/omd/utils/omdTranscriptionService.js

@@ -9,7 +9,8 @@ export class omdTranscriptionService {
     constructor(options = {}) {
         this.options = {
             endpoint: options.endpoint || this._getDefaultEndpoint(),
-            defaultProvider: options.defaultProvider || 'gemini',
+            defaultProvider: options.defaultProvider || 'openai',
+            defaultModel: options.defaultModel || 'gpt-4o-mini',
             ...options
         };
     }
@@ -60,7 +61,9 @@ export class omdTranscriptionService {
                 },
                 body: JSON.stringify({
                     imageBase64: base64Image,
-                    prompt: options.prompt || 'Please transcribe the handwritten mathematical expression in this image. Return only the mathematical expression in pure format (no LaTeX, no dollar signs). For powers use ^, for fractions use /, for square roots use sqrt().'
+                    prompt: options.prompt || 'Please transcribe the handwritten mathematical expression in this image. Return only the mathematical expression in pure format (no LaTeX, no dollar signs). For powers use ^, for fractions use /, for square roots use sqrt().',
+                    model: options.model || this.options.defaultModel,
+                    provider: options.provider || this.options.defaultProvider
                 })
             });
             
@@ -72,8 +75,9 @@ export class omdTranscriptionService {
 
             
             return {
-                text: result.text,
-                provider: result.provider || 'gemini',
+                text: (result.text || '').trim(),
+                provider: result.provider || this.options.defaultProvider,
+                model: result.model || (options.model || this.options.defaultModel),
                 confidence: result.confidence || 1.0
             };
             
@@ -106,7 +110,7 @@ export class omdTranscriptionService {
      * @returns {Array} List of available providers
      */
     getAvailableProviders() {
-        return ['gemini']; // Server handles the provider selection
+        return ['openai']; // Server handles actual model execution
     }
     
     /**
@@ -115,6 +119,6 @@ export class omdTranscriptionService {
      * @returns {boolean} True if provider is available
      */
     isProviderAvailable(provider) {
-        return provider === 'gemini'; // Only gemini is supported via server
+        return provider === 'openai';
     }
 } 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",
@@ -36,11 +36,14 @@
     "express": "^4.18.2",
     "mathjs": "^14.5.2",
     "openai": "^4.28.0",
-    "@teachinglab/jsvg": "0.1.1"
+    "@teachinglab/jsvg": "0.1.1",
+    "@netlify/vite-plugin": "^2.5.4",
+    "vite": "^5.4.0"
   },
   "scripts": {
-    "start": "node --env-file=.env server.js",
-    "dev": "vite"
+    "dev": "vite",
+    "build": "vite build",
+    "dev:netlify": "netlify dev"
   },
   "publishConfig": {
     "access": "public"

package/src/omdTable.js

@@ -34,7 +34,7 @@ export class omdTable extends jsvgGroup
         this.showBackground = true;
 
         // Alternating row color properties
-        this.alternatingRowColors = null; // Should be an array of colors or null
+        this.alternatingRowColors = [omdColor.mediumGray, omdColor.lightGray]; // Should be an array of colors or null
         this.headerBackgroundColor = omdColor.lightGray;
         this.cellBackgroundColor = "white";