feat(randomizer): add LoRA locking and roll modes

- Implement LoRA locking to prevent specific LoRAs from being changed during randomization
- Add visual styling for locked state with amber accents and distinct backgrounds
- Introduce `roll_mode` configuration with 'backend' (execute current selection while generating new) and 'frontend' (execute newly generated selection) behaviors
- Move LoraPoolNode to 'Lora Manager/randomizer' category and remove standalone class mappings
- Standardize RETURN_NAMES in LoraRandomizerNode for consistency
This commit is contained in:
Will Miao
2026-01-12 21:53:47 +08:00
parent 177b20263d
commit bce6b0e610
13 changed files with 706 additions and 232 deletions

View File

@@ -22,7 +22,9 @@ export function updateToggleStyle(toggleEl, active) {
export function createArrowButton(direction, onClick) {
const button = document.createElement("div");
button.className = `lm-lora-arrow lm-lora-arrow-${direction}`;
button.textContent = direction === "left" ? "◀" : "▶";
button.innerHTML = direction === "left"
? `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>`
: `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>`;
button.addEventListener("click", (e) => {
e.stopPropagation();
@@ -36,7 +38,7 @@ export function createArrowButton(direction, onClick) {
export function createDragHandle() {
const handle = document.createElement("div");
handle.className = "lm-lora-drag-handle";
handle.innerHTML = "≡";
handle.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>`;
handle.title = "Drag to reorder LoRA";
return handle;
}
@@ -102,10 +104,42 @@ export function createExpandButton(isExpanded, onClick) {
// Helper function to update expand button state
export function updateExpandButtonState(button, isExpanded) {
if (isExpanded) {
button.innerHTML = "▼"; // Down arrow for expanded
button.innerHTML = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`;
button.title = "Collapse clip controls";
} else {
button.innerHTML = "▶"; // Right arrow for collapsed
button.innerHTML = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>`;
button.title = "Expand clip controls";
}
}
// Function to create lock button
export function createLockButton(isLocked, onChange) {
const button = document.createElement("button");
button.className = "lm-lora-lock-button";
button.type = "button";
button.tabIndex = -1;
// Set icon based on locked state
updateLockButtonState(button, isLocked);
button.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
onChange(!isLocked);
});
return button;
}
// Helper function to update lock button state
export function updateLockButtonState(button, isLocked) {
if (isLocked) {
button.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>`;
button.title = "Unlock this LoRA (allow re-rolling)";
button.classList.add("lm-lora-lock-button--locked");
} else {
button.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>`;
button.title = "Lock this LoRA (prevent re-rolling)";
button.classList.remove("lm-lora-lock-button--locked");
}
}