Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-04 07:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
tamat
2018-11-15 18:17:21 +01:00
parent a36ce25f23
commit f0d2f50d50
4 changed files with 238 additions and 682 deletions
Download Patch File Download Diff File Expand all files Collapse all files

460
build/litegraph.js
View File

@@ -1189,13 +1189,13 @@ LGraph.prototype.findNodesByTitle = function(title)
* @param {Array} nodes_list a list with all the nodes to search from, by default is all the nodes in the graph
* @return {LGraphNode} the node at this position or null
*/
LGraph.prototype.getNodeOnPos = function(x,y, nodes_list)
LGraph.prototype.getNodeOnPos = function( x, y, nodes_list, margin )
{
nodes_list = nodes_list || this._nodes;
for (var i = nodes_list.length - 1; i >= 0; i--)
{
var n = nodes_list[i];
if(n.isPointInside( x, y, 2 ))
if(n.isPointInside( x, y, margin ))
return n;
}
return null;
@@ -1923,7 +1923,10 @@ LGraphNode.prototype.serialize = function()
o.shape = this.shape;
if(this.onSerialize)
this.onSerialize(o);
{
if( this.onSerialize(o) )
console.warn("node onSerialize shouldnt return anything, data should be stored in the object pass in the first parameter");
}
return o;
}
@@ -2562,6 +2565,8 @@ LGraphNode.prototype.addWidget = function( type, name, value, callback, options
if(w.options.y !== undefined )
w.y = w.options.y;
if( !callback )
console.warn("LiteGraph addWidget('button',...) without a callback");
if( type == "combo" && !w.options.values )
throw("LiteGraph addWidget('combo',...) requires to pass values in options: { values:['red','blue'] }");
this.widgets.push(w);
@@ -2592,7 +2597,7 @@ LGraphNode.prototype.getBounding = function( out )
* @param {number} y
* @return {boolean}
*/
LGraphNode.prototype.isPointInside = function(x,y, margin, skip_title )
LGraphNode.prototype.isPointInside = function( x, y, margin, skip_title )
{
margin = margin || 0;
@@ -2832,7 +2837,7 @@ LGraphNode.prototype.disconnectOutput = function( slot, target_node )
//get output slot
var output = this.outputs[slot];
if(!output.links || output.links.length == 0)
if(!output || !output.links || output.links.length == 0)
return false;
//one of the output links in this slot
@@ -3775,7 +3780,7 @@ LGraphCanvas.prototype.processMouseDown = function(e)
ref_window.document.addEventListener("mousemove", this._mousemove_callback, true ); //catch for the entire window
ref_window.document.addEventListener("mouseup", this._mouseup_callback, true );
var node = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes );
var node = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes, 5 );
var skip_dragging = false;
var skip_action = false;
var now = LiteGraph.getTime();
@@ -3810,74 +3815,79 @@ LGraphCanvas.prototype.processMouseDown = function(e)
//not dragging mouse to connect two slots
if(!this.connecting_node && !node.flags.collapsed && !this.live_mode)
{
//search for outputs
if(node.outputs)
for(var i = 0, l = node.outputs.length; i < l; ++i)
{
var output = node.outputs[i];
var link_pos = node.getConnectionPos(false,i);
if( isInsideRectangle( e.canvasX, e.canvasY, link_pos[0] - 15, link_pos[1] - 10, 30,20) )
{
this.connecting_node = node;
this.connecting_output = output;
this.connecting_pos = node.getConnectionPos(false,i);
this.connecting_slot = i;
if (is_double_click) {
if (node.onOutputDblClick)
node.onOutputDblClick(i, e);
} else {
if (node.onOutputClick)
node.onOutputClick(i, e);
}
skip_action = true;
break;
}
}
//search for inputs
if(node.inputs)
for(var i = 0, l = node.inputs.length; i < l; ++i)
{
var input = node.inputs[i];
var link_pos = node.getConnectionPos( true, i );
if( isInsideRectangle(e.canvasX, e.canvasY, link_pos[0] - 15, link_pos[1] - 10, 30,20) )
{
if (is_double_click) {
if (node.onInputDblClick)
node.onInputDblClick(i, e);
} else {
if (node.onInputClick)
node.onInputClick(i, e);
}
if(input.link !== null)
{
var link_info = this.graph.links[ input.link ]; //before disconnecting
node.disconnectInput(i);
if( this.allow_reconnect_links || e.shiftKey )
{
this.connecting_node = this.graph._nodes_by_id[ link_info.origin_id ];
this.connecting_slot = link_info.origin_slot;
this.connecting_output = this.connecting_node.outputs[ this.connecting_slot ];
this.connecting_pos = this.connecting_node.getConnectionPos( false, this.connecting_slot);
}
this.dirty_bgcanvas = true;
skip_action = true;
}
}
}
//Search for corner
if( !skip_action && node.flags.resizable !== false && isInsideRectangle(e.canvasX, e.canvasY, node.pos[0] + node.size[0] - 5, node.pos[1] + node.size[1] - 5 ,5,5 ))
//Search for corner for resize
if( !skip_action && node.flags.resizable !== false && isInsideRectangle( e.canvasX, e.canvasY, node.pos[0] + node.size[0] - 5, node.pos[1] + node.size[1] - 5 ,10,10 ))
{
this.resizing_node = node;
this.canvas.style.cursor = "se-resize";
skip_action = true;
}
else
{
//search for outputs
if(node.outputs)
for(var i = 0, l = node.outputs.length; i < l; ++i)
{
var output = node.outputs[i];
var link_pos = node.getConnectionPos(false,i);
if( isInsideRectangle( e.canvasX, e.canvasY, link_pos[0] - 15, link_pos[1] - 10, 30,20) )
{
this.connecting_node = node;
this.connecting_output = output;
this.connecting_pos = node.getConnectionPos(false,i);
this.connecting_slot = i;
if( e.shiftKey )
node.disconnectOutput(i);
if (is_double_click) {
if (node.onOutputDblClick)
node.onOutputDblClick(i, e);
} else {
if (node.onOutputClick)
node.onOutputClick(i, e);
}
skip_action = true;
break;
}
}
//search for inputs
if(node.inputs)
for(var i = 0, l = node.inputs.length; i < l; ++i)
{
var input = node.inputs[i];
var link_pos = node.getConnectionPos( true, i );
if( isInsideRectangle(e.canvasX, e.canvasY, link_pos[0] - 15, link_pos[1] - 10, 30,20) )
{
if (is_double_click) {
if (node.onInputDblClick)
node.onInputDblClick(i, e);
} else {
if (node.onInputClick)
node.onInputClick(i, e);
}
if(input.link !== null)
{
var link_info = this.graph.links[ input.link ]; //before disconnecting
node.disconnectInput(i);
if( this.allow_reconnect_links || e.shiftKey )
{
this.connecting_node = this.graph._nodes_by_id[ link_info.origin_id ];
this.connecting_slot = link_info.origin_slot;
this.connecting_output = this.connecting_node.outputs[ this.connecting_slot ];
this.connecting_pos = this.connecting_node.getConnectionPos( false, this.connecting_slot);
}
this.dirty_bgcanvas = true;
skip_action = true;
}
}
}
} //not resizing
}
//Search for corner
@@ -3912,7 +3922,9 @@ LGraphCanvas.prototype.processMouseDown = function(e)
//if do not capture mouse
if( node.onMouseDown && node.onMouseDown( e, [e.canvasX - node.pos[0], e.canvasY - node.pos[1]], this ) )
{
block_drag_node = true;
}
else if(this.live_mode)
{
clicking_canvas_bg = true;
@@ -3973,6 +3985,7 @@ LGraphCanvas.prototype.processMouseDown = function(e)
this.last_mouse[0] = e.localX;
this.last_mouse[1] = e.localY;
this.last_mouseclick = LiteGraph.getTime();
this.last_mouse_dragging = true;
/*
if( (this.dirty_canvas || this.dirty_bgcanvas) && this.rendering_timer_id == null)
@@ -4011,6 +4024,7 @@ LGraphCanvas.prototype.processMouseMove = function(e)
this.last_mouse = mouse;
this.canvas_mouse[0] = e.canvasX;
this.canvas_mouse[1] = e.canvasY;
e.dragging = this.last_mouse_dragging;
if( this.node_widget )
{
@@ -4116,11 +4130,11 @@ LGraphCanvas.prototype.processMouseMove = function(e)
if( isInsideRectangle(e.canvasX, e.canvasY, node.pos[0] + node.size[0] - 5, node.pos[1] + node.size[1] - 5 ,5,5 ))
this.canvas.style.cursor = "se-resize";
else
this.canvas.style.cursor = null;
this.canvas.style.cursor = "";
}
}
else if(this.canvas)
this.canvas.style.cursor = null;
this.canvas.style.cursor = "";
if(this.node_capturing_input && this.node_capturing_input != node && this.node_capturing_input.onMouseMove)
{
@@ -4186,6 +4200,7 @@ LGraphCanvas.prototype.processMouseUp = function(e)
this.adjustMouseEvent(e);
var now = LiteGraph.getTime();
e.click_time = (now - this.last_mouseclick);
this.last_mouse_dragging = false;
if (e.which == 1) //left button
{
@@ -7333,6 +7348,8 @@ LGraphCanvas.prototype.processContextMenu = function( node, event )
if(slot) //on slot
{
menu_info = [];
if(slot && slot.output && slot.output.links && slot.output.links.length)
menu_info.push( { content: "Disconnect Links", slot: slot } );
menu_info.push( slot.locked ? "Cannot remove" : { content: "Remove Slot", slot: slot } );
menu_info.push( slot.nameLocked ? "Cannot rename" : { content: "Rename Slot", slot: slot } );
options.title = (slot.input ? slot.input.type : slot.output.type) || "*";
@@ -7374,6 +7391,15 @@ LGraphCanvas.prototype.processContextMenu = function( node, event )
node.removeOutput( info.slot );
return;
}
else if(v.content == "Disconnect Links")
{
var info = v.slot;
if(info.output)
node.disconnectOutput( info.slot );
else if(info.input)
node.disconnectInput( info.slot );
return;
}
else if( v.content == "Rename Slot")
{
var info = v.slot;
@@ -8297,12 +8323,6 @@ Constant.prototype.onDrawBackground = function(ctx)
this.outputs[0].label = this.properties["value"].toFixed(3);
}
Constant.prototype.onWidget = function(e,widget)
{
if(widget.name == "value")
this.setValue(widget.value);
}
LiteGraph.registerNodeType("basic/const", Constant);
@@ -8311,8 +8331,7 @@ function Watch()
{
this.size = [60,20];
this.addInput("value",0,{label:""});
this.addOutput("value",0,{label:""});
this.addProperty( "value", "" );
this.value = 0;
}
Watch.title = "Watch";
@@ -8320,20 +8339,32 @@ Watch.desc = "Show value of input";
Watch.prototype.onExecute = function()
{
this.properties.value = this.getInputData(0);
this.setOutputData(0, this.properties.value);
if( this.inputs[0] )
this.value = this.getInputData(0);
}
Watch.toString = function( o )
{
if( o == null )
return "null";
else if (o.constructor === Number )
return o.toFixed(3);
else if (o.constructor === Array )
{
var str = "[";
for(var i = 0; i < o.length; ++i)
str += Watch.toString(o[i]) + ((i+1) != o.length ? "," : "");
str += "]";
return str;
}
else
return String(o);
}
Watch.prototype.onDrawBackground = function(ctx)
{
//show the current value
if(this.inputs[0] && this.properties["value"] != null)
{
if (this.properties["value"].constructor === Number )
this.inputs[0].label = this.properties["value"].toFixed(3);
else
this.inputs[0].label = String(this.properties.value);
}
this.inputs[0].label = Watch.toString(this.value);
}
LiteGraph.registerNodeType("basic/watch", Watch);
@@ -9009,14 +9040,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")
@@ -9224,225 +9247,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);
@@ -9514,23 +9318,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;
@@ -9595,15 +9382,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);

168
src/litegraph.js
View File

@@ -1187,13 +1187,13 @@ LGraph.prototype.findNodesByTitle = function(title)
* @param {Array} nodes_list a list with all the nodes to search from, by default is all the nodes in the graph
* @return {LGraphNode} the node at this position or null
*/
LGraph.prototype.getNodeOnPos = function(x,y, nodes_list)
LGraph.prototype.getNodeOnPos = function( x, y, nodes_list, margin )
{
nodes_list = nodes_list || this._nodes;
for (var i = nodes_list.length - 1; i >= 0; i--)
{
var n = nodes_list[i];
if(n.isPointInside( x, y, 2 ))
if(n.isPointInside( x, y, margin ))
return n;
}
return null;
@@ -1921,7 +1921,10 @@ LGraphNode.prototype.serialize = function()
o.shape = this.shape;
if(this.onSerialize)
this.onSerialize(o);
{
if( this.onSerialize(o) )
console.warn("node onSerialize shouldnt return anything, data should be stored in the object pass in the first parameter");
}
return o;
}
@@ -2560,6 +2563,8 @@ LGraphNode.prototype.addWidget = function( type, name, value, callback, options
if(w.options.y !== undefined )
w.y = w.options.y;
if( !callback )
console.warn("LiteGraph addWidget('button',...) without a callback");
if( type == "combo" && !w.options.values )
throw("LiteGraph addWidget('combo',...) requires to pass values in options: { values:['red','blue'] }");
this.widgets.push(w);
@@ -2590,7 +2595,7 @@ LGraphNode.prototype.getBounding = function( out )
* @param {number} y
* @return {boolean}
*/
LGraphNode.prototype.isPointInside = function(x,y, margin, skip_title )
LGraphNode.prototype.isPointInside = function( x, y, margin, skip_title )
{
margin = margin || 0;
@@ -2830,7 +2835,7 @@ LGraphNode.prototype.disconnectOutput = function( slot, target_node )
//get output slot
var output = this.outputs[slot];
if(!output.links || output.links.length == 0)
if(!output || !output.links || output.links.length == 0)
return false;
//one of the output links in this slot
@@ -3773,7 +3778,7 @@ LGraphCanvas.prototype.processMouseDown = function(e)
ref_window.document.addEventListener("mousemove", this._mousemove_callback, true ); //catch for the entire window
ref_window.document.addEventListener("mouseup", this._mouseup_callback, true );
var node = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes );
var node = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes, 5 );
var skip_dragging = false;
var skip_action = false;
var now = LiteGraph.getTime();
@@ -3808,74 +3813,79 @@ LGraphCanvas.prototype.processMouseDown = function(e)
//not dragging mouse to connect two slots
if(!this.connecting_node && !node.flags.collapsed && !this.live_mode)
{
//search for outputs
if(node.outputs)
for(var i = 0, l = node.outputs.length; i < l; ++i)
{
var output = node.outputs[i];
var link_pos = node.getConnectionPos(false,i);
if( isInsideRectangle( e.canvasX, e.canvasY, link_pos[0] - 15, link_pos[1] - 10, 30,20) )
{
this.connecting_node = node;
this.connecting_output = output;
this.connecting_pos = node.getConnectionPos(false,i);
this.connecting_slot = i;
if (is_double_click) {
if (node.onOutputDblClick)
node.onOutputDblClick(i, e);
} else {
if (node.onOutputClick)
node.onOutputClick(i, e);
}
skip_action = true;
break;
}
}
//search for inputs
if(node.inputs)
for(var i = 0, l = node.inputs.length; i < l; ++i)
{
var input = node.inputs[i];
var link_pos = node.getConnectionPos( true, i );
if( isInsideRectangle(e.canvasX, e.canvasY, link_pos[0] - 15, link_pos[1] - 10, 30,20) )
{
if (is_double_click) {
if (node.onInputDblClick)
node.onInputDblClick(i, e);
} else {
if (node.onInputClick)
node.onInputClick(i, e);
}
if(input.link !== null)
{
var link_info = this.graph.links[ input.link ]; //before disconnecting
node.disconnectInput(i);
if( this.allow_reconnect_links || e.shiftKey )
{
this.connecting_node = this.graph._nodes_by_id[ link_info.origin_id ];
this.connecting_slot = link_info.origin_slot;
this.connecting_output = this.connecting_node.outputs[ this.connecting_slot ];
this.connecting_pos = this.connecting_node.getConnectionPos( false, this.connecting_slot);
}
this.dirty_bgcanvas = true;
skip_action = true;
}
}
}
//Search for corner
if( !skip_action && node.flags.resizable !== false && isInsideRectangle(e.canvasX, e.canvasY, node.pos[0] + node.size[0] - 5, node.pos[1] + node.size[1] - 5 ,5,5 ))
//Search for corner for resize
if( !skip_action && node.flags.resizable !== false && isInsideRectangle( e.canvasX, e.canvasY, node.pos[0] + node.size[0] - 5, node.pos[1] + node.size[1] - 5 ,10,10 ))
{
this.resizing_node = node;
this.canvas.style.cursor = "se-resize";
skip_action = true;
}
else
{
//search for outputs
if(node.outputs)
for(var i = 0, l = node.outputs.length; i < l; ++i)
{
var output = node.outputs[i];
var link_pos = node.getConnectionPos(false,i);
if( isInsideRectangle( e.canvasX, e.canvasY, link_pos[0] - 15, link_pos[1] - 10, 30,20) )
{
this.connecting_node = node;
this.connecting_output = output;
this.connecting_pos = node.getConnectionPos(false,i);
this.connecting_slot = i;
if( e.shiftKey )
node.disconnectOutput(i);
if (is_double_click) {
if (node.onOutputDblClick)
node.onOutputDblClick(i, e);
} else {
if (node.onOutputClick)
node.onOutputClick(i, e);
}
skip_action = true;
break;
}
}
//search for inputs
if(node.inputs)
for(var i = 0, l = node.inputs.length; i < l; ++i)
{
var input = node.inputs[i];
var link_pos = node.getConnectionPos( true, i );
if( isInsideRectangle(e.canvasX, e.canvasY, link_pos[0] - 15, link_pos[1] - 10, 30,20) )
{
if (is_double_click) {
if (node.onInputDblClick)
node.onInputDblClick(i, e);
} else {
if (node.onInputClick)
node.onInputClick(i, e);
}
if(input.link !== null)
{
var link_info = this.graph.links[ input.link ]; //before disconnecting
node.disconnectInput(i);
if( this.allow_reconnect_links || e.shiftKey )
{
this.connecting_node = this.graph._nodes_by_id[ link_info.origin_id ];
this.connecting_slot = link_info.origin_slot;
this.connecting_output = this.connecting_node.outputs[ this.connecting_slot ];
this.connecting_pos = this.connecting_node.getConnectionPos( false, this.connecting_slot);
}
this.dirty_bgcanvas = true;
skip_action = true;
}
}
}
} //not resizing
}
//Search for corner
@@ -3910,7 +3920,9 @@ LGraphCanvas.prototype.processMouseDown = function(e)
//if do not capture mouse
if( node.onMouseDown && node.onMouseDown( e, [e.canvasX - node.pos[0], e.canvasY - node.pos[1]], this ) )
{
block_drag_node = true;
}
else if(this.live_mode)
{
clicking_canvas_bg = true;
@@ -3971,6 +3983,7 @@ LGraphCanvas.prototype.processMouseDown = function(e)
this.last_mouse[0] = e.localX;
this.last_mouse[1] = e.localY;
this.last_mouseclick = LiteGraph.getTime();
this.last_mouse_dragging = true;
/*
if( (this.dirty_canvas || this.dirty_bgcanvas) && this.rendering_timer_id == null)
@@ -4009,6 +4022,7 @@ LGraphCanvas.prototype.processMouseMove = function(e)
this.last_mouse = mouse;
this.canvas_mouse[0] = e.canvasX;
this.canvas_mouse[1] = e.canvasY;
e.dragging = this.last_mouse_dragging;
if( this.node_widget )
{
@@ -4114,11 +4128,11 @@ LGraphCanvas.prototype.processMouseMove = function(e)
if( isInsideRectangle(e.canvasX, e.canvasY, node.pos[0] + node.size[0] - 5, node.pos[1] + node.size[1] - 5 ,5,5 ))
this.canvas.style.cursor = "se-resize";
else
this.canvas.style.cursor = null;
this.canvas.style.cursor = "";
}
}
else if(this.canvas)
this.canvas.style.cursor = null;
this.canvas.style.cursor = "";
if(this.node_capturing_input && this.node_capturing_input != node && this.node_capturing_input.onMouseMove)
{
@@ -4184,6 +4198,7 @@ LGraphCanvas.prototype.processMouseUp = function(e)
this.adjustMouseEvent(e);
var now = LiteGraph.getTime();
e.click_time = (now - this.last_mouseclick);
this.last_mouse_dragging = false;
if (e.which == 1) //left button
{
@@ -7331,6 +7346,8 @@ LGraphCanvas.prototype.processContextMenu = function( node, event )
if(slot) //on slot
{
menu_info = [];
if(slot && slot.output && slot.output.links && slot.output.links.length)
menu_info.push( { content: "Disconnect Links", slot: slot } );
menu_info.push( slot.locked ? "Cannot remove" : { content: "Remove Slot", slot: slot } );
menu_info.push( slot.nameLocked ? "Cannot rename" : { content: "Rename Slot", slot: slot } );
options.title = (slot.input ? slot.input.type : slot.output.type) || "*";
@@ -7372,6 +7389,15 @@ LGraphCanvas.prototype.processContextMenu = function( node, event )
node.removeOutput( info.slot );
return;
}
else if(v.content == "Disconnect Links")
{
var info = v.slot;
if(info.output)
node.disconnectOutput( info.slot );
else if(info.input)
node.disconnectInput( info.slot );
return;
}
else if( v.content == "Rename Slot")
{
var info = v.slot;

39
src/nodes/base.js
View File

@@ -356,12 +356,6 @@ Constant.prototype.onDrawBackground = function(ctx)
this.outputs[0].label = this.properties["value"].toFixed(3);
}
Constant.prototype.onWidget = function(e,widget)
{
if(widget.name == "value")
this.setValue(widget.value);
}
LiteGraph.registerNodeType("basic/const", Constant);
@@ -370,8 +364,7 @@ function Watch()
{
this.size = [60,20];
this.addInput("value",0,{label:""});
this.addOutput("value",0,{label:""});
this.addProperty( "value", "" );
this.value = 0;
}
Watch.title = "Watch";
@@ -379,20 +372,32 @@ Watch.desc = "Show value of input";
Watch.prototype.onExecute = function()
{
this.properties.value = this.getInputData(0);
this.setOutputData(0, this.properties.value);
if( this.inputs[0] )
this.value = this.getInputData(0);
}
Watch.toString = function( o )
{
if( o == null )
return "null";
else if (o.constructor === Number )
return o.toFixed(3);
else if (o.constructor === Array )
{
var str = "[";
for(var i = 0; i < o.length; ++i)
str += Watch.toString(o[i]) + ((i+1) != o.length ? "," : "");
str += "]";
return str;
}
else
return String(o);
}
Watch.prototype.onDrawBackground = function(ctx)
{
//show the current value
if(this.inputs[0] && this.properties["value"] != null)
{
if (this.properties["value"].constructor === Number )
this.inputs[0].label = this.properties["value"].toFixed(3);
else
this.inputs[0].label = String(this.properties.value);
}
this.inputs[0].label = Watch.toString(this.value);
}
LiteGraph.registerNodeType("basic/watch", Watch);

253
src/nodes/interface.js
View File

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