mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-26 17:54:14 +00:00
fixes
This commit is contained in:
tamat
@@ -379,14 +379,6 @@ var LiteGraph = global.LiteGraph;
|
||||
//this.oldmouse = null;
|
||||
}
|
||||
|
||||
WidgetKnob.prototype.onWidget = function(e,widget)
|
||||
{
|
||||
if(widget.name=="increase")
|
||||
this.onPropertyChanged("size", this.properties.size + 10);
|
||||
else if(widget.name=="decrease")
|
||||
this.onPropertyChanged("size", this.properties.size - 10);
|
||||
}
|
||||
|
||||
WidgetKnob.prototype.onPropertyChanged = function(name,value)
|
||||
{
|
||||
if(name=="wcolor")
|
||||
@@ -594,225 +586,6 @@ var LiteGraph = global.LiteGraph;
|
||||
LiteGraph.registerNodeType("widget/progress", WidgetProgress);
|
||||
|
||||
|
||||
/*
|
||||
LiteGraph.registerNodeType("widget/kpad",{
|
||||
title: "KPad",
|
||||
desc: "bidimensional slider",
|
||||
size: [200,200],
|
||||
outputs: [["x",'number'],["y",'number']],
|
||||
properties:{x:0,y:0,borderColor:"#333",bgcolorTop:"#444",bgcolorBottom:"#000",shadowSize:1, borderRadius:2},
|
||||
|
||||
createGradient: function(ctx)
|
||||
{
|
||||
this.lineargradient = ctx.createLinearGradient(0,0,0,this.size[1]);
|
||||
this.lineargradient.addColorStop(0,this.properties["bgcolorTop"]);
|
||||
this.lineargradient.addColorStop(1,this.properties["bgcolorBottom"]);
|
||||
},
|
||||
|
||||
onDrawBackground: function(ctx)
|
||||
{
|
||||
if(!this.lineargradient)
|
||||
this.createGradient(ctx);
|
||||
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeStyle = this.properties["borderColor"];
|
||||
//ctx.fillStyle = "#ebebeb";
|
||||
ctx.fillStyle = this.lineargradient;
|
||||
|
||||
ctx.shadowColor = "#000";
|
||||
ctx.shadowOffsetX = 0;
|
||||
ctx.shadowOffsetY = 0;
|
||||
ctx.shadowBlur = this.properties["shadowSize"];
|
||||
ctx.roundRect(0,0,this.size[0],this.size[1],this.properties["shadowSize"]);
|
||||
ctx.fill();
|
||||
ctx.shadowColor = "rgba(0,0,0,0)";
|
||||
ctx.stroke();
|
||||
|
||||
ctx.fillStyle = "#A00";
|
||||
ctx.fillRect(this.size[0] * this.properties["x"] - 5, this.size[1] * this.properties["y"] - 5,10,10);
|
||||
},
|
||||
|
||||
onWidget: function(e,widget)
|
||||
{
|
||||
if(widget.name == "update")
|
||||
{
|
||||
this.lineargradient = null;
|
||||
this.setDirtyCanvas(true);
|
||||
}
|
||||
},
|
||||
|
||||
onExecute: function()
|
||||
{
|
||||
this.setOutputData(0, this.properties["x"] );
|
||||
this.setOutputData(1, this.properties["y"] );
|
||||
},
|
||||
|
||||
onMouseDown: function(e)
|
||||
{
|
||||
if(e.canvasY - this.pos[1] < 0)
|
||||
return false;
|
||||
|
||||
this.oldmouse = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ];
|
||||
this.captureInput(true);
|
||||
return true;
|
||||
},
|
||||
|
||||
onMouseMove: function(e)
|
||||
{
|
||||
if(!this.oldmouse) return;
|
||||
|
||||
var m = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ];
|
||||
|
||||
this.properties.x = m[0] / this.size[0];
|
||||
this.properties.y = m[1] / this.size[1];
|
||||
|
||||
if(this.properties.x > 1.0) this.properties.x = 1.0;
|
||||
else if(this.properties.x < 0.0) this.properties.x = 0.0;
|
||||
|
||||
if(this.properties.y > 1.0) this.properties.y = 1.0;
|
||||
else if(this.properties.y < 0.0) this.properties.y = 0.0;
|
||||
|
||||
this.oldmouse = m;
|
||||
this.setDirtyCanvas(true);
|
||||
},
|
||||
|
||||
onMouseUp: function(e)
|
||||
{
|
||||
if(this.oldmouse)
|
||||
{
|
||||
this.oldmouse = null;
|
||||
this.captureInput(false);
|
||||
}
|
||||
},
|
||||
|
||||
onMouseLeave: function(e)
|
||||
{
|
||||
//this.oldmouse = null;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
LiteGraph.registerNodeType("widget/button", {
|
||||
title: "Button",
|
||||
desc: "A send command button",
|
||||
|
||||
widgets: [{name:"test",text:"Test Button",type:"button"}],
|
||||
size: [100,40],
|
||||
properties:{text:"clickme",command:"",color:"#7AF",bgcolorTop:"#f0f0f0",bgcolorBottom:"#e0e0e0",fontsize:"16"},
|
||||
outputs:[["M","module"]],
|
||||
|
||||
createGradient: function(ctx)
|
||||
{
|
||||
this.lineargradient = ctx.createLinearGradient(0,0,0,this.size[1]);
|
||||
this.lineargradient.addColorStop(0,this.properties["bgcolorTop"]);
|
||||
this.lineargradient.addColorStop(1,this.properties["bgcolorBottom"]);
|
||||
},
|
||||
|
||||
drawVectorShape: function(ctx)
|
||||
{
|
||||
ctx.fillStyle = this.mouseOver ? this.properties["color"] : "#AAA";
|
||||
|
||||
if(this.clicking)
|
||||
ctx.fillStyle = "#FFF";
|
||||
|
||||
ctx.strokeStyle = "#AAA";
|
||||
ctx.roundRect(5,5,this.size[0] - 10,this.size[1] - 10,4);
|
||||
ctx.stroke();
|
||||
|
||||
if(this.mouseOver)
|
||||
ctx.fill();
|
||||
|
||||
//ctx.fillRect(5,20,this.size[0] - 10,this.size[1] - 30);
|
||||
|
||||
ctx.fillStyle = this.mouseOver ? "#000" : "#AAA";
|
||||
ctx.font = "bold " + this.properties["fontsize"] + "px Criticized,Tahoma";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(this.properties["text"],this.size[0]*0.5,this.size[1]*0.5 + 0.5*parseInt(this.properties["fontsize"]));
|
||||
ctx.textAlign = "left";
|
||||
},
|
||||
|
||||
drawBevelShape: function(ctx)
|
||||
{
|
||||
ctx.shadowColor = "#000";
|
||||
ctx.shadowOffsetX = 0;
|
||||
ctx.shadowOffsetY = 0;
|
||||
ctx.shadowBlur = this.properties["shadowSize"];
|
||||
|
||||
if(!this.lineargradient)
|
||||
this.createGradient(ctx);
|
||||
|
||||
ctx.fillStyle = this.mouseOver ? this.properties["color"] : this.lineargradient;
|
||||
if(this.clicking)
|
||||
ctx.fillStyle = "#444";
|
||||
|
||||
ctx.strokeStyle = "#FFF";
|
||||
ctx.roundRect(5,5,this.size[0] - 10,this.size[1] - 10,4);
|
||||
ctx.fill();
|
||||
ctx.shadowColor = "rgba(0,0,0,0)";
|
||||
ctx.stroke();
|
||||
|
||||
ctx.fillStyle = this.mouseOver ? "#000" : "#444";
|
||||
ctx.font = "bold " + this.properties["fontsize"] + "px Century Gothic";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(this.properties["text"],this.size[0]*0.5,this.size[1]*0.5 + 0.40*parseInt(this.properties["fontsize"]));
|
||||
ctx.textAlign = "left";
|
||||
},
|
||||
|
||||
onDrawForeground: function(ctx)
|
||||
{
|
||||
this.drawBevelShape(ctx);
|
||||
},
|
||||
|
||||
clickButton: function()
|
||||
{
|
||||
var module = this.getOutputModule(0);
|
||||
if(this.properties["command"] && this.properties["command"] != "")
|
||||
{
|
||||
if (! module.executeAction(this.properties["command"]) )
|
||||
this.trace("Error executing action in other module");
|
||||
}
|
||||
else if(module && module.onTrigger)
|
||||
{
|
||||
module.onTrigger();
|
||||
}
|
||||
},
|
||||
|
||||
onMouseDown: function(e)
|
||||
{
|
||||
if(e.canvasY - this.pos[1] < 2)
|
||||
return false;
|
||||
this.clickButton();
|
||||
this.clicking = true;
|
||||
return true;
|
||||
},
|
||||
|
||||
onMouseUp: function(e)
|
||||
{
|
||||
this.clicking = false;
|
||||
},
|
||||
|
||||
onExecute: function()
|
||||
{
|
||||
},
|
||||
|
||||
onWidget: function(e,widget)
|
||||
{
|
||||
if(widget.name == "test")
|
||||
{
|
||||
this.clickButton();
|
||||
}
|
||||
},
|
||||
|
||||
onPropertyChanged: function(name,value)
|
||||
{
|
||||
this.properties[name] = value;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
function WidgetText()
|
||||
{
|
||||
this.addInputs("",0);
|
||||
@@ -884,23 +657,6 @@ var LiteGraph = global.LiteGraph;
|
||||
this.setDirtyCanvas(true);
|
||||
}
|
||||
|
||||
WidgetText.prototype.onWidget = function(e,widget)
|
||||
{
|
||||
if(widget.name == "resize")
|
||||
this.resize();
|
||||
else if (widget.name == "led_text")
|
||||
{
|
||||
this.properties["font"] = "Digital";
|
||||
this.properties["glowSize"] = 4;
|
||||
this.setDirtyCanvas(true);
|
||||
}
|
||||
else if (widget.name == "normal_text")
|
||||
{
|
||||
this.properties["font"] = "Arial";
|
||||
this.setDirtyCanvas(true);
|
||||
}
|
||||
}
|
||||
|
||||
WidgetText.prototype.onPropertyChanged = function(name,value)
|
||||
{
|
||||
this.properties[name] = value;
|
||||
@@ -965,15 +721,6 @@ var LiteGraph = global.LiteGraph;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
WidgetPanel.prototype.onWidget = function(e,widget)
|
||||
{
|
||||
if(widget.name == "update")
|
||||
{
|
||||
this.lineargradient = null;
|
||||
this.setDirtyCanvas(true);
|
||||
}
|
||||
}
|
||||
|
||||
LiteGraph.registerNodeType("widget/panel", WidgetPanel );
|
||||
|
||||
})(this);
|
||||
Reference in New Issue
Block a user