media/litegraph_mini.js
/**
     * 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
     *
     * @class LGraphCanvas
     * @constructor
     * @param {HTMLCanvas} canvas the canvas where you want to render (it accepts a selector in string format or the canvas element itself)
     * @param {LGraph} graph [optional]
     * @param {Object} options [optional] { skip_rendering, autoresize, viewport }
     */
This class is in charge of rendering one graph inside a canvas. And provides all the interaction required.


This class is in charge of rendering one graph inside a canvas . And provides all the interaction required .
function LGraphCanvas(canvas, graph, options) {
        this.options = options = options || {};
        this.background_image = LGraphCanvas.DEFAULT_BACKGROUND_IMAGE;
        if (canvas && canvas.constructor === String) {
            canvas = document.querySelector(canvas);
        }
        this.ds = new DragAndScale();
        this.zoom_modify_alpha = true; 
        this.title_text_font = "" + LiteGraph.NODE_TEXT_SIZE + "px Arial";
        this.inner_text_font =
            "normal " + LiteGraph.NODE_SUBTEXT_SIZE + "px Arial";
        this.node_title_color = LiteGraph.NODE_TITLE_COLOR;
        this.default_link_color = LiteGraph.LINK_COLOR;
        this.default_connection_color = {
            input_off: "#778",
            input_on: "#7F7", 
            output_off: "#778",
            output_on: "#7F7" 
		};
        this.default_connection_color_byType = {
        }
        this.default_connection_color_byTypeOff = {
        };
        this.highquality_render = true;
        this.use_gradients = false; 
        this.editor_alpha = 1; 
        this.pause_rendering = false;
        this.clear_background = true;
		this.read_only = false; 
        this.render_only_selected = true;
        this.live_mode = false;
        this.show_info = true;
        this.allow_dragcanvas = true;
        this.allow_dragnodes = true;
        this.allow_interaction = true; 
        this.allow_searchbox = true;
        this.allow_reconnect_links = false; 
		this.align_to_grid = false; 
        this.drag_mode = false;
        this.dragging_rectangle = null;
        this.filter = null; 
		this.set_canvas_dirty_on_mouse_event = true; 
        this.always_render_background = false;
        this.render_shadows = true;
        this.render_canvas_border = true;
        this.render_connections_shadows = false; 
        this.render_connections_border = true;
        this.render_curved_connections = false;
        this.render_connection_arrows = false;
        this.render_collapsed_slots = true;
        this.render_execution_order = false;
        this.render_title_colored = true;
		this.render_link_tooltip = true;
        this.links_render_mode = LiteGraph.SPLINE_LINK;
        this.mouse = [0, 0]; 
        this.graph_mouse = [0, 0]; 
		this.canvas_mouse = this.graph_mouse; 
        this.onSearchBox = null;
        this.onSearchBoxSelection = null;
        this.onMouse = null;
        this.onDrawBackground = null; 
        this.onDrawForeground = null; 
        this.onDrawOverlay = null; 
		this.onDrawLinkTooltip = null; 
		this.onNodeMoved = null; 
		this.onSelectionChange = null; 
		this.onConnectingChange = null; 
		this.onBeforeChange = null; 
		this.onAfterChange = null; 
        this.connections_width = 3;
        this.round_radius = 8;
        this.current_node = null;
        this.node_widget = null; 
		this.over_link_center = null;
        this.last_mouse_position = [0, 0];
        this.visible_area = this.ds.visible_area;
        this.visible_links = [];
		this.viewport = options.viewport || null; 
        if (graph) {
            graph.attachCanvas(this);
        }
        this.setCanvas(canvas,options.skip_events);
        this.clear();
        if (!options.skip_render) {
            this.startRendering();
        }
        this.autoresize = options.autoresize;
    }
