nodes/zombieyang-sd-ppp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

render download widget in comfyUI node && instance title optimize

Browse Source
This commit is contained in:
zombieyang
2024-08-15 12:32:25 +08:00
parent 05e98bbcd9
commit 8bb51bbebe
3 changed files with 65 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/sdppp-comfy.js
+60 -21
View File
@@ -16,6 +16,23 @@
type: 'comfyui'
}
});
socket.on('connect', () => {
socket.emit('c_reset_changes');
socket.emit('c_reset_instance_name', {
name: `(${socket.id.slice(0, 4)}) ${document.title}`
})
});
socket.on('disconnect', () => {
});
socket.on('connect_error', () => {
console.error('sdppp socket connect_error')
});
socket.on('s_run', () => {
document.getElementById('queue-button').click()
});
socket.on('s_trigger_graph_change', () => {
api.dispatchEvent(new CustomEvent("graphChanged"));
});
api.addEventListener("progress", ({ detail }) => {
if (!detail || isNaN(detail.value / detail.max)) return;
socket.emit('c_progress', {
@@ -48,28 +65,40 @@
])
}
})
const downloadWidgets = new WeakMap();
function handleDownloadWidgets(node) {
let widget;
if (!downloadWidgets.has(node)) {
const size = node.size;
widget = node.addWidget('button', '', 0, ()=> {
if (!Object.keys(documentData || {}).length)
location.href = "/extensions/sd-ppp/plugins/sd-ppp_PS.ccx"
})
downloadWidgets.set(node, widget)
node.size = [size[0], Math.max(size[1], node.size[1])];
} else {
widget = downloadWidgets.get(node)
}
widget.name = Object.keys(documentData || {}).length ? `current ComfyUI pageid: ${socket.id.slice(0, 4)}` : 'download PS plugin (.ccx)';
}
function renderNotConnectedBG(node, ctx) {
if (node.flags.collapsed) return;
const connected = Object.keys(documentData || {}).length;
if (!connected) {
ctx.save();
ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
ctx.fillRect(0, 0, node.size[0], node.size[1]);
ctx.fillStyle = "white";
ctx.textAlign = "center"
ctx.fillText("Photoshop not connected!", node.size[0] / 2, 20);
ctx.restore();
}
}
app.registerExtension({
name: id,
init() {
},
async setup() {
socket.on('connect', () => {
socket.emit('c_reset_changes');
socket.emit('c_reset_instance_name', {
name: document.title
})
});
socket.on('disconnect', () => {
});
socket.on('connect_error', () => {
console.error('sdppp socket connect_error')
});
socket.on('s_run', () => {
document.getElementById('queue-button').click()
});
socket.on('s_trigger_graph_change', () => {
api.dispatchEvent(new CustomEvent("graphChanged"));
});
setInterval(() => {
checkHistoryChanges();
// socket.emit('c_get_layers', (data) => {
@@ -78,7 +107,7 @@
// setLayerStrs = data.set_layer_strs;
// })
socket.emit('c_reset_instance_name', {
name: document.title
name: `(${socket.id.slice(0, 4)}) ${document.title}`
})
}, 2000);
},
@@ -87,6 +116,7 @@
const onSelected = nodeType.prototype.onSelected;
const onMouseEnter = nodeType.prototype.onMouseEnter;
const onAdded = nodeType.prototype.onAdded;
const onDrawForeground = nodeType.prototype.onDrawForeground;
const resetWidget12 = function () {
const documentName = this.widgets[0].value
this.widgets[1].options.values = !documentData[documentName] ? [] : SDPPPSpeicialIDManager.getSpecialLayerForGet().concat(documentData[documentName].layers.map(layer => layer.name));
@@ -102,6 +132,7 @@
if (!this.widgets[0].options.values.length) this.widgets[0].value = ''
if (!this.widgets[0].value || this.widgets[0].options.values.indexOf(this.widgets[0].value) == -1) this.widgets[0].value = this.widgets[0].options.values[0];
resetWidget12.call(this);
handleDownloadWidgets(this);
}
nodeType.prototype.onSelected = async function (...args) {
if (onSelected) await onSelected.call(this, ...args);
@@ -124,8 +155,12 @@
this.widgets[0].value = documentKey;
}
})
}
}
}
getAndRender.call(this);
}
nodeType.prototype.onDrawForeground = function (ctx, a, b, c) {
renderNotConnectedBG(this, ctx);
}
} else if (nodeType.comfyClass === 'Send Images To Photoshop') {
@@ -145,6 +180,7 @@
if (!this.widgets[0].options.values.length) this.widgets[0].value = ''
if (!this.widgets[0].value || this.widgets[0].options.values.indexOf(this.widgets[0].value) == -1) this.widgets[0].value = this.widgets[0].options.values[0];
resetWidget1.call(this);
handleDownloadWidgets(this);
}
nodeType.prototype.onSelected = async function (...args) {
if (onSelected) await onSelected.call(this, ...args);
@@ -167,10 +203,13 @@
this.widgets[0].value = documentKey;
}
})
}
}
}
getAndRender.call(this);
}
nodeType.prototype.onDrawForeground = function (ctx, a, b, c) {
renderNotConnectedBG(this, ctx);
}
}
}
});
photoshop/src/panels/Main.jsx
+1 -2
View File
@@ -120,10 +120,9 @@ export default class Main extends React.Component {
autoRunning: e.target.checked ? '' : item.sid
})
}}></sp-checkbox>
<sp-label class="client-name">{item.name}</sp-label>
<sp-label class="client-name">{item.progress ? `${item.progress}% - ` : ""}{item.name}</sp-label>
</div>
<div className="client-list-item-right">
<sp-label class="client-progress">{item.progress ? `${item.progress}%` : ""}</sp-label>
<sp-link onClick={() => { ComfyConnection.instance?.pageInstanceRun(item.sid) }}>{item.type == "comfy" ? "Queue Prompt" : "Generate"}</sp-link>
</div>
</li>
photoshop/src/styles.css
+4
View File
@@ -56,6 +56,7 @@
margin-left: 5px;
display: flex;
align-items: center;
flex: 2;
}
.client-list-item sp-checkbox {
margin-right: 2px;
@@ -70,6 +71,9 @@
margin-right: 10px;
display: flex;
align-items: center;
flex: 1;
text-align: right;
white-space: nowrap;
}
.client-list-item .client-list-item-right sp-link:active {
color: white;