diff --git a/src/lib/litegraph/src/LGraph.test.ts b/src/lib/litegraph/src/LGraph.test.ts index 448e0240724..fd355542af0 100644 --- a/src/lib/litegraph/src/LGraph.test.ts +++ b/src/lib/litegraph/src/LGraph.test.ts @@ -7,7 +7,8 @@ import { LGraph, LGraphNode, LiteGraph, - LLink + LLink, + Reroute } from '@/lib/litegraph/src/litegraph' import type { SerialisableGraph } from '@/lib/litegraph/src/types/serialisation' import type { UUID } from '@/lib/litegraph/src/utils/uuid' @@ -17,6 +18,7 @@ import { createTestSubgraphData, createTestSubgraphNode } from './subgraph/__fixtures__/subgraphHelpers' +import { subgraphTest } from './subgraph/__fixtures__/subgraphFixtures' import { duplicateLinksRoot, @@ -966,4 +968,40 @@ describe('deduplicateSubgraphNodeIds (via configure)', () => { expect(nodeIdSet(graph, SUBGRAPH_A)).toEqual(new Set([10, 11, 12])) expect(nodeIdSet(graph, SUBGRAPH_B)).toEqual(new Set([20, 21, 22])) }) + subgraphTest('should snap slots to same y-level', ({ emptySubgraph }) => { + const node = new LGraphNode('testname') + node.addInput('test', 'IMAGE') + emptySubgraph.add(node) + + emptySubgraph.inputNode.pos = [0, 0] + //Reroute needs offset of ~20y to align with first slot + const reroute = new Reroute(1, emptySubgraph, [0, 20]) + + node.snapToGrid(10) + reroute.snapToGrid(10) + emptySubgraph.inputNode.snapToGrid(10) + + node.arrange() + emptySubgraph.inputNode.arrange() + + const yPos = node.getInputPos(0)[1] + expect(reroute.pos[1]).toBe(yPos) + expect(emptySubgraph.inputNode.emptySlot.pos[1]).toBe(yPos) + + //Assign non-equal positions and repeat + emptySubgraph.inputNode.pos = [0, 43] + node.pos = [0, 50] + reroute.pos = [0, 63] + + node.snapToGrid(10) + reroute.snapToGrid(10) + emptySubgraph.inputNode.snapToGrid(10) + + node.arrange() + emptySubgraph.inputNode.arrange() + + const yPos2 = node.getInputPos(0)[1] + expect(reroute.pos[1]).toBe(yPos2) + expect(emptySubgraph.inputNode.emptySlot.pos[1]).toBe(yPos2) + }) }) diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts index 6731781852c..06ace5566e4 100644 --- a/src/lib/litegraph/src/LGraphCanvas.ts +++ b/src/lib/litegraph/src/LGraphCanvas.ts @@ -5882,7 +5882,8 @@ export class LGraphCanvas implements CustomEventDispatcher drawSnapGuide( ctx: CanvasRenderingContext2D, item: Positionable, - shape = RenderShape.ROUND + shape = RenderShape.ROUND, + { offsetToSlot }: { offsetToSlot?: boolean } = {} ) { const snapGuide = temp snapGuide.set(item.boundingRect) @@ -5890,7 +5891,10 @@ export class LGraphCanvas implements CustomEventDispatcher // Not all items have pos equal to top-left of bounds const { pos } = item const offsetX = pos[0] - snapGuide[0] - const offsetY = pos[1] - snapGuide[1] + const offsetY = + pos[1] - + snapGuide[1] - + (offsetToSlot ? LiteGraph.NODE_SLOT_HEIGHT * 0.7 : 0) // Normalise boundingRect to pos to snap snapGuide[0] += offsetX @@ -6067,7 +6071,9 @@ export class LGraphCanvas implements CustomEventDispatcher this.isDragging && this.selectedItems.has(reroute) ) { - this.drawSnapGuide(ctx, reroute, RenderShape.CIRCLE) + this.drawSnapGuide(ctx, reroute, RenderShape.CIRCLE, { + offsetToSlot: true + }) } reroute.draw(ctx, this._pattern) diff --git a/src/lib/litegraph/src/Reroute.ts b/src/lib/litegraph/src/Reroute.ts index 6436df53223..74cdbd111d9 100644 --- a/src/lib/litegraph/src/Reroute.ts +++ b/src/lib/litegraph/src/Reroute.ts @@ -16,6 +16,7 @@ import type { ReadOnlyRect, ReadonlyLinkNetwork } from './interfaces' +import { LiteGraph } from './litegraph' import { distance, isPointInRect } from './measure' import type { Serialisable, SerialisableReroute } from './types/serialisation' @@ -428,9 +429,10 @@ export class Reroute snapToGrid(snapTo: number): boolean { if (!snapTo) return false + const offsetY = LiteGraph.NODE_SLOT_HEIGHT * 0.7 const { pos } = this pos[0] = snapTo * Math.round(pos[0] / snapTo) - pos[1] = snapTo * Math.round(pos[1] / snapTo) + pos[1] = snapTo * Math.round((pos[1] - offsetY) / snapTo) + offsetY return true } diff --git a/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts b/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts index 9c9690a8f04..af90526810c 100644 --- a/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts +++ b/src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts @@ -36,7 +36,7 @@ export abstract class SubgraphIONodeBase< { static margin = 10 static minWidth = 100 - static roundedRadius = 10 + static roundedRadius = 14 private readonly _boundingRect: Rectangle = new Rectangle()