Text left-offset after from-mermaid + REST newline cleanup/layout updates

[joeeeeey]

Summary

When a diagram is created via POST /api/elements/from-mermaid and we later replace <br> with real newlines (\n) using REST updates, text can render visually shifted to the left of its intended box in the canvas/export.

This is most obvious in top note-like boxes (example below), where text appears left-offset/outside even after explicit layout adjustments.

Screenshot (sanitized)

Only the top area is attached (no AWS resource IDs in this image):

Environment

• Repo: yctimlin/mcp_excalidraw
• Canvas runtime: ghcr.io/yctimlin/mcp_excalidraw-canvas:latest
• Access mode: REST API (no MCP client in this shell)
• AI CLI used: Codex CLI + extra high thinking
• Browser was connected (websocket_clients > 0), export endpoint working.

What We Were Doing

We imported Mermaid, then cleaned rendered text by removing literal <br> and replacing with real newlines.
After that, we tried automatic layout tuning (wider long-text boxes + larger vertical spacing).

Reproduction Steps

1. Start canvas server and open UI.
2. Import Mermaid via REST:
   • POST /api/elements/from-mermaid with a flowchart containing labels with <br/>.
3. Enumerate text elements and replace <br>/<br/> with \n:
   • GET /api/elements
   • for each text element: PUT /api/elements/:id with updated text.
4. Resize/reposition related rectangles/text (REST PUT on x/y/width/height and text).
5. POST /api/viewport with {"scrollToContent":true}.
6. Export screenshot via POST /api/export/image.

Actual Behavior

• Some text is visually left-shifted and appears outside/partially outside its intended rectangle.
• This persists even after explicit x/y updates and box widening.
• We confirmed there were no remaining literal <br> strings in text values.

Expected Behavior

• After text replacement and layout updates, text should stay visually aligned inside its intended container.
• Text metrics/bounding behavior should be consistent after REST updates.

Prompt History (for context)

These are the user-side prompts that drove the flow:

1. $excalidraw-skill 画一下一个 ci action(github) 的流程图，简单版
2. 帮我画这个图：.../global-traffic-mermaid.md
3. 不要显示 <br>
4. 再截图检查下
5. 再做一版自动排版（加宽长文本框 + 调整中间层间距）

Additional Notes

• We understand Mermaid conversion creates shape/text elements that may be separate; however, after manual centering updates, rendering still looked offset.
• If this is expected due to text metrics/font fallback/line-height caching, please advise recommended API-side update order (e.g., update text first, then reflow, then recalc bounds).

[yctimlin]

Hi @joeeeeey , we have updated with PR #61 that addressing your issues. Now i think it can perform better