135 lines
4.8 KiB
JavaScript
135 lines
4.8 KiB
JavaScript
import { app } from "../../scripts/app.js";
|
|
import { api } from "../../scripts/api.js";
|
|
import { MultiButtonWidget } from "./multi_button_widget.js";
|
|
|
|
async function loadLatestImage(node, folder_type) {
|
|
// 获取指定目录中的最新图片
|
|
const res = await api.fetchApi(`/lg/get/latest_image?type=${folder_type}`, { cache: "no-store" });
|
|
if (res.status == 200) {
|
|
const item = await res.json();
|
|
if (item && item.filename) {
|
|
const imageWidget = node.widgets.find(w => w.name === 'image');
|
|
if (!imageWidget) return false;
|
|
|
|
// 保存文件信息的JSON字符串到节点属性
|
|
const fileInfo = JSON.stringify({
|
|
filename: item.filename,
|
|
subfolder: item.subfolder || '',
|
|
type: item.type || 'temp'
|
|
});
|
|
node._latestFileInfo = fileInfo;
|
|
|
|
// 设置 widget 值为 ComfyUI 期望的格式: "filename [type]"
|
|
const displayValue = `${item.filename} [${item.type}]`;
|
|
imageWidget.value = displayValue;
|
|
|
|
// 加载并显示图像
|
|
const image = new Image();
|
|
image.src = api.apiURL(`/view?filename=${item.filename}&type=${item.type}&subfolder=${item.subfolder || ''}`);
|
|
node._imgs = [image];
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
app.registerExtension({
|
|
name: "Comfy.LG.CachePreview",
|
|
|
|
nodeCreated(node, app) {
|
|
if (node.comfyClass !== "CachePreviewBridge") return;
|
|
|
|
let imageWidget = node.widgets.find(w => w.name === 'image');
|
|
if (!imageWidget) return;
|
|
|
|
// 存储当前文件信息
|
|
node._latestFileInfo = null;
|
|
|
|
// 重写序列化方法，确保执行时使用最新值
|
|
imageWidget.serializeValue = function(nodeId, widgetIndex) {
|
|
if (node._latestFileInfo) {
|
|
return node._latestFileInfo;
|
|
}
|
|
return this.value || "";
|
|
};
|
|
|
|
node._imgs = [new Image()];
|
|
node.imageIndex = 0;
|
|
|
|
// 使用多按钮组件创建刷新按钮
|
|
const refreshWidget = node.addCustomWidget(MultiButtonWidget(app, "Refresh From", {
|
|
labelWidth: 80,
|
|
buttonSpacing: 4
|
|
}, [
|
|
{
|
|
text: "Temp",
|
|
callback: () => {
|
|
loadLatestImage(node, "temp").then(success => {
|
|
if (success) {
|
|
app.graph.setDirtyCanvas(true);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
{
|
|
text: "Output",
|
|
callback: () => {
|
|
loadLatestImage(node, "output").then(success => {
|
|
if (success) {
|
|
app.graph.setDirtyCanvas(true);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
]));
|
|
refreshWidget.serialize = false;
|
|
|
|
// 重写 imgs 属性，处理来自 MaskEditor 的粘贴
|
|
Object.defineProperty(node, 'imgs', {
|
|
set(v) {
|
|
if (!v || v.length === 0) return;
|
|
|
|
const stackTrace = new Error().stack;
|
|
|
|
// 来自 MaskEditor 的粘贴
|
|
if (stackTrace.includes('pasteFromClipspace')) {
|
|
if (v[0] && v[0].src) {
|
|
const urlParts = v[0].src.split("?");
|
|
if (urlParts.length > 1) {
|
|
const sp = new URLSearchParams(urlParts[1]);
|
|
const filename = sp.get('filename');
|
|
const type = sp.get('type') || 'input';
|
|
const subfolder = sp.get('subfolder') || '';
|
|
|
|
if (filename) {
|
|
// 保存文件信息的JSON字符串
|
|
const fileInfo = JSON.stringify({
|
|
filename: filename,
|
|
subfolder: subfolder,
|
|
type: type
|
|
});
|
|
|
|
// 保存到节点属性，序列化时会使用
|
|
node._latestFileInfo = fileInfo;
|
|
imageWidget.value = fileInfo;
|
|
|
|
// 直接使用传入的图像
|
|
node._imgs = v;
|
|
app.graph.setDirtyCanvas(true);
|
|
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 其他情况直接设置
|
|
node._imgs = v;
|
|
},
|
|
get() {
|
|
return node._imgs;
|
|
}
|
|
});
|
|
}
|
|
});
|