Add custom nodes, Civitai loras (LFS), and vast.ai setup script
Some checks failed
Python Linting / Run Ruff (push) Has been cancelled
Python Linting / Run Pylint (push) Has been cancelled
Full Comfy CI Workflow Runs / test-stable (12.1, , linux, 3.10, [self-hosted Linux], stable) (push) Has been cancelled
Full Comfy CI Workflow Runs / test-stable (12.1, , linux, 3.11, [self-hosted Linux], stable) (push) Has been cancelled
Full Comfy CI Workflow Runs / test-stable (12.1, , linux, 3.12, [self-hosted Linux], stable) (push) Has been cancelled
Full Comfy CI Workflow Runs / test-unix-nightly (12.1, , linux, 3.11, [self-hosted Linux], nightly) (push) Has been cancelled
Execution Tests / test (macos-latest) (push) Has been cancelled
Execution Tests / test (ubuntu-latest) (push) Has been cancelled
Execution Tests / test (windows-latest) (push) Has been cancelled
Test server launches without errors / test (push) Has been cancelled
Unit Tests / test (macos-latest) (push) Has been cancelled
Unit Tests / test (ubuntu-latest) (push) Has been cancelled
Unit Tests / test (windows-2022) (push) Has been cancelled

Includes 30 custom nodes committed directly, 7 Civitai-exclusive
loras stored via Git LFS, and a setup script that installs all
dependencies and downloads HuggingFace-hosted models on vast.ai.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-09 00:55:26 +00:00
parent 2b70ab9ad0
commit f09734b0ee
2274 changed files with 748556 additions and 3 deletions

View File

