This class is in charge of rendering one graph inside a canvas. And provides all the interaction required. Valid callbacks are: onNodeSelected, onNodeDeselected, onShowNodePanel, onNodeDblClicked

Param: canvas

the canvas where you want to render (it accepts a selector in string format or the canvas element itself)

Param: graph

Param: options

{ skip_rendering, autoresize }

Implements

Constructors

Properties

_bg_img _events_binded _graph_stack _highlight_input _highlight_input_slot _highlight_output _key_callback? _mousedown_callback? _mousemove_callback? _mouseup_callback? _mousewheel_callback? _ondrop_callback? _pattern _pattern_img align_to_grid allow_dragcanvas allow_dragnodes allow_interaction allow_reconnect_links allow_searchbox always_render_background autoresize? background_image bgcanvas bgctx block_click canvas canvas_mouse clear_background clear_background_color connecting_input connecting_node connecting_output connecting_pos connecting_slot connections_width ctx current_node default_link_color dirty_area dirty_bgcanvas? dirty_canvas? drag_mode dragging_canvas dragging_rectangle ds editor_alpha events filter fps frame graph graph_mouse highlighted_links highquality_render inner_text_font is_rendering last_click_position last_click_position_offset last_draw_time last_mouse last_mouse_dragging last_mouse_position last_mouseclick link_type_colors links_render_mode live_mode maxZoom minZoom mouse multi_select node_capturing_input node_dragged node_in_panel node_over node_panel node_title_color node_widget offset_mouse options_panel over_link_center pause_rendering pointer_is_double pointer_is_down prompt_box read_only render_canvas_border render_collapsed_slots render_connection_arrows render_connections render_connections_border render_connections_shadows render_curved_connections render_execution_order render_link_tooltip render_only_selected render_shadows render_subgraph_panels render_subgraph_stack_header render_time render_title_colored resizing_node round_radius search_box selected_group selected_group_moving selected_group_resizing selected_nodes set_canvas_dirty_on_mouse_event show_info skip_events title_text_font use_gradients viewport visible_area visible_links visible_nodes zoom_modify_alpha DEFAULT_BACKGROUND_IMAGE DEFAULT_CONNECTION_COLORS DEFAULT_CONNECTION_COLORS_BY_TYPE DEFAULT_CONNECTION_COLORS_BY_TYPE_OFF DEFAULT_LINK_TYPE_COLORS active_canvas active_node alignNodes boundaryNodesForSelection getBoundaryNodes gradients node_colors onGroupAdd onGroupAlign onMenuAdd onMenuCollapseAll onMenuNodeClone onMenuNodeCollapse onMenuNodeColors onMenuNodeEdit onMenuNodeMode onMenuNodePin onMenuNodeRemove onMenuNodeShapes onMenuNodeToParentGraph onMenuNodeToSubgraph onMenuNodeToSubgraphInputs onMenuNodeToSubgraphOutputs onMenuResizeNode onNodeAlign onResizeNode onShowMenuNodeProperties onShowPropertyEditor search_limit showMenuNodeOptionalInputs showMenuNodeOptionalOutputs

Accessors

Methods

