Mouse hover can now trigger selection event for extra network previews

Closes #292
This commit is contained in:
DominikDoom
2024-08-05 11:39:38 +02:00
parent fe32ad739d
commit 9a47c2ec2c

View File

@@ -819,7 +819,7 @@ function addResultsToList(textArea, results, tagword, resetList) {
// Check if it's a negative prompt
let isNegative = textAreaId.includes("n");
// Add listener
// Add click listener
li.addEventListener("click", (e) => {
if (e.ctrlKey || e.metaKey) {
resetUseCount(result.text, result.type, !isNegative, isNegative);
@@ -828,6 +828,30 @@ function addResultsToList(textArea, results, tagword, resetList) {
insertTextAtCursor(textArea, result, tagword);
}
});
// Add delayed hover listener for extra network previews
if (TAC_CFG.showExtraNetworkPreviews && [ResultType.embedding, ResultType.hypernetwork, ResultType.lora, ResultType.lyco].includes(result.type)) {
li.addEventListener("mouseover", async () => {
const me = this;
let hoverTimeout;
hoverTimeout = setTimeout(async () => {
// If the tag we hover over is already selected, do nothing
if (selectedTag && selectedTag === i) return;
oldSelectedTag = selectedTag;
selectedTag = i;
// Update selection without scrolling to the item (since we would
// immediately trigger the next scroll as the items move under the cursor)
updateSelectionStyle(textArea, selectedTag, oldSelectedTag, false);
}, 400);
me.addEventListener("mouseout", () => {
clearTimeout(hoverTimeout);
//resultDiv.querySelector(".sideInfo").style.display = "none";
});
});
}
// Add element to list
resultsList.appendChild(li);
}
@@ -840,7 +864,7 @@ function addResultsToList(textArea, results, tagword, resetList) {
}
}
async function updateSelectionStyle(textArea, newIndex, oldIndex) {
async function updateSelectionStyle(textArea, newIndex, oldIndex, scroll = true) {
let textAreaId = getTextAreaIdentifier(textArea);
let resultDiv = gradioApp().querySelector('.autocompleteResults' + textAreaId);
let resultsList = resultDiv.querySelector('ul');
@@ -856,7 +880,7 @@ async function updateSelectionStyle(textArea, newIndex, oldIndex) {
selected.classList.add('selected');
// Set scrolltop to selected item
resultDiv.scrollTop = selected.offsetTop - resultDiv.offsetTop;
if (scroll) resultDiv.scrollTop = selected.offsetTop - resultDiv.offsetTop;
}
// Show preview if enabled and the selected type supports it