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

fix

Browse Source
This commit is contained in:
tamat
2020-03-19 08:57:36 +01:00
parent b550042709
commit 7f4e5b8d79
18 changed files with 15244 additions and 989 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
demo/js/code.js
View File

@@ -1,3 +1,4 @@
var webgl_canvas = null;
LiteGraph.node_images_path = "../nodes_data/";
var editor = new LiteGraph.Editor("main");
@@ -10,10 +11,13 @@ window.onbeforeunload = function(){
localStorage.setItem("litegraphg demo backup", data );
}
//enable scripting
LiteGraph.allow_scripts = true;
//create scene selector
var elem = document.createElement("span");
elem.className = "selector";
elem.innerHTML = "Demo <select><option>Empty</option></select> <button id='save'>Save</button><button id='load'>Load</button><button id='download'>Download</button>";
elem.innerHTML = "Demo <select><option>Empty</option></select> <button id='save'>Save</button><button id='load'>Load</button><button id='download'>Download</button> | <button id='webgl'>WebGL</button>";
editor.tools.appendChild(elem);
var select = elem.querySelector("select");
select.addEventListener("change", function(e){
@@ -54,6 +58,9 @@ elem.querySelector("#download").addEventListener("click",function(){
setTimeout( function(){ URL.revokeObjectURL( url ); }, 1000*60 ); //wait one minute to revoke url
});
elem.querySelector("#webgl").addEventListener("click", enableWebGL );
function addDemo( name, url )
{
var option = document.createElement("option");
@@ -81,5 +88,80 @@ addDemo("autobackup", function(){
graph.configure( graph_data );
});
//allows to use the WebGL nodes like textures
function enableWebGL()
{
if( webgl_canvas )
{
webgl_canvas.style.display = (webgl_canvas.style.display == "none" ? "block" : "none");
return;
}
var libs = [
"js/libs/gl-matrix-min.js",
"js/libs/litegl.js",
"../src/nodes/gltextures.js",
"../src/nodes/glfx.js",
"../src/nodes/geometry.js"
];
function fetchJS()
{
if(libs.length == 0)
return on_ready();
var script = null;
script = document.createElement("script");
script.onload = fetchJS;
script.src = libs.shift();
document.head.appendChild(script);
}
fetchJS();
function on_ready()
{
console.log(this.src);
if(!window.GL)
return;
webgl_canvas = document.createElement("canvas");
webgl_canvas.width = 400;
webgl_canvas.height = 300;
webgl_canvas.style.position = "absolute";
webgl_canvas.style.top = "0px";
webgl_canvas.style.right = "0px";
webgl_canvas.style.border = "1px solid #AAA";
webgl_canvas.addEventListener("click", function(){
var rect = webgl_canvas.parentNode.getBoundingClientRect();
if( webgl_canvas.width != rect.width )
{
webgl_canvas.width = rect.width;
webgl_canvas.height = rect.height;
}
else
{
webgl_canvas.width = 400;
webgl_canvas.height = 300;
}
});
var parent = document.querySelector(".editor-area");
parent.appendChild( webgl_canvas );
var gl = GL.create({ canvas: webgl_canvas });
if(!gl)
return;
editor.graph.onBeforeStep = ondraw;
console.log("webgl ready");
function ondraw ()
{
gl.clearColor(0,0,0,0);
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
gl.viewport(0,0,gl.canvas.width, gl.canvas.height );
}
}
}