_doNothing _doReturnTrue addGraphInputNode addGraphOutputNode adjustCanvasForHiDPI adjustMouseEvent adjustNodesSize alignNodes bindEvents blockClick boundaryNodesForSelection bringToFront centerOnNode checkDropItem checkPanels clear cloneSelection closeAllSubgraphs closePanels closeSubgraph computeConnectionPoint computeVisibleNodes convertCanvasToOffset convertEventToCanvasOffset convertOffsetToCanvas copyToClipboard createDefaultNodeForSlot createDialog createPanel cutToClipboard deleteSelectedNodes deselectAllNodes deselectNode draw drawBackCanvas drawButton drawConnections drawExecutionOrder drawFrontCanvas drawGroups drawInvisibleNode drawLinkTooltip drawNode drawNodeHighlight drawNodeShape drawNodeWidgets drawSubgraphPanel drawSubgraphPanelLeft drawSubgraphPanelRight enableWebGL findLinkCenterAtPos getBoundaryNodes getCanvasMenuOptions getCanvasWindow getExtraLinkMenuOptions? getExtraMenuOptions? getGroupMenuOptions getLinkMenuOptions getMenuOptions? getNodeMenuOptions isAreaClicked isOverNodeBox isOverNodeInput isOverNodeOutput onClear? onDrawBackground? onDrawForeground? onDrawLinkTooltip? onDrawOverlay? onDropItem? onGroupAlign onHoverChange? onMouse? onMouseDown? onNodeAlign onNodeDblClicked? onNodeDeselected? onNodeMoved? onNodeSelected? onNodeSelectionChange onRender? onRenderBackground? onSearchBox? onSearchBoxSelection? onSelectionChange? onShowNodePanel? openSubgraph pasteFromClipboard processContextMenu processDrop processKey processMouseDown processMouseMove processMouseUp processMouseWheel processNodeDblClicked processNodeSelected processNodeWidgets prompt renderInfo renderLink resize selectNode selectNodes sendToBack setCanvas setDirty setGraph setZoom showConnectionMenu showEditPropertyValue showLinkMenu showSearchBox showShowNodePanel showSubgraphPropertiesDialog showSubgraphPropertiesDialogRight startRendering stopRendering switchLiveMode touchHandler unbindEvents decodeHTML getFileExtension getPropertyPrintableValue

Constructors

  • Parameters

    • canvas: string | HTMLCanvasElement
    • Optional graph: LGraph
    • options: {
          autoresize?: boolean;
          skip_events?: boolean;
          skip_render?: boolean;
          viewport?: Vector4;
      } = {}
      • Optional autoresize?: boolean
      • Optional skip_events?: boolean
      • Optional skip_render?: boolean
      • Optional viewport?: Vector4

    Returns LGraphCanvas

Properties

_bg_img: HTMLImageElement = null
_events_binded: boolean = false
_graph_stack: GraphStackEntry[] = []
_highlight_input: Vector2 = null
_highlight_input_slot: INodeSlot = null
_highlight_output: Vector2 = null
_key_callback?: EventListener
_mousedown_callback?: EventListener
_mousemove_callback?: EventListener
_mouseup_callback?: EventListener
_mousewheel_callback?: EventListener
_ondrop_callback?: EventListener
_pattern: CanvasPattern = null
_pattern_img: HTMLImageElement = null
align_to_grid: false
allow_dragcanvas: boolean = true
allow_dragnodes: boolean = true
allow_interaction: boolean = true

allow to control widgets, buttons, collapse, etc

allow_reconnect_links: boolean = true

allows to change a connection with having to redo it again

allow_searchbox: boolean = true

No effect

always_render_background: boolean = false
autoresize?: boolean
background_image: string = LGraphCanvas.DEFAULT_BACKGROUND_IMAGE
bgcanvas: HTMLCanvasElement
bgctx: CanvasRenderingContext2D
block_click: boolean = false
canvas: HTMLCanvasElement
canvas_mouse: Vector2
clear_background: boolean = true
clear_background_color: string = null
connecting_input: INodeInputSlot = null
connecting_node: LGraphNode
connecting_output: INodeOutputSlot = null
connecting_pos: Vector2 = null
connecting_slot: number = null
connections_width: number = 3
ctx: CanvasRenderingContext2D
current_node: LGraphNode = null
default_link_color: string
dirty_area: Vector4
dirty_bgcanvas?: boolean
dirty_canvas?: boolean
drag_mode: boolean = false
dragging_canvas: boolean
dragging_rectangle: Float32Array = null
ds: DragAndScale = ...
editor_alpha: number = 1

used for transition

events: EventEmitter<{
    clear: (() => void);
    dropItem: ((e) => void);
    hoverChange: ((n, prev) => void);
    mouseDown: ((e) => void);
    nodeDblClicked: ((n) => void);
    nodeDeselected: ((n) => void);
    nodeMoved: ((n) => void);
    nodeSelected: ((n) => void);
    selectionChange: ((nodes) => void);
    showNodePanel: ((n) => void);
}> = ...

