Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-03 06:47:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Javi Agenjo
2018-10-24 18:11:17 +02:00
committed by GitHub
parent 7663a64dc0
commit ccc30d4cf6
1 changed files with 40 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
guides/README.md
View File

@@ -7,6 +7,41 @@ Here is a list of useful info when working with LiteGraph
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.
## 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
* **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
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
* **onDrawForeground**: render the inside widgets inside the node
* **onDrawBackground**: render the background area inside the node (only in edit mode)
* **onMouseDown,onMouseMove,onMouseUp,onMouseEnter,onMouseLeave**
* **onDblClick**: double clicked in the editor
* **onExecute**: 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
* **onGetOutputs**: returns an array of possible outputs
* **onSerialize**: before serializing
* **onSelected**: selected in the editor
* **onDeselected**: deselected from the editor
* **onDropItem**: DOM item dropped over the node
* **onDropFile**: file dropped over the node
* **onConnectInput**: if returns false the incoming connection will be canceled
* **onConnectionsChange**: a connection changed (new one or removed) (LiteGraph.INPUT or LiteGraph.OUTPUT, slot, true if connected, link_info, input_info )
### Node slots
Every node could have several slots, stored in node.inputs and node.outputs.
@@ -23,8 +58,11 @@ Slots have the next information:
* **type**: string specifying the data type traveling through this link
* **link or links**: depending if the slot is input or ouput contains the id of the link or an array of ids
* **label**: optional, string used to rename the name as shown in the canvas.
To retrieve the data traveling through a link you can call node.getInputData or node.getOutputData
* **dir**: optional, could be LiteGraph.UP, LiteGraph.RIGHT, LiteGraph.DOWN, LiteGraph.LEFT
* **color_on**: color to render when it is connected
* **color_off**: color to render when it is not connected
To retrieve the data traveling through a link you can call ```node.getInputData``` or ```node.getOutputData```
### Define your Graph Node