324 lines
16 KiB
JavaScript
324 lines
16 KiB
JavaScript
const ROOT_FOLDER_NAME = "ComfyUI-CustomizableSave";
|
|
|
|
import { app } from "/scripts/app.js";
|
|
import { api } from "/scripts/api.js";
|
|
|
|
async function populateDirectoryOptions(directoryWidget, node) {
|
|
const refreshButton = node.widgets.find(w => w.name === "🔄 Refresh" || w.name === "🔄 Loading...");
|
|
if (refreshButton) {
|
|
refreshButton.name = "🔄 Loading...";
|
|
refreshButton.disabled = true;
|
|
node.setDirtyCanvas(true, true);
|
|
}
|
|
|
|
try {
|
|
const resp = await api.fetchApi(`/${ROOT_FOLDER_NAME}/get_output_dirs`);
|
|
if (resp.status === 200) {
|
|
const dirs = await resp.json();
|
|
|
|
// --- 💡 표시 텍스트 수정 로직 변경 💡 ---
|
|
|
|
// 1. 실제 값과 표시될 이름을 매핑하는 객체를 만듭니다.
|
|
const valueMap = { "": "output" }; // { 실제 값: 표시 이름 }
|
|
dirs.forEach(dir => {
|
|
valueMap[dir] = `output/${dir}`;
|
|
});
|
|
|
|
// 2. 화면에 보여줄 이름들의 목록을 생성합니다.
|
|
const displayNames = Object.values(valueMap);
|
|
directoryWidget.options.values = displayNames;
|
|
|
|
const currentValue = directoryWidget.value;
|
|
|
|
// 3. 현재 실제 값(currentValue)에 해당하는 표시 이름(display name)을 찾아 위젯에 설정합니다.
|
|
// 위젯의 'value'는 이제 화면에 표시되는 텍스트가 됩니다.
|
|
directoryWidget.value = valueMap[currentValue] || "output";
|
|
|
|
// 4. callback 함수: 사용자가 표시 이름을 선택하면, 실제 값으로 변환하여 노드에 저장합니다.
|
|
// 이 부분이 핵심입니다. ComfyUI는 여기에 저장된 값을 백엔드로 전달합니다.
|
|
directoryWidget.callback = function(v) {
|
|
const realValue = Object.keys(valueMap).find(key => valueMap[key] === v);
|
|
this.value = realValue; // 위젯의 실제 값을 내부적으로 변경
|
|
};
|
|
|
|
// 콜백을 수동으로 한번 호출하여 초기값을 실제 값으로 설정합니다.
|
|
directoryWidget.callback(directoryWidget.value);
|
|
|
|
} else {
|
|
console.error("Failed to fetch output directories:", await resp.text());
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching output directories:", error);
|
|
} finally {
|
|
if (refreshButton) {
|
|
refreshButton.name = "🔄 Refresh";
|
|
refreshButton.disabled = false;
|
|
}
|
|
node.computeSize();
|
|
node.setDirtyCanvas(true, true);
|
|
}
|
|
}
|
|
|
|
app.registerExtension({
|
|
name: "MilleN2ium.AdvancedSave",
|
|
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
|
if (nodeData.name === "AdvancedSave") {
|
|
|
|
const onAdded = nodeType.prototype.onAdded;
|
|
nodeType.prototype.onAdded = function () {
|
|
onAdded?.apply(this, arguments);
|
|
|
|
if (this.widgets.find(w => w.name === "dnd_filename_pattern")) return;
|
|
|
|
const widgetIndex = this.widgets.findIndex(w => w.name === "directory");
|
|
if (widgetIndex === -1) {
|
|
console.error("Could not find 'directory' widget.");
|
|
return;
|
|
}
|
|
const originalWidget = this.widgets[widgetIndex];
|
|
const originalValue = originalWidget.value;
|
|
|
|
const newComboWidget = this.addWidget("combo", "directory", originalValue, () => {}, {
|
|
values: ["(Loading...)"]
|
|
});
|
|
|
|
this.widgets.pop();
|
|
this.widgets.splice(widgetIndex, 1, newComboWidget);
|
|
|
|
const directoryWidget = newComboWidget;
|
|
populateDirectoryOptions(directoryWidget, this);
|
|
|
|
const refreshButton = this.addWidget("button", "🔄 Refresh", null, () => populateDirectoryOptions(directoryWidget, this));
|
|
refreshButton.serialize = false;
|
|
|
|
const openFolderButton = this.addWidget("button", "📂 Open Folder", null, async () => {
|
|
if (directoryWidget.value === null || directoryWidget.value === undefined) return;
|
|
try {
|
|
await api.fetchApi(`/${ROOT_FOLDER_NAME}/open_folder`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ directory: directoryWidget.value }),
|
|
});
|
|
} catch (err) {
|
|
console.error("[AdvancedSave] Failed to request open_folder:", err);
|
|
}
|
|
});
|
|
openFolderButton.serialize = false;
|
|
|
|
// (filename_pattern 및 DnD 관련 코드는 기존과 동일하게 유지됩니다)
|
|
const patternWidget = this.widgets.find(w => w.name === "filename_pattern");
|
|
patternWidget.inputEl.readOnly = true;
|
|
Object.assign(patternWidget.inputEl.style, {
|
|
opacity: "0.6",
|
|
cursor: "not-allowed",
|
|
marginTop: "4px"
|
|
});
|
|
|
|
const widgetWrapper = document.createElement("div");
|
|
const availableContainer = document.createElement("div");
|
|
availableContainer.className = "advsave-container advsave-item-picker";
|
|
const dropArea = document.createElement("div");
|
|
dropArea.className = "advsave-container advsave-drop-area";
|
|
|
|
const AVAILABLE_ITEMS = {
|
|
"[prefix]": "Prefix", "[seed]": "Seed", "[counter]": "Counter (Session)", "[date]": "Date",
|
|
"[time]": "Time", "[width]": "Width", "[height]": "Height"
|
|
};
|
|
|
|
const createToken = (id, text) => {
|
|
const token = document.createElement("div");
|
|
token.className = "advsave-token";
|
|
token.textContent = text;
|
|
token.dataset.id = id;
|
|
token.draggable = true;
|
|
if (id.startsWith('_custom_')) {
|
|
token.classList.add("custom-text");
|
|
}
|
|
|
|
const removeBtn = document.createElement("div");
|
|
removeBtn.className = "advsave-remove-btn";
|
|
removeBtn.textContent = "x";
|
|
removeBtn.onclick = (e) => {
|
|
e.stopPropagation();
|
|
token.remove();
|
|
updatePatternWidgetFromTokens();
|
|
};
|
|
token.appendChild(removeBtn);
|
|
|
|
token.addEventListener("dragstart", (e) => {
|
|
e.dataTransfer.setData('text/plain', id);
|
|
setTimeout(() => token.classList.add("dragging"), 0);
|
|
});
|
|
token.addEventListener("dragend", () => {
|
|
token.classList.remove("dragging");
|
|
});
|
|
return token;
|
|
};
|
|
|
|
const updatePatternWidgetFromTokens = () => {
|
|
const tokens = Array.from(dropArea.querySelectorAll(".advsave-token"));
|
|
const patternArray = tokens.map(t => {
|
|
const id = t.dataset.id;
|
|
return id.startsWith('_custom_') ? id.substring(8) : id;
|
|
});
|
|
const newValue = JSON.stringify(patternArray, null, 2);
|
|
if(patternWidget.value !== newValue) {
|
|
patternWidget.value = newValue;
|
|
}
|
|
};
|
|
|
|
Object.entries({ ...AVAILABLE_ITEMS, "_text": "Text" }).forEach(([id, text]) => {
|
|
const item = document.createElement("button");
|
|
item.className = "advsave-item";
|
|
item.textContent = text;
|
|
|
|
item.addEventListener("mousedown", (e) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
let newToken;
|
|
if (id === '_text') {
|
|
const invalidChars = '\\/:*?"<>|';
|
|
const invalidCharsMsg = '사용 불가: ' + invalidChars.split('').join(' ');
|
|
const customText = prompt(`텍스트를 입력하세요 (예: '_', '-', 'portrait'):\n\n${invalidCharsMsg}`, "_");
|
|
|
|
if (customText) {
|
|
const hasInvalidChars = customText.split('').some(char => invalidChars.includes(char));
|
|
if (hasInvalidChars) {
|
|
alert(`파일 이름에 사용할 수 없는 문자가 포함되어 있습니다. 다음 문자는 사용하지 마세요: ${invalidChars.split('').join(' ')}`);
|
|
} else {
|
|
newToken = createToken(`_custom_${customText}`, customText);
|
|
}
|
|
}
|
|
} else {
|
|
newToken = createToken(id, text);
|
|
}
|
|
|
|
if (newToken) {
|
|
dropArea.appendChild(newToken);
|
|
updatePatternWidgetFromTokens();
|
|
}
|
|
});
|
|
availableContainer.appendChild(item);
|
|
});
|
|
|
|
const getDropTarget = (container, clientY) => {
|
|
const children = [...container.children].filter(child => !child.classList.contains("dragging"));
|
|
for (const child of children) {
|
|
const box = child.getBoundingClientRect();
|
|
if (clientY < box.top + box.height / 2) return child;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
dropArea.addEventListener("dragover", (e) => {
|
|
e.preventDefault();
|
|
dropArea.classList.add("drag-over");
|
|
});
|
|
dropArea.addEventListener("dragleave", () => {
|
|
dropArea.classList.remove("drag-over");
|
|
});
|
|
|
|
dropArea.addEventListener("drop", (e) => {
|
|
e.preventDefault();
|
|
dropArea.classList.remove("drag-over");
|
|
|
|
const draggingToken = dropArea.querySelector('.dragging');
|
|
if (!draggingToken) return;
|
|
|
|
const dropTarget = getDropTarget(dropArea, e.clientY);
|
|
if (dropTarget) {
|
|
dropArea.insertBefore(draggingToken, dropTarget);
|
|
} else {
|
|
dropArea.appendChild(draggingToken);
|
|
}
|
|
updatePatternWidgetFromTokens();
|
|
});
|
|
|
|
const availableWidget = document.createElement("div");
|
|
availableWidget.className = "advsave-widget";
|
|
availableWidget.innerHTML = `<label class="advsave-label">Available Items (click to add)</label>`;
|
|
availableWidget.appendChild(availableContainer);
|
|
widgetWrapper.appendChild(availableWidget);
|
|
|
|
const dropAreaWidget = document.createElement("div");
|
|
dropAreaWidget.className = "advsave-widget";
|
|
dropAreaWidget.innerHTML = `<label class="advsave-label">Filename Structure (drag to reorder)</label>`;
|
|
dropAreaWidget.appendChild(dropArea);
|
|
widgetWrapper.appendChild(dropAreaWidget);
|
|
|
|
const domWidget = this.addDOMWidget("dnd_filename_pattern", "dnd", widgetWrapper, {
|
|
getValue() {
|
|
return patternWidget.value;
|
|
},
|
|
setValue(v) {
|
|
if (patternWidget.value !== v) {
|
|
patternWidget.value = v;
|
|
}
|
|
dropArea.innerHTML = "";
|
|
try {
|
|
const pattern = JSON.parse(v || '[]');
|
|
pattern.forEach(id => {
|
|
let text = AVAILABLE_ITEMS[id];
|
|
let tokenId = id;
|
|
if (!text) { text = id; tokenId = `_custom_${id}`; }
|
|
dropArea.appendChild(createToken(tokenId, text));
|
|
});
|
|
} catch (e) { console.error("Failed to parse pattern:", v, e); }
|
|
}
|
|
});
|
|
|
|
domWidget.value = patternWidget.value;
|
|
};
|
|
|
|
const onConfigure = nodeType.prototype.onConfigure;
|
|
nodeType.prototype.onConfigure = function (info) {
|
|
onConfigure?.apply(this, arguments);
|
|
|
|
if (info.widgets_values) {
|
|
const directoryIndex = this.widgets.findIndex(w => w.name === "directory");
|
|
if (directoryIndex > -1 && info.widgets_values.length > directoryIndex) {
|
|
const directoryWidget = this.widgets[directoryIndex];
|
|
directoryWidget.value = info.widgets_values[directoryIndex];
|
|
}
|
|
}
|
|
|
|
const domWidget = this.widgets.find(w => w.name === "dnd_filename_pattern");
|
|
if (!domWidget) return;
|
|
|
|
let valueToRestore = null;
|
|
const patternIndex = this.widgets.findIndex(w => w.name === "filename_pattern");
|
|
|
|
if (info.widgets_values && patternIndex !== -1 && info.widgets_values.length > patternIndex) {
|
|
valueToRestore = info.widgets_values[patternIndex];
|
|
}
|
|
|
|
if (valueToRestore !== null) {
|
|
domWidget.value = valueToRestore;
|
|
}
|
|
};
|
|
|
|
if (!document.getElementById("my-nodes-advanced-save-style")) {
|
|
const styleSheet = document.createElement("style");
|
|
styleSheet.id = "my-nodes-advanced-save-style";
|
|
styleSheet.innerText = `
|
|
.advsave-widget { margin: 5px 0; }
|
|
.advsave-label { font-size: 0.8em; color: var(--input-text); margin-bottom: 2px; display: block; }
|
|
.advsave-container { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; border: 1px solid var(--input-border); border-radius: 4px; background-color: var(--comfy-input-bg); min-width: 0; }
|
|
.advsave-item { cursor: pointer; }
|
|
.advsave-item, .advsave-token { padding: 4px 8px; border-radius: 12px; font-size: 0.9em; background-color: var(--s-toolbar-bg); color: var(--s-toolbar-text); border: 1px solid var(--s-toolbar-border-color); user-select: none; white-space: nowrap; }
|
|
button.advsave-item { border: 1px solid var(--s-toolbar-border-color); background: var(--s-toolbar-bg); font-family: inherit; text-align: inherit; }
|
|
button.advsave-item:hover { filter: brightness(1.2); }
|
|
.advsave-token { cursor: grab; position: relative; background-color: #3a5775; }
|
|
.advsave-token.custom-text { background-color: #4a75a1; }
|
|
.advsave-token.dragging { opacity: 0.5; }
|
|
.advsave-token .advsave-remove-btn { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background-color: #ff4444; color: white; border: 1px solid white; font-size: 10px; text-align: center; line-height: 14px; cursor: pointer; font-family: monospace; }
|
|
.advsave-drop-area { min-height: 32px; flex-basis: 100%; }
|
|
.drag-over { background-color: var(--descrip-text); }
|
|
`;
|
|
document.head.appendChild(styleSheet);
|
|
}
|
|
}
|
|
},
|
|
});
|