feat(dom-widgets): forward middle mouse events to canvas for panning

Add `forwardMiddleMouseToCanvas` utility to forward middle mouse button events from DOM widgets to the ComfyUI canvas, enabling workflow panning when the cursor is over a widget. The function is implemented in `vue-widgets/src/main.ts` and documented in the developer guide. Additionally, fix `getPoolConfigFromConnectedNode` to return null for inactive pool nodes.

vue-widgets/src/main.ts

@@ -15,6 +15,37 @@ import { app } from '../../../scripts/app.js'
 // @ts-ignore
 import { getPoolConfigFromConnectedNode, getActiveLorasFromNode, updateConnectedTriggerWords, updateDownstreamLoaders } from '../../web/comfyui/utils.js'
 
+function forwardMiddleMouseToCanvas(container: HTMLElement) {
+  if (!container) return
+
+  container.addEventListener('pointerdown', (event) => {
+    if (event.button === 1) {
+      const canvas = app.canvas
+      if (canvas && typeof canvas.processMouseDown === 'function') {
+        canvas.processMouseDown(event)
+      }
+    }
+  })
+
+  container.addEventListener('pointermove', (event) => {
+    if ((event.buttons & 4) === 4) {
+      const canvas = app.canvas
+      if (canvas && typeof canvas.processMouseMove === 'function') {
+        canvas.processMouseMove(event)
+      }
+    }
+  })
+
+  container.addEventListener('pointerup', (event) => {
+    if (event.button === 1) {
+      const canvas = app.canvas
+      if (canvas && typeof canvas.processMouseUp === 'function') {
+        canvas.processMouseUp(event)
+      }
+    }
+  })
+}
+
 const vueApps = new Map<number, VueApp>()
 
 // Cache for dynamically loaded addLorasWidget module
@@ -30,6 +61,8 @@ function createLoraPoolWidget(node) {
   container.style.flexDirection = 'column'
   container.style.overflow = 'hidden'
 
+  forwardMiddleMouseToCanvas(container)
+
   let internalValue: LoraPoolConfig | LegacyLoraPoolConfig | undefined
 
   const widget = node.addDOMWidget(
@@ -100,6 +133,8 @@ function createLoraRandomizerWidget(node) {
   container.style.flexDirection = 'column'
   container.style.overflow = 'hidden'
 
+  forwardMiddleMouseToCanvas(container)
+
   let internalValue: RandomizerConfig | undefined
 
   const widget = node.addDOMWidget(