From 3e2690cc4aa4e99fa4c04a991d5723269c393d36 Mon Sep 17 00:00:00 2001 From: Javi Agenjo Date: Mon, 5 Nov 2018 17:59:25 +0100 Subject: [PATCH 1/3] Update README.md --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index e29bcceb2..cec7f5bf9 100755 --- a/README.md +++ b/README.md @@ -9,16 +9,16 @@ Try it in the [demo site](http://tamats.com/projects/litegraph/demo). ![Node Graph](imgs/node_graph_example.png "WebGLStudio") ## Features -- Renders on Canvas2D (zoom in, zoom out, panning) +- Renders on Canvas2D (zoom in, zoom out, panning, can be used inside a WebGLTexture) - Easy to use editor (searchbox, keyboard shortcuts, multiple selection, context menu, ...) - Optimized to support hundreds of nodes per graph (on editor but also on execution) - Customizable theme (colors, shapes, background) -- Callbacks to personalize every action/drawing/event +- Callbacks to personalize every action/drawing/event of nodes - Subgraphs (nodes that contain graphs themselves) -- Live mode system (hides the graph but calls nodes to render whatever they want, useful to create UI) +- Live mode system (hides the graph but calls nodes to render whatever they want, useful to create UIs) - Graphs can be executed in NodeJS - Highly customizable nodes (color, shape, slots vertical or horizontal, widgets, custom rendering) -- Easy to integrate in any application +- Easy to integrate in any JS application ## Nodes provided Although it is easy to create new node types, LiteGraph comes with some default nodes that could be useful for many cases: From e6bf54d27bfe2270ba4087d9c554d49848daf1e9 Mon Sep 17 00:00:00 2001 From: inventivetalent Date: Thu, 15 Nov 2018 17:55:59 +0100 Subject: [PATCH 2/3] add options to use Array.filter instead of loop & limit result size, to improve search performance --- src/litegraph.js | 65 ++++++++++++++++++++++++++++++++---------------- 1 file changed, 43 insertions(+), 22 deletions(-) diff --git a/src/litegraph.js b/src/litegraph.js index 953949d72..38bcd39ca 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -6660,6 +6660,9 @@ LGraphCanvas.prototype.prompt = function( title, value, callback, event ) return dialog; } + +LGraphCanvas.search_filter = false; +LGraphCanvas.search_limit = -1; LGraphCanvas.prototype.showSearchBox = function(event) { var that = this; @@ -6788,30 +6791,48 @@ LGraphCanvas.prototype.showSearchBox = function(event) selected.scrollIntoView(); } - function refreshHelper() - { - timeout = null; - var str = input.value; - first = null; - helper.innerHTML = ""; - if(!str) - return; + function refreshHelper() { + timeout = null; + var str = input.value; + first = null; + helper.innerHTML = ""; + if (!str) + return; - if( that.onSearchBox ) - that.onSearchBox( help, str, graphcanvas ); - else - for( var i in LiteGraph.registered_node_types ) - if(i.indexOf(str) != -1) - { - var help = document.createElement("div"); - if(!first) first = i; - help.innerText = i; - help.className = "litegraph lite-search-item"; - help.addEventListener("click", function(e){ - select( this.innerText ); - }); - helper.appendChild(help); + if (that.onSearchBox){ + that.onSearchBox(help, str, graphcanvas); + } else { + function addResult(result) { + var help = document.createElement("div"); + if (!first) first = result; + help.innerText = result; + help.className = "litegraph lite-search-item"; + help.addEventListener("click", function (e) { + select(this.innerText); + }); + helper.appendChild(help); + } + let c = 0; + if(LGraphCanvas.search_filter) { + str = str.toLowerCase(); + + var keys = Object.keys(LiteGraph.registered_node_types); + var filtered = keys.filter(function (item) { + return item.toLowerCase().indexOf(str) !== -1; + }); + for(var i = 0; i < filtered.length; i++) { + addResult(filtered[i]); + if(LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit) break; } + } else { + for (var i in LiteGraph.registered_node_types) { + if (i.indexOf(str) != -1) { + addResult(i); + if(LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit) break; + } + } + } + } } return dialog; From e44ef8dbd9a448e1bbb2f4e828cb7b8c48c6187c Mon Sep 17 00:00:00 2001 From: inventivetalent Date: Thu, 15 Nov 2018 18:03:14 +0100 Subject: [PATCH 3/3] rebuild --- build/litegraph.js | 65 +++++++++++++++++++++++++++-------------- build/litegraph.min.js | 66 +++++++++++++++++++++++++++--------------- 2 files changed, 86 insertions(+), 45 deletions(-) diff --git a/build/litegraph.js b/build/litegraph.js index 7c0120b0e..3c295fe41 100644 --- a/build/litegraph.js +++ b/build/litegraph.js @@ -6660,6 +6660,9 @@ LGraphCanvas.prototype.prompt = function( title, value, callback, event ) return dialog; } + +LGraphCanvas.search_filter = false; +LGraphCanvas.search_limit = -1; LGraphCanvas.prototype.showSearchBox = function(event) { var that = this; @@ -6788,30 +6791,48 @@ LGraphCanvas.prototype.showSearchBox = function(event) selected.scrollIntoView(); } - function refreshHelper() - { - timeout = null; - var str = input.value; - first = null; - helper.innerHTML = ""; - if(!str) - return; + function refreshHelper() { + timeout = null; + var str = input.value; + first = null; + helper.innerHTML = ""; + if (!str) + return; - if( that.onSearchBox ) - that.onSearchBox( help, str, graphcanvas ); - else - for( var i in LiteGraph.registered_node_types ) - if(i.indexOf(str) != -1) - { - var help = document.createElement("div"); - if(!first) first = i; - help.innerText = i; - help.className = "litegraph lite-search-item"; - help.addEventListener("click", function(e){ - select( this.innerText ); - }); - helper.appendChild(help); + if (that.onSearchBox){ + that.onSearchBox(help, str, graphcanvas); + } else { + function addResult(result) { + var help = document.createElement("div"); + if (!first) first = result; + help.innerText = result; + help.className = "litegraph lite-search-item"; + help.addEventListener("click", function (e) { + select(this.innerText); + }); + helper.appendChild(help); + } + let c = 0; + if(LGraphCanvas.search_filter) { + str = str.toLowerCase(); + + var keys = Object.keys(LiteGraph.registered_node_types); + var filtered = keys.filter(function (item) { + return item.toLowerCase().indexOf(str) !== -1; + }); + for(var i = 0; i < filtered.length; i++) { + addResult(filtered[i]); + if(LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit) break; } + } else { + for (var i in LiteGraph.registered_node_types) { + if (i.indexOf(str) != -1) { + addResult(i); + if(LGraphCanvas.search_limit !== -1 && c++ > LGraphCanvas.search_limit) break; + } + } + } + } } return dialog; diff --git a/build/litegraph.min.js b/build/litegraph.min.js index e0a8ed61e..f67797372 100755 --- a/build/litegraph.min.js +++ b/build/litegraph.min.js @@ -101,6 +101,13 @@ $jscomp.polyfill("Array.prototype.values", function(u) { }); }; }, "es8", "es3"); +$jscomp.polyfill("Array.prototype.keys", function(u) { + return u ? u : function() { + return $jscomp.iteratorFromArray(this, function(f) { + return f; + }); + }; +}, "es6", "es3"); (function(u) { function f(a) { k.debug && console.log("Graph created"); @@ -3167,6 +3174,8 @@ $jscomp.polyfill("Array.prototype.values", function(u) { }, 10); return l; }; + d.search_filter = !1; + d.search_limit = -1; d.prototype.showSearchBox = function(a) { function b(b) { if (b) { @@ -3193,18 +3202,29 @@ $jscomp.polyfill("Array.prototype.values", function(u) { f.innerHTML = ""; if (a) { if (g.onSearchBox) { - g.onSearchBox(e, a, v); + g.onSearchBox(help, a, v); } else { - for (var c in k.registered_node_types) { - if (-1 != c.indexOf(a)) { - var e = document.createElement("div"); - h || (h = c); - e.innerText = c; - e.className = "litegraph lite-search-item"; - e.addEventListener("click", function(a) { - b(this.innerText); - }); - f.appendChild(e); + var c = function(a) { + var c = document.createElement("div"); + h || (h = a); + c.innerText = a; + c.className = "litegraph lite-search-item"; + c.addEventListener("click", function(a) { + b(this.innerText); + }); + f.appendChild(c); + }, e = 0; + if (d.search_filter) { + a = a.toLowerCase(); + for (var l = Object.keys(k.registered_node_types).filter(function(b) { + return -1 !== b.toLowerCase().indexOf(a); + }), K = 0; K < l.length && !(c(l[K]), -1 !== d.search_limit && e++ > d.search_limit); K++) { + } + } else { + for (K in k.registered_node_types) { + if (-1 != K.indexOf(a) && (c(K), -1 !== d.search_limit && e++ > d.search_limit)) { + break; + } } } } @@ -5972,8 +5992,8 @@ $jscomp.polyfill("Array.prototype.values", function(u) { if (!g || this._shader_code != e + "|" + f) { try { this._shader = new GL.Shader(Shader.SCREEN_VERTEX_SHADER, F.pixel_shader, {UV_CODE:e, PIXEL_CODE:f}), this.boxcolor = "#00FF00"; - } catch (N) { - console.log("Error compiling shader: ", N); + } catch (O) { + console.log("Error compiling shader: ", O); this.boxcolor = "#FF0000"; return; } @@ -6288,8 +6308,8 @@ $jscomp.polyfill("Array.prototype.values", function(u) { d && d.width == b && d.height == c || (this._temp_texture = new GL.Texture(b, c, {format:gl.RGBA, filter:gl.LINEAR})); try { this._temp_texture.uploadImage(a); - } catch (L) { - console.error("image comes from an unsafe location, cannot be uploaded to webgl: " + L); + } catch (M) { + console.error("image comes from an unsafe location, cannot be uploaded to webgl: " + M); return; } this.setOutputData(0, this._temp_texture); @@ -6584,14 +6604,14 @@ $jscomp.polyfill("Array.prototype.values", function(u) { if (this.isOutputConnected(0)) { l = this._final_texture; l && l.width == a.width && l.height == a.height && l.type == f && l.format == a.format || (l = this._final_texture = new GL.Texture(a.width, a.height, {type:f, format:a.format, filter:gl.LINEAR})); - var v = this.getInputData(1), u = this.getInputOrProperty("dirt_factor"); + var u = this.getInputData(1), v = this.getInputOrProperty("dirt_factor"); g.u_intensity = q; - k = v ? c._dirt_final_shader : c._final_shader; - k || (k = v ? c._dirt_final_shader = new GL.Shader(GL.Shader.SCREEN_VERTEX_SHADER, c.final_pixel_shader, {USE_DIRT:""}) : c._final_shader = new GL.Shader(GL.Shader.SCREEN_VERTEX_SHADER, c.final_pixel_shader)); + k = u ? c._dirt_final_shader : c._final_shader; + k || (k = u ? c._dirt_final_shader = new GL.Shader(GL.Shader.SCREEN_VERTEX_SHADER, c.final_pixel_shader, {USE_DIRT:""}) : c._final_shader = new GL.Shader(GL.Shader.SCREEN_VERTEX_SHADER, c.final_pixel_shader)); l.drawTo(function() { a.bind(0); m.bind(1); - v && (k.setUniform("u_dirt_factor", u), k.setUniform("u_dirt_texture", v.bind(2))); + u && (k.setUniform("u_dirt_factor", v), k.setUniform("u_dirt_texture", u.bind(2))); k.toViewport(g); }); this.setOutputData(0, l); @@ -6809,8 +6829,8 @@ $jscomp.polyfill("Array.prototype.values", function(u) { this._func = null; try { this._func = new Function("canvas", "ctx", "time", "script", b), this.boxcolor = "#00FF00"; - } catch (K) { - this.boxcolor = "#FF0000", console.error("Error parsing script"), console.error(K); + } catch (L) { + this.boxcolor = "#FF0000", console.error("Error parsing script"), console.error(L); } } }; @@ -6825,8 +6845,8 @@ $jscomp.polyfill("Array.prototype.values", function(u) { gl.start2D(); try { a.draw ? a.draw.call(e, gl.canvas, gl, f, a) : a.call(e, gl.canvas, gl, f, a), e.boxcolor = "#00FF00"; - } catch (M) { - e.boxcolor = "#FF0000", console.error("Error executing script"), console.error(M); + } catch (N) { + e.boxcolor = "#FF0000", console.error("Error executing script"), console.error(N); } gl.finish2D(); });