Type declaration

  • clear: (() => void)
      • (): void
      • Returns void

  • dropItem: ((e) => void)
      • (e): void
      • Parameters

        • e: DragEvent

        Returns void

  • hoverChange: ((n, prev) => void)
  • mouseDown: ((e) => void)
  • nodeDblClicked: ((n) => void)
  • nodeDeselected: ((n) => void)
  • nodeMoved: ((n) => void)
  • nodeSelected: ((n) => void)
  • selectionChange: ((nodes) => void)
      • (nodes): void
      • Parameters

        Returns void

  • showNodePanel: ((n) => void)
filter: any = null

allows to filter to only accept some type of nodes in a graph

fps: number
frame: number
graph: LGraph
graph_mouse: Vector2 = ...

mouse in graph coordinates, where 0,0 is the top-left corner of the blue rectangle

highlighted_links: Record<number, boolean>
highquality_render: boolean = true
inner_text_font: string
is_rendering: boolean
last_click_position: Vector2 = ...
last_click_position_offset: Vector2 = ...
last_draw_time: number
last_mouse: Vector2
last_mouse_dragging: boolean = false
last_mouse_position: Vector2 = ...

Possible duplicated with last_mouse https://github.com/jagenjo/litegraph.js/issues/70

last_mouseclick: number

Timestamp of last mouse click, defaults to 0

link_type_colors: Record<string, string> = {}
links_render_mode: LinkRenderMode = LinkRenderMode.SPLINE_LINK
live_mode: boolean = false
maxZoom: number = null
minZoom: number = null
mouse: Vector2 = ...

mouse in canvas coordinates, where 0,0 is the top-left corner of the blue rectangle

multi_select: boolean = false

allow selecting multi nodes without pressing extra keys

node_capturing_input: LGraphNode
node_dragged: LGraphNode
node_in_panel: LGraphNode
node_over: LGraphNode
node_panel: INodePanel = null
node_title_color: string
node_widget: [LGraphNode, IWidget<any, any>] = null
offset_mouse: Vector2 = ...

mouse in offset coordinates, where 0,0 is the top-left corner of the canvas DOM element

options_panel: IGraphDialog = null
over_link_center: LLink = null
pause_rendering: boolean = false
pointer_is_double: boolean = false
pointer_is_down: boolean = false
prompt_box: IGraphDialog = null
read_only: boolean = false

if set to true users cannot modify the graph

render_canvas_border: boolean = true
render_collapsed_slots: boolean = true
render_connection_arrows: boolean = false
render_connections: boolean = true
render_connections_border: boolean = true
render_connections_shadows: boolean = false

too much cpu

render_curved_connections: boolean = false
render_execution_order: boolean = false
render_link_tooltip: boolean = true
render_only_selected: boolean = true
render_shadows: boolean = true
render_subgraph_panels: boolean = true
render_subgraph_stack_header: boolean = true
render_time: number = 0
render_title_colored: boolean = true
resizing_node: LGraphNode = null
round_radius: number = 8
search_box: IGraphDialog = null
selected_group: LGraphGroup
selected_group_moving: boolean
selected_group_resizing: boolean
selected_nodes: Record<NodeID, LGraphNode>
set_canvas_dirty_on_mouse_event: boolean = true

forces to redraw the canvas if the mouse does anything

show_info: boolean = true
skip_events: boolean = false
title_text_font: string
use_gradients: boolean = false

set to true to render title bar with gradients

viewport: Vector4
visible_area: Float32Array
visible_links: LLink[] = []
visible_nodes: LGraphNode[]
zoom_modify_alpha: boolean = true
DEFAULT_BACKGROUND_IMAGE: string = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII="
DEFAULT_CONNECTION_COLORS: {
    input_off: string;
    input_on: string;
    output_off: string;
    output_on: string;
} = ...

Type declaration

  • input_off: string
  • input_on: string
  • output_off: string
  • output_on: string
DEFAULT_CONNECTION_COLORS_BY_TYPE: Record<string, string> = ...
DEFAULT_CONNECTION_COLORS_BY_TYPE_OFF: Record<string, string> = ...
DEFAULT_LINK_TYPE_COLORS: Record<string, string> = ...
active_canvas: LGraphCanvas = null
active_node: LGraphNode = null
alignNodes: ((nodes, direction, align_to?) => void) = LGraphCanvas_UI.alignNodes

