Skip to content

GitLab

Commit 666337bf authored by comfyanonymous's avatar comfyanonymous
Browse files

Merge branch 'batchimagepreview' of https://github.com/pythongosssss/ComfyUI... 

Merge branch 'batchimagepreview' of https://github.com/pythongosssss/ComfyUI into pythongosssss-batchimagepreview
parents 9f4214e5 4329681c
Hide whitespace changes
Inline Side-by-side
Showing with 167 additions and 37 deletions
webshit/index.html
View file @ 666337bf
...@@ -271,12 +271,20 @@ function onObjectInfo(json) { ...@@ -271,12 +271,20 @@ function onObjectInfo(json) {
this.addInput(x, type); this.addInput(x, type);
} }
MyNode.prototype.getExtraMenuOptions = function(graph, options) { MyNode.prototype.getExtraMenuOptions = function(canvas, options) {
if(this.img) { if(this.imgs) {
options.unshift({ let img;
content: "Open Image", if(this.imageIndex != null) {
callback: () => window.open(this.img.src, "_blank") img = this.imgs[this.imageIndex];
}); } else if(this.overIndex != null) {
img = this.imgs[this.overIndex];
}
if(img) {
options.unshift({
content: "Open Image",
callback: () => window.open(img.src, "_blank")
});
}
} }
} }
...@@ -284,45 +292,167 @@ function onObjectInfo(json) { ...@@ -284,45 +292,167 @@ function onObjectInfo(json) {
if(!this.flags.collapsed) { if(!this.flags.collapsed) {
const output = nodeOutputs[this.id + ""]; const output = nodeOutputs[this.id + ""];
if(output && output.images) { if(output && output.images) {
const src = output.images[0]; if(this.images !== output.images) {
if(this.src !== src) { this.images = output.images;
this.img = null; this.imgs = null;
this.src = src; this.imageIndex = null;
const img = new Image(); Promise.all(output.images.map(src => {
img.src = "/view/" + src; return new Promise(r => {
img.onload = () => { const img = new Image();
graph.setDirtyCanvas(true); img.onload = () => r(img);
this.img = img; img.onerror = () => r(null);
if(this.size[1] < 100) { img.src = "/view/" + src;
this.size[1] = 250; });
})).then(imgs => {
if(this.images === output.images) {
this.imgs = imgs.filter(Boolean);
if(this.size[1] < 100) {
this.size[1] = 250;
}
graph.setDirtyCanvas(true);
} }
} });
} }
if(this.img) {
let w = this.img.naturalWidth; if(this.imgs) {
let h = this.img.naturalHeight; const canvas = graph.list_of_graphcanvas[0];
let dw = this.size[0]; const mouse = canvas.graph_mouse;
let dh = this.size[1]; if(!canvas.pointer_is_down && this.pointerDown) {
if(mouse[0] === this.pointerDown.pos[0] && mouse[1] === this.pointerDown.pos[1]) {
if(this.type === "SaveImage") { this.imageIndex = this.pointerDown.index;
dh -= 55; }
this.pointerDown = null;
} }
const scaleX = dw / w; let w = this.imgs[0].naturalWidth;
const scaleY = dh / h; let h = this.imgs[0].naturalHeight;
const scale = Math.min(scaleX, scaleY, 1); let imageIndex = this.imageIndex;
const numImages = this.imgs.length;
if(numImages === 1 && !imageIndex) {
this.imageIndex = imageIndex = 0;
}
let shiftY = this.type === "SaveImage" ? 55 : 0;
let dw = this.size[0];
let dh = this.size[1];
dh -= shiftY;
if(imageIndex == null) {
let best = 0;
let cellWidth;
let cellHeight;
let cols = 0;
let shiftX = 0;
for (let c = 1; c <= numImages; c++) {
const rows = Math.ceil(numImages / c);
const cW = dw / c;
const cH = dh / rows;
const scaleX = cW / w;
const scaleY = cH / h;
const scale = Math.min(scaleX, scaleY, 1);
const imageW = w * scale;
const imageH = h * scale;
const area = imageW * imageH * numImages;
if(area > best) {
best = area;
cellWidth = imageW;
cellHeight = imageH;
cols = c;
shiftX = c * ((cW - imageW) / 2);
}
}
w *= scale; let anyHovered = false;
h *= scale; this.imageRects = [];
for (let i = 0; i < numImages; i++) {
const img = this.imgs[i];
const row = Math.floor(i / cols);
const col = i % cols;
const x = col * cellWidth + shiftX;
const y = row * cellHeight + shiftY;
if(!anyHovered) {
anyHovered = LiteGraph.isInsideRectangle(mouse[0], mouse[1], x + this.pos[0], y + this.pos[1], cellWidth, cellHeight);
if(anyHovered) {
this.overIndex = i;
let value = 110;
if(canvas.pointer_is_down) {
if(!this.pointerDown || this.pointerDown.index !== i) {
this.pointerDown = {index: i, pos: [...mouse]};
}
value = 125;
}
ctx.filter = `contrast(${value}%) brightness(${value}%)`;
canvas.canvas.style.cursor = "pointer";
}
}
this.imageRects.push([x, y, cellWidth, cellHeight]);
ctx.drawImage(img, x, y, cellWidth, cellHeight);
ctx.filter = "none";
}
let x = (dw - w) / 2; if(!anyHovered) {
let y = (dh - h) / 2; this.pointerDown = null;
this.overIndex = null;
}
} else {
// Draw individual
const scaleX = dw / w;
const scaleY = dh / h;
const scale = Math.min(scaleX, scaleY, 1);
w *= scale;
h *= scale;
let x = (dw - w) / 2;
let y = (dh - h) / 2 + shiftY;
ctx.drawImage(this.imgs[imageIndex], x, y, w, h);
const drawButton = (x, y, sz, text) => {
const hovered = LiteGraph.isInsideRectangle(mouse[0], mouse[1], x + this.pos[0], y + this.pos[1], sz, sz);
let fill = "#333";
let textFill = "#fff";
let isClicking = false;
if(hovered) {
canvas.canvas.style.cursor = "pointer";
if(canvas.pointer_is_down) {
fill = "#1e90ff";
isClicking = true;
} else {
fill = "#eee";
textFill = "#000";
}
} else {
this.pointerWasDown = null;
}
ctx.fillStyle = fill;
ctx.beginPath();
ctx.roundRect(x, y, sz, sz, [4]);
ctx.fill();
ctx.fillStyle = textFill;
ctx.font = "12px Arial";
ctx.textAlign = "center";
ctx.fillText(text, x + 15, y + 20);
return isClicking;
}
if(this.type === "SaveImage") { if(numImages > 1) {
y += 55; if(drawButton(x + w - 35, y + h - 35, 30, `${this.imageIndex+1}/${numImages}`)) {
let i = this.imageIndex + 1 >= numImages ? 0 : this.imageIndex + 1;
if(!this.pointerDown || !this.pointerDown.index === i) {
this.pointerDown = {index: i, pos: [...mouse]};
}
}
if(drawButton(x + w - 35, y + 5, 30, `x`)) {
if(!this.pointerDown || !this.pointerDown.index === null) {
this.pointerDown = {index: null, pos: [...mouse]};
}
}
}
} }
ctx.drawImage(this.img, x, y, w, h);
} }
} }
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment