diff --git a/web/js/customColors.js b/web/js/customColors.js index 2b0fefc..25211d8 100644 --- a/web/js/customColors.js +++ b/web/js/customColors.js @@ -22,15 +22,21 @@ const colorShade = (col, amt) => { app.registerExtension({ name: "pysssss.CustomColors", setup() { - let picker; - let activeNode; + let pickerFull; + let activeNodeFull; + let pickerTitle; + let activeNodeTitle; + let pickerBG; + let activeNodeBG; const onMenuNodeColors = LGraphCanvas.onMenuNodeColors; + LGraphCanvas.onMenuNodeColors = function (value, options, e, menu, node) { const r = onMenuNodeColors.apply(this, arguments); requestAnimationFrame(() => { const menus = document.querySelectorAll(".litecontextmenu"); for (let i = menus.length - 1; i >= 0; i--) { if (menus[i].firstElementChild.textContent.includes("No color") || menus[i].firstElementChild.value?.content?.includes("No color")) { + // Original Custom Color for title-bar and background $el( "div.litemenu-entry.submenu", { @@ -38,43 +44,148 @@ app.registerExtension({ $: (el) => { el.onclick = () => { LiteGraph.closeAllContextMenus(); - if (!picker) { - picker = $el("input", { + if (!pickerFull) { + pickerFull = $el("input", { type: "color", parent: document.body, style: { display: "none", }, }); - picker.onchange = () => { - if (activeNode) { + pickerFull.oninput = () => { + if (activeNodeFull) { const fApplyColor = function(node){ - if (picker.value) { + if (pickerFull.value) { if (node.constructor === LiteGraph.LGraphGroup) { - node.color = picker.value; + node.color = pickerFull.value; } else { - node.color = colorShade(picker.value, 20); - node.bgcolor = picker.value; + node.color = colorShade(pickerFull.value, 20); + node.bgcolor = pickerFull.value; } } } const graphcanvas = LGraphCanvas.active_canvas; if (!graphcanvas.selected_nodes || Object.keys(graphcanvas.selected_nodes).length <= 1){ - fApplyColor(activeNode); + fApplyColor(activeNodeFull); } else { for (let i in graphcanvas.selected_nodes) { fApplyColor(graphcanvas.selected_nodes[i]); } } - activeNode.setDirtyCanvas(true, true); + activeNodeFull.setDirtyCanvas(true, true); + } + }; + } + activeNodeFull = node; // Set activeNodeFull to the clicked node first + pickerFull.value = node.bgcolor; // Set the pickerFull to the current node's bgcolor + pickerFull.click(); // Open the color pickerFull + }; + }, + }, + [ + $el("span", { + style: { + paddingLeft: "4px", + display: "block", + }, + textContent: "🎨 Custom Full", + }), + ] + ); + // New Entry for Changing Title Color Only + $el( + "div.litemenu-entry.submenu", + { + parent: menus[i], + $: (el) => { + el.onclick = () => { + LiteGraph.closeAllContextMenus(); + if (!pickerTitle) { + pickerTitle = $el("input", { + type: "color", + parent: document.body, + style: { + display: "none", + }, + }); + pickerTitle.oninput = () => { + if (activeNodeTitle) { + const fApplyColor = function(node){ + if (pickerTitle.value) { + // Changes only the node.color without affecting bgcolor + // node.color = colorShade(pickerTitle.value, 20); // brightens selected color + node.color = pickerTitle.value; // uses selected color directly + } + } + const graphcanvas = LGraphCanvas.active_canvas; + if (!graphcanvas.selected_nodes || Object.keys(graphcanvas.selected_nodes).length <= 1){ + fApplyColor(activeNodeTitle); + } else { + for (let i in graphcanvas.selected_nodes) { + fApplyColor(graphcanvas.selected_nodes[i]); + } + } + + activeNodeTitle.setDirtyCanvas(true, true); + } + }; + } + activeNodeTitle = node; // Set activeNodeTitle to the clicked node first + pickerTitle.value = node.color; // Set the pickerTitle to the current node's bgcolor + pickerTitle.click(); // Open the color pickerTitle + }; + }, + }, + [ + $el("span", { + style: { + paddingLeft: "4px", + display: "block", + }, + textContent: "🎨 Custom Title", + }), + ] + ); + // New Entry for Changing Background Color Only + $el( + "div.litemenu-entry.submenu", + { + parent: menus[i], + $: (el) => { + el.onclick = () => { + LiteGraph.closeAllContextMenus(); + if (!pickerBG) { + pickerBG = $el("input", { + type: "color", + parent: document.body, + style: { + display: "none", + }, + }); + pickerBG.oninput = () => { + if (activeNodeBG) { + const fApplyColor = function(node){ + if (pickerBG.value) { + node.bgcolor = pickerBG.value; // uses selected color directly + } + } + const graphcanvas = LGraphCanvas.active_canvas; + if (!graphcanvas.selected_nodes || Object.keys(graphcanvas.selected_nodes).length <= 1){ + fApplyColor(activeNodeBG); + } else { + for (let i in graphcanvas.selected_nodes) { + fApplyColor(graphcanvas.selected_nodes[i]); + } + } + + activeNodeBG.setDirtyCanvas(true, true); } }; } - activeNode = null; - picker.value = node.bgcolor; - activeNode = node; - picker.click(); + activeNodeBG = node; // Set activeNodeBG to the clicked node first + pickerBG.value = node.bgcolor; // Set the pickerBG to the current node's bgcolor + pickerBG.click(); // Open the color pickerBG }; }, }, @@ -84,7 +195,7 @@ app.registerExtension({ paddingLeft: "4px", display: "block", }, - textContent: "🎨 Custom", + textContent: "🎨 Custom BG", }), ] );