@teachinglab/omd 0.2.7 → 0.2.8

package/omd/step-visualizer/omdStepVisualizerTextBoxes.js

@@ -6,10 +6,11 @@ import { omdStepVisualizerInteractiveSteps } from '../utils/omdStepVisualizerInt
  * Handles creation, positioning, and cleanup of explanation popups
  */
 export class omdStepVisualizerTextBoxes {
-    constructor(stepVisualizer, highlighting) {
+    constructor(stepVisualizer, highlighting, options = {}) {
         this.stepVisualizer = stepVisualizer;
         this.highlighting = highlighting;
         this.stepTextBoxes = [];
+        this.options = options;
     }
 
     /**
@@ -42,7 +43,11 @@ export class omdStepVisualizerTextBoxes {
      * @private
      */
     _createInteractiveStepsForDot(dotIndex, targetDot, simplificationData) {
-        const interactiveSteps = new omdStepVisualizerInteractiveSteps(this.stepVisualizer, simplificationData);
+        const interactiveSteps = new omdStepVisualizerInteractiveSteps(
+            this.stepVisualizer, 
+            simplificationData, 
+            this.options // Pass styling options to interactive steps
+        );
         
         // Position relative to the target dot
         const x = targetDot.xpos + this.stepVisualizer.dotRadius * 2 + 10;
@@ -62,14 +67,26 @@ export class omdStepVisualizerTextBoxes {
         layoutGroup.dotIndex = dotIndex;
         this.stepVisualizer.visualContainer.addChild(layoutGroup);
         
+    // Apply configured z-index styling to ensure proper layering
+        if (layoutGroup.svgObject && (this.options.zIndex || this.options.position)) {
+            if (this.options.position) {
+                layoutGroup.svgObject.style.position = this.options.position;
+            }
+            if (this.options.zIndex) {
+                layoutGroup.svgObject.style.zIndex = String(this.options.zIndex);
+                
+                // Only apply to the main container, NOT to child elements to preserve internal layout
+                // Applying position absolute to child elements breaks flexbox layout
+            }
+        }
+    
         this.stepTextBoxes.push({
             dotIndex: dotIndex,
             interactiveSteps: interactiveSteps,
             layoutGroup: layoutGroup
         });
         
-        // Update layout to prevent clipping after adding text box
-        this.stepVisualizer.layoutManager.updateVisualLayout();
+        // Note: Removed updateVisualLayout call to prevent repositioning movement
     }
 
 
@@ -88,8 +105,7 @@ export class omdStepVisualizerTextBoxes {
             item.interactiveSteps.destroy();
             this.stepTextBoxes.splice(textBoxIndex, 1);
             
-            // Update layout after removing text box to adjust container size
-            this.stepVisualizer.layoutManager.updateVisualLayout();
+            // Note: Removed updateVisualLayout call to prevent repositioning movement
         }
     }
 
@@ -103,8 +119,7 @@ export class omdStepVisualizerTextBoxes {
         });
         this.stepTextBoxes = [];
         
-        // Update layout after clearing all text boxes
-        this.stepVisualizer.layoutManager.updateVisualLayout();
+        // Note: Removed updateVisualLayout call to prevent repositioning movement
     }
 
     /**
@@ -160,4 +175,27 @@ export class omdStepVisualizerTextBoxes {
     getStepTextBoxes() {
         return this.stepTextBoxes;
     }
+
+    /**
+     * Updates the styling options for text boxes
+     * @param {Object} newOptions - New styling options
+     */
+    updateStyling(newOptions = {}) {
+        this.options = { ...this.options, ...newOptions };
+        
+        // Apply new styling to existing text boxes
+        this.stepTextBoxes.forEach(textBoxItem => {
+            if (textBoxItem.interactiveSteps && typeof textBoxItem.interactiveSteps.updateStyling === 'function') {
+                textBoxItem.interactiveSteps.updateStyling(this.options);
+            }
+        });
+    }
+
+    /**
+     * Gets the current styling options
+     * @returns {Object} Current styling options
+     */
+    getStyling() {
+        return { ...this.options };
+    }
 }