@eaprelsky/nocturna-wheel 3.0.0 → 3.0.2

package/dist/nocturna-wheel.es.js

@@ -83,47 +83,16 @@ class ServiceRegistry {
     }
     
     /**
-     * Gets or creates an IconProvider instance
-     * @param {string} basePath - Optional base path for SVG assets
-     * @returns {Object} The IconProvider instance
+     * Gets the IconProvider instance
+     * NOTE: IconProvider should be registered externally before use
+     * This method only retrieves, does not create
+     * @returns {Object|undefined} The IconProvider instance if registered
      */
-    static getIconProvider(basePath = './assets/svg/zodiac/') {
+    static getIconProvider() {
         if (!this.has('iconProvider')) {
-            // Create a simple icon provider
-            const iconProvider = {
-                basePath: basePath,
-                
-                getPlanetIconPath(planetName) {
-                    return `${this.basePath}zodiac-planet-${planetName.toLowerCase()}.svg`;
-                },
-                
-                getZodiacIconPath(signName) {
-                    return `${this.basePath}zodiac-sign-${signName.toLowerCase()}.svg`;
-                },
-                
-                getAspectIconPath(aspectType) {
-                    return `${this.basePath}zodiac-aspect-${aspectType.toLowerCase()}.svg`;
-                },
-                
-                createTextFallback(svgUtils, options, text) {
-                    const { x, y, size = '16px', color = '#000000', className = 'icon-fallback' } = options;
-                    
-                    const textElement = svgUtils.createSVGElement("text", {
-                        x: x,
-                        y: y,
-                        'text-anchor': 'middle',
-                        'dominant-baseline': 'middle',
-                        'font-size': size,
-                        'class': className,
-                        'fill': color
-                    });
-                    
-                    textElement.textContent = text;
-                    return textElement;
-                }
-            };
-            
-            this.register('iconProvider', iconProvider);
+            console.warn('ServiceRegistry: IconProvider not registered. Icons may not work correctly.');
+            console.warn('ServiceRegistry: This should be initialized in main.js with inline IconData.');
+            return null;
         }
         return this.get('iconProvider');
     }
@@ -136,8 +105,8 @@ class ServiceRegistry {
         // Initialize SvgUtils
         this.getSvgUtils();
         
-        // Initialize IconProvider with the assets base path
-        this.getIconProvider(options.assetBasePath || './assets/svg/zodiac/');
+        // Note: IconProvider should be registered externally in main.js
+        // with inline IconData before calling this method
         
         console.log("ServiceRegistry: Core services initialized");
     }
@@ -153,17 +122,6 @@ class ServiceRegistry {
  * 2. External mode: Uses external file paths (for custom icons)
  */
 
-// Try to import IconData if available (after build)
-let InlineIconData = null;
-try {
-    // This will be replaced by rollup during build
-    // During development or if IconData doesn't exist, this will fail gracefully
-    InlineIconData = null; // Will be set up after IconData.js is generated
-} catch (e) {
-    // IconData not available yet
-    InlineIconData = null;
-}
-
 class IconProvider {
     /**
      * Constructor
@@ -184,6 +142,9 @@ class IconProvider {
         
         // Lazy-load IconData on first use
         this.inlineData = null;
+        
+        // Track if warning was already shown (to avoid spam)
+        this._warnedAboutMissingData = false;
     }
     
     /**
@@ -191,9 +152,6 @@ class IconProvider {
      * @private
      */
     _getInlineData() {
-        if (!this.inlineData && InlineIconData) {
-            this.inlineData = InlineIconData;
-        }
         return this.inlineData;
     }
     
@@ -203,7 +161,11 @@ class IconProvider {
      */
     setInlineData(iconData) {
         this.inlineData = iconData;
-        InlineIconData = iconData;
+        console.log('IconProvider.setInlineData(): Data loaded successfully',
+            'planets:', Object.keys(iconData?.planets || {}).length,
+            'signs:', Object.keys(iconData?.signs || {}).length,
+            'aspects:', Object.keys(iconData?.aspects || {}).length
+        );
     }
 
     /**
@@ -224,6 +186,16 @@ class IconProvider {
             const inlineData = this._getInlineData();
             if (inlineData?.planets?.[name]) {
                 return inlineData.planets[name];
+            } else {
+                // Debug: log when inline data is not available (only once)
+                if (!this._warnedAboutMissingData) {
+                    this._warnedAboutMissingData = true;
+                    if (!inlineData) {
+                        console.warn(`IconProvider: Inline data not loaded, falling back to external paths. Call setInlineData() to load inline icons.`);
+                    } else if (!inlineData.planets) {
+                        console.warn(`IconProvider: Inline data missing 'planets' category`);
+                    }
+                }
             }
         }
         
@@ -315,7 +287,7 @@ class IconProvider {
 /**
  * IconData.js
  * Auto-generated module containing inline SVG icons as data URLs
- * Generated at: 2025-11-13T13:46:12.044Z
+ * Generated at: 2025-11-14T16:02:20.923Z
  * 
  * This file is automatically generated by the build process.
  * Do not edit manually - changes will be overwritten.
@@ -1962,11 +1934,18 @@ class ZodiacRenderer extends BaseRenderer {
      */
     constructor(options) {
         super(options);
-        if (!options.assetBasePath) {
-            throw new Error("ZodiacRenderer: Missing required option assetBasePath");
+        
+        // Store the icon provider
+        this.iconProvider = options.iconProvider;
+        
+        // assetBasePath is required only if IconProvider is not available
+        if (!options.assetBasePath && !this.iconProvider) {
+            throw new Error("ZodiacRenderer: Missing required option assetBasePath or iconProvider");
         }
-
-        this.iconProvider = options.iconProvider; // Store the icon provider
+        
+        // Set default assetBasePath if not provided (for backward compatibility)
+        this.assetBasePath = options.assetBasePath || './assets/';
+        
         this.signIconRadius = (this.outerRadius + this.middleRadius) / 2;
         this.signIconSize = 30;
     }
@@ -2007,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);
@@ -2045,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}`
             });
 
@@ -2077,10 +2069,17 @@ class ZodiacRenderer extends BaseRenderer {
                 iconHref = this.iconProvider.getZodiacIconPath(signName);
             } else {
                 // Fallback to old path construction
-                iconHref = `${this.options.assetBasePath}svg/zodiac/zodiac-sign-${signName}.svg`;
+                const basePath = this.options.assetBasePath || this.assetBasePath || './assets/';
+                iconHref = `${basePath}svg/zodiac/zodiac-sign-${signName}.svg`;
             }
             
-            console.log(`Loading zodiac sign: ${iconHref}`);
+            // Log icon path for debugging (only log first time for each sign to avoid spam)
+            if (!this._loggedSigns) this._loggedSigns = {};
+            if (!this._loggedSigns[signName]) {
+                console.log(`ZodiacRenderer: Loading sign '${signName}':`, 
+                    iconHref.startsWith('data:') ? 'inline data URL' : iconHref);
+                this._loggedSigns[signName] = true;
+            }
             
             const icon = this.svgUtils.createSVGElement("image", {
                 x: point.x - this.signIconSize / 2, // Offset to center the icon
@@ -2229,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}`
             });
             
@@ -2256,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')) {
@@ -2399,12 +2428,17 @@ class BasePlanetRenderer extends BaseRenderer {
      */
     constructor(options) {
         super(options);
-        if (!options.assetBasePath) {
-            throw new Error(`${this.constructor.name}: Missing required option assetBasePath`);
-        }
         
         // Store the icon provider
         this.iconProvider = options.iconProvider;
+        
+        // assetBasePath is required only if IconProvider is not available
+        if (!options.assetBasePath && !this.iconProvider) {
+            throw new Error(`${this.constructor.name}: Missing required option assetBasePath or iconProvider`);
+        }
+        
+        // Set default assetBasePath if not provided (for backward compatibility)
+        this.assetBasePath = options.assetBasePath || './assets/';
     }
 
     /**
@@ -2506,7 +2540,8 @@ class PlanetSymbolRenderer extends BasePlanetRenderer {
             iconPath = this.iconProvider.getPlanetIconPath(planet.name);
         } else {
             // Fallback to old path construction if IconProvider is not available
-            iconPath = `${this.options.assetBasePath}svg/zodiac/zodiac-planet-${planet.name.toLowerCase()}.svg`;
+            const basePath = this.options.assetBasePath || this.assetBasePath || './assets/';
+            iconPath = `${basePath}svg/zodiac/zodiac-planet-${planet.name.toLowerCase()}.svg`;
         }
         
         // Calculate top-left position of the icon (centered on the calculated point)
@@ -3508,7 +3543,7 @@ class ClientSideAspectRenderer extends BaseRenderer { // No longer extends IAspe
         this.renderedAspects = []; // Store calculated aspects
         this._aspectCacheKey = null; // Cache key for aspect calculations
         this._aspectCache = [];      // Cached aspect results
-        this.assetBasePath = options.assetBasePath || ''; // Store asset base path
+        this.assetBasePath = options.assetBasePath || './assets/'; // Store asset base path with fallback
         this.iconProvider = options.iconProvider; // Store the icon provider
         
         // Define major aspects and their angles (can be overridden/extended by config)
@@ -4037,7 +4072,12 @@ class RendererFactory {
         this.config = config;
         this.svgNS = svgNS;
         this.svgUtils = ServiceRegistry.getSvgUtils();
-        this.iconProvider = ServiceRegistry.getIconProvider(config.assets?.basePath);
+        this.iconProvider = ServiceRegistry.getIconProvider();
+        
+        // If IconProvider is null, log error for debugging
+        if (!this.iconProvider) {
+            console.error('RendererFactory: IconProvider not available. Icons will not render correctly.');
+        }
     }
     
     /**
@@ -5341,6 +5381,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);
@@ -5621,17 +5664,31 @@ class WheelChart {
  * See examples/factory-injection-example.js for more advanced usage patterns.
  */
 
-// Initialize core services immediately
-ServiceRegistry.initializeServices();
+// CRITICAL: Register IconProvider BEFORE initializing other services
+// This ensures renderers get the inline-capable provider, not a legacy stub
+const iconProvider = new IconProvider({
+    useInline: true,
+    basePath: './assets/svg/zodiac/'  // Fallback for external mode
+});
 
-// Initialize IconProvider with inline data if available
+// Initialize with inline data if available
 if (IconData && Object.keys(IconData.planets || {}).length > 0) {
-    const iconProvider = ServiceRegistry.getIconProvider();
-    if (iconProvider && typeof iconProvider.setInlineData === 'function') {
-        iconProvider.setInlineData(IconData);
-    }
+    iconProvider.setInlineData(IconData);
+    console.log('IconProvider: Initialized with inline icons -', 
+        'Planets:', Object.keys(IconData.planets).length,
+        'Signs:', Object.keys(IconData.signs).length,
+        'Aspects:', Object.keys(IconData.aspects).length
+    );
+} else {
+    console.warn('IconProvider: IconData not loaded, will use external paths');
 }
 
+// Register IconProvider BEFORE initializing services
+ServiceRegistry.register('iconProvider', iconProvider);
+
+// Now initialize other core services
+ServiceRegistry.initializeServices();
+
 // Library version
 const VERSION = '0.2.0';
 
@@ -5731,11 +5788,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();