Type declaration

    • (nodes, direction, align_to?): void
    • Parameters

      • nodes: LGraphNode[]

        a list of nodes

      • direction: "top" | "bottom" | "left" | "right"

        Direction to align the nodes

      • Optional align_to: LGraphNode

        Node to align to (if null, align to the furthest node in the given direction)

      Returns void

boundaryNodesForSelection: (() => {
    bottom: LGraphNode;
    left: LGraphNode;
    right: LGraphNode;
    top: LGraphNode;
}) = LGraphCanvas_UI.boundaryNodesForSelection

Determines the furthest nodes in each direction for the currently selected nodes

Type declaration

Returns

getBoundaryNodes: ((nodes) => {
    bottom: LGraphNode;
    left: LGraphNode;
    right: LGraphNode;
    top: LGraphNode;
}) = LGraphCanvas_UI.getBoundaryNodes

align nodes action

Type declaration

gradients: object = {}
node_colors: Record<string, NodeColor> = ...
onGroupAdd: ContextMenuEventListener = LGraphCanvas_UI.onGroupAdd

Create menu for Add Group

onGroupAlign: ((value, options, event, prev_menu) => void) = LGraphCanvas_UI.onGroupAlign

Type declaration

    • (value, options, event, prev_menu): void
    • Parameters

      Returns void

onMenuAdd: ((_value, _options, mouseEvent, prevMenu, callback?) => boolean) = LGraphCanvas_UI.onMenuAdd

Create menu for Add Node

Type declaration

    • (_value, _options, mouseEvent, prevMenu, callback?): boolean
    • Create menu for Add Node

      Parameters

      • _value: IContextMenuItem
      • _options: any
      • mouseEvent: any
      • prevMenu: any
      • Optional callback: ((node) => void)
          • (node): void
          • Parameters

            Returns void

      Returns boolean

onMenuCollapseAll: (() => void) = LGraphCanvas_UI.onMenuCollapseAll

Type declaration

    • (): void
    • Returns void

onMenuNodeClone: ContextMenuEventListener = LGraphCanvas_UI.onMenuNodeClone
onMenuNodeCollapse: ContextMenuEventListener = LGraphCanvas_UI.onMenuNodeCollapse
onMenuNodeColors: ContextMenuEventListener = LGraphCanvas_UI.onMenuNodeColors
onMenuNodeEdit: (() => void) = LGraphCanvas_UI.onMenuNodeEdit

Type declaration

    • (): void
    • Returns void

onMenuNodeMode: ContextMenuEventListener = LGraphCanvas_UI.onMenuNodeMode
onMenuNodePin: ContextMenuEventListener = LGraphCanvas_UI.onMenuNodePin
onMenuNodeRemove: ContextMenuEventListener = LGraphCanvas_UI.onMenuNodeRemove
onMenuNodeShapes: ContextMenuEventListener = LGraphCanvas_UI.onMenuNodeShapes
onMenuNodeToParentGraph: ContextMenuEventListener = LGraphCanvas_UI.onMenuNodeToParentGraph
onMenuNodeToSubgraph: ContextMenuEventListener = LGraphCanvas_UI.onMenuNodeToSubgraph
onMenuNodeToSubgraphInputs: ContextMenuEventListener = LGraphCanvas_UI.onMenuNodeToSubgraphInputs
onMenuNodeToSubgraphOutputs: ContextMenuEventListener = LGraphCanvas_UI.onMenuNodeToSubgraphOutputs
onMenuResizeNode: ContextMenuEventListener = LGraphCanvas_UI.onMenuResizeNode
onNodeAlign: ((value, options, event, prev_menu, node) => void) = LGraphCanvas_UI.onNodeAlign

Type declaration

onResizeNode: ContextMenuEventListener = LGraphCanvas_UI.onResizeNode
onShowMenuNodeProperties: ContextMenuEventListener = LGraphCanvas_UI.onShowMenuNodeProperties
onShowPropertyEditor: ContextMenuEventListener = LGraphCanvas_UI.onShowPropertyEditor
search_limit: number
showMenuNodeOptionalInputs: ContextMenuEventListener = LGraphCanvas_UI.showMenuNodeOptionalInputs
showMenuNodeOptionalOutputs: ContextMenuEventListener = LGraphCanvas_UI.showMenuNodeOptionalOutputs

