feat(bulk-base-model): implement bulk base model setting functionality with UI and context menu integration

static/js/utils/EventManager.js

@@ -0,0 +1,110 @@
+/**
+ * Centralized manager for handling DOM events across the application
+ */
+export class EventManager {
+    constructor() {
+        // Store registered handlers
+        this.handlers = new Map();
+        // Track active modals/states
+        this.activeStates = {
+            bulkMode: false,
+            marqueeActive: false,
+            modalOpen: false
+        };
+    }
+
+    /**
+     * Register an event handler with priority
+     * @param {string} eventType - The DOM event type (e.g., 'click', 'mousedown')
+     * @param {string} source - Source identifier (e.g., 'bulkManager', 'contextMenu')
+     * @param {Function} handler - Event handler function
+     * @param {Object} options - Additional options including priority (higher number = higher priority)
+     */
+    addHandler(eventType, source, handler, options = {}) {
+        if (!this.handlers.has(eventType)) {
+            this.handlers.set(eventType, []);
+            // Set up the actual DOM listener once
+            this.setupDOMListener(eventType);
+        }
+        
+        const handlerList = this.handlers.get(eventType);
+        handlerList.push({
+            source,
+            handler,
+            priority: options.priority || 0,
+            options
+        });
+        
+        // Sort by priority
+        handlerList.sort((a, b) => b.priority - a.priority);
+    }
+
+    /**
+     * Remove an event handler
+     */
+    removeHandler(eventType, source) {
+        if (!this.handlers.has(eventType)) return;
+        
+        const handlerList = this.handlers.get(eventType);
+        const newList = handlerList.filter(h => h.source !== source);
+        
+        if (newList.length === 0) {
+            // Remove the DOM listener if no handlers remain
+            this.cleanupDOMListener(eventType);
+            this.handlers.delete(eventType);
+        } else {
+            this.handlers.set(eventType, newList);
+        }
+    }
+    
+    /**
+     * Setup actual DOM event listener
+     */
+    setupDOMListener(eventType) {
+        const listener = (event) => this.handleEvent(eventType, event);
+        document.addEventListener(eventType, listener);
+        this._domListeners = this._domListeners || {};
+        this._domListeners[eventType] = listener;
+    }
+    
+    /**
+     * Clean up DOM event listener
+     */
+    cleanupDOMListener(eventType) {
+        if (this._domListeners && this._domListeners[eventType]) {
+            document.removeEventListener(eventType, this._domListeners[eventType]);
+            delete this._domListeners[eventType];
+        }
+    }
+    
+    /**
+     * Process an event through registered handlers
+     */
+    handleEvent(eventType, event) {
+        if (!this.handlers.has(eventType)) return;
+        
+        const handlers = this.handlers.get(eventType);
+        
+        for (const {handler, options} of handlers) {
+            // Apply conditional execution based on app state
+            if (options.onlyInBulkMode && !this.activeStates.bulkMode) continue;
+            if (options.onlyWhenMarqueeActive && !this.activeStates.marqueeActive) continue;
+            if (options.skipWhenModalOpen && this.activeStates.modalOpen) continue;
+            
+            // Execute handler
+            const result = handler(event);
+            
+            // Stop propagation if handler returns true
+            if (result === true) break;
+        }
+    }
+    
+    /**
+     * Update application state
+     */
+    setState(state, value) {
+        this.activeStates[state] = value;
+    }
+}
+
+export const eventManager = new EventManager();

static/js/utils/constants.js

@@ -164,6 +164,29 @@ export const NODE_TYPE_ICONS = {
 // Default ComfyUI node color when bgcolor is null
 export const DEFAULT_NODE_COLOR = "#353535";
 
+// Base model categories for organized selection
+export const BASE_MODEL_CATEGORIES = {
+    'Stable Diffusion 1.x': [BASE_MODELS.SD_1_4, BASE_MODELS.SD_1_5, BASE_MODELS.SD_1_5_LCM, BASE_MODELS.SD_1_5_HYPER],
+    'Stable Diffusion 2.x': [BASE_MODELS.SD_2_0, BASE_MODELS.SD_2_1],
+    'Stable Diffusion 3.x': [BASE_MODELS.SD_3, BASE_MODELS.SD_3_5, BASE_MODELS.SD_3_5_MEDIUM, BASE_MODELS.SD_3_5_LARGE, BASE_MODELS.SD_3_5_LARGE_TURBO],
+    'SDXL': [BASE_MODELS.SDXL, BASE_MODELS.SDXL_LIGHTNING, BASE_MODELS.SDXL_HYPER],
+    'Video Models': [
+        BASE_MODELS.SVD, BASE_MODELS.LTXV, BASE_MODELS.HUNYUAN_VIDEO, BASE_MODELS.WAN_VIDEO, 
+        BASE_MODELS.WAN_VIDEO_1_3B_T2V, BASE_MODELS.WAN_VIDEO_14B_T2V,
+        BASE_MODELS.WAN_VIDEO_14B_I2V_480P, BASE_MODELS.WAN_VIDEO_14B_I2V_720P,
+        BASE_MODELS.WAN_VIDEO_2_2_TI2V_5B, BASE_MODELS.WAN_VIDEO_2_2_T2V_A14B,
+        BASE_MODELS.WAN_VIDEO_2_2_I2V_A14B
+    ],
+    'Flux Models': [BASE_MODELS.FLUX_1_D, BASE_MODELS.FLUX_1_S, BASE_MODELS.FLUX_1_KONTEXT, BASE_MODELS.FLUX_1_KREA],
+    'Other Models': [
+        BASE_MODELS.ILLUSTRIOUS, BASE_MODELS.PONY, BASE_MODELS.HIDREAM,
+        BASE_MODELS.QWEN, BASE_MODELS.AURAFLOW,
+        BASE_MODELS.PIXART_A, BASE_MODELS.PIXART_E, BASE_MODELS.HUNYUAN_1,
+        BASE_MODELS.LUMINA, BASE_MODELS.KOLORS, BASE_MODELS.NOOBAI,
+        BASE_MODELS.UNKNOWN
+    ]
+};
+
 // Preset tag suggestions
 export const PRESET_TAGS = [
     'character', 'style', 'concept', 'clothing',