mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-25 09:14:25 +00:00
style: format codes
This commit is contained in:
NateScarlet
@@ -1,233 +1,266 @@
|
||||
//Creates an interface to access extra features from a graph (like play, stop, live, etc)
|
||||
function Editor( container_id, options )
|
||||
{
|
||||
options = options || {};
|
||||
function Editor(container_id, options) {
|
||||
options = options || {};
|
||||
|
||||
//fill container
|
||||
var html = "<div class='header'><div class='tools tools-left'></div><div class='tools tools-right'></div></div>";
|
||||
html += "<div class='content'><div class='editor-area'><canvas class='graphcanvas' width='1000' height='500' tabindex=10></canvas></div></div>";
|
||||
html += "<div class='footer'><div class='tools tools-left'></div><div class='tools tools-right'></div></div>";
|
||||
|
||||
var root = document.createElement("div");
|
||||
this.root = root;
|
||||
root.className = "litegraph-editor";
|
||||
root.innerHTML = html;
|
||||
//fill container
|
||||
var html =
|
||||
"<div class='header'><div class='tools tools-left'></div><div class='tools tools-right'></div></div>";
|
||||
html +=
|
||||
"<div class='content'><div class='editor-area'><canvas class='graphcanvas' width='1000' height='500' tabindex=10></canvas></div></div>";
|
||||
html +=
|
||||
"<div class='footer'><div class='tools tools-left'></div><div class='tools tools-right'></div></div>";
|
||||
|
||||
this.tools = root.querySelector(".tools");
|
||||
this.footer = root.querySelector(".footer");
|
||||
var root = document.createElement("div");
|
||||
this.root = root;
|
||||
root.className = "litegraph-editor";
|
||||
root.innerHTML = html;
|
||||
|
||||
var canvas = root.querySelector(".graphcanvas");
|
||||
this.tools = root.querySelector(".tools");
|
||||
this.footer = root.querySelector(".footer");
|
||||
|
||||
//create graph
|
||||
var graph = this.graph = new LGraph();
|
||||
var graphcanvas = this.graphcanvas = new LGraphCanvas(canvas,graph);
|
||||
graphcanvas.background_image = "imgs/grid.png";
|
||||
graph.onAfterExecute = function() { graphcanvas.draw(true) };
|
||||
var canvas = root.querySelector(".graphcanvas");
|
||||
|
||||
//add stuff
|
||||
//this.addToolsButton("loadsession_button","Load","imgs/icon-load.png", this.onLoadButton.bind(this), ".tools-left" );
|
||||
//this.addToolsButton("savesession_button","Save","imgs/icon-save.png", this.onSaveButton.bind(this), ".tools-left" );
|
||||
this.addLoadCounter();
|
||||
this.addToolsButton("playnode_button","Play","imgs/icon-play.png", this.onPlayButton.bind(this), ".tools-right" );
|
||||
this.addToolsButton("playstepnode_button","Step","imgs/icon-playstep.png", this.onPlayStepButton.bind(this), ".tools-right" );
|
||||
|
||||
if(!options.skip_livemode)
|
||||
this.addToolsButton("livemode_button","Live","imgs/icon-record.png", this.onLiveButton.bind(this), ".tools-right" );
|
||||
if(!options.skip_maximize)
|
||||
this.addToolsButton("maximize_button","","imgs/icon-maximize.png", this.onFullscreenButton.bind(this), ".tools-right" );
|
||||
if(options.miniwindow)
|
||||
this.addMiniWindow(300,200);
|
||||
//create graph
|
||||
var graph = (this.graph = new LGraph());
|
||||
var graphcanvas = (this.graphcanvas = new LGraphCanvas(canvas, graph));
|
||||
graphcanvas.background_image = "imgs/grid.png";
|
||||
graph.onAfterExecute = function() {
|
||||
graphcanvas.draw(true);
|
||||
};
|
||||
|
||||
//append to DOM
|
||||
var parent = document.getElementById(container_id);
|
||||
if(parent)
|
||||
parent.appendChild(root);
|
||||
//add stuff
|
||||
//this.addToolsButton("loadsession_button","Load","imgs/icon-load.png", this.onLoadButton.bind(this), ".tools-left" );
|
||||
//this.addToolsButton("savesession_button","Save","imgs/icon-save.png", this.onSaveButton.bind(this), ".tools-left" );
|
||||
this.addLoadCounter();
|
||||
this.addToolsButton(
|
||||
"playnode_button",
|
||||
"Play",
|
||||
"imgs/icon-play.png",
|
||||
this.onPlayButton.bind(this),
|
||||
".tools-right"
|
||||
);
|
||||
this.addToolsButton(
|
||||
"playstepnode_button",
|
||||
"Step",
|
||||
"imgs/icon-playstep.png",
|
||||
this.onPlayStepButton.bind(this),
|
||||
".tools-right"
|
||||
);
|
||||
|
||||
graphcanvas.resize();
|
||||
//graphcanvas.draw(true,true);
|
||||
if (!options.skip_livemode)
|
||||
this.addToolsButton(
|
||||
"livemode_button",
|
||||
"Live",
|
||||
"imgs/icon-record.png",
|
||||
this.onLiveButton.bind(this),
|
||||
".tools-right"
|
||||
);
|
||||
if (!options.skip_maximize)
|
||||
this.addToolsButton(
|
||||
"maximize_button",
|
||||
"",
|
||||
"imgs/icon-maximize.png",
|
||||
this.onFullscreenButton.bind(this),
|
||||
".tools-right"
|
||||
);
|
||||
if (options.miniwindow) this.addMiniWindow(300, 200);
|
||||
|
||||
//append to DOM
|
||||
var parent = document.getElementById(container_id);
|
||||
if (parent) parent.appendChild(root);
|
||||
|
||||
graphcanvas.resize();
|
||||
//graphcanvas.draw(true,true);
|
||||
}
|
||||
|
||||
Editor.prototype.addLoadCounter = function()
|
||||
{
|
||||
var meter = document.createElement("div");
|
||||
meter.className = 'headerpanel loadmeter toolbar-widget';
|
||||
Editor.prototype.addLoadCounter = function() {
|
||||
var meter = document.createElement("div");
|
||||
meter.className = "headerpanel loadmeter toolbar-widget";
|
||||
|
||||
var html = "<div class='cpuload'><strong>CPU</strong> <div class='bgload'><div class='fgload'></div></div></div>";
|
||||
html += "<div class='gpuload'><strong>GFX</strong> <div class='bgload'><div class='fgload'></div></div></div>";
|
||||
var html =
|
||||
"<div class='cpuload'><strong>CPU</strong> <div class='bgload'><div class='fgload'></div></div></div>";
|
||||
html +=
|
||||
"<div class='gpuload'><strong>GFX</strong> <div class='bgload'><div class='fgload'></div></div></div>";
|
||||
|
||||
meter.innerHTML = html;
|
||||
this.root.querySelector(".header .tools-left").appendChild(meter);
|
||||
var self = this;
|
||||
meter.innerHTML = html;
|
||||
this.root.querySelector(".header .tools-left").appendChild(meter);
|
||||
var self = this;
|
||||
|
||||
setInterval(function() {
|
||||
meter.querySelector(".cpuload .fgload").style.width = ((2*self.graph.execution_time) * 90) + "px";
|
||||
if(self.graph.status == LGraph.STATUS_RUNNING)
|
||||
meter.querySelector(".gpuload .fgload").style.width = ((self.graphcanvas.render_time*10) * 90) + "px";
|
||||
else
|
||||
meter.querySelector(".gpuload .fgload").style.width = 4 + "px";
|
||||
},200);
|
||||
}
|
||||
setInterval(function() {
|
||||
meter.querySelector(".cpuload .fgload").style.width =
|
||||
2 * self.graph.execution_time * 90 + "px";
|
||||
if (self.graph.status == LGraph.STATUS_RUNNING)
|
||||
meter.querySelector(".gpuload .fgload").style.width =
|
||||
self.graphcanvas.render_time * 10 * 90 + "px";
|
||||
else meter.querySelector(".gpuload .fgload").style.width = 4 + "px";
|
||||
}, 200);
|
||||
};
|
||||
|
||||
Editor.prototype.addToolsButton = function(id,name,icon_url, callback, container)
|
||||
{
|
||||
if(!container)
|
||||
container = ".tools";
|
||||
Editor.prototype.addToolsButton = function(
|
||||
id,
|
||||
name,
|
||||
icon_url,
|
||||
callback,
|
||||
container
|
||||
) {
|
||||
if (!container) container = ".tools";
|
||||
|
||||
var button = this.createButton(name, icon_url);
|
||||
button.id = id;
|
||||
button.addEventListener("click", callback);
|
||||
var button = this.createButton(name, icon_url);
|
||||
button.id = id;
|
||||
button.addEventListener("click", callback);
|
||||
|
||||
this.root.querySelector(container).appendChild(button);
|
||||
}
|
||||
this.root.querySelector(container).appendChild(button);
|
||||
};
|
||||
|
||||
Editor.prototype.createPanel = function(title, options) {
|
||||
var root = document.createElement("div");
|
||||
root.className = "dialog";
|
||||
root.innerHTML =
|
||||
"<div class='dialog-header'><span class='dialog-title'>" +
|
||||
title +
|
||||
"</span></div><div class='dialog-content'></div><div class='dialog-footer'></div>";
|
||||
root.header = root.querySelector(".dialog-header");
|
||||
root.content = root.querySelector(".dialog-content");
|
||||
root.footer = root.querySelector(".dialog-footer");
|
||||
|
||||
Editor.prototype.createPanel = function(title, options)
|
||||
{
|
||||
return root;
|
||||
};
|
||||
|
||||
var root = document.createElement("div");
|
||||
root.className = "dialog";
|
||||
root.innerHTML = "<div class='dialog-header'><span class='dialog-title'>"+title+"</span></div><div class='dialog-content'></div><div class='dialog-footer'></div>";
|
||||
root.header = root.querySelector(".dialog-header");
|
||||
root.content = root.querySelector(".dialog-content");
|
||||
root.footer = root.querySelector(".dialog-footer");
|
||||
Editor.prototype.createButton = function(name, icon_url) {
|
||||
var button = document.createElement("button");
|
||||
if (icon_url) button.innerHTML = "<img src='" + icon_url + "'/> ";
|
||||
button.innerHTML += name;
|
||||
return button;
|
||||
};
|
||||
|
||||
Editor.prototype.onLoadButton = function() {
|
||||
var panel = this.createPanel("Load session");
|
||||
var close = this.createButton("Close");
|
||||
close.style.float = "right";
|
||||
close.addEventListener("click", function() {
|
||||
panel.parentNode.removeChild(panel);
|
||||
});
|
||||
panel.header.appendChild(close);
|
||||
panel.content.innerHTML = "test";
|
||||
|
||||
return root;
|
||||
}
|
||||
this.root.appendChild(panel);
|
||||
};
|
||||
|
||||
Editor.prototype.createButton = function(name, icon_url)
|
||||
{
|
||||
var button = document.createElement("button");
|
||||
if(icon_url)
|
||||
button.innerHTML = "<img src='"+icon_url+"'/> ";
|
||||
button.innerHTML += name;
|
||||
return button;
|
||||
}
|
||||
Editor.prototype.onSaveButton = function() {};
|
||||
|
||||
Editor.prototype.onLoadButton = function()
|
||||
{
|
||||
var panel = this.createPanel("Load session");
|
||||
var close = this.createButton("Close");
|
||||
close.style.float = "right";
|
||||
close.addEventListener("click", function() { panel.parentNode.removeChild( panel ); });
|
||||
panel.header.appendChild(close);
|
||||
panel.content.innerHTML = "test";
|
||||
Editor.prototype.onPlayButton = function() {
|
||||
var graph = this.graph;
|
||||
var button = this.root.querySelector("#playnode_button");
|
||||
|
||||
this.root.appendChild(panel);
|
||||
}
|
||||
if (graph.status == LGraph.STATUS_STOPPED) {
|
||||
button.innerHTML = "<img src='imgs/icon-stop.png'/> Stop";
|
||||
graph.start();
|
||||
} else {
|
||||
button.innerHTML = "<img src='imgs/icon-play.png'/> Play";
|
||||
graph.stop();
|
||||
}
|
||||
};
|
||||
|
||||
Editor.prototype.onSaveButton = function()
|
||||
{
|
||||
}
|
||||
Editor.prototype.onPlayStepButton = function() {
|
||||
var graph = this.graph;
|
||||
graph.runStep(1);
|
||||
this.graphcanvas.draw(true, true);
|
||||
};
|
||||
|
||||
Editor.prototype.onPlayButton = function()
|
||||
{
|
||||
var graph = this.graph;
|
||||
var button = this.root.querySelector("#playnode_button");
|
||||
Editor.prototype.onLiveButton = function() {
|
||||
var is_live_mode = !this.graphcanvas.live_mode;
|
||||
this.graphcanvas.switchLiveMode(true);
|
||||
this.graphcanvas.draw();
|
||||
var url = this.graphcanvas.live_mode
|
||||
? "imgs/gauss_bg_medium.jpg"
|
||||
: "imgs/gauss_bg.jpg";
|
||||
var button = this.root.querySelector("#livemode_button");
|
||||
button.innerHTML = !is_live_mode
|
||||
? "<img src='imgs/icon-record.png'/> Live"
|
||||
: "<img src='imgs/icon-gear.png'/> Edit";
|
||||
};
|
||||
|
||||
if(graph.status == LGraph.STATUS_STOPPED)
|
||||
{
|
||||
button.innerHTML = "<img src='imgs/icon-stop.png'/> Stop";
|
||||
graph.start();
|
||||
}
|
||||
else
|
||||
{
|
||||
button.innerHTML = "<img src='imgs/icon-play.png'/> Play";
|
||||
graph.stop();
|
||||
}
|
||||
}
|
||||
Editor.prototype.goFullscreen = function() {
|
||||
if (this.root.requestFullscreen)
|
||||
this.root.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||
else if (this.root.mozRequestFullscreen)
|
||||
this.root.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||
else if (this.root.webkitRequestFullscreen)
|
||||
this.root.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||
else throw "Fullscreen not supported";
|
||||
|
||||
Editor.prototype.onPlayStepButton = function()
|
||||
{
|
||||
var graph = this.graph;
|
||||
graph.runStep(1);
|
||||
this.graphcanvas.draw(true,true);
|
||||
}
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
self.graphcanvas.resize();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
Editor.prototype.onLiveButton = function()
|
||||
{
|
||||
var is_live_mode = !this.graphcanvas.live_mode;
|
||||
this.graphcanvas.switchLiveMode(true);
|
||||
this.graphcanvas.draw();
|
||||
var url = this.graphcanvas.live_mode ? "imgs/gauss_bg_medium.jpg" : "imgs/gauss_bg.jpg";
|
||||
var button = this.root.querySelector("#livemode_button");
|
||||
button.innerHTML = !is_live_mode ? "<img src='imgs/icon-record.png'/> Live" : "<img src='imgs/icon-gear.png'/> Edit" ;
|
||||
}
|
||||
Editor.prototype.onFullscreenButton = function() {
|
||||
this.goFullscreen();
|
||||
};
|
||||
|
||||
Editor.prototype.goFullscreen = function()
|
||||
{
|
||||
if(this.root.requestFullscreen)
|
||||
this.root.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||
else if(this.root.mozRequestFullscreen)
|
||||
this.root.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||
else if(this.root.webkitRequestFullscreen)
|
||||
this.root.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||
else
|
||||
throw("Fullscreen not supported");
|
||||
Editor.prototype.onMaximizeButton = function() {
|
||||
this.maximize();
|
||||
};
|
||||
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
self.graphcanvas.resize();
|
||||
},100);
|
||||
}
|
||||
Editor.prototype.addMiniWindow = function(w, h) {
|
||||
var miniwindow = document.createElement("div");
|
||||
miniwindow.className = "litegraph miniwindow";
|
||||
miniwindow.innerHTML =
|
||||
"<canvas class='graphcanvas' width='" +
|
||||
w +
|
||||
"' height='" +
|
||||
h +
|
||||
"' tabindex=10></canvas>";
|
||||
var canvas = miniwindow.querySelector("canvas");
|
||||
var that = this;
|
||||
|
||||
Editor.prototype.onFullscreenButton = function()
|
||||
{
|
||||
this.goFullscreen();
|
||||
}
|
||||
var graphcanvas = new LGraphCanvas(canvas, this.graph);
|
||||
graphcanvas.show_info = false;
|
||||
graphcanvas.background_image = "imgs/grid.png";
|
||||
graphcanvas.scale = 0.25;
|
||||
graphcanvas.allow_dragnodes = false;
|
||||
graphcanvas.allow_interaction = false;
|
||||
graphcanvas.render_shadows = false;
|
||||
graphcanvas.max_zoom = 0.25;
|
||||
this.miniwindow_graphcanvas = graphcanvas;
|
||||
graphcanvas.onClear = function() {
|
||||
graphcanvas.scale = 0.25;
|
||||
graphcanvas.allow_dragnodes = false;
|
||||
graphcanvas.allow_interaction = false;
|
||||
};
|
||||
graphcanvas.onRenderBackground = function(canvas, ctx) {
|
||||
ctx.strokeStyle = "#567";
|
||||
var tl = that.graphcanvas.convertOffsetToCanvas([0, 0]);
|
||||
var br = that.graphcanvas.convertOffsetToCanvas([
|
||||
that.graphcanvas.canvas.width,
|
||||
that.graphcanvas.canvas.height
|
||||
]);
|
||||
tl = this.convertCanvasToOffset(tl);
|
||||
br = this.convertCanvasToOffset(br);
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeRect(
|
||||
Math.floor(tl[0]) + 0.5,
|
||||
Math.floor(tl[1]) + 0.5,
|
||||
Math.floor(br[0] - tl[0]),
|
||||
Math.floor(br[1] - tl[1])
|
||||
);
|
||||
};
|
||||
|
||||
Editor.prototype.onMaximizeButton = function()
|
||||
{
|
||||
this.maximize();
|
||||
}
|
||||
miniwindow.style.position = "absolute";
|
||||
miniwindow.style.top = "4px";
|
||||
miniwindow.style.right = "4px";
|
||||
|
||||
Editor.prototype.addMiniWindow = function(w,h)
|
||||
{
|
||||
var miniwindow = document.createElement("div");
|
||||
miniwindow.className = "litegraph miniwindow";
|
||||
miniwindow.innerHTML = "<canvas class='graphcanvas' width='"+w+"' height='"+h+"' tabindex=10></canvas>";
|
||||
var canvas = miniwindow.querySelector("canvas");
|
||||
var that = this;
|
||||
var close_button = document.createElement("div");
|
||||
close_button.className = "corner-button";
|
||||
close_button.innerHTML = "X";
|
||||
close_button.addEventListener("click", function(e) {
|
||||
graphcanvas.setGraph(null);
|
||||
miniwindow.parentNode.removeChild(miniwindow);
|
||||
});
|
||||
miniwindow.appendChild(close_button);
|
||||
|
||||
var graphcanvas = new LGraphCanvas(canvas, this.graph);
|
||||
graphcanvas.show_info = false;
|
||||
graphcanvas.background_image = "imgs/grid.png";
|
||||
graphcanvas.scale = 0.25;
|
||||
graphcanvas.allow_dragnodes = false;
|
||||
graphcanvas.allow_interaction = false;
|
||||
graphcanvas.render_shadows = false;
|
||||
graphcanvas.max_zoom = 0.25;
|
||||
this.miniwindow_graphcanvas = graphcanvas;
|
||||
graphcanvas.onClear = function() {
|
||||
graphcanvas.scale = 0.25;
|
||||
graphcanvas.allow_dragnodes = false;
|
||||
graphcanvas.allow_interaction = false;
|
||||
};
|
||||
graphcanvas.onRenderBackground = function(canvas, ctx)
|
||||
{
|
||||
ctx.strokeStyle = "#567";
|
||||
var tl = that.graphcanvas.convertOffsetToCanvas([0,0]);
|
||||
var br = that.graphcanvas.convertOffsetToCanvas([that.graphcanvas.canvas.width,that.graphcanvas.canvas.height]);
|
||||
tl = this.convertCanvasToOffset( tl );
|
||||
br = this.convertCanvasToOffset( br );
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeRect( Math.floor(tl[0]) + 0.5, Math.floor(tl[1]) + 0.5, Math.floor(br[0] - tl[0]), Math.floor(br[1] - tl[1]) );
|
||||
}
|
||||
this.root.querySelector(".content").appendChild(miniwindow);
|
||||
};
|
||||
|
||||
miniwindow.style.position = "absolute";
|
||||
miniwindow.style.top = "4px";
|
||||
miniwindow.style.right = "4px";
|
||||
|
||||
var close_button = document.createElement("div");
|
||||
close_button.className = "corner-button";
|
||||
close_button.innerHTML = "X";
|
||||
close_button.addEventListener("click",function(e) {
|
||||
graphcanvas.setGraph(null);
|
||||
miniwindow.parentNode.removeChild(miniwindow);
|
||||
});
|
||||
miniwindow.appendChild(close_button);
|
||||
|
||||
this.root.querySelector(".content").appendChild(miniwindow);
|
||||
}
|
||||
|
||||
LiteGraph.Editor = Editor;
|
||||
LiteGraph.Editor = Editor;
|
||||
|
||||
Reference in New Issue
Block a user