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 7a739b13..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; @@ -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(); }); 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