@@ -0,0 +1,343 @@
// ComfyUI.mxToolkit.Reroute v.0.9.6 - Max Smirnov 2024
import { app } from "../../scripts/app.js";
import { mergeIfValid, getWidgetConfig, setWidgetConfig } from "../core/widgetInputs.js";
app.registerExtension({
name: "Comfy.MxRerouteNode",
registerCustomNodes(app) {
class MxRerouteNode extends LGraphNode {
constructor(title = MxRerouteNode.title) {
super(title);
if (!this.properties) {
this.properties = {};
}
this.addInput("", "*");
this.addOutput("", "*");
this.properties.inputDir = "LEFT";
this.properties.outputDir= "RIGHT";
this.linkType = "*";
this.bgcolor="#0000";
this.keyCode = 0;
this.size = [2*LiteGraph.CANVAS_GRID_SIZE + 1.4*LiteGraph.NODE_SLOT_HEIGHT, 2*LiteGraph.CANVAS_GRID_SIZE + 1.4*LiteGraph.NODE_SLOT_HEIGHT];
this.onAdded = function ()
{
this.resizable = false;
this.ioOrientation();
}
this.onConfigure = function ()
{
this.bgcolor="#0000";
}
this.onGraphConfigured = function ()
{
this.configured = true;
this.onConnectionsChange();
}
this.onDrawBackground = function (ctx)
{
const canvas = app.graph.list_of_graphcanvas[0];
let linkColor = LGraphCanvas.link_type_colors[this.linkType];
if (linkColor === "") linkColor = LiteGraph.LINK_COLOR;
if (this.inputs && this.outputs) if (this.inputs[0].pos && this.outputs[0].pos)
{
const drawLink = (ctx) =>
{
ctx.beginPath();
ctx.moveTo(this.inputs[0].pos[0], this.inputs[0].pos[1]);
if (canvas.links_render_mode < 2)
{
ctx.lineTo(this.size[0]/2, this.size[1]/2);
ctx.lineTo(this.outputs[0].pos[0], this.outputs[0].pos[1]);
} else ctx.quadraticCurveTo(this.size[0]/2, this.size[1]/2, this.outputs[0].pos[0], this.outputs[0].pos[1]);
ctx.stroke();
}
this.inputs[0].color_on = "#0000";
this.outputs[0].color_on = "#0000";
this.outputs[0].shape = LiteGraph.ROUND_SHAPE;
if (this.outputs[0].links) if (this.outputs[0].links.length) if (this.outputs[0].links.length > 0) this.outputs[0].shape = LiteGraph.GRID_SHAPE;
if (canvas) if (canvas.render_connections_border && canvas.ds.scale > 0.6)
{
ctx.lineWidth = canvas.connections_width + 4;
ctx.strokeStyle = "#0007";
drawLink(ctx);
}
ctx.lineWidth = canvas.connections_width;
ctx.strokeStyle = linkColor;
drawLink(ctx);
}
if (this.mouseOver) if (this.inputs && this.outputs) if (this.inputs[0].pos && this.outputs[0].pos)
{
ctx.lineWidth = 1;
ctx.strokeStyle = linkColor;
ctx.beginPath();
ctx.moveTo(this.pos[0], this.pos[1]);
ctx.roundRect(0, 0, this.size[0], this.size[1], 10);
ctx.stroke();
ctx.fillStyle = linkColor;
ctx.beginPath();
ctx.arc(this.inputs[0].pos[0], this.inputs[0].pos[1], 5, 0, 2 * Math.PI, false);
ctx.arc(this.outputs[0].pos[0], this.outputs[0].pos[1], 5, 0, 2 * Math.PI, false);
ctx.fill();
}
}
this.onKeyUp = function(e)
{
if (e.keyCode < 37 || e.keyCode > 40) return;
if (this.keyCode > 0)
{
const arrowKeys = { 37: "LEFT", 38: "UP", 39: "RIGHT", 40: "DOWN"};
this.properties.inputDir = arrowKeys[this.keyCode];
this.properties.outputDir = arrowKeys[e.keyCode];
this.onPropertyChanged();
this.keyCode = 0;
} else this.keyCode = e.keyCode;
}
this.onDeselected = () => {this.keyCode = 0};
this.getExtraMenuOptions = function()
{
const that = this;
const iDir = ["LEFT", "RIGHT", "DOWN", "UP", "LEFT", "LEFT", "RIGHT", "RIGHT", "UP", "DOWN", "DOWN", "UP"];
const oDir = ["RIGHT", "LEFT", "UP", "DOWN", "UP", "DOWN", "UP", "DOWN", "RIGHT", "RIGHT", "LEFT", "LEFT"];
const key = ["🠖", "🠔", "🠕", "🠗", "⮥", "⮧", "⮤", "⮦", "⮡", "⮣", "⮢", "⮠"], options = [];
for (let i = 0; i < 12; i++) options.push({ content: key[i], callback: () => { that.properties.inputDir = iDir[i]; that.properties.outputDir = oDir[i]; that.onPropertyChanged(); }});
return options;
};
this.onPropertyChanged = function ()
{
const aValues = ["LEFT","RIGHT","UP","DOWN","TOP"];
const sValues = ["L","R","U","D","T"]
this.properties.inputDir = this.properties.inputDir.toUpperCase();
this.properties.outputDir = this.properties.outputDir.toUpperCase();
if (sValues.indexOf(this.properties.inputDir)>=0) this.properties.inputDir = aValues[sValues.indexOf(this.properties.inputDir)];
if (sValues.indexOf(this.properties.outputDir)>=0) this.properties.outputDir = aValues[sValues.indexOf(this.properties.outputDir)];
if (this.properties.inputDir === "TOP") this.properties.inputDir = "UP";
if (this.properties.outputDir === "TOP") this.properties.inputDir = "UP";
this.properties.inputDir = aValues.includes(this.properties.inputDir)?this.properties.inputDir:"LEFT";
this.properties.outputDir= aValues.includes(this.properties.outputDir)?this.properties.outputDir:"RIGHT";
if (this.properties.inputDir === this.properties.outputDir) this.properties.outputDir=(this.properties.outputDir==="RIGHT")?"LEFT":"RIGHT";
this.ioOrientation();
app.graph.setDirtyCanvas(true, true);
}
this.ioOrientation = function ()
{
let i = this.properties.inputDir;
let o = this.properties.outputDir;
switch (i)
{
case "LEFT":
this.inputs[0].pos = [0,0.7*LiteGraph.NODE_SLOT_HEIGHT+LiteGraph.CANVAS_GRID_SIZE];
this.inputs[0].dir = LiteGraph.LEFT;
break;
case "RIGHT":
this.inputs[0].pos = [this.size[0],0.7*LiteGraph.NODE_SLOT_HEIGHT+LiteGraph.CANVAS_GRID_SIZE];
this.inputs[0].dir = LiteGraph.RIGHT;
break;
case "UP":
this.inputs[0].pos = [this.size[0]/2,0];
this.inputs[0].dir = LiteGraph.UP;
break;
case "DOWN":
this.inputs[0].pos = [this.size[0]/2,this.size[1]];
this.inputs[0].dir = LiteGraph.DOWN;
break;
}
switch (o)
{
case "LEFT":
this.outputs[0].pos = [0,0.7*LiteGraph.NODE_SLOT_HEIGHT+LiteGraph.CANVAS_GRID_SIZE];
this.outputs[0].dir = LiteGraph.LEFT;
break;
case "RIGHT":
this.outputs[0].pos = [this.size[0],0.7*LiteGraph.NODE_SLOT_HEIGHT+LiteGraph.CANVAS_GRID_SIZE];
this.outputs[0].dir = LiteGraph.RIGHT;
break;
case "UP":
this.outputs[0].pos = [this.size[0]/2,0];
this.outputs[0].dir = LiteGraph.UP;
break;
case "DOWN":
this.outputs[0].pos = [this.size[0]/2,this.size[1]];
this.outputs[0].dir = LiteGraph.DOWN;
break;
}
}
this.onConnectionsChange = function (type, index, connected, link_info) {
if (this.configured && connected && type === LiteGraph.OUTPUT) {
const types = new Set(this.outputs[0].links.map((l) => app.graph.links[l].type).filter((t) => t !== "*"));
if (types.size > 1) {
const linksToDisconnect = [];
for (let i = 0; i < this.outputs[0].links.length - 1; i++) {
const linkId = this.outputs[0].links[i];
const link = app.graph.links[linkId];
linksToDisconnect.push(link);
}
for (const link of linksToDisconnect) {
const node = app.graph.getNodeById(link.target_id);
node.disconnectInput(link.target_slot);
}
}
}
let currentNode = this;
let updateNodes = [];
let inputType = null;
let inputNode = null;
while (currentNode) {
updateNodes.unshift(currentNode);
const linkId = currentNode.inputs[0].link;
if (linkId !== null) {
const link = app.graph.links[linkId];
if (!link) return;
const node = app.graph.getNodeById(link.origin_id);
const type = node.constructor.type;
if (type && type.includes ("Reroute")) {
if (node === this) {
currentNode.disconnectInput(link.target_slot);
currentNode = null;
} else {
currentNode = node;
}
} else {
inputNode = currentNode;
inputType = node.outputs[link.origin_slot]?.type ?? null;
break;
}
} else {
currentNode = null;
break;
}
}
const nodes = [this];
let outputType = null;
while (nodes.length) {
currentNode = nodes.pop();
const outputs = (currentNode.outputs ? currentNode.outputs[0].links : []) || [];
if (outputs.length) {
for (const linkId of outputs) {
const link = app.graph.links[linkId];
if (!link) continue;
const node = app.graph.getNodeById(link.target_id);
const type = node.constructor.type;
if (type && type.includes("Reroute")) {
nodes.push(node);
updateNodes.push(node);
} else {
const nodeOutType =
node.inputs && node.inputs[link?.target_slot] && node.inputs[link.target_slot].type
? node.inputs[link.target_slot].type
: null;
if (this.configured && inputType && inputType !== "*" && nodeOutType !== inputType) {
node.disconnectInput(link.target_slot);
} else {
outputType = nodeOutType;
}
}
}
}
}
this.linkType = inputType || outputType || "*";
const linkColor = LGraphCanvas.link_type_colors[this.linkType];
let widgetConfig;
let targetWidget;
let widgetType;
for (const node of updateNodes) {
node.outputs[0].type = inputType || "*";
node.__outputType = this.linkType;
node.outputs[0].name = node.properties.showOutputText ? this.linkType : "";
if (node.linkType) node.linkType = this.linkType;
node.size = node.computeSize();
if (node.applyOrientation) node.applyOrientation();
for (const l of node.outputs[0].links || []) {
const link = app.graph.links[l];
if (link) {
link.color = linkColor;
if (app.configuringGraph) continue;
const targetNode = app.graph.getNodeById(link.target_id);
const targetInput = targetNode.inputs?.[link.target_slot];
if (targetInput?.widget) {
const config = getWidgetConfig(targetInput);
if (!widgetConfig) {
widgetConfig = config[1] ?? {};
widgetType = config[0];
}
if (!targetWidget) {
targetWidget = targetNode.widgets?.find((w) => w.name === targetInput.widget.name);
}
const merged = mergeIfValid(targetInput, [config[0], widgetConfig]);
if (merged.customConfig) {
widgetConfig = merged.customConfig;
}
}
}
}
}
for (const node of updateNodes) {
if (widgetConfig && outputType) {
node.inputs[0].widget = { name: "value" };
setWidgetConfig(node.inputs[0], [widgetType ?? this.linkType, widgetConfig], targetWidget);
} else {
setWidgetConfig(node.inputs[0], null);
}
}
if (inputNode) {
const link = app.graph.links[inputNode.inputs[0].link];
if (link) {
link.color = linkColor;
}
}
};
this.clone = function () {
const cloned = MxRerouteNode.prototype.clone.apply(this);
cloned.removeOutput(0);
cloned.addOutput("", "*");
cloned.size = cloned.computeSize();
cloned.ioOrientation();
return cloned;
};
this.isVirtualNode = true;
}
computeSize() { return [2*LiteGraph.CANVAS_GRID_SIZE+1.4*LiteGraph.NODE_SLOT_HEIGHT,2*LiteGraph.CANVAS_GRID_SIZE+1.4*LiteGraph.NODE_SLOT_HEIGHT] }
}
LiteGraph.registerNodeType(
"mxReroute",
Object.assign(MxRerouteNode, {
title_mode: LiteGraph.NO_TITLE,
title: "mxReroute",
collapsable: false,
})
);
MxRerouteNode.category = "utils";
},
});

