diff --git a/src/lib/litegraph/src/LGraphNode.ts b/src/lib/litegraph/src/LGraphNode.ts index 5e40c28fca..24f3301486 100644 --- a/src/lib/litegraph/src/LGraphNode.ts +++ b/src/lib/litegraph/src/LGraphNode.ts @@ -151,7 +151,7 @@ interface DrawTitleTextOptions extends DrawTitleOptions { default_title_color: string } -interface DrawTitleBoxOptions extends DrawTitleOptions { +export interface DrawTitleBoxOptions extends DrawTitleOptions { box_size?: number } diff --git a/src/lib/litegraph/src/subgraph/SubgraphNode.ts b/src/lib/litegraph/src/subgraph/SubgraphNode.ts index 216448f991..81653c1b4b 100644 --- a/src/lib/litegraph/src/subgraph/SubgraphNode.ts +++ b/src/lib/litegraph/src/subgraph/SubgraphNode.ts @@ -2,6 +2,7 @@ import type { BaseLGraph, LGraph } from '@/lib/litegraph/src/LGraph' import type { LGraphButton } from '@/lib/litegraph/src/LGraphButton' import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas' import { LGraphNode } from '@/lib/litegraph/src/LGraphNode' +import type { DrawTitleBoxOptions } from '@/lib/litegraph/src/LGraphNode' import { LLink } from '@/lib/litegraph/src/LLink' import type { ResolvedConnection } from '@/lib/litegraph/src/LLink' import { RecursionError } from '@/lib/litegraph/src/infrastructure/RecursionError' @@ -9,6 +10,7 @@ import type { ISubgraphInput, IWidgetLocator } from '@/lib/litegraph/src/interfaces' +import { LiteGraph } from '@/lib/litegraph/src/litegraph' import type { INodeInputSlot, ISlotType, @@ -32,6 +34,10 @@ import { ExecutableNodeDTO } from './ExecutableNodeDTO' import type { ExecutableLGraphNode, ExecutionId } from './ExecutableNodeDTO' import type { SubgraphInput } from './SubgraphInput' +const workflowSvg = new Image() +workflowSvg.src = + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-width='1.3' d='M9.18613 3.09999H6.81377M9.18613 12.9H7.55288c-3.08678 0-5.35171-2.99581-4.60305-6.08843l.3054-1.26158M14.7486 2.1721l-.5931 2.45c-.132.54533-.6065.92789-1.1508.92789h-2.2993c-.77173 0-1.33797-.74895-1.1508-1.5221l.5931-2.45c.132-.54533.6065-.9279 1.1508-.9279h2.2993c.7717 0 1.3379.74896 1.1508 1.52211Zm-8.3033 0-.59309 2.45c-.13201.54533-.60646.92789-1.15076.92789H2.4021c-.7717 0-1.33793-.74895-1.15077-1.5221l.59309-2.45c.13201-.54533.60647-.9279 1.15077-.9279h2.29935c.77169 0 1.33792.74896 1.15076 1.52211Zm8.3033 9.8-.5931 2.45c-.132.5453-.6065.9279-1.1508.9279h-2.2993c-.77173 0-1.33797-.749-1.1508-1.5221l.5931-2.45c.132-.5453.6065-.9279 1.1508-.9279h2.2993c.7717 0 1.3379.7489 1.1508 1.5221Z'/%3E%3C/svg%3E %3C/svg%3E" + /** * An instance of a {@link Subgraph}, displayed as a node on the containing (parent) graph. */ @@ -555,6 +561,31 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph { } } } + override drawTitleBox( + ctx: CanvasRenderingContext2D, + { + scale, + low_quality = false, + title_height = LiteGraph.NODE_TITLE_HEIGHT, + box_size = 10 + }: DrawTitleBoxOptions + ): void { + if (this.onDrawTitleBox) { + this.onDrawTitleBox(ctx, title_height, this.renderingSize, scale) + return + } + ctx.save() + ctx.fillStyle = '#3b82f6' + ctx.beginPath() + ctx.roundRect(6, -24.5, 22, 20, 5) + ctx.fill() + if (!low_quality) { + ctx.translate(25, 23) + ctx.scale(-1.5, 1.5) + ctx.drawImage(workflowSvg, 0, -title_height, box_size, box_size) + } + ctx.restore() + } /** * Synchronizes widget values from this SubgraphNode instance to the diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue index 231aad3ffe..9491df0b99 100644 --- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue +++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue @@ -37,6 +37,7 @@ +
{ this.#setInitialSize() this.serialize_widgets = true void extensionService.invokeExtensionsAsync('nodeCreated', this) - this.badges.push( - new LGraphBadge({ - text: '', - iconOptions: { - unicode: '\ue96e', - fontFamily: 'PrimeIcons', - color: '#ffffff', - fontSize: 12 - }, - fgColor: '#ffffff', - bgColor: '#3b82f6' - }) - ) } /**