mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-06 05:30:08 +00:00
btw, I forgot, demo is now called editor
This commit is contained in:
tamat
176
src/litegraph.js
176
src/litegraph.js
@@ -53,6 +53,7 @@
|
||||
CIRCLE_SHAPE: 3,
|
||||
CARD_SHAPE: 4,
|
||||
ARROW_SHAPE: 5,
|
||||
SQUARE_SHAPE: 6,
|
||||
|
||||
//enums
|
||||
INPUT: 1,
|
||||
@@ -94,6 +95,16 @@
|
||||
|
||||
searchbox_extras: {}, //used to add extra features to the search box
|
||||
|
||||
/**
|
||||
* Removes all previously registered node's types
|
||||
*/
|
||||
clearRegisteredTypes: function() {
|
||||
this.registered_node_types = {};
|
||||
this.node_types_by_file_extension = {};
|
||||
this.Nodes = {};
|
||||
this.searchbox_extras = {};
|
||||
},
|
||||
|
||||
/**
|
||||
* Register a node class so it can be listed when the user wants to create a new one
|
||||
* @method registerNodeType
|
||||
@@ -3210,10 +3221,10 @@
|
||||
/**
|
||||
* computes the minimum size of a node according to its inputs and output slots
|
||||
* @method computeSize
|
||||
* @param {number} minHeight
|
||||
* @param {number} the optional target width
|
||||
* @return {number} the total size
|
||||
*/
|
||||
LGraphNode.prototype.computeSize = function(out) {
|
||||
LGraphNode.prototype.computeSize = function(width, out) {
|
||||
if (this.constructor.size) {
|
||||
return this.constructor.size.concat();
|
||||
}
|
||||
@@ -3265,7 +3276,7 @@
|
||||
if (this.widgets && this.widgets.length) {
|
||||
for (var i = 0, l = this.widgets.length; i < l; ++i) {
|
||||
if (this.widgets[i].computeSize)
|
||||
widgets_height += this.widgets[i].computeSize(size[0])[1] + 4;
|
||||
widgets_height += this.widgets[i].computeSize(Math.max(size[0], width || 0))[1] + 4;
|
||||
else
|
||||
widgets_height += LiteGraph.NODE_WIDGET_HEIGHT + 4;
|
||||
}
|
||||
@@ -3631,28 +3642,34 @@
|
||||
return null;
|
||||
}
|
||||
|
||||
//if there is something already plugged there, disconnect
|
||||
if (target_node.inputs[target_slot].link != null) {
|
||||
target_node.disconnectInput(target_slot);
|
||||
}
|
||||
|
||||
//why here??
|
||||
//this.setDirtyCanvas(false,true);
|
||||
//this.graph.connectionChange( this );
|
||||
|
||||
var output = this.outputs[slot];
|
||||
|
||||
//allows nodes to block connection
|
||||
if (target_node.onConnectInput) {
|
||||
if ( target_node.onConnectInput(target_slot, output.type, output, this, slot) === false ) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
var input = target_node.inputs[target_slot];
|
||||
var link_info = null;
|
||||
|
||||
if (LiteGraph.isValidConnection(output.type, input.type)) {
|
||||
if (target_node.onBeforeConnectInput) {
|
||||
// This way node can choose another slot (if selected is occupied)
|
||||
target_slot = target_node.onBeforeConnectInput(target_slot);
|
||||
input = target_node.inputs[target_slot];
|
||||
}
|
||||
|
||||
//if there is something already plugged there, disconnect
|
||||
if (target_node.inputs[target_slot].link != null) {
|
||||
target_node.disconnectInput(target_slot);
|
||||
}
|
||||
|
||||
//why here??
|
||||
//this.setDirtyCanvas(false,true);
|
||||
//this.graph.connectionChange( this );
|
||||
|
||||
//allows nodes to block connection
|
||||
if (target_node.onConnectInput) {
|
||||
if ( target_node.onConnectInput(target_slot, output.type, output, this, slot) === false ) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
var link_info = null;
|
||||
|
||||
link_info = new LLink(
|
||||
++this.graph.last_link_id,
|
||||
input.type,
|
||||
@@ -5665,7 +5682,7 @@ LGraphNode.prototype.executeAction = function(action)
|
||||
if (this.resizing_node && !this.live_mode) {
|
||||
//convert mouse to node space
|
||||
var desired_size = [ e.canvasX - this.resizing_node.pos[0], e.canvasY - this.resizing_node.pos[1] ];
|
||||
var min_size = this.resizing_node.computeSize();
|
||||
var min_size = this.resizing_node.computeSize(desired_size[0]);
|
||||
desired_size[0] = Math.max( min_size[0], desired_size[0] );
|
||||
desired_size[1] = Math.max( min_size[1], desired_size[1] );
|
||||
this.resizing_node.setSize( desired_size );
|
||||
@@ -7212,6 +7229,44 @@ LGraphNode.prototype.executeAction = function(action)
|
||||
|
||||
var temp_vec2 = new Float32Array(2);
|
||||
|
||||
LGraphCanvas.prototype.drawSlotGraphic = function(ctx, pos, shape, horizontal) {
|
||||
ctx.beginPath();
|
||||
|
||||
switch (shape) {
|
||||
case (LiteGraph.BOX_SHAPE):
|
||||
if (horizontal) {
|
||||
ctx.rect(
|
||||
pos[0] - 5 + 0.5,
|
||||
pos[1] - 8 + 0.5,
|
||||
10,
|
||||
14
|
||||
);
|
||||
} else {
|
||||
ctx.rect(
|
||||
pos[0] - 6 + 0.5,
|
||||
pos[1] - 5 + 0.5,
|
||||
14,
|
||||
10
|
||||
);
|
||||
}
|
||||
break;
|
||||
case (LiteGraph.ARROW_SHAPE):
|
||||
ctx.moveTo(pos[0] + 8, pos[1] + 0.5);
|
||||
ctx.lineTo(pos[0] - 4, pos[1] + 6 + 0.5);
|
||||
ctx.lineTo(pos[0] - 4, pos[1] - 6 + 0.5);
|
||||
ctx.closePath();
|
||||
break;
|
||||
case (LiteGraph.SQUARE_SHAPE):
|
||||
ctx.rect(pos[0] - 4, pos[1] - 4, 8, 8); //faster
|
||||
break;
|
||||
case (LiteGraph.CIRCLE_SHAPE):
|
||||
default:
|
||||
ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2);
|
||||
break;
|
||||
}
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
/**
|
||||
* draws the given node inside the canvas
|
||||
* @method drawNode
|
||||
@@ -7361,39 +7416,9 @@ LGraphNode.prototype.executeAction = function(action)
|
||||
max_y = pos[1] + LiteGraph.NODE_SLOT_HEIGHT * 0.5;
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
|
||||
if (
|
||||
slot.type === LiteGraph.EVENT ||
|
||||
slot.shape === LiteGraph.BOX_SHAPE
|
||||
) {
|
||||
if (horizontal) {
|
||||
ctx.rect(
|
||||
pos[0] - 5 + 0.5,
|
||||
pos[1] - 8 + 0.5,
|
||||
10,
|
||||
14
|
||||
);
|
||||
} else {
|
||||
ctx.rect(
|
||||
pos[0] - 6 + 0.5,
|
||||
pos[1] - 5 + 0.5,
|
||||
14,
|
||||
10
|
||||
);
|
||||
}
|
||||
} else if (slot.shape === LiteGraph.ARROW_SHAPE) {
|
||||
ctx.moveTo(pos[0] + 8, pos[1] + 0.5);
|
||||
ctx.lineTo(pos[0] - 4, pos[1] + 6 + 0.5);
|
||||
ctx.lineTo(pos[0] - 4, pos[1] - 6 + 0.5);
|
||||
ctx.closePath();
|
||||
} else {
|
||||
if(low_quality)
|
||||
ctx.rect(pos[0] - 4, pos[1] - 4, 8, 8 ); //faster
|
||||
else
|
||||
ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2);
|
||||
}
|
||||
ctx.fill();
|
||||
var shape = slot.shape || (slot.type === LiteGraph.EVENT && LiteGraph.BOX_SHAPE)
|
||||
|| (low_quality && LiteGraph.SQUARE_SHAPE) || LiteGraph.CIRCLE_SHAPE;
|
||||
this.drawSlotGraphic(ctx, pos, shape, horizontal);
|
||||
|
||||
//render name
|
||||
if (render_text) {
|
||||
@@ -7434,46 +7459,11 @@ LGraphNode.prototype.executeAction = function(action)
|
||||
this.default_connection_color.output_on
|
||||
: slot.color_off ||
|
||||
this.default_connection_color.output_off;
|
||||
ctx.beginPath();
|
||||
//ctx.rect( node.size[0] - 14,i*14,10,10);
|
||||
|
||||
if (
|
||||
slot.type === LiteGraph.EVENT ||
|
||||
slot.shape === LiteGraph.BOX_SHAPE
|
||||
) {
|
||||
if (horizontal) {
|
||||
ctx.rect(
|
||||
pos[0] - 5 + 0.5,
|
||||
pos[1] - 8 + 0.5,
|
||||
10,
|
||||
14
|
||||
);
|
||||
} else {
|
||||
ctx.rect(
|
||||
pos[0] - 6 + 0.5,
|
||||
pos[1] - 5 + 0.5,
|
||||
14,
|
||||
10
|
||||
);
|
||||
}
|
||||
} else if (slot.shape === LiteGraph.ARROW_SHAPE) {
|
||||
ctx.moveTo(pos[0] + 8, pos[1] + 0.5);
|
||||
ctx.lineTo(pos[0] - 4, pos[1] + 6 + 0.5);
|
||||
ctx.lineTo(pos[0] - 4, pos[1] - 6 + 0.5);
|
||||
ctx.closePath();
|
||||
} else {
|
||||
if(low_quality)
|
||||
ctx.rect(pos[0] - 4, pos[1] - 4, 8, 8 );
|
||||
else
|
||||
ctx.arc(pos[0], pos[1], 4, 0, Math.PI * 2);
|
||||
}
|
||||
var shape = slot.shape || (slot.type === LiteGraph.EVENT && LiteGraph.BOX_SHAPE)
|
||||
|| (low_quality && LiteGraph.SQUARE_SHAPE) || LiteGraph.CIRCLE_SHAPE;
|
||||
this.drawSlotGraphic(ctx, pos, shape, horizontal);
|
||||
|
||||
//trigger
|
||||
//if(slot.node_id != null && slot.slot == -1)
|
||||
// ctx.fillStyle = "#F85";
|
||||
|
||||
//if(slot.links != null && slot.links.length)
|
||||
ctx.fill();
|
||||
if(!low_quality)
|
||||
ctx.stroke();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user