Skip to content

Update customColors.js #433

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update customColors.js #433

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 128 additions & 17 deletions web/js/customColors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,59 +22,170 @@ 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",
{
parent: menus[i],
$: (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
};
},
},
Expand All @@ -84,7 +195,7 @@ app.registerExtension({
paddingLeft: "4px",
display: "block",
},
textContent: "🎨 Custom",
textContent: "🎨 Custom BG",
}),
]
);
Expand Down