TBNilles/ComfyUI-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimize: better badge

Browse Source 
optimize: cache data mode
improve: robust data retrieve

update DB
This commit is contained in:
Dr.Lt.Data
2023-12-09 00:21:06 +09:00
parent 61514612f8
commit fa20899fa1
11 changed files with 244 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
js/comfyui-manager.js
View File

@@ -224,7 +224,6 @@ async function init_notice(notice) {
await init_badge_mode();
await init_share_option();
async function fetchNicknames() {
const response1 = await api.fetchApi(`/customnode/getmappings?mode=local`);
const mappings = await response1.json();
@@ -235,7 +234,10 @@ async function fetchNicknames() {
for (let i in mappings) {
let item = mappings[i];
var nickname;
if (item[1].title) {
if (item[1].nickname) {
nickname = item[1].nickname;
}
else if (item[1].title) {
nickname = item[1].title;
}
else {
@@ -256,6 +258,84 @@ async function fetchNicknames() {
const [nicknames, nickname_patterns] = await fetchNicknames();
function getNickname(node, nodename) {
if(node.nickname) {
return node.nickname;
}
else {
if (nicknames[nodename]) {
node.nickname = nicknames[nodename];
}
else {
for(let i in nickname_patterns) {
let item = nickname_patterns[i];
if(nodename.match(item[0])) {
node.nickname = item[1];
}
}
}
return node.nickname;
}
}
function drawBadge(node, orig, ctx) {
const r = orig?.apply?.(node, arguments);
if (!node.flags.collapsed && badge_mode != 'none' && node.constructor.title_mode != LiteGraph.NO_TITLE) {
let text = "";
if (badge_mode.startsWith('id_nick'))
text = `#${node.id} `;
let nick = node.getNickname();
if (nick) {
if (nick == 'ComfyUI') {
if(badge_mode.endsWith('hide')) {
nick = "";
}
else {
nick = "🦊"
}
}
if (nick.length > 25) {
text += nick.substring(0, 23) + "..";
}
else {
text += nick;
}
}
if (text != "") {
let fgColor = "white";
let bgColor = "#0F1F0F";
let visible = true;
ctx.save();
ctx.font = "12px sans-serif";
const sz = ctx.measureText(text);
ctx.fillStyle = bgColor;
ctx.beginPath();
ctx.roundRect(node.size[0] - sz.width - 12, -LiteGraph.NODE_TITLE_HEIGHT - 20, sz.width + 12, 20, 5);
ctx.fill();
ctx.fillStyle = fgColor;
ctx.fillText(text, node.size[0] - sz.width - 6, -LiteGraph.NODE_TITLE_HEIGHT - 6);
ctx.restore();
if (node.has_errors) {
ctx.save();
ctx.font = "bold 14px sans-serif";
const sz2 = ctx.measureText(node.type);
ctx.fillStyle = 'white';
ctx.fillText(node.type, node.size[0] / 2 - sz2.width / 2, node.size[1] / 2);
ctx.restore();
}
}
}
return r;
}
async function updateComfyUI() {
let prev_text = update_comfyui_button.innerText;
@@ -302,9 +382,7 @@ async function fetchUpdates(update_check_checkbox) {
fetch_updates_button.style.backgroundColor = "gray";
try {
var mode = "url";
if(manager_instance.local_mode_checkbox.checked)
mode = "local";
var mode = manager_instance.datasrc_combo.value;
const response = await api.fetchApi(`/customnode/fetch_updates?mode=${mode}`);
@@ -345,9 +423,7 @@ async function updateAll(update_check_checkbox, manager_dialog) {
update_all_button.style.backgroundColor = "gray";
try {
var mode = "url";
if(manager_instance.local_mode_checkbox.checked)
mode = "local";
var mode = manager_instance.datasrc_combo.value;
update_all_button.innerText = "Updating all...";
const response1 = await api.fetchApi('/comfyui_manager/update_comfyui');
@@ -417,8 +493,6 @@ const isOutputNode = (node) => {
// -----------
class ManagerMenuDialog extends ComfyDialog {
local_mode_checkbox = null;
createControlsMid() {
let self = this;
@@ -505,18 +579,19 @@ class ManagerMenuDialog extends ComfyDialog {
createControlsLeft() {
let self = this;
this.local_mode_checkbox = $el("input",{type:'checkbox', id:"use_local_db"},[])
const checkbox_text = $el("label",{for: "use_local_db"},[" Use local DB"])
checkbox_text.style.color = "var(--fg-color)";
checkbox_text.style.cursor = "pointer";
checkbox_text.style.marginRight = "10px";
this.update_check_checkbox = $el("input",{type:'checkbox', id:"skip_update_check"},[])
const uc_checkbox_text = $el("label",{for:"skip_update_check"},[" Skip update check"])
uc_checkbox_text.style.color = "var(--fg-color)";
uc_checkbox_text.style.cursor = "pointer";
this.update_check_checkbox.checked = true;
// db mode
this.datasrc_combo = document.createElement("select");
this.datasrc_combo.style.cursor = "pointer";
this.datasrc_combo.appendChild($el('option', { value: 'cache', text: 'DB: Cache (1day)' }, []));
this.datasrc_combo.appendChild($el('option', { value: 'local', text: 'DB: Local' }, []));
this.datasrc_combo.appendChild($el('option', { value: 'url', text: 'DB: Remote' }, []));
// preview method
let preview_combo = document.createElement("select");
preview_combo.style.cursor = "pointer";
@@ -612,8 +687,9 @@ class ManagerMenuDialog extends ComfyDialog {
});
return [
$el("div", {}, [this.local_mode_checkbox, checkbox_text, this.update_check_checkbox, uc_checkbox_text]),
$el("div", {}, [this.update_check_checkbox, uc_checkbox_text]),
$el("br", {}, []),
this.datasrc_combo,
preview_combo,
badge_combo,
channel_combo,
@@ -870,120 +946,21 @@ app.registerExtension({
},
async beforeRegisterNodeDef(nodeType, nodeData, app) {
const onDrawForeground = nodeType.prototype.onDrawForeground;
nodeType.prototype.onDrawForeground = function (ctx) {
const r = onDrawForeground?.apply?.(this, arguments);
if (!this.flags.collapsed && badge_mode != 'none' && nodeType.title_mode != LiteGraph.NO_TITLE) {
let text = "";
if (badge_mode.startsWith('id_nick'))
text = `#${this.id} `;
if (nicknames[nodeData.name.trim()]) {
let nick = nicknames[nodeData.name.trim()];
if (nick == 'ComfyUI') {
if(badge_mode.endsWith('hide')) {
nick = "";
}
else {
nick = "🦊"
}
}
if (nick.length > 25) {
text += nick.substring(0, 23) + "..";
}
else {
text += nick;
}
}
if (text != "") {
let fgColor = "white";
let bgColor = "#0F1F0F";
let visible = true;
ctx.save();
ctx.font = "12px sans-serif";
const sz = ctx.measureText(text);
ctx.fillStyle = bgColor;
ctx.beginPath();
ctx.roundRect(this.size[0] - sz.width - 12, -LiteGraph.NODE_TITLE_HEIGHT - 20, sz.width + 12, 20, 5);
ctx.fill();
ctx.fillStyle = fgColor;
ctx.fillText(text, this.size[0] - sz.width - 6, -LiteGraph.NODE_TITLE_HEIGHT - 6);
ctx.restore();
}
}
return r;
};
this._addExtraNodeContextMenu(nodeType, app);
},
async nodeCreated(node, app) {
if(!node.badge_enabled) {
node.getNickname = function () { return getNickname(node, node.comfyClass.trim()) };
const orig = node.__proto__.onDrawForeground;
node.onDrawForeground = function (ctx) { drawBadge(node, orig, ctx) };
node.badge_enabled = true;
}
},
async loadedGraphNode(node, app) {
if (node.has_errors) {
const onDrawForeground = node.onDrawForeground;
node.onDrawForeground = function (ctx) {
const r = onDrawForeground?.apply?.(this, arguments);
if (!this.flags.collapsed && badge_mode != 'none') {
let text = "";
if (badge_mode.startsWith('id_nick'))
text = `#${this.id} `;
if (nicknames[node.type.trim()]) {
let nick = nicknames[node.type.trim()];
if (nick == 'ComfyUI') {
if(badge_mode.endsWith('hide')) {
nick = "";
}
else {
nick = "🦊"
}
}
if (nick.length > 25) {
text += nick.substring(0, 23) + "..";
}
else {
text += nick;
}
}
if (text != "") {
let fgColor = "white";
let bgColor = "#0F1F0F";
let visible = true;
ctx.save();
ctx.font = "12px sans-serif";
const sz = ctx.measureText(text);
ctx.fillStyle = bgColor;
ctx.beginPath();
ctx.roundRect(this.size[0] - sz.width - 12, -LiteGraph.NODE_TITLE_HEIGHT - 20, sz.width + 12, 20, 5);
ctx.fill();
ctx.fillStyle = fgColor;
ctx.fillText(text, this.size[0] - sz.width - 6, -LiteGraph.NODE_TITLE_HEIGHT - 6);
ctx.restore();
ctx.save();
ctx.font = "bold 14px sans-serif";
const sz2 = ctx.measureText(node.type);
ctx.fillStyle = 'white';
ctx.fillText(node.type, this.size[0] / 2 - sz2.width / 2, this.size[1] / 2);
ctx.restore();
}
}
return r;
};
if(!node.badge_enabled) {
const orig = node.onDrawForeground;
node.getNickname = function () { return getNickname(node, node.type.trim()) };
node.onDrawForeground = function (ctx) { drawBadge(node, orig, ctx) };
}
},