Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-03 14:54:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #264 from atlasan/pulls

Browse Source 
Pack
This commit is contained in:
Javi Agenjo
2021-11-03 10:03:54 +01:00
committed by GitHub
parent 7f9edcb4f2 cb70928146
commit 702d8dd373
16 changed files with 4515 additions and 2087 deletions
Download Patch File Download Diff File Expand all files Collapse all files

425
css/litegraph-editor.css
View File

@@ -1,213 +1,214 @@
.litegraph-editor {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #333;
color: #eee;
font: 14px Tahoma;
position: relative;
}
.litegraph-editor h1 {
font-family: "Metro Light", Tahoma;
color: #ddd;
font-size: 28px;
padding-left: 10px;
/*text-shadow: 0 1px 1px #333, 0 -1px 1px #777;*/
margin: 0;
font-weight: normal;
}
.litegraph-editor h1 span {
font-family: "Arial";
font-size: 14px;
font-weight: normal;
color: #aaa;
}
.litegraph-editor h2 {
font-family: "Metro Light";
padding: 5px;
margin-left: 10px;
}
.litegraph-editor * {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.litegraph-editor .content {
position: relative;
width: 100%;
height: calc(100% - 80px);
background-color: #1a1a1a;
}
.litegraph-editor .header,
.litegraph-editor .footer {
position: relative;
height: 40px;
background-color: #333;
/*border-radius: 10px 10px 0 0;*/
}
.litegraph-editor .tools,
.litegraph-editor .tools-left,
.litegraph-editor .tools-right {
position: absolute;
top: 2px;
right: 0px;
vertical-align: top;
margin: 2px 5px 0 0px;
}
.litegraph-editor .tools-left {
right: auto;
left: 4px;
}
.litegraph-editor .footer {
height: 40px;
position: relative;
/*border-radius: 0 0 10px 10px;*/
}
.litegraph-editor .miniwindow {
background-color: #333;
border: 1px solid #111;
}
.litegraph-editor .miniwindow .corner-button {
position: absolute;
top: 2px;
right: 2px;
font-family: "Tahoma";
font-size: 14px;
color: #aaa;
cursor: pointer;
}
/* BUTTONS **********************/
.litegraph-editor .btn {
/*font-family: "Metro Light";*/
color: #ccc;
font-size: 20px;
min-width: 30px;
/*border-radius: 0.3em;*/
border: 0 solid #666;
background-color: #3f3f3f;
/*box-shadow: 0 0 3px black;*/
padding: 4px 10px;
cursor: pointer;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 0.4s;
}
.litegraph-editor button:hover {
background-color: #999;
color: #fff;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 0.4s;
}
.litegraph-editor button:active {
background-color: white;
}
.litegraph-editor button.fixed {
position: absolute;
top: 5px;
right: 5px;
font-size: 1.2em;
}
.litegraph-editor button img {
margin: -4px;
vertical-align: top;
opacity: 0.8;
transition: all 1s;
}
.litegraph-editor button:hover img {
opacity: 1;
}
.litegraph-editor .header button {
height: 32px;
vertical-align: top;
}
.litegraph-editor .footer button {
/*font-size: 16px;*/
}
.litegraph-editor .toolbar-widget {
display: inline-block;
}
.litegraph-editor .editor-area {
width: 100%;
height: 100%;
}
/* METER *********************/
.litegraph-editor .loadmeter {
font-family: "Tahoma";
color: #aaa;
font-size: 12px;
border-radius: 2px;
width: 130px;
vertical-align: top;
}
.litegraph-editor .strong {
vertical-align: top;
padding: 3px;
width: 30px;
display: inline-block;
line-height: 8px;
}
.litegraph-editor .cpuload .bgload,
.litegraph-editor .gpuload .bgload {
display: inline-block;
width: 90px;
height: 15px;
background-image: url("../editor/imgs/load-progress-empty.png");
}
.litegraph-editor .cpuload .fgload,
.litegraph-editor .gpuload .fgload {
display: inline-block;
width: 4px;
height: 15px;
max-width: 90px;
background-image: url("../editor/imgs/load-progress-full.png");
}
.litegraph-editor textarea.code, .litegraph-editor div.code {
height: 100%;
width: 100%;
background-color: black;
padding: 4px;
font: 16px monospace;
overflow: auto;
resize: none;
outline: none;
}
.litegraph-editor .codeflask {
background-color: #2a2a2a;
}
.litegraph-editor .codeflask textarea {
opacity: 0;
.litegraph-editor {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #333;
color: #eee;
font: 14px Tahoma;
position: relative;
}
.litegraph-editor h1 {
font-family: "Metro Light", Tahoma;
color: #ddd;
font-size: 28px;
padding-left: 10px;
/*text-shadow: 0 1px 1px #333, 0 -1px 1px #777;*/
margin: 0;
font-weight: normal;
}
.litegraph-editor h1 span {
font-family: "Arial";
font-size: 14px;
font-weight: normal;
color: #aaa;
}
.litegraph-editor h2 {
font-family: "Metro Light";
padding: 5px;
margin-left: 10px;
}
.litegraph-editor * {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.litegraph-editor .content {
position: relative;
width: 100%;
height: calc(100% - 80px);
background-color: #1a1a1a;
}
.litegraph-editor .header,
.litegraph-editor .footer {
position: relative;
height: 40px;
background-color: #333;
/*border-radius: 10px 10px 0 0;*/
}
.litegraph-editor .tools,
.litegraph-editor .tools-left,
.litegraph-editor .tools-right {
position: absolute;
top: 2px;
right: 0px;
vertical-align: top;
margin: 2px 5px 0 0px;
}
.litegraph-editor .tools-left {
right: auto;
left: 4px;
}
.litegraph-editor .footer {
height: 40px;
position: relative;
/*border-radius: 0 0 10px 10px;*/
}
.litegraph-editor .miniwindow {
background-color: #333;
border: 1px solid #111;
}
.litegraph-editor .miniwindow .corner-button {
position: absolute;
top: 2px;
right: 2px;
font-family: "Tahoma";
font-size: 14px;
color: #aaa;
cursor: pointer;
}
/* BUTTONS **********************/
.litegraph-editor .btn {
/*font-family: "Metro Light";*/
color: #ccc;
font-size: 20px;
min-width: 30px;
/*border-radius: 0.3em;*/
border: 0 solid #666;
background-color: #3f3f3f;
/*box-shadow: 0 0 3px black;*/
padding: 4px 10px;
cursor: pointer;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 0.4s;
}
.litegraph-editor button:hover {
background-color: #999;
color: #fff;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 0.4s;
}
.litegraph-editor button:active {
background-color: white;
}
.litegraph-editor button.fixed {
position: absolute;
top: 5px;
right: 5px;
font-size: 1.2em;
}
.litegraph-editor button img {
margin: -4px;
vertical-align: top;
opacity: 0.8;
transition: all 1s;
}
.litegraph-editor button:hover img {
opacity: 1;
}
.litegraph-editor .header button {
height: 32px;
vertical-align: top;
}
.litegraph-editor .footer button {
/*font-size: 16px;*/
}
.litegraph-editor .toolbar-widget {
display: inline-block;
}
.litegraph-editor .editor-area {
width: 100%;
height: 100%;
}
/* METER *********************/
.litegraph-editor .loadmeter {
font-family: "Tahoma";
color: #aaa;
font-size: 12px;
border-radius: 2px;
width: 130px;
vertical-align: top;
}
.litegraph-editor .strong {
vertical-align: top;
padding: 3px;
width: 30px;
display: inline-block;
line-height: 8px;
}
.litegraph-editor .cpuload .bgload,
.litegraph-editor .gpuload .bgload {
display: inline-block;
width: 90px;
height: 15px;
background-image: url("../editor/imgs/load-progress-empty.png");
}
.litegraph-editor .cpuload .fgload,
.litegraph-editor .gpuload .fgload {
display: inline-block;
width: 4px;
height: 15px;
max-width: 90px;
background-image: url("../editor/imgs/load-progress-full.png");
}
.litegraph-editor textarea.code, .litegraph-editor div.code {
height: 100%;
width: 100%;
background-color: black;
padding: 4px;
font: 16px monospace;
overflow: auto;
resize: none;
outline: none;
color: #DDD;
}
.litegraph-editor .codeflask {
background-color: #2a2a2a;
}
.litegraph-editor .codeflask textarea {
opacity: 0;
}

57
css/litegraph.css
View File

@@ -206,6 +206,20 @@
padding-top: 2px;
}
.litegraph.lite-search-item.not_in_filter{
/*background-color: rgba(50, 50, 50, 0.5);*/
/*color: #999;*/
color: #B99;
font-style: italic;
}
.litegraph.lite-search-item.generic_type{
/*background-color: rgba(50, 50, 50, 0.5);*/
/*color: #DD9;*/
color: #999;
font-style: italic;
}
.litegraph.lite-search-item:hover,
.litegraph.lite-search-item.selected {
cursor: pointer;
@@ -235,6 +249,18 @@
top: 10px;
height: calc( 100% - 20px );
margin: auto;
max-width: 50%;
}
.litegraph .dialog.centered {
top: 50px;
left: 50%;
position: absolute;
transform: translateX(-50%);
min-width: 600px;
min-height: 300px;
height: calc( 100% - 100px );
margin: auto;
}
.litegraph .dialog .close {
@@ -264,13 +290,14 @@
display: inline-block;
}
.litegraph .dialog .dialog-content {
.litegraph .dialog .dialog-content, .litegraph .dialog .dialog-alt-content {
height: calc(100% - 90px);
width: 100%;
min-height: 100px;
display: inline-block;
color: #AAA;
/*background-color: black;*/
overflow: auto;
}
.litegraph .dialog .dialog-content h3 {
@@ -315,14 +342,23 @@
padding: 4px;
}
.litegraph .dialog .property:hover {
background: #545454;
}
.litegraph .dialog .property_name {
color: #737373;
display: inline-block;
text-align: left;
vertical-align: top;
width: 120px;
width: 160px;
padding-left: 4px;
overflow: hidden;
margin-right: 6px;
}
.litegraph .dialog .property:hover .property_name {
color: white;
}
.litegraph .dialog .property_value {
@@ -330,8 +366,11 @@
text-align: right;
color: #AAA;
background-color: #1A1A1A;
width: calc( 100% - 122px );
/*width: calc( 100% - 122px );*/
max-width: calc( 100% - 162px );
min-width: 200px;
max-height: 300px;
min-height: 20px;
padding: 4px;
padding-right: 12px;
overflow: hidden;
@@ -345,6 +384,16 @@
.litegraph .dialog .property.boolean .property_value {
padding-right: 30px;
color: #A88;
/*width: auto;
float: right;*/
}
.litegraph .dialog .property.boolean.bool-on .property_name{
color: #8A8;
}
.litegraph .dialog .property.boolean.bool-on .property_value{
color: #8A8;
}
.litegraph .dialog .btn {
@@ -515,7 +564,7 @@
position: absolute;
top: 10px;
left: 10px;
/*min-height: 2em;*/
min-height: 2em;
background-color: #333;
font-size: 1.2em;
box-shadow: 0 0 10px black !important;

144
editor/editor_mobile.html Normal file
View File

@@ -0,0 +1,144 @@
<!-- Javi Agenjo (@tamat) on 31/9/2011 -->
<!DOCTYPE html>
<html>
<head>
<title>LiteGraph</title>
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">-->
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" type="text/css" href="../css/litegraph.css">
<link rel="stylesheet" type="text/css" href="../css/litegraph-editor.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">
</div>
<script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="https://tamats.com/projects/sillyserver/src/sillyclient.js"></script>
<!-- <script type="text/javascript" src="https://unpkg.com/codeflask/build/codeflask.min.js"></script> -->
<script type="text/javascript" src="js/libs/gl-matrix-min.js"></script>
<script type="text/javascript" src="js/libs/audiosynth.js"></script>
<script type="text/javascript" src="js/libs/midi-parser.js"></script>
<script type="text/javascript" src="../src/litegraph.js"></script>
<script type="text/javascript" src="../src/litegraph-editor.js"></script>
<script type="text/javascript" src="js/defaults_mobile.js"></script>
<script type="text/javascript" src="../src/nodes/base.js"></script>
<script type="text/javascript" src="../src/nodes/logic.js"></script>
<script type="text/javascript" src="../src/nodes/events.js"></script>
<script type="text/javascript" src="../src/nodes/math.js"></script>
<script type="text/javascript" src="../src/nodes/math3d.js"></script>
<script type="text/javascript" src="../src/nodes/strings.js"></script>
<script type="text/javascript" src="../src/nodes/interface.js"></script>
<script type="text/javascript" src="../src/nodes/geometry.js"></script>
<script type="text/javascript" src="../src/nodes/graphics.js"></script>
<script type="text/javascript" src="../src/nodes/input.js"></script>
<script type="text/javascript" src="../src/nodes/midi.js"></script>
<script type="text/javascript" src="../src/nodes/audio.js"></script>
<script type="text/javascript" src="../src/nodes/network.js"></script>
<script type="text/javascript" src="js/demos.js"></script>
<script type="text/javascript" src="js/code.js"></script>
<script type="text/javascript" src="../src/nodes/others.js"></script>
<!-- htmlConsole use to debug on mobile, include and set editorUseHtmlConsole in defaults.js -->
<!-- enable console style, html, js enabling/disabling this comment here-> -->
<link rel="stylesheet" href="//htmlacademy.github.io/console.js/latest/css/style.css">
<style>
.invisible{ display: none; }
.console__row{
margin: 1px;
padding: 2px;
}
.console-container{
min-width: 200px;
background: rgba(255,255,255,0.1);
position: fixed;
top: 38px;
left: 0;
overflow: auto;
height: calc(100%-38px);
}
.console-container.small{
max-width: 30%;
}
.graphcanvas{
/*WONT WORK touch-action: manipulation;*/
/*touch-action: none;*/
touch-action: pinch-zoom;
}
</style>
<div id="console-container" class="litegraph-editor console-container small invisible" style="">
<div class="console-tools" style="position: absolute; top: 0; right:0; z-index:2;">
<button class='btn' id='btn_console_close'>close</button>
<button class='btn' id='btn_console_clear'>clear</button>
</div>
</div>
<script src="//htmlacademy.github.io/console.js/latest/js/index.js"></script>
<script>
var editorUseHtmlConsole = true; // enable html console to debug on mobile
// ToBarSelector
if(editorUseHtmlConsole){
document.getElementById("LGEditorTopBarSelector").innerHTML = "<button class='btn' id='btn_console'>Console</button> "
+document.getElementById("LGEditorTopBarSelector").innerHTML;
}
// html console
if(editorUseHtmlConsole){
elem.querySelector("#btn_console").addEventListener("click", function(){
var consoleCnt = document.getElementById('console-container');
if (consoleCnt.classList.contains("invisible")){
consoleCnt.classList.remove("invisible");
}else{
jsConsole.clean();
consoleCnt.classList.add("invisible");
}
});
const params = {
expandDepth : 1,
common : {
excludeProperties : ['__proto__'],
removeProperties: ['__proto__'],
maxFieldsInHead : 5,
minFieldsToAutoexpand : 5,
maxFieldsToAutoexpand : 15
}
};
var jsConsole = new Console(document.querySelector('.console-container'), params);
jsConsole.log("Here is console.log!");
// map console log-debug to jsConsole
console.log = function(par){
jsConsole.log(par);
var objDiv = document.getElementById("console-container");
objDiv.scrollTop = objDiv.scrollHeight;
}
console.debug = console.log;
console.log("going into html console");
document.getElementById("btn_console_clear").addEventListener("click", function(){
var consoleCnt = document.getElementById('console-container');
jsConsole.clean();
});
document.getElementById("btn_console_close").addEventListener("click", function(){
var consoleCnt = document.getElementById('console-container');
consoleCnt.classList.add("invisible");
});
}
</script>
<!-- -->
</body>
</html>

91
editor/index.html
View File

@@ -1,44 +1,47 @@
<!-- Javi Agenjo (@tamat) on 31/9/2011 -->
<!DOCTYPE html>
<html><head>
<title>LiteGraph</title>
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">-->
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" type="text/css" href="../css/litegraph.css">
<link rel="stylesheet" type="text/css" href="../css/litegraph-editor.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">
</div>
<script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="https://tamats.com/projects/sillyserver/src/sillyclient.js"></script>
<!-- <script type="text/javascript" src="https://unpkg.com/codeflask/build/codeflask.min.js"></script> -->
<script type="text/javascript" src="js/libs/gl-matrix-min.js"></script>
<script type="text/javascript" src="js/libs/audiosynth.js"></script>
<script type="text/javascript" src="js/libs/midi-parser.js"></script>
<script type="text/javascript" src="../src/litegraph.js"></script>
<script type="text/javascript" src="../src/litegraph-editor.js"></script>
<script type="text/javascript" src="../src/nodes/base.js"></script>
<script type="text/javascript" src="../src/nodes/logic.js"></script>
<script type="text/javascript" src="../src/nodes/events.js"></script>
<script type="text/javascript" src="../src/nodes/math.js"></script>
<script type="text/javascript" src="../src/nodes/math3d.js"></script>
<script type="text/javascript" src="../src/nodes/strings.js"></script>
<script type="text/javascript" src="../src/nodes/interface.js"></script>
<script type="text/javascript" src="../src/nodes/geometry.js"></script>
<script type="text/javascript" src="../src/nodes/graphics.js"></script>
<script type="text/javascript" src="../src/nodes/input.js"></script>
<script type="text/javascript" src="../src/nodes/midi.js"></script>
<script type="text/javascript" src="../src/nodes/audio.js"></script>
<script type="text/javascript" src="../src/nodes/network.js"></script>
<script type="text/javascript" src="js/demos.js"></script>
<script type="text/javascript" src="js/code.js"></script>
</body>
</html>
<!-- Javi Agenjo (@tamat) on 31/9/2011 -->
<!DOCTYPE html>
<html><head>
<title>LiteGraph</title>
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">-->
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" type="text/css" href="../css/litegraph.css">
<link rel="stylesheet" type="text/css" href="../css/litegraph-editor.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">
</div>
<script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="https://tamats.com/projects/sillyserver/src/sillyclient.js"></script>
<!-- <script type="text/javascript" src="https://unpkg.com/codeflask/build/codeflask.min.js"></script> -->
<script type="text/javascript" src="js/libs/gl-matrix-min.js"></script>
<script type="text/javascript" src="js/libs/audiosynth.js"></script>
<script type="text/javascript" src="js/libs/midi-parser.js"></script>
<script type="text/javascript" src="../src/litegraph.js"></script>
<script type="text/javascript" src="../src/litegraph-editor.js"></script>
<script type="text/javascript" src="js/defaults.js"></script>
<script type="text/javascript" src="../src/nodes/base.js"></script>
<script type="text/javascript" src="../src/nodes/logic.js"></script>
<script type="text/javascript" src="../src/nodes/events.js"></script>
<script type="text/javascript" src="../src/nodes/math.js"></script>
<script type="text/javascript" src="../src/nodes/math3d.js"></script>
<script type="text/javascript" src="../src/nodes/strings.js"></script>
<script type="text/javascript" src="../src/nodes/interface.js"></script>
<script type="text/javascript" src="../src/nodes/geometry.js"></script>
<script type="text/javascript" src="../src/nodes/graphics.js"></script>
<script type="text/javascript" src="../src/nodes/input.js"></script>
<script type="text/javascript" src="../src/nodes/midi.js"></script>
<script type="text/javascript" src="../src/nodes/audio.js"></script>
<script type="text/javascript" src="../src/nodes/network.js"></script>
<script type="text/javascript" src="js/demos.js"></script>
<script type="text/javascript" src="js/code.js"></script>
<script type="text/javascript" src="../src/nodes/others.js"></script>
</body>
</html>

7
editor/js/code.js
View File

@@ -1,6 +1,7 @@
var webgl_canvas = null;
LiteGraph.node_images_path = "../nodes_data/";
var editor = new LiteGraph.Editor("main",{miniwindow:false});
window.graphcanvas = editor.graphcanvas;
window.graph = editor.graph;
@@ -19,8 +20,10 @@ LiteGraph.allow_scripts = true;
//create scene selector
var elem = document.createElement("span");
elem.id = "LGEditorTopBarSelector";
elem.className = "selector";
elem.innerHTML = "Demo <select><option>Empty</option></select> <button class='btn' id='save'>Save</button><button class='btn' id='load'>Load</button><button class='btn' id='download'>Download</button> | <button class='btn' id='webgl'>WebGL</button> <button class='btn' id='multiview'>Multiview</button>";
elem.innerHTML = "";
elem.innerHTML += "Demo <select><option>Empty</option></select> <button class='btn' id='save'>Save</button><button class='btn' id='load'>Load</button><button class='btn' id='download'>Download</button> | <button class='btn' id='webgl'>WebGL</button> <button class='btn' id='multiview'>Multiview</button>";
editor.tools.appendChild(elem);
var select = elem.querySelector("select");
select.addEventListener("change", function(e){
@@ -167,4 +170,4 @@ function enableWebGL()
gl.viewport(0,0,gl.canvas.width, gl.canvas.height );
}
}
}
}

31
editor/js/defaults.js Normal file
View File

@@ -0,0 +1,31 @@
LiteGraph.debug = false;
LiteGraph.catch_exceptions = true;
LiteGraph.throw_errors = true;
LiteGraph.allow_scripts = false; //if set to true some nodes like Formula would be allowed to evaluate code that comes from unsafe sources (like node configuration); which could lead to exploits
LiteGraph.searchbox_extras = {}; //used to add extra features to the search box
LiteGraph.auto_sort_node_types = true; // [true!] If set to true; will automatically sort node types / categories in the context menus
LiteGraph.node_box_coloured_when_on = true; // [true!] this make the nodes box (top left circle) coloured when triggered (execute/action); visual feedback
LiteGraph.node_box_coloured_by_mode = true; // [true!] nodebox based on node mode; visual feedback
LiteGraph.dialog_close_on_mouse_leave = true; // [false on mobile] better true if not touch device;
LiteGraph.dialog_close_on_mouse_leave_delay = 500;
LiteGraph.shift_click_do_break_link_from = false; // [false!] prefer false if results too easy to break links
LiteGraph.click_do_break_link_to = false; // [false!]prefer false; way too easy to break links
LiteGraph.search_hide_on_mouse_leave = true; // [false on mobile] better true if not touch device;
LiteGraph.search_filter_enabled = true; // [true!] enable filtering slots type in the search widget; !requires auto_load_slot_types or manual set registered_slot_[in/out]_types and slot_types_[in/out]
LiteGraph.search_show_all_on_open = true; // [true!] opens the results list when opening the search widget
LiteGraph.auto_load_slot_types = true; // [if want false; use true; run; get vars values to be statically set; than disable] nodes types and nodeclass association with node types need to be calculated; if dont want this; calculate once and set registered_slot_[in/out]_types and slot_types_[in/out]
/*// set these values if not using auto_load_slot_types
LiteGraph.registered_slot_in_types = {}; // slot types for nodeclass
LiteGraph.registered_slot_out_types = {}; // slot types for nodeclass
LiteGraph.slot_types_in = []; // slot types IN
LiteGraph.slot_types_out = []; // slot types OUT*/
LiteGraph.alt_drag_do_clone_nodes = true; // [true!] very handy; ALT click to clone and drag the new node
LiteGraph.do_add_triggers_slots = true; // [true!] will create and connect event slots when using action/events connections; !WILL CHANGE node mode when using onTrigger (enable mode colors); onExecuted does not need this
LiteGraph.allow_multi_output_for_events = false; // [false!] being events; it is strongly reccomended to use them sequentually; one by one
LiteGraph.middle_click_slot_add_default_node = true; //[true!] allows to create and connect a ndoe clicking with the third button (wheel)
LiteGraph.release_link_on_empty_shows_menu = true; //[true!] dragging a link to empty space will open a menu, add from list, search or defaults
LiteGraph.pointerevents_method = "pointer"; // "mouse"|"pointer" use mouse for retrocompatibility issues? (none found @ now)

31
editor/js/defaults_mobile.js Normal file
View File

@@ -0,0 +1,31 @@
LiteGraph.debug = false;
LiteGraph.catch_exceptions = true;
LiteGraph.throw_errors = true;
LiteGraph.allow_scripts = false; //if set to true some nodes like Formula would be allowed to evaluate code that comes from unsafe sources (like node configuration); which could lead to exploits
LiteGraph.searchbox_extras = {}; //used to add extra features to the search box
LiteGraph.auto_sort_node_types = true; // [true!] If set to true; will automatically sort node types / categories in the context menus
LiteGraph.node_box_coloured_when_on = true; // [true!] this make the nodes box (top left circle) coloured when triggered (execute/action); visual feedback
LiteGraph.node_box_coloured_by_mode = true; // [true!] nodebox based on node mode; visual feedback
LiteGraph.dialog_close_on_mouse_leave = false; // [false on mobile] better true if not touch device;
LiteGraph.dialog_close_on_mouse_leave_delay = 500;
LiteGraph.shift_click_do_break_link_from = false; // [false!] prefer false if results too easy to break links
LiteGraph.click_do_break_link_to = false; // [false!]prefer false; way too easy to break links
LiteGraph.search_hide_on_mouse_leave = false; // [false on mobile] better true if not touch device;
LiteGraph.search_filter_enabled = true; // [true!] enable filtering slots type in the search widget; !requires auto_load_slot_types or manual set registered_slot_[in/out]_types and slot_types_[in/out]
LiteGraph.search_show_all_on_open = true; // [true!] opens the results list when opening the search widget
LiteGraph.auto_load_slot_types = true; // [if want false; use true; run; get vars values to be statically set; than disable] nodes types and nodeclass association with node types need to be calculated; if dont want this; calculate once and set registered_slot_[in/out]_types and slot_types_[in/out]
/*// set these values if not using auto_load_slot_types
LiteGraph.registered_slot_in_types = {}; // slot types for nodeclass
LiteGraph.registered_slot_out_types = {}; // slot types for nodeclass
LiteGraph.slot_types_in = []; // slot types IN
LiteGraph.slot_types_out = []; // slot types OUT*/
LiteGraph.alt_drag_do_clone_nodes = true; // [true!] very handy; ALT click to clone and drag the new node
LiteGraph.do_add_triggers_slots = true; // [true!] will create and connect event slots when using action/events connections; !WILL CHANGE node mode when using onTrigger (enable mode colors); onExecuted does not need this
LiteGraph.allow_multi_output_for_events = false; // [false!] being events; it is strongly reccomended to use them sequentually; one by one
LiteGraph.middle_click_slot_add_default_node = true; //[true!] allows to create and connect a ndoe clicking with the third button (wheel)
LiteGraph.release_link_on_empty_shows_menu = true; //[true!] dragging a link to empty space will open a menu, add from list, search or defaults
LiteGraph.pointerevents_method = "pointer"; // "mouse"|"pointer" use mouse for retrocompatibility issues? (none found @ now)

2778
src/litegraph.js Executable file → Normal file
View File

File diff suppressed because it is too large Load Diff

2
src/nodes/audio.js
View File

@@ -997,7 +997,7 @@ LiteGraph.registerNodeType("audio/waveShaper", LGAudioWaveShaper);
this.audionode = LGAudio.getAudioContext().createGain();
this.audionode.gain.value = 0;
this.addInput("in", "audio");
this.addInput("gate", "bool");
this.addInput("gate", "boolean");
this.addOutput("out", "audio");
this.gate = false;
}

157
src/nodes/base.js
View File

@@ -724,9 +724,10 @@
LiteGraph.registerNodeType("basic/const", ConstantNumber);
function ConstantBoolean() {
this.addOutput("", "boolean");
this.addOutput("bool", "boolean");
this.addProperty("value", true);
this.widget = this.addWidget("toggle","value",true,"value");
this.serialize_widgets = true;
this.widgets_up = true;
this.size = [140, 30];
}
@@ -753,7 +754,7 @@
LiteGraph.registerNodeType("basic/boolean", ConstantBoolean);
function ConstantString() {
this.addOutput("", "string");
this.addOutput("string", "string");
this.addProperty("value", "");
this.widget = this.addWidget("text","value","","value"); //link to property value
this.widgets_up = true;
@@ -800,8 +801,8 @@
LiteGraph.registerNodeType( "basic/object", ConstantObject );
function ConstantFile() {
this.addInput("url", "");
this.addOutput("", "");
this.addInput("url", "string");
this.addOutput("file", "string");
this.addProperty("url", "");
this.addProperty("type", "text");
this.widget = this.addWidget("text","url","","url");
@@ -899,7 +900,7 @@
//to store json objects
function ConstantData() {
this.addOutput("", "");
this.addOutput("data", "object");
this.addProperty("value", "");
this.widget = this.addWidget("text","json","","value");
this.widgets_up = true;
@@ -934,10 +935,10 @@
//to store json objects
function ConstantArray() {
this._value = [];
this.addInput("", "");
this.addOutput("", "array");
this.addOutput("length", "number");
this._value = [];
this.addInput("json", "");
this.addOutput("arrayOut", "array");
this.addOutput("length", "number");
this.addProperty("value", "[]");
this.widget = this.addWidget("text","array",this.properties.value,"value");
this.widgets_up = true;
@@ -974,7 +975,7 @@
for(var i = 0; i < v.length; ++i)
this._value[i] = v[i];
}
this.setOutputData(0, this._value );
this.setOutputData(0, this._value);
this.setOutputData(1, this._value ? ( this._value.length || 0) : 0 );
};
@@ -988,7 +989,7 @@
this.addInput("value", "");
this.addOutput("arr", "array");
this.properties = { index: 0 };
this.widget = this.addWidget("number","i",this.properties.index,"index");
this.widget = this.addWidget("number","i",this.properties.index,"index",{precision: 0, step: 10, min: 0});
}
SetArray.title = "Set Array";
@@ -1062,9 +1063,9 @@
LiteGraph.registerNodeType("basic/table[][]", TableElement);
function ObjectProperty() {
this.addInput("obj", "");
this.addOutput("", "");
this.addProperty("value", "");
this.addInput("obj", "object");
this.addOutput("property", 0);
this.addProperty("value", 0);
this.widget = this.addWidget("text","prop.","",this.setValue.bind(this) );
this.widgets_up = true;
this.size = [140, 30];
@@ -1146,9 +1147,9 @@
function MergeObjects() {
this.addInput("A", "");
this.addInput("B", "");
this.addOutput("", "");
this.addInput("A", "object");
this.addInput("B", "object");
this.addOutput("out", "object");
this._result = {};
var that = this;
this.addWidget("button","clear","",function(){
@@ -1396,21 +1397,27 @@
Console.desc = "Show value inside the console";
Console.prototype.onAction = function(action, param) {
// param is the action
var msg = this.getInputData(1); //getInputDataByName("msg");
//if (msg == null || typeof msg == "undefined") return;
if (!msg) msg = this.properties.msg;
if (!msg) msg = "Event: "+param; // msg is undefined if the slot is lost?
if (action == "log") {
console.log(param);
console.log(msg);
} else if (action == "warn") {
console.warn(param);
console.warn(msg);
} else if (action == "error") {
console.error(param);
console.error(msg);
}
};
Console.prototype.onExecute = function() {
var msg = this.getInputData(1);
if (msg !== null) {
var msg = this.getInputData(1); //getInputDataByName("msg");
if (!msg) msg = this.properties.msg;
if (msg != null && typeof msg != "undefined") {
this.properties.msg = msg;
console.log(msg);
}
console.log(msg);
};
Console.prototype.onGetInputs = function() {
@@ -1455,9 +1462,9 @@
function NodeScript() {
this.size = [60, 30];
this.addProperty("onExecute", "return A;");
this.addInput("A", "");
this.addInput("B", "");
this.addOutput("out", "");
this.addInput("A", 0);
this.addInput("B", 0);
this.addOutput("out", 0);
this._func = null;
this.data = {};
@@ -1534,4 +1541,102 @@
};
LiteGraph.registerNodeType("basic/script", NodeScript);
function GenericCompare() {
this.addInput("A", 0);
this.addInput("B", 0);
this.addOutput("true", "boolean");
this.addOutput("false", "boolean");
this.addProperty("A", 1);
this.addProperty("B", 1);
this.addProperty("OP", "==", "enum", { values: GenericCompare.values });
this.addWidget("combo","Op.",this.properties.OP,{ property: "OP", values: GenericCompare.values } );
this.size = [80, 60];
}
GenericCompare.values = ["==", "!="]; //[">", "<", "==", "!=", "<=", ">=", "||", "&&" ];
GenericCompare["@OP"] = {
type: "enum",
title: "operation",
values: GenericCompare.values
};
GenericCompare.title = "Compare *";
GenericCompare.desc = "evaluates condition between A and B";
GenericCompare.prototype.getTitle = function() {
return "*A " + this.properties.OP + " *B";
};
GenericCompare.prototype.onExecute = function() {
var A = this.getInputData(0);
if (A === undefined) {
A = this.properties.A;
} else {
this.properties.A = A;
}
var B = this.getInputData(1);
if (B === undefined) {
B = this.properties.B;
} else {
this.properties.B = B;
}
var result = false;
if (typeof A == typeof B){
switch (this.properties.OP) {
case "==":
case "!=":
// traverse both objects.. consider that this is not a true deep check! consider underscore or other library for thath :: _isEqual()
result = true;
switch(typeof A){
case "object":
var aProps = Object.getOwnPropertyNames(A);
var bProps = Object.getOwnPropertyNames(B);
if (aProps.length != bProps.length){
result = false;
break;
}
for (var i = 0; i < aProps.length; i++) {
var propName = aProps[i];
if (A[propName] !== B[propName]) {
result = false;
break;
}
}
break;
default:
result = A == B;
}
if (this.properties.OP == "!=") result = !result;
break;
/*case ">":
result = A > B;
break;
case "<":
result = A < B;
break;
case "<=":
result = A <= B;
break;
case ">=":
result = A >= B;
break;
case "||":
result = A || B;
break;
case "&&":
result = A && B;
break;*/
}
}
this.setOutputData(0, result);
this.setOutputData(1, !result);
};
LiteGraph.registerNodeType("basic/CompareValues", GenericCompare);
})(this);

57
src/nodes/events.js
View File

@@ -11,7 +11,7 @@
LogEvent.title = "Log Event";
LogEvent.desc = "Log event in console";
LogEvent.prototype.onAction = function(action, param) {
LogEvent.prototype.onAction = function(action, param, options) {
console.log(action, param);
};
@@ -31,18 +31,18 @@
TriggerEvent.title = "TriggerEvent";
TriggerEvent.desc = "Triggers event if input evaluates to true";
TriggerEvent.prototype.onExecute = function(action, param) {
TriggerEvent.prototype.onExecute = function( param, options) {
var v = this.getInputData(0);
var changed = (v != this.prev);
if(this.prev === 0)
changed = false;
var must_resend = (changed && this.properties.only_on_change) || (!changed && !this.properties.only_on_change);
if(v && must_resend )
this.triggerSlot(0, param);
this.triggerSlot(0, param, null, options);
if(!v && must_resend)
this.triggerSlot(2, param);
this.triggerSlot(2, param, null, options);
if(changed)
this.triggerSlot(1, param);
this.triggerSlot(1, param, null, options);
this.prev = v;
};
@@ -50,8 +50,8 @@
//Sequencer for events
function Sequencer() {
var that = this;
this.addInput("", LiteGraph.ACTION);
var that = this;
this.addInput("", LiteGraph.ACTION);
this.addInput("", LiteGraph.ACTION);
this.addInput("", LiteGraph.ACTION);
this.addOutput("", LiteGraph.EVENT);
@@ -72,10 +72,13 @@
return "";
};
Sequencer.prototype.onAction = function(action, param) {
Sequencer.prototype.onAction = function(action, param, options) {
if (this.outputs) {
options = options || {};
for (var i = 0; i < this.outputs.length; ++i) {
this.triggerSlot(i, param);
// CREATE A NEW ID FOR THE ACTION
options.action_call = options.action_call?options.action_call+"_seq_"+i:this.id+"_"+(action?action:"action")+"_seq_"+i+"_"+Math.floor(Math.random()*9999);
this.triggerSlot(i, param, null, options);
}
}
};
@@ -97,7 +100,7 @@
FilterEvent.title = "Filter Event";
FilterEvent.desc = "Blocks events that do not match the filter";
FilterEvent.prototype.onAction = function(action, param) {
FilterEvent.prototype.onAction = function(action, param, options) {
if (param == null) {
return;
}
@@ -120,7 +123,7 @@
}
}
this.triggerSlot(0, param);
this.triggerSlot(0, param, null, options);
};
LiteGraph.registerNodeType("events/filter", FilterEvent);
@@ -142,8 +145,9 @@
this._value = this.getInputData(1);
}
EventBranch.prototype.onAction = function(action, param) {
this.triggerSlot(this._value ? 0 : 1);
EventBranch.prototype.onAction = function(action, param, options) {
this._value = this.getInputData(1);
this.triggerSlot(this._value ? 0 : 1, param, null, options);
}
LiteGraph.registerNodeType("events/branch", EventBranch);
@@ -155,6 +159,8 @@
this.addInput("reset", LiteGraph.ACTION);
this.addOutput("change", LiteGraph.EVENT);
this.addOutput("num", "number");
this.addProperty("doCountExecution", false, "boolean", {name: "Count Executions"});
this.addWidget("toggle","Count Exec.",this.properties.doCountExecution,"doCountExecution");
this.num = 0;
}
@@ -168,7 +174,7 @@
return this.title;
};
EventCounter.prototype.onAction = function(action, param) {
EventCounter.prototype.onAction = function(action, param, options) {
var v = this.num;
if (action == "inc") {
this.num += 1;
@@ -193,6 +199,9 @@
};
EventCounter.prototype.onExecute = function() {
if(this.properties.doCountExecution){
this.num += 1;
}
this.setOutputData(1, this.num);
};
@@ -211,16 +220,16 @@
DelayEvent.title = "Delay";
DelayEvent.desc = "Delays one event";
DelayEvent.prototype.onAction = function(action, param) {
DelayEvent.prototype.onAction = function(action, param, options) {
var time = this.properties.time_in_ms;
if (time <= 0) {
this.trigger(null, param);
this.trigger(null, param, options);
} else {
this._pending.push([time, param]);
}
};
DelayEvent.prototype.onExecute = function() {
DelayEvent.prototype.onExecute = function(param, options) {
var dt = this.graph.elapsed_time * 1000; //in ms
if (this.isInputConnected(1)) {
@@ -228,9 +237,9 @@
}
for (var i = 0; i < this._pending.length; ++i) {
var action = this._pending[i];
action[0] -= dt;
if (action[0] > 0) {
var actionPass = this._pending[i];
actionPass[0] -= dt;
if (actionPass[0] > 0) {
continue;
}
@@ -239,7 +248,7 @@
--i;
//trigger
this.trigger(null, action[1]);
this.trigger(null, actionPass[1], options);
}
};
@@ -359,9 +368,9 @@
function DataStore() {
this.addInput("data", "");
this.addInput("data", 0);
this.addInput("assign", LiteGraph.ACTION);
this.addOutput("data", "");
this.addOutput("data", 0);
this._last_value = null;
this.properties = { data: null, serialize: true };
var that = this;
@@ -379,7 +388,7 @@
this.setOutputData(0, this.properties.data );
}
DataStore.prototype.onAction = function(action, param) {
DataStore.prototype.onAction = function(action, param, options) {
this.properties.data = this._last_value;
};

3
src/nodes/interface.js
View File

@@ -71,6 +71,7 @@
local_pos[1] < this.size[1] - 2
) {
this.clicked = true;
this.setOutputData(1, this.clicked);
this.triggerSlot(0, this.properties.message);
return true;
}
@@ -672,7 +673,7 @@
typeof v == "number" ? v.toFixed(this.properties["decimals"]) : v;
if (typeof this.str == "string") {
var lines = this.str.split("\\n");
var lines = this.str.replace(/[\r\n]/g, "\\n").split("\\n");
for (var i=0; i < lines.length; i++) {
ctx.fillText(
lines[i],

116
src/nodes/logic.js
View File

@@ -82,4 +82,120 @@
};
LiteGraph.registerNodeType("logic/sequence", Sequence);
function logicAnd(){
this.properties = { };
this.addInput("a", "boolean");
this.addInput("b", "boolean");
this.addOutput("out", "boolean");
}
logicAnd.title = "AND";
logicAnd.desc = "Return true if all inputs are true";
logicAnd.prototype.onExecute = function() {
ret = true;
for (inX in this.inputs){
if (!this.getInputData(inX)){
ret = false;
break;
}
}
this.setOutputData(0, ret);
};
logicAnd.prototype.onGetInputs = function() {
return [
["and", "boolean"]
];
};
LiteGraph.registerNodeType("logic/AND", logicAnd);
function logicOr(){
this.properties = { };
this.addInput("a", "boolean");
this.addInput("b", "boolean");
this.addOutput("out", "boolean");
}
logicOr.title = "OR";
logicOr.desc = "Return true if at least one input is true";
logicOr.prototype.onExecute = function() {
ret = false;
for (inX in this.inputs){
if (this.getInputData(inX)){
ret = true;
break;
}
}
this.setOutputData(0, ret);
};
logicOr.prototype.onGetInputs = function() {
return [
["or", "boolean"]
];
};
LiteGraph.registerNodeType("logic/OR", logicOr);
function logicNot(){
this.properties = { };
this.addInput("in", "boolean");
this.addOutput("out", "boolean");
}
logicNot.title = "NOT";
logicNot.desc = "Return the logical negation";
logicNot.prototype.onExecute = function() {
var ret = !this.getInputData(0);
this.setOutputData(0, ret);
};
LiteGraph.registerNodeType("logic/NOT", logicNot);
function logicCompare(){
this.properties = { };
this.addInput("a", "boolean");
this.addInput("b", "boolean");
this.addOutput("out", "boolean");
}
logicCompare.title = "bool == bool";
logicCompare.desc = "Compare for logical equality";
logicCompare.prototype.onExecute = function() {
last = null;
ret = true;
for (inX in this.inputs){
if (last === null) last = this.getInputData(inX);
else
if (last != this.getInputData(inX)){
ret = false;
break;
}
}
this.setOutputData(0, ret);
};
logicCompare.prototype.onGetInputs = function() {
return [
["bool", "boolean"]
];
};
LiteGraph.registerNodeType("logic/CompareBool", logicCompare);
function logicBranch(){
this.properties = { };
this.addInput("onTrigger", LiteGraph.ACTION);
this.addInput("condition", "boolean");
this.addOutput("true", LiteGraph.EVENT);
this.addOutput("false", LiteGraph.EVENT);
this.mode = LiteGraph.ON_TRIGGER;
}
logicBranch.title = "Branch";
logicBranch.desc = "Branch execution on condition";
logicBranch.prototype.onExecute = function(param, options) {
var condtition = this.getInputData(1);
if (condtition){
this.triggerSlot(0);
}else{
this.triggerSlot(1);
}
};
LiteGraph.registerNodeType("logic/IF", logicBranch);
})(this);

2658
src/nodes/math.js
View File

File diff suppressed because it is too large Load Diff

37
src/nodes/others.js Executable file → Normal file
View File

@@ -0,0 +1,37 @@
(function(global) {
var LiteGraph = global.LiteGraph;
/* in types :: run in console :: var s=""; LiteGraph.slot_types_in.forEach(function(el){s+=el+"\n";}); console.log(s); */
if(typeof LiteGraph.slot_types_default_in == "undefined") LiteGraph.slot_types_default_in = {}; //[];
LiteGraph.slot_types_default_in["_event_"] = "widget/button";
LiteGraph.slot_types_default_in["array"] = "basic/array";
LiteGraph.slot_types_default_in["boolean"] = "basic/boolean";
LiteGraph.slot_types_default_in["number"] = "widget/number";
LiteGraph.slot_types_default_in["object"] = "basic/data";
LiteGraph.slot_types_default_in["string"] = ["basic/string","string/concatenate"];
LiteGraph.slot_types_default_in["vec2"] = "math3d/xy-to-vec2";
LiteGraph.slot_types_default_in["vec3"] = "math3d/xyz-to-vec3";
LiteGraph.slot_types_default_in["vec4"] = "math3d/xyzw-to-vec4";
/* out types :: run in console :: var s=""; LiteGraph.slot_types_out.forEach(function(el){s+=el+"\n";}); console.log(s); */
if(typeof LiteGraph.slot_types_default_out == "undefined") LiteGraph.slot_types_default_out = {};
LiteGraph.slot_types_default_out["_event_"] = ["logic/IF","events/sequencer","events/log","events/counter"];
LiteGraph.slot_types_default_out["array"] = ["basic/watch","basic/set_array","basic/array[]"];
LiteGraph.slot_types_default_out["boolean"] = ["logic/IF","basic/watch","math/branch","math/gate"];
LiteGraph.slot_types_default_out["number"] = ["basic/watch"
,{node:"math/operation",properties:{OP:"*"},title:"A*B"}
,{node:"math/operation",properties:{OP:"/"},title:"A/B"}
,{node:"math/operation",properties:{OP:"+"},title:"A+B"}
,{node:"math/operation",properties:{OP:"-"},title:"A-B"}
,{node:"math/compare",outputs:[["A==B", "boolean"]],title:"A==B"}
,{node:"math/compare",outputs:[["A>B", "boolean"]],title:"A>B"}
,{node:"math/compare",outputs:[["A<B", "boolean"]],title:"A<B"}
];
LiteGraph.slot_types_default_out["object"] = ["basic/object_property","basic/keys",["string/toString","basic/watch"]];
LiteGraph.slot_types_default_out["string"] = ["basic/watch","string/compare","string/concatenate","string/contains"];
LiteGraph.slot_types_default_out["vec2"] = "math3d/vec2-to-xy";
LiteGraph.slot_types_default_out["vec3"] = "math3d/vec3-to-xyz";
LiteGraph.slot_types_default_out["vec4"] = "math3d/vec4-to-xyzw";
})(this);

8
src/nodes/strings.js
View File

@@ -17,7 +17,7 @@
return String(a);
}
LiteGraph.wrapFunctionAsNode("string/toString", toString, [""], "String");
LiteGraph.wrapFunctionAsNode("string/toString", toString, [""], "string");
function compare(a, b) {
return a == b;
@@ -85,8 +85,10 @@
else if( str.constructor === Array )
{
var r = [];
for(var i = 0; i < str.length; ++i)
r[i] = str[i].split(separator || " ");
for(var i = 0; i < str.length; ++i){
if (typeof str[i] == "string")
r[i] = str[i].split(separator || " ");
}
return r;
}
return null;