wuyingwen/comfyui
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Allow any node to draw images

Browse Source
This commit is contained in:
pythongosssss 2023-03-06 15:50:29 +00:00
parent 1ee35fd909
commit a8315a6fb8
1 changed files with 122 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

251
web/scripts/app.js
View File

@ -123,157 +123,150 @@ class ComfyApp {
} }
}); });
} }
}
if (this.imgs) { if (this.imgs && this.imgs.length) {
const canvas = graph.list_of_graphcanvas[0]; const canvas = graph.list_of_graphcanvas[0];
const mouse = canvas.graph_mouse; const mouse = canvas.graph_mouse;
if (!canvas.pointer_is_down && this.pointerDown) { if (!canvas.pointer_is_down && this.pointerDown) {
if (mouse[0] === this.pointerDown.pos[0] && mouse[1] === this.pointerDown.pos[1]) { if (mouse[0] === this.pointerDown.pos[0] && mouse[1] === this.pointerDown.pos[1]) {
this.imageIndex = this.pointerDown.index; this.imageIndex = this.pointerDown.index;
}
this.pointerDown = null;
} }
this.pointerDown = null;
}
let w = this.imgs[0].naturalWidth; let w = this.imgs[0].naturalWidth;
let h = this.imgs[0].naturalHeight; let h = this.imgs[0].naturalHeight;
let imageIndex = this.imageIndex; let imageIndex = this.imageIndex;
const numImages = this.imgs.length; const numImages = this.imgs.length;
if (numImages === 1 && !imageIndex) { if (numImages === 1 && !imageIndex) {
this.imageIndex = imageIndex = 0; this.imageIndex = imageIndex = 0;
} }
let shiftY = this.type === "SaveImage" ? 55 : 0; let shiftY = this.type === "SaveImage" ? 55 : 0;
let dw = this.size[0]; let dw = this.size[0];
let dh = this.size[1]; let dh = this.size[1];
dh -= shiftY; dh -= shiftY;
if (imageIndex == null) { if (imageIndex == null) {
let best = 0; let best = 0;
let cellWidth; let cellWidth;
let cellHeight; let cellHeight;
let cols = 0; let cols = 0;
let shiftX = 0; let shiftX = 0;
for (let c = 1; c <= numImages; c++) { for (let c = 1; c <= numImages; c++) {
const rows = Math.ceil(numImages / c); const rows = Math.ceil(numImages / c);
const cW = dw / c; const cW = dw / c;
const cH = dh / rows; const cH = dh / rows;
const scaleX = cW / w; const scaleX = cW / w;
const scaleY = cH / h; 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);
}
}
let anyHovered = false;
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";
}
if (!anyHovered) {
this.pointerDown = null;
this.overIndex = null;
}
} else {
// Draw individual
const scaleX = dw / w;
const scaleY = dh / h;
const scale = Math.min(scaleX, scaleY, 1); const scale = Math.min(scaleX, scaleY, 1);
const imageW = w * scale;
const imageH = h * scale;
const area = imageW * imageH * numImages;
w *= scale; if (area > best) {
h *= scale; best = area;
cellWidth = imageW;
cellHeight = imageH;
cols = c;
shiftX = c * ((cW - imageW) / 2);
}
}
let x = (dw - w) / 2; let anyHovered = false;
let y = (dh - h) / 2 + shiftY; this.imageRects = [];
ctx.drawImage(this.imgs[imageIndex], x, y, w, h); for (let i = 0; i < numImages; i++) {
const img = this.imgs[i];
const drawButton = (x, y, sz, text) => { const row = Math.floor(i / cols);
const hovered = LiteGraph.isInsideRectangle( const col = i % cols;
const x = col * cellWidth + shiftX;
const y = row * cellHeight + shiftY;
if (!anyHovered) {
anyHovered = LiteGraph.isInsideRectangle(
mouse[0], mouse[0],
mouse[1], mouse[1],
x + this.pos[0], x + this.pos[0],
y + this.pos[1], y + this.pos[1],
sz, cellWidth,
sz cellHeight
); );
let fill = "#333"; if (anyHovered) {
let textFill = "#fff"; this.overIndex = i;
let isClicking = false; let value = 110;
if (hovered) {
canvas.canvas.style.cursor = "pointer";
if (canvas.pointer_is_down) { if (canvas.pointer_is_down) {
fill = "#1e90ff"; if (!this.pointerDown || this.pointerDown.index !== i) {
isClicking = true; this.pointerDown = { index: i, pos: [...mouse] };
} else { }
fill = "#eee"; value = 125;
textFill = "#000";
} }
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";
}
if (!anyHovered) {
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 { } else {
this.pointerWasDown = null; fill = "#eee";
textFill = "#000";
} }
} else {
this.pointerWasDown = null;
}
ctx.fillStyle = fill; ctx.fillStyle = fill;
ctx.beginPath(); ctx.beginPath();
ctx.roundRect(x, y, sz, sz, [4]); ctx.roundRect(x, y, sz, sz, [4]);
ctx.fill(); ctx.fill();
ctx.fillStyle = textFill; ctx.fillStyle = textFill;
ctx.font = "12px Arial"; ctx.font = "12px Arial";
ctx.textAlign = "center"; ctx.textAlign = "center";
ctx.fillText(text, x + 15, y + 20); ctx.fillText(text, x + 15, y + 20);
return isClicking; return isClicking;
}; };
if (numImages > 1) { if (numImages > 1) {
if (drawButton(x + w - 35, y + h - 35, 30, `${this.imageIndex + 1}/${numImages}`)) { if (drawButton(x + w - 35, y + h - 35, 30, `${this.imageIndex + 1}/${numImages}`)) {
let i = this.imageIndex + 1 >= numImages ? 0 : this.imageIndex + 1; let i = this.imageIndex + 1 >= numImages ? 0 : this.imageIndex + 1;
if (!this.pointerDown || !this.pointerDown.index === i) { if (!this.pointerDown || !this.pointerDown.index === i) {
this.pointerDown = { index: i, pos: [...mouse] }; this.pointerDown = { index: i, pos: [...mouse] };
}
} }
}
if (drawButton(x + w - 35, y + 5, 30, `x`)) { if (drawButton(x + w - 35, y + 5, 30, `x`)) {
if (!this.pointerDown || !this.pointerDown.index === null) { if (!this.pointerDown || !this.pointerDown.index === null) {
this.pointerDown = { index: null, pos: [...mouse] }; this.pointerDown = { index: null, pos: [...mouse] };
}
} }
} }
} }