diff --git a/web/comfyui/tags_widget.js b/web/comfyui/tags_widget.js index 3825a402..f685eda8 100644 --- a/web/comfyui/tags_widget.js +++ b/web/comfyui/tags_widget.js @@ -1,5 +1,6 @@ import { app } from "../../scripts/app.js"; import { forwardMiddleMouseToCanvas, forwardWheelToCanvas } from "./utils.js"; +import { copyToClipboard } from "./loras_widget_utils.js"; const MIN_HEIGHT = 150; const GROUP_EDITOR_ID = "lm-trigger-group-editor"; @@ -568,6 +569,56 @@ function toggleGroupEditor(widget, index, anchorEl) { openGroupEditor(widget, index, anchorEl); } +function showTagContextMenu(event, tagData, index, widget, anchorEl) { + event.preventDefault(); + event.stopPropagation(); + + closeGroupEditor(widget); + + const existingMenu = document.querySelector('.lm-lora-context-menu'); + if (existingMenu) { + existingMenu.remove(); + } + + const menu = document.createElement('div'); + menu.className = 'lm-lora-context-menu'; + menu.style.left = `${event.clientX}px`; + menu.style.top = `${event.clientY}px`; + + const copyOption = document.createElement('div'); + copyOption.className = 'lm-lora-menu-item'; + copyOption.innerHTML = `Copy`; + copyOption.addEventListener('click', () => { + menu.remove(); + document.removeEventListener('click', closeMenu); + copyToClipboard(tagData.text, 'Copied to clipboard'); + }); + menu.appendChild(copyOption); + + if (isGroupTag(tagData) && Array.isArray(tagData.items) && tagData.items.length > 1) { + const editOption = document.createElement('div'); + editOption.className = 'lm-lora-menu-item'; + editOption.innerHTML = `Edit Group`; + editOption.addEventListener('click', () => { + menu.remove(); + document.removeEventListener('click', closeMenu); + toggleGroupEditor(widget, index, anchorEl); + renderGroupEditor(widget, tagData, index); + }); + menu.appendChild(editOption); + } + + document.body.appendChild(menu); + + const closeMenu = (e) => { + if (!menu.contains(e.target)) { + menu.remove(); + document.removeEventListener('click', closeMenu); + } + }; + setTimeout(() => document.addEventListener('click', closeMenu), 0); +} + export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.02, options = {}) { const container = document.createElement("div"); container.className = "comfy-tags-container"; @@ -618,6 +669,10 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 }); }); + tagEl.addEventListener("contextmenu", (e) => { + showTagContextMenu(e, tagData, index, widget, tagEl); + }); + if (showStrengthInfo) { tagEl.addEventListener("wheel", (e) => { e.preventDefault(); @@ -728,11 +783,13 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 }; editButton.addEventListener("click", openEditor); - groupChip.addEventListener("contextmenu", openEditor); - groupChip.appendChild(editButton); } + groupChip.addEventListener("contextmenu", (e) => { + showTagContextMenu(e, tagData, index, widget, groupChip); + }); + groupChip.addEventListener("click", (e) => { e.stopPropagation(); if (editButton && e.target === editButton) { @@ -773,6 +830,11 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 container.removeChild(container.firstChild); } + const existingMenu = document.querySelector('.lm-lora-context-menu'); + if (existingMenu) { + existingMenu.remove(); + } + const normalizedTags = Array.isArray(tagsData) ? tagsData : []; const showStrengthInfo = widget.allowStrengthAdjustment ?? allowStrengthAdjustment; const groupAnchors = new Map();