fix sequencer

This commit is contained in:
tamat
2021-11-03 10:10:12 +01:00
21 changed files with 12471 additions and 5774 deletions

View File

@@ -1,7 +1,7 @@
# Contribution Rules
There are some simple rules that everyone should follow:
### Do not commit files from bulid folder
### Do not commit files from build folder
> I usually have horrible merge conflicts when I upload the build version that take me too much time to solve, but I want to keep the build version in the repo, so I guess it would be better if only one of us does the built, which would be me.
> https://github.com/jagenjo/litegraph.js/pull/155#issuecomment-656602861
Those files will be updated by owner.

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

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;
}

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>

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>

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)

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)

View File

@@ -44,7 +44,7 @@ MyAddNode.prototype.onExecute = function()
var B = this.getInputData(1);
if( B === undefined )
B = 0;
//assing data to otputs
//assing data to outputs
this.setOutputData( 0, A + B );
}
@@ -177,7 +177,7 @@ You can add widgets inside the node to edit text, values, etc.
To do so you must create them in the constructor by calling ```node.addWidget```, the returned value is the object containing all the info about the widget, it is handy to store it in case you want to change the value later from code.
The sintax is:
The syntax is:
```js
function MyNodeType()
@@ -188,7 +188,7 @@ function MyNodeType()
This is the list of supported widgets:
* **"number"** to change a value of a number, the syntax is ```this.addWidget("number","Number", current_value, callback, { min: 0, max: 100, step: 1} );```
* **"slider"** to change a number by draging the mouse, the syntax is the same as number.
* **"slider"** to change a number by dragging the mouse, the syntax is the same as number.
* **"combo"** to select between multiple choices, the syntax is:
```this.addWidget("combo","Combo", "red", callback, { values:["red","green","blue"]} );```

2804
src/litegraph.js Executable file → Normal file

File diff suppressed because it is too large Load Diff

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;
}

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);

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;
};
@@ -72,10 +72,17 @@
return "";
};
Sequence.prototype.onAction = function(action, param) {
Sequence.prototype.onAction = function(action, param, options) {
if (this.outputs) {
options = options || {};
for (var i = 0; i < this.outputs.length; ++i) {
this.triggerSlot(i, param);
var output = this.outputs[i];
//needs more info about this...
if( options.action_call ) // CREATE A NEW ID FOR THE ACTION
options.action_call = options.action_call + "_seq_" + i;
else
options.action_call = this.id + "_" + (action ? action : "action")+"_seq_"+i+"_"+Math.floor(Math.random()*9999);
this.triggerSlot(i, param, null, options);
}
}
};
@@ -165,7 +172,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;
}
@@ -188,7 +195,7 @@
}
}
this.triggerSlot(0, param);
this.triggerSlot(0, param, null, options);
};
LiteGraph.registerNodeType("events/filter", FilterEvent);
@@ -210,8 +217,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);
@@ -223,6 +231,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;
}
@@ -236,7 +246,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;
@@ -261,6 +271,9 @@
};
EventCounter.prototype.onExecute = function() {
if(this.properties.doCountExecution){
this.num += 1;
}
this.setOutputData(1, this.num);
};
@@ -279,16 +292,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)) {
@@ -296,9 +309,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;
}
@@ -307,7 +320,7 @@
--i;
//trigger
this.trigger(null, action[1]);
this.trigger(null, actionPass[1], options);
}
};
@@ -427,9 +440,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;
@@ -447,7 +460,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;
};

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],

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);

File diff suppressed because it is too large Load Diff

View File

@@ -196,7 +196,7 @@
return MIDIEvent.TIMETICK;
break;
default:
return Number(str); //asume its a hex code
return Number(str); //assume its a hex code
}
};

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);

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;