From 88769e7f72eca6670454c7357f29241d99bcb679 Mon Sep 17 00:00:00 2001 From: inventivetalent Date: Fri, 19 Oct 2018 17:15:53 +0200 Subject: [PATCH 1/5] add arrow shape --- src/litegraph.js | 34 +++++++++++++++++++++++++++------- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/src/litegraph.js b/src/litegraph.js index 1f4af8aa3..6f7d041cc 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,19 @@ 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.beginPath(); + 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(); + + ctx.fill(); + } else { + ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2); + } ctx.fill(); @@ -5281,10 +5291,20 @@ 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.beginPath(); + 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(); + + ctx.stroke(); + ctx.fill(); + } else { + ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2); + } //trigger //if(slot.node_id != null && slot.slot == -1) From 1a9ee9fb0f607008789501f12fe11cbf893c7729 Mon Sep 17 00:00:00 2001 From: inventivetalent Date: Fri, 19 Oct 2018 17:20:10 +0200 Subject: [PATCH 2/5] remove unnecessary stroke/fill calls --- src/litegraph.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/litegraph.js b/src/litegraph.js index 6f7d041cc..651444a38 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -5250,8 +5250,6 @@ LGraphCanvas.prototype.drawNode = function(node, ctx ) ctx.lineTo(pos[0] - 4, (pos[1] + 6) + 0.5); ctx.lineTo(pos[0] - 4, (pos[1] - 6) + 0.5); ctx.closePath(); - - ctx.fill(); } else { ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2); } @@ -5299,9 +5297,6 @@ LGraphCanvas.prototype.drawNode = function(node, ctx ) ctx.lineTo(pos[0] - 4, (pos[1] + 6) + 0.5); ctx.lineTo(pos[0] - 4, (pos[1] - 6) + 0.5); ctx.closePath(); - - ctx.stroke(); - ctx.fill(); } else { ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2); } From 1bda53ec29fe2cdde664aefd332062cd5e616c8e Mon Sep 17 00:00:00 2001 From: inventivetalent Date: Fri, 19 Oct 2018 17:31:48 +0200 Subject: [PATCH 3/5] add arrows to collapsed node --- src/litegraph.js | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/litegraph.js b/src/litegraph.js index 651444a38..760932510 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -5347,10 +5347,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; } @@ -5366,10 +5372,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(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(node._collapsed_width, LiteGraph.NODE_TITLE_HEIGHT * -0.5, 4, 0, Math.PI * 2); + } ctx.fill(); ctx.stroke(); } From a4343cc6bbae4aaf46f0e2b81b00d359133bd259 Mon Sep 17 00:00:00 2001 From: inventivetalent Date: Fri, 19 Oct 2018 17:32:11 +0200 Subject: [PATCH 4/5] remove duplicate beginPath --- src/litegraph.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/litegraph.js b/src/litegraph.js index 760932510..525f87405 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -5245,7 +5245,6 @@ LGraphCanvas.prototype.drawNode = function(node, ctx ) 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.beginPath(); 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); @@ -5292,7 +5291,6 @@ LGraphCanvas.prototype.drawNode = function(node, ctx ) 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.beginPath(); 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); From afe62a9448c680ca68c27b185984a23f8c052e51 Mon Sep 17 00:00:00 2001 From: inventivetalent Date: Fri, 19 Oct 2018 17:35:33 +0200 Subject: [PATCH 5/5] fix output coords --- src/litegraph.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/litegraph.js b/src/litegraph.js index 525f87405..c96854141 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -5373,9 +5373,9 @@ LGraphCanvas.prototype.drawNode = function(node, ctx ) 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 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.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);