mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 14:54:37 +00:00
1877 lines
39 KiB
HTML
1877 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>LGraphCanvas</title>
|
|
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
|
|
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
|
|
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
|
|
<link rel="icon" href="../assets/favicon.ico">
|
|
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
|
|
</head>
|
|
<body class="yui3-skin-sam">
|
|
|
|
<div id="doc">
|
|
<div id="hd" class="yui3-g header">
|
|
<div class="yui3-u-3-4">
|
|
<h1><img src="../assets/css/logo.png" title="" width="117" height="52"></h1>
|
|
</div>
|
|
<div class="yui3-u-1-4 version">
|
|
<em>API Docs for: </em>
|
|
</div>
|
|
</div>
|
|
<div id="bd" class="yui3-g">
|
|
|
|
<div class="yui3-u-1-4">
|
|
<div id="docs-sidebar" class="sidebar apidocs">
|
|
<div id="api-list">
|
|
<h2 class="off-left">APIs</h2>
|
|
<div id="api-tabview" class="tabview">
|
|
<ul class="tabs">
|
|
<li><a href="#api-classes">Classes</a></li>
|
|
<li><a href="#api-modules">Modules</a></li>
|
|
</ul>
|
|
|
|
<div id="api-tabview-filter">
|
|
<input type="search" id="api-filter" placeholder="Type to filter APIs">
|
|
</div>
|
|
|
|
<div id="api-tabview-panel">
|
|
<ul id="api-classes" class="apis classes">
|
|
<li><a href="../classes/ContextMenu.html">ContextMenu</a></li>
|
|
<li><a href="../classes/LGraph.html">LGraph</a></li>
|
|
<li><a href="../classes/LGraphCanvas.html">LGraphCanvas</a></li>
|
|
<li><a href="../classes/LGraphNode.html">LGraphNode</a></li>
|
|
<li><a href="../classes/LiteGraph.html">LiteGraph</a></li>
|
|
</ul>
|
|
|
|
|
|
<ul id="api-modules" class="apis modules">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="yui3-u-3-4">
|
|
<div id="api-options">
|
|
Show:
|
|
<label for="api-show-inherited">
|
|
<input type="checkbox" id="api-show-inherited" checked>
|
|
Inherited
|
|
</label>
|
|
|
|
<label for="api-show-protected">
|
|
<input type="checkbox" id="api-show-protected">
|
|
Protected
|
|
</label>
|
|
|
|
<label for="api-show-private">
|
|
<input type="checkbox" id="api-show-private">
|
|
Private
|
|
</label>
|
|
<label for="api-show-deprecated">
|
|
<input type="checkbox" id="api-show-deprecated">
|
|
Deprecated
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div class="apidocs">
|
|
<div id="docs-main">
|
|
<div class="content">
|
|
<h1>LGraphCanvas Class</h1>
|
|
<div class="box meta">
|
|
|
|
|
|
<div class="foundat">
|
|
Defined in: <a href="../files/.._src_litegraph.js.html#l3624"><code>../src/litegraph.js:3624</code></a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="box intro">
|
|
<p>marks as dirty the canvas, this way it will be rendered again</p>
|
|
|
|
</div>
|
|
|
|
<div class="constructor">
|
|
<h2>Constructor</h2>
|
|
<div id="method_LGraphCanvas" class="method item">
|
|
<h3 class="name"><code>LGraphCanvas</code></h3>
|
|
|
|
<div class="args">
|
|
<span class="paren">(</span><ul class="args-list inline commas">
|
|
<li class="arg">
|
|
<code>canvas</code>
|
|
</li>
|
|
<li class="arg">
|
|
<code>graph</code>
|
|
</li>
|
|
<li class="arg">
|
|
<code>options</code>
|
|
</li>
|
|
</ul><span class="paren">)</span>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l3624"><code>../src/litegraph.js:3624</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
|
|
</div>
|
|
|
|
<div class="params">
|
|
<h4>Parameters:</h4>
|
|
|
|
<ul class="params-list">
|
|
<li class="param">
|
|
<code class="param-name">canvas</code>
|
|
<span class="type">HTMLCanvas</span>
|
|
|
|
|
|
<div class="param-description">
|
|
<p>the canvas where you want to render (it accepts a selector in string format or the canvas element itself)</p>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
<li class="param">
|
|
<code class="param-name">graph</code>
|
|
<span class="type"><a href="../classes/LGraph.html" class="crosslink">LGraph</a></span>
|
|
|
|
|
|
<div class="param-description">
|
|
<p>[optional]</p>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
<li class="param">
|
|
<code class="param-name">options</code>
|
|
<span class="type">Object</span>
|
|
|
|
|
|
<div class="param-description">
|
|
<p>[optional] { skip_rendering, autoresize }</p>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="classdocs" class="tabview">
|
|
<ul class="api-class-tabs">
|
|
<li class="api-class-tab index"><a href="#index">Index</a></li>
|
|
|
|
<li class="api-class-tab methods"><a href="#methods">Methods</a></li>
|
|
</ul>
|
|
|
|
<div>
|
|
<div id="index" class="api-class-tabpanel index">
|
|
<h2 class="off-left">Item Index</h2>
|
|
|
|
<div class="index-section methods">
|
|
<h3>Methods</h3>
|
|
|
|
<ul class="index-list methods">
|
|
<li class="index-item method">
|
|
<a href="#method_adjustMouseEvent">adjustMouseEvent</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_bindEvents">bindEvents</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_bringToFront">bringToFront</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_centerOnNode">centerOnNode</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_clear">clear</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_closeSubgraph">closeSubgraph</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_computeVisibleNodes">computeVisibleNodes</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_convertCanvasToOffset">convertCanvasToOffset</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_convertOffsetToCanvas">convertOffsetToCanvas</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_deleteSelectedNodes">deleteSelectedNodes</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_deselectAllNodes">deselectAllNodes</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_deselectNode">deselectNode</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_draw">draw</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_drawBackCanvas">drawBackCanvas</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_drawConnections">drawConnections</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_drawFrontCanvas">drawFrontCanvas</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_drawGroups">drawGroups</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_drawNode">drawNode</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_drawNodeShape">drawNodeShape</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_drawNodeWidgets">drawNodeWidgets</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_enableWebGL">enableWebGL</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_getCanvasWindow">getCanvasWindow</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_isOverNodeBox">isOverNodeBox</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_isOverNodeInput">isOverNodeInput</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_openSubgraph">openSubgraph</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_processDrop">processDrop</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_processKey">processKey</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_processMouseMove">processMouseMove</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_processMouseUp">processMouseUp</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_processMouseWheel">processMouseWheel</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_processNodeWidgets">processNodeWidgets</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_renderInfo">renderInfo</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_renderLink">renderLink</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_resize">resize</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_selectNode">selectNode</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_selectNodes">selectNodes</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_sendToBack">sendToBack</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_setCanvas">setCanvas</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_setGraph">setGraph</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_setZoom">setZoom</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_startRendering">startRendering</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_stopRendering">stopRendering</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_switchLiveMode">switchLiveMode</a>
|
|
|
|
</li>
|
|
<li class="index-item method">
|
|
<a href="#method_unbindEvents">unbindEvents</a>
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div id="methods" class="api-class-tabpanel">
|
|
<h2 class="off-left">Methods</h2>
|
|
|
|
<div id="method_adjustMouseEvent" class="method item">
|
|
<h3 class="name"><code>adjustMouseEvent</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4730"><code>../src/litegraph.js:4730</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>adds some useful properties to a mouse event, like the position in graph coordinates</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_bindEvents" class="method item">
|
|
<h3 class="name"><code>bindEvents</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l3498"><code>../src/litegraph.js:3498</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>binds mouse, keyboard, touch and drag events to the canvas</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_bringToFront" class="method item">
|
|
<h3 class="name"><code>bringToFront</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4816"><code>../src/litegraph.js:4816</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>brings a node to front (above all other nodes)</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_centerOnNode" class="method item">
|
|
<h3 class="name"><code>centerOnNode</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4719"><code>../src/litegraph.js:4719</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>centers the camera on a given node</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_clear" class="method item">
|
|
<h3 class="name"><code>clear</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l3306"><code>../src/litegraph.js:3306</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>clears all the data inside</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_closeSubgraph" class="method item">
|
|
<h3 class="name"><code>closeSubgraph</code></h3>
|
|
|
|
<div class="args">
|
|
<span class="paren">(</span><ul class="args-list inline commas">
|
|
<li class="arg">
|
|
<code>assigns</code>
|
|
</li>
|
|
</ul><span class="paren">)</span>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l3406"><code>../src/litegraph.js:3406</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>closes a subgraph contained inside a node</p>
|
|
|
|
</div>
|
|
|
|
<div class="params">
|
|
<h4>Parameters:</h4>
|
|
|
|
<ul class="params-list">
|
|
<li class="param">
|
|
<code class="param-name">assigns</code>
|
|
<span class="type"><a href="../classes/LGraph.html" class="crosslink">LGraph</a></span>
|
|
|
|
|
|
<div class="param-description">
|
|
<p>a graph</p>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_computeVisibleNodes" class="method item">
|
|
<h3 class="name"><code>computeVisibleNodes</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4849"><code>../src/litegraph.js:4849</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>checks which nodes are visible (inside the camera area)</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_convertCanvasToOffset" class="method item">
|
|
<h3 class="name"><code>convertCanvasToOffset</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4798"><code>../src/litegraph.js:4798</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>converts a coordinate in graphcanvas space to canvas2D space (NAME IS CONFUSION, SHOULD BE THE OTHER WAY AROUND)</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_convertOffsetToCanvas" class="method item">
|
|
<h3 class="name"><code>convertOffsetToCanvas</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4786"><code>../src/litegraph.js:4786</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>converts a coordinate in canvas2D space to graphcanvas space (NAME IS CONFUSION, SHOULD BE THE OTHER WAY AROUND)</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_deleteSelectedNodes" class="method item">
|
|
<h3 class="name"><code>deleteSelectedNodes</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4702"><code>../src/litegraph.js:4702</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>deletes all nodes in the current selection from the graph</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_deselectAllNodes" class="method item">
|
|
<h3 class="name"><code>deselectAllNodes</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4679"><code>../src/litegraph.js:4679</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>removes all nodes from the current selection</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_deselectNode" class="method item">
|
|
<h3 class="name"><code>deselectNode</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4653"><code>../src/litegraph.js:4653</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>removes a node from the current selection</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_draw" class="method item">
|
|
<h3 class="name"><code>draw</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4874"><code>../src/litegraph.js:4874</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>renders the whole canvas content, by rendering in two separated canvas, one containing the background grid and the connections, and one containing the nodes)</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_drawBackCanvas" class="method item">
|
|
<h3 class="name"><code>drawBackCanvas</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l5064"><code>../src/litegraph.js:5064</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>draws the back canvas (the one containing the background and the connections)</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_drawConnections" class="method item">
|
|
<h3 class="name"><code>drawConnections</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l5639"><code>../src/litegraph.js:5639</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>draws every connection visible in the canvas
|
|
OPTIMIZE THIS: precatch connections position instead of recomputing them every time</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_drawFrontCanvas" class="method item">
|
|
<h3 class="name"><code>drawFrontCanvas</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4905"><code>../src/litegraph.js:4905</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>draws the front canvas (the one containing all the nodes)</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_drawGroups" class="method item">
|
|
<h3 class="name"><code>drawGroups</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l5990"><code>../src/litegraph.js:5990</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>draws every group area in the background</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_drawNode" class="method item">
|
|
<h3 class="name"><code>drawNode</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l5196"><code>../src/litegraph.js:5196</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>draws the given node inside the canvas</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_drawNodeShape" class="method item">
|
|
<h3 class="name"><code>drawNodeShape</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l5467"><code>../src/litegraph.js:5467</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>draws the shape of the given node in the canvas</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_drawNodeWidgets" class="method item">
|
|
<h3 class="name"><code>drawNodeWidgets</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l5815"><code>../src/litegraph.js:5815</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>draws the widgets stored inside a node</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_enableWebGL" class="method item">
|
|
<h3 class="name"><code>enableWebGL</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l3598"><code>../src/litegraph.js:3598</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>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</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_getCanvasWindow" class="method item">
|
|
<h3 class="name"><code>getCanvasWindow</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
<span class="returns-inline">
|
|
<span class="type">Window</span>
|
|
</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l3640"><code>../src/litegraph.js:3640</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>Used to attach the canvas in a popup</p>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="returns">
|
|
<h4>Returns:</h4>
|
|
|
|
<div class="returns-description">
|
|
<span class="type">Window</span>:
|
|
<p>returns the window where the canvas is attached (the DOM root node)</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div id="method_isOverNodeBox" class="method item">
|
|
<h3 class="name"><code>isOverNodeBox</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4296"><code>../src/litegraph.js:4296</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>retuns true if a position (in graph space) is on top of a node little corner box</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_isOverNodeInput" class="method item">
|
|
<h3 class="name"><code>isOverNodeInput</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4308"><code>../src/litegraph.js:4308</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>retuns true if a position (in graph space) is on top of a node input slot</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_openSubgraph" class="method item">
|
|
<h3 class="name"><code>openSubgraph</code></h3>
|
|
|
|
<div class="args">
|
|
<span class="paren">(</span><ul class="args-list inline commas">
|
|
<li class="arg">
|
|
<code>graph</code>
|
|
</li>
|
|
</ul><span class="paren">)</span>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l3379"><code>../src/litegraph.js:3379</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>opens a graph contained inside a node in the current graph</p>
|
|
|
|
</div>
|
|
|
|
<div class="params">
|
|
<h4>Parameters:</h4>
|
|
|
|
<ul class="params-list">
|
|
<li class="param">
|
|
<code class="param-name">graph</code>
|
|
<span class="type"><a href="../classes/LGraph.html" class="crosslink">LGraph</a></span>
|
|
|
|
|
|
<div class="param-description">
|
|
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_processDrop" class="method item">
|
|
<h3 class="name"><code>processDrop</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4485"><code>../src/litegraph.js:4485</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>process a item drop event on top the canvas</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_processKey" class="method item">
|
|
<h3 class="name"><code>processKey</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4332"><code>../src/litegraph.js:4332</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>process a key event</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_processMouseMove" class="method item">
|
|
<h3 class="name"><code>processMouseMove</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l3921"><code>../src/litegraph.js:3921</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>Called when a mouse move event has to be processed</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_processMouseUp" class="method item">
|
|
<h3 class="name"><code>processMouseUp</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4112"><code>../src/litegraph.js:4112</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>Called when a mouse up event has to be processed</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_processMouseWheel" class="method item">
|
|
<h3 class="name"><code>processMouseWheel</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4263"><code>../src/litegraph.js:4263</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>Called when a mouse wheel event has to be processed</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_processNodeWidgets" class="method item">
|
|
<h3 class="name"><code>processNodeWidgets</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l5911"><code>../src/litegraph.js:5911</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>process an event on widgets</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_renderInfo" class="method item">
|
|
<h3 class="name"><code>renderInfo</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l5038"><code>../src/litegraph.js:5038</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>draws some useful stats in the corner of the canvas</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_renderLink" class="method item">
|
|
<h3 class="name"><code>renderLink</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l5694"><code>../src/litegraph.js:5694</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>draws a link between two points</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_resize" class="method item">
|
|
<h3 class="name"><code>resize</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l6035"><code>../src/litegraph.js:6035</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>resizes the canvas to a given size, if no size is passed, then it tries to fill the parentNode</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_selectNode" class="method item">
|
|
<h3 class="name"><code>selectNode</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4603"><code>../src/litegraph.js:4603</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>selects a given node (or adds it to the current selection)</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_selectNodes" class="method item">
|
|
<h3 class="name"><code>selectNodes</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4615"><code>../src/litegraph.js:4615</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>selects several nodes (or adds them to the current selection)</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_sendToBack" class="method item">
|
|
<h3 class="name"><code>sendToBack</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4829"><code>../src/litegraph.js:4829</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>sends a node to the back (below all other nodes)</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_setCanvas" class="method item">
|
|
<h3 class="name"><code>setCanvas</code></h3>
|
|
|
|
<div class="args">
|
|
<span class="paren">(</span><ul class="args-list inline commas">
|
|
<li class="arg">
|
|
<code>assigns</code>
|
|
</li>
|
|
</ul><span class="paren">)</span>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l3423"><code>../src/litegraph.js:3423</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>assigns a canvas</p>
|
|
|
|
</div>
|
|
|
|
<div class="params">
|
|
<h4>Parameters:</h4>
|
|
|
|
<ul class="params-list">
|
|
<li class="param">
|
|
<code class="param-name">assigns</code>
|
|
<span class="type">Canvas</span>
|
|
|
|
|
|
<div class="param-description">
|
|
<p>a canvas (also accepts the ID of the element (not a selector)</p>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_setGraph" class="method item">
|
|
<h3 class="name"><code>setGraph</code></h3>
|
|
|
|
<div class="args">
|
|
<span class="paren">(</span><ul class="args-list inline commas">
|
|
<li class="arg">
|
|
<code>graph</code>
|
|
</li>
|
|
</ul><span class="paren">)</span>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l3348"><code>../src/litegraph.js:3348</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>assigns a graph, you can reasign graphs to the same canvas</p>
|
|
|
|
</div>
|
|
|
|
<div class="params">
|
|
<h4>Parameters:</h4>
|
|
|
|
<ul class="params-list">
|
|
<li class="param">
|
|
<code class="param-name">graph</code>
|
|
<span class="type"><a href="../classes/LGraph.html" class="crosslink">LGraph</a></span>
|
|
|
|
|
|
<div class="param-description">
|
|
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_setZoom" class="method item">
|
|
<h3 class="name"><code>setZoom</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l4758"><code>../src/litegraph.js:4758</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>changes the zoom level of the graph (default is 1), you can pass also a place used to pivot the zoom</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_startRendering" class="method item">
|
|
<h3 class="name"><code>startRendering</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l3654"><code>../src/litegraph.js:3654</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>starts rendering the content of the canvas when needed</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_stopRendering" class="method item">
|
|
<h3 class="name"><code>stopRendering</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l3678"><code>../src/litegraph.js:3678</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>stops rendering the content of the canvas (to save resources)</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_switchLiveMode" class="method item">
|
|
<h3 class="name"><code>switchLiveMode</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l6058"><code>../src/litegraph.js:6058</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>switches to live mode (node shapes are not rendered, only the content)
|
|
this feature was designed when graphs where meant to create user interfaces</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="method_unbindEvents" class="method item">
|
|
<h3 class="name"><code>unbindEvents</code></h3>
|
|
|
|
<span class="paren">()</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
<p>
|
|
Defined in
|
|
<a href="../files/.._src_litegraph.js.html#l3550"><code>../src/litegraph.js:3550</code></a>
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
|
<p>unbinds mouse events from the canvas</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../assets/vendor/prettify/prettify-min.js"></script>
|
|
<script>prettyPrint();</script>
|
|
<script src="../assets/js/yui-prettify.js"></script>
|
|
<script src="../assets/../api.js"></script>
|
|
<script src="../assets/js/api-filter.js"></script>
|
|
<script src="../assets/js/api-list.js"></script>
|
|
<script src="../assets/js/api-search.js"></script>
|
|
<script src="../assets/js/apidocs.js"></script>
|
|
</body>
|
|
</html>
|