Repository navigation
feat: add mindmap wysiwyg editing - #105
Merged
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughThis PR adds Mindmap support end to end: a new diagram model and plugin, editor canvas selection and toolbar wiring, source-update handlers, comment anchoring, a dashboard template entry, and tests. ChangesMindmap diagram feature
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant EditorCanvas
participant useCanvasInteraction
participant LiveMaidEditor
participant MindmapModel
User->>EditorCanvas: click mindmap node
EditorCanvas->>useCanvasInteraction: getClickedNode(event)
useCanvasInteraction->>MindmapModel: mindmapNodeIdFromSvgElement()
MindmapModel-->>useCanvasInteraction: MINDMAP_ nodeId
useCanvasInteraction-->>EditorCanvas: selectedNodeId
User->>EditorCanvas: click shape / delete / add-child
EditorCanvas->>LiveMaidEditor: callback for selected node action
LiveMaidEditor->>MindmapModel: addMindmapChild / deleteMindmapNode / changeMindmapNodeShape
MindmapModel-->>LiveMaidEditor: updated code
LiveMaidEditor->>EditorCanvas: handleCodeChange(updated code)
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/lib/diagrams/mindmap.tsx (1)
258-267: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low valueMinor: redundant
getBoundingClientRect()calls.
getBoundingClientRect()is invoked twice per element in the same filter predicate (once for.width, once for.height). Cache the rect once per element.♻️ Proposed fix
const groups = candidates .map((el) => el.closest("g") ?? el) .filter((el, index, arr) => arr.indexOf(el) === index) - .filter((el) => el.getBoundingClientRect().width > 0 && el.getBoundingClientRect().height > 0); + .filter((el) => { + const rect = el.getBoundingClientRect(); + return rect.width > 0 && rect.height > 0; + });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/lib/diagrams/mindmap.tsx` around lines 258 - 267, The mindmapRenderedNodes helper is calling getBoundingClientRect() twice for each element in the filter predicate. Update the filtering logic in mindmapRenderedNodes to read the bounding rect once per element, store it in a local variable, and then use that cached rect for both width and height checks.src/components/editor/MindmapNodeToolbar.tsx (1)
13-21: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winShape icons don't visually distinguish "Default"/"Square"/"Rounded", and "Bang" uses a loading-spinner icon.
default,square, androundedall render the sameSquareglyph (therounded-smclass has no effect on an SVG icon's own path), so those three rows look identical besides their labels. More notably,bangusesLoader, which conventionally signals a "loading" state — likely to confuse users scanning the shape picker.♻️ Suggested icon swap
-import { Check, Circle, Cloud, Hexagon, Loader, Square, Trash2 } from "lucide-react"; +import { Check, Circle, Cloud, Hexagon, Square, Trash2, Zap } from "lucide-react"; ... - { id: "bang", label: "Bang", icon: <Loader className="h-3.5 w-3.5" /> }, + { id: "bang", label: "Bang", icon: <Zap className="h-3.5 w-3.5" /> },🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/editor/MindmapNodeToolbar.tsx` around lines 13 - 21, The icon mapping in MINDMAP_SHAPES within MindmapNodeToolbar is too ambiguous because Default, Square, and Rounded all use the same Square glyph, and Bang uses a Loader icon that reads as a loading state. Update the icon selection for these shape entries so each MindmapShapeKind has a visually distinct, appropriate icon, and replace the Bang icon with something that better represents the shape instead of a spinner-like loader.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/lib/diagrams/mindmap.tsx`:
- Around line 103-118: `formatMindmapNodeText` only trims whitespace, so
embedded newline/carriage-return characters can still be written into the
mermaid source and split a node across lines. Update `formatMindmapNodeText` to
sanitize `label` by removing or replacing internal `\n`/`\r` before composing
the final node text, and make sure the callers `renameMindmapNode`,
`addMindmapChild`, and `addRootMindmapNode` continue to rely on this normalized
output when splicing into `code.split("\n")` / `lines.join("\n")`.
- Around line 258-290: The mindmap SVG lookup logic still relies on array
position in mindmapRenderedNodes and parseMindmap(...).nodes, which can
mis-associate elements if Mermaid changes render order. Update
mindmapNodeIdFromSvgElement and findMindmapSvgElementByNodeId to resolve nodes
using a stable key from the rendered SVG node itself (such as data-id or the
node’s own id attribute) instead of DOM index matching, while keeping the
existing mindmapRenderedNodes helper only for filtering visible candidate nodes.
---
Nitpick comments:
In `@src/components/editor/MindmapNodeToolbar.tsx`:
- Around line 13-21: The icon mapping in MINDMAP_SHAPES within
MindmapNodeToolbar is too ambiguous because Default, Square, and Rounded all use
the same Square glyph, and Bang uses a Loader icon that reads as a loading
state. Update the icon selection for these shape entries so each
MindmapShapeKind has a visually distinct, appropriate icon, and replace the Bang
icon with something that better represents the shape instead of a spinner-like
loader.
In `@src/lib/diagrams/mindmap.tsx`:
- Around line 258-267: The mindmapRenderedNodes helper is calling
getBoundingClientRect() twice for each element in the filter predicate. Update
the filtering logic in mindmapRenderedNodes to read the bounding rect once per
element, store it in a local variable, and then use that cached rect for both
width and height checks.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 0e85f236-1445-4435-8c3f-767c115db619
📒 Files selected for processing (9)
src/components/Dashboard.tsxsrc/components/editor/CommentLayer.tsxsrc/components/editor/EditorCanvas.tsxsrc/components/editor/LiveMaidEditor.tsxsrc/components/editor/MindmapNodeToolbar.tsxsrc/hooks/useCanvasInteraction.tssrc/lib/diagrams/mindmap.tsxsrc/lib/diagrams/registry.tssrc/test/mindmap.test.ts
|
🚅 Deployed to the livemaid-pr-105 environment in livemaid
|
Owner
Author
|
Addressed CodeRabbit feedback in 515b9c3:
Skipped the Bang icon suggestion intentionally because the product request in this PR was to use the loader icon for Bang. |
This branch was successfully deployed
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.
Summary
Verification
Summary by CodeRabbit