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

tiny fixes

Browse Source
This commit is contained in:
tamat
2020-01-13 18:40:59 +01:00
parent 337982ebfe
commit 918b8599ae
8 changed files with 3798 additions and 1083 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1767
build/litegraph.js
View File

File diff suppressed because it is too large Load Diff

1343
build/litegraph.min.js vendored
View File

File diff suppressed because it is too large Load Diff

2
demo/examples/audio_delay.json
View File

@@ -1 +1 @@
{"iteration":27893,"last_node_id":7,"last_link_id":7,"links":{"0":{"id":0,"origin_id":0,"origin_slot":0,"target_id":1,"target_slot":0,"data":null},"1":{"id":1,"origin_id":0,"origin_slot":0,"target_id":2,"target_slot":0,"data":null},"2":{"id":2,"origin_id":2,"origin_slot":0,"target_id":1,"target_slot":2,"data":null},"3":{"id":3,"origin_id":1,"origin_slot":0,"target_id":3,"target_slot":0,"data":null},"4":{"id":4,"origin_id":4,"origin_slot":0,"target_id":1,"target_slot":1,"data":null},"5":{"id":5,"origin_id":5,"origin_slot":0,"target_id":1,"target_slot":3,"data":null},"6":{"id":6,"origin_id":6,"origin_slot":0,"target_id":2,"target_slot":1,"data":null}},"config":{},"nodes":[{"id":0,"title":"Source","type":"audio/source","pos":[195,187],"size":{"0":140,"1":20},"flags":{},"inputs":[{"name":"gain","type":"number","link":null}],"outputs":[{"name":"out","type":"audio","links":[0,1]}],"mode":0,"properties":{"src":"demodata/audio.wav","gain":0.5,"loop":true,"autoplay":true,"playbackRate":1}},{"id":1,"title":"Mixer","type":"audio/mixer","pos":[655,183],"size":{"0":140,"1":62},"flags":{},"inputs":[{"name":"in1","type":"audio","link":0},{"name":"in1 gain","type":"number","link":4},{"name":"in2","type":"audio","link":2},{"name":"in2 gain","type":"number","link":5}],"outputs":[{"name":"out","type":"audio","links":[3]}],"mode":0,"properties":{"gain1":0.5,"gain2":0.8}},{"id":3,"title":"Destination","type":"audio/destination","pos":[911,180],"size":{"0":140,"1":20},"flags":{},"inputs":[{"name":"in","type":"audio","link":3}],"mode":0,"properties":{}},{"id":4,"title":"Knob","type":"widget/knob","pos":[408,59],"size":[54,74],"flags":{},"outputs":[{"name":"","type":"number","links":[4]}],"mode":0,"properties":{"min":0,"max":1,"value":0.24000000000000007,"wcolor":"#7AF","size":50},"boxcolor":"rgba(128,128,128,1.0)"},{"id":5,"title":"Knob","type":"widget/knob","pos":[433,371],"size":[54,74],"flags":{},"outputs":[{"name":"","type":"number","links":[5]}],"mode":0,"properties":{"min":0,"max":1,"value":0.5199999999999996,"wcolor":"#7AF","size":50},"boxcolor":"rgba(128,128,128,1.0)"},{"id":2,"title":"Delay","type":"audio/delay","pos":[385,255],"size":{"0":142,"1":38},"flags":{},"inputs":[{"name":"in","type":"audio","link":1},{"name":"time","type":"number","link":6}],"outputs":[{"name":"out","type":"audio","links":[2]}],"mode":0,"properties":{"delayTime":0.5,"time":1}},{"id":6,"title":"Knob","type":"widget/knob","pos":[199,296],"size":[64,84],"flags":{},"outputs":[{"name":"","type":"number","links":[6]}],"mode":0,"properties":{"min":0,"max":2,"value":0.8799999999999999,"wcolor":"#7AF","size":50},"boxcolor":"rgba(112,112,112,1.0)"}]}
{"last_node_id":7,"last_link_id":7,"nodes":[{"id":6,"type":"widget/knob","pos":[199,296],"size":[64,84],"flags":{},"order":3,"mode":0,"outputs":[{"name":"","type":"number","links":[6]}],"properties":{"min":0,"max":2,"value":0.8799999999999999,"color":"#7AF","precision":2,"wcolor":"#7AF","size":50},"boxcolor":"rgba(112,112,112,1.0)"},{"id":0,"type":"audio/source","pos":[195,187],"size":{"0":137,"1":33},"flags":{},"order":0,"mode":0,"inputs":[{"name":"gain","type":"number","link":null}],"outputs":[{"name":"out","type":"audio","links":[0,1]}],"properties":{"src":"demodata/audio.wav","gain":0.5,"loop":true,"autoplay":true,"playbackRate":1},"boxcolor":"#AA4"},{"id":4,"type":"widget/knob","pos":[408,59],"size":[82,75],"flags":{},"order":1,"mode":0,"outputs":[{"name":"","type":"number","links":[4]}],"properties":{"min":0,"max":1,"value":0.24000000000000007,"color":"#7AF","precision":2,"wcolor":"#7AF","size":50},"boxcolor":"rgba(128,128,128,1.0)"},{"id":2,"type":"audio/delay","pos":[385,255],"size":{"0":143,"1":49},"flags":{},"order":4,"mode":0,"inputs":[{"name":"in","type":"audio","link":1},{"name":"time","type":"number","link":6}],"outputs":[{"name":"out","type":"audio","links":[2]}],"properties":{"delayTime":0.5,"time":1}},{"id":5,"type":"widget/knob","pos":[433,371],"size":[79,79],"flags":{},"order":2,"mode":0,"outputs":[{"name":"","type":"number","links":[5]}],"properties":{"min":0,"max":1,"value":0.5199999999999996,"color":"#7AF","precision":2,"wcolor":"#7AF","size":50},"boxcolor":"rgba(128,128,128,1.0)"},{"id":1,"type":"audio/mixer","pos":[657,180],"size":{"0":147,"1":91},"flags":{},"order":5,"mode":0,"inputs":[{"name":"in1","type":"audio","link":0},{"name":"in1 gain","type":"number","link":4},{"name":"in2","type":"audio","link":2},{"name":"in2 gain","type":"number","link":5}],"outputs":[{"name":"out","type":"audio","links":[3]}],"properties":{"gain1":0.5,"gain2":0.8}},{"id":3,"type":"audio/destination","pos":[911,180],"size":{"0":145,"1":30},"flags":{},"order":6,"mode":0,"inputs":[{"name":"in","type":"audio","link":3}],"properties":{}}],"links":[[0,0,0,1,0,null],[1,0,0,2,0,null],[2,2,0,1,2,null],[3,1,0,3,0,null],[4,4,0,1,1,null],[5,5,0,1,3,null],[6,6,0,2,1,null]],"groups":[],"config":{},"version":0.4}

