From ef67b4cf9cd0d64d611b58f35e9d0a0f38bceca9 Mon Sep 17 00:00:00 2001 From: atlasan Date: Tue, 5 Jan 2021 21:39:08 +0100 Subject: [PATCH] Merging with (the)Master and nodeWebcam_Fix --- css/litegraph.css | 9 ++++- editor/js/demos.js | 1 + index.html | 2 +- package.json | 2 +- src/litegraph.d.ts | 31 ++++++++++++--- src/litegraph.js | 40 +++++++++++--------- src/nodes/base.js | 89 ++++++++++++++++++++++++++++++++++++++------ src/nodes/strings.js | 13 ++++++- 8 files changed, 149 insertions(+), 38 deletions(-) diff --git a/css/litegraph.css b/css/litegraph.css index 80a203ad4..6dff5e628 100755 --- a/css/litegraph.css +++ b/css/litegraph.css @@ -509,7 +509,7 @@ position: absolute; top: 10px; left: 10px; - min-height: 2em; + /*min-height: 2em;*/ background-color: #333; font-size: 1.2em; box-shadow: 0 0 10px black !important; @@ -529,6 +529,7 @@ } .graphdialog input, +.graphdialog textarea, .graphdialog select { margin: 3px; min-width: 60px; @@ -540,9 +541,15 @@ outline: none; } +.graphdialog textarea { + min-height: 150px; +} + .graphdialog button { margin-top: 3px; vertical-align: top; + background-color: #999; + border: 0; } .graphdialog button.rounded, diff --git a/editor/js/demos.js b/editor/js/demos.js index f09631c14..518d1c4db 100644 --- a/editor/js/demos.js +++ b/editor/js/demos.js @@ -89,6 +89,7 @@ function TestWidgetsNode() this.number = this.addWidget("number","Number", 0.5, function(v){}, { min: 0, max: 100} ); this.combo = this.addWidget("combo","Combo", "red", function(v){}, { values:["red","green","blue"]} ); this.text = this.addWidget("text","Text", "edit me", function(v){}, {} ); + this.text2 = this.addWidget("text","Text", "multiline", function(v){}, { multiline:true } ); this.toggle = this.addWidget("toggle","Toggle", true, function(v){}, { on: "enabled", off:"disabled"} ); this.button = this.addWidget("button","Button", null, function(v){}, {} ); this.toggle2 = this.addWidget("toggle","Disabled", true, function(v){}, { on: "enabled", off:"disabled"} ); diff --git a/index.html b/index.html index 7cd65d98d..f46847f37 100755 --- a/index.html +++ b/index.html @@ -71,7 +71,7 @@

Usage

Example of editor

Documentation

