Skip to content

Support display of multitype slots #7457

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jtydhr88 merged 7 commits into from
Dec 16, 2025
Merged

Support display of multitype slots #7457

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
04cde3f
POC for visual display of multi-type slots
AustinMroz Dec 9, 2025
bf8d743
Better handling of outline/hollow
AustinMroz Dec 10, 2025
d98cc99
Section line cleanup, fix hover hollow size
AustinMroz Dec 10, 2025
da8f01c
Vue support
AustinMroz Dec 13, 2025
cf27bde
Use svg for vue mode
AustinMroz Dec 16, 2025
f0f5416
Nit
AustinMroz Dec 16, 2025
da29659
Remove WIP svg
AustinMroz Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
POC for visual display of multi-type slots
  • Loading branch information
@AustinMroz
AustinMroz committed Dec 13, 2025
commit 04cde3fdf37f953d9b0d44cd1fa8389ecdf022fd
31 changes: 30 additions & 1 deletion src/lib/litegraph/src/node/NodeSlot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,8 +173,37 @@ export abstract class NodeSlot extends SlotBase implements INodeSlot {
} else {
// Normal circle
radius = highlight ? 5 : 4
doStroke = false
}
const typesSet = new Set(
`${this.type}`
.split(',')
.map(
this.isConnected
? (type) => colorContext.getConnectedColor(type)
: (type) => colorContext.getDisconnectedColor(type)
)
)
const types = [...typesSet].slice(0, 3)
Comment on lines +176 to +185
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Truncation of types beyond 3 is silent.

The .slice(0, 3) operation silently drops types beyond the first three with no indication to the user. While limiting visual complexity is reasonable, consider logging a warning or adding a visual indicator when types are truncated.

🤖 Prompt for AI Agents 
In src/lib/litegraph/src/node/NodeSlot.ts around lines 175 to 184, the types
array is silently truncated with .slice(0, 3); detect when the computed typesSet
contains more than three entries and surface that fact instead of dropping them
silently — e.g., compute the full typesSet first, if its size > 3 set a
truncation indicator (like this.truncatedTypeCount or this.hasTruncatedTypes)
and either log a single warning via the existing logging mechanism or add an
explicit visual marker to the returned data (such as appending a "...+N"
indicator) so the UI can show there are more types; ensure you still pass the
first three types to existing consumers but also expose the truncation metadata
for display/debugging.

if (types.length < 2) {
ctx.arc(pos[0], pos[1], radius, 0, Math.PI * 2)
} else {
const arcLen = (Math.PI * 2) / types.length
types.forEach((type, idx) => {
ctx.moveTo(pos[0], pos[1])
ctx.fillStyle = type
ctx.arc(
pos[0],
pos[1],
radius,
arcLen * idx - Math.PI / 2,
Math.PI * 1.5
)
if (idx === types.length - 1) return
if (doFill) ctx.fill()
ctx.beginPath()
})
}
ctx.arc(pos[0], pos[1], radius, 0, Math.PI * 2)
}
}

Expand Down