Merge branch 'willmiao:main' into main

web/comfyui/json_display_widget.js

@@ -1,8 +1,12 @@
+import { forwardMiddleMouseToCanvas } from "./utils.js";
+
 export function addJsonDisplayWidget(node, name, opts) {
   // Create container for JSON display
   const container = document.createElement("div");
   container.className = "comfy-json-display-container";
 
+  forwardMiddleMouseToCanvas(container);
+  
   // Set initial height
   const defaultHeight = 200;
   

web/comfyui/loras_widget.js

@@ -11,12 +11,15 @@ import {
   EMPTY_CONTAINER_HEIGHT 
 } from "./loras_widget_utils.js";
 import { initDrag, createContextMenu, initHeaderDrag, initReorderDrag, handleKeyboardNavigation } from "./loras_widget_events.js";
+import { forwardMiddleMouseToCanvas } from "./utils.js";
 
 export function addLorasWidget(node, name, opts, callback) {
   // Create container for loras
   const container = document.createElement("div");
   container.className = "comfy-loras-container";
 
+  forwardMiddleMouseToCanvas(container);
+
   // Set initial height using CSS variables approach
   const defaultHeight = 200;
   
@@ -287,14 +290,18 @@ export function addLorasWidget(node, name, opts, callback) {
       });
 
       // Move preview tooltip events to nameEl instead of loraEl
+      let previewTimer; // Timer for delayed preview
       nameEl.addEventListener('mouseenter', async (e) => {
         e.stopPropagation();
         const rect = nameEl.getBoundingClientRect();
-        await previewTooltip.show(name, rect.right, rect.top);
+        previewTimer = setTimeout(async () => {
+          await previewTooltip.show(name, rect.right, rect.top);
+        }, 400); // 400ms delay
       });
 
       nameEl.addEventListener('mouseleave', (e) => {
         e.stopPropagation();
+        clearTimeout(previewTimer); // Cancel if not triggered
         previewTooltip.hide();
       });
       

web/comfyui/tags_widget.js

@@ -1,8 +1,12 @@
+import { forwardMiddleMouseToCanvas } from "./utils.js";
+
 export function addTagsWidget(node, name, opts, callback) {
   // Create container for tags
   const container = document.createElement("div");
   container.className = "comfy-tags-container";
 
+  forwardMiddleMouseToCanvas(container);
+  
   // Set initial height
   const defaultHeight = 150;
   

web/comfyui/utils.js

@@ -1,4 +1,5 @@
 export const CONVERTED_TYPE = 'converted-widget';
+import { app } from "../../scripts/app.js";
 import { AutoComplete } from "./autocomplete.js";
 
 export function chainCallback(object, property, callback) {
@@ -322,3 +323,30 @@ export function setupAutocompleteCleanup(node) {
         }
     };
 }
+
+/**
+ * Forward middle mouse (button 1) pointer events from a container to the ComfyUI canvas,
+ * so that workflow panning works even when the pointer is over a DOM widget.
+ * @param {HTMLElement} container - The root DOM element of the widget
+ */
+export function forwardMiddleMouseToCanvas(container) {
+    if (!container) return;
+    // Forward pointerdown
+    container.addEventListener('pointerdown', (event) => {
+        if (event.button === 1) {
+            app.canvas.processMouseDown(event);
+        }
+    });
+    // Forward pointermove
+    container.addEventListener('pointermove', (event) => {
+        if ((event.buttons & 4) === 4) {
+            app.canvas.processMouseMove(event);
+        }
+    });
+    // Forward pointerup
+    container.addEventListener('pointerup', (event) => {
+        if (event.button === 1) {
+            app.canvas.processMouseUp(event);
+        }
+    });
+}