add: node focusing function
This commit is contained in:
karrix
parent
01e323b7e2
commit
369c1456a9
@ -24,7 +24,10 @@ function dispatchAPIEventData(data) {
|
||||
message += "\n" + nodeError.class_type + ":";
|
||||
for (const errorReason of nodeError.errors) {
|
||||
message +=
|
||||
"\n - " + errorReason.message + ": " + errorReason.details;
|
||||
"\n - " +
|
||||
errorReason.message +
|
||||
": " +
|
||||
errorReason.details;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,32 +47,38 @@ function dispatchAPIEventData(data) {
|
||||
// window.name = this.clientId; // use window name so it isnt reused when duplicating tabs
|
||||
// sessionStorage.setItem("clientId", this.clientId); // store in session storage so duplicate tab can load correct workflow
|
||||
}
|
||||
api.dispatchEvent(new CustomEvent("status", { detail: msg.data.status }));
|
||||
api.dispatchEvent(
|
||||
new CustomEvent("status", { detail: msg.data.status })
|
||||
);
|
||||
break;
|
||||
case "progress":
|
||||
api.dispatchEvent(new CustomEvent("progress", { detail: msg.data }));
|
||||
api.dispatchEvent(
|
||||
new CustomEvent("progress", { detail: msg.data })
|
||||
);
|
||||
break;
|
||||
case "executing":
|
||||
api.dispatchEvent(
|
||||
new CustomEvent("executing", { detail: msg.data.node }),
|
||||
new CustomEvent("executing", { detail: msg.data.node })
|
||||
);
|
||||
break;
|
||||
case "executed":
|
||||
api.dispatchEvent(new CustomEvent("executed", { detail: msg.data }));
|
||||
api.dispatchEvent(
|
||||
new CustomEvent("executed", { detail: msg.data })
|
||||
);
|
||||
break;
|
||||
case "execution_start":
|
||||
api.dispatchEvent(
|
||||
new CustomEvent("execution_start", { detail: msg.data }),
|
||||
new CustomEvent("execution_start", { detail: msg.data })
|
||||
);
|
||||
break;
|
||||
case "execution_error":
|
||||
api.dispatchEvent(
|
||||
new CustomEvent("execution_error", { detail: msg.data }),
|
||||
new CustomEvent("execution_error", { detail: msg.data })
|
||||
);
|
||||
break;
|
||||
case "execution_cached":
|
||||
api.dispatchEvent(
|
||||
new CustomEvent("execution_cached", { detail: msg.data }),
|
||||
new CustomEvent("execution_cached", { detail: msg.data })
|
||||
);
|
||||
break;
|
||||
default:
|
||||
@ -143,11 +152,13 @@ const ext = {
|
||||
}
|
||||
|
||||
if (!workflow_version_id) {
|
||||
console.error("No workflow_version_id provided in query parameters.");
|
||||
console.error(
|
||||
"No workflow_version_id provided in query parameters."
|
||||
);
|
||||
} else {
|
||||
loadingDialog.showLoading(
|
||||
"Loading workflow from " + org_display,
|
||||
"Please wait...",
|
||||
"Please wait..."
|
||||
);
|
||||
fetch(endpoint + "/api/workflow-version/" + workflow_version_id, {
|
||||
method: "GET",
|
||||
@ -160,7 +171,10 @@ const ext = {
|
||||
const data = await res.json();
|
||||
const { workflow, workflow_id, error } = data;
|
||||
if (error) {
|
||||
infoDialog.showMessage("Unable to load this workflow", error);
|
||||
infoDialog.showMessage(
|
||||
"Unable to load this workflow",
|
||||
error
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -183,7 +197,7 @@ const ext = {
|
||||
window.history.replaceState(
|
||||
{},
|
||||
document.title,
|
||||
window.location.pathname,
|
||||
window.location.pathname
|
||||
);
|
||||
});
|
||||
}
|
||||
@ -206,22 +220,37 @@ const ext = {
|
||||
ComfyWidgets.STRING(
|
||||
this,
|
||||
"workflow_name",
|
||||
["", { default: this.properties.workflow_name, multiline: false }],
|
||||
app,
|
||||
[
|
||||
"",
|
||||
{
|
||||
default: this.properties.workflow_name,
|
||||
multiline: false,
|
||||
},
|
||||
],
|
||||
app
|
||||
);
|
||||
|
||||
ComfyWidgets.STRING(
|
||||
this,
|
||||
"workflow_id",
|
||||
["", { default: this.properties.workflow_id, multiline: false }],
|
||||
app,
|
||||
[
|
||||
"",
|
||||
{
|
||||
default: this.properties.workflow_id,
|
||||
multiline: false,
|
||||
},
|
||||
],
|
||||
app
|
||||
);
|
||||
|
||||
ComfyWidgets.STRING(
|
||||
this,
|
||||
"version",
|
||||
["", { default: this.properties.version, multiline: false }],
|
||||
app,
|
||||
[
|
||||
"",
|
||||
{ default: this.properties.version, multiline: false },
|
||||
],
|
||||
app
|
||||
);
|
||||
|
||||
// this.widgets.forEach((w) => {
|
||||
@ -248,7 +277,7 @@ const ext = {
|
||||
title_mode: LiteGraph.NORMAL_TITLE,
|
||||
title: "Comfy Deploy",
|
||||
collapsable: true,
|
||||
}),
|
||||
})
|
||||
);
|
||||
|
||||
ComfyDeploy.category = "deploy";
|
||||
@ -281,7 +310,9 @@ const ext = {
|
||||
if (typeof api.handlePromptGenerated === "function") {
|
||||
api.handlePromptGenerated(prompt);
|
||||
} else {
|
||||
console.warn("api.handlePromptGenerated is not a function");
|
||||
console.warn(
|
||||
"api.handlePromptGenerated is not a function"
|
||||
);
|
||||
}
|
||||
sendEventToCD("cd_plugin_onQueuePrompt", prompt);
|
||||
} else if (message.type === "get_prompt") {
|
||||
@ -305,6 +336,72 @@ const ext = {
|
||||
|
||||
app.graph.add(node);
|
||||
app.graph.afterChange();
|
||||
} else if (message.type === "zoom_to_node") {
|
||||
const nodeId = message.data.nodeId;
|
||||
const position = message.data.position;
|
||||
|
||||
const node = app.graph.getNodeById(nodeId);
|
||||
if (!node) return;
|
||||
|
||||
const canvas = app.canvas;
|
||||
const targetScale = 1;
|
||||
const targetOffsetX =
|
||||
canvas.canvas.width / 4 -
|
||||
position[0] -
|
||||
node.size[0] / 2;
|
||||
const targetOffsetY =
|
||||
canvas.canvas.height / 4 -
|
||||
position[1] -
|
||||
node.size[1] / 2;
|
||||
|
||||
const startScale = canvas.ds.scale;
|
||||
const startOffsetX = canvas.ds.offset[0];
|
||||
const startOffsetY = canvas.ds.offset[1];
|
||||
|
||||
const duration = 400; // Animation duration in milliseconds
|
||||
const startTime = Date.now();
|
||||
|
||||
function easeOutCubic(t) {
|
||||
return 1 - Math.pow(1 - t, 3);
|
||||
}
|
||||
|
||||
function lerp(start, end, t) {
|
||||
return start * (1 - t) + end * t;
|
||||
}
|
||||
|
||||
function animate() {
|
||||
const currentTime = Date.now();
|
||||
const elapsedTime = currentTime - startTime;
|
||||
const t = Math.min(elapsedTime / duration, 1);
|
||||
|
||||
const easedT = easeOutCubic(t);
|
||||
|
||||
const currentScale = lerp(
|
||||
startScale,
|
||||
targetScale,
|
||||
easedT
|
||||
);
|
||||
const currentOffsetX = lerp(
|
||||
startOffsetX,
|
||||
targetOffsetX,
|
||||
easedT
|
||||
);
|
||||
const currentOffsetY = lerp(
|
||||
startOffsetY,
|
||||
targetOffsetY,
|
||||
easedT
|
||||
);
|
||||
|
||||
canvas.setZoom(currentScale);
|
||||
canvas.ds.offset = [currentOffsetX, currentOffsetY];
|
||||
canvas.draw(true, true);
|
||||
|
||||
if (t < 1) {
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
}
|
||||
|
||||
animate();
|
||||
}
|
||||
// else if (message.type === "refresh") {
|
||||
// sendEventToCD("cd_plugin_onRefresh");
|
||||
@ -345,7 +442,7 @@ const ext = {
|
||||
|
||||
function showError(title, message) {
|
||||
infoDialog.show(
|
||||
`<h3 style="margin: 0px; color: red;">${title}</h3><br><span>${message}</span> `,
|
||||
`<h3 style="margin: 0px; color: red;">${title}</h3><br><span>${message}</span> `
|
||||
);
|
||||
}
|
||||
|
||||
@ -379,11 +476,14 @@ function createDynamicUIHtml(data) {
|
||||
Object.values(data.custom_nodes).forEach((node) => {
|
||||
html += `
|
||||
<div style="border-bottom: 1px solid #e2e8f0; padding-top: 16px;">
|
||||
<a href="${node.url
|
||||
}" target="_blank" style="font-size: 18px; font-weight: semibold; color: white; text-decoration: none;">${node.name
|
||||
<a href="${
|
||||
node.url
|
||||
}" target="_blank" style="font-size: 18px; font-weight: semibold; color: white; text-decoration: none;">${
|
||||
node.name
|
||||
}</a>
|
||||
<p style="font-size: 14px; color: #4b5563;">${node.hash}</p>
|
||||
${node.warning
|
||||
${
|
||||
node.warning
|
||||
? `<p style="font-size: 14px; color: #d69e2e;">${node.warning}</p>`
|
||||
: ""
|
||||
}
|
||||
@ -400,7 +500,8 @@ function createDynamicUIHtml(data) {
|
||||
Object.entries(data.models).forEach(([section, items]) => {
|
||||
html += `
|
||||
<div style="border-bottom: 1px solid #e2e8f0; padding-top: 8px; padding-bottom: 8px;">
|
||||
<h3 style="font-size: 18px; font-weight: semibold; margin-bottom: 8px;">${section.charAt(0).toUpperCase() + section.slice(1)
|
||||
<h3 style="font-size: 18px; font-weight: semibold; margin-bottom: 8px;">${
|
||||
section.charAt(0).toUpperCase() + section.slice(1)
|
||||
}</h3>`;
|
||||
items.forEach((item) => {
|
||||
html += `<p style="font-size: 14px; color: ${textColor};">${item.name}</p>`;
|
||||
@ -417,7 +518,8 @@ function createDynamicUIHtml(data) {
|
||||
Object.entries(data.files).forEach(([section, items]) => {
|
||||
html += `
|
||||
<div style="border-bottom: 1px solid #e2e8f0; padding-top: 8px; padding-bottom: 8px;">
|
||||
<h3 style="font-size: 18px; font-weight: semibold; margin-bottom: 8px;">${section.charAt(0).toUpperCase() + section.slice(1)
|
||||
<h3 style="font-size: 18px; font-weight: semibold; margin-bottom: 8px;">${
|
||||
section.charAt(0).toUpperCase() + section.slice(1)
|
||||
}</h3>`;
|
||||
items.forEach((item) => {
|
||||
html += `<p style="font-size: 14px; color: ${textColor};">${item.name}</p>`;
|
||||
@ -448,7 +550,7 @@ async function deployWorkflow() {
|
||||
if (deployMeta.length == 0) {
|
||||
const text = await inputDialog.input(
|
||||
"Create your deployment",
|
||||
"Workflow name",
|
||||
"Workflow name"
|
||||
);
|
||||
if (!text) return;
|
||||
console.log(text);
|
||||
@ -489,7 +591,7 @@ async function deployWorkflow() {
|
||||
<input id="reuse-hash" type="checkbox" checked>Reuse hash from last version</input>
|
||||
</label>
|
||||
</div>
|
||||
`,
|
||||
`
|
||||
);
|
||||
if (!ok) return;
|
||||
|
||||
@ -508,7 +610,7 @@ async function deployWorkflow() {
|
||||
if (!snapshot) {
|
||||
showError(
|
||||
"Error when deploying",
|
||||
"Unable to generate snapshot, please install ComfyUI Manager",
|
||||
"Unable to generate snapshot, please install ComfyUI Manager"
|
||||
);
|
||||
return;
|
||||
}
|
||||
@ -529,7 +631,7 @@ async function deployWorkflow() {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + apiKey,
|
||||
},
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((x) => x.json())
|
||||
.catch(() => {
|
||||
@ -548,7 +650,7 @@ async function deployWorkflow() {
|
||||
// Match previous hash for models
|
||||
if (reuseHash && existing_workflow?.dependencies?.models) {
|
||||
const previousModelHash = Object.entries(
|
||||
existing_workflow?.dependencies?.models,
|
||||
existing_workflow?.dependencies?.models
|
||||
).flatMap(([key, value]) => {
|
||||
return Object.values(value).map((x) => ({
|
||||
...x,
|
||||
@ -570,7 +672,9 @@ async function deployWorkflow() {
|
||||
console.log(file);
|
||||
loadingDialog.showLoading("Generating hash", file);
|
||||
const hash = await fetch(
|
||||
`/comfyui-deploy/get-file-hash?file_path=${encodeURIComponent(file)}`,
|
||||
`/comfyui-deploy/get-file-hash?file_path=${encodeURIComponent(
|
||||
file
|
||||
)}`
|
||||
).then((x) => x.json());
|
||||
loadingDialog.showLoading("Generating hash", file);
|
||||
console.log(hash);
|
||||
@ -580,18 +684,24 @@ async function deployWorkflow() {
|
||||
console.log("Uploading ", file);
|
||||
loadingDialog.showLoading("Uploading file", file);
|
||||
try {
|
||||
const { download_url } = await fetch(`/comfyui-deploy/upload-file`, {
|
||||
const { download_url } = await fetch(
|
||||
`/comfyui-deploy/upload-file`,
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
file_path: file,
|
||||
token: apiKey,
|
||||
url: endpoint + "/api/upload-url",
|
||||
}),
|
||||
})
|
||||
}
|
||||
)
|
||||
.then((x) => x.json())
|
||||
.catch(() => {
|
||||
loadingDialog.close();
|
||||
confirmDialog.confirm("Error", "Unable to upload file " + file);
|
||||
confirmDialog.confirm(
|
||||
"Error",
|
||||
"Unable to upload file " + file
|
||||
);
|
||||
});
|
||||
loadingDialog.showLoading("Uploaded file", file);
|
||||
console.log(download_url);
|
||||
@ -628,8 +738,8 @@ async function deployWorkflow() {
|
||||
<iframe
|
||||
style="z-index: 10; min-width: 600px; max-width: 1024px; min-height: 600px; border: none; background-color: transparent;"
|
||||
src="https://www.comfydeploy.com/dependency-graph?deps=${encodeURIComponent(
|
||||
JSON.stringify(deps),
|
||||
)}" />`,
|
||||
JSON.stringify(deps)
|
||||
)}" />`
|
||||
// createDynamicUIHtml(deps),
|
||||
);
|
||||
if (!depsOk) return;
|
||||
@ -690,7 +800,7 @@ async function deployWorkflow() {
|
||||
graph.change();
|
||||
|
||||
infoDialog.show(
|
||||
`<span style="color:green;">Deployed successfully!</span> <a style="color:white;" target="_blank" href=${endpoint}/workflows/${data.workflow_id}>-> View here</a> <br/> <br/> Workflow ID: ${data.workflow_id} <br/> Workflow Name: ${workflow_name} <br/> Workflow Version: ${data.version} <br/>`,
|
||||
`<span style="color:green;">Deployed successfully!</span> <a style="color:white;" target="_blank" href=${endpoint}/workflows/${data.workflow_id}>-> View here</a> <br/> <br/> Workflow ID: ${data.workflow_id} <br/> Workflow Name: ${workflow_name} <br/> Workflow Version: ${data.version} <br/>`
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
@ -841,9 +951,11 @@ export class LoadingDialog extends ComfyDialog {
|
||||
showLoading(title, message) {
|
||||
this.show(`
|
||||
<div style="width: 400px; display: flex; gap: 18px; flex-direction: column; overflow: unset">
|
||||
<h3 style="margin: 0px; display: flex; align-items: center; justify-content: center; gap: 12px;">${title} ${this.loadingIcon
|
||||
<h3 style="margin: 0px; display: flex; align-items: center; justify-content: center; gap: 12px;">${title} ${
|
||||
this.loadingIcon
|
||||
}</h3>
|
||||
${message
|
||||
${
|
||||
message
|
||||
? `<label style="max-width: 100%; white-space: pre-wrap; word-wrap: break-word;">${message}</label>`
|
||||
: ""
|
||||
}
|
||||
@ -885,17 +997,22 @@ export class InputDialog extends InfoDialog {
|
||||
type: "button",
|
||||
textContent: "Save",
|
||||
onclick: () => {
|
||||
const input = this.textElement.querySelector("#input").value;
|
||||
const input =
|
||||
this.textElement.querySelector("#input").value;
|
||||
if (input.trim() === "") {
|
||||
showError("Input validation", "Input cannot be empty");
|
||||
showError(
|
||||
"Input validation",
|
||||
"Input cannot be empty"
|
||||
);
|
||||
} else {
|
||||
this.callback?.(input);
|
||||
this.close();
|
||||
this.textElement.querySelector("#input").value = "";
|
||||
this.textElement.querySelector("#input").value =
|
||||
"";
|
||||
}
|
||||
},
|
||||
}),
|
||||
],
|
||||
]
|
||||
),
|
||||
];
|
||||
}
|
||||
@ -956,7 +1073,7 @@ export class ConfirmDialog extends InfoDialog {
|
||||
this.close();
|
||||
},
|
||||
}),
|
||||
],
|
||||
]
|
||||
),
|
||||
];
|
||||
}
|
||||
@ -1013,7 +1130,7 @@ function getData(environment) {
|
||||
function saveData(data) {
|
||||
localStorage.setItem(
|
||||
"comfy_deploy_env_data_" + data.environment,
|
||||
JSON.stringify(data),
|
||||
JSON.stringify(data)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1028,7 +1145,9 @@ export class ConfigDialog extends ComfyDialog {
|
||||
this.element.style.paddingBottom = "20px";
|
||||
|
||||
this.container = document.createElement("div");
|
||||
this.element.querySelector(".comfy-modal-content").prepend(this.container);
|
||||
this.element
|
||||
.querySelector(".comfy-modal-content")
|
||||
.prepend(this.container);
|
||||
}
|
||||
|
||||
createButtons() {
|
||||
@ -1062,7 +1181,7 @@ export class ConfigDialog extends ComfyDialog {
|
||||
this.close();
|
||||
},
|
||||
}),
|
||||
],
|
||||
]
|
||||
),
|
||||
];
|
||||
}
|
||||
@ -1074,7 +1193,8 @@ export class ConfigDialog extends ComfyDialog {
|
||||
}
|
||||
|
||||
save(api_key, displayName) {
|
||||
const deployOption = this.container.querySelector("#deployOption").value;
|
||||
const deployOption =
|
||||
this.container.querySelector("#deployOption").value;
|
||||
localStorage.setItem("comfy_deploy_env", deployOption);
|
||||
|
||||
const endpoint = this.container.querySelector("#endpoint").value;
|
||||
@ -1106,22 +1226,32 @@ export class ConfigDialog extends ComfyDialog {
|
||||
<h3 style="margin: 0px;">Comfy Deploy Config</h3>
|
||||
<label style="color: white; width: 100%;">
|
||||
<select id="deployOption" style="margin: 8px 0px; width: 100%; height:30px; box-sizing: border-box;" >
|
||||
<option value="cloud" ${data.environment === "cloud" ? "selected" : ""}>Cloud</option>
|
||||
<option value="local" ${data.environment === "local" ? "selected" : ""}>Local</option>
|
||||
<option value="cloud" ${
|
||||
data.environment === "cloud" ? "selected" : ""
|
||||
}>Cloud</option>
|
||||
<option value="local" ${
|
||||
data.environment === "local" ? "selected" : ""
|
||||
}>Local</option>
|
||||
</select>
|
||||
</label>
|
||||
<label style="color: white; width: 100%;">
|
||||
Endpoint:
|
||||
<input id="endpoint" style="margin-top: 8px; width: 100%; height:40px; box-sizing: border-box; padding: 0px 6px;" type="text" value="${data.endpoint
|
||||
<input id="endpoint" style="margin-top: 8px; width: 100%; height:40px; box-sizing: border-box; padding: 0px 6px;" type="text" value="${
|
||||
data.endpoint
|
||||
}">
|
||||
</label>
|
||||
<div style="color: white;">
|
||||
API Key: User / Org <button style="font-size: 18px;">${data.displayName ?? ""
|
||||
API Key: User / Org <button style="font-size: 18px;">${
|
||||
data.displayName ?? ""
|
||||
}</button>
|
||||
<input id="apiKey" style="margin-top: 8px; width: 100%; height:40px; box-sizing: border-box; padding: 0px 6px;" type="password" value="${data.apiKey
|
||||
<input id="apiKey" style="margin-top: 8px; width: 100%; height:40px; box-sizing: border-box; padding: 0px 6px;" type="password" value="${
|
||||
data.apiKey
|
||||
}">
|
||||
<button id="loginButton" style="margin-top: 8px; width: 100%; height:40px; box-sizing: border-box; padding: 0px 6px;">
|
||||
${data.apiKey ? "Re-login with ComfyDeploy" : "Login with ComfyDeploy"
|
||||
${
|
||||
data.apiKey
|
||||
? "Re-login with ComfyDeploy"
|
||||
: "Login with ComfyDeploy"
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
@ -1142,7 +1272,7 @@ export class ConfigDialog extends ComfyDialog {
|
||||
clearInterval(poll);
|
||||
infoDialog.showMessage(
|
||||
"Timeout",
|
||||
"Wait too long for the response, please try re-login",
|
||||
"Wait too long for the response, please try re-login"
|
||||
);
|
||||
}, 30000); // Stop polling after 30 seconds
|
||||
|
||||
@ -1153,14 +1283,15 @@ export class ConfigDialog extends ComfyDialog {
|
||||
if (json.api_key) {
|
||||
this.save(json.api_key, json.name);
|
||||
this.close();
|
||||
this.container.querySelector("#apiKey").value = json.api_key;
|
||||
this.container.querySelector("#apiKey").value =
|
||||
json.api_key;
|
||||
// infoDialog.show();
|
||||
clearInterval(this.poll);
|
||||
clearTimeout(this.timeout);
|
||||
// Refresh dialog
|
||||
const a = await confirmDialog.confirm(
|
||||
"Authenticated",
|
||||
`<div>You will be able to upload workflow to <button style="font-size: 18px; width: fit;">${json.name}</button></div>`,
|
||||
`<div>You will be able to upload workflow to <button style="font-size: 18px; width: fit;">${json.name}</button></div>`
|
||||
);
|
||||
configDialog.show();
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user