fix(diagram): fix manual layout alignment tools not working by davydkov · Pull Request #2791 · likec4/likec4

davydkov · 2026-03-20T18:02:32Z

Summary

Fix manual layout alignment tools (Align Left, Right, Center, Top, Middle, Bottom) that stopped working
Root cause: updateXYFlow() was resetting programmatically-set rect positions from stale XYFlow state before applying them
Extract syncFromXYFlow() so position sync only happens in drag-flow paths, not when called from layoutAlign()

Fixes #2771

Test plan

Unit tests added for createLayoutConstraints verifying programmatic positions are preserved
All existing diagram tests pass (90/90)
Manual: select 2+ nodes, use each alignment tool — nodes should move to aligned positions
Manual: drag nodes to verify parent/child constraints still work

🤖 Generated with Claude Code

Summary by CodeRabbit

Bug Fixes
- Fixed manual layout alignment tools (Align Left, Right, Center, Top, Middle, Bottom) that were not functioning properly.

Extract syncFromXYFlow() from updateXYFlow() so that programmatic alignment changes are not overwritten by stale XYFlow positions. The position sync is now only called from drag-flow paths (onMove, flushPending), preserving aligned positions set by layoutAlign(). Fixes #2771 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

changeset-bot · 2026-03-20T18:02:39Z

🦋 Changeset detected

Latest commit: 7e0655c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 20 packages

Name	Type
@likec4/diagram	Patch
@likec4/playground	Patch
likec4	Patch
@likec4/react	Patch
@likec4/vscode-preview	Patch
likec4-vscode	Patch
@likec4/docs-astro	Patch
@likec4/style-preset	Patch
@likec4/styles	Patch
@likec4/config	Patch
@likec4/core	Patch
@likec4/generators	Patch
@likec4/language-server	Patch
@likec4/language-services	Patch
@likec4/layouts	Patch
@likec4/leanix-bridge	Patch
@likec4/log	Patch
@likec4/mcp	Patch
@likec4/tsconfig	Patch
@likec4/vite-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-03-20T18:09:36Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai · 2026-03-20T18:10:55Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: bc8b0437-88a8-4d98-a6e5-7178c37e51e4

📥 Commits

Reviewing files that changed from the base of the PR and between ed180a8 and 7e0655c.

📒 Files selected for processing (1)

.claude/launch.json

✅ Files skipped from review due to trivial changes (1)

.claude/launch.json

📝 Walkthrough

Walkthrough

This PR fixes manual layout alignment tools (Align Left/Right/Center/Top/Middle/Bottom) by refactoring state synchronization in the layout constraints module. A dedicated syncFromXYFlow() function now updates node positions before constraint application, called at strategic points during drag operations. A changeset entry documents the patch, and a development configuration file is added.

Changes

Cohort / File(s)	Summary
Bug Fix `packages/diagram/src/likec4diagram/useLayoutConstraints.ts`	Extracted state-reading logic into separate `syncFromXYFlow()` function that updates node positions from XYFlow state. Reordered execution so positions sync before constraint application in both `flushPending()` and `onMove()` RAF callback, ensuring rects stay current during drag operations.
Changesets `\.changeset/fix-manual-layout-alignment.md`	Added new patch changelog entry for `@likec4/diagram` documenting the fix for manual layout alignment tools issue.
Development Configuration `\.claude/launch.json`	Added new editor launch configuration with three Node-based run profiles (`likec4-dev`, `docs`, `playground`) specifying package directories, runtime arguments, and listening ports.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 Layout tools were lost in the flow,
But now positions sync just so,
Before constraints take their place,
Alignment finds its proper space. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

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

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: fixing manual layout alignment tools, which is the primary objective of the PR.
Description check	✅ Passed	The description includes clear summary, root cause analysis, solution approach, test plan, and references the fixed issue `#2771`.
Linked Issues check	✅ Passed	The PR successfully addresses issue `#2771` by restoring manual layout alignment tools through refactoring the constraint synchronization logic.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the alignment tools: constraint logic refactoring, changeset entry, and launch configuration for development.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/manual-layout-alignment-tools

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

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

coderabbitai

🧹 Nitpick comments (1)

packages/diagram/src/likec4diagram/useLayoutConstraints.spec.ts (1)

28-32: Consider using a typed placeholder instead of as any.

Per coding guidelines, any should be avoided. For test mocks where the actual data isn't used, you could define a minimal type:

-    data: {} as any,
+    data: {} as Record<string, never>,

This maintains type safety while still serving as a placeholder.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/diagram/src/likec4diagram/useLayoutConstraints.spec.ts` around lines
28 - 32, Replace the unsafe "data: {} as any" test placeholder with a properly
typed minimal stub: declare a small interface/type or use an existing type for
the node/element data and provide a minimal object that satisfies it (e.g.,
const minimalElementData: Partial<YourElementType> = {...} and then use data:
minimalElementData as YourElementType). Update the test in
useLayoutConstraints.spec.ts to reference that typed stub instead of `any`,
ensuring the object includes any required fields used by the code under test and
keeping the rest minimal.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/diagram/src/likec4diagram/useLayoutConstraints.spec.ts`:
- Around line 28-32: Replace the unsafe "data: {} as any" test placeholder with
a properly typed minimal stub: declare a small interface/type or use an existing
type for the node/element data and provide a minimal object that satisfies it
(e.g., const minimalElementData: Partial<YourElementType> = {...} and then use
data: minimalElementData as YourElementType). Update the test in
useLayoutConstraints.spec.ts to reference that typed stub instead of `any`,
ensuring the object includes any required fields used by the code under test and
keeping the rest minimal.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 720c29ef-4e9e-49cc-ab59-609bf8e0e963

📥 Commits

Reviewing files that changed from the base of the PR and between 8ab9fda and ed180a8.

📒 Files selected for processing (3)

.changeset/fix-manual-layout-alignment.md
packages/diagram/src/likec4diagram/useLayoutConstraints.spec.ts
packages/diagram/src/likec4diagram/useLayoutConstraints.ts

coderabbitai · 2026-03-20T18:11:32Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

add configuration to start preview server in claude

7e0655c

davydkov force-pushed the fix/manual-layout-alignment-tools branch from 1a9d560 to 7e0655c Compare March 20, 2026 18:07

coderabbitai Bot reviewed Mar 20, 2026

View reviewed changes

davydkov merged commit 6d6cdd2 into main Mar 20, 2026
16 checks passed

davydkov deleted the fix/manual-layout-alignment-tools branch March 20, 2026 18:18

likec4-ci Bot mentioned this pull request Mar 20, 2026

release: v1.54.0 #2792

Merged

coderabbitai Bot mentioned this pull request Jun 1, 2026

LikeC4 live preview #2994

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(diagram): fix manual layout alignment tools not working#2791

fix(diagram): fix manual layout alignment tools not working#2791
davydkov merged 2 commits into
mainfrom
fix/manual-layout-alignment-tools

davydkov commented Mar 20, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented Mar 20, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Mar 20, 2026

Uh oh!

coderabbitai Bot commented Mar 20, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot commented Mar 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

davydkov commented Mar 20, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Mar 20, 2026

Uh oh!

coderabbitai Bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot commented Mar 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

davydkov commented Mar 20, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented Mar 20, 2026 •

edited

Loading

coderabbitai Bot commented Mar 20, 2026 •

edited

Loading