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

mini version

Browse Source
This commit is contained in:
tamat
2021-06-11 13:39:43 +02:00
parent 4b47ed9056
commit e4e48ff583
11 changed files with 17302 additions and 873 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/litegraph-editor.js
View File

@@ -16,11 +16,11 @@ function Editor(container_id, options) {
this.content = root.querySelector(".content");
this.footer = root.querySelector(".footer");
var canvas = root.querySelector(".graphcanvas");
var canvas = this.canvas = root.querySelector(".graphcanvas");
//create graph
var graph = (this.graph = new LGraph());
var graphcanvas = (this.graphcanvas = new LGraphCanvas(canvas, graph));
var graphcanvas = this.graphcanvas = new LGraphCanvas(canvas, graph);
graphcanvas.background_image = "imgs/grid.png";
graph.onAfterExecute = function() {
graphcanvas.draw(true);
@@ -267,4 +267,17 @@ Editor.prototype.addMiniWindow = function(w, h) {
this.root.querySelector(".content").appendChild(miniwindow);
};
Editor.prototype.addMultiview = function()
{
var canvas = this.canvas;
this.graphcanvas.ctx.fillStyle = "black";
this.graphcanvas.ctx.fillRect(0,0,canvas.width,canvas.height);
this.graphcanvas.viewport = [0,0,canvas.width*0.5-2,canvas.height];
var graphcanvas = new LGraphCanvas( canvas, this.graph );
graphcanvas.background_image = "imgs/grid.png";
this.graphcanvas2 = graphcanvas;
this.graphcanvas2.viewport = [canvas.width*0.5,0,canvas.width*0.5,canvas.height];
}
LiteGraph.Editor = Editor;

155
src/litegraph.js
View File

@@ -4484,25 +4484,18 @@ LGraphNode.prototype.executeAction = function(action)
e.canvasy = y;
e.dragging = this.dragging;
var is_inside = !this.viewport || ( this.viewport && x >= this.viewport[0] && x < (this.viewport[0] + this.viewport[2]) && y >= this.viewport[1] && y < (this.viewport[1] + this.viewport[3]) );
var ignore = false;
if (this.onmouse) {
ignore = this.onmouse(e);
}
if (e.type == "mousedown") {
if (e.type == "mousedown" && is_inside) {
this.dragging = true;
canvas.removeEventListener(
"mousemove",
this._binded_mouse_callback
);
document.body.addEventListener(
"mousemove",
this._binded_mouse_callback
);
document.body.addEventListener(
"mouseup",
this._binded_mouse_callback
);
canvas.removeEventListener( "mousemove", this._binded_mouse_callback );
document.body.addEventListener( "mousemove", this._binded_mouse_callback );
document.body.addEventListener( "mouseup", this._binded_mouse_callback );
} else if (e.type == "mousemove") {
if (!ignore) {
var deltax = x - this.last_mouse[0];
@@ -4513,19 +4506,13 @@ LGraphNode.prototype.executeAction = function(action)
}
} else if (e.type == "mouseup") {
this.dragging = false;
document.body.removeEventListener(
"mousemove",
this._binded_mouse_callback
);
document.body.removeEventListener(
"mouseup",
this._binded_mouse_callback
);
canvas.addEventListener("mousemove", this._binded_mouse_callback);
} else if (
e.type == "mousewheel" ||
document.body.removeEventListener( "mousemove", this._binded_mouse_callback );
document.body.removeEventListener( "mouseup", this._binded_mouse_callback );
canvas.addEventListener("mousemove", this._binded_mouse_callback );
} else if ( is_inside &&
(e.type == "mousewheel" ||
e.type == "wheel" ||
e.type == "DOMMouseScroll"
e.type == "DOMMouseScroll")
) {
e.eventType = "mousewheel";
if (e.type == "wheel") {
@@ -4547,9 +4534,12 @@ LGraphNode.prototype.executeAction = function(action)
this.last_mouse[0] = x;
this.last_mouse[1] = y;
e.preventDefault();
e.stopPropagation();
return false;
if(is_inside)
{
e.preventDefault();
e.stopPropagation();
return false;
}
};
DragAndScale.prototype.toCanvasContext = function(ctx) {
@@ -4650,7 +4640,7 @@ LGraphNode.prototype.executeAction = function(action)
* @param {Object} options [optional] { skip_rendering, autoresize, viewport }
*/
function LGraphCanvas(canvas, graph, options) {
options = options || {};
this.options = options = options || {};
//if(graph === undefined)
// throw ("No graph assigned");
@@ -4749,7 +4739,7 @@ LGraphNode.prototype.executeAction = function(action)
graph.attachCanvas(this);
}
this.setCanvas(canvas);
this.setCanvas(canvas,options.skip_events);
this.clear();
if (!options.skip_render) {
@@ -5233,25 +5223,25 @@ LGraphNode.prototype.executeAction = function(action)
LGraphCanvas.active_canvas = this;
var that = this;
//move mouse move event to the window in case it drags outside of the canvas
this.canvas.removeEventListener("mousemove", this._mousemove_callback);
ref_window.document.addEventListener(
"mousemove",
this._mousemove_callback,
true
); //catch for the entire window
ref_window.document.addEventListener(
"mouseup",
this._mouseup_callback,
true
);
var x = e.localX;
var y = e.localY;
//console.log(y,this.viewport);
var node = this.graph.getNodeOnPos(
e.canvasX,
e.canvasY,
this.visible_nodes,
5
);
this.ds.viewport = this.viewport;
var is_inside = !this.viewport || ( this.viewport && x >= this.viewport[0] && x < (this.viewport[0] + this.viewport[2]) && y >= this.viewport[1] && y < (this.viewport[1] + this.viewport[3]) );
//move mouse move event to the window in case it drags outside of the canvas
if(!this.options.skip_events)
{
this.canvas.removeEventListener("mousemove", this._mousemove_callback);
ref_window.document.addEventListener( "mousemove", this._mousemove_callback, true ); //catch for the entire window
ref_window.document.addEventListener( "mouseup", this._mouseup_callback, true );
}
if(!is_inside)
return;
var node = this.graph.getNodeOnPos( e.canvasX, e.canvasY, this.visible_nodes, 5 );
var skip_dragging = false;
var skip_action = false;
var now = LiteGraph.getTime();
@@ -5295,11 +5285,7 @@ LGraphNode.prototype.executeAction = function(action)
} //if it wasn't selected?
//not dragging mouse to connect two slots
if (
!this.connecting_node &&
!node.flags.collapsed &&
!this.live_mode
) {
if ( !this.connecting_node && !node.flags.collapsed && !this.live_mode ) {
//Search for corner for resize
if (
!skip_action &&
@@ -5320,11 +5306,7 @@ LGraphNode.prototype.executeAction = function(action)
} else {
//search for outputs
if (node.outputs) {
for (
var i = 0, l = node.outputs.length;
i < l;
++i
) {
for ( var i = 0, l = node.outputs.length; i < l; ++i ) {
var output = node.outputs[i];
var link_pos = node.getConnectionPos(false, i);
if (
@@ -5364,11 +5346,7 @@ LGraphNode.prototype.executeAction = function(action)
//search for inputs
if (node.inputs) {
for (
var i = 0, l = node.inputs.length;
i < l;
++i
) {
for ( var i = 0, l = node.inputs.length; i < l; ++i ) {
var input = node.inputs[i];
var link_pos = node.getConnectionPos(true, i);
if (
@@ -5806,9 +5784,12 @@ LGraphNode.prototype.executeAction = function(action)
LGraphCanvas.active_canvas = this;
//restore the mousemove event back to the canvas
document.removeEventListener("mousemove",this._mousemove_callback,true);
this.canvas.addEventListener("mousemove",this._mousemove_callback,true);
document.removeEventListener("mouseup", this._mouseup_callback, true);
if(!this.options.skip_events)
{
document.removeEventListener("mousemove",this._mousemove_callback,true);
this.canvas.addEventListener("mousemove",this._mousemove_callback,true);
document.removeEventListener("mouseup", this._mouseup_callback, true);
}
this.adjustMouseEvent(e);
var now = LiteGraph.getTime();
@@ -6056,6 +6037,12 @@ LGraphNode.prototype.executeAction = function(action)
this.adjustMouseEvent(e);
var x = e.localX;
var y = e.localY;
var is_inside = !this.viewport || ( this.viewport && x >= this.viewport[0] && x < (this.viewport[0] + this.viewport[2]) && y >= this.viewport[1] && y < (this.viewport[1] + this.viewport[3]) );
if(!is_inside)
return;
var scale = this.ds.scale;
if (delta > 0) {
@@ -6328,8 +6315,15 @@ LGraphNode.prototype.executeAction = function(action)
LGraphCanvas.prototype.processDrop = function(e) {
e.preventDefault();
this.adjustMouseEvent(e);
var x = e.localX;
var y = e.localY;
var is_inside = !this.viewport || ( this.viewport && x >= this.viewport[0] && x < (this.viewport[0] + this.viewport[2]) && y >= this.viewport[1] && y < (this.viewport[1] + this.viewport[3]) );
if(!is_inside)
return;
var pos = [e.canvasX, e.canvasY];
var node = this.graph ? this.graph.getNodeOnPos(pos[0], pos[1]) : null;
if (!node) {
@@ -6802,15 +6796,12 @@ LGraphNode.prototype.executeAction = function(action)
return;
}
if (ctx.start2D) {
ctx.start2D();
}
var canvas = this.canvas;
//reset in case of error
ctx.restore();
ctx.setTransform(1, 0, 0, 1, 0, 0);
if ( ctx.start2D && !this.viewport ) {
ctx.start2D();
ctx.restore();
ctx.setTransform(1, 0, 0, 1, 0, 0);
}
//clip dirty area if there is one, otherwise work in full canvas
var area = this.viewport || this.dirty_area;
@@ -6824,7 +6815,10 @@ LGraphNode.prototype.executeAction = function(action)
//clear
//canvas.width = canvas.width;
if (this.clear_background) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if(area)
ctx.clearRect( area[0],area[1],area[2],area[3] );
else
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
//draw bg canvas
@@ -7147,6 +7141,7 @@ LGraphNode.prototype.executeAction = function(action)
ctx.font = "10px Arial";
ctx.fillStyle = "#888";
ctx.textAlign = "left";
if (this.graph) {
ctx.fillText( "T: " + this.graph.globaltime.toFixed(2) + "s", 5, 13 * 1 );
ctx.fillText("I: " + this.graph.iteration, 5, 13 * 2 );
@@ -7219,8 +7214,11 @@ LGraphNode.prototype.executeAction = function(action)
}
//reset in case of error
ctx.restore();
ctx.setTransform(1, 0, 0, 1, 0, 0);
if ( !this.viewport )
{
ctx.restore();
ctx.setTransform(1, 0, 0, 1, 0, 0);
}
this.visible_links.length = 0;
if (this.graph) {
@@ -10231,7 +10229,8 @@ LGraphNode.prototype.executeAction = function(action)
root.close = function()
{
this.parentNode.removeChild(this);
if(this.parentNode)
this.parentNode.removeChild(this);
}
root.clear = function()