diff --git a/src/litegraph.js b/src/litegraph.js index 1f4af8aa3..c96854141 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -50,6 +50,7 @@ var LiteGraph = global.LiteGraph = { ROUND_SHAPE: 2, CIRCLE_SHAPE: 3, CARD_SHAPE: 4, + ARROW_SHAPE: 5, //enums INPUT: 1, @@ -5241,10 +5242,16 @@ LGraphCanvas.prototype.drawNode = function(node, ctx ) ctx.beginPath(); - if (slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE) - ctx.rect((pos[0] - 6) + 0.5, (pos[1] - 5) + 0.5,14,10); - else - ctx.arc(pos[0],pos[1],4,0,Math.PI*2); + if (slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE) { + ctx.rect((pos[0] - 6) + 0.5, (pos[1] - 5) + 0.5, 14, 10); + } else if (slot.shape === LiteGraph.ARROW_SHAPE) { + ctx.moveTo(pos[0] + 8, pos[1] + 0.5); + ctx.lineTo(pos[0] - 4, (pos[1] + 6) + 0.5); + ctx.lineTo(pos[0] - 4, (pos[1] - 6) + 0.5); + ctx.closePath(); + } else { + ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2); + } ctx.fill(); @@ -5281,10 +5288,16 @@ LGraphCanvas.prototype.drawNode = function(node, ctx ) ctx.beginPath(); //ctx.rect( node.size[0] - 14,i*14,10,10); - if (slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE) + if (slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE) { ctx.rect((pos[0] - 6) + 0.5,(pos[1] - 5) + 0.5,14,10); - else - ctx.arc( pos[0],pos[1],4,0, Math.PI*2 ); + } else if (slot.shape === LiteGraph.ARROW_SHAPE) { + ctx.moveTo(pos[0] + 8, pos[1] + 0.5); + ctx.lineTo(pos[0] - 4, (pos[1] + 6) + 0.5); + ctx.lineTo(pos[0] - 4, (pos[1] - 6) + 0.5); + ctx.closePath(); + } else { + ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2); + } //trigger //if(slot.node_id != null && slot.slot == -1) @@ -5332,10 +5345,16 @@ LGraphCanvas.prototype.drawNode = function(node, ctx ) continue; ctx.fillStyle = slot.colorOn || this.default_connection_color.input_on; ctx.beginPath(); - if ( slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE) + if ( slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE) { ctx.rect(0.5, 4 - LiteGraph.NODE_TITLE_HEIGHT + 0.5,14,LiteGraph.NODE_TITLE_HEIGHT - 8); - else - ctx.arc( 0, LiteGraph.NODE_TITLE_HEIGHT * -0.5, 4, 0, Math.PI*2 ); + } else if (slot.shape === LiteGraph.ARROW_SHAPE) { + ctx.moveTo(8, LiteGraph.NODE_TITLE_HEIGHT * -0.5); + ctx.lineTo(-4, LiteGraph.NODE_TITLE_HEIGHT * -0.8); + ctx.lineTo(-4, LiteGraph.NODE_TITLE_HEIGHT * -0.2); + ctx.closePath(); + } else { + ctx.arc(0, LiteGraph.NODE_TITLE_HEIGHT * -0.5, 4, 0, Math.PI * 2); + } ctx.fill(); break; } @@ -5351,10 +5370,16 @@ LGraphCanvas.prototype.drawNode = function(node, ctx ) ctx.fillStyle = slot.colorOn || this.default_connection_color.output_on; ctx.strokeStyle = "black"; ctx.beginPath(); - if (slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE) + if (slot.type === LiteGraph.EVENT || slot.shape === LiteGraph.BOX_SHAPE) { ctx.rect( node._collapsed_width - 4 + 0.5, 4 - LiteGraph.NODE_TITLE_HEIGHT + 0.5,14,LiteGraph.NODE_TITLE_HEIGHT - 8); - else - ctx.arc( node._collapsed_width, LiteGraph.NODE_TITLE_HEIGHT * -0.5, 4, 0, Math.PI*2 ); + } else if (slot.shape === LiteGraph.ARROW_SHAPE) { + ctx.moveTo(node._collapsed_width + 6, LiteGraph.NODE_TITLE_HEIGHT * -0.5); + ctx.lineTo(node._collapsed_width - 6, LiteGraph.NODE_TITLE_HEIGHT * -0.8); + ctx.lineTo(node._collapsed_width - 6, LiteGraph.NODE_TITLE_HEIGHT * -0.2); + ctx.closePath(); + } else { + ctx.arc(node._collapsed_width, LiteGraph.NODE_TITLE_HEIGHT * -0.5, 4, 0, Math.PI * 2); + } ctx.fill(); ctx.stroke(); }