feat: auto-layout (Arrange) — tidy a bound diagram into a clean flow - #118
Open
Amark19 wants to merge 1 commit into
Open
feat: auto-layout (Arrange) — tidy a bound diagram into a clean flow#118Amark19 wants to merge 1 commit into
Amark19 wants to merge 1 commit into
Conversation
Add utils/autoLayout.js: read the canvas as a graph (bindable shapes = nodes, both-ends-bound arrows = edges), lay it out with dagre (Sugiyama, the layout mermaid uses), move shapes to their new spots and re-route arrows in one undo step. Toolbar 'Arrange' action (Network icon) runs it; unconnected shapes are left in place, and the result is re-centred where the diagram already was. This is also the layout the future IR->canvas render will reuse. - dep: @dagrejs/dagre@3.1.1 (no engines floor → Cloudflare-safe) - setupTests: polyfill structuredClone (dagre uses it; jsdom lacks it) - tests: layoutGraph ranks/centre/rankdir Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Deploying whiteboard with
|
| Latest commit: |
f7ada22
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://445f0514.whiteboard-988.pages.dev |
| Branch Preview URL: | https://feat-auto-layout.whiteboard-988.pages.dev |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
Adds auto-layout — the foundation for the AI-diagram track, and useful on its own.
utils/autoLayout.js: reads the canvas as a graph (bindable shapes = nodes, arrows bound at both ends = edges), lays it out with dagre (the Sugiyama layout mermaid uses), then moves shapes to their computed spots and re-routes their arrows — all in one undo step. Unconnected shapes are left alone; the result is re-centred where the diagram already was.Networkicon, next to Delete-canvas) runs it.Why
Manual box-placement is the biggest tax in drawing diagrams, and auto-layout is the prerequisite for everything downstream (mermaid import, prompt→diagram).
layoutGraphis a pure function, so the coming IR→canvas render reuses it directly.Notes
@dagrejs/dagre@3.1.1— noenginesfloor, so the Cloudflare Pages build is safe.setupTests.jspolyfillsstructuredClone(dagre uses it; jsdom lacks it — it exists at runtime in modern browsers).Test plan
autoLayout.test.js: null on empty/edgeless graphs, A→B→C descends into ranks, centroid preserved,rankdir: LRflows left-to-right. 93 tests pass; lint + prettier clean.🤖 Generated with Claude Code