2
demo/examples/audio_reverb.json
View File

@@ -1 +1 @@
{"iteration":48488,"last_node_id":8,"last_link_id":9,"links":{"0":{"id":0,"origin_id":0,"origin_slot":0,"target_id":1,"target_slot":0,"data":null},"1":{"id":1,"origin_id":0,"origin_slot":0,"target_id":2,"target_slot":0,"data":null},"3":{"id":3,"origin_id":1,"origin_slot":0,"target_id":3,"target_slot":0,"data":null},"4":{"id":4,"origin_id":4,"origin_slot":0,"target_id":1,"target_slot":1,"data":null},"5":{"id":5,"origin_id":5,"origin_slot":0,"target_id":1,"target_slot":3,"data":null},"6":{"id":6,"origin_id":6,"origin_slot":0,"target_id":2,"target_slot":1,"data":null},"7":{"id":7,"origin_id":0,"origin_slot":0,"target_id":7,"target_slot":0,"data":null},"8":{"id":8,"origin_id":7,"origin_slot":0,"target_id":1,"target_slot":2,"data":null}},"config":{},"nodes":[{"id":1,"title":"Mixer","type":"audio/mixer","pos":[655,183],"size":{"0":140,"1":62},"flags":{},"inputs":[{"name":"in1","type":"audio","link":0},{"name":"in1 gain","type":"number","link":4},{"name":"in2","type":"audio","link":8},{"name":"in2 gain","type":"number","link":5}],"outputs":[{"name":"out","type":"audio","links":[3]}],"mode":0,"properties":{"gain1":0.5,"gain2":0.8}},{"id":3,"title":"Destination","type":"audio/destination","pos":[911,180],"size":{"0":140,"1":20},"flags":{},"inputs":[{"name":"in","type":"audio","link":3}],"mode":0,"properties":{}},{"id":0,"title":"Source","type":"audio/source","pos":[195,187],"size":{"0":140,"1":20},"flags":{},"inputs":[{"name":"gain","type":"number","link":null}],"outputs":[{"name":"out","type":"audio","links":[0,7]}],"mode":0,"properties":{"src":"demodata/audio.wav","gain":0.5,"loop":true,"autoplay":true,"playbackRate":1}},{"id":7,"title":"Convolver","type":"audio/convolver","pos":[421,253],"size":{"0":140,"1":20},"flags":{},"inputs":[{"name":"in","type":"audio","link":7}],"outputs":[{"name":"out","type":"audio","links":[8]}],"mode":0,"properties":{"impulse_src":"demodata/impulse.wav","normalize":true}},{"id":5,"title":"Reverb","type":"widget/knob","pos":[398,311],"size":[84,100],"flags":{},"outputs":[{"name":"","type":"number","links":[5]}],"mode":0,"properties":{"min":0,"max":1,"value":0.4099999999999999,"wcolor":"#7AF","size":50},"boxcolor":"rgba(128,128,128,1.0)"},{"id":4,"title":"Main","type":"widget/knob","pos":[408,59],"size":[81,93],"flags":{},"outputs":[{"name":"","type":"number","links":[4]}],"mode":0,"properties":{"min":0,"max":1,"value":0.21000000000000002,"wcolor":"#7AF","size":50},"boxcolor":"rgba(128,128,128,1.0)"}]}
{"last_node_id":8,"last_link_id":9,"nodes":[{"id":4,"type":"widget/knob","pos":[408,59],"size":[81,93],"flags":{},"order":2,"mode":0,"outputs":[{"name":"","type":"number","links":[4]}],"title":"Main","properties":{"min":0,"max":1,"value":0.21000000000000002,"color":"#7AF","precision":2,"wcolor":"#7AF","size":50},"boxcolor":"rgba(128,128,128,1.0)"},{"id":5,"type":"widget/knob","pos":[398,350],"size":[84,100],"flags":{},"order":1,"mode":0,"outputs":[{"name":"","type":"number","links":[5]}],"title":"Reverb","properties":{"min":0,"max":1,"value":0.4099999999999999,"color":"#7AF","precision":2,"wcolor":"#7AF","size":50},"boxcolor":"rgba(128,128,128,1.0)"},{"id":7,"type":"audio/convolver","pos":[421,253],"size":{"0":140,"1":31},"flags":{},"order":3,"mode":0,"inputs":[{"name":"in","type":"audio","link":7}],"outputs":[{"name":"out","type":"audio","links":[8]}],"properties":{"impulse_src":"demodata/impulse.wav","normalize":true}},{"id":1,"type":"audio/mixer","pos":[655,183],"size":{"0":145,"1":94},"flags":{},"order":4,"mode":0,"inputs":[{"name":"in1","type":"audio","link":0},{"name":"in1 gain","type":"number","link":4},{"name":"in2","type":"audio","link":8},{"name":"in2 gain","type":"number","link":5}],"outputs":[{"name":"out","type":"audio","links":[3]}],"properties":{"gain1":0.5,"gain2":0.8}},{"id":3,"type":"audio/destination","pos":[911,180],"size":{"0":141,"1":34},"flags":{},"order":5,"mode":0,"inputs":[{"name":"in","type":"audio","link":3}],"properties":{}},{"id":0,"type":"audio/source","pos":[195,187],"size":{"0":143,"1":30},"flags":{},"order":0,"mode":0,"inputs":[{"name":"gain","type":"number","link":null}],"outputs":[{"name":"out","type":"audio","links":[0,7]}],"properties":{"src":"demodata/audio.wav","gain":0.5,"loop":true,"autoplay":true,"playbackRate":1},"boxcolor":"#AA4"}],"links":[[0,0,0,1,0,null],[1,0,0,2,0,null],[3,1,0,3,0,null],[4,4,0,1,1,null],[5,5,0,1,3,null],[6,6,0,2,1,null],[7,0,0,7,0,null],[8,7,0,1,2,null]],"groups":[],"config":{},"version":0.4}

