@eaprelsky/nocturna-wheel 3.0.1 → 3.0.3

package/dist/nocturna-wheel.es.js

@@ -287,7 +287,7 @@ class IconProvider {
 /**
  * IconData.js
  * Auto-generated module containing inline SVG icons as data URLs
- * Generated at: 2025-11-14T10:26:57.036Z
+ * Generated at: 2025-11-16T11:33:48.632Z
  * 
  * This file is automatically generated by the build process.
  * Do not edit manually - changes will be overwritten.
@@ -1986,10 +1986,21 @@ class ZodiacRenderer extends BaseRenderer {
         ];
 
         circles.forEach(circleData => {
+            // Determine stroke color and width based on circle type
+            let strokeColor = "#999";
+            let strokeWidth = "0.5";
+            if (circleData.class === "chart-outer-circle") {
+                strokeColor = "#666";
+                strokeWidth = "1";
+            }
+            
             const circle = this.svgUtils.createSVGElement("circle", {
                 cx: this.centerX,
                 cy: this.centerY,
                 r: circleData.r,
+                fill: "transparent", // Explicitly set transparent fill to avoid default black
+                stroke: strokeColor, // Explicitly set stroke to ensure visibility
+                "stroke-width": strokeWidth, // Explicitly set stroke width
                 class: `zodiac-element ${circleData.class}` // Add base class
             });
             parentGroup.appendChild(circle);
@@ -2024,6 +2035,8 @@ class ZodiacRenderer extends BaseRenderer {
                 y1: point1.y,
                 x2: point2.x,
                 y2: point2.y,
+                stroke: "#999", // Explicitly set stroke to ensure visibility
+                "stroke-width": "0.75", // Explicitly set stroke width
                 class: `zodiac-element zodiac-division-line ${specialClass}`
             });
 
@@ -2215,12 +2228,34 @@ class HouseRenderer extends BaseRenderer {
             const innerPoint = this.svgUtils.pointOnCircle(this.centerX, this.centerY, this.innerRadius, angle);
             const middlePoint = this.svgUtils.pointOnCircle(this.centerX, this.centerY, this.middleRadius, angle);
             
+            // Determine stroke color and width based on line type
+            let innerStrokeColor = "#999";
+            let innerStrokeWidth = "0.75";
+            
+            let outerStrokeColor = "#999";
+            let outerStrokeWidth = "0.75";
+            let outerStrokeDasharray = null;
+            
+            if (axisClass.includes('axis')) {
+                // Cardinal points (ASC, DSC, IC, MC) - solid, darker
+                innerStrokeColor = "#555";
+                innerStrokeWidth = "1";
+                outerStrokeColor = "#555";
+                outerStrokeWidth = "1";
+                // Axes are always solid
+            } else {
+                // Regular lines - outer lines are dashed
+                outerStrokeDasharray = "2,2";
+            }
+            
             // Create line from inner to middle circle
             const innerLine = this.svgUtils.createSVGElement("line", {
                 x1: innerPoint.x,
                 y1: innerPoint.y,
                 x2: middlePoint.x,
                 y2: middlePoint.y,
+                stroke: innerStrokeColor, // Explicitly set stroke to ensure visibility
+                "stroke-width": innerStrokeWidth, // Explicitly set stroke width
                 class: `house-element house-division-line ${axisClass}`
             });
             
@@ -2242,13 +2277,21 @@ class HouseRenderer extends BaseRenderer {
             const extendedPoint = this.svgUtils.pointOnCircle(this.centerX, this.centerY, this.extendedRadius, angle);
             
             // Create line from outer circle to extended point
-            const outerLine = this.svgUtils.createSVGElement("line", {
+            const outerLineAttrs = {
                 x1: outerPoint.x,
                 y1: outerPoint.y,
                 x2: extendedPoint.x,
                 y2: extendedPoint.y,
+                stroke: outerStrokeColor, // Explicitly set stroke to ensure visibility
+                "stroke-width": outerStrokeWidth, // Explicitly set stroke width
                 class: `house-element house-division-line outer ${axisClass}`
-            });
+            };
+            
+            if (outerStrokeDasharray) {
+                outerLineAttrs["stroke-dasharray"] = outerStrokeDasharray;
+            }
+            
+            const outerLine = this.svgUtils.createSVGElement("line", outerLineAttrs);
             
             // Ensure cardinal points render above zodiac lines
             if (axisClass.includes('axis')) {
@@ -2451,6 +2494,8 @@ class BasePlanetRenderer extends BaseRenderer {
             isPrimary: planetType === 'primary',
             type: planetType,
             color: p.color || '#000000',
+            // Retrograde flag - whether the planet is retrograde
+            retrograde: p.retrograde === true,
             // Track which radius this planet is being rendered at
             dotRadius: dotRadius,
             iconRadius: iconRadius
@@ -2559,6 +2604,50 @@ class PlanetSymbolRenderer extends BasePlanetRenderer {
         return icon;
     }
     
+    /**
+     * Renders a retrograde indicator (small "R" symbol) in the bottom-right corner of the planet icon
+     * @param {Element} parentGroup - The parent SVG group
+     * @param {Object} planet - Planet object with calculated positions
+     * @param {number} iconSize - Size of the icon in pixels
+     * @returns {Element} - The created retrograde indicator element
+     */
+    renderRetrogradeIndicator(parentGroup, planet, iconSize = 24) {
+        // Calculate position for "R" symbol in bottom-right corner of icon
+        // Offset from icon center to bottom-right corner
+        const offsetX = iconSize / 2 - 2; // Small offset from edge (2px from right edge)
+        const offsetY = iconSize / 2 - 2; // Small offset from bottom edge
+        
+        // Position relative to adjusted icon center
+        const rX = planet.adjustedIconX + offsetX;
+        const rY = planet.adjustedIconY + offsetY;
+        
+        // Get planet type for CSS classes
+        const typeClass = planet.isPrimary ? 'primary' : 'secondary';
+        
+        // Use planet color, but ensure visibility with darker shade if color is too light
+        const planetColor = planet.color || '#000000';
+        
+        // Create small "R" text element
+        const retrogradeText = this.svgUtils.createSVGElement("text", {
+            x: rX,
+            y: rY,
+            'text-anchor': 'end',
+            'dominant-baseline': 'alphabetic',
+            'font-size': `${Math.max(7, iconSize * 0.3)}px`, // Scale with icon size, minimum 7px
+            'font-weight': 'bold',
+            'font-family': 'Arial, sans-serif',
+            class: `planet-retrograde planet-${planet.name}-retrograde planet-${typeClass}-retrograde`,
+            fill: planetColor,
+            'stroke': '#ffffff', // White stroke for better visibility
+            'stroke-width': '0.5',
+            'paint-order': 'stroke fill'
+        });
+        
+        retrogradeText.textContent = 'R';
+        
+        return retrogradeText;
+    }
+    
     /**
      * Renders a dot to mark the exact planet position
      * @param {Element} parentGroup - The parent SVG group
@@ -3118,6 +3207,12 @@ class PrimaryPlanetRenderer extends BasePlanetRenderer {
             const icon = this.symbolRenderer.renderPlanetSymbol(planetGroup, planet, iconSize);
             planetGroup.appendChild(icon);
             
+            // Add retrograde indicator if planet is retrograde
+            if (planet.retrograde) {
+                const retrogradeIndicator = this.symbolRenderer.renderRetrogradeIndicator(planetGroup, planet, iconSize);
+                planetGroup.appendChild(retrogradeIndicator);
+            }
+            
             // Add tooltip
             this.symbolRenderer.addPlanetTooltip(planetGroup, planet);
             
@@ -3293,6 +3388,12 @@ class SecondaryPlanetRenderer extends BasePlanetRenderer {
             const icon = this.symbolRenderer.renderPlanetSymbol(planetGroup, planet, iconSize);
             planetGroup.appendChild(icon);
             
+            // Add retrograde indicator if planet is retrograde
+            if (planet.retrograde) {
+                const retrogradeIndicator = this.symbolRenderer.renderRetrogradeIndicator(planetGroup, planet, iconSize);
+                planetGroup.appendChild(retrogradeIndicator);
+            }
+            
             // Add tooltip
             this.symbolRenderer.addPlanetTooltip(planetGroup, planet);
             
@@ -4941,7 +5042,8 @@ class NocturnaWheel {
                     .map(([name, data]) => ({
                         name: name,
                         position: data.lon,
-                        color: data.color || '#000000'
+                        color: data.color || '#000000',
+                        retrograde: !!data.retrograde
                     }));
                 primaryPlanetsWithCoords = this.renderers.planet.primaryRenderer.render(primaryGroup, primaryArray, 0, {
                     config: this.config
@@ -4956,14 +5058,14 @@ class NocturnaWheel {
                     .map(([name, data]) => ({
                         name: name,
                         position: data.lon,
-                        color: data.color || '#000000'
+                        color: data.color || '#000000',
+                        retrograde: !!data.retrograde
                     }));
                 secondaryPlanetsWithCoords = this.renderers.planet.secondaryRenderer.render(secondaryGroup, secondaryArray, 0, {
                     config: this.config
                 });
             }
             
-            console.log(`NocturnaWheel: Rendered ${primaryPlanetsWithCoords.length} primary planets and ${secondaryPlanetsWithCoords.length} secondary planets`);
         }
         
         // Render three independent aspect types
@@ -4972,14 +5074,12 @@ class NocturnaWheel {
         if (this.config.primaryAspectSettings.enabled && primaryPlanetsWithCoords.length >= 2) {
             const primaryAspectsGroup = this.svgManager.getGroup('primaryAspects');
             this.renderers.aspect.render(primaryAspectsGroup, primaryPlanetsWithCoords, this.config.primaryAspectSettings);
-            console.log("NocturnaWheel: Rendered primary aspects");
         }
         
         // 2. Secondary aspects (inner circle to inner circle)
         if (this.config.secondaryAspectSettings.enabled && secondaryPlanetsWithCoords.length >= 2) {
             const secondaryAspectsGroup = this.svgManager.getGroup('secondaryAspects');
             this.renderers.aspect.render(secondaryAspectsGroup, secondaryPlanetsWithCoords, this.config.secondaryAspectSettings);
-            console.log("NocturnaWheel: Rendered secondary aspects");
         }
         
         // 3. Synastry aspects (outer circle to inner circle)
@@ -4993,10 +5093,8 @@ class NocturnaWheel {
                 secondaryPlanetsWithCoords, 
                 this.config.synastryAspectSettings
             );
-            console.log("NocturnaWheel: Rendered synastry aspects");
         }
         
-        console.log("NocturnaWheel: Chart rendered");
         return this;
     }
 
@@ -5133,8 +5231,18 @@ class NocturnaWheel {
             // Update internal planets data
             // Ensure it matches the format expected internally (object)
             if (typeof data.planets === 'object' && !Array.isArray(data.planets)) {
-                this.planets = { ...this.planets, ...data.planets };
-                console.log("NocturnaWheel: Updated planets data.");
+                // Perform a deep merge for each planet
+                for (const planetName in data.planets) {
+                    if (this.planets[planetName]) {
+                        this.planets[planetName] = { ...this.planets[planetName], ...data.planets[planetName] };
+                    } else {
+                        this.planets[planetName] = data.planets[planetName];
+                    }
+                }
+                // Log retrograde flags specifically
+                Object.keys(this.planets).forEach(key => {
+                    // console.log(`  ${key}: retrograde = ${this.planets[key].retrograde}`);
+                });
             } else {
                 console.warn("NocturnaWheel.updateData: Invalid planets data format. Expected object.");
             }
@@ -5142,8 +5250,15 @@ class NocturnaWheel {
         if (data.secondaryPlanets) {
             // Update internal secondary planets data
             if (typeof data.secondaryPlanets === 'object' && !Array.isArray(data.secondaryPlanets)) {
-                this.secondaryPlanets = { ...this.secondaryPlanets, ...data.secondaryPlanets };
-                console.log("NocturnaWheel: Updated secondary planets data.");
+                // Perform a deep merge for each secondary planet
+                for (const planetName in data.secondaryPlanets) {
+                    if (this.secondaryPlanets[planetName]) {
+                        this.secondaryPlanets[planetName] = { ...this.secondaryPlanets[planetName], ...data.secondaryPlanets[planetName] };
+                    } else {
+                        this.secondaryPlanets[planetName] = data.secondaryPlanets[planetName];
+                    }
+                }
+                // console.log("NocturnaWheel: Updated secondary planets data (deep merged).");
             } else {
                 console.warn("NocturnaWheel.updateData: Invalid secondaryPlanets data format. Expected object.");
             }
@@ -5156,7 +5271,7 @@ class NocturnaWheel {
                  if (this.renderers.house) {
                      this.renderers.house.houseData = this.houses;
                  }
-                 console.log("NocturnaWheel: Updated houses data.");
+                 // console.log("NocturnaWheel: Updated houses data.");
              } else {
                  console.warn("NocturnaWheel.updateData: Invalid houses data format. Expected array.");
              }
@@ -5179,7 +5294,7 @@ class NocturnaWheel {
             this.config.updateAspectSettings(configUpdate.aspectSettings);
         }
         
-        console.log("NocturnaWheel: Updated configuration.");
+        // console.log("NocturnaWheel: Updated configuration.");
         // Re-render the chart with updated configuration
         this.render();
         return this;
@@ -5227,7 +5342,7 @@ class NocturnaWheel {
             primaryGroup.style.display = visible ? 'block' : 'none';
         }
         
-        console.log(`NocturnaWheel: Primary planets ${visible ? 'enabled' : 'disabled'}`);
+        // console.log(`NocturnaWheel: Primary planets ${visible ? 'enabled' : 'disabled'}`);
         return this;
     }
     
@@ -5252,7 +5367,7 @@ class NocturnaWheel {
             innermostCircle.style.display = visible ? 'block' : 'none';
         }
         
-        console.log(`NocturnaWheel: Secondary planets ${visible ? 'enabled' : 'disabled'}`);
+        // console.log(`NocturnaWheel: Secondary planets ${visible ? 'enabled' : 'disabled'}`);
         return this;
     }
 }
@@ -5338,6 +5453,9 @@ class ChartRenderer {
             cx: centerX,
             cy: centerY,
             r: radius,
+            fill: "transparent", // Explicitly set transparent fill to avoid default black
+            stroke: "#999", // Explicitly set stroke to ensure visibility
+            "stroke-width": "0.5", // Explicitly set stroke width
             class: 'zodiac-element chart-innermost-circle'
         });
         zodiacGroup.appendChild(innermostCircle);
@@ -5742,11 +5860,21 @@ function cleanup() {
   }
 }
 
-// Initialize the chart when the DOM is ready
-document.addEventListener('DOMContentLoaded', initChart);
+// Auto-initialization is DISABLED in production builds to prevent conflicts.
+// This demo code should only run in development mode with Vite dev server.
+// In production, users explicitly create their own chart instances.
 
-// Handle hot module replacement for Vite
+// Handle hot module replacement for Vite (development only)
 if (import.meta.hot) {
+  // Initialize the chart when the DOM is ready (ONLY in development)
+  document.addEventListener('DOMContentLoaded', () => {
+    const container = document.getElementById('chart-container');
+    if (container && container.children.length === 0) {
+      console.log('DEV MODE: Auto-initializing demo chart');
+      initChart();
+    }
+  });
+
   import.meta.hot.accept((newModule) => {
     console.log('HMR update for main.js');
     cleanup();