From f0d2f50d5060ebd303d56792bc1424487771f47e Mon Sep 17 00:00:00 2001 From: tamat Date: Thu, 15 Nov 2018 18:17:21 +0100 Subject: [PATCH] fixes --- build/litegraph.js | 460 +++++++++++------------------------------ src/litegraph.js | 168 ++++++++------- src/nodes/base.js | 39 ++-- src/nodes/interface.js | 253 ----------------------- 4 files changed, 238 insertions(+), 682 deletions(-) diff --git a/build/litegraph.js b/build/litegraph.js index d2dac42e2..37c27b8e0 100644 --- a/build/litegraph.js +++ b/build/litegraph.js @@ -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); diff --git a/src/litegraph.js b/src/litegraph.js index 5625da057..05e53ba74 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -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; diff --git a/src/nodes/base.js b/src/nodes/base.js index b48e3ba5d..717d935eb 100755 --- a/src/nodes/base.js +++ b/src/nodes/base.js @@ -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); diff --git a/src/nodes/interface.js b/src/nodes/interface.js index 130bdea35..d24b5d459 100755 --- a/src/nodes/interface.js +++ b/src/nodes/interface.js @@ -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); \ No newline at end of file