From 2d7ad41142a941f7d82e166869bb1e8372a559ac Mon Sep 17 00:00:00 2001 From: EllangoK Date: Fri, 7 Apr 2023 19:42:03 -0400 Subject: [PATCH 1/9] colorPalette sets LiteGraph colors --- web/extensions/core/colorPalette.js | 34 +++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/web/extensions/core/colorPalette.js b/web/extensions/core/colorPalette.js index e54bc2a3..8e542b5c 100644 --- a/web/extensions/core/colorPalette.js +++ b/web/extensions/core/colorPalette.js @@ -21,8 +21,31 @@ const colorPalettes = { "MODEL": "#B39DDB", // light lavender-purple "STYLE_MODEL": "#C2FFAE", // light green-yellow "VAE": "#FF6E6E", // bright red - } - } + }, + "litegraph_base": { + "NODE_TITLE_COLOR": "#999", + "NODE_SELECTED_TITLE_COLOR": "#FFF", + "NODE_TEXT_SIZE": 14, + "NODE_TEXT_COLOR": "#AAA", + "NODE_SUBTEXT_SIZE": 12, + "NODE_DEFAULT_COLOR": "#333", + "NODE_DEFAULT_BGCOLOR": "#353535", + "NODE_DEFAULT_BOXCOLOR": "#666", + "NODE_DEFAULT_SHAPE": "box", + "NODE_BOX_OUTLINE_COLOR": "#FFF", + "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)", + "DEFAULT_GROUP_FONT": 24, + + "WIDGET_BGCOLOR": "#222", + "WIDGET_OUTLINE_COLOR": "#666", + "WIDGET_TEXT_COLOR": "#DDD", + "WIDGET_SECONDARY_TEXT_COLOR": "#999", + + "LINK_COLOR": "#9A9", + "EVENT_LINK_COLOR": "#A86", + "CONNECTING_LINK_COLOR": "#AFA", + }, + }, }, "palette_2": { "id": "palette_2", @@ -194,6 +217,13 @@ app.registerExtension({ Object.assign(app.canvas.default_connection_color_byType, colorPalette.colors.node_slot); app.canvas.draw(true, true); } + if (colorPalette.colors.litegraph_base) { + for (const key in colorPalette.colors.litegraph_base) { + if (colorPalette.colors.litegraph_base.hasOwnProperty(key) && LiteGraph.hasOwnProperty(key)) { + LiteGraph[key] = colorPalette.colors.litegraph_base[key]; + } + } + } } }; From 7bce83aa0394a01c6624e7d1a5763653e52e6eb6 Mon Sep 17 00:00:00 2001 From: EllangoK Date: Fri, 7 Apr 2023 20:12:24 -0400 Subject: [PATCH 2/9] fixes NODE_TITLE_COLOR not being set --- web/extensions/core/colorPalette.js | 60 +++++++++++++++++++++-------- 1 file changed, 43 insertions(+), 17 deletions(-) diff --git a/web/extensions/core/colorPalette.js b/web/extensions/core/colorPalette.js index 8e542b5c..d212602c 100644 --- a/web/extensions/core/colorPalette.js +++ b/web/extensions/core/colorPalette.js @@ -47,25 +47,48 @@ const colorPalettes = { }, }, }, - "palette_2": { - "id": "palette_2", - "name": "Palette 2", + "solarized": { + "id": "solarized", + "name": "Solarized", "colors": { "node_slot": { - "CLIP": "#556B2F", // Dark Olive Green - "CLIP_VISION": "#4B0082", // Indigo - "CLIP_VISION_OUTPUT": "#006400", // Green - "CONDITIONING": "#FF1493", // Deep Pink - "CONTROL_NET": "#8B4513", // Saddle Brown - "IMAGE": "#8B0000", // Dark Red - "LATENT": "#00008B", // Dark Blue - "MASK": "#2F4F4F", // Dark Slate Grey - "MODEL": "#FF8C00", // Dark Orange - "STYLE_MODEL": "#004A4A", // Sherpa Blue - "UPSCALE_MODEL": "#4A004A", // Tyrian Purple - "VAE": "#4F394F", // Loulou - } - } + "CLIP": "#859900", // Green + "CLIP_VISION": "#6c71c4", // Indigo + "CLIP_VISION_OUTPUT": "#859900", // Green + "CONDITIONING": "#d33682", // Magenta + "CONTROL_NET": "#cb4b16", // Orange + "IMAGE": "#dc322f", // Red + "LATENT": "#268bd2", // Blue + "MASK": "#073642", // Base02 + "MODEL": "#cb4b16", // Orange + "STYLE_MODEL": "#073642", // Base02 + "UPSCALE_MODEL": "#6c71c4", // Indigo + "VAE": "#586e75", // Base1 + }, + "litegraph_base": { + "NODE_TITLE_COLOR": "#fdf6e3", + "NODE_SELECTED_TITLE_COLOR": "#b58900", + "NODE_TEXT_SIZE": 14, + "NODE_TEXT_COLOR": "#657b83", + "NODE_SUBTEXT_SIZE": 12, + "NODE_DEFAULT_COLOR": "#586e75", + "NODE_DEFAULT_BGCOLOR": "#073642", + "NODE_DEFAULT_BOXCOLOR": "#839496", + "NODE_DEFAULT_SHAPE": "box", + "NODE_BOX_OUTLINE_COLOR": "#fdf6e3", + "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)", + "DEFAULT_GROUP_FONT": 24, + + "WIDGET_BGCOLOR": "#002b36", + "WIDGET_OUTLINE_COLOR": "#839496", + "WIDGET_TEXT_COLOR": "#fdf6e3", + "WIDGET_SECONDARY_TEXT_COLOR": "#93a1a1", + + "LINK_COLOR": "#2aa198", + "EVENT_LINK_COLOR": "#268bd2", + "CONNECTING_LINK_COLOR": "#859900", + }, + }, } }; @@ -218,6 +241,9 @@ app.registerExtension({ app.canvas.draw(true, true); } if (colorPalette.colors.litegraph_base) { + // Everything updates correctly in the loop, except the Node Title for some reason + app.canvas.node_title_color = colorPalette.colors.litegraph_base.NODE_TITLE_COLOR; + for (const key in colorPalette.colors.litegraph_base) { if (colorPalette.colors.litegraph_base.hasOwnProperty(key) && LiteGraph.hasOwnProperty(key)) { LiteGraph[key] = colorPalette.colors.litegraph_base[key]; From 5bb1358dd66a310793a1ea1a8cfcb037618fe37e Mon Sep 17 00:00:00 2001 From: EllangoK Date: Sat, 8 Apr 2023 09:28:35 -0400 Subject: [PATCH 3/9] manual set default link color --- web/extensions/core/colorPalette.js | 3 +- web/scripts/test.js | 71 +++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 web/scripts/test.js diff --git a/web/extensions/core/colorPalette.js b/web/extensions/core/colorPalette.js index d212602c..30a98460 100644 --- a/web/extensions/core/colorPalette.js +++ b/web/extensions/core/colorPalette.js @@ -238,11 +238,11 @@ app.registerExtension({ if (colorPalette.colors) { if (colorPalette.colors.node_slot) { Object.assign(app.canvas.default_connection_color_byType, colorPalette.colors.node_slot); - app.canvas.draw(true, true); } if (colorPalette.colors.litegraph_base) { // Everything updates correctly in the loop, except the Node Title for some reason app.canvas.node_title_color = colorPalette.colors.litegraph_base.NODE_TITLE_COLOR; + app.canvas.default_link_color = colorPalette.colors.litegraph_base.LINK_COLOR; for (const key in colorPalette.colors.litegraph_base) { if (colorPalette.colors.litegraph_base.hasOwnProperty(key) && LiteGraph.hasOwnProperty(key)) { @@ -250,6 +250,7 @@ app.registerExtension({ } } } + app.canvas.draw(true, true); } }; diff --git a/web/scripts/test.js b/web/scripts/test.js new file mode 100644 index 00000000..55f8dfb6 --- /dev/null +++ b/web/scripts/test.js @@ -0,0 +1,71 @@ +(function() { + var LGraphCanvas = LiteGraph.LGraphCanvas; + var LGraph = LiteGraph.LGraph; + + // Save the original renderLink function + var originalRenderLink = LGraphCanvas.prototype.renderLink; + + // Save the original connect function + var originalConnect = LGraph.prototype.connect; + + // Override the connect function + LGraph.prototype.connect = function ( + origin_slot, + target_slot, + options + ) { + var origin_id = origin_slot[0]; + var target_id = target_slot[0]; + + var origin_node = this.getNodeById(origin_id); + var target_node = this.getNodeById(target_id); + + + if (origin_node && target_node) { + var output_slot = origin_slot[1]; + var output_slot_info = origin_node.getOutputInfo(output_slot); + + + console.log(output_slot_info) + if (output_slot_info) { + options = options || {}; + options.color = output_slot_info.label_color || null; + } + } + + return originalConnect.call(this, origin_slot, target_slot, options); + }; + + // Override the renderLink function + LGraphCanvas.prototype.renderLink = function ( + ctx, + a, + b, + link, + skip_border, + flow, + color, + start_dir, + end_dir, + num_sublines + ) { + if (link && link.color) { + color = link.color; + } + + // Call the original renderLink function with the new color + originalRenderLink.call( + this, + ctx, + a, + b, + link, + skip_border, + flow, + color, + start_dir, + end_dir, + num_sublines + ); + }; +})(); From 620c0f937665a1001f61195a666565bfab28103a Mon Sep 17 00:00:00 2001 From: EllangoK Date: Sat, 8 Apr 2023 10:43:04 -0400 Subject: [PATCH 4/9] link color is set to nodeType color --- web/extensions/core/colorPalette.js | 59 ++++++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) diff --git a/web/extensions/core/colorPalette.js b/web/extensions/core/colorPalette.js index 30a98460..3c0300bf 100644 --- a/web/extensions/core/colorPalette.js +++ b/web/extensions/core/colorPalette.js @@ -240,7 +240,7 @@ app.registerExtension({ Object.assign(app.canvas.default_connection_color_byType, colorPalette.colors.node_slot); } if (colorPalette.colors.litegraph_base) { - // Everything updates correctly in the loop, except the Node Title for some reason + // Everything updates correctly in the loop, except the Node Title and Link Color for some reason app.canvas.node_title_color = colorPalette.colors.litegraph_base.NODE_TITLE_COLOR; app.canvas.default_link_color = colorPalette.colors.litegraph_base.LINK_COLOR; @@ -250,6 +250,63 @@ app.registerExtension({ } } } + + (function(colorPalette) { + var LGraphCanvas = LiteGraph.LGraphCanvas; + var LGraph = LiteGraph.LGraph; + + // Save the original renderLink function + var originalRenderLink = LGraphCanvas.prototype.renderLink; + + // Override the renderLink function + LGraphCanvas.prototype.renderLink = function ( + ctx, + a, + b, + link, + skip_border, + flow, + color, + start_dir, + end_dir, + num_sublines + ) { + if (link && link.color) { + color = link.color; + } + if (link) { + const inputNode = this.graph.getNodeById(link.origin_id); + const outputNode = this.graph.getNodeById(link.target_id); + + let data = null; + if (inputNode.outputs.length > 1) { + data = outputNode.inputs[0]; + } else { + data = inputNode.outputs[0]; + } + let nodeType = data.type; + color = "#" + Math.floor(Math.random() * 16777215).toString(16); + + color = colorPalette.colors.node_slot[nodeType]; + } + + // Call the original renderLink function with the new color + originalRenderLink.call( + this, + ctx, + a, + b, + link, + skip_border, + flow, + color, + start_dir, + end_dir, + num_sublines + ); + }; + })(colorPalette); + app.canvas.draw(true, true); } }; From 6b638c965b6fec1c88947212792dc299acf67b36 Mon Sep 17 00:00:00 2001 From: EllangoK Date: Sat, 8 Apr 2023 10:47:15 -0400 Subject: [PATCH 5/9] matches entry for correct link color --- web/extensions/core/colorPalette.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/web/extensions/core/colorPalette.js b/web/extensions/core/colorPalette.js index 3c0300bf..e84bf6c0 100644 --- a/web/extensions/core/colorPalette.js +++ b/web/extensions/core/colorPalette.js @@ -284,7 +284,20 @@ app.registerExtension({ } else { data = inputNode.outputs[0]; } - let nodeType = data.type; + + const matchingEntry = inputNode.outputs.find(output => { + return outputNode.inputs.some(input => input.type === output.type); + }); + + console.log("matchingEntry: ", matchingEntry) + + const inputTypes = inputNode.outputs.map(output => output.type); + console.log("Input types:", inputTypes); + + const outputTypes = outputNode.inputs.map(input => input.type); + console.log("Output types:", outputTypes); + + let nodeType = matchingEntry.type; color = "#" + Math.floor(Math.random() * 16777215).toString(16); color = colorPalette.colors.node_slot[nodeType]; From 0d358b95665a4a2c3edbdf2a4e51920e4c773fb1 Mon Sep 17 00:00:00 2001 From: EllangoK Date: Sat, 8 Apr 2023 10:59:34 -0400 Subject: [PATCH 6/9] cleanup customizeRenderLink --- web/extensions/core/colorPalette.js | 127 +++++++++++++--------------- 1 file changed, 57 insertions(+), 70 deletions(-) diff --git a/web/extensions/core/colorPalette.js b/web/extensions/core/colorPalette.js index e84bf6c0..2189e3c2 100644 --- a/web/extensions/core/colorPalette.js +++ b/web/extensions/core/colorPalette.js @@ -250,76 +250,7 @@ app.registerExtension({ } } } - - (function(colorPalette) { - var LGraphCanvas = LiteGraph.LGraphCanvas; - var LGraph = LiteGraph.LGraph; - - // Save the original renderLink function - var originalRenderLink = LGraphCanvas.prototype.renderLink; - - // Override the renderLink function - LGraphCanvas.prototype.renderLink = function ( - ctx, - a, - b, - link, - skip_border, - flow, - color, - start_dir, - end_dir, - num_sublines - ) { - if (link && link.color) { - color = link.color; - } - if (link) { - const inputNode = this.graph.getNodeById(link.origin_id); - const outputNode = this.graph.getNodeById(link.target_id); - - let data = null; - if (inputNode.outputs.length > 1) { - data = outputNode.inputs[0]; - } else { - data = inputNode.outputs[0]; - } - - const matchingEntry = inputNode.outputs.find(output => { - return outputNode.inputs.some(input => input.type === output.type); - }); - - console.log("matchingEntry: ", matchingEntry) - - const inputTypes = inputNode.outputs.map(output => output.type); - console.log("Input types:", inputTypes); - - const outputTypes = outputNode.inputs.map(input => input.type); - console.log("Output types:", outputTypes); - - let nodeType = matchingEntry.type; - color = "#" + Math.floor(Math.random() * 16777215).toString(16); - - color = colorPalette.colors.node_slot[nodeType]; - } - - // Call the original renderLink function with the new color - originalRenderLink.call( - this, - ctx, - a, - b, - link, - skip_border, - flow, - color, - start_dir, - end_dir, - num_sublines - ); - }; - })(colorPalette); - + customizeRenderLink(colorPalette); app.canvas.draw(true, true); } }; @@ -476,3 +407,59 @@ app.registerExtension({ }); }, }); + +function customizeRenderLink(colorPalette) { + var LGraphCanvas = LiteGraph.LGraphCanvas; + + function getLinkColor(link, inputNode, outputNode, colorPalette) { + let color = null; + if (link && link.color) { + color = link.color; + } else if (link) { + const matchingEntry = inputNode.outputs.find((output) => { + return outputNode.inputs.some((input) => input.type === output.type); + }); + + if (matchingEntry) { + let nodeType = matchingEntry.type; + color = colorPalette.colors.node_slot[nodeType]; + } + } + return color; + } + + var originalRenderLink = LGraphCanvas.prototype.renderLink; + + LGraphCanvas.prototype.renderLink = function( + ctx, + a, + b, + link, + skip_border, + flow, + color, + start_dir, + end_dir, + num_sublines + ) { + if (link) { + const inputNode = this.graph.getNodeById(link.origin_id); + const outputNode = this.graph.getNodeById(link.target_id); + color = getLinkColor(link, inputNode, outputNode, colorPalette); + } + + originalRenderLink.call( + this, + ctx, + a, + b, + link, + skip_border, + flow, + color, + start_dir, + end_dir, + num_sublines + ); + }; +} \ No newline at end of file From 327e49da42a76aa84d86e7236b95e5490e860a37 Mon Sep 17 00:00:00 2001 From: EllangoK Date: Sat, 8 Apr 2023 11:13:27 -0400 Subject: [PATCH 7/9] remove test render link file --- web/extensions/core/colorPalette.js | 2 +- web/scripts/test.js | 71 ----------------------------- 2 files changed, 1 insertion(+), 72 deletions(-) delete mode 100644 web/scripts/test.js diff --git a/web/extensions/core/colorPalette.js b/web/extensions/core/colorPalette.js index 2189e3c2..a04a422b 100644 --- a/web/extensions/core/colorPalette.js +++ b/web/extensions/core/colorPalette.js @@ -462,4 +462,4 @@ function customizeRenderLink(colorPalette) { num_sublines ); }; -} \ No newline at end of file +} diff --git a/web/scripts/test.js b/web/scripts/test.js deleted file mode 100644 index 55f8dfb6..00000000 --- a/web/scripts/test.js +++ /dev/null @@ -1,71 +0,0 @@ -(function() { - var LGraphCanvas = LiteGraph.LGraphCanvas; - var LGraph = LiteGraph.LGraph; - - // Save the original renderLink function - var originalRenderLink = LGraphCanvas.prototype.renderLink; - - // Save the original connect function - var originalConnect = LGraph.prototype.connect; - - // Override the connect function - LGraph.prototype.connect = function ( - origin_slot, - target_slot, - options - ) { - var origin_id = origin_slot[0]; - var target_id = target_slot[0]; - - var origin_node = this.getNodeById(origin_id); - var target_node = this.getNodeById(target_id); - - - if (origin_node && target_node) { - var output_slot = origin_slot[1]; - var output_slot_info = origin_node.getOutputInfo(output_slot); - - - console.log(output_slot_info) - if (output_slot_info) { - options = options || {}; - options.color = output_slot_info.label_color || null; - } - } - - return originalConnect.call(this, origin_slot, target_slot, options); - }; - - // Override the renderLink function - LGraphCanvas.prototype.renderLink = function ( - ctx, - a, - b, - link, - skip_border, - flow, - color, - start_dir, - end_dir, - num_sublines - ) { - if (link && link.color) { - color = link.color; - } - - // Call the original renderLink function with the new color - originalRenderLink.call( - this, - ctx, - a, - b, - link, - skip_border, - flow, - color, - start_dir, - end_dir, - num_sublines - ); - }; -})(); From d9220a0bd6f60ad06e73a4d631bbc63ec8592c1c Mon Sep 17 00:00:00 2001 From: EllangoK Date: Sat, 8 Apr 2023 11:55:27 -0400 Subject: [PATCH 8/9] link colors change after palette swap didn't work previously as same function was defined repeatedly --- web/extensions/core/colorPalette.js | 39 ++++++++++++++++------------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/web/extensions/core/colorPalette.js b/web/extensions/core/colorPalette.js index a04a422b..c1473b93 100644 --- a/web/extensions/core/colorPalette.js +++ b/web/extensions/core/colorPalette.js @@ -238,6 +238,7 @@ app.registerExtension({ if (colorPalette.colors) { if (colorPalette.colors.node_slot) { Object.assign(app.canvas.default_connection_color_byType, colorPalette.colors.node_slot); + customizeRenderLink(colorPalette); } if (colorPalette.colors.litegraph_base) { // Everything updates correctly in the loop, except the Node Title and Link Color for some reason @@ -250,7 +251,6 @@ app.registerExtension({ } } } - customizeRenderLink(colorPalette); app.canvas.draw(true, true); } }; @@ -411,24 +411,28 @@ app.registerExtension({ function customizeRenderLink(colorPalette) { var LGraphCanvas = LiteGraph.LGraphCanvas; - function getLinkColor(link, inputNode, outputNode, colorPalette) { - let color = null; - if (link && link.color) { - color = link.color; - } else if (link) { - const matchingEntry = inputNode.outputs.find((output) => { - return outputNode.inputs.some((input) => input.type === output.type); - }); + if (!LGraphCanvas.prototype.getLinkColor) { + LGraphCanvas.prototype.getLinkColor = function(link, inputNode, outputNode, colorPalette) { + let color = null; + if (link && link.color) { + color = link.color; + } else if (link) { + const matchingEntry = inputNode.outputs.find((output) => { + return outputNode.inputs.some((input) => input.type === output.type); + }); - if (matchingEntry) { - let nodeType = matchingEntry.type; - color = colorPalette.colors.node_slot[nodeType]; + if (matchingEntry) { + let nodeType = matchingEntry.type; + color = colorPalette.colors.node_slot[nodeType]; + } } - } - return color; + return color; + }; } - var originalRenderLink = LGraphCanvas.prototype.renderLink; + if (!LGraphCanvas.prototype.originalRenderLink) { + LGraphCanvas.prototype.originalRenderLink = LGraphCanvas.prototype.renderLink; + } LGraphCanvas.prototype.renderLink = function( ctx, @@ -445,10 +449,11 @@ function customizeRenderLink(colorPalette) { if (link) { const inputNode = this.graph.getNodeById(link.origin_id); const outputNode = this.graph.getNodeById(link.target_id); - color = getLinkColor(link, inputNode, outputNode, colorPalette); + color = this.getLinkColor(link, inputNode, outputNode, colorPalette); } - originalRenderLink.call( + // call the original renderLink function + this.originalRenderLink.call( this, ctx, a, From 53fba56ee5fa48261d8caec46927c34923a168fd Mon Sep 17 00:00:00 2001 From: EllangoK Date: Sat, 8 Apr 2023 13:18:23 -0400 Subject: [PATCH 9/9] assign link_type_colors directly --- web/extensions/core/colorPalette.js | 63 +---------------------------- 1 file changed, 1 insertion(+), 62 deletions(-) diff --git a/web/extensions/core/colorPalette.js b/web/extensions/core/colorPalette.js index c1473b93..a08d4668 100644 --- a/web/extensions/core/colorPalette.js +++ b/web/extensions/core/colorPalette.js @@ -238,7 +238,7 @@ app.registerExtension({ if (colorPalette.colors) { if (colorPalette.colors.node_slot) { Object.assign(app.canvas.default_connection_color_byType, colorPalette.colors.node_slot); - customizeRenderLink(colorPalette); + Object.assign(LGraphCanvas.link_type_colors, colorPalette.colors.node_slot); } if (colorPalette.colors.litegraph_base) { // Everything updates correctly in the loop, except the Node Title and Link Color for some reason @@ -407,64 +407,3 @@ app.registerExtension({ }); }, }); - -function customizeRenderLink(colorPalette) { - var LGraphCanvas = LiteGraph.LGraphCanvas; - - if (!LGraphCanvas.prototype.getLinkColor) { - LGraphCanvas.prototype.getLinkColor = function(link, inputNode, outputNode, colorPalette) { - let color = null; - if (link && link.color) { - color = link.color; - } else if (link) { - const matchingEntry = inputNode.outputs.find((output) => { - return outputNode.inputs.some((input) => input.type === output.type); - }); - - if (matchingEntry) { - let nodeType = matchingEntry.type; - color = colorPalette.colors.node_slot[nodeType]; - } - } - return color; - }; - } - - if (!LGraphCanvas.prototype.originalRenderLink) { - LGraphCanvas.prototype.originalRenderLink = LGraphCanvas.prototype.renderLink; - } - - LGraphCanvas.prototype.renderLink = function( - ctx, - a, - b, - link, - skip_border, - flow, - color, - start_dir, - end_dir, - num_sublines - ) { - if (link) { - const inputNode = this.graph.getNodeById(link.origin_id); - const outputNode = this.graph.getNodeById(link.target_id); - color = this.getLinkColor(link, inputNode, outputNode, colorPalette); - } - - // call the original renderLink function - this.originalRenderLink.call( - this, - ctx, - a, - b, - link, - skip_border, - flow, - color, - start_dir, - end_dir, - num_sublines - ); - }; -}