From 621f8cdb9ee3012cf33260a855bbb6c77b94cb2a Mon Sep 17 00:00:00 2001 From: Javi Agenjo Date: Mon, 5 Nov 2018 14:03:15 +0100 Subject: [PATCH 1/5] Update README.md info for widgets in nodes --- guides/README.md | 31 +++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/guides/README.md b/guides/README.md index a4fa4ba1d..11c558605 100644 --- a/guides/README.md +++ b/guides/README.md @@ -25,8 +25,8 @@ There are several callbacks that could be defined: * **onRemoved**: when removed from graph * **onStart**: when the graph starts playing * **onStop**: when the graph stops playing -* **onDrawForeground**: render the inside widgets inside the node -* **onDrawBackground**: render the background area inside the node (only in edit mode) +* **onDrawBackground**: render something inside the node (not visible in Live mode) +* **onDrawForeground**: render something inside the node * **onMouseDown,onMouseMove,onMouseUp,onMouseEnter,onMouseLeave** * **onDblClick**: double clicked in the editor * **onExecute**: execute the node @@ -76,6 +76,33 @@ When creating a class for a graph node here are some useful points: - you can alter the default priority of execution by defining the ```MyGraphNodeClass.priority``` (default is 0) - you can overwrite how the node is rendered using the ```onDrawBackground``` and ```onDrawForeground``` +### Custom Node Appearance + +You can draw something inside a node using the callbacks ```onDrawForeground``` and ```onDrawBackground```. The only difference is that onDrawForeground gets called in Live Mode and onDrawBackground not. + +You do not have to worry about the coordinates system, [0,0] is the top-left corner of the node content area (not the title). + +```js +node.onDrawForeground = function(canvas, ctx) +{ + if(this.flags.collapsed) + return; + ctx.save(); + ctx.fillColor = "black"; + ctx.fillRect(0,0,10,this.size[1]); + ctx.restore(); +} +``` + +### Custom Node Behaviour + +You can also grab events from the mouse in case your node has some sort of special interactivity. + +node.onMouseDown = function(e) +{ + +} + ## Integration From cc9e69774bf3cd3a6600116b8b0a3c5a7e9114ee Mon Sep 17 00:00:00 2001 From: Javi Agenjo Date: Mon, 5 Nov 2018 16:11:14 +0100 Subject: [PATCH 2/5] Update README.md --- guides/README.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/guides/README.md b/guides/README.md index 11c558605..46f593209 100644 --- a/guides/README.md +++ b/guides/README.md @@ -98,11 +98,19 @@ node.onDrawForeground = function(canvas, ctx) You can also grab events from the mouse in case your node has some sort of special interactivity. -node.onMouseDown = function(e) +```js +node.onMouseDown = function( event, canvas_pos, graphcanvas ) { - + return true; //return true is the event was used by your node, to block other behaviours } +``` +Other methods are: +- onMouseMove +- onMouseUp +- onMouseEnter +- onMouseLeave +- onKey ## Integration From 0ef98fcecb933e43527765e9245cf7967596273c Mon Sep 17 00:00:00 2001 From: Javi Agenjo Date: Mon, 5 Nov 2018 16:12:18 +0100 Subject: [PATCH 3/5] Update README.md --- guides/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/guides/README.md b/guides/README.md index 46f593209..f11560246 100644 --- a/guides/README.md +++ b/guides/README.md @@ -98,8 +98,10 @@ node.onDrawForeground = function(canvas, ctx) You can also grab events from the mouse in case your node has some sort of special interactivity. +The second parameter is the position in node coordinates, where 0,0 represents the top-left corner of the node content (below the title). + ```js -node.onMouseDown = function( event, canvas_pos, graphcanvas ) +node.onMouseDown = function( event, pos, graphcanvas ) { return true; //return true is the event was used by your node, to block other behaviours } From b3421fcd80681721350a8e944cc1c7c965f5ad99 Mon Sep 17 00:00:00 2001 From: Javi Agenjo Date: Mon, 5 Nov 2018 16:13:36 +0100 Subject: [PATCH 4/5] Update README.md --- guides/README.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/guides/README.md b/guides/README.md index f11560246..c3b155e5f 100644 --- a/guides/README.md +++ b/guides/README.md @@ -9,6 +9,39 @@ To extend the other classes all the methods contained in LGraphNode.prototype ar When you create a new node type you do not have to inherit from that class, when the node is registered all the methods are copied to your node prototype. +Here is an example of how to create your own node: + +```javascript +//node constructor class +function MyAddNode() +{ + this.addInput("A","number"); + this.addInput("B","number"); + this.addOutput("A+B","number"); + this.properties = { precision: 1 }; +} + +//name to show +MyAddNode.title = "Sum"; + +//function to call when the node is executed +MyAddNode.prototype.onExecute = function() +{ + var A = this.getInputData(0); + if( A === undefined ) + A = 0; + var B = this.getInputData(1); + if( B === undefined ) + B = 0; + this.setOutputData( 0, A + B ); +} + +//register in the system +LiteGraph.registerNodeType("basic/sum", MyAddNode ); + +``` + + ## Node settings There are several settings that could be defined per node: From 1be860b995136a53223715a5a7c615553102b327 Mon Sep 17 00:00:00 2001 From: Javi Agenjo Date: Mon, 5 Nov 2018 16:14:49 +0100 Subject: [PATCH 5/5] Update README.md --- guides/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/guides/README.md b/guides/README.md index c3b155e5f..6cd6d45cb 100644 --- a/guides/README.md +++ b/guides/README.md @@ -49,9 +49,9 @@ There are several settings that could be defined per node: * **properties**: object containing the properties that could be configured by the user * **shape**: the shape of the object (could be LiteGraph.BOX,LiteGraph.ROUND,LiteGraph.CARD) * **flags**: several flags -⋅⋅* **resizable**: if it can be resized dragging the corner -⋅⋅* **horizontal**: if the slots should be placed horizontally on the top and bottom of the node -⋅⋅* **clip_area**: clips the content when rendering the node + * **resizable**: if it can be resized dragging the corner + * **horizontal**: if the slots should be placed horizontally on the top and bottom of the node + * **clip_area**: clips the content when rendering the node There are several callbacks that could be defined: * **onAdded**: when added to graph