Merge pull request #103 from willmiao/dev

feat: Add drag functionality for strength adjustment in LoRA entries.…

web/comfyui/legacy_loras_widget.js

@@ -287,6 +287,108 @@ export function addLorasWidget(node, name, opts, callback) {
   // 创建预览tooltip实例
   const previewTooltip = new PreviewTooltip();
 
+  // Function to handle strength adjustment via dragging
+  const handleStrengthDrag = (name, initialStrength, initialX, event, widget) => {
+    // Calculate drag sensitivity (how much the strength changes per pixel)
+    // Using 0.01 per 10 pixels of movement
+    const sensitivity = 0.001;
+    
+    // Get the current mouse position
+    const currentX = event.clientX;
+    
+    // Calculate the distance moved
+    const deltaX = currentX - initialX;
+    
+    // Calculate the new strength value based on movement
+    // Moving right increases, moving left decreases
+    let newStrength = Number(initialStrength) + (deltaX * sensitivity);
+    
+    // Limit the strength to reasonable bounds (now between -10 and 10)
+    newStrength = Math.max(-10, Math.min(10, newStrength));
+    newStrength = Number(newStrength.toFixed(2));
+    
+    // Update the lora data
+    const lorasData = parseLoraValue(widget.value);
+    const loraIndex = lorasData.findIndex(l => l.name === name);
+    
+    if (loraIndex >= 0) {
+      lorasData[loraIndex].strength = newStrength;
+      
+      // Update the widget value
+      widget.value = formatLoraValue(lorasData);
+      
+      // Force re-render to show updated strength value
+      renderLoras(widget.value, widget);
+    }
+  };
+  
+  // Function to initialize drag operation
+  const initDrag = (loraEl, nameEl, name, widget) => {
+    let isDragging = false;
+    let initialX = 0;
+    let initialStrength = 0;
+    
+    // Create a style element for drag cursor override if it doesn't exist
+    if (!document.getElementById('comfy-lora-drag-style')) {
+      const styleEl = document.createElement('style');
+      styleEl.id = 'comfy-lora-drag-style';
+      styleEl.textContent = `
+        body.comfy-lora-dragging,
+        body.comfy-lora-dragging * {
+          cursor: ew-resize !important;
+        }
+      `;
+      document.head.appendChild(styleEl);
+    }
+    
+    // Create a drag handler that's applied to the entire lora entry
+    // except toggle and strength controls
+    loraEl.addEventListener('mousedown', (e) => {
+      // Skip if clicking on toggle or strength control areas
+      if (e.target.closest('.comfy-lora-toggle') || 
+          e.target.closest('input') || 
+          e.target.closest('.comfy-lora-arrow')) {
+        return;
+      }
+      
+      // Store initial values
+      const lorasData = parseLoraValue(widget.value);
+      const loraData = lorasData.find(l => l.name === name);
+      
+      if (!loraData) return;
+      
+      initialX = e.clientX;
+      initialStrength = loraData.strength;
+      isDragging = true;
+      
+      // Add class to body to enforce cursor style globally
+      document.body.classList.add('comfy-lora-dragging');
+      
+      // Prevent text selection during drag
+      e.preventDefault();
+    });
+    
+    // Use the document for move and up events to ensure drag continues
+    // even if mouse leaves the element
+    document.addEventListener('mousemove', (e) => {
+      if (!isDragging) return;
+      
+      // Call the strength adjustment function
+      handleStrengthDrag(name, initialStrength, initialX, e, widget);
+      
+      // Prevent showing the preview tooltip during drag
+      previewTooltip.hide();
+    });
+    
+    document.addEventListener('mouseup', () => {
+      if (isDragging) {
+        isDragging = false;
+        // Remove the class to restore normal cursor behavior
+        document.body.classList.remove('comfy-lora-dragging');
+      }
+    });
+  };
+
   // Function to create menu item
   const createMenuItem = (text, icon, onClick) => {
     const menuItem = document.createElement('div');
@@ -756,6 +858,9 @@ export function addLorasWidget(node, name, opts, callback) {
       loraEl.appendChild(strengthControl);
 
       container.appendChild(loraEl);
+
+      // Initialize drag functionality
+      initDrag(loraEl, nameEl, name, widget);
     });
   };
 

