@teachinglab/omd 0.2.7 → 0.2.8

package/omd/utils/omdStepVisualizerInteractiveSteps.js

@@ -5,26 +5,27 @@ import { jsvgLayoutGroup, jsvgTextBox, jsvgRect } from '@teachinglab/jsvg';
  * Each step is a separate jsvgTextBox that can have hover interactions with the omdSequence
  */
 export class omdStepVisualizerInteractiveSteps {
-    constructor(stepVisualizer, simplificationData) {
+    constructor(stepVisualizer, simplificationData, stylingOptions = {}) {
         this.stepVisualizer = stepVisualizer;
         this.simplificationData = simplificationData || {};
+        this.stylingOptions = stylingOptions || {};
         this.messages = this._extractMessages(simplificationData);
         this.ruleNames = this._extractRuleNames(simplificationData);
         this.stepElements = [];
         this.layoutGroup = new jsvgLayoutGroup();
-        this.layoutGroup.setSpacer(20); // Much larger spacing to prevent clipping
-        
-        // Styling configuration
-        this.stepWidth = 380; // Increased width to prevent text cutoff
-        this.baseStepHeight = 40; // Increased base height
-        this.headerHeight = 40;
-        this.fontSize = 14;
+        this.layoutGroup.setSpacer(4); // Minimal spacing for tight layout
+
+        // Styling configuration with defaults that can be overridden
+        this.stepWidth = this.stylingOptions.maxWidth || 300; // Use maxWidth from styling options
+        this.baseStepHeight = 30; // Minimal height for tight fit
+        this.headerHeight = 28; // Minimal header height
+        this.fontSize = this.stylingOptions.fontSize || 14;
         this.smallFontSize = 12;
-        
+
         this.setupLayoutGroup();
         this.createStepElements();
     }
-    
+
     /**
      * Extracts messages from simplification data
      * @param {Object} data - Simplification data
@@ -33,14 +34,14 @@ export class omdStepVisualizerInteractiveSteps {
      */
     _extractMessages(data) {
         if (!data) return [];
-        
+
         let messages = [];
         if (data.rawMessages && Array.isArray(data.rawMessages)) {
             messages = data.rawMessages;
         } else if (data.message) {
             messages = [data.message];
         }
-        
+
         // Clean up messages - remove HTML tags and bullet points
         return messages.map(msg => {
             let clean = msg.replace(/<[^>]*>/g, ''); // Strip HTML tags
@@ -57,11 +58,11 @@ export class omdStepVisualizerInteractiveSteps {
      */
     _extractRuleNames(data) {
         if (!data) return ['Operation'];
-        
+
         if (data.ruleNames && Array.isArray(data.ruleNames)) {
             return data.ruleNames;
         }
-        
+
         // Default based on data type
         if (data.multipleSimplifications) {
             return ['Multiple Rules'];
@@ -75,45 +76,63 @@ export class omdStepVisualizerInteractiveSteps {
      * @private
      */
     setupLayoutGroup() {
-        // Add background using explainColor for the entire step group
+        // Add background using styling options for the entire step group
         this.backgroundRect = new jsvgRect();
-        this.backgroundRect.setWidthAndHeight(this.stepWidth + 24, 100); // Height will be updated, wider for increased padding
-        this.backgroundRect.setFillColor(omdColor.lightGray);
-        this.backgroundRect.setStrokeColor('#e0e0e0');
-        this.backgroundRect.setStrokeWidth(1);
-        this.backgroundRect.setCornerRadius(6);
+        this.backgroundRect.setWidthAndHeight(this.stepWidth + 16, 60); // Minimal padding and height for tight fit
+
+        // Apply styling options to the background container
+        const backgroundColor = this.stylingOptions.backgroundColor || omdColor.lightGray;
+        const borderColor = this.stylingOptions.borderColor || '#e0e0e0';
+        const borderWidth = this.stylingOptions.borderWidth || 1;
+        const borderRadius = this.stylingOptions.borderRadius || 6;
+
+        this.backgroundRect.setFillColor(backgroundColor);
+        this.backgroundRect.setStrokeColor(borderColor);
+        this.backgroundRect.setStrokeWidth(borderWidth);
+        this.backgroundRect.setCornerRadius(borderRadius);
         this.backgroundRect.setPosition(0, 0); // Start at origin, not negative offset
+
+        // Apply drop shadow to the SVG element if requested
+        if (this.stylingOptions.dropShadow && this.backgroundRect.svgObject) {
+            this.backgroundRect.svgObject.style.filter = 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))';
+        }
+
         this.layoutGroup.addChild(this.backgroundRect);
     }
-    
+
     /**
      * Creates individual step elements from the messages array
      * @private
      */
     createStepElements() {
         if (!this.messages || this.messages.length === 0) return;
-        
+
         // Create content container to separate from background
         this.contentGroup = new jsvgLayoutGroup();
-        this.contentGroup.setSpacer(8); // Larger spacing between elements
-        this.contentGroup.setPosition(12, 12); // More offset from background edge
-        
+        this.contentGroup.setSpacer(2); // Minimal spacing between elements
+        this.contentGroup.setPosition(8, 8); // Minimal offset for tight fit
+
         if (this.messages.length === 1) {
-    
+
             this.createSingleStepElement(this.messages[0], 0);
         } else {
 
             this.createMultipleStepElements();
         }
-        
+
         this.contentGroup.doVerticalLayout();
         this.layoutGroup.addChild(this.contentGroup);
         this.updateBackgroundSize();
-        
+
+        // Apply drop shadow after SVG element is created
+        setTimeout(() => {
+            this.applyDropShadowIfNeeded();
+        }, 10);
+
         // Debug logging
 
     }
-    
+
     /**
      * Creates a single step element with header
      * @param {string} message - The step message
@@ -125,13 +144,13 @@ export class omdStepVisualizerInteractiveSteps {
         const ruleName = this.ruleNames[0] || 'Operation';
         const headerBox = this.createHeaderBox(ruleName + ':');
         this.contentGroup.addChild(headerBox);
-        
+
         // Create the step box
         const stepBox = this.createStepTextBox(message, index, false);
         this.stepElements.push(stepBox);
         this.contentGroup.addChild(stepBox);
     }
-    
+
     /**
      * Creates multiple step elements with header
      * @private
@@ -148,11 +167,11 @@ export class omdStepVisualizerInteractiveSteps {
             } else {
                 headerText = `${this.ruleNames.length} Rules Applied:`;
             }
-            
+
             const headerBox = this.createHeaderBox(headerText);
             this.contentGroup.addChild(headerBox);
         }
-        
+
         // Create individual step elements
         this.messages.forEach((message, index) => {
             const stepBox = this.createStepTextBox(message, index, this.messages.length > 1);
@@ -160,7 +179,7 @@ export class omdStepVisualizerInteractiveSteps {
             this.contentGroup.addChild(stepBox);
         });
     }
-    
+
     /**
      * Creates a header box with custom text
      * @param {string} headerText - Text to display in header
@@ -169,20 +188,20 @@ export class omdStepVisualizerInteractiveSteps {
      */
     createHeaderBox(headerText = 'Operation:') {
         const headerBox = new jsvgTextBox();
-        const headerHeight = Math.max(this.headerHeight, 40); // Ensure minimum height
-        
-        
+        const headerHeight = Math.max(this.headerHeight, 50); // Increased minimum height
+
+
         headerBox.setWidthAndHeight(this.stepWidth, headerHeight);
         headerBox.setText(headerText);
         headerBox.setFontSize(this.fontSize);
         headerBox.setFontWeight('600');
         headerBox.setFontColor('#2c3e50');
-        
-        // Style the header with border
+
+        // Style the header with border and minimal spacing
         if (headerBox.div) {
             Object.assign(headerBox.div.style, {
                 borderBottom: '1px solid #e0e0e0',
-                padding: '8px 12px 6px 12px',
+                padding: '6px 8px 4px 8px', // Minimal padding for tight fit
                 margin: '0',
                 boxSizing: 'border-box',
                 minHeight: `${headerHeight}px`,
@@ -190,14 +209,19 @@ export class omdStepVisualizerInteractiveSteps {
                 whiteSpace: 'normal',
                 wordWrap: 'break-word',
                 overflowWrap: 'break-word',
-                width: '100%'
+                width: '100%',
+                lineHeight: '1.2', // Tight line height
+                fontFamily: 'Albert Sans, Arial, sans-serif',
+                display: 'flex',
+                alignItems: 'center', // Center text vertically
+                justifyContent: 'flex-start'
             });
         }
 
-        
+
         return headerBox;
     }
-    
+
     /**
      * Creates an individual step text box
      * @param {string} message - Step message
@@ -208,33 +232,63 @@ export class omdStepVisualizerInteractiveSteps {
      */
     createStepTextBox(message, index, isMultiple) {
         const stepBox = new jsvgTextBox();
-        const height = this.calculateStepHeight(message);
-        
-        
-        
+        // Calculate actual height needed for content with minimal padding
+        const contentHeight = this.calculateContentHeight(message, index, isMultiple);
+        const height = Math.max(contentHeight, this.baseStepHeight); // Use calculated height
+
+
+
         stepBox.setWidthAndHeight(this.stepWidth, height);
         stepBox.setFontSize(this.fontSize);
         stepBox.setFontColor('#2c3e50');
-        
+
         // Store step data for interactions
         stepBox.stepIndex = index;
         stepBox.stepMessage = message;
         stepBox.isMultiple = isMultiple;
-        
+
         // Format the step content
         const formattedContent = this.formatStepContent(message, index, isMultiple);
-        
+
         // Apply styling and content
         if (stepBox.div) {
-            this.applyStepStyling(stepBox, formattedContent, isMultiple);
+            this.applyStepStyling(stepBox, formattedContent, isMultiple, height);
             this.setupStepInteractions(stepBox);
-            
+
+            // Force the jsvgTextBox to respect our sizing
+            stepBox.div.style.height = `${height}px`;
+            stepBox.div.style.minHeight = `${height}px`;
+            stepBox.div.style.display = 'block';
+
+            // Add a more aggressive override after a delay to ensure it sticks
+            if (stepBox.div) {
+                const actualPadding = this.stylingOptions.padding || 6; // Get padding from styling options
+                stepBox.div.style.cssText += `
+                        height: ${height}px !important;
+                        min-height: ${height}px !important;
+                        max-height: ${height}px !important;
+                        padding: ${actualPadding}px ${actualPadding + 2}px !important;
+                        line-height: 1.3 !important;
+                        font-size: ${this.fontSize}px !important;
+                        font-family: Albert Sans, Arial, sans-serif !important;
+                        box-sizing: border-box !important;
+                        display: flex !important;
+                        flex-direction: column !important;
+                        justify-content: center !important;
+                        align-items: flex-start !important;
+                        word-spacing: normal !important;
+                        letter-spacing: normal !important;
+                        transition: none !important;
+                        transform: none !important;
+                        animation: none !important;
+                    `;
+            }
 
         }
-        
+
         return stepBox;
     }
-    
+
     /**
      * Formats the content for a step
      * @param {string} message - Raw message
@@ -246,16 +300,16 @@ export class omdStepVisualizerInteractiveSteps {
     formatStepContent(message, index, isMultiple) {
         const cleanMessage = message.trim();
         let content = '';
-        
+
         // Only show step numbers for multiple steps
         if (isMultiple && this.messages.length > 1) {
-            content += `<div class="step-number" style="color: #666; font-size: ${this.smallFontSize}px; margin: 0 0 2px 0; font-weight: 500;">Step ${index + 1}</div>`;
+            content += `<div class="step-number" style="color: #666; font-size: ${this.smallFontSize}px; margin: 0 0 2px 0; font-weight: 500; line-height: 1.2; font-family: Albert Sans, Arial, sans-serif;">Step ${index + 1}</div>`; // Minimal margin
         }
-        
-        content += '<div class="step-content" style="display: flex; align-items: flex-start; gap: 8px; margin: 0; width: 100%;">';
-        content += '<span class="bullet" style="color: #666; font-weight: bold; flex-shrink: 0; margin-top: 2px;">•</span>';
-        content += '<div class="step-text" style="margin: 0; flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: break-word;">';
-        
+
+        content += '<div class="step-content" style="display: flex; align-items: center; gap: 6px; margin: 0; width: 100%; line-height: 1.3; font-family: Albert Sans, Arial, sans-serif;">'; // Center align and minimal spacing
+        content += '<span class="bullet" style="color: #666; font-weight: bold; flex-shrink: 0; font-size: 10px;">•</span>'; // Smaller bullet
+        content += '<div class="step-text" style="margin: 0; flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.3; padding: 0;">';
+
         // Parse operation details
         if (this.isOperationMessage(cleanMessage)) {
             const action = this.extractOperationAction(cleanMessage);
@@ -263,54 +317,109 @@ export class omdStepVisualizerInteractiveSteps {
             const valueNode = this.extractOperationValueNode(cleanMessage);
 
             if (action && (value || valueNode)) {
-                content += `<span style="font-weight: 600; color: #2c3e50;">${action}</span> `;
+                content += `<span style="font-weight: 600; color: #2c3e50; margin-right: 4px;">${action}</span> `;
                 const displayValue = valueNode ? valueNode.toString() : value;
-                content += `<span style="background: #f5f5f5; padding: 2px 6px; border-radius: 3px; font-family: 'Courier New', monospace; color: #d63384;">${displayValue}</span>`;
-                content += `<span style="color: #666; font-size: ${this.smallFontSize}px;"> to both sides</span>`;
+                content += `<span style="background: #f5f5f5; padding: 3px 8px; border-radius: 4px; font-family: 'Courier New', monospace; color: #d63384; margin: 0 3px;">${displayValue}</span>`;
+                content += `<span style="color: #666; font-size: ${this.smallFontSize}px; margin-left: 4px;"> to both sides</span>`;
             } else {
-                content += `<span>${cleanMessage}</span>`;
+                content += `<span style="padding: 2px 0;">${cleanMessage}</span>`;
             }
         } else {
-            content += `<span style="font-weight: 500;">${cleanMessage}</span>`;
+            content += `<span style="font-weight: 500; padding: 2px 0;">${cleanMessage}</span>`;
         }
-        
+
         content += '</div></div>';
         return content;
     }
-    
+
     /**
      * Applies styling to a step text box
      * @param {jsvgTextBox} stepBox - The step box
      * @param {string} content - Formatted content
      * @param {boolean} isMultiple - Whether part of multiple steps
+     * @param {number} height - The calculated height for the step box
      * @private
      */
-    applyStepStyling(stepBox, content, isMultiple) {
+    applyStepStyling(stepBox, content, isMultiple, height) {
+        const backgroundColor = this.stylingOptions.backgroundColor || omdColor.white;
+        const borderColor = this.stylingOptions.borderColor || omdColor.lightGray;
+        const borderWidth = this.stylingOptions.borderWidth || 1;
+        const borderRadius = this.stylingOptions.borderRadius || 4;
+        const padding = this.stylingOptions.padding || 6; // Minimal padding for tight fit
+
         const baseStyles = {
-            padding: '8px 12px',
-            borderRadius: '4px',
-            transition: 'all 0.2s ease',
+            padding: `${padding}px ${padding + 2}px !important`, // Minimal padding for tight fit
+            borderRadius: `${borderRadius}px`,
+            border: `${borderWidth}px solid ${borderColor}`,
+            backgroundColor: backgroundColor,
             cursor: 'pointer',
-            lineHeight: '1.5',
-            backgroundColor: 'transparent',
-            margin: '0', 
+            transition: 'none !important', // Explicitly disable all transitions
+            transform: 'none !important', // Explicitly disable all transforms
+            animation: 'none !important', // Explicitly disable all animations
+            lineHeight: '1.3 !important', // Tight line height
+            margin: '0',
             boxSizing: 'border-box',
             overflow: 'visible',
-            minHeight: `${this.baseStepHeight}px`,
+            minHeight: `${height}px !important`, // Use calculated height
+            height: `${height}px !important`, // Fixed height to content
             width: '100%',
-            whiteSpace: 'normal', // Allow text wrapping
-            wordWrap: 'break-word', // Break long words if necessary
-            overflowWrap: 'break-word', // Modern standard for word breaking
-            maxWidth: '100%' // Ensure content doesn't exceed container
+            whiteSpace: 'normal',
+            wordWrap: 'break-word',
+            overflowWrap: 'break-word',
+            maxWidth: '100%',
+            fontSize: `${this.fontSize}px !important`, // Force font size
+            fontFamily: 'Albert Sans, Arial, sans-serif !important', // Albert Sans font
+            display: 'flex !important', // Use flex for centering
+            flexDirection: 'column !important',
+            justifyContent: 'center !important', // Center content vertically
+            alignItems: 'flex-start !important'
         };
-        
+
+        // Add drop shadow if requested
+        if (this.stylingOptions.dropShadow) {
+            baseStyles.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
+        }
+
+        // Set font family if specified
+        if (this.stylingOptions.fontFamily) {
+            baseStyles.fontFamily = this.stylingOptions.fontFamily;
+        }
+
         Object.assign(stepBox.div.style, baseStyles);
         stepBox.div.innerHTML = content;
-        
+
+        // Additional CSS to force proper text spacing
+        if (stepBox.div) {
+            stepBox.div.style.cssText += `
+                    padding: ${padding + 6}px ${padding + 10}px !important;
+                    line-height: 1.7 !important;
+                    min-height: ${this.baseStepHeight + 20}px !important;
+                    font-size: ${this.fontSize}px !important;
+                    display: flex !important;
+                    flex-direction: column !important;
+                `;
+
+            // Apply proper layout to nested content - DO NOT use position absolute
+            const contentElements = stepBox.div.querySelectorAll('.step-content, .step-text');
+            contentElements.forEach(el => {
+                el.style.lineHeight = '1.3 !important';
+                el.style.margin = '0 !important';
+                el.style.fontFamily = 'Albert Sans, Arial, sans-serif !important';
+                // Remove any position absolute that might be inherited
+                el.style.position = 'static !important';
+            });
+
+            // Ensure bullet points and text spans stay in normal flow
+            const allSpans = stepBox.div.querySelectorAll('span');
+            allSpans.forEach(span => {
+                span.style.position = 'static !important';
+            });
+        }
+
         // Force a reflow to ensure proper sizing
         stepBox.div.offsetHeight;
     }
-    
+
     /**
      * Sets up hover and click interactions for a step
      * @param {jsvgTextBox} stepBox - The step box
@@ -323,76 +432,97 @@ export class omdStepVisualizerInteractiveSteps {
         // Hover effects
         stepBox.div.addEventListener('mouseenter', () => {
             stepBox.div.style.backgroundColor = omdColor.mediumGray; // Slightly darker version of explainColor
-            stepBox.div.style.transform = 'translateX(2px)';
-            
+
             // Call hover callback if provided
             this.onStepHover?.(stepBox.stepIndex, stepBox.stepMessage, true);
         });
-        
+
         stepBox.div.addEventListener('mouseleave', () => {
             // Restore the original background color instead of setting to transparent
             stepBox.div.style.backgroundColor = originalBackgroundColor;
-            stepBox.div.style.transform = 'translateX(0)';
-            
+
             // Call hover callback if provided
             this.onStepHover?.(stepBox.stepIndex, stepBox.stepMessage, false);
         });
-        
+
         // Click interactions
         stepBox.div.addEventListener('click', () => {
             this.onStepClick?.(stepBox.stepIndex, stepBox.stepMessage);
         });
     }
-    
+
     /**
-     * Calculates the height needed for a step box
+     * Calculates the exact height needed for content with minimal padding
      * @param {string} message - Step message
-     * @returns {number} Height in pixels
+     * @param {number} index - Step index
+     * @param {boolean} isMultiple - Whether part of multiple steps
+     * @returns {number} Tight-fitting height in pixels
      * @private
      */
-    calculateStepHeight(message) {
+    calculateContentHeight(message, index, isMultiple) {
         // Create a temporary element to measure actual text height
         const tempDiv = document.createElement('div');
         tempDiv.style.position = 'absolute';
         tempDiv.style.visibility = 'hidden';
-        tempDiv.style.width = `${this.stepWidth - 24}px`; // Account for padding
+        tempDiv.style.width = `${this.stepWidth - 16}px`; // Account for minimal padding
         tempDiv.style.fontSize = `${this.fontSize}px`;
-        tempDiv.style.lineHeight = '1.5';
-        tempDiv.style.fontFamily = 'inherit';
+        tempDiv.style.lineHeight = '1.3'; // Tight line height
+        tempDiv.style.fontFamily = 'Albert Sans, Arial, sans-serif';
         tempDiv.style.whiteSpace = 'normal';
         tempDiv.style.wordWrap = 'break-word';
         tempDiv.style.overflowWrap = 'break-word';
-        tempDiv.style.padding = '8px 12px';
+        tempDiv.style.padding = '6px 8px'; // Match the minimal padding
         tempDiv.style.boxSizing = 'border-box';
-        
+        tempDiv.style.display = 'flex';
+        tempDiv.style.flexDirection = 'column';
+        tempDiv.style.justifyContent = 'center';
+
         // Use actual formatted content for measurement
-        const isMultiple = this.messages && this.messages.length > 1;
-        const formattedContent = this.formatStepContent(message, 0, isMultiple);
+        const formattedContent = this.formatStepContent(message, index, isMultiple);
         tempDiv.innerHTML = formattedContent;
-        
+
         // Append to document to measure
         document.body.appendChild(tempDiv);
         const measuredHeight = tempDiv.offsetHeight;
         document.body.removeChild(tempDiv);
-        
-        // Ensure minimum height and add buffer for interactions
-        const finalHeight = Math.max(this.baseStepHeight, measuredHeight + 8);
-        
-        return finalHeight;
+
+        // Return exact measured height with minimal buffer
+        return Math.max(this.baseStepHeight, measuredHeight + 2); // Just 2px buffer
     }
-    
+
+    /**
+     * Calculates the height needed for a step box (legacy method, kept for compatibility)
+     * @param {string} message - Step message
+     * @returns {number} Height in pixels
+     * @private
+     */
+    calculateStepHeight(message) {
+        // Use the new tight-fitting calculation
+        return this.calculateContentHeight(message, 0, false);
+    }
+
     /**
      * Updates the background rectangle size after layout
      * @private
      */
     updateBackgroundSize() {
         if (this.backgroundRect && this.contentGroup) {
-            const totalHeight = this.contentGroup.height + 24; // More padding for larger offset
-            const totalWidth = this.stepWidth + 24; // More padding for larger offset
+            const totalHeight = this.contentGroup.height + 16; // Minimal padding for tight fit
+            const totalWidth = this.stepWidth + 16; // Minimal padding for tight fit
             this.backgroundRect.setWidthAndHeight(totalWidth, totalHeight);
         }
     }
-    
+
+    /**
+     * Applies drop shadow to the background container if SVG element exists
+     * @private
+     */
+    applyDropShadowIfNeeded() {
+        if (this.stylingOptions.dropShadow && this.backgroundRect && this.backgroundRect.svgObject) {
+            this.backgroundRect.svgObject.style.filter = 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))';
+        }
+    }
+
     /**
      * Sets callback for step hover events
      * @param {Function} callback - Function called with (stepIndex, message, isEntering)
@@ -400,7 +530,7 @@ export class omdStepVisualizerInteractiveSteps {
     setOnStepHover(callback) {
         this.onStepHover = callback;
     }
-    
+
     /**
      * Sets callback for step click events
      * @param {Function} callback - Function called with (stepIndex, message)
@@ -408,7 +538,7 @@ export class omdStepVisualizerInteractiveSteps {
     setOnStepClick(callback) {
         this.onStepClick = callback;
     }
-    
+
     /**
      * Gets the main layout group for adding to parent containers
      * @returns {jsvgLayoutGroup} The layout group
@@ -416,7 +546,7 @@ export class omdStepVisualizerInteractiveSteps {
     getLayoutGroup() {
         return this.layoutGroup;
     }
-    
+
     /**
      * Sets the position of the entire step group
      * @param {number} x - X position
@@ -425,7 +555,7 @@ export class omdStepVisualizerInteractiveSteps {
     setPosition(x, y) {
         this.layoutGroup.setPosition(x, y);
     }
-    
+
     /**
      * Gets the dimensions of the step group
      * @returns {Object} Width and height
@@ -436,21 +566,88 @@ export class omdStepVisualizerInteractiveSteps {
             height: this.backgroundRect ? this.backgroundRect.height : 100
         };
     }
-    
+
+    /**
+     * Updates the styling options and re-applies them to existing elements
+     * @param {Object} newStylingOptions - New styling options
+     */
+    updateStyling(newStylingOptions = {}) {
+        this.stylingOptions = { ...this.stylingOptions, ...newStylingOptions };
+
+        // Update width if maxWidth changed
+        if (newStylingOptions.maxWidth) {
+            this.stepWidth = newStylingOptions.maxWidth;
+        }
+
+        // Update font size if changed
+        if (newStylingOptions.fontSize) {
+            this.fontSize = newStylingOptions.fontSize;
+        }
+
+        // Update background container styling
+        if (this.backgroundRect) {
+            const backgroundColor = this.stylingOptions.backgroundColor || omdColor.lightGray;
+            const borderColor = this.stylingOptions.borderColor || '#e0e0e0';
+            const borderWidth = this.stylingOptions.borderWidth || 1;
+            const borderRadius = this.stylingOptions.borderRadius || 6;
+
+            this.backgroundRect.setFillColor(backgroundColor);
+            this.backgroundRect.setStrokeColor(borderColor);
+            this.backgroundRect.setStrokeWidth(borderWidth);
+            this.backgroundRect.setCornerRadius(borderRadius);
+
+            // Apply or remove drop shadow
+            if (this.backgroundRect.svgObject) {
+                if (this.stylingOptions.dropShadow) {
+                    this.backgroundRect.svgObject.style.filter = 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))';
+                } else {
+                    this.backgroundRect.svgObject.style.filter = '';
+                }
+            }
+        }
+
+        // Re-apply styling to all existing step elements
+        this.stepElements.forEach((stepBox, index) => {
+            if (stepBox.div) {
+                const content = stepBox.div.innerHTML;
+                // Calculate new height for the step
+                const height = this.calculateContentHeight(stepBox.stepMessage, index, stepBox.isMultiple);
+                this.applyStepStyling(stepBox, content, stepBox.isMultiple, height);
+
+                // Update font size
+                stepBox.setFontSize(this.fontSize);
+
+                // Update dimensions if needed
+                stepBox.setWidthAndHeight(this.stepWidth, height);
+            }
+        });
+
+        // Update background size
+        this.updateBackgroundSize();
+    }
+
+    /**
+     * Gets the current styling options
+     * @returns {Object} Current styling options
+     */
+    getStyling() {
+        return { ...this.stylingOptions };
+    }
+
     // Helper methods for message parsing (same as in formatter)
-    
+
     isOperationMessage(message) {
         const operationKeywords = ['Applied', 'added', 'subtracted', 'multiplied', 'divided', 'both sides'];
-        return operationKeywords.some(keyword => 
+        return operationKeywords.some(keyword =>
             message.toLowerCase().includes(keyword.toLowerCase())
         );
     }
-    
+
     extractOperationAction(message) {
         const match = message.match(/^(Added|Subtracted|Multiplied|Divided)/i);
         return match ? match[0] : null;
     }
-    
+
     extractOperationValue(message) {
         // Updated regex to handle simple values and expressions
         const match = message.match(/(?:Added|Subtracted|Multiplied|Divided)\s(.*?)\s(?:to|by)/i);
@@ -463,14 +660,14 @@ export class omdStepVisualizerInteractiveSteps {
         }
         return null;
     }
-    
+
     extractOperationValueNode(message) {
         if (this.simplificationData && this.simplificationData.operationValueNode) {
             return this.simplificationData.operationValueNode;
         }
         return null;
     }
-    
+
     /**
      * Destroys the step group and cleans up resources
      */