diff --git a/package.json b/package.json index 60ebc934b..8d70be04e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "litegraph.js", - "version": "0.7.8", + "version": "0.7.9", "description": "A graph node editor similar to PD or UDK Blueprints. It works in an HTML5 Canvas and allows to export graphs to be included in applications.", "main": "build/litegraph.js", "types": "src/litegraph.d.ts", diff --git a/src/litegraph.d.ts b/src/litegraph.d.ts index 4f2a875d4..9d3d37c02 100644 --- a/src/litegraph.d.ts +++ b/src/litegraph.d.ts @@ -740,7 +740,7 @@ export declare class LGraphNode { name: string, type: string | -1, extra_info?: Partial - ): void; + ): INodeOutputSlot; /** * add a new output slot to use in this node * @param array of triplets like [[name,type,extra_info],[...]] @@ -760,7 +760,7 @@ export declare class LGraphNode { name: string, type: string | -1, extra_info?: Partial - ): void; + ): INodeInputSlot; /** * add several new input slots in this node * @param array of triplets like [[name,type,extra_info],[...]] @@ -953,13 +953,34 @@ export declare class LGraphNode { /** * if returns false the incoming connection will be canceled * Called by `LGraph.connect` + * @param inputIndex target input slot number + * @param outputType type of output slot + * @param outputSlot output slot object + * @param outputNode node containing the output + * @param outputIndex index of output slot */ onConnectInput?( inputIndex: number, - type: INodeOutputSlot["type"], + outputType: INodeOutputSlot["type"], outputSlot: INodeOutputSlot, - _this: this, - slotIndex: number + outputNode: LGraphNode, + outputIndex: number + ): boolean; + /** + * if returns false the incoming connection will be canceled + * Called by `LGraph.connect` + * @param outputIndex target output slot number + * @param inputType type of input slot + * @param inputSlot input slot object + * @param inputNode node containing the input + * @param inputIndex index of input slot + */ + onConnectOutput?( + outputIndex: number, + inputType: INodeInputSlot["type"], + inputSlot: INodeInputSlot, + inputNode: LGraphNode, + inputIndex: number ): boolean; /** diff --git a/src/litegraph.js b/src/litegraph.js index 4404dbc36..431180e6e 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -1365,6 +1365,8 @@ return; } //cannot be removed + this.beforeChange(); //sure? + //disconnect inputs if (node.inputs) { for (var i = 0; i < node.inputs.length; i++) { @@ -1423,6 +1425,7 @@ this.sendActionToCanvas("checkPanels"); this.setDirtyCanvas(true, true); + this.afterChange(); //sure? this.change(); this.updateExecutionOrder(); @@ -8622,6 +8625,7 @@ LGraphNode.prototype.executeAction = function(action) ctx.strokeStyle = outline_color; ctx.fillStyle = "#222"; ctx.textAlign = "left"; + //ctx.lineWidth = 2; if(w.disabled) ctx.globalAlpha *= 0.5; var widget_width = w.width || width; @@ -8769,13 +8773,15 @@ LGraphNode.prototype.executeAction = function(action) else ctx.rect( margin, posY, widget_width - margin * 2, H ); ctx.fill(); - if (show_text) { - ctx.save(); + if (show_text) { + if(!w.disabled) + ctx.stroke(); + ctx.save(); ctx.beginPath(); ctx.rect(margin, posY, widget_width - margin * 2, H); ctx.clip(); - ctx.stroke(); + //ctx.stroke(); ctx.fillStyle = secondary_text_color; if (w.name != null) { ctx.fillText(w.name, margin * 2, y + H * 0.7); @@ -8850,10 +8856,8 @@ LGraphNode.prototype.executeAction = function(action) break; case "slider": var range = w.options.max - w.options.min; - var nvalue = Math.clamp((x - 10) / (widget_width - 20), 0, 1); - w.value = - w.options.min + - (w.options.max - w.options.min) * nvalue; + var nvalue = Math.clamp((x - 15) / (widget_width - 30), 0, 1); + w.value = w.options.min + (w.options.max - w.options.min) * nvalue; if (w.callback) { setTimeout(function() { inner_value_change(w, w.value); @@ -8963,7 +8967,7 @@ LGraphNode.prototype.executeAction = function(action) this.value = v; inner_value_change(this, v); }.bind(w), - event); + event,w.options ? w.options.multiline : false ); } break; default: @@ -9550,18 +9554,18 @@ LGraphNode.prototype.executeAction = function(action) var dialog = document.createElement("div"); dialog.className = "graphdialog"; - dialog.innerHTML = - ""; + dialog.innerHTML = ""; + //dialog.innerHTML = ""; var title = dialog.querySelector(".name"); title.innerText = property; - var input = dialog.querySelector("input"); + var input = dialog.querySelector(".value"); if (input) { input.value = value; input.addEventListener("blur", function(e) { this.focus(); }); input.addEventListener("keydown", function(e) { - if (e.keyCode != 13) { + if (e.keyCode != 13 && e.target.localName != "textarea") { return; } inner(); @@ -9611,7 +9615,7 @@ LGraphNode.prototype.executeAction = function(action) } }; - LGraphCanvas.prototype.prompt = function(title, value, callback, event) { + LGraphCanvas.prototype.prompt = function(title, value, callback, event, multiline) { var that = this; var input_html = ""; title = title || ""; @@ -9620,8 +9624,10 @@ LGraphNode.prototype.executeAction = function(action) var dialog = document.createElement("div"); dialog.className = "graphdialog rounded"; - dialog.innerHTML = - " "; + if(multiline) + dialog.innerHTML = " "; + else + dialog.innerHTML = " "; dialog.close = function() { that.prompt_box = null; if (dialog.parentNode) { @@ -9653,13 +9659,13 @@ LGraphNode.prototype.executeAction = function(action) var value_element = dialog.querySelector(".value"); value_element.value = value; - var input = dialog.querySelector("input"); + var input = value_element; input.addEventListener("keydown", function(e) { modified = true; if (e.keyCode == 27) { //ESC dialog.close(); - } else if (e.keyCode == 13) { + } else if (e.keyCode == 13 && e.target.localName != "textarea") { if (callback) { callback(this.value); } diff --git a/src/nodes/base.js b/src/nodes/base.js index 51414c016..5be256750 100755 --- a/src/nodes/base.js +++ b/src/nodes/base.js @@ -716,6 +716,21 @@ LiteGraph.registerNodeType("basic/string", ConstantString); + function ConstantObject() { + this.addOutput("obj", "object"); + this.size = [120, 30]; + this._object = {}; + } + + ConstantObject.title = "Const Object"; + ConstantObject.desc = "Constant Object"; + + ConstantObject.prototype.onExecute = function() { + this.setOutputData(0, this._object); + }; + + LiteGraph.registerNodeType( "basic/object", ConstantObject ); + function ConstantFile() { this.addInput("url", ""); this.addOutput("", ""); @@ -851,14 +866,14 @@ //to store json objects function ConstantArray() { + this._value = []; this.addInput("", ""); this.addOutput("", "array"); this.addOutput("length", "number"); - this.addProperty("value", ""); - this.widget = this.addWidget("text","array","","value"); + this.addProperty("value", "[]"); + this.widget = this.addWidget("text","array",this.properties.value,"value"); this.widgets_up = true; this.size = [140, 50]; - this._value = null; } ConstantArray.title = "Const Array"; @@ -891,7 +906,7 @@ for(var i = 0; i < v.length; ++i) this._value[i] = v[i]; } - this.setOutputData(0, this._value); + this.setOutputData(0, this._value ); this.setOutputData(1, this._value ? ( this._value.length || 0) : 0 ); }; @@ -899,6 +914,32 @@ LiteGraph.registerNodeType("basic/array", ConstantArray); + function SetArray() + { + this.addInput("arr", "array"); + this.addInput("value", ""); + this.addOutput("arr", "array"); + this.properties = { index: 0 }; + this.widget = this.addWidget("number","i",this.properties.index,"index"); + } + + SetArray.title = "Set Array"; + SetArray.desc = "Sets index of array"; + + SetArray.prototype.onExecute = function() { + var arr = this.getInputData(0); + if(!arr) + return; + var v = this.getInputData(1); + if(v === undefined ) + return; + if(this.properties.index) + arr[ Math.floor(this.properties.index) ] = v; + this.setOutputData(0,arr); + }; + + LiteGraph.registerNodeType("basic/set_array", SetArray ); + function ArrayElement() { this.addInput("array", "array,table,string"); this.addInput("index", "number"); @@ -921,8 +962,6 @@ LiteGraph.registerNodeType("basic/array[]", ArrayElement); - - function TableElement() { this.addInput("table", "table"); this.addInput("row", "number"); @@ -1010,10 +1049,38 @@ LiteGraph.registerNodeType("basic/object_keys", ObjectKeys); + + function SetObject() + { + this.addInput("obj", ""); + this.addInput("value", ""); + this.addOutput("obj", ""); + this.properties = { property: "" }; + this.name_widget = this.addWidget("text","prop.",this.properties.property,"property"); + } + + SetObject.title = "Set Object"; + SetObject.desc = "Adds propertiesrty to object"; + + SetObject.prototype.onExecute = function() { + var obj = this.getInputData(0); + if(!obj) + return; + var v = this.getInputData(1); + if(v === undefined ) + return; + if(this.properties.property) + obj[ this.properties.property ] = v; + this.setOutputData(0,obj); + }; + + LiteGraph.registerNodeType("basic/set_object", SetObject ); + + function MergeObjects() { - this.addInput("A", "object"); - this.addInput("B", "object"); - this.addOutput("", "object"); + this.addInput("A", ""); + this.addInput("B", ""); + this.addOutput("", ""); this._result = {}; var that = this; this.addWidget("button","clear","",function(){ @@ -1281,9 +1348,7 @@ this.addProperty("msg", ""); this.addInput("", LiteGraph.EVENT); var that = this; - this.widget = this.addWidget("text", "Text", "", function(v) { - that.properties.msg = v; - }); + this.widget = this.addWidget("text", "Text", "", "msg"); this.widgets_up = true; this.size = [200, 30]; } diff --git a/src/nodes/strings.js b/src/nodes/strings.js index d6dd9d13f..c39173465 100644 --- a/src/nodes/strings.js +++ b/src/nodes/strings.js @@ -3,10 +3,21 @@ var LiteGraph = global.LiteGraph; function toString(a) { + if(a && a.constructor === Object) + { + try + { + return JSON.stringify(a); + } + catch (err) + { + return String(a); + } + } return String(a); } - LiteGraph.wrapFunctionAsNode("string/toString", compare, [""], "String"); + LiteGraph.wrapFunctionAsNode("string/toString", toString, [""], "String"); function compare(a, b) { return a == b;