Spaces:
Running
on
L40S
Running
on
L40S
import { app } from "../../scripts/app.js"; | |
import { api } from "../../scripts/api.js"; | |
import { SERVICE as CONFIG_SERVICE } from "./services/config_service.js"; | |
import { SERVICE as KEY_EVENT_SERVICE } from "./services/key_events_services.js"; | |
import { fixBadLinks } from "../../rgthree/common/link_fixer.js"; | |
import { injectCss, wait } from "../../rgthree/common/shared_utils.js"; | |
import { replaceNode, waitForCanvas, waitForGraph } from "./utils.js"; | |
import { NodeTypesString, addRgthree, getNodeTypeStrings } from "./constants.js"; | |
import { RgthreeProgressBar } from "../../rgthree/common/progress_bar.js"; | |
import { RgthreeConfigDialog } from "./config.js"; | |
import { iconGear, iconNode, iconReplace, iconStarFilled, logoRgthree, } from "../../rgthree/common/media/svgs.js"; | |
import { createElement, query, queryOne } from "../../rgthree/common/utils_dom.js"; | |
export var LogLevel; | |
(function (LogLevel) { | |
LogLevel[LogLevel["IMPORTANT"] = 1] = "IMPORTANT"; | |
LogLevel[LogLevel["ERROR"] = 2] = "ERROR"; | |
LogLevel[LogLevel["WARN"] = 3] = "WARN"; | |
LogLevel[LogLevel["INFO"] = 4] = "INFO"; | |
LogLevel[LogLevel["DEBUG"] = 5] = "DEBUG"; | |
LogLevel[LogLevel["DEV"] = 6] = "DEV"; | |
})(LogLevel || (LogLevel = {})); | |
const LogLevelKeyToLogLevel = { | |
IMPORTANT: LogLevel.IMPORTANT, | |
ERROR: LogLevel.ERROR, | |
WARN: LogLevel.WARN, | |
INFO: LogLevel.INFO, | |
DEBUG: LogLevel.DEBUG, | |
DEV: LogLevel.DEV, | |
}; | |
const LogLevelToMethod = { | |
[LogLevel.IMPORTANT]: "log", | |
[LogLevel.ERROR]: "error", | |
[LogLevel.WARN]: "warn", | |
[LogLevel.INFO]: "info", | |
[LogLevel.DEBUG]: "log", | |
[LogLevel.DEV]: "log", | |
}; | |
const LogLevelToCSS = { | |
[LogLevel.IMPORTANT]: "font-weight: bold; color: blue;", | |
[LogLevel.ERROR]: "", | |
[LogLevel.WARN]: "", | |
[LogLevel.INFO]: "font-style: italic; color: blue;", | |
[LogLevel.DEBUG]: "font-style: italic; color: #444;", | |
[LogLevel.DEV]: "color: #004b68;", | |
}; | |
let GLOBAL_LOG_LEVEL = LogLevel.ERROR; | |
const apiURL = api.apiURL; | |
api.apiURL = function (route) { | |
if (route.includes("rgthree/")) { | |
return (this.api_base + "/" + route).replace(/\/\//g, "/"); | |
} | |
return apiURL.apply(this, arguments); | |
}; | |
const INVOKE_EXTENSIONS_BLOCKLIST = [ | |
{ | |
name: "Comfy.WidgetInputs", | |
reason: "Major conflict with rgthree-comfy nodes' inputs causing instability and " + | |
"repeated link disconnections.", | |
}, | |
{ | |
name: "efficiency.widgethider", | |
reason: "Overrides value getter before widget getter is prepared. Can be lifted if/when " + | |
"https://github.com/jags111/efficiency-nodes-comfyui/pull/203 is pulled.", | |
}, | |
]; | |
class Logger { | |
log(level, message, ...args) { | |
var _a; | |
const [n, v] = this.logParts(level, message, ...args); | |
(_a = console[n]) === null || _a === void 0 ? void 0 : _a.call(console, ...v); | |
} | |
logParts(level, message, ...args) { | |
if (level <= GLOBAL_LOG_LEVEL) { | |
const css = LogLevelToCSS[level] || ""; | |
if (level === LogLevel.DEV) { | |
message = `🔧 ${message}`; | |
} | |
return [LogLevelToMethod[level], [`%c${message}`, css, ...args]]; | |
} | |
return ["none", []]; | |
} | |
} | |
class LogSession { | |
constructor(name) { | |
this.name = name; | |
this.logger = new Logger(); | |
this.logsCache = {}; | |
} | |
logParts(level, message, ...args) { | |
message = `${this.name || ""}${message ? " " + message : ""}`; | |
return this.logger.logParts(level, message, ...args); | |
} | |
logPartsOnceForTime(level, time, message, ...args) { | |
message = `${this.name || ""}${message ? " " + message : ""}`; | |
const cacheKey = `${level}:${message}`; | |
const cacheEntry = this.logsCache[cacheKey]; | |
const now = +new Date(); | |
if (cacheEntry && cacheEntry.lastShownTime + time > now) { | |
return ["none", []]; | |
} | |
const parts = this.logger.logParts(level, message, ...args); | |
if (console[parts[0]]) { | |
this.logsCache[cacheKey] = this.logsCache[cacheKey] || {}; | |
this.logsCache[cacheKey].lastShownTime = now; | |
} | |
return parts; | |
} | |
debugParts(message, ...args) { | |
return this.logParts(LogLevel.DEBUG, message, ...args); | |
} | |
infoParts(message, ...args) { | |
return this.logParts(LogLevel.INFO, message, ...args); | |
} | |
warnParts(message, ...args) { | |
return this.logParts(LogLevel.WARN, message, ...args); | |
} | |
newSession(name) { | |
return new LogSession(`${this.name}${name}`); | |
} | |
} | |
class Rgthree extends EventTarget { | |
constructor() { | |
var _a, _b, _c, _d; | |
super(); | |
this.api = api; | |
this.settingsDialog = null; | |
this.progressBarEl = null; | |
this.queueNodeIds = null; | |
this.logger = new LogSession("[rgthree]"); | |
this.monitorBadLinksAlerted = false; | |
this.monitorLinkTimeout = null; | |
this.processingQueue = false; | |
this.loadingApiJson = false; | |
this.replacingReroute = null; | |
this.processingMouseDown = false; | |
this.processingMouseUp = false; | |
this.processingMouseMove = false; | |
this.lastAdjustedMouseEvent = null; | |
this.canvasCurrentlyCopyingToClipboard = false; | |
this.canvasCurrentlyCopyingToClipboardWithMultipleNodes = false; | |
this.initialGraphToPromptSerializedWorkflowBecauseComfyUIBrokeStuff = null; | |
this.isMac = !!(((_a = navigator.platform) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase().startsWith("MAC")) || | |
((_c = (_b = navigator.userAgentData) === null || _b === void 0 ? void 0 : _b.platform) === null || _c === void 0 ? void 0 : _c.toLocaleUpperCase().startsWith("MAC"))); | |
const logLevel = (_d = LogLevelKeyToLogLevel[CONFIG_SERVICE.getConfigValue("log_level")]) !== null && _d !== void 0 ? _d : GLOBAL_LOG_LEVEL; | |
this.setLogLevel(logLevel); | |
this.initializeGraphAndCanvasHooks(); | |
this.initializeComfyUIHooks(); | |
this.initializeContextMenu(); | |
this.rgthreeCssPromise = injectCss("extensions/rgthree-comfy/rgthree.css"); | |
this.initializeProgressBar(); | |
CONFIG_SERVICE.addEventListener("config-change", ((e) => { | |
var _a, _b; | |
if ((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.includes("features.progress_bar")) { | |
this.initializeProgressBar(); | |
} | |
})); | |
if (CONFIG_SERVICE.getConfigValue("debug.keys_down.enabled")) { | |
const elDebugKeydowns = createElement("div.rgthree-debug-keydowns", { | |
parent: document.body, | |
}); | |
const updateDebugKeyDown = () => { | |
elDebugKeydowns.innerText = Object.keys(KEY_EVENT_SERVICE.downKeys).join(" "); | |
}; | |
KEY_EVENT_SERVICE.addEventListener("keydown", updateDebugKeyDown); | |
KEY_EVENT_SERVICE.addEventListener("keyup", updateDebugKeyDown); | |
} | |
} | |
async initializeProgressBar() { | |
var _a; | |
if (CONFIG_SERVICE.getConfigValue("features.progress_bar.enabled")) { | |
await this.rgthreeCssPromise; | |
if (!this.progressBarEl) { | |
this.progressBarEl = RgthreeProgressBar.create(); | |
this.progressBarEl.setAttribute("title", "Progress Bar by rgthree. right-click for rgthree menu."); | |
this.progressBarEl.addEventListener("contextmenu", async (e) => { | |
e.stopPropagation(); | |
e.preventDefault(); | |
}); | |
this.progressBarEl.addEventListener("pointerdown", async (e) => { | |
var _a; | |
LiteGraph.closeAllContextMenus(); | |
if (e.button == 2) { | |
const canvas = await waitForCanvas(); | |
new LiteGraph.ContextMenu(this.getRgthreeContextMenuItems(), { | |
title: `<div class="rgthree-contextmenu-item rgthree-contextmenu-title-rgthree-comfy">${logoRgthree} rgthree-comfy</div>`, | |
left: e.clientX, | |
top: 5, | |
}, canvas.getCanvasWindow()); | |
return; | |
} | |
if (e.button == 0) { | |
const nodeId = (_a = this.progressBarEl) === null || _a === void 0 ? void 0 : _a.currentNodeId; | |
if (nodeId) { | |
const [canvas, graph] = await Promise.all([waitForCanvas(), waitForGraph()]); | |
const node = graph.getNodeById(Number(nodeId)); | |
if (node) { | |
canvas.centerOnNode(node); | |
e.stopPropagation(); | |
e.preventDefault(); | |
} | |
} | |
return; | |
} | |
}); | |
} | |
const isUpdatedComfyBodyClasses = !!queryOne(".comfyui-body-top"); | |
const position = CONFIG_SERVICE.getConfigValue("features.progress_bar.position"); | |
this.progressBarEl.classList.toggle("rgthree-pos-bottom", position === "bottom"); | |
if (isUpdatedComfyBodyClasses) { | |
if (position === "bottom") { | |
queryOne(".comfyui-body-bottom").appendChild(this.progressBarEl); | |
} | |
else { | |
queryOne(".comfyui-body-top").appendChild(this.progressBarEl); | |
} | |
} | |
else { | |
document.body.appendChild(this.progressBarEl); | |
} | |
const height = CONFIG_SERVICE.getConfigValue("features.progress_bar.height") || 14; | |
this.progressBarEl.style.height = `${height}px`; | |
const fontSize = Math.max(10, Number(height) - 10); | |
this.progressBarEl.style.fontSize = `${fontSize}px`; | |
this.progressBarEl.style.fontWeight = fontSize <= 12 ? "bold" : "normal"; | |
} | |
else { | |
(_a = this.progressBarEl) === null || _a === void 0 ? void 0 : _a.remove(); | |
} | |
} | |
async initializeGraphAndCanvasHooks() { | |
const rgthree = this; | |
const graphSerialize = LGraph.prototype.serialize; | |
LGraph.prototype.serialize = function () { | |
const response = graphSerialize.apply(this, [...arguments]); | |
rgthree.initialGraphToPromptSerializedWorkflowBecauseComfyUIBrokeStuff = response; | |
return response; | |
}; | |
const processMouseDown = LGraphCanvas.prototype.processMouseDown; | |
LGraphCanvas.prototype.processMouseDown = function (e) { | |
rgthree.processingMouseDown = true; | |
const returnVal = processMouseDown.apply(this, [...arguments]); | |
rgthree.dispatchCustomEvent("on-process-mouse-down", { originalEvent: e }); | |
rgthree.processingMouseDown = false; | |
return returnVal; | |
}; | |
const adjustMouseEvent = LGraphCanvas.prototype.adjustMouseEvent; | |
LGraphCanvas.prototype.adjustMouseEvent = function (e) { | |
adjustMouseEvent.apply(this, [...arguments]); | |
rgthree.lastAdjustedMouseEvent = e; | |
}; | |
const copyToClipboard = LGraphCanvas.prototype.copyToClipboard; | |
LGraphCanvas.prototype.copyToClipboard = function (nodes) { | |
rgthree.canvasCurrentlyCopyingToClipboard = true; | |
rgthree.canvasCurrentlyCopyingToClipboardWithMultipleNodes = | |
Object.values(nodes || this.selected_nodes || []).length > 1; | |
copyToClipboard.apply(this, [...arguments]); | |
rgthree.canvasCurrentlyCopyingToClipboard = false; | |
rgthree.canvasCurrentlyCopyingToClipboardWithMultipleNodes = false; | |
}; | |
const onGroupAdd = LGraphCanvas.onGroupAdd; | |
LGraphCanvas.onGroupAdd = function (...args) { | |
const graph = app.graph; | |
onGroupAdd.apply(this, [...args]); | |
LGraphCanvas.onShowPropertyEditor({}, null, null, null, graph._groups[graph._groups.length - 1]); | |
}; | |
} | |
async invokeExtensionsAsync(method, ...args) { | |
var _a; | |
const comfyapp = app; | |
if (CONFIG_SERVICE.getConfigValue("features.invoke_extensions_async.node_created") === false) { | |
const [m, a] = this.logParts(LogLevel.INFO, `Skipping invokeExtensionsAsync for applicable rgthree-comfy nodes`); | |
(_a = console[m]) === null || _a === void 0 ? void 0 : _a.call(console, ...a); | |
return Promise.resolve(); | |
} | |
return await Promise.all(comfyapp.extensions.map(async (ext) => { | |
var _a, _b; | |
if (ext === null || ext === void 0 ? void 0 : ext[method]) { | |
try { | |
const blocked = INVOKE_EXTENSIONS_BLOCKLIST.find((block) => ext.name.toLowerCase().startsWith(block.name.toLowerCase())); | |
if (blocked) { | |
const [n, v] = this.logger.logPartsOnceForTime(LogLevel.WARN, 5000, `Blocked extension '${ext.name}' method '${method}' for rgthree-nodes because: ${blocked.reason}`); | |
(_a = console[n]) === null || _a === void 0 ? void 0 : _a.call(console, ...v); | |
return Promise.resolve(); | |
} | |
return await ext[method](...args, comfyapp); | |
} | |
catch (error) { | |
const [n, v] = this.logParts(LogLevel.ERROR, `Error calling extension '${ext.name}' method '${method}' for rgthree-node.`, { error }, { extension: ext }, { args }); | |
(_b = console[n]) === null || _b === void 0 ? void 0 : _b.call(console, ...v); | |
} | |
} | |
})); | |
} | |
dispatchCustomEvent(event, detail) { | |
if (detail != null) { | |
return this.dispatchEvent(new CustomEvent(event, { detail })); | |
} | |
return this.dispatchEvent(new CustomEvent(event)); | |
} | |
async initializeContextMenu() { | |
const that = this; | |
setTimeout(async () => { | |
const getCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions; | |
LGraphCanvas.prototype.getCanvasMenuOptions = function (...args) { | |
let existingOptions = getCanvasMenuOptions.apply(this, [...args]); | |
const options = []; | |
options.push(null); | |
options.push(null); | |
options.push(null); | |
options.push({ | |
content: logoRgthree + `rgthree-comfy`, | |
className: "rgthree-contextmenu-item rgthree-contextmenu-main-item-rgthree-comfy", | |
submenu: { | |
options: that.getRgthreeContextMenuItems(), | |
}, | |
}); | |
options.push(null); | |
options.push(null); | |
let idx = null; | |
idx = idx || existingOptions.findIndex((o) => { var _a, _b; return (_b = (_a = o === null || o === void 0 ? void 0 : o.content) === null || _a === void 0 ? void 0 : _a.startsWith) === null || _b === void 0 ? void 0 : _b.call(_a, "Queue Group"); }) + 1; | |
idx = | |
idx || existingOptions.findIndex((o) => { var _a, _b; return (_b = (_a = o === null || o === void 0 ? void 0 : o.content) === null || _a === void 0 ? void 0 : _a.startsWith) === null || _b === void 0 ? void 0 : _b.call(_a, "Queue Selected"); }) + 1; | |
idx = idx || existingOptions.findIndex((o) => { var _a, _b; return (_b = (_a = o === null || o === void 0 ? void 0 : o.content) === null || _a === void 0 ? void 0 : _a.startsWith) === null || _b === void 0 ? void 0 : _b.call(_a, "Convert to Group"); }); | |
idx = idx || existingOptions.findIndex((o) => { var _a, _b; return (_b = (_a = o === null || o === void 0 ? void 0 : o.content) === null || _a === void 0 ? void 0 : _a.startsWith) === null || _b === void 0 ? void 0 : _b.call(_a, "Arrange ("); }); | |
idx = idx || existingOptions.findIndex((o) => !o) + 1; | |
idx = idx || 3; | |
existingOptions.splice(idx, 0, ...options); | |
for (let i = existingOptions.length; i > 0; i--) { | |
if (existingOptions[i] === null && existingOptions[i + 1] === null) { | |
existingOptions.splice(i, 1); | |
} | |
} | |
return existingOptions; | |
}; | |
}, 1016); | |
} | |
getRgthreeContextMenuItems() { | |
const [canvas, graph] = [app.canvas, app.graph]; | |
const selectedNodes = Object.values(canvas.selected_nodes || {}); | |
let rerouteNodes = []; | |
if (selectedNodes.length) { | |
rerouteNodes = selectedNodes.filter((n) => n.type === "Reroute"); | |
} | |
else { | |
rerouteNodes = graph._nodes.filter((n) => n.type == "Reroute"); | |
} | |
const rerouteLabel = selectedNodes.length ? "selected" : "all"; | |
const showBookmarks = CONFIG_SERVICE.getFeatureValue("menu_bookmarks.enabled"); | |
const bookmarkMenuItems = showBookmarks ? getBookmarks() : []; | |
return [ | |
{ | |
content: "Nodes", | |
disabled: true, | |
className: "rgthree-contextmenu-item rgthree-contextmenu-label", | |
}, | |
{ | |
content: iconNode + "All", | |
className: "rgthree-contextmenu-item", | |
has_submenu: true, | |
submenu: { | |
options: getNodeTypeStrings(), | |
callback: (value, options, event) => { | |
const node = LiteGraph.createNode(addRgthree(value)); | |
node.pos = [ | |
rgthree.lastAdjustedMouseEvent.canvasX, | |
rgthree.lastAdjustedMouseEvent.canvasY, | |
]; | |
canvas.graph.add(node); | |
canvas.selectNode(node); | |
app.graph.setDirtyCanvas(true, true); | |
}, | |
extra: { rgthree_doNotNest: true }, | |
}, | |
}, | |
{ | |
content: "Actions", | |
disabled: true, | |
className: "rgthree-contextmenu-item rgthree-contextmenu-label", | |
}, | |
{ | |
content: iconGear + "Settings (rgthree-comfy)", | |
disabled: !!this.settingsDialog, | |
className: "rgthree-contextmenu-item", | |
callback: (...args) => { | |
this.settingsDialog = new RgthreeConfigDialog().show(); | |
this.settingsDialog.addEventListener("close", (e) => { | |
this.settingsDialog = null; | |
}); | |
}, | |
}, | |
{ | |
content: iconReplace + ` Convert ${rerouteLabel} Reroutes`, | |
disabled: !rerouteNodes.length, | |
className: "rgthree-contextmenu-item", | |
callback: (...args) => { | |
const msg = `Convert ${rerouteLabel} ComfyUI Reroutes to Reroute (rgthree) nodes? \n` + | |
`(First save a copy of your workflow & check reroute connections afterwards)`; | |
if (!window.confirm(msg)) { | |
return; | |
} | |
(async () => { | |
for (const node of [...rerouteNodes]) { | |
if (node.type == "Reroute") { | |
this.replacingReroute = node.id; | |
await replaceNode(node, NodeTypesString.REROUTE); | |
this.replacingReroute = null; | |
} | |
} | |
})(); | |
}, | |
}, | |
...bookmarkMenuItems, | |
{ | |
content: "More...", | |
disabled: true, | |
className: "rgthree-contextmenu-item rgthree-contextmenu-label", | |
}, | |
{ | |
content: iconStarFilled + "Star on Github", | |
className: "rgthree-contextmenu-item rgthree-contextmenu-github", | |
callback: (...args) => { | |
window.open("https://github.com/rgthree/rgthree-comfy", "_blank"); | |
}, | |
}, | |
]; | |
} | |
async queueOutputNodes(nodeIds) { | |
var _a; | |
try { | |
this.queueNodeIds = nodeIds; | |
await app.queuePrompt(); | |
} | |
catch (e) { | |
const [n, v] = this.logParts(LogLevel.ERROR, `There was an error queuing nodes ${nodeIds}`, e); | |
(_a = console[n]) === null || _a === void 0 ? void 0 : _a.call(console, ...v); | |
} | |
finally { | |
this.queueNodeIds = null; | |
} | |
} | |
recursiveAddNodes(nodeId, oldOutput, newOutput) { | |
let currentId = nodeId; | |
let currentNode = oldOutput[currentId]; | |
if (newOutput[currentId] == null) { | |
newOutput[currentId] = currentNode; | |
for (const inputValue of Object.values(currentNode.inputs || [])) { | |
if (Array.isArray(inputValue)) { | |
this.recursiveAddNodes(inputValue[0], oldOutput, newOutput); | |
} | |
} | |
} | |
return newOutput; | |
} | |
initializeComfyUIHooks() { | |
const rgthree = this; | |
const queuePrompt = app.queuePrompt; | |
app.queuePrompt = async function () { | |
rgthree.processingQueue = true; | |
rgthree.dispatchCustomEvent("queue"); | |
try { | |
await queuePrompt.apply(app, [...arguments]); | |
} | |
finally { | |
rgthree.processingQueue = false; | |
rgthree.dispatchCustomEvent("queue-end"); | |
} | |
}; | |
const loadApiJson = app.loadApiJson; | |
app.loadApiJson = async function () { | |
rgthree.loadingApiJson = true; | |
try { | |
loadApiJson.apply(app, [...arguments]); | |
} | |
finally { | |
rgthree.loadingApiJson = false; | |
} | |
}; | |
const graphToPrompt = app.graphToPrompt; | |
app.graphToPrompt = async function () { | |
rgthree.dispatchCustomEvent("graph-to-prompt"); | |
let promise = graphToPrompt.apply(app, [...arguments]); | |
await promise; | |
rgthree.dispatchCustomEvent("graph-to-prompt-end"); | |
return promise; | |
}; | |
const apiQueuePrompt = api.queuePrompt; | |
api.queuePrompt = async function (index, prompt) { | |
var _a; | |
if (((_a = rgthree.queueNodeIds) === null || _a === void 0 ? void 0 : _a.length) && prompt.output) { | |
const oldOutput = prompt.output; | |
let newOutput = {}; | |
for (const queueNodeId of rgthree.queueNodeIds) { | |
rgthree.recursiveAddNodes(String(queueNodeId), oldOutput, newOutput); | |
} | |
prompt.output = newOutput; | |
} | |
rgthree.dispatchCustomEvent("comfy-api-queue-prompt-before", { | |
workflow: prompt.workflow, | |
output: prompt.output, | |
}); | |
const response = apiQueuePrompt.apply(app, [index, prompt]); | |
rgthree.dispatchCustomEvent("comfy-api-queue-prompt-end"); | |
return response; | |
}; | |
const clean = app.clean; | |
app.clean = function () { | |
rgthree.clearAllMessages(); | |
clean && clean.apply(app, [...arguments]); | |
}; | |
const loadGraphData = app.loadGraphData; | |
app.loadGraphData = function (graph) { | |
if (rgthree.monitorLinkTimeout) { | |
clearTimeout(rgthree.monitorLinkTimeout); | |
rgthree.monitorLinkTimeout = null; | |
} | |
rgthree.clearAllMessages(); | |
let graphCopy; | |
try { | |
graphCopy = JSON.parse(JSON.stringify(graph)); | |
} | |
catch (e) { | |
graphCopy = null; | |
} | |
setTimeout(() => { | |
var _a, _b, _c; | |
const wasLoadingAborted = (_b = (_a = document | |
.querySelector(".comfy-modal-content")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.includes("Loading aborted due"); | |
const graphToUse = wasLoadingAborted ? graphCopy || graph : app.graph; | |
const fixBadLinksResult = fixBadLinks(graphToUse); | |
if (fixBadLinksResult.hasBadLinks) { | |
const [n, v] = rgthree.logParts(LogLevel.WARN, `The workflow you've loaded has corrupt linking data. Open ${new URL(location.href).origin}/rgthree/link_fixer to try to fix.`); | |
(_c = console[n]) === null || _c === void 0 ? void 0 : _c.call(console, ...v); | |
if (CONFIG_SERVICE.getConfigValue("features.show_alerts_for_corrupt_workflows")) { | |
rgthree.showMessage({ | |
id: "bad-links", | |
type: "warn", | |
message: "The workflow you've loaded has corrupt linking data that may be able to be fixed.", | |
actions: [ | |
{ | |
label: "Open fixer", | |
href: "/rgthree/link_fixer", | |
}, | |
{ | |
label: "Fix in place", | |
href: "/rgthree/link_fixer", | |
callback: (event) => { | |
event.stopPropagation(); | |
event.preventDefault(); | |
if (confirm("This will attempt to fix in place. Please make sure to have a saved copy of your workflow.")) { | |
try { | |
const fixBadLinksResult = fixBadLinks(graphToUse, true); | |
if (!fixBadLinksResult.hasBadLinks) { | |
rgthree.hideMessage("bad-links"); | |
alert("Success! It's possible some valid links may have been affected. Please check and verify your workflow."); | |
wasLoadingAborted && app.loadGraphData(fixBadLinksResult.graph); | |
if (CONFIG_SERVICE.getConfigValue("features.monitor_for_corrupt_links") || | |
CONFIG_SERVICE.getConfigValue("features.monitor_bad_links")) { | |
rgthree.monitorLinkTimeout = setTimeout(() => { | |
rgthree.monitorBadLinks(); | |
}, 5000); | |
} | |
} | |
} | |
catch (e) { | |
console.error(e); | |
alert("Unsuccessful at fixing corrupt data. :("); | |
rgthree.hideMessage("bad-links"); | |
} | |
} | |
}, | |
}, | |
], | |
}); | |
} | |
} | |
else if (CONFIG_SERVICE.getConfigValue("features.monitor_for_corrupt_links") || | |
CONFIG_SERVICE.getConfigValue("features.monitor_bad_links")) { | |
rgthree.monitorLinkTimeout = setTimeout(() => { | |
rgthree.monitorBadLinks(); | |
}, 5000); | |
} | |
}, 100); | |
return loadGraphData && loadGraphData.apply(app, [...arguments]); | |
}; | |
} | |
getNodeFromInitialGraphToPromptSerializedWorkflowBecauseComfyUIBrokeStuff(node) { | |
var _a, _b, _c; | |
return ((_c = (_b = (_a = this.initialGraphToPromptSerializedWorkflowBecauseComfyUIBrokeStuff) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.find((n) => n.id === node.id)) !== null && _c !== void 0 ? _c : null); | |
} | |
async showMessage(data) { | |
let container = document.querySelector(".rgthree-top-messages-container"); | |
if (!container) { | |
container = document.createElement("div"); | |
container.classList.add("rgthree-top-messages-container"); | |
document.body.appendChild(container); | |
} | |
const dialogs = query("dialog[open]"); | |
if (dialogs.length) { | |
let dialog = dialogs[dialogs.length - 1]; | |
dialog.appendChild(container); | |
dialog.addEventListener("close", (e) => { | |
document.body.appendChild(container); | |
}); | |
} | |
await this.hideMessage(data.id); | |
const messageContainer = document.createElement("div"); | |
messageContainer.setAttribute("type", data.type || "info"); | |
const message = document.createElement("span"); | |
message.innerHTML = data.message; | |
messageContainer.appendChild(message); | |
for (let a = 0; a < (data.actions || []).length; a++) { | |
const action = data.actions[a]; | |
if (a > 0) { | |
const sep = document.createElement("span"); | |
sep.innerHTML = " | "; | |
messageContainer.appendChild(sep); | |
} | |
const actionEl = document.createElement("a"); | |
actionEl.innerText = action.label; | |
if (action.href) { | |
actionEl.target = "_blank"; | |
actionEl.href = action.href; | |
} | |
if (action.callback) { | |
actionEl.onclick = (e) => { | |
return action.callback(e); | |
}; | |
} | |
messageContainer.appendChild(actionEl); | |
} | |
const messageAnimContainer = document.createElement("div"); | |
messageAnimContainer.setAttribute("msg-id", data.id); | |
messageAnimContainer.appendChild(messageContainer); | |
container.appendChild(messageAnimContainer); | |
await wait(64); | |
messageAnimContainer.style.marginTop = `-${messageAnimContainer.offsetHeight}px`; | |
await wait(64); | |
messageAnimContainer.classList.add("-show"); | |
if (data.timeout) { | |
await wait(data.timeout); | |
this.hideMessage(data.id); | |
} | |
} | |
async hideMessage(id) { | |
const msg = document.querySelector(`.rgthree-top-messages-container > [msg-id="${id}"]`); | |
if (msg === null || msg === void 0 ? void 0 : msg.classList.contains("-show")) { | |
msg.classList.remove("-show"); | |
await wait(750); | |
} | |
msg && msg.remove(); | |
} | |
async clearAllMessages() { | |
let container = document.querySelector(".rgthree-top-messages-container"); | |
container && (container.innerHTML = ""); | |
} | |
setLogLevel(level) { | |
if (typeof level === "string") { | |
level = LogLevelKeyToLogLevel[CONFIG_SERVICE.getConfigValue("log_level")]; | |
} | |
if (level != null) { | |
GLOBAL_LOG_LEVEL = level; | |
} | |
} | |
logParts(level, message, ...args) { | |
return this.logger.logParts(level, message, ...args); | |
} | |
newLogSession(name) { | |
return this.logger.newSession(name); | |
} | |
isDebugMode() { | |
if (window.location.href.includes("rgthree-debug=false")) { | |
return false; | |
} | |
return GLOBAL_LOG_LEVEL >= LogLevel.DEBUG || window.location.href.includes("rgthree-debug"); | |
} | |
isDevMode() { | |
if (window.location.href.includes("rgthree-dev=false")) { | |
return false; | |
} | |
return GLOBAL_LOG_LEVEL >= LogLevel.DEV || window.location.href.includes("rgthree-dev"); | |
} | |
monitorBadLinks() { | |
const badLinksFound = fixBadLinks(app.graph); | |
if (badLinksFound.hasBadLinks && !this.monitorBadLinksAlerted) { | |
this.monitorBadLinksAlerted = true; | |
alert(`Problematic links just found in live data. Can you save your workflow and file a bug with ` + | |
`the last few steps you took to trigger this at ` + | |
`https://github.com/rgthree/rgthree-comfy/issues. Thank you!`); | |
} | |
else if (!badLinksFound.hasBadLinks) { | |
this.monitorBadLinksAlerted = false; | |
} | |
this.monitorLinkTimeout = setTimeout(() => { | |
this.monitorBadLinks(); | |
}, 5000); | |
} | |
} | |
function getBookmarks() { | |
const graph = app.graph; | |
const bookmarks = graph._nodes | |
.filter((n) => n.type === NodeTypesString.BOOKMARK) | |
.sort((a, b) => a.title.localeCompare(b.title)) | |
.map((n) => ({ | |
content: `[${n.shortcutKey}] ${n.title}`, | |
className: "rgthree-contextmenu-item", | |
callback: () => { | |
n.canvasToBookmark(); | |
}, | |
})); | |
return !bookmarks.length | |
? [] | |
: [ | |
{ | |
content: "🔖 Bookmarks", | |
disabled: true, | |
className: "rgthree-contextmenu-item rgthree-contextmenu-label", | |
}, | |
...bookmarks, | |
]; | |
} | |
export const rgthree = new Rgthree(); | |
window.rgthree = rgthree; | |