API Docs for:
Show:

LGraphCanvas Class

Defined in: ../src/litegraph.js:4164

marks as dirty the canvas, this way it will be rendered again

Constructor

LGraphCanvas

(
  • canvas
  • graph
  • options
)

Defined in ../src/litegraph.js:4164

Parameters:

  • canvas HTMLCanvas

    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 }

Methods

adjustMouseEvent

()

Defined in ../src/litegraph.js:5319

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

bindEvents

()

Defined in ../src/litegraph.js:4038

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

bringToFront

()

Defined in ../src/litegraph.js:5403

brings a node to front (above all other nodes)

centerOnNode

()

Defined in ../src/litegraph.js:5308

centers the camera on a given node

clear

()

Defined in ../src/litegraph.js:3837

clears all the data inside

closeSubgraph

(
  • assigns
)

Defined in ../src/litegraph.js:3938

closes a subgraph contained inside a node

Parameters:

computeVisibleNodes

()

Defined in ../src/litegraph.js:5436

checks which nodes are visible (inside the camera area)

convertCanvasToOffset

()

Defined in ../src/litegraph.js:5387

converts a coordinate from Canvas2D coordinates to graph space

convertOffsetToCanvas

()

Defined in ../src/litegraph.js:5378

converts a coordinate from graph coordinates to canvas2D coordinates

deleteSelectedNodes

()

Defined in ../src/litegraph.js:5291

deletes all nodes in the current selection from the graph

deselectAllNodes

()

Defined in ../src/litegraph.js:5268

removes all nodes from the current selection

deselectNode

()

Defined in ../src/litegraph.js:5242

removes a node from the current selection

draw

()

Defined in ../src/litegraph.js:5461

renders the whole canvas content, by rendering in two separated canvas, one containing the background grid and the connections, and one containing the nodes)

drawBackCanvas

()

Defined in ../src/litegraph.js:5659

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

drawConnections

()

Defined in ../src/litegraph.js:6311

draws every connection visible in the canvas OPTIMIZE THIS: precatch connections position instead of recomputing them every time

drawFrontCanvas

()

Defined in ../src/litegraph.js:5488

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

drawGroups

()

Defined in ../src/litegraph.js:6924

draws every group area in the background

drawNode

()

Defined in ../src/litegraph.js:5807

draws the given node inside the canvas

drawNodeShape

()

Defined in ../src/litegraph.js:6115

draws the shape of the given node in the canvas

drawNodeWidgets

()

Defined in ../src/litegraph.js:6663

draws the widgets stored inside a node

enableWebGL

()

Defined in ../src/litegraph.js:4138

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

getCanvasWindow

() Window

Defined in ../src/litegraph.js:4180

Used to attach the canvas in a popup

Returns:

Window:

returns the window where the canvas is attached (the DOM root node)

isOverNodeBox

()

Defined in ../src/litegraph.js:4876

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

isOverNodeInput

()

Defined in ../src/litegraph.js:4888

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

openSubgraph

(
  • graph
)

Defined in ../src/litegraph.js:3911

opens a graph contained inside a node in the current graph

Parameters:

processDrop

()

Defined in ../src/litegraph.js:5074

process a item drop event on top the canvas

processKey

()

Defined in ../src/litegraph.js:4917

process a key event

processMouseMove

()

Defined in ../src/litegraph.js:4501

Called when a mouse move event has to be processed

processMouseUp

()

Defined in ../src/litegraph.js:4675

Called when a mouse up event has to be processed

processMouseWheel

()

Defined in ../src/litegraph.js:4847

Called when a mouse wheel event has to be processed

processNodeWidgets

()

Defined in ../src/litegraph.js:6813

process an event on widgets

renderInfo

()

Defined in ../src/litegraph.js:5632

draws some useful stats in the corner of the canvas

resize

()

Defined in ../src/litegraph.js:6979

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

selectNode

()

Defined in ../src/litegraph.js:5192

selects a given node (or adds it to the current selection)

selectNodes

()

Defined in ../src/litegraph.js:5204

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

sendToBack

()

Defined in ../src/litegraph.js:5416

sends a node to the back (below all other nodes)

setCanvas

(
  • assigns
)

Defined in ../src/litegraph.js:3961

assigns a canvas

Parameters:

  • assigns Canvas

    a canvas (also accepts the ID of the element (not a selector)

setGraph

(
  • graph
)

Defined in ../src/litegraph.js:3880

assigns a graph, you can reasign graphs to the same canvas

Parameters:

setZoom

()

Defined in ../src/litegraph.js:5347

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

startRendering

()

Defined in ../src/litegraph.js:4194

starts rendering the content of the canvas when needed

stopRendering

()

Defined in ../src/litegraph.js:4218

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

switchLiveMode

()

Defined in ../src/litegraph.js:7002

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

unbindEvents

()

Defined in ../src/litegraph.js:4090

unbinds mouse events from the canvas