Improvement for finding nodes with missing tags
This commit is contained in:
space-nuko
@@ -25,7 +25,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
|
||||
activeErrors?: ComfyGraphErrors = null;
|
||||
blinkError: ComfyGraphErrorLocation | null = null;
|
||||
blinkErrorTime: number = 0;
|
||||
highlightNodeAndInput: [LGraphNode, number] | null = null;
|
||||
highlightNodeAndInput: [LGraphNode, number | null] | null = null;
|
||||
|
||||
get comfyGraph(): ComfyGraph | null {
|
||||
return this.graph as ComfyGraph;
|
||||
@@ -133,6 +133,15 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
|
||||
else if (isHighlightedNode) {
|
||||
color = "cyan";
|
||||
thickness = 2
|
||||
|
||||
// Blink node if no input highlighted
|
||||
if (this.highlightNodeAndInput[1] == null) {
|
||||
if (this.blinkErrorTime > 0) {
|
||||
if ((Math.floor(this.blinkErrorTime / 2)) % 2 === 0) {
|
||||
color = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (ss.currentHoveredNodes.has(node.id)) {
|
||||
color = "lightblue";
|
||||
@@ -172,9 +181,11 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
|
||||
}
|
||||
if (draw) {
|
||||
const [node, inputSlot] = this.highlightNodeAndInput;
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeStyle = color;
|
||||
this.highlightNodeInput(node, inputSlot, ctx);
|
||||
if (inputSlot != null) {
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeStyle = color;
|
||||
this.highlightNodeInput(node, inputSlot, ctx);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -733,7 +744,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
|
||||
this.selectNode(node);
|
||||
}
|
||||
|
||||
jumpToNodeAndInput(node: LGraphNode, slotIndex: number) {
|
||||
jumpToNodeAndInput(node: LGraphNode, slotIndex: number | null) {
|
||||
this.jumpToNode(node);
|
||||
this.highlightNodeAndInput = [node, slotIndex];
|
||||
this.blinkErrorTime = 20;
|
||||
|
||||
@@ -5,15 +5,35 @@
|
||||
import uiState from '$lib/stores/uiState';
|
||||
import type { ComfyNodeDefInputType } from "$lib/ComfyNodeDef";
|
||||
import type { INodeInputSlot, LGraphNode, LLink, Subgraph } from "@litegraph-ts/core";
|
||||
import { UpstreamNodeLocator, getUpstreamLink } from "./ComfyPromptSerializer";
|
||||
import { UpstreamNodeLocator, getUpstreamLink, nodeHasTag } from "./ComfyPromptSerializer";
|
||||
import JsonView from "./JsonView.svelte";
|
||||
|
||||
export let app: ComfyApp;
|
||||
export let errors: ComfyGraphErrors;
|
||||
|
||||
let missingTag = null;
|
||||
let nodeToJumpTo = null;
|
||||
let inputSlotToHighlight = null;
|
||||
let _errors = null
|
||||
|
||||
$: if (_errors != errors) {
|
||||
_errors = errors;
|
||||
if (errors.errors[0]) {
|
||||
jumpToError(errors.errors[0])
|
||||
}
|
||||
}
|
||||
|
||||
function closeList() {
|
||||
app.lCanvas.clearErrors();
|
||||
$uiState.activeError = null;
|
||||
clearState()
|
||||
}
|
||||
|
||||
function clearState() {
|
||||
_errors = null;
|
||||
missingTag = null;
|
||||
nodeToJumpTo = null;
|
||||
inputSlotToHighlight = null;
|
||||
}
|
||||
|
||||
function getParentNode(error: ComfyGraphErrorLocation): Subgraph | null {
|
||||
@@ -24,11 +44,19 @@
|
||||
return node.graph._subgraph_node
|
||||
}
|
||||
|
||||
function canJumpToDisconnectedInput(error: ComfyGraphErrorLocation): boolean {
|
||||
return error.errorType === ComfyNodeErrorType.RequiredInputMissing && error.input != null;
|
||||
function jumpToFoundNode() {
|
||||
if (nodeToJumpTo == null) {
|
||||
return
|
||||
}
|
||||
|
||||
app.lCanvas.jumpToNodeAndInput(nodeToJumpTo, inputSlotToHighlight);
|
||||
}
|
||||
|
||||
function jumpToDisconnectedInput(error: ComfyGraphErrorLocation) {
|
||||
function detectDisconnected(error: ComfyGraphErrorLocation) {
|
||||
missingTag = null;
|
||||
nodeToJumpTo = null;
|
||||
inputSlotToHighlight = null;
|
||||
|
||||
if (error.errorType !== ComfyNodeErrorType.RequiredInputMissing || error.input == null) {
|
||||
return
|
||||
}
|
||||
@@ -44,19 +72,32 @@
|
||||
const tag: string | null = error.queueEntry.extraData.extra_pnginfo.comfyBoxPrompt.subgraphs[0];
|
||||
|
||||
const test = (node: LGraphNode, currentLink: LLink) => {
|
||||
if (!nodeHasTag(node, tag, true))
|
||||
return true;
|
||||
|
||||
const [nextGraph, nextLink, nextInputSlot, nextNode] = getUpstreamLink(node, currentLink)
|
||||
return nextLink == null;
|
||||
};
|
||||
const nodeLocator = new UpstreamNodeLocator(test)
|
||||
const [_, foundLink, foundInputSlot, foundPrevNode] = nodeLocator.locateUpstream(node, inputIndex, tag);
|
||||
const [foundNode, foundLink, foundInputSlot, foundPrevNode] = nodeLocator.locateUpstream(node, inputIndex, null);
|
||||
|
||||
if (foundInputSlot != null && foundPrevNode != null) {
|
||||
app.lCanvas.jumpToNodeAndInput(foundPrevNode, foundInputSlot);
|
||||
if (!nodeHasTag(foundNode, tag, true)) {
|
||||
nodeToJumpTo = foundNode
|
||||
missingTag = tag;
|
||||
inputSlotToHighlight = null;
|
||||
}
|
||||
else {
|
||||
nodeToJumpTo = foundPrevNode;
|
||||
inputSlotToHighlight = foundInputSlot;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function jumpToError(error: ComfyGraphErrorLocation) {
|
||||
app.lCanvas.jumpToError(error);
|
||||
|
||||
detectDisconnected(error);
|
||||
}
|
||||
|
||||
function getInputTypeName(type: ComfyNodeDefInputType) {
|
||||
@@ -91,26 +132,37 @@
|
||||
<div class="error-details">
|
||||
<button class="jump-to-error" class:execution-error={isExecutionError} on:click={() => jumpToError(error)}><span>⮎</span></button>
|
||||
<div class="error-details-wrapper">
|
||||
<span class="error-message" class:execution-error={isExecutionError}>{error.message}</span>
|
||||
{#if missingTag && nodeToJumpTo}
|
||||
<div class="error-input">
|
||||
<div><span class="error-message">Node "{nodeToJumpTo.title}" was missing tag used in workflow:</span><span style:padding-left="0.2rem"><b>{missingTag}</b></span></div>
|
||||
<div>Tags on node: <b>[{(nodeToJumpTo?.attrs?.tags || []).join(", ")}]</b></div>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="error-message" class:execution-error={isExecutionError}>{error.message}</span>
|
||||
{/if}
|
||||
{#if error.exceptionType}
|
||||
<span>({error.exceptionType})</span>
|
||||
{/if}
|
||||
{#if error.exceptionMessage && !isExecutionError}
|
||||
<div style:text-decoration="underline">{error.exceptionMessage}</div>
|
||||
{/if}
|
||||
{#if error.input}
|
||||
{#if nodeToJumpTo != null}
|
||||
<div style:display="flex" style:flex-direction="row">
|
||||
<button class="jump-to-error locate" on:click={jumpToFoundNode}><span>⮎</span></button>
|
||||
{#if missingTag}
|
||||
<span>Jump to node: {nodeToJumpTo.title}</span>
|
||||
{:else}
|
||||
<span>Find disconnected input</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if error.input && !missingTag}
|
||||
<div class="error-input">
|
||||
<span>Input: <b>{error.input.name}</b></span>
|
||||
{#if error.input.config}
|
||||
<span>({getInputTypeName(error.input.config[0])})</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if canJumpToDisconnectedInput(error)}
|
||||
<div style:display="flex" style:flex-direction="row">
|
||||
<button class="jump-to-error locate" on:click={() => jumpToDisconnectedInput(error)}><span>⮎</span></button>
|
||||
<span>Find disconnected input</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if error.input.receivedValue}
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user