mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-22 05:32:12 -03:00
This commit implements drag-and-drop functionality for sidebar nodes, adding visual feedback via highlight styling when dragging over valid drop targets. The CSS introduces new classes to style drop indicators using the lora-accent color scheme, while the JS adds event handlers to manage drag operations and update the UI state accordingly. This improves user interaction by providing clear visual cues for valid drop areas during file operations.
84 lines
2.4 KiB
JavaScript
84 lines
2.4 KiB
JavaScript
import { modalManager } from '../managers/ModalManager.js';
|
|
import { getModelApiClient } from '../api/modelApiFactory.js';
|
|
|
|
let pendingDeletePath = null;
|
|
let pendingExcludePath = null;
|
|
|
|
export function showDeleteModal(filePath) {
|
|
pendingDeletePath = filePath;
|
|
|
|
const card = document.querySelector(`.model-card[data-filepath="${filePath}"]`);
|
|
const modelName = card ? card.dataset.name : filePath.split('/').pop();
|
|
const modal = modalManager.getModal('deleteModal').element;
|
|
const modelInfo = modal.querySelector('.delete-model-info');
|
|
|
|
modelInfo.innerHTML = `
|
|
<strong>Model:</strong> ${modelName}
|
|
<br>
|
|
<strong>File:</strong> ${filePath}
|
|
`;
|
|
|
|
modalManager.showModal('deleteModal');
|
|
}
|
|
|
|
export async function confirmDelete() {
|
|
if (!pendingDeletePath) return;
|
|
|
|
try {
|
|
await getModelApiClient().deleteModel(pendingDeletePath);
|
|
|
|
closeDeleteModal();
|
|
|
|
if (window.modelDuplicatesManager) {
|
|
window.modelDuplicatesManager.updateDuplicatesBadgeAfterRefresh();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting model:', error);
|
|
alert(`Error deleting model: ${error}`);
|
|
}
|
|
}
|
|
|
|
export function closeDeleteModal() {
|
|
modalManager.closeModal('deleteModal');
|
|
pendingDeletePath = null;
|
|
}
|
|
|
|
// Functions for the exclude modal
|
|
export function showExcludeModal(filePath) {
|
|
pendingExcludePath = filePath;
|
|
|
|
const card = document.querySelector(`.model-card[data-filepath="${filePath}"]`);
|
|
const modelName = card ? card.dataset.name : filePath.split('/').pop();
|
|
const modal = modalManager.getModal('excludeModal').element;
|
|
const modelInfo = modal.querySelector('.exclude-model-info');
|
|
|
|
modelInfo.innerHTML = `
|
|
<strong>Model:</strong> ${modelName}
|
|
<br>
|
|
<strong>File:</strong> ${filePath}
|
|
`;
|
|
|
|
modalManager.showModal('excludeModal');
|
|
}
|
|
|
|
export function closeExcludeModal() {
|
|
modalManager.closeModal('excludeModal');
|
|
pendingExcludePath = null;
|
|
}
|
|
|
|
export async function confirmExclude() {
|
|
if (!pendingExcludePath) return;
|
|
|
|
try {
|
|
await getModelApiClient().excludeModel(pendingExcludePath);
|
|
|
|
closeExcludeModal();
|
|
|
|
if (window.modelDuplicatesManager) {
|
|
window.modelDuplicatesManager.updateDuplicatesBadgeAfterRefresh();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error excluding model:', error);
|
|
}
|
|
}
|