From b2279b611beceb20223351ee12900947cc7e39aa Mon Sep 17 00:00:00 2001 From: Javi Agenjo Date: Wed, 27 Nov 2019 09:12:16 +0100 Subject: [PATCH 1/9] Update README.md --- guides/README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/guides/README.md b/guides/README.md index a62652d60..a7932e99f 100644 --- a/guides/README.md +++ b/guides/README.md @@ -119,10 +119,12 @@ MyNodeClass.shape = LiteGraph.ROUND_SHAPE; 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). +Both functions receive the (Canvas2D rendering context)[https://developer.mozilla.org/es/docs/Web/API/CanvasRenderingContext2D] and the LGraphCanvas instance where the node is being rendered. + +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) +node.onDrawForeground = function(ctx, graphcanvas) { if(this.flags.collapsed) return; From 82e4f34e8a3101b1ed51743148e96adbe09f4b74 Mon Sep 17 00:00:00 2001 From: Javi Agenjo Date: Wed, 27 Nov 2019 09:13:37 +0100 Subject: [PATCH 2/9] Update README.md --- guides/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/README.md b/guides/README.md index a7932e99f..27f8f5b7c 100644 --- a/guides/README.md +++ b/guides/README.md @@ -119,7 +119,7 @@ MyNodeClass.shape = LiteGraph.ROUND_SHAPE; 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. -Both functions receive the (Canvas2D rendering context)[https://developer.mozilla.org/es/docs/Web/API/CanvasRenderingContext2D] and the LGraphCanvas instance where the node is being rendered. +Both functions receive the [Canvas2D rendering context](https://developer.mozilla.org/es/docs/Web/API/CanvasRenderingContext2D) and the LGraphCanvas instance where the node is being rendered. 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). From 72093f58b1efc6458b4624cf58d3789758a00be5 Mon Sep 17 00:00:00 2001 From: Javi Agenjo Date: Wed, 27 Nov 2019 09:23:43 +0100 Subject: [PATCH 3/9] Update README.md --- guides/README.md | 50 ++++++++++++++++++++++++++++++------------------ 1 file changed, 31 insertions(+), 19 deletions(-) diff --git a/guides/README.md b/guides/README.md index 27f8f5b7c..859eececd 100644 --- a/guides/README.md +++ b/guides/README.md @@ -1,38 +1,49 @@ # LiteGraph -Here is a list of useful info when working with LiteGraph +Here is a list of useful info when working with LiteGraph. +The library is divided in four levels: +* **LGraphNode**: the base class of a node (this library uses is own system of inheritance) +* **LGraph**: the container of a whole graph made of nodes +* **LGraphCanvas**: the class in charge of rendering/interaction with the nodes inside the browser +And in ```the src/``` folder there is also another class included: +* **LiteGraph.Editor**: A wrapper around LGraphCanvas that adds buttons around it. ## LGraphNode LGraphNode is the base class used for all the nodes classes. To extend the other classes all the methods contained in LGraphNode.prototype are copyed to the classes when registered. -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. +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. This is done inside the functions ```LiteGraph.registerNodeType(...)```. Here is an example of how to create your own node: ```javascript -//node constructor class +//your node constructor class function MyAddNode() { + //add some input slots this.addInput("A","number"); this.addInput("B","number"); + //add some output slots this.addOutput("A+B","number"); + //add some properties this.properties = { precision: 1 }; } -//name to show +//name to show on the canvas MyAddNode.title = "Sum"; //function to call when the node is executed MyAddNode.prototype.onExecute = function() { + //retrieve data from inputs var A = this.getInputData(0); if( A === undefined ) A = 0; var B = this.getInputData(1); if( B === undefined ) B = 0; + //assing data to otputs this.setOutputData( 0, A + B ); } @@ -44,30 +55,31 @@ LiteGraph.registerNodeType("basic/sum", MyAddNode ); ## Node settings -There are several settings that could be defined per node: -* **size**: ```[width,height]``` -* **properties**: object containing the properties that could be configured by the user +There are several settings that could be defined or modified per node: +* **size**: ```[width,height]``` the size of the area inside the node (excluding title). Every row is LiteGraph.NODE_SLOT_HEIGHT pixels height. +* **properties**: object containing the properties that could be configured by the user, and serialized when saving the graph * **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 + * **collapsed**: if it is shown collapsed (small) -There are several callbacks that could be defined: -* **onAdded**: when added to graph -* **onRemoved**: when removed from graph -* **onStart**: when the graph starts playing -* **onStop**: when the graph stops playing -* **onDrawBackground**: render something inside the node (not visible in Live mode) -* **onDrawForeground**: render something inside the node -* **onMouseDown,onMouseMove,onMouseUp,onMouseEnter,onMouseLeave** +There are several callbacks that could be defined by the user: +* **onAdded**: called when added to graph +* **onRemoved**: called when removed from graph +* **onStart**: called when the graph starts playing +* **onStop**: called when the graph stops playing +* **onDrawBackground**: render custom node content on canvas (not visible in Live mode) +* **onDrawForeground**: render custom node content on canvas (on top of slots) +* **onMouseDown,onMouseMove,onMouseUp,onMouseEnter,onMouseLeave** to catch mouse events * **onDblClick**: double clicked in the editor -* **onExecute**: execute the node +* **onExecute**: called when it is time to execute the node * **onPropertyChanged**: when a property is changed in the panel (return true to skip default behaviour) -* **onGetInputs**: returns an array of possible inputs +* **onGetInputs**: returns an array of possible inputs in the form of [ ["name","type"], [...], [...] ] * **onGetOutputs**: returns an array of possible outputs -* **onSerialize**: before serializing -* **onSelected**: selected in the editor +* **onSerialize**: before serializing, receives an object where to store data +* **onSelected**: selected in the editor, receives an object where to read data * **onDeselected**: deselected from the editor * **onDropItem**: DOM item dropped over the node * **onDropFile**: file dropped over the node From 2589992573fa48fbc9c7a15b52598e875826d6fc Mon Sep 17 00:00:00 2001 From: Javi Agenjo Date: Wed, 27 Nov 2019 09:24:47 +0100 Subject: [PATCH 4/9] Update README.md --- guides/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/guides/README.md b/guides/README.md index 859eececd..b7b672585 100644 --- a/guides/README.md +++ b/guides/README.md @@ -4,7 +4,8 @@ Here is a list of useful info when working with LiteGraph. The library is divided in four levels: * **LGraphNode**: the base class of a node (this library uses is own system of inheritance) * **LGraph**: the container of a whole graph made of nodes -* **LGraphCanvas**: the class in charge of rendering/interaction with the nodes inside the browser +* **LGraphCanvas**: the class in charge of rendering/interaction with the nodes inside the browser. + And in ```the src/``` folder there is also another class included: * **LiteGraph.Editor**: A wrapper around LGraphCanvas that adds buttons around it. From 9cdef701a03c6abef415a9733f754d4320a9d5c0 Mon Sep 17 00:00:00 2001 From: Javi Agenjo Date: Wed, 27 Nov 2019 09:26:22 +0100 Subject: [PATCH 5/9] Update README.md --- guides/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/README.md b/guides/README.md index b7b672585..32e92d76c 100644 --- a/guides/README.md +++ b/guides/README.md @@ -132,7 +132,7 @@ MyNodeClass.shape = LiteGraph.ROUND_SHAPE; 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. -Both functions receive the [Canvas2D rendering context](https://developer.mozilla.org/es/docs/Web/API/CanvasRenderingContext2D) and the LGraphCanvas instance where the node is being rendered. +Both functions receive the [Canvas2D rendering context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) and the LGraphCanvas instance where the node is being rendered. 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). From bd672f08775dc799c9ad80739c30f414b04075b0 Mon Sep 17 00:00:00 2001 From: Javi Agenjo Date: Wed, 27 Nov 2019 09:28:53 +0100 Subject: [PATCH 6/9] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 66b58d3f0..379c2535e 100755 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ Try it in the [demo site](http://tamats.com/projects/litegraph/demo). - Live mode system (hides the graph but calls nodes to render whatever they want, useful to create UIs) - Graphs can be executed in NodeJS - Highly customizable nodes (color, shape, slots vertical or horizontal, widgets, custom rendering) -- Easy to integrate in any JS application +- Easy to integrate in any JS application (one single file, no dependencies) ## Nodes provided Although it is easy to create new node types, LiteGraph comes with some default nodes that could be useful for many cases: From 4e47b901974c9104bbf64a7f19ffb921fa03c68c Mon Sep 17 00:00:00 2001 From: Javi Agenjo Date: Mon, 2 Dec 2019 12:15:01 +0100 Subject: [PATCH 7/9] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 379c2535e..782a0bbe2 100755 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ A library in Javascript to create graphs in the browser similar to Unreal Bluepr It can be integrated easily in any existing web applications and graphs can be run without the need of the editor. -Try it in the [demo site](http://tamats.com/projects/litegraph/demo). +Try it in the [demo site](https://tamats.com/projects/litegraph/demo). ![Node Graph](imgs/node_graph_example.png "WebGLStudio") From cfe7cc1bdb4f4e6cac1e9c32d5725ff780c7af60 Mon Sep 17 00:00:00 2001 From: Julien MOREAU-MATHIS Date: Tue, 3 Dec 2019 18:17:27 +0100 Subject: [PATCH 8/9] Fixed DTS for registered_node_types, node_types_by_file_extension, and Nodes in LiteGraph to properly take LGraphNodeConstructor instead of LGraphNode. --- src/litegraph.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/litegraph.d.ts b/src/litegraph.d.ts index a3abee85e..8c2a0e852 100644 --- a/src/litegraph.d.ts +++ b/src/litegraph.d.ts @@ -209,11 +209,11 @@ export const LiteGraph: { /** if set to true some nodes like Formula would be allowed to evaluate code that comes from unsafe sources (like node configuration), which could lead to exploits */ allow_scripts: boolean; /** node types by string */ - registered_node_types: Record; + registered_node_types: Record; /** used for dropping files in the canvas */ - node_types_by_file_extension: Record; + node_types_by_file_extension: Record; /** node types by class name */ - Nodes: Record; + Nodes: Record; /** used to add extra features to the search box */ searchbox_extras: Record< From 3c389266f968024f275a130876a2a9f5a5664ba8 Mon Sep 17 00:00:00 2001 From: Javi Agenjo Date: Tue, 3 Dec 2019 20:52:11 +0100 Subject: [PATCH 9/9] Update README.md --- guides/README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/guides/README.md b/guides/README.md index 32e92d76c..625ca2200 100644 --- a/guides/README.md +++ b/guides/README.md @@ -217,6 +217,19 @@ function MyNode() } ``` +# Execution Flow +To execute a graph you must call ```graph.runStep()```. + +This function will call the method ```node.onExecute()``` for every node in the graph. + +The order of execution is determined by the system according to the morphology of the graph (nodes without inputs are considered level 0, then nodes connected to nodes of level 0 are level 1, and so on). This order is computed only when the graph morphology changes (new nodes are created, connections change). + +It is up to the developer to decide how to handle inputs and outputs from inside the node. + +The data send through outputs using ```this.setOutputData(0,data)``` is stored in the link, so if the node connected through that link does ```this.getInputData(0)``` it will receive the same data sent. + +For rendering, the nodes are executed according to their order in the ```graph._nodes``` array, which changes when the user interact with the GraphCanvas (clicked nodes are moved to the back of the array so they are rendered the last). + ## Integration