View File

@@ -0,0 +1,165 @@
// ComfyUI.mxToolkit.Seed v.0.9.9 - Max Smirnov 2024
import { app } from "../../scripts/app.js";
import { api } from "../../scripts/api.js";
class MXSeed {
constructor(node) {
this.node = node;
this.node.properties = { seed:0, min:0, max:4294967296, autorunQueue: true, interruptQueue: true };
this.node.size = [210,LiteGraph.NODE_SLOT_HEIGHT*3.4];
this.node.widgets[0].hidden = true;
this.node.widgets[0].type = "hidden";
this.seedWidget = this.node.widgets[0];
const fontsize = LiteGraph.NODE_TEXT_SIZE;
this.node.onAdded = function ()
{
this.outputs[0].name = this.outputs[0].localized_name = "";
this.widgets_start_y = 0;
this.resizable = false;
this.lastprocessed = null;
this.configured = false;
this.history=[this.properties.seed];
};
this.node.onConfigure = function ()
{
this.history=[this.properties.seed];
this.configured = true;
}
this.node.onMouseDown = function(e, pos, canvas)
{
let cWidth = this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH;
if (this.flags.collapsed && (( e.canvasY-this.pos[1] > 0 ) || (e.canvasX-this.pos[0] < LiteGraph.NODE_TITLE_HEIGHT))) return false;
if (!this.flags.collapsed && ( e.canvasY-this.pos[1] < 0 ) && ((e.canvasX-this.pos[0]) < (this.size[0]-cWidth+LiteGraph.NODE_TITLE_HEIGHT))) return false;
if ((e.canvasX-this.pos[0]) < LiteGraph.NODE_TITLE_HEIGHT) return false;
this.updateThisNodeGraph?.();
this.onTmpMouseUp(e, pos, canvas);
return true;
}
this.node.onTmpMouseUp = function(e, pos, canvas)
{
if (!this.flags.collapsed && ( e.canvasY-this.pos[1] > 0 ))
{
let ps = Math.floor((e.canvasY-this.pos[1]-(LiteGraph.NODE_SLOT_HEIGHT-fontsize)/2)/LiteGraph.NODE_SLOT_HEIGHT);
if (ps > 0 && ps < this.history.length)
{
this.history.unshift(this.history[ps]);
this.history.splice(ps+1,1);
this.lastprocessed = null;
this.processSeed();
}
else if (ps === 0)
{
if (this.configured) this.lastprocessed = this.history[0];
canvas.prompt("Seed", this.properties.seed, function(v) {if (!isNaN(Number(v))) this.processSeed(Number(v));}.bind(this), e);
return;
}
}
if ( e.canvasY-this.pos[1] < 0 ) if (e.shiftKey) { this.processSeed((this.properties.seed<this.properties.max)?this.properties.seed+1:this.properties.min) } else { this.processSeed() }
}
this.node.onPropertyChanged = function ()
{
if ( this.properties.min < 0 ) this.properties.min = 0;
if ( this.properties.max > 4294967296 ) this.properties.max = 4294967296;
if ( this.properties.max < this.properties.min ) this.properties.max = this.properties.min + 1;
this.randomRange = this.properties.max - this.properties.min;
if (!this.configured) return;
if (this.properties.seed !== this.lastprocessed) this.processSeed(this.properties.seed);
}
this.node.processSeed = function(s)
{
let newSeed;
if (s === undefined)
{
do { newSeed = Math.round( Math.random() * (this.properties.max - this.properties.min) + this.properties.min ) } while (newSeed === this.lastprocessed);
} else newSeed = s;
if (this.lastprocessed === null && this.configured ) newSeed = this.history[0];
if (newSeed !== this.history[0])
{
this.history.unshift(newSeed);
if (this.history.length === 2 && this.lastprocessed === null && !this.configured) { this.history.splice(1); this.configured = true; }
if (this.history.length > 3) { this.history.splice(3) }
}
this.lastprocessed = newSeed;
this.properties.seed = newSeed;
this.widgets[0].value = newSeed;
if (this.properties.interruptQueue) api.interrupt();
if (this.properties.autorunQueue) app.queuePrompt(0);
}
this.node.onDrawForeground = function(ctx)
{
let titleHeight = LiteGraph.NODE_TITLE_HEIGHT;
let cWidth = this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH;
let buttonWidth = cWidth-titleHeight-6;
let cx = (this.flags.collapsed?cWidth:this.size[0])-buttonWidth-6;
ctx.fillStyle = this.color || LiteGraph.NODE_DEFAULT_COLOR;
ctx.beginPath();
ctx.rect(cx, 2-titleHeight, buttonWidth, titleHeight-4);
ctx.fill();
cx += buttonWidth/2;
ctx.lineWidth = 1;
ctx.fillStyle = this.mouseOver?LiteGraph.NODE_SELECTED_TITLE_COLOR:(this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR);
ctx.beginPath(); ctx.moveTo(cx-8,-titleHeight/2-8); ctx.lineTo(cx+3,-titleHeight/2); ctx.lineTo(cx-8,-titleHeight/2+8); ctx.fill();
if (!this.flags.collapsed)
{
ctx.fillStyle="rgba(20,20,20,0.5)";
ctx.beginPath();
ctx.roundRect( 20, 5, this.size[0]-40, fontsize+6, 6);
ctx.fill();
ctx.strokeStyle=LiteGraph.NODE_TEXT_COLOR;
ctx.beginPath();
ctx.roundRect( 20, 5, this.size[0]-40, fontsize+6, 6);
ctx.stroke();
ctx.fillStyle=LiteGraph.NODE_SELECTED_TITLE_COLOR;
ctx.font = (fontsize) + "px Arial";
ctx.textAlign = "center";
ctx.fillStyle=LiteGraph.NODE_TEXT_COLOR;
for (let i=0; i<this.history.length; i++) ctx.fillText(this.history[i], this.size[0]/2, LiteGraph.NODE_SLOT_HEIGHT*(i+1));
}
}
this.node.computeSize = function()
{
return [210,LiteGraph.NODE_SLOT_HEIGHT*3.4];
}
}
}
app.registerExtension(
{
name: "mxSeed",
async beforeRegisterNodeDef(nodeType, nodeData, _app)
{
if (nodeData.name === "mxSeed")
{
const onNodeCreated = nodeType.prototype.onNodeCreated;
nodeType.prototype.onNodeCreated = function ()
{
if (onNodeCreated) onNodeCreated.apply(this, []);
this.mxSeed = new MXSeed(this);
}
}
}
});

View File

@@ -0,0 +1,180 @@
// ComfyUI.mxToolkit.Slider v.0.9.92 - Max Smirnov 2025
import { app } from "../../scripts/app.js";
class MXSlider
{
constructor(node)
{
this.node = node;
this.node.properties = this.node.properties || {};
this.node.properties.value=20;
this.node.properties.min=0;
this.node.properties.max=100;
this.node.properties.step=1;
this.node.properties.decimals=0;
this.node.properties.snap=true;
this.node.intpos = { x:0.2 };
this.node.size = [210, Math.floor(LiteGraph.NODE_SLOT_HEIGHT*1.5)];
const fontsize = LiteGraph.NODE_SUBTEXT_SIZE;
const shX = (this.node.slot_start_y || 0)+fontsize*1.5;
const shY = LiteGraph.NODE_SLOT_HEIGHT/1.5;
const shiftLeft = 10;
const shiftRight = 60;
for (let i=0; i<3; i++) { this.node.widgets[i].hidden = true; this.node.widgets[i].type = "hidden"; }
this.node.onAdded = function ()
{
this.outputs[0].name = this.outputs[0].localized_name = "";
this.widgets_start_y = -2.4e8*LiteGraph.NODE_SLOT_HEIGHT;
this.intpos.x = Math.max(0, Math.min(1, (this.properties.value-this.properties.min)/(this.properties.max-this.properties.min)));
if (this.size) if (this.size.length) if (this.size[1] > LiteGraph.NODE_SLOT_HEIGHT*1.5) this.size[1] = LiteGraph.NODE_SLOT_HEIGHT*1.5;
this.outputs[0].type = (this.properties.decimals > 0)?"FLOAT":"INT";
};
this.node.onConfigure = function ()
{
this.outputs[0].type = (this.properties.decimals > 0)?"FLOAT":"INT";
}
this.node.onGraphConfigured = function ()
{
this.configured = true;
this.onPropertyChanged();
}
this.node.onPropertyChanged = function (propName)
{
if (!this.configured) return;
if (this.properties.step <= 0) this.properties.step = 1;
if ( isNaN(this.properties.value) ) this.properties.value = this.properties.min;
if ( this.properties.min >= this.properties.max ) this.properties.max = this.properties.min+this.properties.step;
if ((propName === "min") && (this.properties.value < this.properties.min)) this.properties.value = this.properties.min;
if ((propName === "max") && (this.properties.value > this.properties.max)) this.properties.value = this.properties.max;
this.properties.decimals = Math.floor(this.properties.decimals);
if (this.properties.decimals>4) this.properties.decimals = 4;
if (this.properties.decimals<0) this.properties.decimals = 0;
this.properties.value = Math.round(Math.pow(10,this.properties.decimals)*this.properties.value)/Math.pow(10,this.properties.decimals);
this.intpos.x = Math.max(0, Math.min(1, (this.properties.value-this.properties.min)/(this.properties.max-this.properties.min)));
if ((this.properties.decimals > 0 && this.outputs[0].type !== "FLOAT") || (this.properties.decimals === 0 && this.outputs[0].type !== "INT"))
if (this.outputs[0].links !== null)
for (let i = this.outputs[0].links.length; i > 0; i--)
{
const tlinkId = this.outputs[0].links[i-1];
const tlink = app.graph.links[tlinkId];
app.graph.getNodeById(tlink.target_id).disconnectInput(tlink.target_slot);
}
this.outputs[0].type = (this.properties.decimals > 0)?"FLOAT":"INT";
this.widgets[2].value = (this.properties.decimals > 0)?1:0;
this.widgets[1].value = this.properties.value;
this.widgets[0].value = Math.floor(this.properties.value);
}
this.node.onDrawForeground = function(ctx)
{
this.configured = true;
if ( this.flags.collapsed ) return false;
if (this.size[1] > LiteGraph.NODE_SLOT_HEIGHT*1.5) this.size[1] = LiteGraph.NODE_SLOT_HEIGHT*1.5;
let dgt = parseInt(this.properties.decimals);
ctx.fillStyle="rgba(20,20,20,0.5)";
ctx.beginPath();
ctx.roundRect( shiftLeft, shY-1, this.size[0]-shiftRight-shiftLeft, 4, 2);
ctx.fill();
ctx.fillStyle=LiteGraph.NODE_TEXT_COLOR;
ctx.beginPath();
ctx.arc(shiftLeft+(this.size[0]-shiftRight-shiftLeft)*this.intpos.x, shY+1, 7, 0, 2 * Math.PI, false);
ctx.fill();
ctx.lineWidth = 1.5;
ctx.strokeStyle=node.bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
ctx.beginPath();
ctx.arc(shiftLeft+(this.size[0]-shiftRight-shiftLeft)*this.intpos.x, shY+1, 5, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.fillStyle=LiteGraph.NODE_TEXT_COLOR;
ctx.font = (fontsize) + "px Arial";
ctx.textAlign = "center";
ctx.fillText(this.properties.value.toFixed(dgt), this.size[0]-shiftRight+24, shX);
}
this.node.onDblClick = function(e, pos, canvas)
{
if ( e.canvasX > this.pos[0]+this.size[0]-shiftRight+10 )
{
canvas.prompt("value", this.properties.value, function(v) {if (!isNaN(Number(v))) { this.properties.value = Number(v); this.onPropertyChanged("value");}}.bind(this), e);
return true;
}
}
this.node.onMouseDown = function(e)
{
if ( e.canvasY - this.pos[1] < 0 ) return false;
if ( e.canvasX < this.pos[0]+shiftLeft-5 || e.canvasX > this.pos[0]+this.size[0]-shiftRight+5 ) return false;
if ( e.canvasY < this.pos[1]+shiftLeft-5 || e.canvasY > this.pos[1]+this.size[1]-shiftLeft+5 ) return false;
this.capture = true;
this.unlock = false;
this.captureInput(true);
this.valueUpdate(e);
return true;
}
this.node.onMouseMove = function(e, pos, canvas)
{
if (!this.capture) return;
if ( canvas.pointer.isDown === false ) { this.onMouseUp(e); return; }
this.valueUpdate(e);
}
this.node.onMouseUp = function(e)
{
if (!this.capture) return;
this.capture = false;
this.captureInput(false);
this.widgets[0].value = Math.floor(this.properties.value);
this.widgets[1].value = this.properties.value;
}
this.node.valueUpdate = function(e)
{
let prevX = this.properties.value;
let rn = Math.pow(10,this.properties.decimals);
let vX = (e.canvasX - this.pos[0] - shiftLeft)/(this.size[0]-shiftRight-shiftLeft);
if (e.ctrlKey) this.unlock = true;
if (e.shiftKey !== this.properties.snap)
{
let step = this.properties.step/(this.properties.max - this.properties.min);
vX = Math.round(vX/step)*step;
}
this.intpos.x = Math.max(0, Math.min(1, vX));
this.properties.value = Math.round(rn*(this.properties.min + (this.properties.max - this.properties.min) * ((this.unlock)?vX:this.intpos.x)))/rn;
this.updateThisNodeGraph?.();
if ( this.properties.value !== prevX ) this.graph.setisChangedFlag(this.id);
}
this.node.onSelected = function(e) { this.onMouseUp(e) }
this.node.computeSize = () => [LiteGraph.NODE_WIDTH,Math.floor(LiteGraph.NODE_SLOT_HEIGHT*1.5)];
}
}
app.registerExtension(
{
name: "mxSlider",
async beforeRegisterNodeDef(nodeType, nodeData, _app)
{
if (nodeData.name === "mxSlider")
{
const onNodeCreated = nodeType.prototype.onNodeCreated;
nodeType.prototype.onNodeCreated = function () {
if (onNodeCreated) onNodeCreated.apply(this, []);
this.mxSlider = new MXSlider(this);
}
}
}
});

View File

@@ -0,0 +1,272 @@
// ComfyUI.mxToolkit.Slider2D v.0.9.92 - Max Smirnov 2025
import { app } from "../../scripts/app.js";
class MXSlider2D
{
constructor(node)
{
this.node = node;
this.node.properties = { valueX:512, valueY:512, minX:0, minY:0, maxX:1024, maxY:1024, stepX:128, stepY:128, decimalsX:0, decimalsY:0, snap: true, dots: true, frame: true, frameAlert:0 };
this.node.intpos = { x:0.5, y:0.5 };
this.node.size = [210, 210];
const fontsize = LiteGraph.NODE_SUBTEXT_SIZE;
const shX = (this.node.slot_start_y || 0)+fontsize*1.5;
const shY = shX + LiteGraph.NODE_SLOT_HEIGHT;
const minSize = 60;
const shiftLeft = 10;
const shiftRight = 60;
for (let i=0; i<6; i++) { this.node.widgets[i].hidden = true; this.node.widgets[i].type = "hidden"; }
this.node.onAdded = function ()
{
this.outputs[0].name = this.outputs[0].localized_name = "";
this.outputs[1].name = this.outputs[1].localized_name = "";
this.widgets_start_y = -4.8e8*LiteGraph.NODE_SLOT_HEIGHT;
this.intpos.x = (this.properties.valueX - this.properties.minX) / (this.properties.maxX - this.properties.minX);
this.intpos.y = (this.properties.valueY - this.properties.minY) / (this.properties.maxY - this.properties.minY);
if (this.size[1] > this.size[0]-shiftRight+shiftLeft) {this.size[1] = this.size[0]-shiftRight+shiftLeft} else {this.size[0] = this.size[1]+shiftRight-shiftLeft}
this.outputs[0].type = (this.properties.decimalsX > 0)?"FLOAT":"INT";
this.outputs[1].type = (this.properties.decimalsY > 0)?"FLOAT":"INT";
};
this.node.onConfigure = function ()
{
this.outputs[0].type = (this.properties.decimalsX > 0)?"FLOAT":"INT";
this.outputs[1].type = (this.properties.decimalsY > 0)?"FLOAT":"INT";
}
this.node.onGraphConfigured = function ()
{
this.configured = true;
this.onPropertyChanged();
}
this.node.onPropertyChanged = function (propName)
{
if (!this.configured) return;
if (this.properties.stepX <= 0) this.properties.stepX = 1;
if (this.properties.stepY <= 0) this.properties.stepY = 1;
if ( isNaN(this.properties.valueX) ) this.properties.valueX = this.properties.minX;
if ( isNaN(this.properties.valueY) ) this.properties.valueY = this.properties.minY;
if ( this.properties.minX >= this.properties.maxX ) this.properties.maxX = this.properties.minX+1;
if ( this.properties.minY >= this.properties.maxY ) this.properties.maxY = this.properties.minY+1;
if ((propName === "minX") && ( this.properties.valueX < this.properties.minX )) this.properties.valueX = this.properties.minX;
if ((propName === "minY") && ( this.properties.valueY < this.properties.minY )) this.properties.valueY = this.properties.minY;
if ((propName === "maxX") && ( this.properties.valueX > this.properties.maxX )) this.properties.valueX = this.properties.maxX;
if ((propName === "maxY") && ( this.properties.valueY > this.properties.maxY )) this.properties.valueY = this.properties.maxY;
this.properties.decimalsX = Math.floor(this.properties.decimalsX);
this.properties.decimalsY = Math.floor(this.properties.decimalsY);
if (this.properties.decimalsX>4) this.properties.decimalsX = 4;
if (this.properties.decimalsY>4) this.properties.decimalsY = 4;
if (this.properties.decimalsX<0) this.properties.decimalsX = 0;
if (this.properties.decimalsY<0) this.properties.decimalsY = 0;
this.properties.valueX = Math.round(Math.pow(10,this.properties.decimalsX)*this.properties.valueX)/Math.pow(10,this.properties.decimalsX);
this.properties.valueY = Math.round(Math.pow(10,this.properties.decimalsY)*this.properties.valueY)/Math.pow(10,this.properties.decimalsY);
this.intpos.x = Math.max(0, Math.min(1, (this.properties.valueX-this.properties.minX)/(this.properties.maxX-this.properties.minX)));
this.intpos.y = Math.max(0, Math.min(1, (this.properties.valueY-this.properties.minY)/(this.properties.maxY-this.properties.minY)));
if ((this.properties.decimalsX > 0 && this.outputs[0].type !== "FLOAT") || (this.properties.decimalsX === 0 && this.outputs[0].type !== "INT"))
if (this.outputs[0].links !== null)
for (let i = this.outputs[0].links.length; i > 0; i--)
{
const tlinkId = this.outputs[0].links[i-1];
const tlink = app.graph.links[tlinkId];
app.graph.getNodeById(tlink.target_id).disconnectInput(tlink.target_slot);
}
if ((this.properties.decimalsY > 0 && this.outputs[1].type !== "FLOAT") || (this.properties.decimalsY === 0 && this.outputs[1].type !== "INT"))
if (this.outputs[1].links !== null)
for (let i = this.outputs[1].links.length; i > 0; i--)
{
const tlinkId = this.outputs[1].links[i-1];
const tlink = app.graph.links[tlinkId];
app.graph.getNodeById(tlink.target_id).disconnectInput(tlink.target_slot);
}
this.outputs[0].type = (this.properties.decimalsX > 0)?"FLOAT":"INT";
this.outputs[1].type = (this.properties.decimalsY > 0)?"FLOAT":"INT";
this.widgets[5].value = (this.properties.decimalsY > 0)?1:0;
this.widgets[4].value = (this.properties.decimalsX > 0)?1:0;
this.widgets[3].value = this.properties.valueY;
this.widgets[2].value = Math.floor(this.properties.valueY);
this.widgets[1].value = this.properties.valueX;
this.widgets[0].value = Math.floor(this.properties.valueX);
}
this.node.onDrawForeground = function(ctx)
{
this.configured = true;
if ( this.flags.collapsed ) return false;
let dgtX = parseInt(this.properties.decimalsX);
let dgtY = parseInt(this.properties.decimalsY);
ctx.fillStyle="rgba(20,20,20,0.8)";
ctx.beginPath();
ctx.roundRect( shiftLeft-4, shiftLeft-4, this.size[0]-shiftRight-shiftLeft+8, this.size[1]-shiftLeft-shiftLeft+8,4);
ctx.fill();
// Dots
if (this.properties.dots)
{
ctx.fillStyle="rgba(200,200,200,0.7)";
ctx.beginPath();
let swX = (this.size[0]-shiftRight-shiftLeft);
let swY = (this.size[1]-shiftLeft-shiftLeft);
let stX = (swX*this.properties.stepX/(this.properties.maxX-this.properties.minX));
let stY = (swY*this.properties.stepY/(this.properties.maxY-this.properties.minY));
for (var ix=0; ix<swX+stX/2; ix+=stX) for (var iy=0; iy<swY+stY/2; iy+=stY) ctx.rect(shiftLeft+ix-0.5, shiftLeft+iy-0.5, 1, 1);
ctx.fill();
}
if (this.properties.frame)
{
if ((this.properties.frameAlert > 0) && (this.properties.valueX*this.properties.valueY > this.properties.frameAlert))
{
ctx.fillStyle="rgba(250,0,0,0.2)";
ctx.strokeStyle="rgba(250,0,0,0.7)";
}
else
{
ctx.fillStyle="rgba(200,200,200,0.1)";
ctx.strokeStyle="rgba(200,200,200,0.7)";
}
ctx.beginPath();
ctx.rect(shiftLeft, shiftLeft+(this.size[1]-shiftLeft-shiftLeft)*(1-this.intpos.y),(this.size[0]-shiftRight-shiftLeft)*this.intpos.x,(this.size[1]-shiftLeft-shiftLeft)*(this.intpos.y));
ctx.fill();
ctx.stroke();
}
ctx.fillStyle=LiteGraph.NODE_TEXT_COLOR;
ctx.beginPath();
ctx.arc(shiftLeft+(this.size[0]-shiftRight-shiftLeft)*this.intpos.x, shiftLeft+(this.size[1]-shiftLeft-shiftLeft)*(1-this.intpos.y), 7, 0, 2 * Math.PI, false);
ctx.fill();
ctx.lineWidth = 1.5;
ctx.strokeStyle=node.bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
ctx.beginPath();
ctx.arc(shiftLeft+(this.size[0]-shiftRight-shiftLeft)*this.intpos.x, shiftLeft+(this.size[1]-shiftLeft-shiftLeft)*(1-this.intpos.y), 5, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.fillStyle=LiteGraph.NODE_TEXT_COLOR;
ctx.font = (fontsize) + "px Arial";
ctx.textAlign = "center";
ctx.fillText(this.properties.valueX.toFixed(dgtX), this.size[0]-shiftRight+24, (shX));
ctx.fillText(this.properties.valueY.toFixed(dgtY), this.size[0]-shiftRight+24, (shY));
}
this.node.onDblClick = function(e, pos, canvas)
{
if ( e.canvasY - this.pos[1] < 0 ) return false;
if ( e.canvasX > this.pos[0]+this.size[0]-shiftRight+10 )
{
if (e.canvasY - this.pos[1] - 5 < shX)
{
canvas.prompt("valueX", this.properties.valueX, function(v) {if (!isNaN(Number(v))) { this.properties.valueX = Number(v); this.onPropertyChanged("valueX");}}.bind(this), e);
return true;
}
else if (e.canvasY - this.pos[1] - 5 < shY)
{
canvas.prompt("valueY", this.properties.valueY, function(v) {if (!isNaN(Number(v))) { this.properties.valueY = Number(v); this.onPropertyChanged("valueY");}}.bind(this), e);
return true;
}
}
}
this.node.onMouseDown = function(e)
{
if (e.canvasY - this.pos[1] < 0) return false;
if (e.shiftKey &&
e.canvasX > this.pos[0]+this.size[0]-shiftRight+10 &&
e.canvasX < this.pos[0]+this.size[0]-15 &&
e.canvasX > this.pos[0]+this.size[0]-shiftRight+15 &&
e.canvasY < this.pos[1]+shY &&
this.properties.decimalsX === this.properties.decimalsY &&
this.properties.valueX <= this.properties.maxY &&
this.properties.valueX >= this.properties.minY &&
this.properties.valueY <= this.properties.maxX &&
this.properties.valueY >= this.properties.minX)
{
let tmpX = this.properties.valueX;
this.properties.valueX = this.properties.valueY;
this.properties.valueY = tmpX;
this.intpos.x = (this.properties.valueX-this.properties.minX)/(this.properties.maxX-this.properties.minX);
this.intpos.y = (this.properties.valueY-this.properties.minY)/(this.properties.maxY-this.properties.minY);
this.onPropertyChanged("valueX");
this.onPropertyChanged("valueY");
this.updateThisNodeGraph();
this.graph.setisChangedFlag(this.id);
return true;
}
if ( e.canvasX < this.pos[0]+shiftLeft-5 || e.canvasX > this.pos[0]+this.size[0]-shiftRight+5 ) return false;
if ( e.canvasY < this.pos[1]+shiftLeft-5 || e.canvasY > this.pos[1]+this.size[1]-shiftLeft+5 ) return false;
this.capture = true;
this.captureInput(true);
this.valueUpdate(e);
return true;
}
this.node.onMouseMove = function(e, pos, canvas)
{
if (!this.capture) return;
if ( canvas.pointer.isDown === false ) { this.onMouseUp(e); return; }
this.valueUpdate(e);
}
this.node.valueUpdate = function(e)
{
let prevX = this.properties.valueX;
let prevY = this.properties.valueY;
let rnX = Math.pow(10,this.properties.decimalsX);
let rnY = Math.pow(10,this.properties.decimalsY);
let vX = (e.canvasX - this.pos[0] - shiftLeft)/(this.size[0]-shiftRight-shiftLeft);
let vY = 1-(e.canvasY - this.pos[1] - shiftLeft)/(this.size[1]-shiftLeft-shiftLeft);
if (e.shiftKey !== this.properties.snap)
{
let sX = this.properties.stepX/(this.properties.maxX - this.properties.minX);
let sY = this.properties.stepY/(this.properties.maxY - this.properties.minY);
vX = Math.round(vX/sX)*sX;
vY = Math.round(vY/sY)*sY;
}
if ( vX < 0 ) { vX = 0 } else if ( vX > 1 ) { vX = 1 }
if ( vY < 0 ) { vY = 0 } else if ( vY > 1 ) { vY = 1 }
this.intpos.x = vX;
this.intpos.y = vY;
this.properties.valueX = Math.round(rnX*(this.properties.minX + (this.properties.maxX - this.properties.minX) * this.intpos.x))/rnX;
this.properties.valueY = Math.round(rnY*(this.properties.minY + (this.properties.maxY - this.properties.minY) * this.intpos.y))/rnY;
this.updateThisNodeGraph?.();
if ( this.properties.valueX !== prevX || this.properties.valueY !== prevY ) this.graph.setisChangedFlag(this.id);
}
this.node.onMouseUp = function()
{
if (!this.capture) return;
this.capture = false;
this.captureInput(false);
this.widgets[0].value = Math.floor(this.properties.valueX);
this.widgets[1].value = this.properties.valueX;
this.widgets[2].value = Math.floor(this.properties.valueY);
this.widgets[3].value = this.properties.valueY;
}
this.node.onSelected = function(e) { this.onMouseUp(e) }
this.node.computeSize = () => [minSize + shiftRight - shiftLeft, minSize];
}
}
app.registerExtension(
{
name: "mxSlider2D",
async beforeRegisterNodeDef(nodeType, nodeData, _app)
{
if (nodeData.name === "mxSlider2D")
{
const onNodeCreated = nodeType.prototype.onNodeCreated;
nodeType.prototype.onNodeCreated = function () {
if (onNodeCreated) onNodeCreated.apply(this, []);
this.mxSlider2d = new MXSlider2D(this);
}
}
}
});

View File

@@ -0,0 +1,126 @@
// ComfyUI.mxToolkit.Stop v.0.9.7 - Max Smirnov 2024
import { app } from "../../scripts/app.js";
class MXStop
{
constructor(node)
{
this.node = node;
this.node.properties = this.node.properties || {};
this.node.onGraphConfigured = function ()
{
this.configured = true;
}
this.node.onConnectionsChange = function (type, index, connected, link_info)
{
if (link_info)
{
if (connected)
{
if (type === LiteGraph.INPUT)
{
const cnode = app.graph.getNodeById(link_info.origin_id);
const ctype = cnode.outputs[link_info.origin_slot].type;
const color = LGraphCanvas.link_type_colors[ctype];
this.outputs[0].type = ctype;
this.outputs[0].name = ctype;
this.inputs[0].type = ctype;
if (link_info.id) { app.graph.links[link_info.id].color = color; }
if (this.outputs[0].links !== null)
for (let i = this.outputs[0].links.length; i > 0; i--)
{
const tlinkId = this.outputs[0].links[i-1];
const tlink = app.graph.links[tlinkId];
if (this.configured) if ( ctype !== tlink.type ) app.graph.getNodeById(tlink.target_id).disconnectInput(tlink.target_slot);
}
}
if (type === LiteGraph.OUTPUT && this.inputs[0].link === null)
{
this.inputs[0].type = link_info.type;
this.outputs[0].type = link_info.type;
this.outputs[0].name = link_info.type;
}
}
else if ((( type === LiteGraph.INPUT ) && ( this.outputs[0].links === null || this.outputs[0].links.length === 0 )) || (( type === LiteGraph.OUTPUT) && ( this.inputs[0].link === null ))) this.onAdded();
}
this.computeSize();
};
this.node.onAdded = function ()
{
this.inputs[0].type = "*";
this.outputs[0].name = "";
this.outputs[0].type = "*";
};
this.node.onMouseDown = function(e, pos, canvas)
{
let cWidth = this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH;
if ( e.canvasY-this.pos[1] > 0 ) return false;
if (this.flags.collapsed && (e.canvasX-this.pos[0] < LiteGraph.NODE_TITLE_HEIGHT)) return false;
if (!this.flags.collapsed && ((e.canvasX-this.pos[0]) < (this.size[0]-cWidth+LiteGraph.NODE_TITLE_HEIGHT))) return false;
this.updateThisNodeGraph?.();
this.onTmpMouseUp(e, pos, canvas);
return true;
}
this.node.onTmpMouseUp = function(e, pos, canvas)
{
app.queuePrompt(0);
}
this.node.onDrawForeground = function(ctx)
{
this.configured = true;
if (this.size[1] > LiteGraph.NODE_SLOT_HEIGHT*1.3) this.size[1] = LiteGraph.NODE_SLOT_HEIGHT*1.3;
let titleHeight = LiteGraph.NODE_TITLE_HEIGHT;
let cWidth = this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH;
let buttonWidth = cWidth-titleHeight-6;
let cx = (this.flags.collapsed?cWidth:this.size[0])-buttonWidth-6;
ctx.fillStyle = this.color || LiteGraph.NODE_DEFAULT_COLOR;
ctx.beginPath();
ctx.rect(cx, 2-titleHeight, buttonWidth, titleHeight-4);
ctx.fill();
cx += buttonWidth/2;
ctx.lineWidth = 1;
if (this.mouseOver)
{
ctx.fillStyle = LiteGraph.NODE_SELECTED_TITLE_COLOR
ctx.beginPath(); ctx.moveTo(cx-8,-titleHeight/2-8); ctx.lineTo(cx+0,-titleHeight/2); ctx.lineTo(cx-8,-titleHeight/2+8); ctx.fill();
ctx.beginPath(); ctx.moveTo(cx+1,-titleHeight/2-8); ctx.lineTo(cx+9,-titleHeight/2); ctx.lineTo(cx+1,-titleHeight/2+8); ctx.fill();
}
else
{
ctx.fillStyle = (this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR);
ctx.beginPath(); ctx.rect(cx-10,-titleHeight/2-8, 4, 16); ctx.fill();
ctx.beginPath(); ctx.rect(cx-2,-titleHeight/2-8, 4, 16); ctx.fill();
}
}
this.node.computeSize = function()
{
return [ (this.properties.showOutputText && this.outputs && this.outputs.length) ? LiteGraph.NODE_TEXT_SIZE * (this.outputs[0].name.length+5) * 0.6 + 140 : 140, LiteGraph.NODE_SLOT_HEIGHT*1.3 ];
}
}
}
app.registerExtension(
{
name: "mxStop",
async beforeRegisterNodeDef(nodeType, nodeData, _app)
{
if (nodeData.name === "mxStop")
{
const onNodeCreated = nodeType.prototype.onNodeCreated;
nodeType.prototype.onNodeCreated = function () {
if (onNodeCreated) onNodeCreated.apply(this, []);
this.mxStop = new MXStop(this);
}
}
}
});