web/comfyui/loras_widget.js

@@ -366,6 +366,108 @@ export function addLorasWidget(node, name, opts, callback) {
     return menuItem;
   };
 
+  // Function to handle strength adjustment via dragging
+  const handleStrengthDrag = (name, initialStrength, initialX, event, widget) => {
+    // Calculate drag sensitivity (how much the strength changes per pixel)
+    // Using 0.01 per 10 pixels of movement
+    const sensitivity = 0.001;
+    
+    // Get the current mouse position
+    const currentX = event.clientX;
+    
+    // Calculate the distance moved
+    const deltaX = currentX - initialX;
+    
+    // Calculate the new strength value based on movement
+    // Moving right increases, moving left decreases
+    let newStrength = Number(initialStrength) + (deltaX * sensitivity);
+    
+    // Limit the strength to reasonable bounds (now between -10 and 10)
+    newStrength = Math.max(-10, Math.min(10, newStrength));
+    newStrength = Number(newStrength.toFixed(2));
+    
+    // Update the lora data
+    const lorasData = parseLoraValue(widget.value);
+    const loraIndex = lorasData.findIndex(l => l.name === name);
+    
+    if (loraIndex >= 0) {
+      lorasData[loraIndex].strength = newStrength;
+      
+      // Update the widget value
+      widget.value = formatLoraValue(lorasData);
+      
+      // Force re-render to show updated strength value
+      renderLoras(widget.value, widget);
+    }
+  };
+  
+  // Function to initialize drag operation
+  const initDrag = (loraEl, nameEl, name, widget) => {
+    let isDragging = false;
+    let initialX = 0;
+    let initialStrength = 0;
+    
+    // Create a style element for drag cursor override if it doesn't exist
+    if (!document.getElementById('comfy-lora-drag-style')) {
+      const styleEl = document.createElement('style');
+      styleEl.id = 'comfy-lora-drag-style';
+      styleEl.textContent = `
+        body.comfy-lora-dragging,
+        body.comfy-lora-dragging * {
+          cursor: ew-resize !important;
+        }
+      `;
+      document.head.appendChild(styleEl);
+    }
+    
+    // Create a drag handler that's applied to the entire lora entry
+    // except toggle and strength controls
+    loraEl.addEventListener('mousedown', (e) => {
+      // Skip if clicking on toggle or strength control areas
+      if (e.target.closest('.comfy-lora-toggle') || 
+          e.target.closest('input') || 
+          e.target.closest('.comfy-lora-arrow')) {
+        return;
+      }
+      
+      // Store initial values
+      const lorasData = parseLoraValue(widget.value);
+      const loraData = lorasData.find(l => l.name === name);
+      
+      if (!loraData) return;
+      
+      initialX = e.clientX;
+      initialStrength = loraData.strength;
+      isDragging = true;
+      
+      // Add class to body to enforce cursor style globally
+      document.body.classList.add('comfy-lora-dragging');
+      
+      // Prevent text selection during drag
+      e.preventDefault();
+    });
+    
+    // Use the document for move and up events to ensure drag continues
+    // even if mouse leaves the element
+    document.addEventListener('mousemove', (e) => {
+      if (!isDragging) return;
+      
+      // Call the strength adjustment function
+      handleStrengthDrag(name, initialStrength, initialX, e, widget);
+      
+      // Prevent showing the preview tooltip during drag
+      previewTooltip.hide();
+    });
+    
+    document.addEventListener('mouseup', () => {
+      if (isDragging) {
+        isDragging = false;
+        // Remove the class to restore normal cursor behavior
+        document.body.classList.remove('comfy-lora-dragging');
+      }
+    });
+  };
+
   // Function to create context menu
   const createContextMenu = (x, y, loraName, widget) => {
     // Hide preview tooltip first
@@ -649,6 +751,9 @@ export function addLorasWidget(node, name, opts, callback) {
         e.stopPropagation();
         previewTooltip.hide();
       });
+      
+      // Initialize drag functionality for strength adjustment
+      initDrag(loraEl, nameEl, name, widget);
 
       // Remove the preview tooltip events from loraEl
       loraEl.onmouseenter = () => {
@@ -917,4 +1022,4 @@ async function saveRecipeDirectly(widget) {
       });
     }
   }
-} 
+}