@eaprelsky/nocturna-wheel 3.0.0 → 3.0.2

package/dist/nocturna-wheel.umd.js

@@ -89,47 +89,16 @@
         }
         
         /**
-         * 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');
         }
@@ -142,8 +111,8 @@
             // 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");
         }
@@ -159,17 +128,6 @@
      * 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
@@ -190,6 +148,9 @@
             
             // Lazy-load IconData on first use
             this.inlineData = null;
+            
+            // Track if warning was already shown (to avoid spam)
+            this._warnedAboutMissingData = false;
         }
         
         /**
@@ -197,9 +158,6 @@
          * @private
          */
         _getInlineData() {
-            if (!this.inlineData && InlineIconData) {
-                this.inlineData = InlineIconData;
-            }
             return this.inlineData;
         }
         
@@ -209,7 +167,11 @@
          */
         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
+            );
         }
 
         /**
@@ -230,6 +192,16 @@
                 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`);
+                        }
+                    }
                 }
             }
             
@@ -321,7 +293,7 @@
     /**
      * 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.
@@ -1968,11 +1940,18 @@
          */
         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;
         }
@@ -2013,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);
@@ -2051,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}`
                 });
 
@@ -2083,10 +2075,17 @@
                     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
@@ -2235,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}`
                 });
                 
@@ -2262,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')) {
@@ -2405,12 +2434,17 @@
          */
         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/';
         }
 
         /**
@@ -2512,7 +2546,8 @@
                 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)
@@ -3514,7 +3549,7 @@
             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)
@@ -4043,7 +4078,12 @@
             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.');
+            }
         }
         
         /**
@@ -5347,6 +5387,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);
@@ -5627,17 +5670,31 @@
      * 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';
 
@@ -5737,11 +5794,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();