@eaprelsky/nocturna-wheel 3.0.1 → 3.0.3

package/dist/nocturna-wheel.umd.js

@@ -293,7 +293,7 @@
     /**
      * 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.
@@ -1992,10 +1992,21 @@
             ];
 
             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);
@@ -2030,6 +2041,8 @@
                     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}`
                 });
 
@@ -2221,12 +2234,34 @@
                 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}`
                 });
                 
@@ -2248,13 +2283,21 @@
                 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')) {
@@ -2457,6 +2500,8 @@
                 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
@@ -2565,6 +2610,50 @@
             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
@@ -3124,6 +3213,12 @@
                 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);
                 
@@ -3299,6 +3394,12 @@
                 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);
                 
@@ -4947,7 +5048,8 @@
                         .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
@@ -4962,14 +5064,14 @@
                         .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
@@ -4978,14 +5080,12 @@
             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)
@@ -4999,10 +5099,8 @@
                     secondaryPlanetsWithCoords, 
                     this.config.synastryAspectSettings
                 );
-                console.log("NocturnaWheel: Rendered synastry aspects");
             }
             
-            console.log("NocturnaWheel: Chart rendered");
             return this;
         }
 
@@ -5139,8 +5237,18 @@
                 // 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.");
                 }
@@ -5148,8 +5256,15 @@
             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.");
                 }
@@ -5162,7 +5277,7 @@
                      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.");
                  }
@@ -5185,7 +5300,7 @@
                 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;
@@ -5233,7 +5348,7 @@
                 primaryGroup.style.display = visible ? 'block' : 'none';
             }
             
-            console.log(`NocturnaWheel: Primary planets ${visible ? 'enabled' : 'disabled'}`);
+            // console.log(`NocturnaWheel: Primary planets ${visible ? 'enabled' : 'disabled'}`);
             return this;
         }
         
@@ -5258,7 +5373,7 @@
                 innermostCircle.style.display = visible ? 'block' : 'none';
             }
             
-            console.log(`NocturnaWheel: Secondary planets ${visible ? 'enabled' : 'disabled'}`);
+            // console.log(`NocturnaWheel: Secondary planets ${visible ? 'enabled' : 'disabled'}`);
             return this;
         }
     }
@@ -5344,6 +5459,9 @@
                 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);
@@ -5748,11 +5866,21 @@
       }
     }
 
-    // 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 (undefined) {
+      // 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();
+        }
+      });
+
       undefined.accept((newModule) => {
         console.log('HMR update for main.js');
         cleanup();