357
src/litegraph.js
View File

@@ -1012,7 +1012,7 @@
* @method arrange
*/
LGraph.prototype.arrange = function(margin) {
margin = margin || 40;
margin = margin || 100;
var nodes = this.computeExecutionOrder(false, true);
var columns = [];
@@ -1033,7 +1033,7 @@
continue;
}
var max_size = 100;
var y = margin;
var y = margin + LiteGraph.NODE_TITLE_HEIGHT;
for (var j = 0; j < column.length; ++j) {
var node = column[j];
node.pos[0] = x;
@@ -1041,7 +1041,7 @@
if (node.size[0] > max_size) {
max_size = node.size[0];
}
y += node.size[1] + margin;
y += node.size[1] + margin + LiteGraph.NODE_TITLE_HEIGHT;
}
x += max_size + margin;
}
@@ -1893,6 +1893,8 @@
//copy all stored fields
for (var i in data) {
if(i == "nodes" || i == "groups")
continue;
this[i] = data[i];
}
@@ -2033,7 +2035,7 @@
+ skip_repeated_outputs: when adding new outputs, it wont show if there is one already connected
+ resizable: if set to false it wont be resizable with the mouse
+ horizontal: slots are distributed horizontally
+ widgets_up: widgets start from the top of the node
+ widgets_start_y: widgets start at y distance from the top of the node
flags object:
+ collapsed: if it is collapsed
@@ -2398,7 +2400,9 @@
if (this.outputs[slot].links) {
for (var i = 0; i < this.outputs[slot].links.length; i++) {
var link_id = this.outputs[slot].links[i];
this.graph.links[link_id].data = data;
var link = this.graph.links[link_id];
if(link)
link.data = data;
}
}
};
@@ -2712,19 +2716,13 @@
return;
}
if (this.graph) {
if (this.graph)
this.graph._last_trigger_time = LiteGraph.getTime();
}
for (var i = 0; i < this.outputs.length; ++i) {
var output = this.outputs[i];
if (
!output ||
output.type !== LiteGraph.EVENT ||
(action && output.name != action)
) {
if ( !output || output.type !== LiteGraph.EVENT || (action && output.name != action) )
continue;
}
this.triggerSlot(i, param);
}
};
@@ -3060,19 +3058,20 @@
var size = out || new Float32Array([0, 0]);
rows = Math.max(rows, 1);
var font_size = LiteGraph.NODE_TEXT_SIZE; //although it should be graphcanvas.inner_text_font size
size[1] =
(this.constructor.slot_start_y || 0) +
rows * LiteGraph.NODE_SLOT_HEIGHT;
size[1] = (this.constructor.slot_start_y || 0) + rows * LiteGraph.NODE_SLOT_HEIGHT;
var widgets_height = 0;
if (this.widgets && this.widgets.length) {
widgets_height =
this.widgets.length * (LiteGraph.NODE_WIDGET_HEIGHT + 4) + 8;
widgets_height = this.widgets.length * (LiteGraph.NODE_WIDGET_HEIGHT + 4) + 8;
}
if (this.widgets_up) {
size[1] = Math.max(size[1], widgets_height);
} else {
//compute height using widgets height
if( this.widgets_up )
size[1] = Math.max( size[1], widgets_height );
else if( this.widgets_start_y != null )
size[1] = Math.max( size[1], widgets_height + this.widgets_start_y );
else
size[1] += widgets_height;
}
var font_size = font_size;
var title_width = compute_text_size(this.title);
@@ -5097,10 +5096,7 @@ LGraphNode.prototype.executeAction = function(action)
}
//if do not capture mouse
if (
node.onMouseDown &&
node.onMouseDown( e, [e.canvasX - node.pos[0], e.canvasY - node.pos[1]], this )
) {
if ( node.onMouseDown && node.onMouseDown( e, [e.canvasX - node.pos[0], e.canvasY - node.pos[1]], this ) ) {
block_drag_node = true;
} else if (this.live_mode) {
clicking_canvas_bg = true;
@@ -5136,6 +5132,7 @@ LGraphNode.prototype.executeAction = function(action)
}
//link clicked
this.showLinkMenu(link, e);
this.over_link_center = null; //clear tooltip
break;
}
@@ -5396,12 +5393,8 @@ LGraphNode.prototype.executeAction = function(action)
}
}
if (
this.node_capturing_input &&
this.node_capturing_input != node &&
this.node_capturing_input.onMouseMove
) {
this.node_capturing_input.onMouseMove(e);
if ( this.node_capturing_input && this.node_capturing_input != node && this.node_capturing_input.onMouseMove ) {
this.node_capturing_input.onMouseMove(e,[e.canvasX - this.node_capturing_input.pos[0],e.canvasY - this.node_capturing_input.pos[1]], this);
}
if (this.node_dragged && !this.live_mode) {
@@ -5417,27 +5410,17 @@ LGraphNode.prototype.executeAction = function(action)
if (this.resizing_node && !this.live_mode) {
//convert mouse to node space
this.resizing_node.size[0] =
e.canvasX - this.resizing_node.pos[0];
this.resizing_node.size[1] =
e.canvasY - this.resizing_node.pos[1];
this.resizing_node.size[0] = e.canvasX - this.resizing_node.pos[0];
this.resizing_node.size[1] = e.canvasY - this.resizing_node.pos[1];
//constraint size
var max_slots = Math.max(
this.resizing_node.inputs
? this.resizing_node.inputs.length
: 0,
this.resizing_node.outputs
? this.resizing_node.outputs.length
: 0
this.resizing_node.inputs ? this.resizing_node.inputs.length : 0,
this.resizing_node.outputs ? this.resizing_node.outputs.length : 0
);
var min_height =
max_slots * LiteGraph.NODE_SLOT_HEIGHT +
(this.resizing_node.widgets
? this.resizing_node.widgets.length
: 0) *
(LiteGraph.NODE_WIDGET_HEIGHT + 4) +
4;
(this.resizing_node.widgets ? this.resizing_node.widgets.length : 0) * (LiteGraph.NODE_WIDGET_HEIGHT + 4) + 4;
if (this.resizing_node.size[1] < min_height) {
this.resizing_node.size[1] = min_height;
}
@@ -5663,14 +5646,7 @@ LGraphNode.prototype.executeAction = function(action)
this.dragging_canvas = false;
if (this.node_over && this.node_over.onMouseUp) {
this.node_over.onMouseUp(
e,
[
e.canvasX - this.node_over.pos[0],
e.canvasY - this.node_over.pos[1]
],
this
);
this.node_over.onMouseUp( e, [ e.canvasX - this.node_over.pos[0], e.canvasY - this.node_over.pos[1] ], this );
}
if (
this.node_capturing_input &&
@@ -5971,7 +5947,10 @@ LGraphNode.prototype.executeAction = function(action)
var link_info = clipboard_info.links[i];
var origin_node = nodes[link_info[0]];
var target_node = nodes[link_info[2]];
origin_node.connect(link_info[1], target_node, link_info[3]);
if( origin_node && target_node )
origin_node.connect(link_info[1], target_node, link_info[3]);
else
console.warn("Warning, nodes missing on pasting");
}
this.selectNodes(nodes);
@@ -6219,7 +6198,16 @@ LGraphNode.prototype.executeAction = function(action)
LGraphCanvas.prototype.deleteSelectedNodes = function() {
for (var i in this.selected_nodes) {
var node = this.selected_nodes[i];
//if(m == this.node_in_panel) this.showNodePanel(null);
//autoconnect when possible (very basic, only takes into account first input-output)
if(node.inputs && node.inputs.length && node.outputs && node.outputs.length && LiteGraph.isValidConnection( node.inputs[0].type, node.outputs[0].type ) && node.inputs[0].link && node.outputs[0].links && node.outputs[0].links.length )
{
var input_link = node.graph.links[ node.inputs[0].link ];
var output_link = node.graph.links[ node.outputs[0].links[0] ];
var input_node = node.getInputNode(0);
var output_node = node.getOutputNodes(0)[0];
if(input_node && output_node)
input_node.connect( input_link.origin_slot, output_node, output_link.target_slot );
}
this.graph.remove(node);
if (this.onNodeDeselected) {
this.onNodeDeselected(node);
@@ -7114,12 +7102,15 @@ LGraphNode.prototype.executeAction = function(action)
ctx.globalAlpha = 1;
if (node.widgets) {
var widgets_y = max_y;
if (horizontal || node.widgets_up) {
max_y = 2;
widgets_y = 2;
}
if( node.widgets_start_y != null )
widgets_y = node.widgets_start_y;
this.drawNodeWidgets(
node,
max_y,
widgets_y,
ctx,
this.node_widget && this.node_widget[0] == node
? this.node_widget[1]
@@ -8109,6 +8100,8 @@ LGraphNode.prototype.executeAction = function(action)
ctx.strokeStyle = outline_color;
ctx.fillStyle = "#222";
ctx.textAlign = "left";
if(w.disabled)
ctx.globalAlpha *= 0.5;
switch (w.type) {
case "button":
@@ -8258,6 +8251,8 @@ LGraphNode.prototype.executeAction = function(action)
break;
}
posY += H + 4;
ctx.globalAlpha = this.editor_alpha;
}
ctx.restore();
ctx.textAlign = "left";
@@ -8285,13 +8280,9 @@ LGraphNode.prototype.executeAction = function(action)
for (var i = 0; i < node.widgets.length; ++i) {
var w = node.widgets[i];
if (
w == active_widget ||
(x > 6 &&
x < width - 12 &&
y > w.last_y &&
y < w.last_y + LiteGraph.NODE_WIDGET_HEIGHT)
) {
if(w.disabled)
continue;
if ( w == active_widget || (x > 6 && x < width - 12 && y > w.last_y && y < w.last_y + LiteGraph.NODE_WIDGET_HEIGHT) ) {
//inside widget
switch (w.type) {
case "button":
@@ -8300,7 +8291,7 @@ LGraphNode.prototype.executeAction = function(action)
}
if (w.callback) {
setTimeout(function() {
w.callback(w, that, node, pos);
w.callback(w, that, node, pos, event);
}, 20);
}
w.clicked = true;
@@ -8396,11 +8387,9 @@ LGraphNode.prototype.executeAction = function(action)
case "toggle":
if (event.type == "mousedown") {
w.value = !w.value;
if (w.callback) {
setTimeout(function() {
inner_value_change(w, w.value);
}, 20);
}
setTimeout(function() {
inner_value_change(w, w.value);
}, 20);
}
break;
case "string":
@@ -8620,7 +8609,7 @@ LGraphNode.prototype.executeAction = function(action)
canvas.graph.add(group);
};
LGraphCanvas.onMenuAdd = function(node, options, e, prev_menu) {
LGraphCanvas.onMenuAdd = function(node, options, e, prev_menu, callback) {
var canvas = LGraphCanvas.active_canvas;
var ref_window = canvas.getCanvasWindow();
@@ -8659,6 +8648,8 @@ LGraphNode.prototype.executeAction = function(action)
node.pos = canvas.convertEventToCanvasOffset(first_event);
canvas.graph.add(node);
}
if(callback)
callback(node);
}
return false;
@@ -8931,15 +8922,31 @@ LGraphNode.prototype.executeAction = function(action)
LGraphCanvas.prototype.showLinkMenu = function(link, e) {
var that = this;
console.log(link.data);
new LiteGraph.ContextMenu(["Delete"], {
console.log(link);
var options = ["Add Node",null,"Delete"];
var menu = new LiteGraph.ContextMenu(options, {
event: e,
title: link.data != null ? link.data.constructor.name : null,
callback: inner_clicked
});
function inner_clicked(v) {
function inner_clicked(v,options,e) {
switch (v) {
case "Add Node":
LGraphCanvas.onMenuAdd(null, null, e, menu, function(node){
console.log("node autoconnect");
var node_left = that.graph.getNodeById( link.origin_id );
var node_right = that.graph.getNodeById( link.target_id );
if(!node.inputs || !node.inputs.length || !node.outputs || !node.outputs.length)
return;
if( node_left.outputs[ link.origin_slot ].type == node.inputs[0].type && node.outputs[0].type == node_right.inputs[0].type )
{
node_left.connect( link.origin_slot, node, 0 );
node.connect( 0, node_right, link.target_slot );
node.pos[0] -= node.size[0] * 0.5;
}
});
break;
case "Delete":
that.graph.removeLink(link.id);
break;
@@ -9118,6 +9125,9 @@ LGraphNode.prototype.executeAction = function(action)
LGraphCanvas.prototype.showSearchBox = function(event) {
var that = this;
var input_html = "";
var graphcanvas = LGraphCanvas.active_canvas;
var canvas = graphcanvas.canvas;
var root_document = canvas.ownerDocument || document;
var dialog = document.createElement("div");
dialog.className = "litegraph litesearchbox graphdialog rounded";
@@ -9125,7 +9135,9 @@ LGraphNode.prototype.executeAction = function(action)
"<span class='name'>Search</span> <input autofocus type='text' class='value rounded'/><div class='helper'></div>";
dialog.close = function() {
that.search_box = null;
document.body.focus();
root_document.body.focus();
root_document.body.style.overflow = "";
setTimeout(function() {
that.canvas.focus();
}, 20); //important, if canvas loses focus keys wont be captured
@@ -9202,14 +9214,13 @@ LGraphNode.prototype.executeAction = function(action)
});
}
var graphcanvas = LGraphCanvas.active_canvas;
var canvas = graphcanvas.canvas;
var root_document = canvas.ownerDocument || document;
if( root_document.fullscreenElement )
root_document.fullscreenElement.appendChild(dialog);
else
{
root_document.body.appendChild(dialog);
root_document.body.style.overflow = "hidden";
}
//compute best position
var rect = canvas.getBoundingClientRect();
@@ -9219,6 +9230,10 @@ LGraphNode.prototype.executeAction = function(action)
dialog.style.left = left + "px";
dialog.style.top = top + "px";
//To avoid out of screen problems
if(event.layerY > (rect.height - 200))
helper.style.maxHeight = (rect.height - event.layerY - 20) + "px";
/*
var offsetx = -20;
var offsety = -20;
@@ -9315,7 +9330,7 @@ LGraphNode.prototype.executeAction = function(action)
return;
}
selected.classList.add("selected");
selected.scrollIntoView({block: "end", behaviour: "smooth"});
selected.scrollIntoView({block: "end", behavior: "smooth"});
}
function refreshHelper() {
@@ -10650,6 +10665,184 @@ LGraphNode.prototype.executeAction = function(action)
}
};
//used by some widgets to render a curve editor
function CurveEditor( points )
{
this.points = points;
this.selected = -1;
this.nearest = -1;
this.size = null; //stores last size used
this.must_update = true;
this.margin = 5;
}
CurveEditor.sampleCurve = function(f,points)
{
if(!points)
return;
for(var i = 0; i < points.length - 1; ++i)
{
var p = points[i];
var pn = points[i+1];
if(pn[0] < f)
continue;
var r = (pn[0] - p[0]);
if( Math.abs(r) < 0.00001 )
return p[1];
var local_f = (f - p[0]) / r;
return p[1] * (1.0 - local_f) + pn[1] * local_f;
}
return 0;
}
CurveEditor.prototype.draw = function( ctx, size, graphcanvas, background_color, line_color, inactive )
{
var points = this.points;
if(!points)
return;
this.size = size;
var w = size[0] - this.margin * 2;
var h = size[1] - this.margin * 2;
line_color = line_color || "#666";
ctx.save();
ctx.translate(this.margin,this.margin);
if(background_color)
{
ctx.fillStyle = "#111";
ctx.fillRect(0,0,w,h);
ctx.fillStyle = "#222";
ctx.fillRect(w*0.5,0,1,h);
ctx.strokeStyle = "#333";
ctx.strokeRect(0,0,w,h);
}
ctx.strokeStyle = line_color;
if(inactive)
ctx.globalAlpha = 0.5;
ctx.beginPath();
for(var i = 0; i < points.length; ++i)
{
var p = points[i];
ctx.lineTo( p[0] * w, (1.0 - p[1]) * h );
}
ctx.stroke();
ctx.globalAlpha = 1;
if(!inactive)
for(var i = 0; i < points.length; ++i)
{
var p = points[i];
ctx.fillStyle = this.selected == i ? "#FFF" : (this.nearest == i ? "#DDD" : "#AAA");
ctx.beginPath();
ctx.arc( p[0] * w, (1.0 - p[1]) * h, 2, 0, Math.PI * 2 );
ctx.fill();
}
ctx.restore();
}
//localpos is mouse in curve editor space
CurveEditor.prototype.onMouseDown = function( localpos, graphcanvas )
{
var points = this.points;
if(!points)
return;
if( localpos[1] < 0 )
return;
//this.captureInput(true);
var w = this.size[0] - this.margin * 2;
var h = this.size[1] - this.margin * 2;
var x = localpos[0] - this.margin;
var y = localpos[1] - this.margin;
var pos = [x,y];
var max_dist = 30 / graphcanvas.ds.scale;
//search closer one
this.selected = this.getCloserPoint(pos, max_dist);
//create one
if(this.selected == -1)
{
var point = [x / w, 1 - y / h];
points.push(point);
points.sort(function(a,b){ return a[0] - b[0]; });
this.selected = points.indexOf(point);
this.must_update = true;
}
if(this.selected != -1)
return true;
}
CurveEditor.prototype.onMouseMove = function( localpos, graphcanvas )
{
var points = this.points;
if(!points)
return;
var s = this.selected;
if(s < 0)
return;
var x = (localpos[0] - this.margin) / (this.size[0] - this.margin * 2 );
var y = (localpos[1] - this.margin) / (this.size[1] - this.margin * 2 );
var curvepos = [(localpos[0] - this.margin),(localpos[1] - this.margin)];
var max_dist = 30 / graphcanvas.ds.scale;
this._nearest = this.getCloserPoint(curvepos, max_dist);
var point = points[s];
if(point)
{
var is_edge_point = s == 0 || s == points.length - 1;
if( !is_edge_point && (localpos[0] < -10 || localpos[0] > this.size[0] + 10 || localpos[1] < -10 || localpos[1] > this.size[1] + 10) )
{
points.splice(s,1);
this.selected = -1;
return;
}
if( !is_edge_point ) //not edges
point[0] = Math.clamp(x,0,1);
else
point[0] = s == 0 ? 0 : 1;
point[1] = 1.0 - Math.clamp(y,0,1);
points.sort(function(a,b){ return a[0] - b[0]; });
this.selected = points.indexOf(point);
this.must_update = true;
}
}
CurveEditor.prototype.onMouseUp = function( localpos, graphcanvas )
{
this.selected = -1;
return false;
}
CurveEditor.prototype.getCloserPoint = function(pos, max_dist)
{
var points = this.points;
if(!points)
return -1;
max_dist = max_dist || 30;
var w = (this.size[0] - this.margin * 2);
var h = (this.size[1] - this.margin * 2);
var num = points.length;
var p2 = [0,0];
var min_dist = 1000000;
var closest = -1;
var last_valid = -1;
for(var i = 0; i < num; ++i)
{
var p = points[i];
p2[0] = p[0] * w;
p2[1] = (1.0 - p[1]) * h;
if(p2[0] < pos[0])
last_valid = i;
var dist = vec2.distance(pos,p2);
if(dist > min_dist || dist > max_dist)
continue;
closest = i;
min_dist = dist;
}
return closest;
}
LiteGraph.CurveEditor = CurveEditor;
//used to create nodes from wrapping functions
LiteGraph.getParameterNames = function(func) {
return (func + "")

1027
src/nodes/geometry.js
View File

File diff suppressed because it is too large Load Diff

320
src/nodes/gltextures.js
View File

@@ -10,7 +10,8 @@
LGraphCanvas.link_type_colors["Texture"] = "#987";
function LGraphTexture() {
this.addOutput("Texture", "Texture");
this.addOutput("tex", "Texture");
this.addOutput("name", "string");
this.properties = { name: "", filter: true };
this.size = [
LGraphTexture.image_preview_size,
@@ -222,6 +223,8 @@
}
if (!tex) {
this.setOutputData( 0, null );
this.setOutputData( 1, "" );
return;
}
@@ -233,9 +236,10 @@
tex.setParameter(gl.TEXTURE_MAG_FILTER, gl.LINEAR);
}
this.setOutputData(0, tex);
this.setOutputData( 0, tex );
this.setOutputData( 1, tex.fullpath || tex.filename );
for (var i = 1; i < this.outputs.length; i++) {
for (var i = 2; i < this.outputs.length; i++) {
var output = this.outputs[i];
if (!output) {
continue;
@@ -3027,10 +3031,106 @@
}\n\
";
LiteGraph.registerNodeType(
"texture/depth_range",
LGraphTextureDepthRange
);
LiteGraph.registerNodeType( "texture/depth_range", LGraphTextureDepthRange );
// Texture Depth *****************************************
function LGraphTextureLinearDepth() {
this.addInput("Texture", "Texture");
this.addOutput("Texture", "Texture");
this.properties = {
precision: LGraphTexture.DEFAULT,
invert: false
};
this._uniforms = {
u_texture: 0,
u_near: 0.1,
u_far: 10000
};
}
LGraphTextureLinearDepth.widgets_info = {
precision: { widget: "combo", values: LGraphTexture.MODE_VALUES }
};
LGraphTextureLinearDepth.title = "Linear Depth";
LGraphTextureLinearDepth.desc = "Creates a color texture with linear depth";
LGraphTextureLinearDepth.prototype.onExecute = function() {
if (!this.isOutputConnected(0)) {
return;
} //saves work
var tex = this.getInputData(0);
if (!tex || (tex.format != gl.DEPTH_COMPONENT && tex.format != gl.DEPTH_STENCIL) ) {
return;
}
var precision = this.properties.precision == LGraphTexture.HIGH ? gl.HIGH_PRECISION_FORMAT : gl.UNSIGNED_BYTE;
if ( !this._temp_texture || this._temp_texture.type != precision || this._temp_texture.width != tex.width || this._temp_texture.height != tex.height ) {
this._temp_texture = new GL.Texture(tex.width, tex.height, {
type: precision,
format: gl.RGB,
filter: gl.LINEAR
});
}
var uniforms = this._uniforms;
uniforms.u_near = tex.near_far_planes[0];
uniforms.u_far = tex.near_far_planes[1];
uniforms.u_invert = this.properties.invert ? 1 : 0;
gl.disable(gl.BLEND);
gl.disable(gl.DEPTH_TEST);
var mesh = Mesh.getScreenQuad();
if(!LGraphTextureLinearDepth._shader)
LGraphTextureLinearDepth._shader = new GL.Shader( GL.Shader.SCREEN_VERTEX_SHADER, LGraphTextureLinearDepth.pixel_shader);
var shader = LGraphTextureLinearDepth._shader;
//NEAR AND FAR PLANES
var planes = null;
if (tex.near_far_planes) {
planes = tex.near_far_planes;
} else if (window.LS && LS.Renderer._main_camera) {
planes = LS.Renderer._main_camera._uniforms.u_camera_planes;
} else {
planes = [0.1, 1000];
} //hardcoded
uniforms.u_camera_planes = planes;
this._temp_texture.drawTo(function() {
tex.bind(0);
shader.uniforms(uniforms).draw(mesh);
});
this._temp_texture.near_far_planes = planes;
this.setOutputData(0, this._temp_texture);
};
LGraphTextureLinearDepth.pixel_shader =
"precision highp float;\n\
precision highp float;\n\
varying vec2 v_coord;\n\
uniform sampler2D u_texture;\n\
uniform float u_near;\n\
uniform float u_far;\n\
uniform int u_invert;\n\
\n\
void main() {\n\
float zNear = u_near;\n\
float zFar = u_far;\n\
float depth = texture2D(u_texture, v_coord).x;\n\
depth = depth * 2.0 - 1.0;\n\
float f = zNear * (depth + 1.0) / (zFar + zNear - depth * (zFar - zNear));\n\
if( u_invert == 1 )\n\
f = 1.0 - f;\n\
gl_FragColor = vec4(vec3(f),1.0);\n\
}\n\
";
LiteGraph.registerNodeType( "texture/linear_depth", LGraphTextureLinearDepth );
// Texture Blur *****************************************
function LGraphTextureBlur() {
@@ -4155,6 +4255,211 @@ void main(void){\n\
LiteGraph.registerNodeType("texture/lensfx", LGraphLensFX);
function LGraphTextureCurve() {
this.addInput("in", "Texture");
this.addOutput("out", "Texture");
this.properties = { precision: LGraphTexture.LOW, split_channels: false };
this._values = new Uint8Array(256*4);
this._values.fill(255);
this._curve_texture = null;
this._uniforms = { u_texture: 0, u_curve: 1, u_range: 1.0 };
this._must_update = true;
this._points = {
RGB: [[0,0],[1,1]],
R: [[0,0],[1,1]],
G: [[0,0],[1,1]],
B: [[0,0],[1,1]]
};
this.curve_editor = null;
this.addWidget("toggle","Split Channels",false,"split_channels");
this.addWidget("combo","Channel","RGB",{ values:["RGB","R","G","B"]});
this.curve_offset = 68;
this.size = [ 240, 160 ];
}
LGraphTextureCurve.title = "Curve";
LGraphTextureCurve.prototype.onExecute = function() {
var tex = this.getInputData(0);
if (!tex) {
return;
}
if (!this.isOutputConnected(0)) {
return;
} //saves work
var temp = this._temp_texture;
if ( !temp || temp.width != tex.width || temp.height != tex.height || temp.type != tex.type ) {
temp = this._temp_texture = new GL.Texture( tex.width, tex.height, { type: tex.type, format: gl.RGBA, filter: gl.LINEAR } );
}
var shader = LGraphTextureCurve._shader;
if (!shader) {
shader = LGraphTextureCurve._shader = new GL.Shader( GL.Shader.SCREEN_VERTEX_SHADER, LGraphTextureCurve.pixel_shader );
}
if(this._must_update || !this._curve_texture )
this.updateCurve();
var uniforms = this._uniforms;
var curve_texture = this._curve_texture;
//apply shader
temp.drawTo(function() {
gl.disable(gl.DEPTH_TEST);
tex.bind(0);
curve_texture.bind(1);
shader.uniforms(uniforms).draw(GL.Mesh.getScreenQuad());
});
this.setOutputData(0, temp);
};
LGraphTextureCurve.prototype.sampleCurve = function(f,points)
{
var points = points || this._points.RGB;
if(!points)
return;
for(var i = 0; i < points.length - 1; ++i)
{
var p = points[i];
var pn = points[i+1];
if(pn[0] < f)
continue;
var r = (pn[0] - p[0]);
if( Math.abs(r) < 0.00001 )
return p[1];
var local_f = (f - p[0]) / r;
return p[1] * (1.0 - local_f) + pn[1] * local_f;
}
return 0;
}
LGraphTextureCurve.prototype.updateCurve = function()
{
var values = this._values;
var num = values.length / 4;
var split = this.properties.split_channels;
for(var i = 0; i < num; ++i)
{
if(split)
{
values[i*4] = Math.clamp( this.sampleCurve(i/num,this._points.R)*255,0,255);
values[i*4+1] = Math.clamp( this.sampleCurve(i/num,this._points.G)*255,0,255);
values[i*4+2] = Math.clamp( this.sampleCurve(i/num,this._points.B)*255,0,255);
}
else
{
var v = this.sampleCurve(i/num);//sample curve
values[i*4] = values[i*4+1] = values[i*4+2] = Math.clamp(v*255,0,255);
}
values[i*4+3] = 255; //alpha fixed
}
if(!this._curve_texture)
this._curve_texture = new GL.Texture(256,1,{ format: gl.RGBA, magFilter: gl.LINEAR, wrap: gl.CLAMP_TO_EDGE });
this._curve_texture.uploadData(values,null,true);
}
LGraphTextureCurve.prototype.onSerialize = function(o)
{
var curves = {};
for(var i in this._points)
curves[i] = this._points[i].concat();
o.curves = curves;
}
LGraphTextureCurve.prototype.onConfigure = function(o)
{
this._points = o.curves;
if(this.curve_editor)
curve_editor.points = this._points;
this._must_update = true;
}
LGraphTextureCurve.prototype.onMouseDown = function(e, localpos, graphcanvas)
{
if(this.curve_editor)
{
var r = this.curve_editor.onMouseDown([localpos[0],localpos[1]-this.curve_offset], graphcanvas);
if(r)
this.captureInput(true);
return r;
}
}
LGraphTextureCurve.prototype.onMouseMove = function(e, localpos, graphcanvas)
{
if(this.curve_editor)
return this.curve_editor.onMouseMove([localpos[0],localpos[1]-this.curve_offset], graphcanvas);
}
LGraphTextureCurve.prototype.onMouseUp = function(e, localpos, graphcanvas)
{
if(this.curve_editor)
return this.curve_editor.onMouseUp([localpos[0],localpos[1]-this.curve_offset], graphcanvas);
this.captureInput(false);
}
LGraphTextureCurve.channel_line_colors = { "RGB":"#666","R":"#F33","G":"#3F3","B":"#33F" };
LGraphTextureCurve.prototype.onDrawBackground = function(ctx, graphcanvas)
{
if(this.flags.collapsed)
return;
if(!this.curve_editor)
this.curve_editor = new LiteGraph.CurveEditor(this._points.R);
ctx.save();
ctx.translate(0,this.curve_offset);
var channel = this.widgets[1].value;
if(this.properties.split_channels)
{
if(channel == "RGB")
{
this.widgets[1].value = channel = "R";
this.widgets[1].disabled = false;
}
this.curve_editor.points = this._points.R;
this.curve_editor.draw( ctx, [this.size[0],this.size[1] - this.curve_offset], graphcanvas, "#111", LGraphTextureCurve.channel_line_colors.R, true );
ctx.globalCompositeOperation = "lighten";
this.curve_editor.points = this._points.G;
this.curve_editor.draw( ctx, [this.size[0],this.size[1] - this.curve_offset], graphcanvas, null, LGraphTextureCurve.channel_line_colors.G, true );
this.curve_editor.points = this._points.B;
this.curve_editor.draw( ctx, [this.size[0],this.size[1] - this.curve_offset], graphcanvas, null, LGraphTextureCurve.channel_line_colors.B, true );
ctx.globalCompositeOperation = "source-over";
}
else
{
this.widgets[1].value = channel = "RGB";
this.widgets[1].disabled = true;
}
this.curve_editor.points = this._points[channel];
this.curve_editor.draw( ctx, [this.size[0],this.size[1] - this.curve_offset], graphcanvas, this.properties.split_channels ? null : "#111", LGraphTextureCurve.channel_line_colors[channel] );
ctx.restore();
}
LGraphTextureCurve.pixel_shader =
"precision highp float;\n\
varying vec2 v_coord;\n\
uniform sampler2D u_texture;\n\
uniform sampler2D u_curve;\n\
uniform float u_range;\n\
\n\
void main() {\n\
vec4 color = texture2D( u_texture, v_coord ) * u_range;\n\
color.x = texture2D( u_curve, vec2( color.x, 0.5 ) ).x;\n\
color.y = texture2D( u_curve, vec2( color.y, 0.5 ) ).y;\n\
color.z = texture2D( u_curve, vec2( color.z, 0.5 ) ).z;\n\
//color.w = texture2D( u_curve, vec2( color.w, 0.5 ) ).w;\n\
gl_FragColor = color;\n\
}";
LiteGraph.registerNodeType("texture/curve", LGraphTextureCurve);
//simple exposition, but plan to expand it to support different gamma curves
function LGraphExposition() {
this.addInput("in", "Texture");
@@ -4391,6 +4696,7 @@ void main(void){\n\
//rgb = xyYtoRGB(xyY);\n\
//second\n\
rgb = (rgb / lum) * Ld;\n\
rgb = max(rgb,vec3(0.001));\n\
rgb = pow( rgb, vec3( u_igamma ) );\n\
gl_FragColor = vec4( rgb, color.a );\n\
}";

63
src/nodes/math3d.js
View File

@@ -1,6 +1,69 @@
(function(global) {
var LiteGraph = global.LiteGraph;
function Math3DMat4()
{
this.addInput("T", "vec3");
this.addInput("R", "vec3");
this.addInput("S", "vec3");
this.addOutput("mat4", "mat4");
this.properties = {
"T":[0,0,0],
"R":[0,0,0],
"S":[1,1,1],
R_in_degrees: true
};
this._result = mat4.create();
this._must_update = true;
}
Math3DMat4.title = "mat4";
Math3DMat4.temp_quat = new Float32Array([0,0,0,1]);
Math3DMat4.temp_mat4 = new Float32Array(16);
Math3DMat4.temp_vec3 = new Float32Array(3);
Math3DMat4.prototype.onPropertyChanged = function(name, value)
{
this._must_update = true;
}
Math3DMat4.prototype.onExecute = function()
{
var M = this._result;
var Q = Math3DMat4.temp_quat;
var temp_mat4 = Math3DMat4.temp_mat4;
var temp_vec3 = Math3DMat4.temp_vec3;
var T = this.getInputData(0);
var R = this.getInputData(1);
var S = this.getInputData(2);
if( this._must_update || T || R || S )
{
T = T || this.properties.T;
R = R || this.properties.R;
S = S || this.properties.S;
mat4.identity( M );
mat4.translate( M, M, T );
if(this.properties.R_in_degrees)
{
temp_vec3.set( R );
vec3.scale(temp_vec3,temp_vec3,DEG2RAD);
quat.fromEuler( Q, temp_vec3 );
}
else
quat.fromEuler( Q, R );
mat4.fromQuat( temp_mat4, Q );
mat4.multiply( M, M, temp_mat4 );
mat4.scale( M, M, S );
}
this.setOutputData(0, M);
}
LiteGraph.registerNodeType("math3d/mat4", Math3DMat4);
//Math 3D operation
function Math3DOperation() {
this.addInput("A", "number,vec3");