mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-14 01:20:03 +00:00
Small fix and new features
- nodes_executing, nodes_actioning initial set - slot_types_default (in and out) helps in having defaults nodes for specific slot_types - slot_types_default are filled as an example in src/nodes/others.js - middle_click_slot_add_default_node allows auto-placing defaults nodes next to a slot - release_link_on_empty_shows_menu conditions having realease-in-empty-space functionality - keypress for slot name - do include new js/defaults.js in editor and leave the Lib with new functionalities off by default - new html with mobile editor (working on) - separate defaults - optional thirdy-party html console
This commit is contained in:
atlasan
144
editor/editor_mobile.html
Normal file
144
editor/editor_mobile.html
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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
31
editor/js/defaults.js
Normal 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
31
editor/js/defaults_mobile.js
Normal 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)
|
||||
Reference in New Issue
Block a user