function LGraphCanvas ( canvas , graph , options ) { this . options = options = options || { } ; this . background_image = LGraphCanvas . DEFAULT_BACKGROUND_IMAGE ; if ( canvas && canvas . constructor === String ) { canvas = document . querySelector ( canvas ) ; } this . ds = new DragAndScale ( ) ; this . zoom_modify_alpha = true ; this . title_text_font = "" + LiteGraph . NODE_TEXT_SIZE + "px Arial" ; this . inner_text_font = "normal " + LiteGraph . NODE_SUBTEXT_SIZE + "px Arial" ; this . node_title_color = LiteGraph . NODE_TITLE_COLOR ; this . default_link_color = LiteGraph . LINK_COLOR ; this . default_connection_color = { input_off : "#778" , input_on : "#7F7" , output_off : "#778" , output_on : "#7F7" } ; this . default_connection_color_byType = { } this . default_connection_color_byTypeOff = { } ; this . highquality_render = true ; this . use_gradients = false ; this . editor_alpha = 1 ; this . pause_rendering = false ; this . clear_background = true ; this . read_only = false ; this . render_only_selected = true ; this . live_mode = false ; this . show_info = true ; this . allow_dragcanvas = true ; this . allow_dragnodes = true ; this . allow_interaction = true ; this . allow_searchbox = true ; this . allow_reconnect_links = false ; this . align_to_grid = false ; this . drag_mode = false ; this . dragging_rectangle = null ; this . filter = null ; this . set_canvas_dirty_on_mouse_event = true ; this . always_render_background = false ; this . render_shadows = true ; this . render_canvas_border = true ; this . render_connections_shadows = false ; this . render_connections_border = true ; this . render_curved_connections = false ; this . render_connection_arrows = false ; this . render_collapsed_slots = true ; this . render_execution_order = false ; this . render_title_colored = true ; this . render_link_tooltip = true ; this . links_render_mode = LiteGraph . SPLINE_LINK ; this . mouse = [ 0 , 0 ] ; this . graph_mouse = [ 0 , 0 ] ; this . canvas_mouse = this . graph_mouse ; this . onSearchBox = null ; this . onSearchBoxSelection = null ; this . onMouse = null ; this . onDrawBackground = null ; this . onDrawForeground = null ; this . onDrawOverlay = null ; this . onDrawLinkTooltip = null ; this . onNodeMoved = null ; this . onSelectionChange = null ; this . onConnectingChange = null ; this . onBeforeChange = null ; this . onAfterChange = null ; this . connections_width = 3 ; this . round_radius = 8 ; this . current_node = null ; this . node_widget = null ; this . over_link_center = null ; this . last_mouse_position = [ 0 , 0 ] ; this . visible_area = this . ds . visible_area ; this . visible_links = [ ] ; this . viewport = options . viewport || null ; if ( graph ) { graph . attachCanvas ( this ) ; } this . setCanvas ( canvas , options . skip_events ) ; this . clear ( ) ; if ( ! options . skip_render ) { this . startRendering ( ) ; } this . autoresize = options . autoresize ; }
This class is in charge of rendering one graph inside a canvas.
This class is in charge of rendering one graph inside a canvas .
//if(graph === undefined) //	throw ("No graph assigned"); //otherwise it generates ugly patterns when scaling down too much //"#BBD" //"#BBD" /*number: "#7F7",
            string: "#77F",
            boolean: "#F77",*/ /*number: "#474",
            string: "#447",
            boolean: "#744",*/ //set to true to render titlebar with gradients //used for transition //if set to true users cannot modify the graph //allow to control widgets, buttons, collapse, etc //allows to change a connection with having to redo it again //snap to grid //allows to filter to only accept some type of nodes in a graph //forces to redraw the canvas if the mouse does anything //too much cpu //mouse in canvas coordinates, where 0,0 is the top-left corner of the blue rectangle //mouse in graph coordinates, where 0,0 is the top-left corner of the blue rectangle //LEGACY: REMOVE THIS, USE GRAPH_MOUSE INSTEAD //to personalize the search box //callbacks //to render background objects (behind nodes and connections) in the canvas affected by transform //to render foreground objects (above nodes and connections) in the canvas affected by transform //to render foreground objects not affected by transform (for GUIs) //called when rendering a tooltip //called after moving a node //called if the selection changes //called before any link changes //called before modifying the graph //called after modifying the graph //used for widgets //to constraint render area to a portion of the canvas //link canvas and graph