LGraphCanvas

LGraphCanvas

LGraphCanvas

Constructor

# new LGraphCanvas(canvas, graph, options)

Parameters:
Name Type Description
canvas HTMLCanvasElement the canvas where you want to render (it accepts a selector in string format or the canvas element itself)
graph LGraph [optional]
options Object [optional] { skip_rendering, autoresize }
Source:

Methods

# (static) adjustMouseEvent()

adds some useful properties to a mouse event, like the position in graph coordinates
Source:

# (static) bindEvents()

binds mouse, keyboard, touch and drag events to the canvas
Source:

# (static) blockClick()

used to block future mouse events (because of im gui)
Source:

# (static) bringToFront(node)

brings a node to front (above all other nodes)
Parameters:
Name Type Description
node LGraphNode
Source:

# (static) centerOnNode()

centers the camera on a given node
Source:

# (static) clear()

clears all the data inside
Source:

# (static) closeSubgraph()

closes a subgraph contained inside a node
Source:

# (static) computeConnectionPoint(a, b, t, startDiropt, endDiropt) → {Array.<number>}

returns the link center point based on curvature
Parameters:
Name Type Attributes Description
a
b
t
startDir <optional>
endDir <optional>
Source:
Returns:
Type
Array.<number>

# (static) computeVisibleNodes(nodesopt, outopt) → {Array.<LGraphNode>}

checks which nodes are visible (inside the camera area)
Parameters:
Name Type Attributes Description
nodes Array.<LGraphNode> <optional>
out Array.<LGraphNode> <optional>
Source:
Returns:
Type
Array.<LGraphNode>

# (static) convertCanvasToOffset()

converts a coordinate from Canvas2D coordinates to graph space
Source:

# (static) convertEventToCanvasOffset(e) → {Array}

converts event coordinates from canvas2D to graph coordinates
Parameters:
Name Type Description
e
Source:
Returns:
Type
Array

# (static) convertOffsetToCanvas()

converts a coordinate from graph coordinates to canvas2D coordinates
Source:

# (static) deleteSelectedNodes()

deletes all nodes in the current selection from the graph
Source:

# (static) deselectAllNodes()

removes all nodes from the current selection
Source:

# (static) deselectNode()

removes a node from the current selection
Source:

# (static) draw(force_canvasopt, force_bgcanvasopt)

renders the whole canvas content, by rendering in two separated canvas, one containing the background grid and the connections, and one containing the nodes)
Parameters:
Name Type Attributes Description
force_canvas boolean <optional>
force_bgcanvas boolean <optional>
Source:

# (static) drawBackCanvas()

draws the back canvas (the one containing the background and the connections)
Source:

# (static) drawButton(x, y, w, h, text, bgcoloropt, hovercoloropt, textcoloropt) → {*|boolean}

Draws a button into the canvas overlay and computes if it was clicked using the immediate gui paradigm
Parameters:
Name Type Attributes Description
x
y
w
h
text
bgcolor <optional>
hovercolor <optional>
textcolor <optional>
Source:
Returns:
Type
* | boolean

# (static) drawConnections()

draws every connection visible in the canvas OPTIMIZE THIS: pre-catch connections position instead of recomputing them every time
Source:

# (static) drawFrontCanvas()

draws the front canvas (the one containing all the nodes)
Source:

# (static) drawGroups()

draws every group area in the background
Source:

# (static) drawNode()

draws the given node inside the canvas
Source:

# (static) drawNodeShape()

draws the shape of the given node in the canvas
Source:

# (static) drawNodeWidgets()

draws the widgets stored inside a node
Source:

# (static) drawSubgraphPanel()

draws the panel in the corner that shows subgraph properties
Source:

# (static) enableWebGL()

this function allows to render the canvas using WebGL instead of Canvas2D this is useful if you plant to render 3D objects inside your nodes, it uses litegl.js for webgl and canvas2DtoWebGL to emulate the Canvas2D calls in webGL
Source:

# (static) getCanvasWindow() → {Window}

