217 lines
11 KiB
JavaScript
217 lines
11 KiB
JavaScript
// ComfyUI.mxToolkit.Slider v.0.9c - Max Smirnov 2024
|
|
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].type = "hidden";
|
|
|
|
this.node.onAdded = function ()
|
|
{
|
|
this.outputs[0].name = "";
|
|
this.outputs[1].name = "";
|
|
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.configured = true;
|
|
this.onPropertyChanged();
|
|
}
|
|
|
|
this.node.onPropertyChanged = function ()
|
|
{
|
|
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 ( this.properties.valueX < this.properties.minX ) this.properties.valueX = this.properties.minX;
|
|
if ( this.properties.valueY < this.properties.minY ) this.properties.valueY = this.properties.minY;
|
|
if ( this.properties.valueX > this.properties.maxX ) this.properties.valueX = this.properties.maxX;
|
|
if ( 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.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.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.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.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.onMouseDown = function(e)
|
|
{
|
|
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;
|
|
if ( e.canvasY - this.pos[1] < 0 ) return false;
|
|
this.capture = true;
|
|
this.captureInput(true);
|
|
this.onMouseMove(e);
|
|
return true;
|
|
}
|
|
|
|
this.node.onMouseMove = function(e)
|
|
{
|
|
if (!this.capture) return;
|
|
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()
|
|
{
|
|
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.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);
|
|
}
|
|
}
|
|
}
|
|
});
|