| 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; | |