Adds an rgthree-comfy context menu with option to convert all reroute nodes to rgthree-reroutes. Fixes #122
This commit is contained in:
rgthree
+37
-23
@@ -14,30 +14,44 @@ DIR_WEB = os.path.abspath(f'{THIS_DIR}/../web/')
|
||||
routes = PromptServer.instance.routes
|
||||
|
||||
|
||||
def set_default_page_resources(path):
|
||||
""" Sets up routes for handling static files under a path."""
|
||||
|
||||
@routes.get(f'/rgthree/{path}/{{file}}')
|
||||
async def get_resource(request):
|
||||
""" Returns a resource file. """
|
||||
return web.FileResponse(os.path.join(DIR_WEB, path, request.match_info['file']))
|
||||
|
||||
@routes.get(f'/rgthree/{path}/{{subdir}}/{{file}}')
|
||||
async def get_resource_subdir(request):
|
||||
""" Returns a resource file. """
|
||||
return web.FileResponse(
|
||||
os.path.join(DIR_WEB, path, request.match_info['subdir'], request.match_info['file']))
|
||||
|
||||
|
||||
def set_default_page_routes(path):
|
||||
""" Sets default path handling for a hosted rgthree page. """
|
||||
|
||||
@routes.get(f'/rgthree/{path}')
|
||||
async def get_path_redir(request):
|
||||
""" Redirects to the path adding a trailing slash. """
|
||||
raise web.HTTPFound(f'{request.path}/')
|
||||
|
||||
@routes.get(f'/rgthree/{path}/')
|
||||
async def get_path_index(request):
|
||||
""" Handles the page's index loading. """
|
||||
html = ''
|
||||
with open(os.path.join(DIR_WEB, path, 'index.html'), 'r', encoding='UTF-8') as file:
|
||||
html = file.read()
|
||||
return web.Response(text=html, content_type='text/html')
|
||||
|
||||
set_default_page_resources(path)
|
||||
|
||||
|
||||
# Sometimes other pages (link_fixer, etc.) may want to import JS from the comfyui
|
||||
# directory. To allows TS to resolve like '../comfyui/file.js', we'll also resolve any module HTTP
|
||||
# to these routes.
|
||||
@routes.get('/rgthree/comfyui/{file}')
|
||||
async def get_comfyui_file_relative(request):
|
||||
return web.FileResponse(os.path.join(DIR_WEB, 'comfyui', request.match_info['file']))
|
||||
set_default_page_resources("comfyui")
|
||||
set_default_page_resources("common")
|
||||
|
||||
@routes.get('/rgthree/common/{file}')
|
||||
async def get_common_file(request):
|
||||
return web.FileResponse(os.path.join(DIR_WEB, 'common', request.match_info['file']))
|
||||
|
||||
|
||||
@routes.get('/rgthree/link_fixer')
|
||||
async def link_fixer_home_redir(request):
|
||||
raise web.HTTPFound(f'{request.path}/')
|
||||
|
||||
@routes.get('/rgthree/link_fixer/')
|
||||
async def link_fixer_home(request):
|
||||
html = ''
|
||||
with open(os.path.join(DIR_WEB, 'link_fixer', 'index.html'), 'r', encoding='UTF-8') as file:
|
||||
html = file.read()
|
||||
return web.Response(text=html, content_type='text/html')
|
||||
|
||||
|
||||
@routes.get('/rgthree/link_fixer/{file}')
|
||||
async def get_link_fixer_file(request):
|
||||
return web.FileResponse(os.path.join(DIR_WEB, 'link_fixer', request.match_info['file']))
|
||||
set_default_page_routes("link_fixer")
|
||||
|
||||
+45
-26
@@ -1,8 +1,12 @@
|
||||
// / <reference path="../node_modules/litegraph.js/src/litegraph.d.ts" />
|
||||
// @ts-ignore
|
||||
import { app } from "../../scripts/app.js";
|
||||
// @ts-ignore
|
||||
import { getWidgetConfig, mergeIfValid, setWidgetConfig } from "../../extensions/core/widgetInputs.js";
|
||||
import {
|
||||
getWidgetConfig,
|
||||
mergeIfValid,
|
||||
setWidgetConfig,
|
||||
// @ts-ignore
|
||||
} from "../../extensions/core/widgetInputs.js";
|
||||
// @ts-ignore
|
||||
import { rgthreeConfig } from "./rgthree_config.js";
|
||||
import { rgthree } from "./rgthree.js";
|
||||
@@ -31,6 +35,7 @@ import {
|
||||
} from "./utils.js";
|
||||
import { wait } from "rgthree/common/shared_utils.js";
|
||||
import { RgthreeBaseNode } from "./base_node.js";
|
||||
import { NodeTypesString } from "./constants.js";
|
||||
|
||||
declare const LiteGraph: typeof TLiteGraph;
|
||||
declare const LGraphNode: typeof TLGraphNode;
|
||||
@@ -239,27 +244,24 @@ class RerouteService {
|
||||
// To the right, and further right than up or down.
|
||||
layout[0] = canvas.connecting_output ? "Left" : "Right";
|
||||
layout[1] = LAYOUT_LABEL_OPPOSITES[layout[0]]!;
|
||||
node.pos[0] -= (node.size[0] + 10);
|
||||
node.pos[1] -= (Math.round((node.size[1] / 2) / 10) * 10);
|
||||
|
||||
node.pos[0] -= node.size[0] + 10;
|
||||
node.pos[1] -= Math.round(node.size[1] / 2 / 10) * 10;
|
||||
} else if (distX < 0 && Math.abs(distX) > Math.abs(distY)) {
|
||||
// To the left, and further right than up or down.
|
||||
layout[0] = canvas.connecting_output ? "Right" : "Left";
|
||||
layout[1] = LAYOUT_LABEL_OPPOSITES[layout[0]]!;
|
||||
node.pos[1] -= (Math.round((node.size[1] / 2) / 10) * 10);
|
||||
|
||||
node.pos[1] -= Math.round(node.size[1] / 2 / 10) * 10;
|
||||
} else if (distY < 0 && Math.abs(distY) > Math.abs(distX)) {
|
||||
// Above and further above than left or right.
|
||||
layout[0] = canvas.connecting_output ? "Bottom" : "Top";
|
||||
layout[1] = LAYOUT_LABEL_OPPOSITES[layout[0]]!;
|
||||
node.pos[0] -= (Math.round((node.size[0] / 2) / 10) * 10);
|
||||
|
||||
node.pos[0] -= Math.round(node.size[0] / 2 / 10) * 10;
|
||||
} else if (distY > 0 && Math.abs(distY) > Math.abs(distX)) {
|
||||
// Below and further below than left or right.
|
||||
layout[0] = canvas.connecting_output ? "Top" : "Bottom";
|
||||
layout[1] = LAYOUT_LABEL_OPPOSITES[layout[0]]!;
|
||||
node.pos[0] -= (Math.round((node.size[0] / 2) / 10) * 10);
|
||||
node.pos[1] -= (node.size[1] + 10);
|
||||
node.pos[0] -= Math.round(node.size[0] / 2 / 10) * 10;
|
||||
node.pos[1] -= node.size[1] + 10;
|
||||
}
|
||||
setConnectionsLayout(entry.node, layout);
|
||||
|
||||
@@ -329,8 +331,7 @@ const SERVICE = new RerouteService();
|
||||
* The famous ReroutNode, that has true multidirectional, expansive sizes, etc.
|
||||
*/
|
||||
class RerouteNode extends RgthreeBaseNode {
|
||||
|
||||
static override title = "Reroute (rgthree)";
|
||||
static override title = NodeTypesString.REROUTE;
|
||||
|
||||
static readonly title_mode = LiteGraph.NO_TITLE;
|
||||
|
||||
@@ -383,6 +384,16 @@ class RerouteNode extends RgthreeBaseNode {
|
||||
this.configuring = false;
|
||||
}
|
||||
|
||||
/** Finds the input slot; since we only ever have one, this is always 0. */
|
||||
override findInputSlot(name: string): number {
|
||||
return 0;
|
||||
}
|
||||
|
||||
/** Finds the output slot; since we only ever have one, this is always 0. */
|
||||
override findOutputSlot(name: string): number {
|
||||
return 0;
|
||||
}
|
||||
|
||||
setResizable(resizable: boolean) {
|
||||
this.properties["resizable"] = !!resizable;
|
||||
this.resizable = this.properties["resizable"];
|
||||
@@ -585,16 +596,20 @@ class RerouteNode extends RgthreeBaseNode {
|
||||
outputWidgetConfig = config[1] ?? {};
|
||||
outputType = config[0];
|
||||
if (!outputWidget) {
|
||||
outputWidget = outputNode.widgets?.find((w) => w.name === output?.widget?.name);
|
||||
outputWidget = outputNode.widgets?.find(
|
||||
(w) => w.name === output?.widget?.name,
|
||||
);
|
||||
}
|
||||
const merged = mergeIfValid(output, [config[0], outputWidgetConfig]);
|
||||
if (merged.customConfig) {
|
||||
outputWidgetConfig = merged.customConfig;
|
||||
}
|
||||
}
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
// Something happened, probably because comfyUI changes their methods.
|
||||
console.error('[rgthree] Could not propagate widget infor for reroute; maybe ComfyUI updated?');
|
||||
console.error(
|
||||
"[rgthree] Could not propagate widget infor for reroute; maybe ComfyUI updated?",
|
||||
);
|
||||
outputWidgetConfig = null;
|
||||
outputWidget = null;
|
||||
}
|
||||
@@ -631,13 +646,17 @@ class RerouteNode extends RgthreeBaseNode {
|
||||
// For primitive nodes, which look at the widget to dsplay themselves.
|
||||
if (outputWidgetConfig && outputWidget && outputType) {
|
||||
node.inputs[0]!.widget = { name: "value" };
|
||||
setWidgetConfig(node.inputs[0], [outputType ?? displayType, outputWidgetConfig], outputWidget);
|
||||
setWidgetConfig(
|
||||
node.inputs[0],
|
||||
[outputType ?? displayType, outputWidgetConfig],
|
||||
outputWidget,
|
||||
);
|
||||
} else {
|
||||
setWidgetConfig(node.inputs[0], null);
|
||||
}
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
// Something happened, probably because comfyUI changes their methods.
|
||||
console.error('[rgthree] Could not set widget config for reroute; maybe ComfyUI updated?');
|
||||
console.error("[rgthree] Could not set widget config for reroute; maybe ComfyUI updated?");
|
||||
outputWidgetConfig = null;
|
||||
outputWidget = null;
|
||||
if (node.inputs[0]?.widget) {
|
||||
@@ -966,11 +985,10 @@ class RerouteNode extends RgthreeBaseNode {
|
||||
shortcuts to bring your workflow to the next level.
|
||||
</p>
|
||||
|
||||
${!CONFIG_FAST_REROUTE_ENABLED
|
||||
?
|
||||
`<p><i>Fast Shortcuts are currently disabled.</b>`
|
||||
:
|
||||
`
|
||||
${
|
||||
!CONFIG_FAST_REROUTE_ENABLED
|
||||
? `<p><i>Fast Shortcuts are currently disabled.</b>`
|
||||
: `
|
||||
<ul>
|
||||
<li><p>
|
||||
<code>${CONFIG_KEY_CREATE_WHILE_LINKING}</code> Create a new reroute node while dragging
|
||||
@@ -997,9 +1015,10 @@ class RerouteNode extends RgthreeBaseNode {
|
||||
reroute node.
|
||||
</p></li>
|
||||
</ul>
|
||||
`}
|
||||
`
|
||||
}
|
||||
<p><small>
|
||||
To change, ${!CONFIG_FAST_REROUTE_ENABLED ? 'enable':'disable'} or configure sohrtcuts,
|
||||
To change, ${!CONFIG_FAST_REROUTE_ENABLED ? "enable" : "disable"} or configure sohrtcuts,
|
||||
make a copy of
|
||||
<code>/custom_nodes/rgthree-comfy/rgthree_config.json.default</code> to
|
||||
<code>/custom_nodes/rgthree-comfy/rgthree_config.json</code> and configure under
|
||||
|
||||
@@ -193,3 +193,30 @@
|
||||
margin: 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
}
|
||||
.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-item svg {
|
||||
fill: currentColor;
|
||||
width: auto;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-item svg.github-star {
|
||||
fill: rgb(227, 179, 65);
|
||||
}
|
||||
|
||||
.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-label {
|
||||
color: #dde;
|
||||
background-color: #090909 !important;
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
cursor: default;
|
||||
opacity: 1;
|
||||
padding: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -12,7 +12,8 @@ import { api } from "../../scripts/api.js";
|
||||
import { rgthreeConfig } from "./rgthree_config.js";
|
||||
import { fixBadLinks } from "rgthree/common/link_fixer.js";
|
||||
import { wait } from "rgthree/common/shared_utils.js";
|
||||
import { waitForCanvas, waitForGraph } from "./utils.js";
|
||||
import { replaceNode, waitForCanvas, waitForGraph } from "./utils.js";
|
||||
import { NodeTypesString } from "./constants.js";
|
||||
|
||||
declare const LGraphCanvas: typeof TLGraphCanvas;
|
||||
|
||||
@@ -139,6 +140,7 @@ class Rgthree extends EventTarget {
|
||||
|
||||
this.initializeGraphAndCanvasHooks();
|
||||
this.initializeComfyUIHooks();
|
||||
this.initializeContextMenu();
|
||||
|
||||
wait(100).then(() => {
|
||||
this.injectRgthreeCss();
|
||||
@@ -193,6 +195,81 @@ class Rgthree extends EventTarget {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes hooks specific to an rgthree-comfy context menu on the root menu.
|
||||
*/
|
||||
private async initializeContextMenu() {
|
||||
const graph = await waitForGraph();
|
||||
setTimeout(() => {
|
||||
const getCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions;
|
||||
LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
|
||||
const options = getCanvasMenuOptions.apply(this, [...args] as any);
|
||||
|
||||
const hasReroutes = graph._nodes.find((n) => n.type == "Reroute");
|
||||
|
||||
options.push(null); // Divider
|
||||
options.push({
|
||||
content: `
|
||||
<svg viewBox="0 0 256 256">
|
||||
<path d="M88.503,158.997 L152.731,196.103 L152.738,196.092 L152.762,196.103 L152.769,196.106 L152.771,196.103 L183.922,142.084 L174.153,136.437 L148.611,180.676 L101.512,153.484 L132.193,30.415 L156.124,71.869 L165.896,66.225 L128.002,0.59 "></path>
|
||||
<path d="M55.586,148.581l13.44,47.521l0.014,0.051l0.168-0.051l10.689-3.022l-6.589-23.313l45.609,26.335l0.087,0.051l0.027-0.051 l5.617-9.718l-42.648-24.622l35.771-143.45L33.232,164.729l9.77,5.645L55.586,148.581z M87.394,93.484l-16.708,67.018l-5.018-17.747 l-8.028,2.27L87.394,93.484z"></path>
|
||||
<path d="M189.85,107.717 L137.892,137.718 L143.532,147.49 L185.723,123.133 L231.109,201.746 L24.895,201.746 L37.363,180.146 L27.592,174.505 L5.347,213.03 L250.653,213.03 "></path>
|
||||
<path d="M5.347,247.299v8.111h245.307v-8.111l-41.94-0.003c-1.336,0-2.404-1.065-2.441-2.396v-12.14 c0.037-1.315,1.089-2.368,2.41-2.385h41.972v-8.11H5.347v8.11h41.951c1.338,0.017,2.427,1.104,2.427,2.449v12.01 c0,1.365-1.105,2.462-2.457,2.462L5.347,247.299z M139.438,247.296c-1.334,0-2.406-1.065-2.439-2.396v-12.14 c0.033-1.315,1.085-2.368,2.41-2.385h46.415c1.335,0.017,2.425,1.104,2.425,2.449v12.01c0,1.365-1.103,2.462-2.459,2.462H139.438z M70.193,247.296c-1.339,0-2.408-1.065-2.441-2.396v-12.14c0.033-1.315,1.086-2.368,2.407-2.385h46.418 c1.336,0.017,2.425,1.104,2.425,2.449v12.01c0,1.365-1.103,2.462-2.458,2.462H70.193z"></path>
|
||||
</svg>
|
||||
rgthree-comfy`,
|
||||
className: "rgthree-contextmenu-item rgthree-contextmenu-main-rgthree-comfy",
|
||||
submenu: {
|
||||
options: [
|
||||
{
|
||||
content: "Functions",
|
||||
disabled: true,
|
||||
className: "rgthree-contextmenu-item rgthree-contextmenu-label",
|
||||
},
|
||||
{
|
||||
content: "Convert all 'Reroute' => 'Reroute (rgthree)'",
|
||||
disabled: !hasReroutes,
|
||||
callback: (...args: any[]) => {
|
||||
const msg =
|
||||
"Convert all comfyui reroute nodes to rgthree-comfy reroute nodes? \n" +
|
||||
"(First save a copy of your workflow & check reroute connections afterwards)";
|
||||
if (!window.confirm(msg)) {
|
||||
return;
|
||||
}
|
||||
(async () => {
|
||||
const nodes = [...graph._nodes];
|
||||
for (const node of nodes) {
|
||||
if (node.type == "Reroute") {
|
||||
await replaceNode(node, NodeTypesString.REROUTE);
|
||||
}
|
||||
}
|
||||
})();
|
||||
},
|
||||
},
|
||||
{
|
||||
content: "More...",
|
||||
disabled: true,
|
||||
className: "rgthree-contextmenu-item rgthree-contextmenu-label",
|
||||
},
|
||||
{
|
||||
content: `
|
||||
<svg viewBox="0 0 16 16" class="github-star">
|
||||
<path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path>
|
||||
</svg>
|
||||
Star on Github`,
|
||||
callback: (...args: any[]) => {
|
||||
window.open("https://github.com/rgthree/rgthree-comfy", "_blank");
|
||||
},
|
||||
className: "rgthree-contextmenu-item rgthree-contextmenu-github",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
return options;
|
||||
};
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize a bunch of hooks into ComfyUI and/or LiteGraph itself so we can either keep state or
|
||||
* context on what's happening so nodes can respond appropriately. This is usually to fix broken
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor">
|
||||
<path d="M88.503,158.997 L152.731,196.103 L152.738,196.092 L152.762,196.103 L152.769,196.106 L152.771,196.103 L183.922,142.084 L174.153,136.437 L148.611,180.676 L101.512,153.484 L132.193,30.415 L156.124,71.869 L165.896,66.225 L128.002,0.59 "></path>
|
||||
<path d="M55.586,148.581l13.44,47.521l0.014,0.051l0.168-0.051l10.689-3.022l-6.589-23.313l45.609,26.335l0.087,0.051l0.027-0.051 l5.617-9.718l-42.648-24.622l35.771-143.45L33.232,164.729l9.77,5.645L55.586,148.581z M87.394,93.484l-16.708,67.018l-5.018-17.747 l-8.028,2.27L87.394,93.484z"></path>
|
||||
<path d="M189.85,107.717 L137.892,137.718 L143.532,147.49 L185.723,123.133 L231.109,201.746 L24.895,201.746 L37.363,180.146 L27.592,174.505 L5.347,213.03 L250.653,213.03 "></path>
|
||||
<path d="M5.347,247.299v8.111h245.307v-8.111l-41.94-0.003c-1.336,0-2.404-1.065-2.441-2.396v-12.14 c0.037-1.315,1.089-2.368,2.41-2.385h41.972v-8.11H5.347v8.11h41.951c1.338,0.017,2.427,1.104,2.427,2.449v12.01 c0,1.365-1.105,2.462-2.457,2.462L5.347,247.299z M139.438,247.296c-1.334,0-2.406-1.065-2.439-2.396v-12.14 c0.033-1.315,1.085-2.368,2.41-2.385h46.415c1.335,0.017,2.425,1.104,2.425,2.449v12.01c0,1.365-1.103,2.462-2.459,2.462H139.438z M70.193,247.296c-1.339,0-2.408-1.065-2.441-2.396v-12.14c0.033-1.315,1.086-2.368,2.407-2.385h46.418 c1.336,0.017,2.425,1.104,2.425,2.449v12.01c0,1.365-1.103,2.462-2.458,2.462H70.193z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
+20
-15
@@ -1,11 +1,12 @@
|
||||
var _a, _b;
|
||||
import { app } from "../../scripts/app.js";
|
||||
import { getWidgetConfig, mergeIfValid, setWidgetConfig } from "../../extensions/core/widgetInputs.js";
|
||||
import { getWidgetConfig, mergeIfValid, setWidgetConfig, } from "../../extensions/core/widgetInputs.js";
|
||||
import { rgthreeConfig } from "./rgthree_config.js";
|
||||
import { rgthree } from "./rgthree.js";
|
||||
import { IoDirection, LAYOUT_CLOCKWISE, LAYOUT_LABEL_OPPOSITES, LAYOUT_LABEL_TO_DATA, addConnectionLayoutSupport, addMenuItem, getSlotLinks, isValidConnection, setConnectionsLayout, waitForCanvas, } from "./utils.js";
|
||||
import { wait } from "../../rgthree/common/shared_utils.js";
|
||||
import { RgthreeBaseNode } from "./base_node.js";
|
||||
import { NodeTypesString } from "./constants.js";
|
||||
const CONFIG_REROUTE = ((_a = rgthreeConfig === null || rgthreeConfig === void 0 ? void 0 : rgthreeConfig["nodes"]) === null || _a === void 0 ? void 0 : _a["reroute"]) || {};
|
||||
const CONFIG_FAST_REROUTE = CONFIG_REROUTE["fast_reroute"];
|
||||
const CONFIG_FAST_REROUTE_ENABLED = (_b = CONFIG_FAST_REROUTE["enabled"]) !== null && _b !== void 0 ? _b : false;
|
||||
@@ -126,24 +127,24 @@ class RerouteService {
|
||||
if (distX > 0 && Math.abs(distX) > Math.abs(distY)) {
|
||||
layout[0] = canvas.connecting_output ? "Left" : "Right";
|
||||
layout[1] = LAYOUT_LABEL_OPPOSITES[layout[0]];
|
||||
node.pos[0] -= (node.size[0] + 10);
|
||||
node.pos[1] -= (Math.round((node.size[1] / 2) / 10) * 10);
|
||||
node.pos[0] -= node.size[0] + 10;
|
||||
node.pos[1] -= Math.round(node.size[1] / 2 / 10) * 10;
|
||||
}
|
||||
else if (distX < 0 && Math.abs(distX) > Math.abs(distY)) {
|
||||
layout[0] = canvas.connecting_output ? "Right" : "Left";
|
||||
layout[1] = LAYOUT_LABEL_OPPOSITES[layout[0]];
|
||||
node.pos[1] -= (Math.round((node.size[1] / 2) / 10) * 10);
|
||||
node.pos[1] -= Math.round(node.size[1] / 2 / 10) * 10;
|
||||
}
|
||||
else if (distY < 0 && Math.abs(distY) > Math.abs(distX)) {
|
||||
layout[0] = canvas.connecting_output ? "Bottom" : "Top";
|
||||
layout[1] = LAYOUT_LABEL_OPPOSITES[layout[0]];
|
||||
node.pos[0] -= (Math.round((node.size[0] / 2) / 10) * 10);
|
||||
node.pos[0] -= Math.round(node.size[0] / 2 / 10) * 10;
|
||||
}
|
||||
else if (distY > 0 && Math.abs(distY) > Math.abs(distX)) {
|
||||
layout[0] = canvas.connecting_output ? "Top" : "Bottom";
|
||||
layout[1] = LAYOUT_LABEL_OPPOSITES[layout[0]];
|
||||
node.pos[0] -= (Math.round((node.size[0] / 2) / 10) * 10);
|
||||
node.pos[1] -= (node.size[1] + 10);
|
||||
node.pos[0] -= Math.round(node.size[0] / 2 / 10) * 10;
|
||||
node.pos[1] -= node.size[1] + 10;
|
||||
}
|
||||
setConnectionsLayout(entry.node, layout);
|
||||
if (canvas.connecting_output) {
|
||||
@@ -235,6 +236,12 @@ class RerouteNode extends RgthreeBaseNode {
|
||||
this.applyNodeSize();
|
||||
this.configuring = false;
|
||||
}
|
||||
findInputSlot(name) {
|
||||
return 0;
|
||||
}
|
||||
findOutputSlot(name) {
|
||||
return 0;
|
||||
}
|
||||
setResizable(resizable) {
|
||||
this.properties["resizable"] = !!resizable;
|
||||
this.resizable = this.properties["resizable"];
|
||||
@@ -399,7 +406,7 @@ class RerouteNode extends RgthreeBaseNode {
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
console.error('[rgthree] Could not propagate widget infor for reroute; maybe ComfyUI updated?');
|
||||
console.error("[rgthree] Could not propagate widget infor for reroute; maybe ComfyUI updated?");
|
||||
outputWidgetConfig = null;
|
||||
outputWidget = null;
|
||||
}
|
||||
@@ -435,7 +442,7 @@ class RerouteNode extends RgthreeBaseNode {
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
console.error('[rgthree] Could not set widget config for reroute; maybe ComfyUI updated?');
|
||||
console.error("[rgthree] Could not set widget config for reroute; maybe ComfyUI updated?");
|
||||
outputWidgetConfig = null;
|
||||
outputWidget = null;
|
||||
if ((_j = node.inputs[0]) === null || _j === void 0 ? void 0 : _j.widget) {
|
||||
@@ -712,10 +719,8 @@ class RerouteNode extends RgthreeBaseNode {
|
||||
</p>
|
||||
|
||||
${!CONFIG_FAST_REROUTE_ENABLED
|
||||
?
|
||||
`<p><i>Fast Shortcuts are currently disabled.</b>`
|
||||
:
|
||||
`
|
||||
? `<p><i>Fast Shortcuts are currently disabled.</b>`
|
||||
: `
|
||||
<ul>
|
||||
<li><p>
|
||||
<code>${CONFIG_KEY_CREATE_WHILE_LINKING}</code> Create a new reroute node while dragging
|
||||
@@ -744,7 +749,7 @@ class RerouteNode extends RgthreeBaseNode {
|
||||
</ul>
|
||||
`}
|
||||
<p><small>
|
||||
To change, ${!CONFIG_FAST_REROUTE_ENABLED ? 'enable' : 'disable'} or configure sohrtcuts,
|
||||
To change, ${!CONFIG_FAST_REROUTE_ENABLED ? "enable" : "disable"} or configure sohrtcuts,
|
||||
make a copy of
|
||||
<code>/custom_nodes/rgthree-comfy/rgthree_config.json.default</code> to
|
||||
<code>/custom_nodes/rgthree-comfy/rgthree_config.json</code> and configure under
|
||||
@@ -753,7 +758,7 @@ class RerouteNode extends RgthreeBaseNode {
|
||||
`;
|
||||
}
|
||||
}
|
||||
RerouteNode.title = "Reroute (rgthree)";
|
||||
RerouteNode.title = NodeTypesString.REROUTE;
|
||||
RerouteNode.title_mode = LiteGraph.NO_TITLE;
|
||||
RerouteNode.collapsable = false;
|
||||
RerouteNode.layout_slot_offset = 5;
|
||||
|
||||
@@ -193,3 +193,30 @@
|
||||
margin: 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
}
|
||||
.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-item svg {
|
||||
fill: currentColor;
|
||||
width: auto;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-item svg.github-star {
|
||||
fill: rgb(227, 179, 65);
|
||||
}
|
||||
|
||||
.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-label {
|
||||
color: #dde;
|
||||
background-color: #090909 !important;
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
cursor: default;
|
||||
opacity: 1;
|
||||
padding: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
+70
-1
@@ -3,7 +3,8 @@ import { api } from "../../scripts/api.js";
|
||||
import { rgthreeConfig } from "./rgthree_config.js";
|
||||
import { fixBadLinks } from "../../rgthree/common/link_fixer.js";
|
||||
import { wait } from "../../rgthree/common/shared_utils.js";
|
||||
import { waitForCanvas, waitForGraph } from "./utils.js";
|
||||
import { replaceNode, waitForCanvas, waitForGraph } from "./utils.js";
|
||||
import { NodeTypesString } from "./constants.js";
|
||||
export var LogLevel;
|
||||
(function (LogLevel) {
|
||||
LogLevel[LogLevel["IMPORTANT"] = 1] = "IMPORTANT";
|
||||
@@ -86,6 +87,7 @@ class Rgthree extends EventTarget {
|
||||
});
|
||||
this.initializeGraphAndCanvasHooks();
|
||||
this.initializeComfyUIHooks();
|
||||
this.initializeContextMenu();
|
||||
wait(100).then(() => {
|
||||
this.injectRgthreeCss();
|
||||
});
|
||||
@@ -113,6 +115,73 @@ class Rgthree extends EventTarget {
|
||||
LGraphCanvas.onShowPropertyEditor({}, null, null, null, graph._groups[graph._groups.length - 1]);
|
||||
};
|
||||
}
|
||||
async initializeContextMenu() {
|
||||
const graph = await waitForGraph();
|
||||
setTimeout(() => {
|
||||
const getCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions;
|
||||
LGraphCanvas.prototype.getCanvasMenuOptions = function (...args) {
|
||||
const options = getCanvasMenuOptions.apply(this, [...args]);
|
||||
const hasReroutes = graph._nodes.find((n) => n.type == "Reroute");
|
||||
options.push(null);
|
||||
options.push({
|
||||
content: `
|
||||
<svg viewBox="0 0 256 256">
|
||||
<path d="M88.503,158.997 L152.731,196.103 L152.738,196.092 L152.762,196.103 L152.769,196.106 L152.771,196.103 L183.922,142.084 L174.153,136.437 L148.611,180.676 L101.512,153.484 L132.193,30.415 L156.124,71.869 L165.896,66.225 L128.002,0.59 "></path>
|
||||
<path d="M55.586,148.581l13.44,47.521l0.014,0.051l0.168-0.051l10.689-3.022l-6.589-23.313l45.609,26.335l0.087,0.051l0.027-0.051 l5.617-9.718l-42.648-24.622l35.771-143.45L33.232,164.729l9.77,5.645L55.586,148.581z M87.394,93.484l-16.708,67.018l-5.018-17.747 l-8.028,2.27L87.394,93.484z"></path>
|
||||
<path d="M189.85,107.717 L137.892,137.718 L143.532,147.49 L185.723,123.133 L231.109,201.746 L24.895,201.746 L37.363,180.146 L27.592,174.505 L5.347,213.03 L250.653,213.03 "></path>
|
||||
<path d="M5.347,247.299v8.111h245.307v-8.111l-41.94-0.003c-1.336,0-2.404-1.065-2.441-2.396v-12.14 c0.037-1.315,1.089-2.368,2.41-2.385h41.972v-8.11H5.347v8.11h41.951c1.338,0.017,2.427,1.104,2.427,2.449v12.01 c0,1.365-1.105,2.462-2.457,2.462L5.347,247.299z M139.438,247.296c-1.334,0-2.406-1.065-2.439-2.396v-12.14 c0.033-1.315,1.085-2.368,2.41-2.385h46.415c1.335,0.017,2.425,1.104,2.425,2.449v12.01c0,1.365-1.103,2.462-2.459,2.462H139.438z M70.193,247.296c-1.339,0-2.408-1.065-2.441-2.396v-12.14c0.033-1.315,1.086-2.368,2.407-2.385h46.418 c1.336,0.017,2.425,1.104,2.425,2.449v12.01c0,1.365-1.103,2.462-2.458,2.462H70.193z"></path>
|
||||
</svg>
|
||||
rgthree-comfy`,
|
||||
className: "rgthree-contextmenu-item rgthree-contextmenu-main-rgthree-comfy",
|
||||
submenu: {
|
||||
options: [
|
||||
{
|
||||
content: "Functions",
|
||||
disabled: true,
|
||||
className: "rgthree-contextmenu-item rgthree-contextmenu-label",
|
||||
},
|
||||
{
|
||||
content: "Convert all 'Reroute' => 'Reroute (rgthree)'",
|
||||
disabled: !hasReroutes,
|
||||
callback: (...args) => {
|
||||
const msg = "Convert all comfyui reroute nodes to rgthree-comfy reroute nodes? \n" +
|
||||
"(First save a copy of your workflow & check reroute connections afterwards)";
|
||||
if (!window.confirm(msg)) {
|
||||
return;
|
||||
}
|
||||
(async () => {
|
||||
const nodes = [...graph._nodes];
|
||||
for (const node of nodes) {
|
||||
if (node.type == "Reroute") {
|
||||
await replaceNode(node, NodeTypesString.REROUTE);
|
||||
}
|
||||
}
|
||||
})();
|
||||
},
|
||||
},
|
||||
{
|
||||
content: "More...",
|
||||
disabled: true,
|
||||
className: "rgthree-contextmenu-item rgthree-contextmenu-label",
|
||||
},
|
||||
{
|
||||
content: `
|
||||
<svg viewBox="0 0 16 16" class="github-star">
|
||||
<path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path>
|
||||
</svg>
|
||||
Star on Github`,
|
||||
callback: (...args) => {
|
||||
window.open("https://github.com/rgthree/rgthree-comfy", "_blank");
|
||||
},
|
||||
className: "rgthree-contextmenu-item rgthree-contextmenu-github",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
return options;
|
||||
};
|
||||
}, 1000);
|
||||
}
|
||||
initializeComfyUIHooks() {
|
||||
const rgthree = this;
|
||||
const queuePrompt = app.queuePrompt;
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor">
|
||||
<path d="M88.503,158.997 L152.731,196.103 L152.738,196.092 L152.762,196.103 L152.769,196.106 L152.771,196.103 L183.922,142.084 L174.153,136.437 L148.611,180.676 L101.512,153.484 L132.193,30.415 L156.124,71.869 L165.896,66.225 L128.002,0.59 "></path>
|
||||
<path d="M55.586,148.581l13.44,47.521l0.014,0.051l0.168-0.051l10.689-3.022l-6.589-23.313l45.609,26.335l0.087,0.051l0.027-0.051 l5.617-9.718l-42.648-24.622l35.771-143.45L33.232,164.729l9.77,5.645L55.586,148.581z M87.394,93.484l-16.708,67.018l-5.018-17.747 l-8.028,2.27L87.394,93.484z"></path>
|
||||
<path d="M189.85,107.717 L137.892,137.718 L143.532,147.49 L185.723,123.133 L231.109,201.746 L24.895,201.746 L37.363,180.146 L27.592,174.505 L5.347,213.03 L250.653,213.03 "></path>
|
||||
<path d="M5.347,247.299v8.111h245.307v-8.111l-41.94-0.003c-1.336,0-2.404-1.065-2.441-2.396v-12.14 c0.037-1.315,1.089-2.368,2.41-2.385h41.972v-8.11H5.347v8.11h41.951c1.338,0.017,2.427,1.104,2.427,2.449v12.01 c0,1.365-1.105,2.462-2.457,2.462L5.347,247.299z M139.438,247.296c-1.334,0-2.406-1.065-2.439-2.396v-12.14 c0.033-1.315,1.085-2.368,2.41-2.385h46.415c1.335,0.017,2.425,1.104,2.425,2.449v12.01c0,1.365-1.103,2.462-2.459,2.462H139.438z M70.193,247.296c-1.339,0-2.408-1.065-2.441-2.396v-12.14c0.033-1.315,1.086-2.368,2.407-2.385h46.418 c1.336,0.017,2.425,1.104,2.425,2.449v12.01c0,1.365-1.103,2.462-2.458,2.462H70.193z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Reference in New Issue
Block a user