feat(utils): implement forwardMiddleMouseToCanvas function and integrate it into JSON, LoRA, and Tags widgets, see #417

web/comfyui/json_display_widget.js

@@ -1,7 +1,11 @@
+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;
   

web/comfyui/tags_widget.js

@@ -1,7 +1,11 @@
+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) {
@@ -321,4 +322,31 @@ export function setupAutocompleteCleanup(node) {
             originalOnRemoved.call(this);
         }
     };
+}
+
+/**
+ * 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);
+        }
+    });
 }