Skip to content

Commit

Permalink
Merge branch 'html5-dialog' of https://github.com/reaper47/ComfyUI
Browse files Browse the repository at this point in the history
  • Loading branch information
@comfyanonymous
comfyanonymous committed Jun 17, 2023
2 parents 8c9c94b + 3fbd0ab commit e619278
Show file tree
Hide file tree
Showing 4 changed files with 363 additions and 196 deletions.
241 changes: 129 additions & 112 deletions web/extensions/core/colorPalette.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,9 @@ const colorPalettes = {
"descrip-text": "#999",
"drag-text": "#ccc",
"error-text": "#ff4444",
"border-color": "#4e4e4e"
"border-color": "#4e4e4e",
"tr-even-bg-color": "#222",
"tr-odd-bg-color": "#353535",
}
},
},
Expand Down Expand Up @@ -111,7 +113,9 @@ const colorPalettes = {
"descrip-text": "#444",
"drag-text": "#555",
"error-text": "#F44336",
"border-color": "#888"
"border-color": "#888",
"tr-even-bg-color": "#f9f9f9",
"tr-odd-bg-color": "#fff",
}
},
},
Expand Down Expand Up @@ -165,7 +169,9 @@ const colorPalettes = {
"descrip-text": "#586e75", // Base01
"drag-text": "#839496", // Base0
"error-text": "#dc322f", // Solarized Red
"border-color": "#657b83" // Base00
"border-color": "#657b83", // Base00
"tr-even-bg-color": "#002b36",
"tr-odd-bg-color": "#073642",
}
},
}
Expand Down Expand Up @@ -194,7 +200,7 @@ app.registerExtension({
const nodeData = defs[nodeId];

var inputs = nodeData["input"]["required"];
if (nodeData["input"]["optional"] != undefined) {
if (nodeData["input"]["optional"] !== undefined) {
inputs = Object.assign({}, nodeData["input"]["required"], nodeData["input"]["optional"])
}

Expand All @@ -214,7 +220,7 @@ app.registerExtension({
}

return types;
};
}

function completeColorPalette(colorPalette) {
var types = getSlotTypes();
Expand All @@ -228,7 +234,7 @@ app.registerExtension({
colorPalette.colors.node_slot = sortObjectKeys(colorPalette.colors.node_slot);

return colorPalette;
};
}

const getColorPaletteTemplate = async () => {
let colorPalette = {
Expand Down Expand Up @@ -267,31 +273,31 @@ app.registerExtension({

const addCustomColorPalette = async (colorPalette) => {
if (typeof (colorPalette) !== "object") {
app.ui.dialog.show("Invalid color palette");
alert("Invalid color palette.");
return;
}

if (!colorPalette.id) {
app.ui.dialog.show("Color palette missing id");
alert("Color palette missing id.");
return;
}

if (!colorPalette.name) {
app.ui.dialog.show("Color palette missing name");
alert("Color palette missing name.");
return;
}

if (!colorPalette.colors) {
app.ui.dialog.show("Color palette missing colors");
alert("Color palette missing colors.");
return;
}

if (colorPalette.colors.node_slot && typeof (colorPalette.colors.node_slot) !== "object") {
app.ui.dialog.show("Invalid color palette colors.node_slot");
alert("Invalid color palette colors.node_slot.");
return;
}

let customColorPalettes = getCustomColorPalettes();
const customColorPalettes = getCustomColorPalettes();
customColorPalettes[colorPalette.id] = colorPalette;
setCustomColorPalettes(customColorPalettes);

Expand All @@ -312,7 +318,7 @@ app.registerExtension({
};

const deleteCustomColorPalette = async (colorPaletteId) => {
let customColorPalettes = getCustomColorPalettes();
const customColorPalettes = getCustomColorPalettes();
delete customColorPalettes[colorPaletteId];
setCustomColorPalettes(customColorPalettes);

Expand Down Expand Up @@ -387,8 +393,7 @@ app.registerExtension({
style: {display: "none"},
parent: document.body,
onchange: () => {
let file = fileInput.files[0];

const file = fileInput.files[0];
if (file.type === "application/json" || file.name.endsWith(".json")) {
const reader = new FileReader();
reader.onload = async () => {
Expand All @@ -403,104 +408,116 @@ app.registerExtension({
id,
name: "Color Palette",
type: (name, setter, value) => {
let options = [];

for (const c in colorPalettes) {
const colorPalette = colorPalettes[c];
options.push($el("option", {
textContent: colorPalette.name,
value: colorPalette.id,
selected: colorPalette.id === value
}));
}

let customColorPalettes = getCustomColorPalettes();
for (const c in customColorPalettes) {
const colorPalette = customColorPalettes[c];
options.push($el("option", {
textContent: colorPalette.name + " (custom)",
value: "custom_" + colorPalette.id,
selected: "custom_" + colorPalette.id === value
}));
}

return $el("div", [
$el("label", {textContent: name || id}, [
els.select = $el("select", {
onchange: (e) => {
setter(e.target.value);
}
}, options)
const options = [
...Object.values(colorPalettes).map(c=> $el("option", {
textContent: c.name,
value: c.id,
selected: c.id === value
})),
...Object.values(getCustomColorPalettes()).map(c=>$el("option", {
textContent: `${c.name} (custom)`,
value: `custom_${c.id}`,
selected: `custom_${c.id}` === value
})) ,
];

els.select = $el("select", {
style: {
marginBottom: "0.15rem",
width: "100%",
},
onchange: (e) => {
setter(e.target.value);
}
}, options)

return $el("tr", [
$el("td", [
$el("label", {
for: id.replaceAll(".", "-"),
textContent: "Color palette:",
}),
]),
$el("input", {
type: "button",
value: "Export",
onclick: async () => {
const colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);
const colorPalette = await completeColorPalette(getColorPalette(colorPaletteId));
const json = JSON.stringify(colorPalette, null, 2); // convert the data to a JSON string
const blob = new Blob([json], {type: "application/json"});
const url = URL.createObjectURL(blob);
const a = $el("a", {
href: url,
download: colorPaletteId + ".json",
style: {display: "none"},
parent: document.body,
});
a.click();
setTimeout(function () {
a.remove();
window.URL.revokeObjectURL(url);
}, 0);
},
}),
$el("input", {
type: "button",
value: "Import",
onclick: () => {
fileInput.click();
}
}),
$el("input", {
type: "button",
value: "Template",
onclick: async () => {
const colorPalette = await getColorPaletteTemplate();
const json = JSON.stringify(colorPalette, null, 2); // convert the data to a JSON string
const blob = new Blob([json], {type: "application/json"});
const url = URL.createObjectURL(blob);
const a = $el("a", {
href: url,
download: "color_palette.json",
style: {display: "none"},
parent: document.body,
});
a.click();
setTimeout(function () {
a.remove();
window.URL.revokeObjectURL(url);
}, 0);
}
}),
$el("input", {
type: "button",
value: "Delete",
onclick: async () => {
let colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);

if (colorPalettes[colorPaletteId]) {
app.ui.dialog.show("You cannot delete built-in color palette");
return;
}

if (colorPaletteId.startsWith("custom_")) {
colorPaletteId = colorPaletteId.substr(7);
}

await deleteCustomColorPalette(colorPaletteId);
}
}),
]);
$el("td", [
els.select,
$el("div", {
style: {
display: "grid",
gap: "4px",
gridAutoFlow: "column",
},
}, [
$el("input", {
type: "button",
value: "Export",
onclick: async () => {
const colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);
const colorPalette = await completeColorPalette(getColorPalette(colorPaletteId));
const json = JSON.stringify(colorPalette, null, 2); // convert the data to a JSON string
const blob = new Blob([json], {type: "application/json"});
const url = URL.createObjectURL(blob);
const a = $el("a", {
href: url,
download: colorPaletteId + ".json",
style: {display: "none"},
parent: document.body,
});
a.click();
setTimeout(function () {
a.remove();
window.URL.revokeObjectURL(url);
}, 0);
},
}),
$el("input", {
type: "button",
value: "Import",
onclick: () => {
fileInput.click();
}
}),
$el("input", {
type: "button",
value: "Template",
onclick: async () => {
const colorPalette = await getColorPaletteTemplate();
const json = JSON.stringify(colorPalette, null, 2); // convert the data to a JSON string
const blob = new Blob([json], {type: "application/json"});
const url = URL.createObjectURL(blob);
const a = $el("a", {
href: url,
download: "color_palette.json",
style: {display: "none"},
parent: document.body,
});
a.click();
setTimeout(function () {
a.remove();
window.URL.revokeObjectURL(url);
}, 0);
}
}),
$el("input", {
type: "button",
value: "Delete",
onclick: async () => {
let colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);

if (colorPalettes[colorPaletteId]) {
alert("You cannot delete a built-in color palette.");
return;
}

if (colorPaletteId.startsWith("custom_")) {
colorPaletteId = colorPaletteId.substr(7);
}

await deleteCustomColorPalette(colorPaletteId);
}
}),
]),
]),
])
},
defaultValue: defaultColorPaletteId,
async onChange(value) {
Expand Down
2 changes: 1 addition & 1 deletion web/extensions/core/slotDefaults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ app.registerExtension({
LiteGraph.middle_click_slot_add_default_node = true;
this.suggestionsNumber = app.ui.settings.addSetting({
id: "Comfy.NodeSuggestions.number",
name: "number of nodes suggestions",
name: "Number of nodes suggestions",
type: "slider",
attrs: {
min: 1,
Expand Down
Loading

0 comments on commit e619278

Please sign in to comment.