Merge branch 'master' of https://github.com/jagenjo/litegraph.js

README.md

@@ -139,6 +139,9 @@ graph.start()
 
 ## Projects using it
 
+### [comfyUI](https://github.com/comfyanonymous/ComfyUI)
+![screenshot](https://github.com/comfyanonymous/ComfyUI/blob/6efe561c2a7321501b1b27f47039c7616dda1860/comfyui_screenshot.png)
+
 ### [webglstudio.org](http://webglstudio.org)
 
 ![WebGLStudio](imgs/webglstudio.gif "WebGLStudio")

src/litegraph.d.ts

@@ -825,9 +825,12 @@ export declare class LGraphNode {
 
     /**
      * returns the bounding of the object, used for rendering purposes
-     * @return [x, y, width, height]
+     * @method getBounding
+     * @param out [optional] a place to store the output, to free garbage
+     * @param compute_outer [optional] set to true to include the shadow and connection points in the bounding calculation
+     * @return the bounding box in format of [topleft_cornerx, topleft_cornery, width, height]
      */
-    getBounding(): Vector4;
+    getBounding(out?: Vector4, compute_outer?: boolean): Vector4;
     /** checks if a point is inside the shape of a node */
     isPointInside(
         x: number,

src/litegraph.js

@@ -2530,7 +2530,7 @@
 				var w = this.widgets[i];
 				if(!w)
 					continue;
-				if(w.options && w.options.property && this.properties[ w.options.property ])
+				if(w.options && w.options.property && (this.properties[ w.options.property ] != undefined))
 					w.value = JSON.parse( JSON.stringify( this.properties[ w.options.property ] ) );
 			}
 			if (info.widgets_values) {
@@ -3773,16 +3773,42 @@
 
     /**
      * returns the bounding of the object, used for rendering purposes
-     * bounding is: [topleft_cornerx, topleft_cornery, width, height]
      * @method getBounding
-     * @return {Float32Array[4]} the total size
+     * @param out {Float32Array[4]?} [optional] a place to store the output, to free garbage
+     * @param compute_outer {boolean?} [optional] set to true to include the shadow and connection points in the bounding calculation
+     * @return {Float32Array[4]} the bounding box in format of [topleft_cornerx, topleft_cornery, width, height]
      */
-    LGraphNode.prototype.getBounding = function(out) {
+    LGraphNode.prototype.getBounding = function(out, compute_outer) {
         out = out || new Float32Array(4);
-        out[0] = this.pos[0] - 4;
-        out[1] = this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT;
-        out[2] = this.size[0] + 4;
-        out[3] = this.flags.collapsed ? LiteGraph.NODE_TITLE_HEIGHT : this.size[1] + LiteGraph.NODE_TITLE_HEIGHT;
+        const nodePos = this.pos;
+        const isCollapsed = this.flags.collapsed;
+        const nodeSize = this.size;
+
+        let left_offset = 0;
+        // 1 offset due to how nodes are rendered
+        let right_offset =  1 ;
+        let top_offset = 0;
+        let bottom_offset = 0;
+
+        if (compute_outer) {
+            // 4 offset for collapsed node connection points
+            left_offset = 4;
+            // 6 offset for right shadow and collapsed node connection points
+            right_offset = 6 + left_offset;
+            // 4 offset for collapsed nodes top connection points
+            top_offset = 4;
+            // 5 offset for bottom shadow and collapsed node connection points
+            bottom_offset = 5 + top_offset;
+        }
+
+        out[0] = nodePos[0] - left_offset;
+        out[1] = nodePos[1] - LiteGraph.NODE_TITLE_HEIGHT - top_offset;
+        out[2] = isCollapsed ?
+            (this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH) + right_offset :
+            nodeSize[0] + right_offset;
+        out[3] = isCollapsed ?
+            LiteGraph.NODE_TITLE_HEIGHT + bottom_offset :
+            nodeSize[1] + LiteGraph.NODE_TITLE_HEIGHT + bottom_offset;
 
         if (this.onBounding) {
             this.onBounding(out);
@@ -7671,7 +7697,7 @@ LGraphNode.prototype.executeAction = function(action)
                 continue;
             }
 
-            if (!overlapBounding(this.visible_area, n.getBounding(temp))) {
+            if (!overlapBounding(this.visible_area, n.getBounding(temp, true))) {
                 continue;
             } //out of the visible area
 

src/nodes/base.js

@@ -529,7 +529,8 @@
     GraphInput.title = "Input";
     GraphInput.desc = "Input of the graph";
 
-	GraphInput.prototype.onConfigure = function()
+	GraphInput.prototype.onConfigure = function()
+
 	{
 		this.updateType();
 	}
@@ -983,6 +984,48 @@
 
     LiteGraph.registerNodeType("basic/file", ConstantFile);
 
+
+//to store json objects
+function JSONParse() {
+	this.addInput("parse", LiteGraph.ACTION);
+	this.addInput("json", "string");
+	this.addOutput("done", LiteGraph.EVENT);
+	this.addOutput("object", "object");
+	this.widget = this.addWidget("button","parse","",this.parse.bind(this));
+	this._str = null;
+	this._obj = null;
+}
+
+JSONParse.title = "JSON Parse";
+JSONParse.desc = "Parses JSON String into object";
+
+JSONParse.prototype.parse = function()
+{
+	if(!this._str)
+		return;
+
+	try {
+		this._str = this.getInputData(1);
+		this._obj = JSON.parse(this._str);
+		this.boxcolor = "#AEA";
+		this.triggerSlot(0);
+	} catch (err) {
+		this.boxcolor = "red";
+	}
+}
+
+JSONParse.prototype.onExecute = function() {
+	this._str = this.getInputData(1);
+	this.setOutputData(1, this._obj);
+};
+
+JSONParse.prototype.onAction = function(name) {
+	if(name == "parse")
+		this.parse();
+}
+
+LiteGraph.registerNodeType("basic/jsonparse", JSONParse);	
+
 	//to store json objects
     function ConstantData() {
         this.addOutput("data", "object");

src/nodes/network.js

@@ -362,4 +362,67 @@
     };
 
     LiteGraph.registerNodeType("network/sillyclient", LGSillyClient);
+
+//HTTP Request
+function HTTPRequestNode() {
+	var that = this;
+	this.addInput("request", LiteGraph.ACTION);
+	this.addInput("url", "string");
+	this.addProperty("url", "");
+	this.addOutput("ready", LiteGraph.EVENT);
+    this.addOutput("data", "string");
+	this.addWidget("button", "Fetch", null, this.fetch.bind(this));
+	this._data = null;
+	this._fetching = null;
+}
+
+HTTPRequestNode.title = "HTTP Request";
+HTTPRequestNode.desc = "Fetch data through HTTP";
+
+HTTPRequestNode.prototype.fetch = function()
+{
+	var url = this.properties.url;
+	if(!url)
+		return;
+
+	this.boxcolor = "#FF0";
+	var that = this;
+	this._fetching = fetch(url)
+	.then(resp=>{
+		if(!resp.ok)
+		{
+			this.boxcolor = "#F00";
+			that.trigger("error");
+		}
+		else
+		{
+			this.boxcolor = "#0F0";
+			return resp.text();
+		}
+	})
+	.then(data=>{
+		that._data = data;
+		that._fetching = null;
+		that.trigger("ready");
+	});
+}
+
+HTTPRequestNode.prototype.onAction = function(evt)
+{
+	if(evt == "request")
+		this.fetch();
+}
+
+HTTPRequestNode.prototype.onExecute = function() {
+	this.setOutputData(1, this._data);
+};
+
+HTTPRequestNode.prototype.onGetOutputs = function() {
+	return [["error",LiteGraph.EVENT]];
+}
+
+LiteGraph.registerNodeType("network/httprequest", HTTPRequestNode);
+
+
+
 })(this);