From ead34818db41dbea850b09f0d56da0a78003a7f6 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Mon, 8 Sep 2025 21:49:16 +0800
Subject: [PATCH] feat(utils): implement forwardMiddleMouseToCanvas function
 and integrate it into JSON, LoRA, and Tags widgets, see #417

---
 web/comfyui/json_display_widget.js |  4 ++++
 web/comfyui/loras_widget.js        |  5 ++++-
 web/comfyui/tags_widget.js         |  4 ++++
 web/comfyui/utils.js               | 28 ++++++++++++++++++++++++++++
 4 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/web/comfyui/json_display_widget.js b/web/comfyui/json_display_widget.js
index 22043c07..c0b3f7c4 100644
--- a/web/comfyui/json_display_widget.js
+++ b/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;
diff --git a/web/comfyui/loras_widget.js b/web/comfyui/loras_widget.js
index 39732e60..29946313 100644
--- a/web/comfyui/loras_widget.js
+++ b/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;
   
diff --git a/web/comfyui/tags_widget.js b/web/comfyui/tags_widget.js
index b87f1e6b..fea65ef3 100644
--- a/web/comfyui/tags_widget.js
+++ b/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;
diff --git a/web/comfyui/utils.js b/web/comfyui/utils.js
index c136853f..7c64621b 100644
--- a/web/comfyui/utils.js
+++ b/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);
+        }
+    });
 }
\ No newline at end of file