Used to attach the canvas in a popup
Source:
Returns:
returns the window where the canvas is attached (the DOM root node)
Type
Window

# (static) getCurrentGraph() → {LGraph}

returns the visualy active graph (in case there are more in the stack)
Source:
Returns:
the active graph
Type
LGraph

# (static) getTopGraph() → {LGraph}

returns the top level graph (in case there are subgraphs open on the canvas)
Source:
Returns:
graph
Type
LGraph

# (static) isOverNodeBox()

returns true if a position (in graph space) is on top of a node little corner box
Source:

# (static) isOverNodeInput()

returns true if a position (in graph space) is on top of a node input slot
Source:

# (static) onGroupAdd(info, entry, mouseEvent)

Parameters:
Name Type Description
info
entry
mouseEvent MouseEvent
Source:

# (static) onMenuCollapseAll()

Source:
To Do:
  • Need create event

# (static) onMenuNodeEdit()

Source:
To Do:
  • Need create event

# (static) onNodeSelectionChange(node)

Parameters:
Name Type Description
node
Source:
To Do:
  • Need create event

# (static) openSubgraph(graph)

opens a graph contained inside a node in the current graph
Parameters:
Name Type Description
graph LGraph
Source:

# (static) processDrop()

process a item drop event on top the canvas
Source:

# (static) processKey()

process a key event
Source:

# (static) processMouseMove()

Called when a mouse move event has to be processed
Source:

# (static) processMouseUp()

Called when a mouse up event has to be processed
Source:

# (static) processMouseWheel()

Called when a mouse wheel event has to be processed
Source:

# (static) processNodeWidgets()

process an event on widgets
Source:

# (static) renderFrame()

render a frame
Source:

# (static) renderInfo()

draws some useful stats in the corner of the canvas
Source:
draws a link between two points
Parameters:
Name Type Description
a vec2 start pos
b vec2 end pos
link Object the link object with all the link info
skipBorder boolean ignore the shadow of the link
flow boolean show flow animation (for events)
color string the color for the link
startDir number the direction enum
endDir number the direction enum
numSubline number number of sublines (useful to represent vec3 or rgb)
Source:

# (static) resize()

resizes the canvas to a given size, if no size is passed, then it tries to fill the parentNode
Source:

# (static) selectNode(node, addToCurrentSelection)

selects a given node (or adds it to the current selection)
Parameters:
Name Type Description
node LGraphNode
addToCurrentSelection boolean
Source:

# (static) selectNodes()

selects several nodes (or adds them to the current selection)
Source:

# (static) sendToBack(node)

sends a node to the back (below all other nodes)
Parameters:
Name Type Description
node LGraphNode
Source:

# (static) setCanvas(canvas, skipEvents)

assigns a canvas
Parameters:
Name Type Description
canvas HTMLCanvasElement | string | HTMLElement assigns a canvas (also accepts the ID of the element (not a selector))
skipEvents boolean
Source:

# (static) setDirty(fgcanvasopt, bgcanvasopt)

marks as dirty the canvas, this way it will be rendered again
Parameters:
Name Type Attributes Description
fgcanvas boolean <optional>
 if the foreground canvas is dirty (the one containing the nodes)
bgcanvas boolean <optional>
 if the background canvas is dirty (the one containing the wires)
Source:

# (static) setGraph(graph, skipClearopt)

assigns a graph, you can reassign graphs to the same canvas
Parameters:
Name Type Attributes Description
graph LGraph
skipClear boolean <optional>
Source:

# (static) setZoom()

changes the zoom level of the graph (default is 1), you can pass also a place used to pivot the zoom
Source:

# (static) startRendering()

starts rendering the content of the canvas when needed
Source:

# (static) stopRendering()

stops rendering the content of the canvas (to save resources)
Source:

# (static) switchLiveMode()

switches to live mode (node shapes are not rendered, only the content) this feature was designed when graphs where meant to create user interfaces
Source:

# (static) touchHandler(event)

Parameters:
Name Type Description
event TouchEvent
Source:

# (static) unbindEvents()

unbinds mouse events from the canvas
Source: