diff --git a/src/lib/litegraph/public/css/litegraph.css b/src/lib/litegraph/public/css/litegraph.css index ec23023eb..0dc83dca9 100644 --- a/src/lib/litegraph/public/css/litegraph.css +++ b/src/lib/litegraph/public/css/litegraph.css @@ -495,6 +495,16 @@ padding-left: 12px; } +.graphmenu-entry.danger, +.litemenu-entry.danger { + color: var(--error-text) !important; +} + +.litegraph .litemenu-entry.danger:hover:not(.disabled) { + color: var(--error-text) !important; + opacity: 0.8; +} + .graphmenu-entry.disabled { opacity: 0.3; } diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts index 4b8e29da5..4a4b76243 100644 --- a/src/lib/litegraph/src/LGraphCanvas.ts +++ b/src/lib/litegraph/src/LGraphCanvas.ts @@ -8244,7 +8244,9 @@ export class LGraphCanvas if (_slot.removable) { menu_info.push(null) menu_info.push( - _slot.locked ? 'Cannot remove' : { content: 'Remove Slot', slot } + _slot.locked + ? 'Cannot remove' + : { content: 'Remove Slot', slot, className: 'danger' } ) } diff --git a/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts b/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts index 241dbbdd1..6ac81ac57 100644 --- a/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts +++ b/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts @@ -191,7 +191,7 @@ export abstract class SubgraphIONodeBase< * @param event The event that triggered the context menu. */ protected showSlotContextMenu(slot: TSlot, event: CanvasPointerEvent): void { - const options: IContextMenuValue[] = this.#getSlotMenuOptions(slot) + const options: (IContextMenuValue | null)[] = this.#getSlotMenuOptions(slot) if (!(options.length > 0)) return new LiteGraph.ContextMenu(options, { @@ -208,20 +208,26 @@ export abstract class SubgraphIONodeBase< * @param slot The slot to get the context menu options for. * @returns The context menu options. */ - #getSlotMenuOptions(slot: TSlot): IContextMenuValue[] { - const options: IContextMenuValue[] = [] + #getSlotMenuOptions(slot: TSlot): (IContextMenuValue | null)[] { + const options: (IContextMenuValue | null)[] = [] // Disconnect option if slot has connections if (slot !== this.emptySlot && slot.linkIds.length > 0) { options.push({ content: 'Disconnect Links', value: 'disconnect' }) } - // Remove / rename slot option (except for the empty slot) + // Rename slot option (except for the empty slot) if (slot !== this.emptySlot) { - options.push( - { content: 'Remove Slot', value: 'remove' }, - { content: 'Rename Slot', value: 'rename' } - ) + options.push({ content: 'Rename Slot', value: 'rename' }) + } + + if (slot !== this.emptySlot) { + options.push(null) // separator + options.push({ + content: 'Remove Slot', + value: 'remove', + className: 'danger' + }) } return options