diff --git a/guides/README.md b/guides/README.md index aa92945fe..a4fa4ba1d 100644 --- a/guides/README.md +++ b/guides/README.md @@ -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