@teachinglab/omd 0.2.6 → 0.2.8

package/omd/nodes/omdEquationNode.js

@@ -1005,7 +1005,7 @@ _propagateBackgroundStyle(style, visited = new Set()) {
             case 'table':
                 return this._renderToTable(mergedOptions);
             case 'hanger':
-                return this._renderToHanger();
+                return this._renderToHanger(mergedOptions);
             case 'tileequation': {
                 const leftExpr = this.getLeft().toString();
                 const rightExpr = this.getRight().toString();
@@ -1089,6 +1089,11 @@ _propagateBackgroundStyle(style, visited = new Set()) {
             tickInterval: (options.tickInterval !== undefined) ? options.tickInterval : 1,
             forceAllTickLabels: (options.forceAllTickLabels !== undefined) ? options.forceAllTickLabels : true,
             showTickLabels: (options.showTickLabels !== undefined) ? options.showTickLabels : true,
+            // Background customization options
+            backgroundColor: (options.backgroundColor !== undefined) ? options.backgroundColor : undefined,
+            backgroundCornerRadius: (options.backgroundCornerRadius !== undefined) ? options.backgroundCornerRadius : undefined,
+            backgroundOpacity: (options.backgroundOpacity !== undefined) ? options.backgroundOpacity : undefined,
+            showBackground: (options.showBackground !== undefined) ? options.showBackground : undefined,
             graphEquations,
             lineSegments: [],
             dotValues: [],
@@ -1113,7 +1118,17 @@ _propagateBackgroundStyle(style, visited = new Set()) {
                 equation: `y = ${expr}`,
                 xMin: options.xMin,
                 xMax: options.xMax,
-                stepSize: options.stepSize
+                stepSize: options.stepSize,
+                // Background customization options
+                backgroundColor: (options.backgroundColor !== undefined) ? options.backgroundColor : undefined,
+                backgroundCornerRadius: (options.backgroundCornerRadius !== undefined) ? options.backgroundCornerRadius : undefined,
+                backgroundOpacity: (options.backgroundOpacity !== undefined) ? options.backgroundOpacity : undefined,
+                showBackground: (options.showBackground !== undefined) ? options.showBackground : undefined,
+                // Alternating row color options
+                alternatingRowColors: (options.alternatingRowColors !== undefined) ? options.alternatingRowColors : undefined,
+                evenRowColor: (options.evenRowColor !== undefined) ? options.evenRowColor : undefined,
+                oddRowColor: (options.oddRowColor !== undefined) ? options.oddRowColor : undefined,
+                alternatingRowOpacity: (options.alternatingRowOpacity !== undefined) ? options.alternatingRowOpacity : undefined
             };
         } else if (options.side === 'right') {
             const expr = this._normalizeExpressionString(this.getRight().toString());
@@ -1124,7 +1139,17 @@ _propagateBackgroundStyle(style, visited = new Set()) {
                 equation: `y = ${expr}`,
                 xMin: options.xMin,
                 xMax: options.xMax,
-                stepSize: options.stepSize
+                stepSize: options.stepSize,
+                // Background customization options
+                backgroundColor: (options.backgroundColor !== undefined) ? options.backgroundColor : undefined,
+                backgroundCornerRadius: (options.backgroundCornerRadius !== undefined) ? options.backgroundCornerRadius : undefined,
+                backgroundOpacity: (options.backgroundOpacity !== undefined) ? options.backgroundOpacity : undefined,
+                showBackground: (options.showBackground !== undefined) ? options.showBackground : undefined,
+                // Alternating row color options
+                alternatingRowColors: (options.alternatingRowColors !== undefined) ? options.alternatingRowColors : undefined,
+                evenRowColor: (options.evenRowColor !== undefined) ? options.evenRowColor : undefined,
+                oddRowColor: (options.oddRowColor !== undefined) ? options.oddRowColor : undefined,
+                alternatingRowOpacity: (options.alternatingRowOpacity !== undefined) ? options.alternatingRowOpacity : undefined
             };
         }
 
@@ -1155,7 +1180,17 @@ _propagateBackgroundStyle(style, visited = new Set()) {
             omdType: "table",
             title: `Equation Table: ${this.toString()}`,
             headers,
-            data
+            data,
+            // Background customization options
+            backgroundColor: (options.backgroundColor !== undefined) ? options.backgroundColor : undefined,
+            backgroundCornerRadius: (options.backgroundCornerRadius !== undefined) ? options.backgroundCornerRadius : undefined,
+            backgroundOpacity: (options.backgroundOpacity !== undefined) ? options.backgroundOpacity : undefined,
+            showBackground: (options.showBackground !== undefined) ? options.showBackground : undefined,
+            // Alternating row color options
+            alternatingRowColors: (options.alternatingRowColors !== undefined) ? options.alternatingRowColors : undefined,
+            evenRowColor: (options.evenRowColor !== undefined) ? options.evenRowColor : undefined,
+            oddRowColor: (options.oddRowColor !== undefined) ? options.oddRowColor : undefined,
+            alternatingRowOpacity: (options.alternatingRowOpacity !== undefined) ? options.alternatingRowOpacity : undefined
         };
     }
 
@@ -1184,7 +1219,7 @@ _propagateBackgroundStyle(style, visited = new Set()) {
      * @returns {Object} JSON configuration for omdBalanceHanger
      * @private
      */
-    _renderToHanger() {
+    _renderToHanger(options = {}) {
         // Convert equation sides to hanger representation
         const leftValues = this._convertToHangerValues(this.getLeft());
         const rightValues = this._convertToHangerValues(this.getRight());
@@ -1193,7 +1228,12 @@ _propagateBackgroundStyle(style, visited = new Set()) {
             omdType: "balanceHanger",
             leftValues: leftValues,
             rightValues: rightValues,
-            tilt: "none" // Equations should be balanced by definition
+            tilt: "none", // Equations should be balanced by definition
+            // Background customization options
+            backgroundColor: (options.backgroundColor !== undefined) ? options.backgroundColor : undefined,
+            backgroundCornerRadius: (options.backgroundCornerRadius !== undefined) ? options.backgroundCornerRadius : undefined,
+            backgroundOpacity: (options.backgroundOpacity !== undefined) ? options.backgroundOpacity : undefined,
+            showBackground: (options.showBackground !== undefined) ? options.showBackground : undefined
         };
     }
 

package/omd/step-visualizer/omdStepVisualizer.js

@@ -15,16 +15,22 @@ import { jsvgLayoutGroup, jsvgEllipse, jsvgLine } from '@teachinglab/jsvg';
  * @extends omdEquationSequenceNode
  */
 export class omdStepVisualizer extends omdEquationSequenceNode {
-    constructor(steps) {
+    constructor(steps, styling = {}) {
         super(steps);
         
+        // Store styling options with defaults
+        this.styling = this._mergeWithDefaults(styling || {});
+        
         // Visual elements for step tracking
         this.stepDots = [];
         this.stepLines = [];
         this.visualContainer = new jsvgLayoutGroup();
-        this.dotRadius = getDotRadius(0);
-        this.lineWidth = 2;
-        this.visualSpacing = 30;
+        
+        // Use styling values for these properties
+        this.dotRadius = this.styling.dotRadius;
+        this.lineWidth = this.styling.lineWidth;
+        this.visualSpacing = this.styling.visualSpacing;
+        
         this.activeDotIndex = -1;
         this.dotsClickable = true;
         this.nodeToStepMap = new Map();
@@ -32,15 +38,311 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
         // Highlighting system
         this.stepVisualizerHighlights = new Set();
         this.highlighting = new omdStepVisualizerHighlighting(this);
-        this.textBoxManager = new omdStepVisualizerTextBoxes(this, this.highlighting);
+        
+        // Pass textbox options through styling parameter
+        const textBoxOptions = this.styling.textBoxOptions || {};
+        this.textBoxManager = new omdStepVisualizerTextBoxes(this, this.highlighting, textBoxOptions);
         this.layoutManager = new omdStepVisualizerLayout(this);
         
         this.addChild(this.visualContainer);
         this._initializeVisualElements();
+        
+        // Set default filter level to show only major steps (stepMark = 0)
+        // This ensures intermediate steps are hidden and expansion dots can be created
+        
+        
+        
+        if (this.setFilterLevel && typeof this.setFilterLevel === 'function') {
+            this.setFilterLevel(0);
+            
+        } else {
+            
+        }
+        
         this.computeDimensions();
         this.updateLayout();
     }
 
+    /**
+     * Public: programmatically toggle a dot (simulate user click behavior)
+     * @param {number} dotIndex
+     */
+    toggleDot(dotIndex) {
+        if (typeof dotIndex !== 'number') return;
+        if (dotIndex < 0 || dotIndex >= this.stepDots.length) return;
+        const dot = this.stepDots[dotIndex];
+        this._handleDotClick(dot, dotIndex);
+    }
+
+    /**
+     * Public: close currently active dot textbox if any
+     */
+    closeActiveDot() {
+        // Always clear all boxes to be safe (even if activeDotIndex already reset)
+        try {
+            const before = this.textBoxManager?.stepTextBoxes?.length || 0;
+            this._clearActiveDot();
+            if (this.textBoxManager && typeof this.textBoxManager.clearAllTextBoxes === 'function') {
+                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 */ }
+    }
+
+    /**
+     * Public: close all text boxes (future-proof; currently only one can be active)
+     */
+    closeAllTextBoxes() {
+        this.closeActiveDot();
+    }
+
+    /**
+     * Public: force close EVERYTHING related to active explanation UI
+     */
+    forceCloseAll() {
+        this.closeActiveDot();
+    }
+    
+    /**
+     * Merges user styling with default styling options
+     * @param {Object} userStyling - User-provided styling options
+     * @returns {Object} Merged styling object with defaults
+     * @private
+     */
+    _mergeWithDefaults(userStyling) {
+        const defaults = {
+            // Dot styling
+            dotColor: omdColor.stepColor,
+            dotRadius: getDotRadius(0),
+            dotStrokeWidth: 2,
+            activeDotColor: omdColor.explainColor,
+            expansionDotScale: 0.4,
+            
+            // Line styling
+            lineColor: omdColor.stepColor,
+            lineWidth: 2,
+            activeLineColor: omdColor.explainColor,
+            
+            // Colors
+            explainColor: omdColor.explainColor,
+            highlightColor: omdColor.hiliteColor,
+            
+            // Layout
+            visualSpacing: 30,
+            fixedVisualizerPosition: 250,
+            dotVerticalOffset: 15,
+            
+            // Text boxes
+            textBoxOptions: {
+                backgroundColor: omdColor.white,
+                borderColor: omdColor.lightGray,
+                borderWidth: 1,
+                borderRadius: 5,
+                padding: 8, // Minimal padding for tight fit
+                fontSize: 14,
+                fontFamily: 'Albert Sans, Arial, sans-serif',
+                maxWidth: 300, // More reasonable width for compact layout
+                dropShadow: true
+                // Removed zIndex and position from defaults - these should only apply to container
+            },
+            
+            // Visual effects
+            enableAnimations: true,
+            hoverEffects: true,
+            
+            // Background styling (inherited from equation styling)
+            backgroundColor: null,
+            cornerRadius: null,
+            pill: null
+        };
+        
+        return this._deepMerge(defaults, userStyling);
+    }
+    
+    /**
+     * Deep merge two objects
+     * @param {Object} target - Target object
+     * @param {Object} source - Source object
+     * @returns {Object} Merged object
+     * @private
+     */
+    _deepMerge(target, source) {
+        const result = { ...target };
+        
+        for (const key in source) {
+            if (source.hasOwnProperty(key)) {
+                if (typeof source[key] === 'object' && source[key] !== null && !Array.isArray(source[key])) {
+                    result[key] = this._deepMerge(result[key] || {}, source[key]);
+                } else {
+                    result[key] = source[key];
+                }
+            }
+        }
+        
+        return result;
+    }
+    
+    /**
+     * Updates the styling options and applies them to existing visual elements
+     * @param {Object} newStyling - New styling options to apply
+     */
+    setStyling(newStyling) {
+        this.styling = this._mergeWithDefaults({ ...this.styling, ...newStyling });
+        
+        // Update instance properties that are used elsewhere
+        this.dotRadius = this.styling.dotRadius;
+        this.lineWidth = this.styling.lineWidth;
+        this.visualSpacing = this.styling.visualSpacing;
+        
+        this._applyStylingToExistingElements();
+        
+        // Update layout spacing if changed
+        if (newStyling.visualSpacing !== undefined) {
+            this.visualSpacing = this.styling.visualSpacing;
+        }
+        if (newStyling.fixedVisualizerPosition !== undefined && this.layoutManager) {
+            this.layoutManager.setFixedVisualizerPosition(this.styling.fixedVisualizerPosition);
+        }
+        
+        // Refresh layout and visual elements
+        this.updateLayout();
+    }
+    
+    /**
+     * Gets the current styling options
+     * @returns {Object} Current styling configuration
+     */
+    getStyling() {
+        return { ...this.styling };
+    }
+    
+    /**
+     * Sets a specific styling property
+     * @param {string} property - The property to set (supports dot notation like 'textBoxOptions.backgroundColor')
+     * @param {any} value - The value to set
+     */
+    setStyleProperty(property, value) {
+        const keys = property.split('.');
+        const lastKey = keys.pop();
+        const target = keys.reduce((obj, key) => {
+            if (!obj[key]) obj[key] = {};
+            return obj[key];
+        }, this.styling);
+        
+        target[lastKey] = value;
+        
+        // Update instance properties if they were changed
+        if (property === 'dotRadius') this.dotRadius = value;
+        if (property === 'lineWidth') this.lineWidth = value;
+        if (property === 'visualSpacing') this.visualSpacing = value;
+        if (property === 'fixedVisualizerPosition' && this.layoutManager) {
+            this.layoutManager.setFixedVisualizerPosition(value);
+        }
+        
+        this._applyStylingToExistingElements();
+        this.updateLayout();
+    }
+    
+    /**
+     * Gets a specific styling property
+     * @param {string} property - The property to get (supports dot notation)
+     * @returns {any} The property value
+     */
+    getStyleProperty(property) {
+        return property.split('.').reduce((obj, key) => obj?.[key], this.styling);
+    }
+    
+    /**
+     * Applies current styling to all existing visual elements
+     * @private
+     */
+    _applyStylingToExistingElements() {
+        // Update dots
+        this.stepDots.forEach((dot, index) => {
+            if (dot && dot.equationRef) {
+                const isActive = this.activeDotIndex === index;
+                const color = isActive ? this.styling.activeDotColor : this.styling.dotColor;
+                dot.setFillColor(color);
+                dot.setStrokeColor(color);
+                dot.setStrokeWidth(this.styling.dotStrokeWidth);
+                
+                // Update radius based on step mark
+                const stepMark = dot.equationRef.stepMark ?? 0;
+                const radius = this.styling.dotRadius || getDotRadius(stepMark);
+                dot.setWidthAndHeight(radius * 2, radius * 2);
+                dot.radius = radius;
+            }
+        });
+        
+        // Update lines
+        this.stepLines.forEach((line, index) => {
+            if (line) {
+                const isActive = this.activeDotIndex >= 0 && 
+                    (line.toDotIndex === this.activeDotIndex || line.fromDotIndex === this.activeDotIndex);
+                const color = isActive ? this.styling.activeLineColor : this.styling.lineColor;
+                line.setStrokeColor(color);
+                line.setStrokeWidth(this.styling.lineWidth);
+            }
+        });
+        
+        // Update expansion dots
+        if (this.layoutManager && this.layoutManager.expansionDots) {
+            this.layoutManager.expansionDots.forEach(expansionDot => {
+                if (expansionDot) {
+                    const baseRadius = this.styling.dotRadius || getDotRadius(0);
+                    const radius = Math.max(3, baseRadius * this.styling.expansionDotScale);
+                    expansionDot.setWidthAndHeight(radius * 2, radius * 2);
+                    expansionDot.radius = radius;
+                    expansionDot.setFillColor(this.styling.dotColor);
+                    expansionDot.setStrokeColor(this.styling.dotColor);
+                }
+            });
+        }
+        
+        // Update text box styling if manager exists
+        if (this.textBoxManager && typeof this.textBoxManager.updateStyling === 'function') {
+            this.textBoxManager.updateStyling(this.styling.textBoxOptions);
+        }
+    }
+    
+    /**
+     * Sets the visual background style (inherits from equation styling)
+     * @param {Object} style - Background style options
+     */
+    setBackgroundStyle(style = {}) {
+        this.styling.backgroundColor = style.backgroundColor || this.styling.backgroundColor;
+        this.styling.cornerRadius = style.cornerRadius || this.styling.cornerRadius;
+        this.styling.pill = style.pill !== undefined ? style.pill : this.styling.pill;
+        
+        // Apply to equation background if this step visualizer has equation styling
+        if (typeof this.setDefaultEquationBackground === 'function') {
+            this.setDefaultEquationBackground(style);
+        }
+    }
+    
+    /**
+     * Gets the current background style
+     * @returns {Object} Current background style
+     */
+    getBackgroundStyle() {
+        return {
+            backgroundColor: this.styling.backgroundColor,
+            cornerRadius: this.styling.cornerRadius,
+            pill: this.styling.pill
+        };
+    }
+    
+    /**
+     * Sets the fixed position for the step visualizer
+     * @param {number} position - The x position from the left edge where the visualizer should be positioned
+     */
+    setFixedVisualizerPosition(position) {
+        if (this.layoutManager) {
+            this.layoutManager.setFixedVisualizerPosition(position);
+        }
+    }
+
     /**
      * Force rebuild visual container (dots/lines) from scratch
      */
@@ -77,7 +379,7 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
         });
         
         this.layoutManager.updateVisualZOrder();
-        this.layoutManager.updateVisualLayout();
+        this.layoutManager.updateVisualLayout(true); 
     }
     
     /**
@@ -85,12 +387,14 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      * @private
      */
     _createStepDot(equation, index) {
-        const radius = getDotRadius(equation.stepMark ?? 0);
+        const stepMark = equation.stepMark ?? 0;
+        const radius = this.styling.dotRadius || getDotRadius(stepMark);
         const dot = new jsvgEllipse();
         dot.setWidthAndHeight(radius * 2, radius * 2);
-        dot.setFillColor(omdColor.stepColor);
-        dot.setStrokeColor(omdColor.stepColor);
-        dot.setStrokeWidth(this.lineWidth);
+        const dotColor = this.styling.dotColor;
+        dot.setFillColor(dotColor);
+        dot.setStrokeColor(dotColor);
+        dot.setStrokeWidth(this.styling.dotStrokeWidth);
         dot.radius = radius;
         
         dot.equationRef = equation;
@@ -114,8 +418,9 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      */
     _createStepLine(fromIndex, toIndex) {
         const line = new jsvgLine();
-        line.setStrokeColor(omdColor.stepColor);
-        line.setStrokeWidth(this.lineWidth);
+        const lineColor = this.styling.lineColor;
+        line.setStrokeColor(lineColor);
+        line.setStrokeWidth(this.styling.lineWidth);
         
         line.fromDotIndex = fromIndex;
         line.toDotIndex = toIndex;
@@ -151,30 +456,39 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      * Override addStep to update visual elements when new steps are added
      */
     addStep(step, options = {}) {
-        let createdDot=null;
+        // Call parent first to add the step properly
+        super.addStep(step, options);
+        
+        // Now create visual elements for equation nodes only
         if (step instanceof omdEquationNode) {
-            this.steps.push(step);
-            const equations = this.steps.filter(s => s instanceof omdEquationNode);
-            const newIndex = equations.length - 1;
-            this.steps.pop();
-            createdDot = this._createStepDot(step, newIndex);
-            step.findAllNodes().forEach(node => {
-                this.nodeToStepMap.set(node.id, newIndex);
-            });
+            // Find the actual index of this equation in the steps array
+            const equationIndex = this.steps.filter(s => s instanceof omdEquationNode).indexOf(step);
             
-            if (newIndex > 0) {
-                this._createStepLine(newIndex - 1, newIndex);
+            if (equationIndex >= 0) {
+                const createdDot = this._createStepDot(step, equationIndex);
+                
+                // Update the node to step mapping
+                step.findAllNodes().forEach(node => {
+                    this.nodeToStepMap.set(node.id, equationIndex);
+                });
+                
+                // Create connecting line if this isn't the first equation
+                if (equationIndex > 0) {
+                    this._createStepLine(equationIndex - 1, equationIndex);
+                }
+                
+                // After stepMark is set, adjust dot radius
+                if (createdDot) {
+                    const radius = getDotRadius(step.stepMark ?? 0);
+                    createdDot.setWidthAndHeight(radius * 2, radius * 2);
+                    createdDot.radius = radius;
+                }
             }
         }
         
-        super.addStep(step, options);
-
-        // after stepMark is set, adjust dot radius
-        if(createdDot){
-            const radius=getDotRadius(step.stepMark??0);
-            createdDot.setWidthAndHeight(radius*2,radius*2);
-            createdDot.radius=radius;
-        }
+        // Update layout after adding the step
+        this.computeDimensions();
+        this.updateLayout();
     }
     
     /**
@@ -189,13 +503,16 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      */
     computeDimensions() {
         super.computeDimensions();
+        // Store original dimensions before visualizer expansion
         this.sequenceWidth = this.width;
+        this.sequenceHeight = this.height;
         
-        // Ensure stepDots is initialized before accessing its length
-        if (this.stepDots && this.stepDots.length > 0) {
+        // Set width to include the fixed visualizer position plus visualizer width
+        if (this.stepDots && this.stepDots.length > 0 && this.layoutManager) {
             const containerWidth = this.dotRadius * 3;
-            const visualWidth = this.visualSpacing + containerWidth;
-            this.setWidthAndHeight(this.width + visualWidth, this.height);
+            const fixedVisualizerPosition = this.layoutManager.fixedVisualizerPosition || 250;
+            const totalWidth = fixedVisualizerPosition + this.visualSpacing + containerWidth;
+            this.setWidthAndHeight(totalWidth, this.height);
         }
     }
     
@@ -203,14 +520,26 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
      * Override updateLayout to update visual elements as well
      */
     updateLayout() {
+        
+        
         super.updateLayout();
         
         // Only update visual layout if layoutManager is initialized
         if (this.layoutManager) {
-            this.layoutManager.updateVisualLayout();
+            
+            
+            this.layoutManager.updateVisualLayout(true); // Allow repositioning for main layout updates
+            
+            
             this.layoutManager.updateVisualVisibility();
+            
+            
             this.layoutManager.updateAllLinePositions();
+        } else {
+            
         }
+        
+        
     }
 
     /**
@@ -313,30 +642,46 @@ export class omdStepVisualizer extends omdEquationSequenceNode {
         this.activeDot = this.stepDots[dotIndex];
         
         const dot = this.stepDots[dotIndex];
-        dot.setFillColor(omdColor.explainColor);
-        dot.setStrokeColor(omdColor.explainColor);
+        const explainColor = this.styling.activeDotColor;
+        dot.setFillColor(explainColor);
+        dot.setStrokeColor(explainColor);
         
-        this.setLineAboveColor(dotIndex, omdColor.explainColor);
+        this.setLineAboveColor(dotIndex, this.styling.activeLineColor);
         this.textBoxManager.createTextBoxForDot(dotIndex);
+        
+        // Temporarily disable equation repositioning for simple dot state changes
+        const originalRepositioning = this.layoutManager.allowEquationRepositioning;
+        this.layoutManager.allowEquationRepositioning = false;
         this.layoutManager.updateVisualZOrder();
+        this.layoutManager.allowEquationRepositioning = originalRepositioning;
     }
     
     /**
      * Clears the currently active dot
      * @private
+     */
+        /**
+     * Clears the currently active dot
+     * @private
      */
     _clearActiveDot() {
         try {
             if (this.activeDotIndex !== -1) {
                 const dot = this.stepDots[this.activeDotIndex];
-                dot.setFillColor(omdColor.stepColor);
-                dot.setStrokeColor(omdColor.stepColor);
+                const dotColor = this.styling.dotColor;
+                dot.setFillColor(dotColor);
+                dot.setStrokeColor(dotColor);
                 
-                this.setLineAboveColor(this.activeDotIndex, omdColor.stepColor);
+                this.setLineAboveColor(this.activeDotIndex, this.styling.lineColor);
                 this.textBoxManager.removeTextBoxForDot(this.activeDotIndex);
                 
                 this.highlighting.clearHighlights();
+                
+                // Temporarily disable equation repositioning for simple dot state changes
+                const originalRepositioning = this.layoutManager.allowEquationRepositioning;
+                this.layoutManager.allowEquationRepositioning = false;
                 this.layoutManager.updateVisualZOrder();
+                this.layoutManager.allowEquationRepositioning = originalRepositioning;
             
                 this.activeDot = null;
                 this.activeDotIndex = -1;