Restructure the code of loras_widget into smaller, more manageable modules.

web/comfyui/loras_widget_components.js

@@ -0,0 +1,303 @@
+import { api } from "../../scripts/api.js";
+
+// Function to create toggle element
+export function createToggle(active, onChange) {
+  const toggle = document.createElement("div");
+  toggle.className = "comfy-lora-toggle";
+  
+  updateToggleStyle(toggle, active);
+  
+  toggle.addEventListener("click", (e) => {
+    e.stopPropagation();
+    onChange(!active);
+  });
+  
+  return toggle;
+}
+
+// Helper function to update toggle style
+export function updateToggleStyle(toggleEl, active) {
+  Object.assign(toggleEl.style, {
+    width: "18px",
+    height: "18px",
+    borderRadius: "4px",
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    backgroundColor: active ? "rgba(66, 153, 225, 0.9)" : "rgba(45, 55, 72, 0.7)",
+    border: `1px solid ${active ? "rgba(66, 153, 225, 0.9)" : "rgba(226, 232, 240, 0.2)"}`,
+  });
+
+  // Add hover effect
+  toggleEl.onmouseenter = () => {
+    toggleEl.style.transform = "scale(1.05)";
+    toggleEl.style.boxShadow = "0 2px 4px rgba(0,0,0,0.15)";
+  };
+
+  toggleEl.onmouseleave = () => {
+    toggleEl.style.transform = "scale(1)";
+    toggleEl.style.boxShadow = "none";
+  };
+}
+
+// Create arrow button for strength adjustment
+export function createArrowButton(direction, onClick) {
+  const button = document.createElement("div");
+  button.className = `comfy-lora-arrow comfy-lora-arrow-${direction}`;
+  
+  Object.assign(button.style, {
+    width: "16px",
+    height: "16px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    userSelect: "none",
+    fontSize: "12px",
+    color: "rgba(226, 232, 240, 0.8)",
+    transition: "all 0.2s ease",
+  });
+  
+  button.textContent = direction === "left" ? "◀" : "▶";
+  
+  button.addEventListener("click", (e) => {
+    e.stopPropagation();
+    onClick();
+  });
+  
+  // Add hover effect
+  button.onmouseenter = () => {
+    button.style.color = "white";
+    button.style.transform = "scale(1.2)";
+  };
+  
+  button.onmouseleave = () => {
+    button.style.color = "rgba(226, 232, 240, 0.8)";
+    button.style.transform = "scale(1)";
+  };
+  
+  return button;
+}
+
+// Function to create menu item
+export function createMenuItem(text, icon, onClick) {
+  const menuItem = document.createElement('div');
+  Object.assign(menuItem.style, {
+    padding: '6px 20px',
+    cursor: 'pointer',
+    color: 'rgba(226, 232, 240, 0.9)',
+    fontSize: '13px',
+    userSelect: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+  });
+
+  // Create icon element
+  const iconEl = document.createElement('div');
+  iconEl.innerHTML = icon;
+  Object.assign(iconEl.style, {
+    width: '14px',
+    height: '14px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  });
+
+  // Create text element
+  const textEl = document.createElement('span');
+  textEl.textContent = text;
+
+  menuItem.appendChild(iconEl);
+  menuItem.appendChild(textEl);
+
+  menuItem.addEventListener('mouseenter', () => {
+    menuItem.style.backgroundColor = 'rgba(66, 153, 225, 0.2)';
+  });
+
+  menuItem.addEventListener('mouseleave', () => {
+    menuItem.style.backgroundColor = 'transparent';
+  });
+
+  if (onClick) {
+    menuItem.addEventListener('click', onClick);
+  }
+
+  return menuItem;
+}
+
+// Preview tooltip class
+export class PreviewTooltip {
+  constructor() {
+    this.element = document.createElement('div');
+    Object.assign(this.element.style, {
+      position: 'fixed',
+      zIndex: 9999,
+      background: 'rgba(0, 0, 0, 0.85)',
+      borderRadius: '6px',
+      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+      display: 'none',
+      overflow: 'hidden',
+      maxWidth: '300px',
+    });
+    document.body.appendChild(this.element);
+    this.hideTimeout = null;
+    
+    // Add global click event to hide tooltip
+    document.addEventListener('click', () => this.hide());
+    
+    // Add scroll event listener
+    document.addEventListener('scroll', () => this.hide(), true);
+  }
+
+  async show(loraName, x, y) {
+    try {
+      // Clear previous hide timer
+      if (this.hideTimeout) {
+        clearTimeout(this.hideTimeout);
+        this.hideTimeout = null;
+      }
+
+      // Don't redisplay the same lora preview
+      if (this.element.style.display === 'block' && this.currentLora === loraName) {
+        return;
+      }
+
+      this.currentLora = loraName;
+      
+      // Get preview URL
+      const response = await api.fetchApi(`/lora-preview-url?name=${encodeURIComponent(loraName)}`, {
+        method: 'GET'
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch preview URL');
+      }
+
+      const data = await response.json();
+      if (!data.success || !data.preview_url) {
+        throw new Error('No preview available');
+      }
+
+      // Clear existing content
+      while (this.element.firstChild) {
+        this.element.removeChild(this.element.firstChild);
+      }
+
+      // Create media container with relative positioning
+      const mediaContainer = document.createElement('div');
+      Object.assign(mediaContainer.style, {
+        position: 'relative',
+        maxWidth: '300px',
+        maxHeight: '300px',
+      });
+
+      const isVideo = data.preview_url.endsWith('.mp4');
+      const mediaElement = isVideo ? document.createElement('video') : document.createElement('img');
+
+      Object.assign(mediaElement.style, {
+        maxWidth: '300px',
+        maxHeight: '300px',
+        objectFit: 'contain',
+        display: 'block',
+      });
+
+      if (isVideo) {
+        mediaElement.autoplay = true;
+        mediaElement.loop = true;
+        mediaElement.muted = true;
+        mediaElement.controls = false;
+      }
+
+      mediaElement.src = data.preview_url;
+
+      // Create name label with absolute positioning
+      const nameLabel = document.createElement('div');
+      nameLabel.textContent = loraName;
+      Object.assign(nameLabel.style, {
+        position: 'absolute',
+        bottom: '0',
+        left: '0',
+        right: '0',
+        padding: '8px',
+        color: 'rgba(255, 255, 255, 0.95)',
+        fontSize: '13px',
+        fontFamily: "'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif",
+        background: 'linear-gradient(transparent, rgba(0, 0, 0, 0.8))',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        textAlign: 'center',
+        backdropFilter: 'blur(4px)',
+        WebkitBackdropFilter: 'blur(4px)',
+      });
+
+      mediaContainer.appendChild(mediaElement);
+      mediaContainer.appendChild(nameLabel);
+      this.element.appendChild(mediaContainer);
+      
+      // Add fade-in effect
+      this.element.style.opacity = '0';
+      this.element.style.display = 'block';
+      this.position(x, y);
+      
+      requestAnimationFrame(() => {
+        this.element.style.transition = 'opacity 0.15s ease';
+        this.element.style.opacity = '1';
+      });
+    } catch (error) {
+      console.warn('Failed to load preview:', error);
+    }
+  }
+
+  position(x, y) {
+    // Ensure preview box doesn't exceed viewport boundaries
+    const rect = this.element.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    let left = x + 10; // Default 10px offset to the right of mouse
+    let top = y + 10;  // Default 10px offset below mouse
+
+    // Check right boundary
+    if (left + rect.width > viewportWidth) {
+      left = x - rect.width - 10;
+    }
+
+    // Check bottom boundary
+    if (top + rect.height > viewportHeight) {
+      top = y - rect.height - 10;
+    }
+
+    Object.assign(this.element.style, {
+      left: `${left}px`,
+      top: `${top}px`
+    });
+  }
+
+  hide() {
+    // Use fade-out effect
+    if (this.element.style.display === 'block') {
+      this.element.style.opacity = '0';
+      this.hideTimeout = setTimeout(() => {
+        this.element.style.display = 'none';
+        this.currentLora = null;
+        // Stop video playback
+        const video = this.element.querySelector('video');
+        if (video) {
+          video.pause();
+        }
+        this.hideTimeout = null;
+      }, 150);
+    }
+  }
+
+  cleanup() {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+    }
+    // Remove all event listeners
+    document.removeEventListener('click', () => this.hide());
+    document.removeEventListener('scroll', () => this.hide(), true);
+    this.element.remove();
+  }
+}