chris.dumas/WhatDreamsCost-Dumas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Delete js/multi_image_loader.js

Browse Source
This commit is contained in:
CGlide
2026-06-23 03:14:53 +02:00
committed by GitHub
parent d12e1501b7
commit 6542586cdc
1 changed files with 0 additions and 688 deletions
Download Patch File Download Diff File Expand all files Collapse all files

688
js/multi_image_loader.js
View File

@@ -1,688 +0,0 @@
import { app } from "../../scripts/app.js";
import { api } from "../../scripts/api.js";
app.registerExtension({
name: "Comfy.MultiImageLoader",
async nodeCreated(node) {
if (node.comfyClass !== "MultiImageLoader") return;
// Helper to detect if we are in the new Nodes 2.0 / V3 Web Component frontend
let v3NodeElement = null;
function checkIsV3() {
if (v3NodeElement) return true;
let el = container.parentElement;
while (el) {
if ((el.tagName && el.tagName.toLowerCase().includes('comfy-node')) ||
(el.classList && el.classList.contains('comfy-node'))) {
v3NodeElement = el;
return true;
}
el = el.parentElement || (el.getRootNode ? el.getRootNode().host : null);
}
return false;
}
// --- 1. UI Setup: Main Container ---
const container = document.createElement("div");
container.style.cssText = `
width: 100%;
min-height: 250px;
min-width: 100px; /* Reduced from 400px to allow thin resizing in V3 */
background: #222222;
border: 1px solid #353545;
border-radius: 4px;
margin-top: 5px;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: auto;
overflow: hidden;
`;
// Top Bar for Actions
const topBar = document.createElement("div");
// Added flex-wrap: wrap so buttons stack if the node gets extremely thin
topBar.style.cssText = "display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 100%; gap: 8px;";
const uploadBtn = document.createElement("button");
uploadBtn.innerText = "Upload Images";
uploadBtn.style.cssText = `
background: #3a3f4b; color: white; border: 1px solid #5a5f6b;
padding: 3px 8px; border-radius: 3px; cursor: pointer; font-size: 10px;
`;
const removeAllBtn = document.createElement("button");
removeAllBtn.innerText = "Remove All";
removeAllBtn.style.cssText = `
background: #cc2222; color: white; border: 1px solid #aa1111;
padding: 3px 8px; border-radius: 3px; cursor: pointer; font-size: 10px;
transition: background 0.2s;
`;
removeAllBtn.onmouseenter = () => { removeAllBtn.style.background = "#ff3333"; };
removeAllBtn.onmouseleave = () => { removeAllBtn.style.background = "#cc2222"; };
removeAllBtn.onclick = () => {
setWidgetValue([], false);
};
topBar.appendChild(uploadBtn);
topBar.appendChild(removeAllBtn);
container.appendChild(topBar);
const gridWrapper = document.createElement("div");
gridWrapper.style.cssText = `
position: relative;
flex-grow: 1;
width: 100%;
min-height: 0;
`;
const grid = document.createElement("div");
grid.style.cssText = `
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: grid;
gap: 8px;
justify-content: center;
align-content: center;
`;
gridWrapper.appendChild(grid);
container.appendChild(gridWrapper);
const fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.multiple = true;
fileInput.accept = "image/*";
fileInput.style.display = "none";
container.appendChild(fileInput);
// Add the Widget to the Node
const galleryWidget = node.addDOMWidget("Gallery", "html_gallery", container, { serialize: false });
galleryWidget.computeSize = function() {
const galleryY = this.last_y || 40;
const minOutputsHeight = (node.outputs ? node.outputs.length : 1) * 20;
const requiredGalleryHeight = Math.max(250, minOutputsHeight + 40 - galleryY);
return [150, requiredGalleryHeight]; // Changed minimum theoretical widget width
};
// --- SAFELY HIDE THE IMAGE_PATHS WIDGET ---
const pathsWidget = node.widgets.find(w => w.name === "image_paths");
if (pathsWidget) {
// Forcefully lock the hidden state against V3's reactive redraws
Object.defineProperty(pathsWidget, 'hidden', {
get: () => true,
set: () => {} // Ignore attempts by V3 to unhide it
});
Object.defineProperty(pathsWidget, 'type', {
get: () => "hidden",
set: () => {} // Ignore attempts by V3 to reset the type
});
pathsWidget.computeSize = function() {
return [0, 0];
};
// Catch for V3 delayed DOM rendering to ensure no stubborn inputs appear
const hideInterval = setInterval(() => {
if (pathsWidget.element) {
pathsWidget.element.style.display = "none";
}
}, 50);
setTimeout(() => clearInterval(hideInterval), 1000);
}
const oldCallback = pathsWidget?.callback;
function setWidgetValue(newPathsArray, isRearranging = false) {
if (!pathsWidget) return;
const val = newPathsArray.join("\n");
const tempCallback = pathsWidget.callback;
pathsWidget.callback = null;
pathsWidget.value = val;
if (oldCallback) oldCallback.apply(pathsWidget, [val]);
pathsWidget.callback = tempCallback;
refreshGallery(isRearranging);
}
// --- 2. Logic: Output Syncing & Dynamic Packing ---
function syncOutputs(count) {
if (!node.outputs) return;
let changed = false;
const targetTotal = count + 1;
const wasFresh = node.outputs.length >= 50;
while (node.outputs.length > targetTotal && node.outputs.length > 1) {
node.removeOutput(node.outputs.length - 1);
changed = true;
}
for (let i = node.outputs.length; i < targetTotal; i++) {
node.addOutput(`image_${i}`, "IMAGE");
changed = true;
}
if (changed || wasFresh) {
updateLayout(wasFresh);
}
}
function notifyConnectedNodes(imageCount) {
if (!node.outputs) return;
for (const output of node.outputs) {
if (!output.links) continue;
for (const linkId of output.links) {
const link = app.graph.links[linkId];
if (!link) continue;
const targetNode = app.graph.getNodeById(link.target_id);
if (targetNode && typeof targetNode._syncImageCount === "function") {
targetNode._syncImageCount(imageCount);
}
}
}
}
function optimizeGrid(gridW, gridH) {
const paths = (pathsWidget?.value || "").split(/\n|,/).map(s => s.trim()).filter(s => s);
const N = paths.length;
if (N === 0) {
grid.style.gridTemplateColumns = 'repeat(auto-fit, minmax(75px, 1fr))';
grid.style.gridAutoRows = 'max-content';
return;
}
if (gridW <= 0 || gridH <= 0) return;
let bestS = 0;
let bestCols = 1;
for (let c = 1; c <= N; c++) {
const r = Math.ceil(N / c);
// Math.max guarantees we don't end up with negative max width in ultra-thin layouts
const maxW = Math.max(5, (gridW - (c - 1) * 8) / c);
const maxH = Math.max(5, (gridH - (r - 1) * 8) / r);
const size = Math.min(maxW, maxH);
// By using >= instead of strict > (with a tiny 0.1 buffer for float precision),
// if multiple column counts yield the exact same optimal cell size
// (which happens when height is the bottleneck), we aggressively pack
// more items horizontally onto the row to fill empty space.
if (size >= bestS - 0.1) {
bestS = size;
bestCols = c;
}
}
// Allow grid cells to shrink down to 10px instead of 15 to prevent horizontal overflow in V3
bestS = Math.max(10, Math.floor(bestS));
grid.style.gridTemplateColumns = `repeat(${bestCols}, ${bestS}px)`;
grid.style.gridAutoRows = `${bestS}px`;
}
let v3EventsAttached = false;
function enforceV3CSS() {
const isV3 = checkIsV3();
if (isV3 && v3NodeElement) {
const paddingBottom = 15;
const galleryY = galleryWidget.last_y || 40;
const minOutputsHeight = (node.outputs ? node.outputs.length : 1) * 20;
const absoluteMinHeight = Math.max(galleryY + 250 + paddingBottom, minOutputsHeight + 40);
// For Nodes 2.0 (V3), we remove the min-width constraint completely.
// We leave min-height so outputs don't bleed out vertically.
v3NodeElement.style.removeProperty('min-width');
v3NodeElement.style.setProperty('min-height', absoluteMinHeight + 'px', 'important');
// Attach drag & drop to the entire V3 Web Component
if (!v3EventsAttached) {
v3EventsAttached = true;
v3NodeElement.addEventListener("dragover", (e) => {
e.preventDefault();
});
v3NodeElement.addEventListener("drop", (e) => {
if (e.dataTransfer && e.dataTransfer.files) {
const files = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image/'));
if (files.length > 0) {
e.preventDefault();
e.stopPropagation();
handleFiles(files);
}
}
});
}
}
}
let isLayouting = false;
function updateLayout(forceShrink = false) {
if (isLayouting) return;
isLayouting = true;
const isV3 = checkIsV3();
const minW = isV3 ? 100 : 200; // 100 in V3, 440 in V1
const paddingBottom = isV3 ? 15 : 25; // Apply extra 20px pad on V1
const galleryY = galleryWidget.last_y || 40;
const minOutputsHeight = (node.outputs ? node.outputs.length : 1) * 20;
const absoluteMinHeight = Math.max(galleryY + 250 + paddingBottom, minOutputsHeight + 40);
node.min_size = [minW, absoluteMinHeight];
enforceV3CSS();
let targetW = Math.max(node.size[0], minW);
let targetH = forceShrink ? absoluteMinHeight : node.size[1];
targetH = Math.max(targetH, absoluteMinHeight);
if (node.size[0] !== targetW || node.size[1] !== targetH) {
node.setSize([targetW, targetH]);
app.graph.setDirtyCanvas(true, true);
}
const availableGalleryHeight = targetH - galleryY - paddingBottom;
container.style.height = availableGalleryHeight + "px";
isLayouting = false;
}
// --- OVERRIDE LOGIC FOR RESIZING ---
const origOnResize = node.onResize;
node.onResize = function(size) {
const isV3 = checkIsV3();
const minW = isV3 ? 100 : 220; // Adjust limits based on frontend
const paddingBottom = isV3 ? 15 : 25; // Apply extra 20px pad on V1
const galleryY = galleryWidget.last_y || 40;
const minOutputsHeight = (this.outputs ? this.outputs.length : 1) * 20;
const absoluteMinHeight = Math.max(galleryY + 250 + paddingBottom, minOutputsHeight + 40);
size[0] = Math.max(size[0], minW);
size[1] = Math.max(size[1], absoluteMinHeight);
if (origOnResize) origOnResize.call(this, size);
if (isLayouting) return;
node.min_size = [minW, absoluteMinHeight];
enforceV3CSS();
const availableGalleryHeight = size[1] - galleryY - paddingBottom;
container.style.height = availableGalleryHeight + "px";
};
const origComputeSize = node.computeSize;
node.computeSize = function(out) {
const isV3 = checkIsV3();
const minW = isV3 ? 100 : 220;
const paddingBottom = isV3 ? 15 : 25;
let res = origComputeSize ? origComputeSize.apply(this, arguments) : [minW, 250];
const galleryY = galleryWidget.last_y || 40;
const minOutputsHeight = (this.outputs ? this.outputs.length : 1) * 20;
const absoluteMinHeight = Math.max(galleryY + 250 + paddingBottom, minOutputsHeight + 40);
this.min_size = [minW, absoluteMinHeight];
res[0] = Math.max(res[0], minW);
res[1] = Math.max(res[1], absoluteMinHeight);
enforceV3CSS();
return res;
};
const origSetSize = node.setSize;
node.setSize = function(size) {
const isV3 = checkIsV3();
const minW = isV3 ? 100 : 220;
const paddingBottom = isV3 ? 15 : 25;
const galleryY = galleryWidget.last_y || 40;
const minOutputsHeight = (this.outputs ? this.outputs.length : 1) * 20;
const absoluteMinHeight = Math.max(galleryY + 250 + paddingBottom, minOutputsHeight + 40);
size[0] = Math.max(size[0], minW);
size[1] = Math.max(size[1], absoluteMinHeight);
if (origSetSize) {
origSetSize.call(this, size);
} else {
this.size = size;
}
enforceV3CSS();
};
let lastObservedWidth = 0;
let lastObservedHeight = 0;
const resizeObserver = new ResizeObserver((entries) => {
enforceV3CSS();
for (const entry of entries) {
const w = Math.round(entry.contentRect.width);
const h = Math.round(entry.contentRect.height);
if (Math.abs(w - lastObservedWidth) > 1 || Math.abs(h - lastObservedHeight) > 1) {
lastObservedWidth = w;
lastObservedHeight = h;
if (h > 0) {
optimizeGrid(w, h);
}
}
}
});
resizeObserver.observe(gridWrapper);
// --- 3. Logic: Gallery Rendering ---
let draggedNode = null;
let lastSwapX = 0;
let lastSwapY = 0;
let lastSwapTime = 0;
function refreshGallery(isRearranging = false) {
grid.innerHTML = "";
const paths = (pathsWidget?.value || "").split(/\n|,/).map(s => s.trim()).filter(s => s);
if (!isRearranging) {
syncOutputs(paths.length);
}
node._imageCount = paths.length;
notifyConnectedNodes(paths.length);
paths.forEach((path, index) => {
const item = document.createElement("div");
item.dataset.path = path;
item.draggable = true;
item.style.cssText = `
position: relative;
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
background: #000000;
border-radius: 4px;
border: 1px solid #444;
overflow: hidden;
cursor: grab;
display: flex;
align-items: center;
justify-content: center;
`;
const img = document.createElement("img");
img.src = `/api/view?filename=${encodeURIComponent(path)}&type=input`;
// Allow pointer-events so context menu interacts directly with the image
img.style.cssText = "max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: auto; display: block;";
img.draggable = false; // Prevent native browser ghost dragging on the image itself
const del = document.createElement("div");
del.style.cssText = `
position: absolute; top: 0; right: 0;
background: #cc2222; color: white;
width: 18px; height: 18px;
display: flex; align-items: center; justify-content: center;
font-size: 14px; cursor: pointer; z-index: 10;
font-family: Arial, sans-serif; font-weight: bold;
line-height: 1; border-bottom-left-radius: 4px;
transition: background 0.2s;
`;
del.innerHTML = `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L9 9M9 1L1 9" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>`;
del.onmouseenter = () => { del.style.background = "#ff3333"; };
del.onmouseleave = () => { del.style.background = "#cc2222"; };
del.onclick = (e) => {
e.stopPropagation();
const newPaths = paths.filter((_, i) => i !== index);
setWidgetValue(newPaths, false);
};
const numBadge = document.createElement("div");
numBadge.style.cssText = `
position: absolute; bottom: 0; left: 0;
background: rgba(0, 0, 0, 0.75); color: #fff;
padding: 2px 6px; font-size: 11px; font-family: sans-serif;
font-weight: bold; border-top-right-radius: 4px; pointer-events: none;
z-index: 5;
`;
numBadge.innerText = (index + 1).toString();
// Prevent LiteGraph context menu and instead show standard browser context menu (Copy, Save, Open)
item.addEventListener("contextmenu", (e) => {
e.stopPropagation();
});
item.ondragstart = (e) => {
draggedNode = item;
e.dataTransfer.setData('text/plain', path);
e.dataTransfer.effectAllowed = "move";
setTimeout(() => {
if (draggedNode === item) {
// Style as an empty dashed placeholder
item.style.background = "transparent";
item.style.border = "2px dashed #666";
// Hide the visual children (image, delete button, badge)
Array.from(item.children).forEach(c => c.style.opacity = "0");
}
}, 0);
};
item.ondragend = () => {
if (draggedNode) {
// Restore original appearance
draggedNode.style.background = "#000000";
draggedNode.style.border = "1px solid #444";
Array.from(draggedNode.children).forEach(c => c.style.opacity = "1");
}
draggedNode = null;
const newPaths = Array.from(grid.children).map(n => n.dataset.path);
const currentVal = (pathsWidget?.value || "").trim();
if (newPaths.join("\n") !== currentVal) {
setWidgetValue(newPaths, true);
}
};
item.ondragover = (e) => {
e.preventDefault();
e.stopPropagation();
if (!draggedNode || draggedNode === item) return;
const distMoved = Math.hypot(e.clientX - lastSwapX, e.clientY - lastSwapY);
if (Date.now() - lastSwapTime < 50 && distMoved < 5) {
return;
}
const itemRect = item.getBoundingClientRect();
const bufferX = itemRect.width * 0.25;
const bufferY = itemRect.height * 0.25;
if (e.clientX < itemRect.left + bufferX || e.clientX > itemRect.right - bufferX ||
e.clientY < itemRect.top + bufferY || e.clientY > itemRect.bottom - bufferY) {
return;
}
const items = Array.from(grid.children);
const draggedIdx = items.indexOf(draggedNode);
const targetIdx = items.indexOf(item);
// Instantly snap the placeholder to its new position, moving items aside
if (draggedIdx < targetIdx) {
grid.insertBefore(draggedNode, item.nextSibling);
} else {
grid.insertBefore(draggedNode, item);
}
lastSwapX = e.clientX;
lastSwapY = e.clientY;
lastSwapTime = Date.now();
};
item.ondrop = (e) => {
e.preventDefault();
e.stopPropagation();
};
item.appendChild(img);
item.appendChild(del);
item.appendChild(numBadge);
grid.appendChild(item);
});
if (!isRearranging) {
requestAnimationFrame(() => {
updateLayout();
if (gridWrapper.offsetWidth > 0) optimizeGrid(gridWrapper.offsetWidth, gridWrapper.offsetHeight);
});
}
}
// --- 4. Logic: File Handling ---
async function handleFiles(files) {
const uploaded = [];
for (const file of files) {
const body = new FormData();
body.append("image", file);
try {
const resp = await api.fetchApi("/upload/image", { method: "POST", body });
if (resp.status === 200) {
const data = await resp.json();
let name = data.name;
if (data.subfolder) name = data.subfolder + "/" + name;
uploaded.push(name);
}
} catch (e) { console.error("Upload error", e); }
}
if (uploaded.length > 0) {
const current = (pathsWidget?.value || "").trim();
const allPaths = current ? current.split('\n').concat(uploaded) : uploaded;
setWidgetValue(allPaths, false);
}
}
// Apply drag & drop to LiteGraph node container bounds (V1)
const origOnDragDrop = node.onDragDrop;
node.onDragDrop = function(e) {
let handled = false;
if (e.dataTransfer && e.dataTransfer.files) {
const files = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image/'));
if (files.length > 0) {
e.preventDefault();
handleFiles(files);
handled = true;
}
}
if (!handled && origOnDragDrop) {
return origOnDragDrop.apply(this, arguments);
}
return handled;
};
const origOnDragOver = node.onDragOver;
node.onDragOver = function(e) {
if (e.dataTransfer && e.dataTransfer.items) {
const hasImage = Array.from(e.dataTransfer.items).some(f => f.kind === 'file' && f.type.startsWith('image/'));
if (hasImage) {
e.preventDefault();
return true;
}
}
if (origOnDragOver) {
return origOnDragOver.apply(this, arguments);
}
return false;
};
uploadBtn.onclick = () => fileInput.click();
fileInput.onchange = (e) => handleFiles(e.target.files);
container.ondragover = (e) => {
e.preventDefault();
e.stopPropagation();
container.style.borderColor = "#4CAF50";
};
container.ondragleave = (e) => {
e.preventDefault();
e.stopPropagation();
container.style.borderColor = "#353545";
};
container.ondrop = (e) => {
e.preventDefault();
e.stopPropagation();
container.style.borderColor = "#353545";
if (e.dataTransfer.files.length > 0) handleFiles(e.dataTransfer.files);
};
// --- 5. Logic: Paste Handling ---
const pasteHandler = (e) => {
if (app.canvas.selected_nodes && app.canvas.selected_nodes[node.id]) {
const items = e.clipboardData?.items;
if (!items) return;
const files = [];
for (let i = 0; i < items.length; i++) {
if (items[i].kind === 'file' && items[i].type.startsWith('image/')) {
files.push(items[i].getAsFile());
}
}
if (files.length > 0) {
e.preventDefault();
e.stopImmediatePropagation();
handleFiles(files);
}
}
};
document.addEventListener("paste", pasteHandler, { capture: true });
const origOnRemoved = node.onRemoved;
node.onRemoved = function() {
document.removeEventListener("paste", pasteHandler, { capture: true });
resizeObserver.disconnect();
if (origOnRemoved) origOnRemoved.apply(this, arguments);
};
if (pathsWidget) {
pathsWidget.callback = (v) => {
if (oldCallback) oldCallback.apply(pathsWidget, [v]);
refreshGallery();
};
}
// Run immediately to trim blank outputs before LiteGraph does its first layout calculations
refreshGallery();
// Enforce the tightest possible packing explicitly upon being dropped into the graph (V1 specifically)
const origOnAdded = node.onAdded;
node.onAdded = function() {
if (origOnAdded) origOnAdded.apply(this, arguments);
const isV3 = checkIsV3();
if (!isV3) {
requestAnimationFrame(() => {
const galleryY = galleryWidget.last_y || 40;
const minOutputsHeight = (this.outputs ? this.outputs.length : 1) * 20;
const paddingBottom = 25; // Apply extra 20px pad on V1
const absoluteMinHeight = Math.max(galleryY + 250 + paddingBottom, minOutputsHeight + 40);
// Force the node to snap to its absolute minimum size on initial drop
if (this.size && this.size[1] > absoluteMinHeight + 5) {
this.setSize([this.size[0], absoluteMinHeight]);
if (app.graph) app.graph.setDirtyCanvas(true, true);
}
});
}
};
setTimeout(() => refreshGallery(), 100);
}
});