1027 lines
48 KiB
JavaScript
1027 lines
48 KiB
JavaScript
import {
|
|
css, ensureDefault, makeSmallButton, makeAccentButton, svgIcon, makeGridItemOverlay, makeHoverButton, makeTypeRibbon, makeBypassStrike, makeFavoriteStar, TYPE_COLORS,
|
|
_showDropIndicator, _hideDropIndicator, _hideAllDropIndicators, makeAddBlock, flakeDrag, clearFlakeDrag,
|
|
makePanelDropdown, makeSmallValueSlider, renderVariantLoraSliders, renderOptionToggles, variantInitials, renderFlakeLabel, splitNameAndTags, loraTagNames,
|
|
_registerOpenPanel, _unregisterOpenPanel, setWidgetHidden, attachHoldToSingleOut, effectiveVariant, variantDropdownOptions, variantDefaultsOf, choiceFlakeLinks,
|
|
isLocalName, markLocal, SAVE_TO_DISK_SVG,
|
|
} from "../utils.js";
|
|
import { saveLocalToDisk } from "../bundle.js";
|
|
import { fetchList, fetchFlake, getCoverUrl, getVariantImageUrl, THUMB, fetchFlakeMeta, cachedVariantDefaults, importAnimFlakeApi, pickedImageUrl } from "../api.js";
|
|
import { openEditModal } from "../flake-modal.js";
|
|
import { openFileLoadPicker, openVariantMultiPicker, makeItemImagesButton, makeItemImagesDropTarget } from "../pickers.js";
|
|
import { getGeneratingUid, newItemUid } from "../queue.js";
|
|
|
|
// Grid item [width, height] per kind; animate items are larger to show their
|
|
// input image (#441).
|
|
const ITEM_SIZE = { img: [90, 100], anim: [104, 128] };
|
|
|
|
function makeComboBlock({ entry, idx, kind, isActive, isGenerating, onEdit, onRemove, onReplace, onToggleBypass, onSingleOut, onDuplicate, onImagesChanged, onDragStart, onDragOver, onDrop, onDragEnd }) {
|
|
const hasCover = !!entry.name;
|
|
const isBypassed = !!entry.bypassed;
|
|
const isAnim = kind === "anim";
|
|
const block = document.createElement("div");
|
|
block.dataset.idx = String(idx);
|
|
block.dataset.flakeBlock = "1";
|
|
|
|
css(block, `position:relative;height:${ITEM_SIZE[kind][1]}px;background:${
|
|
isBypassed ? "#1a1a1a" : "#2a2a2a"
|
|
};border:${
|
|
isGenerating ? "2px solid #4a9eff" : "1px solid #444"
|
|
};border-radius:4px;cursor:pointer;font-size:11px;color:#ddd;user-select:none;box-sizing:border-box;${
|
|
hasCover ? "background-size:cover;background-position:center;" : ""
|
|
}${isGenerating ? "box-shadow:0 0 8px 1px rgba(74,158,255,0.7);" : ""}${isBypassed ? "opacity:0.45;" : ""}`);
|
|
|
|
// Cover image — the first input image of an animate item (#441), else an
|
|
// effective variant choice's image when it has one, else the base cover.
|
|
function refreshCover() {
|
|
if (entry.images?.length) {
|
|
block.style.backgroundImage = `url("${pickedImageUrl(entry.images[0])}")`;
|
|
return;
|
|
}
|
|
if (!hasCover) return;
|
|
const baseUrl = getCoverUrl(entry.name, THUMB);
|
|
const sel = Object.entries(effectiveVariant(entry.variant, cachedVariantDefaults(entry.name)))[0];
|
|
if (!sel) {
|
|
block.style.backgroundImage = `url(${baseUrl})`;
|
|
return;
|
|
}
|
|
const [group, choice] = sel;
|
|
const variantUrl = getVariantImageUrl(entry.name, group, Array.isArray(choice) ? choice[0] : choice, THUMB);
|
|
const probe = new Image();
|
|
probe.onload = () => { block.style.backgroundImage = `url(${variantUrl})`; };
|
|
probe.onerror = () => { block.style.backgroundImage = `url(${baseUrl})`; };
|
|
probe.src = variantUrl;
|
|
}
|
|
refreshCover();
|
|
|
|
// Type ribbon — static type indicator. Activation/deactivation is handled
|
|
// by the top-right checkbox (#277), mirroring Flake Model Combo.
|
|
const ribbon = makeTypeRibbon(entry, isBypassed);
|
|
if (ribbon) {
|
|
ribbon.style.cursor = "default";
|
|
ribbon.title = entry.flake_type;
|
|
block.appendChild(ribbon);
|
|
}
|
|
|
|
// Strikethrough for bypassed state
|
|
if (isBypassed) {
|
|
block.appendChild(makeBypassStrike());
|
|
}
|
|
|
|
// Dark overlay, hover buttons, and triangle dropdown — using shared helper
|
|
const { triangleBtn } = makeGridItemOverlay({
|
|
block,
|
|
showHoverButtons: true,
|
|
buttons: [
|
|
makeHoverButton({ svg: `<polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/>`, title: "Replace Flake", onClick: () => onReplace(idx) }),
|
|
makeHoverButton({ svg: `<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>`, title: "Edit Flake", onClick: () => onEdit(idx) }),
|
|
makeHoverButton({ svg: `<circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/>`, title: "Remove from Combo", onClick: () => onRemove(idx) }),
|
|
...(isLocalName(entry.name) ? [makeHoverButton({ svg: SAVE_TO_DISK_SVG, title: "Save to disk", onClick: () => saveLocalToDisk(entry.name) })] : []),
|
|
],
|
|
showTriangle: !!entry.name,
|
|
});
|
|
if (isLocalName(entry.name)) markLocal(block);
|
|
|
|
// Enable/disable checkbox (top-right). Checked = active; unchecked =
|
|
// bypassed (excluded from the combo product). Sits above the hover overlay
|
|
// so it stays clickable on hover. Mirrors Flake Model Combo (#277).
|
|
const toggle = document.createElement("input");
|
|
toggle.type = "checkbox";
|
|
toggle.checked = !isBypassed;
|
|
toggle.title = isBypassed ? "Flake disabled (click to enable)" : "Flake enabled (click to disable)";
|
|
css(toggle, "position:absolute;top:3px;right:3px;z-index:6;cursor:pointer;margin:0;width:14px;height:14px;");
|
|
toggle.addEventListener("click", (e) => { e.stopPropagation(); });
|
|
toggle.addEventListener("mousedown", (e) => e.stopPropagation());
|
|
toggle.addEventListener("dblclick", (e) => e.stopPropagation());
|
|
toggle.addEventListener("change", (e) => { e.stopPropagation(); onToggleBypass(idx); });
|
|
if (onSingleOut) attachHoldToSingleOut(toggle, () => onSingleOut(idx));
|
|
block.appendChild(toggle);
|
|
|
|
// Duplicate (») button (bottom-right): adds a copy of this flake beside it (#316).
|
|
if (onDuplicate) {
|
|
const dup = document.createElement("button");
|
|
dup.textContent = "»";
|
|
dup.title = "Duplicate this flake";
|
|
css(dup, "position:absolute;bottom:2px;right:2px;z-index:6;width:16px;height:16px;padding:0;line-height:14px;font-size:12px;font-weight:700;border:none;background:transparent;color:#cfe6ff;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,0.9);");
|
|
dup.addEventListener("click", (e) => { e.stopPropagation(); onDuplicate(idx); });
|
|
dup.addEventListener("mousedown", (e) => e.stopPropagation());
|
|
dup.addEventListener("dblclick", (e) => e.stopPropagation());
|
|
block.appendChild(dup);
|
|
}
|
|
|
|
if (entry.favorite) {
|
|
const star = makeFavoriteStar();
|
|
// Animate items keep the bottom-left for their input images button.
|
|
if (isAnim) Object.assign(star.style, { left: "auto", right: "20px" });
|
|
block.appendChild(star);
|
|
}
|
|
if (isAnim) {
|
|
block.appendChild(makeItemImagesButton(entry, onImagesChanged));
|
|
makeItemImagesDropTarget(block, entry, onImagesChanged);
|
|
}
|
|
|
|
// Name — stacked label: name line, dimmer tag line (#297), variant suffix.
|
|
const baseName = entry.display_name || entry.name || "(missing)";
|
|
const nameEl = document.createElement("div");
|
|
css(nameEl, "position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;text-align:center;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,0.8);padding:0 4px;overflow:hidden;z-index:1;word-break:break-word;hyphens:auto;border-radius:3px;");
|
|
function refreshName() {
|
|
const { name, tags } = splitNameAndTags(baseName, entry.tags);
|
|
const base = name.includes("/") ? name.split("/").pop() : name;
|
|
renderFlakeLabel(nameEl, { name: base, tags, variantText: variantInitials(entry, cachedVariantDefaults(entry.name)) });
|
|
}
|
|
refreshName();
|
|
block.appendChild(nameEl);
|
|
|
|
// Draggable for reorder
|
|
block.draggable = true;
|
|
block.style.cursor = "grab";
|
|
block.addEventListener("dragstart", (e) => {
|
|
if (e.target && e.target !== block && e.target.tagName === "BUTTON") {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
block.style.cursor = "grabbing";
|
|
onDragStart(e, idx, block);
|
|
});
|
|
block.addEventListener("dragend", () => {
|
|
block.style.cursor = "grab";
|
|
onDragEnd(block);
|
|
});
|
|
|
|
block.addEventListener("dblclick", () => onEdit(idx));
|
|
block.addEventListener("dragover", (e) => onDragOver(e, idx, block));
|
|
block.addEventListener("dragleave", () => { block.style.outline = ""; block.style.boxShadow = ""; });
|
|
block.addEventListener("drop", (e) => onDrop(e, idx, block));
|
|
|
|
function refreshVisuals() { refreshName(); refreshCover(); }
|
|
// Default variant choices show once the flake's meta is loaded (#388).
|
|
if (hasCover && !cachedVariantDefaults(entry.name)) fetchFlakeMeta(entry.name).then(refreshVisuals, () => {});
|
|
|
|
return { block, triangleBtn, refreshName, refreshVisuals };
|
|
}
|
|
|
|
function makeInstanceControls(block, entry, idx, onChanged, triangleBtn, onVariantChange) {
|
|
if (entry.inline) return { toggleOptionsPanel: () => {} };
|
|
|
|
// Options panel (hidden by default). Same two-column layout as FlakeStack
|
|
// for #235 — native panel + linked flake panel when host has a flake_link.
|
|
const panel = document.createElement("div");
|
|
css(panel, "position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#1e1e1e;border:1px solid #444;border-radius:4px;padding:0;display:none;flex-direction:row;gap:0;z-index:50;box-shadow:0 4px 12px rgba(0,0,0,0.5);margin-top:1px;");
|
|
panel.addEventListener("click", (e) => e.stopPropagation());
|
|
panel.addEventListener("dblclick", (e) => e.stopPropagation());
|
|
block.appendChild(panel);
|
|
|
|
const nativeColumn = document.createElement("div");
|
|
css(nativeColumn, "width:160px;padding:4px;display:flex;flex-direction:column;gap:3px;box-sizing:border-box;");
|
|
panel.appendChild(nativeColumn);
|
|
|
|
const linkedColumn = document.createElement("div");
|
|
css(linkedColumn, "width:160px;padding:4px;display:none;flex-direction:column;gap:3px;box-sizing:border-box;border-left:1px solid #333;");
|
|
panel.appendChild(linkedColumn);
|
|
|
|
let optionsLoaded = false;
|
|
let hasOptions = null;
|
|
let flakeData = null;
|
|
let linkedFlakes = {};
|
|
|
|
function rebuildPanel() {
|
|
nativeColumn.replaceChildren();
|
|
|
|
const lorasMeta = flakeData?.loras || [];
|
|
if (entry.loras.length > lorasMeta.length) {
|
|
entry.loras.length = lorasMeta.length;
|
|
}
|
|
while (entry.loras.length < lorasMeta.length) {
|
|
entry.loras.push(lorasMeta[entry.loras.length]?.strength ?? 1.0);
|
|
}
|
|
const hasLoras = lorasMeta.length > 0;
|
|
const hasOptionGroups = hasOptions && Object.keys(hasOptions).length > 0;
|
|
|
|
if (triangleBtn) {
|
|
triangleBtn.style.display = "block";
|
|
}
|
|
|
|
// 1. Output Stem (top) — per-instance runtime override
|
|
const outputStem = (entry._output_stem_override ?? flakeData?.output_stem ?? "") || "";
|
|
const opLabel = document.createElement("div");
|
|
opLabel.textContent = "Output Stem";
|
|
css(opLabel, "font-size:9px;opacity:0.7;text-align:center;");
|
|
nativeColumn.appendChild(opLabel);
|
|
const opInput = document.createElement("input");
|
|
opInput.type = "text";
|
|
opInput.value = outputStem;
|
|
opInput.placeholder = "e.g. musashi/";
|
|
css(opInput, "width:100%;box-sizing:border-box;background:#1a1a1a;color:#ddd;border:1px solid #333;padding:2px 4px;border-radius:3px;font-size:10px;outline:none;");
|
|
opInput.addEventListener("input", () => {
|
|
entry._output_stem_override = opInput.value || null;
|
|
onChanged();
|
|
});
|
|
nativeColumn.appendChild(opInput);
|
|
|
|
if (hasLoras) {
|
|
const sep = document.createElement("div");
|
|
css(sep, "border-top:1px solid #333;margin:2px 0;");
|
|
nativeColumn.appendChild(sep);
|
|
for (let i = 0; i < lorasMeta.length; i++) {
|
|
const sliderRow = document.createElement("div");
|
|
css(sliderRow, "padding:2px 0;");
|
|
const name = lorasMeta[i]?.name || "LoRA";
|
|
const label = document.createElement("div");
|
|
label.textContent = name;
|
|
css(label, "font-size:9px;opacity:0.7;padding:2px 0;text-align:center;");
|
|
sliderRow.appendChild(label);
|
|
const strSlider = makeSmallValueSlider(entry.loras[i] != null ? entry.loras[i] : (lorasMeta[i]?.strength ?? 1.0), -10, 10, 0.05, (v) => {
|
|
entry.loras[i] = v;
|
|
onChanged();
|
|
});
|
|
sliderRow.appendChild(strSlider);
|
|
nativeColumn.appendChild(sliderRow);
|
|
}
|
|
}
|
|
|
|
// Flake options (#465); a choice's own options sit under its group.
|
|
if (flakeData?.prompt_options?.length) {
|
|
const sep = document.createElement("div");
|
|
css(sep, "border-top:1px solid #333;margin:2px 0;");
|
|
const optHost = document.createElement("div");
|
|
renderOptionToggles(optHost, flakeData.prompt_options, entry, onChanged);
|
|
nativeColumn.append(sep, optHost);
|
|
}
|
|
|
|
if (hasOptionGroups) {
|
|
const sep = document.createElement("div");
|
|
css(sep, "border-top:1px solid #333;margin:2px 0;");
|
|
nativeColumn.appendChild(sep);
|
|
|
|
// "All Variants" — generate one output per variant combination (#343).
|
|
const avRow = document.createElement("label");
|
|
css(avRow, "display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;cursor:pointer;");
|
|
const avChk = document.createElement("input");
|
|
avChk.type = "checkbox";
|
|
avChk.checked = !!entry._all_variants;
|
|
css(avChk, "cursor:pointer;margin:0;");
|
|
const avLbl = document.createElement("span");
|
|
avLbl.textContent = "All Variants";
|
|
avRow.append(avChk, avLbl);
|
|
nativeColumn.appendChild(avRow);
|
|
|
|
// The per-group dropdowns are superseded while All Variants is on.
|
|
const groupsWrap = document.createElement("div");
|
|
css(groupsWrap, "display:flex;flex-direction:column;gap:3px;");
|
|
nativeColumn.appendChild(groupsWrap);
|
|
// Per-group choice LoRA sliders, hidden while All Variants is on (#413).
|
|
const variantLoraRenders = [];
|
|
const applyAv = () => {
|
|
groupsWrap.style.opacity = entry._all_variants ? "0.4" : "1";
|
|
groupsWrap.style.pointerEvents = entry._all_variants ? "none" : "auto";
|
|
variantLoraRenders.forEach(r => r());
|
|
};
|
|
avChk.addEventListener("change", () => {
|
|
entry._all_variants = avChk.checked || undefined;
|
|
applyAv();
|
|
rebuildLinkedPanel();
|
|
onChanged();
|
|
if (onVariantChange) onVariantChange();
|
|
});
|
|
|
|
for (const group of Object.keys(hasOptions)) {
|
|
const row = document.createElement("div");
|
|
css(row, "display:flex;flex-direction:column;gap:2px;");
|
|
const gLabel = document.createElement("span");
|
|
gLabel.textContent = group;
|
|
css(gLabel, "font-size:9px;opacity:0.7;text-align:center;");
|
|
row.appendChild(gLabel);
|
|
|
|
// "Multiple ↗" stores an array of choices, picked in an overlay (#406).
|
|
const defaultChoice = (cachedVariantDefaults(entry.name) || {})[group];
|
|
const stored = () => (entry.variant || {})[group] || "";
|
|
// The shown value is a hidden option, so re-picking the listed "Multiple" always fires change (#418).
|
|
const ddValue = (v) => Array.isArray(v) ? "__multiple_current__" : v === defaultChoice ? "" : v;
|
|
const multipleLabel = (v) => Array.isArray(v) ? `Multiple (${v.length}) ↗` : "Multiple ↗";
|
|
const ddOptions = variantDropdownOptions(hasOptions[group], defaultChoice);
|
|
const noneValue = ddOptions[0].value;
|
|
ddOptions.push({ value: "__multiple__", label: multipleLabel(stored()) });
|
|
ddOptions.push({ value: "__multiple_current__", label: multipleLabel(stored()) });
|
|
const dd = makePanelDropdown(ddOptions, ddValue(stored()));
|
|
const currentOpt = dd.element.options[dd.element.options.length - 1];
|
|
currentOpt.hidden = true;
|
|
const multipleOpt = dd.element.options[dd.element.options.length - 2];
|
|
// No sliders for a "Multiple" selection (#413).
|
|
const vlHost = document.createElement("div");
|
|
const voHost = document.createElement("div");
|
|
const renderVl = () => {
|
|
const ch = stored() || defaultChoice;
|
|
const choice = entry._all_variants || Array.isArray(ch) ? null : ch;
|
|
renderVariantLoraSliders(vlHost, flakeData?.variants, entry, group, choice, onChanged);
|
|
renderOptionToggles(voHost, choice && flakeData?.variants?.[group]?.[choice]?.prompt_options, entry, onChanged);
|
|
};
|
|
variantLoraRenders.push(renderVl);
|
|
const store = (v) => {
|
|
if (v) {
|
|
entry.variant = entry.variant || {};
|
|
entry.variant[group] = v;
|
|
} else {
|
|
if (entry.variant) delete entry.variant[group];
|
|
}
|
|
multipleOpt.textContent = currentOpt.textContent = multipleLabel(v);
|
|
dd.element.value = ddValue(v);
|
|
entry.tags = loraTagNames(flakeData, entry.variant);
|
|
renderVl();
|
|
rebuildLinkedPanel();
|
|
onChanged();
|
|
if (onVariantChange) onVariantChange();
|
|
};
|
|
dd.element.addEventListener("change", async () => {
|
|
if (dd.element.value !== "__multiple__") return store(dd.element.value);
|
|
const current = stored() || defaultChoice;
|
|
const picked = await openVariantMultiPicker({
|
|
flakeName: entry.name, group, choices: hasOptions[group],
|
|
selected: Array.isArray(current) ? current : current && current !== "__none__" ? [current] : [],
|
|
});
|
|
if (!picked) {
|
|
dd.element.value = ddValue(stored());
|
|
return;
|
|
}
|
|
store(picked.length > 1 ? picked : picked[0] || noneValue);
|
|
});
|
|
row.append(dd.container, vlHost, voHost);
|
|
groupsWrap.appendChild(row);
|
|
}
|
|
applyAv();
|
|
}
|
|
|
|
rebuildLinkedPanel();
|
|
}
|
|
|
|
function rebuildLinkedPanel() {
|
|
const links = flakeData?.flake_links || (flakeData?.flake_link ? [flakeData.flake_link] : []);
|
|
// Then the links of the effective variant choices, under a "<group>: <choice>"
|
|
// heading and overridden in entry.variant_link_overrides (#420).
|
|
const choiceLinks = entry._all_variants ? [] : choiceFlakeLinks(flakeData?.variants, entry.variant)
|
|
.filter(([, , cl]) => cl.some(l => linkedFlakes[l?.target]));
|
|
if (!links.some(l => linkedFlakes[l?.target]) && !choiceLinks.length) {
|
|
linkedColumn.style.display = "none";
|
|
return;
|
|
}
|
|
linkedColumn.style.display = "flex";
|
|
linkedColumn.replaceChildren();
|
|
|
|
// Migrate the legacy single override into the per-link array (#234).
|
|
if (!Array.isArray(entry.flake_link_overrides)) {
|
|
entry.flake_link_overrides = entry.flake_link_override ? [entry.flake_link_override] : [];
|
|
}
|
|
|
|
const renderLink = (link, overrides, li) => {
|
|
const linkedFlakeData = linkedFlakes[link?.target];
|
|
if (!linkedFlakeData) return;
|
|
overrides[li] = overrides[li] || { variant: {}, lora_strengths: [] };
|
|
const ovr = overrides[li];
|
|
ovr.variant = ovr.variant || {};
|
|
ovr.lora_strengths = ovr.lora_strengths || [];
|
|
const yamlDefaults = link;
|
|
|
|
if (li > 0) {
|
|
const gap = document.createElement("div");
|
|
css(gap, "border-top:2px solid #444;margin:4px 0;");
|
|
linkedColumn.appendChild(gap);
|
|
}
|
|
|
|
const title = document.createElement("div");
|
|
title.textContent = (linkedFlakeData.name || link.target).split("/").pop();
|
|
title.title = `Linked: ${link.target}`;
|
|
css(title, "font-size:9px;opacity:0.8;text-align:center;font-weight:600;color:#4a9eff;padding:2px 0;");
|
|
linkedColumn.appendChild(title);
|
|
|
|
const linkedLoras = Array.isArray(linkedFlakeData.loras) ? linkedFlakeData.loras : [];
|
|
if (linkedLoras.length > 0) {
|
|
const sep = document.createElement("div");
|
|
css(sep, "border-top:1px solid #333;margin:2px 0;");
|
|
linkedColumn.appendChild(sep);
|
|
for (let i = 0; i < linkedLoras.length; i++) {
|
|
const sliderRow = document.createElement("div");
|
|
css(sliderRow, "padding:2px 0;");
|
|
const name = linkedLoras[i]?.name || "LoRA";
|
|
const label = document.createElement("div");
|
|
label.textContent = name;
|
|
css(label, "font-size:9px;opacity:0.7;padding:2px 0;text-align:center;");
|
|
sliderRow.appendChild(label);
|
|
let initial = ovr.lora_strengths[i];
|
|
if (initial === null || initial === undefined) initial = (yamlDefaults.lora_strengths || [])[i];
|
|
if (initial === null || initial === undefined) initial = linkedLoras[i]?.strength ?? 1.0;
|
|
const strSlider = makeSmallValueSlider(initial, -10, 10, 0.05, (v) => {
|
|
while (ovr.lora_strengths.length <= i) ovr.lora_strengths.push(null);
|
|
ovr.lora_strengths[i] = v;
|
|
onChanged();
|
|
});
|
|
sliderRow.appendChild(strSlider);
|
|
linkedColumn.appendChild(sliderRow);
|
|
}
|
|
}
|
|
|
|
const linkedVariants = linkedFlakeData.variants || linkedFlakeData.options || {};
|
|
if (Object.keys(linkedVariants).length > 0) {
|
|
const sep = document.createElement("div");
|
|
css(sep, "border-top:1px solid #333;margin:2px 0;");
|
|
linkedColumn.appendChild(sep);
|
|
const targetDefaults = variantDefaultsOf(linkedVariants);
|
|
for (const group of Object.keys(linkedVariants)) {
|
|
const targetDefault = targetDefaults[group];
|
|
const row = document.createElement("div");
|
|
css(row, "display:flex;flex-direction:column;gap:2px;");
|
|
const gLabel = document.createElement("span");
|
|
gLabel.textContent = group;
|
|
css(gLabel, "font-size:9px;opacity:0.7;text-align:center;");
|
|
row.appendChild(gLabel);
|
|
const yamlChoice = (yamlDefaults.variant || {})[group] || "";
|
|
const current = ovr.variant[group] || yamlChoice;
|
|
const dd = makePanelDropdown(variantDropdownOptions(Object.keys(linkedVariants[group]), targetDefault), current === targetDefault ? "" : current);
|
|
// Choice LoRA sliders: override > link yaml > target default choice (#414).
|
|
const vlHost = document.createElement("div");
|
|
const renderVl = () => {
|
|
const ch = ovr.variant[group] || yamlChoice || targetDefault;
|
|
renderVariantLoraSliders(vlHost, linkedVariants, ovr, group, ch, onChanged, yamlDefaults.variant_loras?.[group]?.[ch] || []);
|
|
};
|
|
// "" (the default entry, or None without a default) follows the link
|
|
// yaml when it is unset; otherwise it must beat the yaml choice (#419).
|
|
dd.element.addEventListener("change", () => {
|
|
const value = dd.element.value || (yamlChoice && (targetDefault || "__none__"));
|
|
if (value) ovr.variant[group] = value;
|
|
else delete ovr.variant[group];
|
|
renderVl();
|
|
onChanged();
|
|
});
|
|
row.append(dd.container, vlHost);
|
|
linkedColumn.appendChild(row);
|
|
renderVl();
|
|
}
|
|
}
|
|
|
|
if (linkedLoras.length === 0 && Object.keys(linkedVariants).length === 0) {
|
|
const empty = document.createElement("div");
|
|
css(empty, "font-size:9px;opacity:0.5;padding:4px;text-align:center;");
|
|
empty.textContent = "no overrides";
|
|
linkedColumn.appendChild(empty);
|
|
}
|
|
};
|
|
links.forEach((link, li) => renderLink(link, entry.flake_link_overrides, li));
|
|
for (const [group, choice, cl] of choiceLinks) {
|
|
const heading = document.createElement("div");
|
|
heading.textContent = `${group}: ${choice}`;
|
|
css(heading, `font-size:9px;opacity:0.8;text-align:center;font-weight:600;padding:2px 0;${linkedColumn.childElementCount ? "border-top:2px solid #444;margin-top:4px;padding-top:6px;" : ""}`);
|
|
linkedColumn.appendChild(heading);
|
|
const overrides = (((entry.variant_link_overrides ||= {})[group] ||= {})[choice] ||= []);
|
|
cl.forEach((link, li) => renderLink(link, overrides, li));
|
|
}
|
|
}
|
|
|
|
async function loadOptions() {
|
|
if (optionsLoaded || !entry.name) return;
|
|
try {
|
|
const [variants, fdata] = await Promise.all([fetchFlakeMeta(entry.name), fetchFlake(entry.name)]);
|
|
optionsLoaded = true;
|
|
hasOptions = variants;
|
|
flakeData = fdata;
|
|
const links = [...(fdata?.flake_links || (fdata?.flake_link ? [fdata.flake_link] : []))];
|
|
for (const choices of Object.values(fdata?.variants || {})) {
|
|
for (const choice of Object.values(choices || {})) links.push(...(choice?.flake_links || []));
|
|
}
|
|
const targets = [...new Set(links.map(l => l?.target).filter(Boolean))];
|
|
linkedFlakes = Object.fromEntries(await Promise.all(targets.map(async t => [t, await fetchFlake(t).catch(() => null)])));
|
|
rebuildPanel();
|
|
} catch { /* ignore */ }
|
|
}
|
|
|
|
let outsideHandler = null;
|
|
|
|
function closeOptionsPanel() {
|
|
panel.style.display = "none";
|
|
if (triangleBtn) triangleBtn.textContent = "▾";
|
|
if (outsideHandler) {
|
|
document.removeEventListener("mousedown", outsideHandler);
|
|
outsideHandler = null;
|
|
}
|
|
_unregisterOpenPanel(closeOptionsPanel);
|
|
}
|
|
|
|
async function toggleOptionsPanel() {
|
|
if (panel.style.display === "flex") {
|
|
closeOptionsPanel();
|
|
return;
|
|
}
|
|
_registerOpenPanel(closeOptionsPanel);
|
|
panel.style.display = "flex";
|
|
if (triangleBtn) triangleBtn.textContent = "▴";
|
|
if (!outsideHandler) {
|
|
outsideHandler = (e) => {
|
|
if (!block.contains(e.target)) closeOptionsPanel();
|
|
};
|
|
document.addEventListener("mousedown", outsideHandler);
|
|
}
|
|
|
|
if (!optionsLoaded && entry.name) {
|
|
nativeColumn.replaceChildren();
|
|
const loading = document.createElement("div");
|
|
css(loading, "font-size:9px;opacity:0.5;text-align:center;padding:4px;");
|
|
loading.textContent = "loading...";
|
|
nativeColumn.appendChild(loading);
|
|
|
|
try {
|
|
await loadOptions();
|
|
} catch {
|
|
nativeColumn.replaceChildren();
|
|
const err = document.createElement("div");
|
|
css(err, "font-size:9px;color:#f88;padding:4px;text-align:center;");
|
|
err.textContent = "failed to load";
|
|
nativeColumn.appendChild(err);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (triangleBtn) {
|
|
triangleBtn.addEventListener("click", () => {
|
|
toggleOptionsPanel();
|
|
});
|
|
}
|
|
|
|
loadOptions();
|
|
|
|
return { toggleOptionsPanel };
|
|
}
|
|
|
|
// kind "anim": a Flake Animate Combo node, see setupFlakeWidget.
|
|
export function setupFlakeComboWidget(node, { kind = "img" } = {}) {
|
|
const familyName = kind === "anim" ? "family" : "model_family";
|
|
const dataInput = kind === "anim" ? "flake_anim_data" : "flake_data";
|
|
const flakesHidden = node.widgets?.find(w => w.name === "flakes_json");
|
|
const familyWidget = node.widgets?.find(w => w.name === familyName);
|
|
if (!flakesHidden) return;
|
|
|
|
flakesHidden.computeSize = () => [0, -4];
|
|
flakesHidden.type = "hidden";
|
|
flakesHidden.hidden = true;
|
|
if (flakesHidden.element) { flakesHidden.element.remove(); flakesHidden.element = null; }
|
|
if (flakesHidden.inputEl) { flakesHidden.inputEl.remove(); flakesHidden.inputEl = null; }
|
|
|
|
function getFamily() {
|
|
return familyWidget?.value || "SDXL/Base";
|
|
}
|
|
|
|
// Hide model_family widget when flake_data input is connected. See
|
|
// flake-stack.js for full rationale; uses setWidgetHidden() from utils.js
|
|
// which stacks every known hide signal across LiteGraph + modern frontends.
|
|
let _familyHidden = false;
|
|
function _inferUpstreamFamily() {
|
|
const flakeDataInput = node.inputs?.find(i => i.name === dataInput);
|
|
if (!flakeDataInput || flakeDataInput.link == null) return null;
|
|
const link = node.graph?.links?.[flakeDataInput.link];
|
|
if (!link) return null;
|
|
const upstreamNode = node.graph.getNodeById(link.origin_id);
|
|
if (!upstreamNode) return null;
|
|
const upstreamFamily = upstreamNode.widgets?.find(w => w.name === familyName);
|
|
return upstreamFamily?.value || null;
|
|
}
|
|
function _isFlakeDataConnected() {
|
|
const flakeDataInput = node.inputs?.find(i => i.name === dataInput);
|
|
return !!(flakeDataInput && flakeDataInput.link != null);
|
|
}
|
|
function _updateFamilyVisibility() {
|
|
if (!familyWidget) return;
|
|
// Hide whenever the input pin is connected — not only when the upstream
|
|
// family is inferable. Otherwise a connected-but-uninferable upstream
|
|
// leaves the widget visible-but-disabled (#261).
|
|
const shouldHide = _isFlakeDataConnected();
|
|
const upstream = _inferUpstreamFamily();
|
|
if (upstream !== null && upstream !== familyWidget.value) {
|
|
familyWidget.value = upstream;
|
|
if (familyWidget.callback) familyWidget.callback(upstream);
|
|
}
|
|
if (shouldHide === _familyHidden) return;
|
|
_familyHidden = shouldHide;
|
|
setWidgetHidden(familyWidget, shouldHide);
|
|
node.setDirtyCanvas(true, true);
|
|
}
|
|
const _familyPoll = setInterval(_updateFamilyVisibility, 200);
|
|
setTimeout(_updateFamilyVisibility, 0);
|
|
|
|
if (!node.properties) node.properties = {};
|
|
if (!node.properties._combo_flakes) node.properties._combo_flakes = [];
|
|
if (node.properties._combo_active_index == null) node.properties._combo_active_index = 0;
|
|
|
|
function readAllFlakes() {
|
|
const flakes = node.properties._combo_flakes || [];
|
|
for (const entry of flakes) {
|
|
if (!entry.loras && entry.strength != null) {
|
|
entry.loras = [entry.strength];
|
|
}
|
|
if (!entry.loras) entry.loras = [];
|
|
if (!entry.variant && entry.option) {
|
|
entry.variant = entry.option;
|
|
delete entry.option;
|
|
}
|
|
if (!entry.variant) entry.variant = {};
|
|
if (!entry._uid) entry._uid = newItemUid();
|
|
}
|
|
return flakes;
|
|
}
|
|
function writeAllFlakes(flakes) {
|
|
node.properties._combo_flakes = flakes;
|
|
updateActiveFlake();
|
|
}
|
|
function updateActiveFlake() {
|
|
const flakes = readAllFlakes();
|
|
const idx = node.properties._combo_active_index || 0;
|
|
const active = flakes[idx] || null;
|
|
flakesHidden.value = JSON.stringify(active ? [active] : []);
|
|
}
|
|
|
|
const container = document.createElement("div");
|
|
css(container, "display:flex;flex-direction:column;gap:2px;padding:0 6px 3px 6px;font-size:12px;color:#ddd;");
|
|
|
|
// Toggle-all button (#315): activate/deactivate every flake in the combo at
|
|
// once. Matches the Generation Data button via the shared helper, centered (#338).
|
|
const { btn: toggleAll, lbl: toggleAllLbl } = makeAccentButton("Activate all");
|
|
toggleAll.style.alignSelf = "center";
|
|
toggleAll.style.margin = "2px 0";
|
|
function refreshToggleAll() {
|
|
const arr = readAllFlakes();
|
|
const allActive = arr.length > 0 && arr.every(e => !e.bypassed);
|
|
toggleAllLbl.textContent = allActive ? "Deactivate all" : "Activate all";
|
|
}
|
|
toggleAll.addEventListener("click", () => {
|
|
const arr = readAllFlakes();
|
|
const allActive = arr.length > 0 && arr.every(e => !e.bypassed);
|
|
arr.forEach(e => { e.bypassed = allActive; });
|
|
writeAllFlakes(arr);
|
|
render();
|
|
});
|
|
container.appendChild(toggleAll);
|
|
|
|
const [itemW, itemH] = ITEM_SIZE[kind];
|
|
const grid = document.createElement("div");
|
|
css(grid, `display:grid;grid-template-columns:repeat(auto-fill, minmax(${itemW}px, 1fr));gap:4px;`);
|
|
container.appendChild(grid);
|
|
|
|
let dragSrcIdx = null;
|
|
|
|
function render() {
|
|
const flakes = readAllFlakes();
|
|
const activeIdx = node.properties._combo_active_index || 0;
|
|
const generatingUid = getGeneratingUid(node);
|
|
grid.replaceChildren();
|
|
|
|
for (let i = 0; i < flakes.length; i++) {
|
|
const { block: blk, triangleBtn, refreshVisuals } = makeComboBlock({
|
|
entry: flakes[i],
|
|
idx: i,
|
|
kind,
|
|
isActive: i === activeIdx,
|
|
isGenerating: generatingUid != null && flakes[i]._uid === generatingUid,
|
|
onEdit: handleEdit,
|
|
onRemove: handleRemove,
|
|
onReplace: handleReplace,
|
|
onToggleBypass: handleToggleBypass,
|
|
onSingleOut: handleSingleOut,
|
|
onDuplicate: handleDuplicate,
|
|
onImagesChanged: () => { writeAllFlakes(flakes); render(); },
|
|
onDragStart: (e, idx, el) => {
|
|
dragSrcIdx = idx;
|
|
Object.assign(flakeDrag, { node, entry: flakes[idx], take: () => takeDragged(idx), kind });
|
|
e.dataTransfer.effectAllowed = "move";
|
|
el.style.opacity = "0.4";
|
|
},
|
|
onDragOver: (e, idx, el) => {
|
|
if (!isForeignDrag() && (dragSrcIdx === null || idx === dragSrcIdx)) return;
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = "move";
|
|
_showDropIndicator(el);
|
|
},
|
|
onDrop: (e, idx, el) => {
|
|
e.preventDefault();
|
|
_hideDropIndicator(el);
|
|
if (isForeignDrag()) {
|
|
dropForeign(idx);
|
|
return;
|
|
}
|
|
if (dragSrcIdx === null || idx === dragSrcIdx) return;
|
|
const arr = readAllFlakes();
|
|
const [moved] = arr.splice(dragSrcIdx, 1);
|
|
let insertIdx = idx;
|
|
if (dragSrcIdx < idx) insertIdx--;
|
|
arr.splice(insertIdx, 0, moved);
|
|
if (node.properties._combo_active_index === dragSrcIdx) {
|
|
node.properties._combo_active_index = insertIdx;
|
|
} else if (node.properties._combo_active_index > dragSrcIdx && node.properties._combo_active_index <= idx) {
|
|
node.properties._combo_active_index--;
|
|
}
|
|
writeAllFlakes(arr);
|
|
dragSrcIdx = null;
|
|
render();
|
|
},
|
|
onDragEnd: (el) => {
|
|
el.style.opacity = "";
|
|
dragSrcIdx = null;
|
|
clearFlakeDrag();
|
|
_hideAllDropIndicators();
|
|
},
|
|
});
|
|
makeInstanceControls(blk, flakes[i], i, () => writeAllFlakes(flakes), triangleBtn, refreshVisuals);
|
|
grid.appendChild(blk);
|
|
}
|
|
|
|
if (grid._addBlock) grid.appendChild(grid._addBlock);
|
|
refreshToggleAll();
|
|
}
|
|
|
|
// Cross-node drag & drop with other Flake Stack / Flake Combo grids (#415).
|
|
function isForeignDrag() {
|
|
return flakeDrag.node !== null && flakeDrag.node !== node && flakeDrag.kind === kind;
|
|
}
|
|
|
|
// The source block leaves the DOM on re-render, so its dragend may never fire.
|
|
function takeDragged(idx) {
|
|
const arr = readAllFlakes();
|
|
arr.splice(idx, 1);
|
|
if (node.properties._combo_active_index > idx) node.properties._combo_active_index--;
|
|
if (node.properties._combo_active_index >= arr.length) {
|
|
node.properties._combo_active_index = Math.max(0, arr.length - 1);
|
|
}
|
|
writeAllFlakes(arr);
|
|
dragSrcIdx = null;
|
|
clearFlakeDrag();
|
|
render();
|
|
node.setDirtyCanvas(true, true);
|
|
}
|
|
|
|
function dropForeign(at) {
|
|
const entry = JSON.parse(JSON.stringify(flakeDrag.entry));
|
|
entry._uid = newItemUid();
|
|
const arr = readAllFlakes();
|
|
if (arr.length && node.properties._combo_active_index >= at) node.properties._combo_active_index++;
|
|
arr.splice(at, 0, entry);
|
|
writeAllFlakes(arr);
|
|
render();
|
|
flakeDrag.take();
|
|
}
|
|
|
|
async function handleEdit(idx) {
|
|
const entries = readAllFlakes();
|
|
const entry = entries[idx];
|
|
let data;
|
|
try {
|
|
data = await fetchFlake(entry.name);
|
|
} catch (err) {
|
|
window.alert(`Failed to load ${entry.name}: ${err.message || err}`);
|
|
return;
|
|
}
|
|
|
|
const { directories } = await fetchList(getFamily(), kind);
|
|
const result = await openEditModal({
|
|
mode: "edit",
|
|
name: entry.name,
|
|
data,
|
|
dirs: directories,
|
|
kind,
|
|
});
|
|
|
|
if (!result) return;
|
|
|
|
if (result.deleted) {
|
|
const arr = readAllFlakes();
|
|
arr.splice(idx, 1);
|
|
if (node.properties._combo_active_index >= arr.length) {
|
|
node.properties._combo_active_index = Math.max(0, arr.length - 1);
|
|
}
|
|
writeAllFlakes(arr);
|
|
render();
|
|
} else if (result.saved || result.defaultUpdated) {
|
|
const arr = readAllFlakes();
|
|
// The modal already persisted the flake to disk; just refresh the
|
|
// entry's display metadata to reflect the new defaults.
|
|
if (result.name && result.name !== arr[idx].name) arr[idx].name = result.name;
|
|
arr[idx]._edited_at = Date.now();
|
|
arr[idx].flake_type = result.data?.flake_type || null;
|
|
arr[idx].favorite = !!result.data?.favorite;
|
|
arr[idx].has_lora = !!(result.data && (result.data.path || (result.data.loras && result.data.loras.length > 0)));
|
|
arr[idx].display_name = result.data?.name || null;
|
|
arr[idx].tags = loraTagNames(result.data, arr[idx].variant);
|
|
const newLoras = Array.isArray(result.data?.loras)
|
|
? result.data.loras.map(l => l?.strength ?? 1.0)
|
|
: (result.data?.path ? [result.data.strength ?? 1.0] : []);
|
|
arr[idx].loras = newLoras;
|
|
if (arr[idx].variant) {
|
|
const validGroups = new Set(Object.keys(result.data?.variants || result.data?.options || {}));
|
|
for (const g of Object.keys(arr[idx].variant)) {
|
|
if (!validGroups.has(g)) delete arr[idx].variant[g];
|
|
}
|
|
}
|
|
writeAllFlakes(arr);
|
|
render();
|
|
}
|
|
}
|
|
|
|
function handleRemove(idx) {
|
|
const arr = readAllFlakes();
|
|
arr.splice(idx, 1);
|
|
if (node.properties._combo_active_index >= arr.length) {
|
|
node.properties._combo_active_index = Math.max(0, arr.length - 1);
|
|
}
|
|
writeAllFlakes(arr);
|
|
render();
|
|
}
|
|
|
|
function handleToggleBypass(idx) {
|
|
const arr = readAllFlakes();
|
|
arr[idx].bypassed = !arr[idx].bypassed;
|
|
writeAllFlakes(arr);
|
|
render();
|
|
}
|
|
|
|
function handleDuplicate(idx) {
|
|
const arr = readAllFlakes();
|
|
const copy = JSON.parse(JSON.stringify(arr[idx]));
|
|
copy._uid = newItemUid();
|
|
arr.splice(idx + 1, 0, copy);
|
|
writeAllFlakes(arr);
|
|
render();
|
|
}
|
|
|
|
// Hold the activation checkbox to single out: enable only this flake,
|
|
// disable every other one in the combo (#281).
|
|
function handleSingleOut(idx) {
|
|
const arr = readAllFlakes();
|
|
arr.forEach((e, i) => { e.bypassed = i !== idx; });
|
|
writeAllFlakes(arr);
|
|
render();
|
|
}
|
|
|
|
async function handleReplace(idx) {
|
|
const { flakes, directories, display_names, tag_names, favorites, folder_covers } = await fetchList(getFamily(), kind);
|
|
const result = await openFileLoadPicker({ flakes, directories, family: getFamily(), kind, displayNames: display_names, tagNames: tag_names, favorites, folderCovers: folder_covers });
|
|
if (!result || !result.name) return;
|
|
const arr = readAllFlakes();
|
|
let has_lora = false;
|
|
let display_name = null;
|
|
let flake_type = null;
|
|
let favorite = false;
|
|
let loras = [];
|
|
let tags = [];
|
|
try {
|
|
const d = await fetchFlake(result.name);
|
|
has_lora = !!(d && (d.path || (d.loras && d.loras.length > 0)));
|
|
display_name = d.name || null;
|
|
flake_type = d.flake_type || null;
|
|
favorite = !!d.favorite;
|
|
tags = loraTagNames(d);
|
|
if (d.loras) loras = d.loras.map(l => l.strength ?? 1.0);
|
|
else if (d.path) loras = [d.strength ?? 1.0];
|
|
} catch {}
|
|
arr[idx] = { ...arr[idx], name: result.name, loras, variant: {}, variant_loras: undefined, option_overrides: undefined, has_lora, display_name, flake_type, favorite, tags };
|
|
writeAllFlakes(arr);
|
|
render();
|
|
}
|
|
|
|
async function handleNew() {
|
|
const { directories } = await fetchList(getFamily(), kind);
|
|
const result = await openEditModal({
|
|
mode: "create",
|
|
data: {},
|
|
dirs: directories,
|
|
family: getFamily(),
|
|
kind,
|
|
});
|
|
if (!result || !result.created) return;
|
|
const arr = readAllFlakes();
|
|
let has_lora = false;
|
|
let display_name = null;
|
|
let flake_type = null;
|
|
let loras = [];
|
|
if (result.data && (result.data.path || (result.data.loras && result.data.loras.length > 0))) has_lora = true;
|
|
else if (result.name) {
|
|
try { const d = await fetchFlake(result.name); has_lora = !!(d && (d.path || (d.loras && d.loras.length > 0))); flake_type = d.flake_type || null; } catch {}
|
|
}
|
|
if (result.data && result.data.name) display_name = result.data.name;
|
|
else if (result.name) {
|
|
try { const d = await fetchFlake(result.name); display_name = d.name || null; flake_type = flake_type || d.flake_type || null; } catch {}
|
|
}
|
|
if (result.data && result.data.loras) {
|
|
loras = result.data.loras.map(l => l.strength ?? 1.0);
|
|
} else if (result.data && result.data.path) {
|
|
loras = [result.data.strength ?? 1.0];
|
|
} else if (result.name) {
|
|
try {
|
|
const d = await fetchFlake(result.name);
|
|
if (d.loras) loras = d.loras.map(l => l.strength ?? 1.0);
|
|
else if (d.path) loras = [d.strength ?? 1.0];
|
|
flake_type = flake_type || d.flake_type || null;
|
|
} catch {}
|
|
}
|
|
arr.push({ name: result.name, loras, variant: {}, has_lora, display_name, flake_type, favorite: !!result.data?.favorite, tags: loraTagNames(result.data) });
|
|
writeAllFlakes(arr);
|
|
render();
|
|
}
|
|
|
|
async function handleLoad() {
|
|
const { flakes, directories, display_names, tag_names, favorites, folder_covers } = await fetchList(getFamily(), kind);
|
|
const result = await openFileLoadPicker({ flakes, directories, family: getFamily(), kind, displayNames: display_names, tagNames: tag_names, favorites, folderCovers: folder_covers });
|
|
if (!result || !result.name) return;
|
|
await addFlake(result.name);
|
|
}
|
|
|
|
// Animate grids: copy a picked image flake into the node's family, edit
|
|
// the copy, then add it like a loaded flake (#433).
|
|
async function handleImport() {
|
|
const { flakes, directories, display_names, tag_names, favorites, folder_covers } = await fetchList("", "img");
|
|
const picked = await openFileLoadPicker({ flakes, directories, displayNames: display_names, tagNames: tag_names, favorites, folderCovers: folder_covers });
|
|
if (!picked || !picked.name) return;
|
|
let name;
|
|
let data;
|
|
try {
|
|
name = await importAnimFlakeApi(picked.name, getFamily());
|
|
data = await fetchFlake(name);
|
|
} catch (err) {
|
|
window.alert(`Failed to import ${picked.name}: ${err.message || err}`);
|
|
return;
|
|
}
|
|
const result = await openEditModal({ mode: "edit", name, data, dirs: (await fetchList(getFamily(), kind)).directories, kind });
|
|
if (result?.deleted) return;
|
|
await addFlake(result?.name || name);
|
|
}
|
|
|
|
async function addFlake(name) {
|
|
const arr = readAllFlakes();
|
|
let has_lora = false;
|
|
let display_name = null;
|
|
let flake_type = null;
|
|
let favorite = false;
|
|
let loras = [];
|
|
let tags = [];
|
|
try {
|
|
const d = await fetchFlake(name);
|
|
has_lora = !!(d && (d.path || (d.loras && d.loras.length > 0)));
|
|
display_name = d.name || null;
|
|
flake_type = d.flake_type || null;
|
|
favorite = !!d.favorite;
|
|
tags = loraTagNames(d);
|
|
if (d.loras) loras = d.loras.map(l => l.strength ?? 1.0);
|
|
else if (d.path) loras = [d.strength ?? 1.0];
|
|
} catch {}
|
|
arr.push({ name, loras, variant: {}, has_lora, display_name, flake_type, favorite, tags });
|
|
writeAllFlakes(arr);
|
|
render();
|
|
}
|
|
|
|
grid._addBlock = makeAddBlock({ onNew: handleNew, onLoad: handleLoad, onImport: kind === "anim" ? handleImport : null });
|
|
grid._addBlock.style.height = `${itemH}px`;
|
|
|
|
grid._addBlock.addEventListener("dragover", (e) => {
|
|
if (dragSrcIdx === null && !isForeignDrag()) return;
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = "move";
|
|
_showDropIndicator(grid._addBlock);
|
|
});
|
|
grid._addBlock.addEventListener("dragleave", () => {
|
|
_hideDropIndicator(grid._addBlock);
|
|
});
|
|
grid._addBlock.addEventListener("drop", (e) => {
|
|
e.preventDefault();
|
|
_hideDropIndicator(grid._addBlock);
|
|
if (isForeignDrag()) {
|
|
dropForeign(readAllFlakes().length);
|
|
return;
|
|
}
|
|
if (dragSrcIdx === null) return;
|
|
const arr = readAllFlakes();
|
|
const [moved] = arr.splice(dragSrcIdx, 1);
|
|
arr.push(moved);
|
|
writeAllFlakes(arr);
|
|
dragSrcIdx = null;
|
|
render();
|
|
});
|
|
|
|
if (familyWidget) {
|
|
const origCallback = familyWidget.callback;
|
|
familyWidget.callback = function (value) {
|
|
const r = origCallback?.apply(this, arguments);
|
|
render();
|
|
return r;
|
|
};
|
|
}
|
|
|
|
node._combo_render = render;
|
|
const comboWidget = node.addDOMWidget("combo_ui", "div", container, { serialize: false, margin: 4 });
|
|
comboWidget.computeSize = () => {
|
|
// Match the actual auto-fill column count (minmax item width + 4px gap) so a
|
|
// wide node doesn't over-count rows and pad itself with empty space (#317).
|
|
const cols = Math.max(1, Math.floor((node.size[0] - 16) / (itemW + 4)));
|
|
const rows = Math.max(1, Math.ceil((readAllFlakes().length + 1) / cols));
|
|
return [node.size[0], rows * (itemH + 4) + 55]; // +24 for the toggle-all button (#315)
|
|
};
|
|
updateActiveFlake();
|
|
render();
|
|
|
|
const origOnRemoved = node.onRemoved;
|
|
node.onRemoved = function () {
|
|
clearInterval(_familyPoll);
|
|
return origOnRemoved?.apply(this, arguments);
|
|
};
|
|
} |