feat: add Arrange action to multi-select toolbox

[shrimbly]

Summary

Adds an Arrange popover to the multi-select toolbox that repositions selected nodes into vertical, horizontal, or grid layouts, with a follow-up slider to tune the spacing.

Changes

• What: New ArrangeButton placed between the color picker and frame icons. Three layouts (vertical, horizontal, grid) sort selected nodes by current position and lay them out from the smallest-x+y anchor with a 12-unit gap. Visual bounds account for LiteGraph.NODE_TITLE_HEIGHT so titles don't overlap stacked bodies. After picking a layout, the popover swaps to a 0–48 spacing slider — drag previews live (rAF-throttled, no undo capture), release commits one undo entry. Closing the popover ends the session.
• Breaking: none
• Dependencies: none

Review Focus

• useArrangeNodes.computeArrangement — pure layout math separated from side effects; covered by 8 unit tests including the title-height handling and TitleMode.NO_TITLE case.
• useArrangeSession — owns the slider's state machine. rAF-throttled previewGap collapses rapid drag events into one frame; commitGap cancels any pending preview before capturing undo. Covered by 5 unit tests.
• Position mutations go through useLayoutMutations().batchMoveNodes (single batched layout-store transaction) followed by changeTracker.captureCanvasState() for undo — same pattern as drag and other selection-toolbox actions.
• Anchor selection uses smallest pos.x + pos.y rather than min-x or min-y alone, to keep the layout origin stable across re-runs (slider drags).

┆Issue is synchronized with this Notion page by Unito

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 617e0762-8a41-4616-9abb-63ee046f7edd

📥 Commits

Reviewing files that changed from the base of the PR and between 219a574 and 24abe11.

📒 Files selected for processing (7)

• src/components/graph/SelectionToolbox.vue
• src/components/graph/selectionToolbox/ArrangeButton.vue
• src/composables/graph/useArrangeNodes.test.ts
• src/composables/graph/useArrangeNodes.ts
• src/composables/graph/useArrangeSession.test.ts
• src/composables/graph/useArrangeSession.ts
• src/locales/en/main.json

---

📝 Walkthrough

Walkthrough

This PR adds a multi-layout node arrangement feature to the ComfyUI graph editor. Users can select multiple nodes and arrange them vertically, horizontally, or in a grid pattern with adjustable spacing. The system includes interactive gap previews via a popover slider, automatic undo/canvas state tracking, and full i18n support.

Changes

Node Arrangement

Layer / File(s)	Summary
Layout Contracts src/composables/graph/useArrangeNodes.ts	Exports ArrangeLayout type union (vertical, horizontal, grid) and gap constants (DEFAULT_ARRANGE_GAP = 12, MIN_ARRANGE_GAP = 0, MAX_ARRANGE_GAP = 48).
Core Algorithms src/composables/graph/useArrangeNodes.ts	Implements computeArrangement() dispatcher and three layout routines: vertical (left-align and downward stack), horizontal (top-align and rightward), grid (near-square 2D layout). Selects anchor node by smallest x + y, computes bounding boxes with title-height adjustment, and returns position updates. useArrangeNodes() composable applies updates via batchMoveNodes(), marks canvas dirty, and optionally captures undo state.
Arrangement Tests src/composables/graph/useArrangeNodes.test.ts	Validates all three layout modes with title-height handling, anchor selection by x + y minimization, heterogeneous node dimensions, and edge cases (empty/single-node).
Session Management src/composables/graph/useArrangeSession.ts	Manages arrangement lifecycle: start() applies layout with undo, previewGap() throttles updates via requestAnimationFrame without undo, commitGap() applies gap immediately with undo, reset() clears state. Returns reactive activeLayout and gap plus control functions.
Session Tests src/composables/graph/useArrangeSession.test.ts	Verifies session state transitions, animation-frame throttling for previews (only last call executes), immediate commit behavior, and reset cleanup. Mocks useArrangeNodes and stubs RAF/CAF.
ArrangeButton UI src/components/graph/selectionToolbox/ArrangeButton.vue	Popover button component: shows layout buttons when no layout is active, displays gap slider when active. Wires slider to previewGap() on update and commitGap() on commit. Calls reset() on popover close. Uses useI18n() for all labels.
Toolbox Integration src/components/graph/SelectionToolbox.vue	Imports ArrangeButton and conditionally renders it (via showArrange computed based on hasMultipleSelection). Includes arrange in showAnyPrimaryActions for divider visibility.
Localization src/locales/en/main.json	Adds arrange-related keys: arrange, arrangeVertically, arrangeHorizontally, arrangeAsGrid, arrangeSpacing.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Nodes align in neat formation,
Vertical, horizontal, grid decoration,
Spacing slides with subtle grace,
Each arrangement finds its place!

🚥 Pre-merge checks | ✅ 6 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (6 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically summarizes the main change: adding an Arrange action feature to the multi-select toolbox.
Description check	✅ Passed	The PR description fully covers all required template sections: Summary explains what changed and why, Changes details the what/breaking/dependencies, Review Focus highlights critical design decisions.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
End-To-End Regression Coverage For Fixes	✅ Passed	PR title ("feat: add Arrange action...") and commit subject ("feat: add Arrange action...") use feature language, not bug-fix language (fix/fixed/fixes/fixing/bugfix/hotfix). Condition 1 satisfied.
Adr Compliance For Entity/Litegraph Changes	✅ Passed	No changed files are under src/lib/litegraph/, src/ecs/, or core graph entity files. ADR compliance check does not apply to this PR.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎭 Playwright: ⏳ Running...

[github-actions]

🎨 Storybook: Building...