Accessors

Methods

  • Parameters

    • nodes: LGraphNode[]

      a list of nodes

    • direction: "top" | "bottom" | "left" | "right"

      Direction to align the nodes

    • Optional align_to: LGraphNode

      Node to align to (if null, align to the furthest node in the given direction)

    Returns void

  • Parameters

    • title: string
    • options: {
          closable?: boolean;
          height?: number;
          onClose?: (() => void);
          onOpen?: (() => void);
          width?: number;
          window?: Window;
      } = {}
      • Optional closable?: boolean
      • Optional height?: number
      • Optional onClose?: (() => void)
          • (): void
          • Returns void

      • Optional onOpen?: (() => void)
          • (): void
          • Returns void

      • Optional width?: number
      • Optional window?: Window

    Returns IGraphPanel

  • 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

    • forceFG: boolean = false
    • forceBG: boolean = false

    Returns void

  • Parameters

    • x: number
    • y: number
    • w: number
    • h: number
    • Optional text: string
    • bgcolor: string = LiteGraph.NODE_DEFAULT_COLOR
    • hovercolor: string = "#555"
    • textcolor: string = LiteGraph.NODE_TEXT_COLOR
    • ignore_readonly: boolean = true

    Returns boolean

  • 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

    Returns void

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

    Parameters

    Returns boolean

  • returns slot index if a position (in graph space) is on top of a node input slot

    Parameters

    Returns number

  • returns the INDEX if a position (in graph space) is on top of a node output slot

    Parameters

    Returns number

    Method

    isOverNodeOuput

  • to render background objects (behind nodes and connections) in the canvas affected by transform

    Parameters

    • ctx: CanvasRenderingContext2D
    • visibleArea: Float32Array

    Returns void

  • to render foreground objects (above nodes and connections) in the canvas affected by transform

    Parameters

    • ctx: CanvasRenderingContext2D
    • visibleArea: Float32Array

    Returns void

  • to render foreground objects not affected by transform (for GUIs)

    Parameters

    • ctx: CanvasRenderingContext2D

    Returns void

  • draws a link between two points

    Parameters

    • ctx: CanvasRenderingContext2D
    • a: Vector2
    • b: Vector2

      start pos

    • link: LLink

      end pos

    • skipBorder: boolean

      the link object with all the link info

    • flow: boolean

      ignore the shadow of the link

    • Optional color: string

      show flow animation (for events)

    • Optional startDir: Dir

      the color for the link

    • Optional endDir: Dir

      the direction enum

    • Optional numSublines: number

      the direction enum

    Returns void

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

    Parameters

    • Optional width: number
    • Optional height: number

    Returns void

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

    Parameters

    • fg: boolean = false

      if the foreground canvas is dirty (the one containing the nodes)

    • bg: boolean = false

      if the background canvas is dirty (the one containing the wires)

    Returns void

  • Parameters

    • _event: MouseEvent
    • options: {
          do_type_filter?: boolean;
          hide_on_mouse_leave?: boolean;
          node_from?: LGraphNode;
          node_to?: LGraphNode;
          show_all_if_empty?: boolean;
          show_all_on_open?: boolean;
          show_general_after_typefiltered?: boolean;
          show_general_if_none_on_typefilter?: boolean;
          slotFrom?: INodeSlot | SlotNameOrIndex;
          type_filter_in?: SlotType;
          type_filter_out?: SlotType;
      } = {}
      • Optional do_type_filter?: boolean
      • Optional hide_on_mouse_leave?: boolean
      • Optional node_from?: LGraphNode
      • Optional node_to?: LGraphNode
      • Optional show_all_if_empty?: boolean
      • Optional show_all_on_open?: boolean
      • Optional show_general_after_typefiltered?: boolean
      • Optional show_general_if_none_on_typefilter?: boolean
      • Optional slotFrom?: INodeSlot | SlotNameOrIndex
      • Optional type_filter_in?: SlotType
      • Optional type_filter_out?: SlotType

    Returns IGraphDialog

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

    Parameters

    • Optional transition: boolean

    Returns void