Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e5bc1a5bae |
+19
-11
@@ -235,7 +235,16 @@ class Downloader:
|
||||
|
||||
def _check_new_csv_from_hf_dataset(self, dataset_meta: dict, now_utc: datetime, force_check: bool = False):
|
||||
"""Checks HuggingFace for file updates and updates metadata."""
|
||||
perform_hf_check = force_check
|
||||
perform_hf_check = True
|
||||
if not force_check and dataset_meta.get("last_remote_check_timestamp"):
|
||||
try:
|
||||
last_check_dt = datetime.fromisoformat(dataset_meta["last_remote_check_timestamp"])
|
||||
if now_utc - last_check_dt < timedelta(days=7):
|
||||
perform_hf_check = False
|
||||
except (ValueError, KeyError, TypeError):
|
||||
print(
|
||||
"[Autocomplete-Plus] Invalid or missing timestamp for last_remote_check_timestamp. Will perform remote check."
|
||||
)
|
||||
|
||||
if perform_hf_check:
|
||||
huggingface_dataset_id = dataset_meta["hf_dataset_id"]
|
||||
@@ -294,16 +303,15 @@ class Downloader:
|
||||
return f"File {file_name} is missing or empty locally."
|
||||
|
||||
# Check if the last modified date on HuggingFace is newer than the last download date
|
||||
# Temporarily comment out until changes to remote files can be detected
|
||||
# try:
|
||||
# last_download_dt = datetime.fromisoformat(file_meta_entry["last_download"])
|
||||
# hf_modified_dt = datetime.fromisoformat(file_meta_entry["last_modified_on_hf"])
|
||||
# if hf_modified_dt > last_download_dt:
|
||||
# return f"Remote file {file_name} is newer (HF: {hf_modified_dt}, Local Download: {last_download_dt})."
|
||||
# except (ValueError, TypeError):
|
||||
# file_meta_entry["last_download"] = None
|
||||
# file_meta_entry["last_modified_on_hf"] = None
|
||||
# return f"Invalid timestamp format for {file_name}. Forcing download to ensure integrity."
|
||||
try:
|
||||
last_download_dt = datetime.fromisoformat(file_meta_entry["last_download"])
|
||||
hf_modified_dt = datetime.fromisoformat(file_meta_entry["last_modified_on_hf"])
|
||||
if hf_modified_dt > last_download_dt:
|
||||
return f"Remote file {file_name} is newer (HF: {last_download_dt}, Local Download: {hf_modified_dt})."
|
||||
except (ValueError, TypeError):
|
||||
file_meta_entry["last_download"] = None
|
||||
file_meta_entry["last_modified_on_hf"] = None
|
||||
return f"Invalid timestamp format for {file_name}. Forcing download to ensure integrity."
|
||||
|
||||
# If the file is missing or empty, but the last download timestamp exists, we need to retry.
|
||||
if not check_file_valid(local_file_path) and file_meta_entry.get("last_download") is not None:
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
[project]
|
||||
name = "comfyui-autocomplete-plus"
|
||||
description = "Autocomplete and Related Tag display for ComfyUI"
|
||||
version = "1.5.0"
|
||||
version = "1.4.0"
|
||||
license = {file = "LICENSE"}
|
||||
dependencies = ["",]
|
||||
|
||||
|
||||
@@ -97,14 +97,10 @@ body.dark-theme {
|
||||
display: grid;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
|
||||
grid-auto-rows: auto;
|
||||
grid-template-columns: max-content 1fr auto;
|
||||
grid-template-columns: max-content 1fr auto auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#autocomplete-plus-list.no-alias {
|
||||
grid-template-columns: max-content auto;
|
||||
}
|
||||
|
||||
.autocomplete-plus-item {
|
||||
display: grid;
|
||||
cursor: pointer;
|
||||
@@ -296,14 +292,10 @@ body.dark-theme {
|
||||
display: grid;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
|
||||
grid-auto-rows: auto;
|
||||
grid-template-columns: max-content 1fr auto;
|
||||
grid-template-columns: max-content 1fr auto auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#related-tags-list.no-alias {
|
||||
grid-template-columns: max-content auto;
|
||||
}
|
||||
|
||||
.related-tag-item {
|
||||
display: grid;
|
||||
cursor: pointer;
|
||||
|
||||
+26
-41
@@ -17,7 +17,6 @@ import {
|
||||
extractTagsFromTextArea,
|
||||
getCurrentTagRange,
|
||||
getViewportMargin,
|
||||
getScrollbarWidth,
|
||||
IconSvgHtmlString
|
||||
} from './utils.js';
|
||||
import { settingValues } from './settings.js';
|
||||
@@ -312,10 +311,10 @@ function insertTagToTextArea(inputElement, tagDataToInsert) {
|
||||
let replaceEnd = cursorPos;
|
||||
|
||||
let normalizedTag;
|
||||
if (Object.values(ModelTagSource).includes(tagDataToInsert.source)) {
|
||||
if(Object.values(ModelTagSource).includes(tagDataToInsert.source)){
|
||||
// If the tag is from a model tag source, don't want to normalize it
|
||||
normalizedTag = tagDataToInsert.tag;
|
||||
} else {
|
||||
}else{
|
||||
normalizedTag = normalizeTagToInsert(tagDataToInsert.tag);
|
||||
}
|
||||
|
||||
@@ -472,8 +471,6 @@ class AutocompleteUI {
|
||||
return;
|
||||
}
|
||||
|
||||
this.tagsList.classList.toggle('no-alias', settingValues.hideAlias);
|
||||
|
||||
const existingTags = extractTagsFromTextArea(this.target);
|
||||
const currentTag = getCurrentPartialTag(this.target);
|
||||
|
||||
@@ -491,7 +488,6 @@ class AutocompleteUI {
|
||||
*/
|
||||
#createTagElement(tagData, isExisting) {
|
||||
const categoryText = TagCategory[tagData.source][tagData.category] || "unknown";
|
||||
const aliasText = tagData.alias.join(', ');
|
||||
|
||||
const tagRow = document.createElement('div');
|
||||
tagRow.classList.add('autocomplete-plus-item', tagData.source);
|
||||
@@ -521,29 +517,26 @@ class AutocompleteUI {
|
||||
alias.className = 'autocomplete-plus-alias';
|
||||
|
||||
// Display alias if available
|
||||
if (aliasText.length > 0) {
|
||||
if (tagData.alias && tagData.alias.length > 0) {
|
||||
let aliasText = tagData.alias.join(', ');
|
||||
alias.textContent = `${aliasText}`;
|
||||
alias.title = aliasText; // Full alias on hover
|
||||
alias.title = tagData.alias.join(', '); // Full alias on hover
|
||||
}
|
||||
|
||||
// Category
|
||||
const category = document.createElement('span');
|
||||
category.className = `autocomplete-plus-category`;
|
||||
category.textContent = `${categoryText.substring(0, 2)}`;
|
||||
category.title = categoryText; // Full category on hover
|
||||
|
||||
// Count
|
||||
const tagCount = document.createElement('span');
|
||||
tagCount.className = `autocomplete-plus-tag-count`;
|
||||
tagCount.textContent = formatCountHumanReadable(tagData.count);
|
||||
|
||||
// Create tooltip with more info
|
||||
let tooltipText = `Count: ${tagData.count}\nCategory: ${categoryText}`;
|
||||
if (aliasText.length > 0) {
|
||||
tooltipText += `\nAlias: ${aliasText}`;
|
||||
}
|
||||
tagRow.title = tooltipText;
|
||||
|
||||
tagRow.appendChild(tagName);
|
||||
|
||||
if (!settingValues.hideAlias) {
|
||||
tagRow.appendChild(alias);
|
||||
}
|
||||
|
||||
tagRow.appendChild(alias);
|
||||
tagRow.appendChild(category);
|
||||
tagRow.appendChild(tagCount);
|
||||
this.tagsList.appendChild(tagRow);
|
||||
}
|
||||
@@ -581,14 +574,21 @@ class AutocompleteUI {
|
||||
let topPosition = targetElmOffset.top + ((caretTop - targetElmOffset.top) + caretLineHeight) * scale;
|
||||
let leftPosition = targetElmOffset.left + (caretLeft - targetElmOffset.left) * scale;;
|
||||
|
||||
const maxWidth = Math.min(rootRect.width, viewportWidth / 2);
|
||||
const naturalHeight = rootRect.height;
|
||||
|
||||
//Horizontal Collision Detection and Adjustment
|
||||
if (leftPosition + maxWidth > viewportWidth - margin.right) {
|
||||
leftPosition = viewportWidth - maxWidth - margin.right;
|
||||
}
|
||||
if (leftPosition < margin.left) {
|
||||
leftPosition = margin.left;
|
||||
}
|
||||
|
||||
// Vertical Collision Detection and Adjustment
|
||||
const availableSpaceBelow = viewportHeight - topPosition - margin.bottom;
|
||||
const availableSpaceAbove = caretTop - margin.top;
|
||||
|
||||
let needsVerticalScroll = false;
|
||||
let maxHeight = rootRect.height;
|
||||
|
||||
if (naturalHeight <= availableSpaceBelow) {
|
||||
// Fits perfectly below the caret
|
||||
@@ -600,15 +600,14 @@ class AutocompleteUI {
|
||||
topPosition = caretTop - naturalHeight - margin.top;
|
||||
} else {
|
||||
// Doesn't fit perfectly either below or above, needs scrolling.
|
||||
needsVerticalScroll = true;
|
||||
// Choose the position (above or below) that offers more space.
|
||||
if (availableSpaceBelow >= availableSpaceAbove) {
|
||||
// Scroll below: topPosition remains as initially calculated
|
||||
maxHeight = availableSpaceBelow;
|
||||
this.tagsList.style.maxHeight = `${availableSpaceBelow}px`;
|
||||
} else {
|
||||
// Scroll above: Position near the top edge and set max-height
|
||||
topPosition = margin.top;
|
||||
maxHeight = availableSpaceAbove;
|
||||
this.tagsList.style.maxHeight = `${availableSpaceAbove}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -617,30 +616,16 @@ class AutocompleteUI {
|
||||
if (topPosition < margin.top) {
|
||||
topPosition = margin.top;
|
||||
// If pushed down, recalculate max-height if it was set based on top alignment
|
||||
if (availableSpaceBelow < availableSpaceAbove) {
|
||||
if (this.tagsList.style.maxHeight && availableSpaceBelow < availableSpaceAbove) {
|
||||
// Recalculate max-height based on space from the top margin
|
||||
maxHeight = viewportHeight - margin.top - margin.bottom;
|
||||
needsVerticalScroll = true;
|
||||
this.tagsList.style.maxHeight = `${viewportHeight - margin.top - margin.bottom}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate maxWidth considering scrollbar width if vertical scrolling is needed
|
||||
const scrollbarWidth = needsVerticalScroll ? getScrollbarWidth() : 0;
|
||||
const maxWidth = Math.min(rootRect.width + scrollbarWidth, viewportWidth / 2);
|
||||
|
||||
// Horizontal Collision Detection and Adjustment
|
||||
if (leftPosition + maxWidth > viewportWidth - margin.right) {
|
||||
leftPosition = viewportWidth - maxWidth - margin.right;
|
||||
}
|
||||
if (leftPosition < margin.left) {
|
||||
leftPosition = margin.left;
|
||||
}
|
||||
|
||||
// Apply the calculated position and display the element
|
||||
this.root.style.left = `${leftPosition}px`;
|
||||
this.root.style.top = `${topPosition}px`;
|
||||
this.root.style.maxWidth = `${maxWidth}px`;
|
||||
this.tagsList.style.maxHeight = `${maxHeight}px`;
|
||||
}
|
||||
|
||||
/** Highlights the item (row) at the given index */
|
||||
|
||||
+23
-26
@@ -154,7 +154,6 @@ async function loadTags(csvUrl, siteName) {
|
||||
}
|
||||
const csvText = await response.text();
|
||||
const lines = csvText.split('\n').filter(line => line.trim().length > 0);
|
||||
const totalLines = lines.length;
|
||||
|
||||
const startIndex = lines[0].toLowerCase().startsWith(TAGS_CSV_HEADER) ? 1 : 0;
|
||||
|
||||
@@ -184,18 +183,8 @@ async function loadTags(csvUrl, siteName) {
|
||||
updateMaxTagLength(tag.length);
|
||||
|
||||
autoCompleteData[siteName].sortedTags.push(tagData);
|
||||
} else {
|
||||
console.warn(`[Autocomplete-Plus] Invalid CSV format in line ${i + 1} of ${csvUrl}: ${line}. Expected ${TAGS_CSV_HEADER_COLUMNS.length} columns, but got ${columns.length}.`);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// Sort by count in descending order
|
||||
autoCompleteData[siteName].sortedTags.sort((a, b) => b.count - a.count);
|
||||
|
||||
// Build maps as before, but ensure not to overwrite if already processed from extra files
|
||||
autoCompleteData[siteName].sortedTags.forEach(tagData => {
|
||||
if (!autoCompleteData[siteName].tagMap.has(tagData.tag)) {
|
||||
// Set the tag and its alias in the maps
|
||||
autoCompleteData[siteName].tagMap.set(tagData.tag, tagData);
|
||||
if (tagData.alias && Array.isArray(tagData.alias)) {
|
||||
tagData.alias.forEach(alias => {
|
||||
@@ -204,8 +193,11 @@ async function loadTags(csvUrl, siteName) {
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.warn(`[Autocomplete-Plus] Invalid CSV format in line ${i + 1} of ${csvUrl}: ${line}. Expected ${TAGS_CSV_HEADER_COLUMNS.length} columns, but got ${columns.length}.`);
|
||||
continue;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error(`[Autocomplete-Plus] Failed to fetch or process tags from ${csvUrl}:`, error);
|
||||
@@ -276,17 +268,17 @@ async function loadCooccurrence(csvUrl, siteName) {
|
||||
|
||||
const startIndex = lines[0].startsWith('tag_a,tag_b,count') ? 1 : 0;
|
||||
|
||||
await processInChunks(lines, startIndex, autoCompleteData[siteName].cooccurrenceMap, csvUrl, siteName);
|
||||
await processCooccurrenceInChunks(lines, startIndex, autoCompleteData[siteName].cooccurrenceMap, csvUrl, siteName);
|
||||
} catch (error) {
|
||||
console.error(`[Autocomplete-Plus] Failed to fetch or process cooccurrence data from ${csvUrl}:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Process CSV data in chunks to avoid blocking the UI.
|
||||
* Process Co-Occurrence CSV data in chunks to avoid blocking the UI.
|
||||
* Modifies the targetMap directly.
|
||||
*/
|
||||
function processInChunks(lines, startIndex, targetMap, csvUrl, siteName) {
|
||||
function processCooccurrenceInChunks(lines, startIndex, targetMap, csvUrl, siteName) {
|
||||
return new Promise((resolve) => {
|
||||
const CHUNK_SIZE = 10000;
|
||||
let i = startIndex;
|
||||
@@ -297,7 +289,7 @@ function processInChunks(lines, startIndex, targetMap, csvUrl, siteName) {
|
||||
|
||||
for (; i < endIndex; i++) {
|
||||
const line = lines[i];
|
||||
const columns = parseCSVLine(line);
|
||||
const columns = line.split(",");
|
||||
|
||||
if (columns.length >= 3) {
|
||||
const tagA = columns[0].trim();
|
||||
@@ -307,17 +299,19 @@ function processInChunks(lines, startIndex, targetMap, csvUrl, siteName) {
|
||||
if (!tagA || !tagB || isNaN(count)) continue;
|
||||
|
||||
// Add tagA -> tagB relationship
|
||||
if (!targetMap.has(tagA)) {
|
||||
targetMap.set(tagA, new Map());
|
||||
let subMapA = targetMap.get(tagA);
|
||||
if (!subMapA) {
|
||||
subMapA = new Map();
|
||||
targetMap.set(tagA, subMapA);
|
||||
}
|
||||
targetMap.get(tagA).set(tagB, count);
|
||||
subMapA.set(tagB, count);
|
||||
|
||||
|
||||
// Add tagB -> tagA relationship (bidirectional)
|
||||
if (!targetMap.has(tagB)) {
|
||||
targetMap.set(tagB, new Map());
|
||||
let subMapB = targetMap.get(tagB);
|
||||
if (!subMapB) {
|
||||
subMapB = new Map();
|
||||
targetMap.set(tagB, subMapB);
|
||||
}
|
||||
targetMap.get(tagB).set(tagA, count);
|
||||
subMapB.set(tagA, count);
|
||||
|
||||
pairCount++;
|
||||
}
|
||||
@@ -450,6 +444,9 @@ async function initializeDataFromCSV(csvListData, source) {
|
||||
await Promise.all([
|
||||
Promise.all(tagsLoadPromiseFactories.map(factory => factory()))
|
||||
.then(() => {
|
||||
// Sort by count in descending order
|
||||
autoCompleteData[source].sortedTags.sort((a, b) => b.count - a.count);
|
||||
|
||||
// Build FlexSearch index after tags are loaded
|
||||
return buildFlexSearchIndex(source);
|
||||
})
|
||||
@@ -546,7 +543,7 @@ async function loadLoras() {
|
||||
}
|
||||
|
||||
/**
|
||||
* Load all data sources asynchronously.
|
||||
* Load all data sources in parallel.
|
||||
*/
|
||||
export async function loadDataAsync() {
|
||||
return Promise.all([
|
||||
|
||||
+33
-47
@@ -190,41 +190,40 @@ async function addExtraSettings() {
|
||||
}
|
||||
|
||||
// Add extra setting for checking new CSV updates
|
||||
// Note: Temporarily comment out until changes to remote files can be detected
|
||||
// app.ui.settings.addSetting({
|
||||
// id: id + ".check_new_csv",
|
||||
// defaultValue: null,
|
||||
// name: "Check CSV updates",
|
||||
// category: [name, "Misc", "Check new CSV"],
|
||||
// type: () => {
|
||||
// const lastCheckSpan = $el("span", {
|
||||
// textContent: lastCheckTimeText,
|
||||
// className: "text-sm text-gray-500",
|
||||
// style: {
|
||||
// marginRight: "16px"
|
||||
// }
|
||||
// });
|
||||
app.ui.settings.addSetting({
|
||||
id: id + ".check_new_csv",
|
||||
defaultValue: null,
|
||||
name: "Check CSV updates",
|
||||
category: [name, "Misc", "Check new CSV"],
|
||||
type: () => {
|
||||
const lastCheckSpan = $el("span", {
|
||||
textContent: lastCheckTimeText,
|
||||
className: "text-sm text-gray-500",
|
||||
style: {
|
||||
marginRight: "16px"
|
||||
}
|
||||
});
|
||||
|
||||
// const checkButton = $el("button", {
|
||||
// textContent: "Check now",
|
||||
// className: "p-button p-component p-button-primary",
|
||||
// onclick: async () => {
|
||||
// await performUpdateCheck(checkButton, lastCheckSpan);
|
||||
// }
|
||||
// });
|
||||
const checkButton = $el("button", {
|
||||
textContent: "Check now",
|
||||
className: "p-button p-component p-button-primary",
|
||||
onclick: async () => {
|
||||
await performUpdateCheck(checkButton, lastCheckSpan);
|
||||
}
|
||||
});
|
||||
|
||||
// return $el("div", {
|
||||
// className: "flex-row items-center gap-2",
|
||||
// }, [
|
||||
// $el("div", {
|
||||
// className: "p-component",
|
||||
// }, [
|
||||
// lastCheckSpan,
|
||||
// checkButton,
|
||||
// ]),
|
||||
// ]);
|
||||
// }
|
||||
// });
|
||||
return $el("div", {
|
||||
className: "flex-row items-center gap-2",
|
||||
}, [
|
||||
$el("div", {
|
||||
className: "p-component",
|
||||
}, [
|
||||
lastCheckSpan,
|
||||
checkButton,
|
||||
]),
|
||||
]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -241,7 +240,7 @@ app.registerExtension({
|
||||
let rootPath = import.meta.url.replace("js/main.js", "");
|
||||
loadCSS(rootPath + "css/autocomplete-plus.css"); // Load CSS for autocomplete
|
||||
|
||||
await loadDataAsync();
|
||||
loadDataAsync();
|
||||
},
|
||||
|
||||
// One the Settings Screen, displays reverse order in same category
|
||||
@@ -383,19 +382,6 @@ app.registerExtension({
|
||||
onChange: (newVal, oldVal) => {
|
||||
settingValues.enableRelatedTags = newVal;
|
||||
}
|
||||
},
|
||||
|
||||
// --- Display settings ---
|
||||
{
|
||||
id: id + ".display_hide_alias",
|
||||
name: "Hide Alias",
|
||||
tooltip: "Hide alias in the autocomplete and related tags display",
|
||||
type: "boolean",
|
||||
defaultValue: false,
|
||||
category: [name, "Display", "Hide Alias"],
|
||||
onChange: (newVal, oldVal) => {
|
||||
settingValues.hideAlias = newVal;
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
+23
-33
@@ -4,7 +4,6 @@ import {
|
||||
extractTagsFromTextArea,
|
||||
findAllTagPositions,
|
||||
getCurrentTagRange,
|
||||
getScrollbarWidth,
|
||||
getViewportMargin,
|
||||
isLongText,
|
||||
isValidTag,
|
||||
@@ -260,7 +259,7 @@ class RelatedTagsUI {
|
||||
this.headerControls.appendChild(this.pinBtn);
|
||||
|
||||
this.header.appendChild(this.headerControls);
|
||||
|
||||
|
||||
this.root.appendChild(this.header);
|
||||
|
||||
// Create a tbody for the tags
|
||||
@@ -420,8 +419,8 @@ class RelatedTagsUI {
|
||||
});
|
||||
}
|
||||
|
||||
const categoryText = TagCategory[tagData.source][tagData.category] || "unknown";
|
||||
const aliasText = tagData.alias.join(', ');
|
||||
const tagText = this.currentTag;
|
||||
const categoryText = TagCategory[tagData.source][tagData.category];
|
||||
|
||||
// Update header text with current tag
|
||||
this.headerText.innerHTML = ''; // Clear previous content
|
||||
@@ -429,15 +428,15 @@ class RelatedTagsUI {
|
||||
|
||||
const tagName = document.createElement('span');
|
||||
tagName.classList.add('related-tags-header-tag-name', tagData.source);
|
||||
tagName.title = `Count: ${tagData.count}\nCategory: ${categoryText}\nAlias: ${aliasText}`;
|
||||
tagName.title = `Count: ${tagData.count}\nCategory: ${categoryText}`;
|
||||
tagName.dataset.tagCategory = categoryText;
|
||||
if (tagData.source && ['left', 'right'].includes(settingValues.tagSourceIconPosition)) {
|
||||
const tagSourceIconHtml = `<svg class="autocomplete-plus-tag-icon-svg"><use xlink:href="#autocomplete-plus-icon-${tagData.source}"></use></svg>`;
|
||||
tagName.innerHTML = settingValues.tagSourceIconPosition == 'left'
|
||||
? `${tagSourceIconHtml} ${tagData.tag}`
|
||||
: `${tagData.tag} ${tagSourceIconHtml}`;
|
||||
? `${tagSourceIconHtml} ${tagText}`
|
||||
: `${tagText} ${tagSourceIconHtml}`;
|
||||
} else {
|
||||
tagName.textContent += tagData.tag;
|
||||
tagName.textContent += tagText;
|
||||
}
|
||||
|
||||
|
||||
@@ -448,8 +447,8 @@ class RelatedTagsUI {
|
||||
this.headerAlias.innerHTML = '';
|
||||
|
||||
// Add alias if available
|
||||
if (aliasText.length > 0 && !settingValues.hideAlias) {
|
||||
this.headerAlias.textContent = aliasText;
|
||||
if (tagData.alias?.length > 0) {
|
||||
this.headerAlias.textContent = tagData.alias.join(', ');
|
||||
this.headerAlias.style.display = 'block';
|
||||
}
|
||||
|
||||
@@ -486,9 +485,6 @@ class RelatedTagsUI {
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle column class based on settings
|
||||
this.tagsContainer.classList.toggle('no-alias', settingValues.hideAlias);
|
||||
|
||||
const existingTags = extractTagsFromTextArea(this.target);
|
||||
|
||||
// Create tag rows
|
||||
@@ -507,7 +503,6 @@ class RelatedTagsUI {
|
||||
*/
|
||||
#createTagElement(tagData, isExisting) {
|
||||
const categoryText = TagCategory[tagData.source][tagData.category] || "unknown";
|
||||
const aliasText = tagData.alias.join(', ');
|
||||
|
||||
const tagRow = document.createElement('div');
|
||||
tagRow.classList.add('related-tag-item', tagData.source);
|
||||
@@ -529,30 +524,33 @@ class RelatedTagsUI {
|
||||
alias.className = 'related-tag-alias';
|
||||
|
||||
// Display alias if available
|
||||
if (aliasText.length > 0) {
|
||||
if (tagData.alias && tagData.alias.length > 0) {
|
||||
let aliasText = tagData.alias.join(', ');
|
||||
alias.textContent = `${aliasText}`;
|
||||
alias.title = aliasText; // Full alias on hover
|
||||
alias.title = tagData.alias.join(', '); // Full alias on hover
|
||||
}
|
||||
|
||||
// Category
|
||||
const category = document.createElement('span');
|
||||
category.className = `related-tag-category`;
|
||||
category.textContent = `${categoryText.substring(0, 2)}`;
|
||||
|
||||
// Similarity
|
||||
const similarity = document.createElement('span');
|
||||
similarity.className = 'related-tag-similarity';
|
||||
similarity.textContent = `${(tagData.similarity * 100).toFixed(2)}%`;
|
||||
|
||||
// Create tooltip with more info
|
||||
let tooltipText = `Similarity: ${(tagData.similarity * 100).toFixed(2)}%\nCount: ${tagData.count}\nCategory: ${categoryText}`;
|
||||
if (aliasText.length > 0) {
|
||||
tooltipText += `\nAlias: ${aliasText}`;
|
||||
let tooltipText = `Tag: ${tagData.tag}\nSimilarity: ${(tagData.similarity * 100).toFixed(2)}%\nCount: ${tagData.count}`;
|
||||
if (tagData.alias && tagData.alias.length > 0) {
|
||||
tooltipText += `\nAlias: ${tagData.alias.join(', ')}`;
|
||||
}
|
||||
tagRow.title = tooltipText;
|
||||
|
||||
// Add cells to row
|
||||
tagRow.appendChild(tagName);
|
||||
|
||||
if (!settingValues.hideAlias) {
|
||||
tagRow.appendChild(alias);
|
||||
}
|
||||
|
||||
tagRow.appendChild(alias);
|
||||
tagRow.appendChild(category);
|
||||
tagRow.appendChild(similarity);
|
||||
|
||||
return tagRow;
|
||||
@@ -582,7 +580,7 @@ class RelatedTagsUI {
|
||||
|
||||
const newHeaderRect = this.header.getBoundingClientRect();
|
||||
|
||||
if (this.relatedTags.length > 0) {
|
||||
if(this.relatedTags.length > 0){
|
||||
this.tagsContainer.style.maxHeight = `${placementArea.height - newHeaderRect.height}px`;
|
||||
}
|
||||
|
||||
@@ -671,10 +669,6 @@ class RelatedTagsUI {
|
||||
area.y = targetRect.bottom;
|
||||
}
|
||||
|
||||
// Calculate width considering scrollbar width if vertical scrolling is needed
|
||||
const scrollbarWidth = area.height < elemHeight ? getScrollbarWidth() : 0;
|
||||
area.width = Math.min(elemWidth + scrollbarWidth, maxWidth);
|
||||
|
||||
// Adjust x position to avoid overflow
|
||||
area.x = Math.min(area.x, viewportWidth - area.width - margin.right);
|
||||
} else {
|
||||
@@ -691,10 +685,6 @@ class RelatedTagsUI {
|
||||
area.x = targetRect.right;
|
||||
}
|
||||
|
||||
// Calculate width considering scrollbar width if vertical scrolling is needed
|
||||
const scrollbarWidth = area.height < elemHeight ? getScrollbarWidth() : 0;
|
||||
area.width = Math.min(area.width + scrollbarWidth, viewportWidth - margin.left - margin.right);
|
||||
|
||||
// Adjust y position to avoid overflow
|
||||
area.y = Math.min(area.y, viewportHeight - area.height - margin.bottom);
|
||||
}
|
||||
|
||||
@@ -16,9 +16,6 @@ export const settingValues = {
|
||||
relatedTagsDisplayPosition: 'horizontal', // 'horizontal' or 'vertical'
|
||||
relatedTagsTriggerMode: 'click', // Options: 'click', 'ctrl+Click'
|
||||
|
||||
// Display settings
|
||||
hideAlias: false, // Hide alias in the autocomplete and related tags display
|
||||
|
||||
|
||||
// Internal logic settings
|
||||
_useFallbackAttachmentForEventListener: false, // Fallback to attach event listener when somthing goes wrong
|
||||
|
||||
@@ -584,38 +584,3 @@ export function getViewportMargin() {
|
||||
right: rightBarRect.width,
|
||||
};
|
||||
}
|
||||
|
||||
// Cache for scrollbar width measurement
|
||||
let _cachedScrollbarWidth;
|
||||
|
||||
/**
|
||||
* Measures and returns the scrollbar width for the current browser.
|
||||
* Creates a temporary element to measure the scrollbar width accurately.
|
||||
* @returns {number} The scrollbar width in pixels
|
||||
*/
|
||||
export function getScrollbarWidth() {
|
||||
// Return cached value if available
|
||||
if (_cachedScrollbarWidth !== undefined) {
|
||||
return _cachedScrollbarWidth;
|
||||
}
|
||||
|
||||
// Create a temporary div with scrollbar
|
||||
const outer = document.createElement('div');
|
||||
outer.style.visibility = 'hidden';
|
||||
outer.style.position = 'absolute';
|
||||
outer.style.overflow = 'scroll';
|
||||
outer.style.top = '-9999px';
|
||||
outer.style.width = '100px';
|
||||
document.body.appendChild(outer);
|
||||
|
||||
const inner = document.createElement('div');
|
||||
inner.style.width = '100%';
|
||||
outer.appendChild(inner);
|
||||
|
||||
// Cache the result
|
||||
_cachedScrollbarWidth = outer.offsetWidth - inner.offsetWidth;
|
||||
|
||||
document.body.removeChild(outer);
|
||||
|
||||
return _cachedScrollbarWidth;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user