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
Prev Previous commit
Next Next commit
Section line cleanup, fix hover hollow size
  • Loading branch information
@AustinMroz
AustinMroz committed Dec 13, 2025
commit d98cc99b022c697cd9c555b341d92899b95b4f30
18 changes: 9 additions & 9 deletions src/lib/litegraph/src/node/NodeSlot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export interface IDrawOptions {
/** Shared base class for {@link LGraphNode} input and output slots. */
export abstract class NodeSlot extends SlotBase implements INodeSlot {
pos?: Point
rotation = -Math.PI / 2
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.

🧹 Nitpick | 🔵 Trivial

Document the public rotation property.

The rotation property is public and affects arc rendering orientation, but lacks documentation explaining its purpose, expected values, or usage. Consider adding a JSDoc comment to clarify this API surface.

Example:

+  /** Rotation offset (in radians) for multi-type arc segments. @default -Math.PI / 2 */
   rotation = -Math.PI / 2

Based on coding guidelines, minimize the surface area of each module and ensure public APIs are well-documented.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
rotation = -Math.PI / 2
/** Rotation offset (in radians) for multi-type arc segments. @default -Math.PI / 2 */
rotation = -Math.PI / 2
🤖 Prompt for AI Agents 
In src/lib/litegraph/src/node/NodeSlot.ts around line 36, the public rotation
property lacks documentation; add a concise JSDoc immediately above the
declaration that states it's a public numeric rotation in radians applied to
arc/slot rendering, show the default value (-Math.PI/2), note that values are in
radians and can be any real number (wraps modulo 2π), describe the effect
(rotates the arc orientation relative to the node coordinate system), and
include tags like @public, @type {number}, and @default so consumers understand
usage and expected units.


/** The offset from the parent node to the centre point of this slot. */
get #centreOffset(): Readonly<Point> {
Expand Down Expand Up @@ -167,11 +168,10 @@ export abstract class NodeSlot extends SlotBase implements INodeSlot {
if (slot_shape === SlotShape.HollowCircle) {
const path = new Path2D()
path.arc(pos[0], pos[1], 10, 0, Math.PI * 2)
path.arc(pos[0], pos[1], 2, 0, Math.PI * 2)
path.arc(pos[0], pos[1], highlight ? 2.5 : 1.5, 0, Math.PI * 2)
ctx.clip(path, 'evenodd')
}
let radius: number
radius = highlight ? 5 : 4
const radius = highlight ? 5 : 4
const typesSet = new Set(
`${this.type}`
.split(',')
Expand All @@ -184,7 +184,6 @@ export abstract class NodeSlot extends SlotBase implements INodeSlot {
const types = [...typesSet].slice(0, 3)
if (types.length > 1) {
doFill = false
radius += 2
const arcLen = (Math.PI * 2) / types.length
types.forEach((type, idx) => {
ctx.moveTo(pos[0], pos[1])
Expand All @@ -193,19 +192,20 @@ export abstract class NodeSlot extends SlotBase implements INodeSlot {
pos[0],
pos[1],
radius,
arcLen * idx - Math.PI / 2,
Math.PI * 1.5
arcLen * idx + this.rotation,
Math.PI * 2 + this.rotation
)
ctx.fill()
ctx.beginPath()
})
//add stroke dividers
ctx.save()
ctx.lineWidth = 1
ctx.strokeStyle = 'black'
ctx.lineWidth = 0.5
types.forEach((_, idx) => {
ctx.moveTo(pos[0], pos[1])
const xOffset = Math.cos(arcLen * idx - Math.PI / 2) * radius
const yOffset = Math.sin(arcLen * idx - Math.PI / 2) * radius
const xOffset = Math.cos(arcLen * idx + this.rotation) * radius
const yOffset = Math.sin(arcLen * idx + this.rotation) * radius
ctx.lineTo(pos[0] + xOffset, pos[1] + yOffset)
})
ctx.stroke()
Expand Down