fix: preserve Mermaid edge curves on drag and warn on unbalanced artifact HTML#1
Merged
Merged
Conversation
0ab4f07 to
fa82a9f
Compare
…on drag The Mermaid rearrange rebuild had several related defects, all visible once a diagram had parallel edges, curved edges, or a dense hub of labelled edges: - Dragging a node redrew each connected edge as a straight line, flattening curves and stacking every parallel edge between the same two nodes onto one identical segment. rebuildEdge now maps each edge's original path onto the moved endpoints with a similarity transform (mParsePath / mPathFromSeq / mFitTransform), so a curve stays curved and parallel edges keep the separation Mermaid gave them. - Endpoints were re-derived from the node centres, so the fanned starts and arrowheads of parallel edges collapsed onto a single toward-centre point. Each endpoint is now pinned to its node's original attach point and moved by that node's drag delta (edgeEnds), so the fan - arrowheads included - survives. - Bending an edge (dragging its label) used the same collapsed endpoints, so the arrowhead jumped to the shared point. The bend branch now uses the pinned endpoints too, bowing only the middle toward the cursor. - The edge-label to edge match compared label and path positions in mismatched coordinate frames, assigned greedily in DOM order, and measured to each edge's arc-midpoint - which on a curved edge sits nowhere near where the label was placed. So a label could bind to the wrong edge and a node drag then flung it across the diagram onto an unrelated arrow. Both positions are now lifted into the common frame and each label is paired to the edge it lies closest to (its minimum distance along the whole path), globally-closest-first. - A label could also sit off its (curved) edge until dragged, because htmlit only snapped a label onto its line when that edge was rebuilt. Labels are now snapped onto their edge on a fresh render, so they sit on their arrow from the start; a saved arrangement still takes precedence. Adds fixtures and browser regression tests for each case (parallel-edge curve and arrowhead separation, label-bend arrowhead pinning, dense-diagram label matching across straight and curved edges, and labels sitting on their line at load); each fails before the fix and passes after.
htmlit serves an artifact verbatim, so malformed markup - a stray or unclosed <div>/<section> - collapses the author's layout: a container closes early and the sections after it escape the centring wrapper, rendering full-width. The browser silently repairs the DOM, so the injected client cannot see the original mistake. Add a stdlib structure check that re-reads the raw file whenever the client reports layout (on load and after every morph) and folds any container imbalance into the layout_warnings channel as an unbalanced-html warning, naming each stray/unclosed tag with its line. Tracking only block containers that require an explicit end tag keeps it free of false positives from optional-end tags (<p>, <li>, <td>, ...). Covered by unit tests for the detector and an integration test through the poll. Signed-off-by: Austin (Ngoc Thang) Pham <austinpham@microsoft.com>
The comment anchor already jumps to its agent answer when clicked, but there was no way back: clicking the answer did nothing. Make the jump two-way - a plain click on an answer block's "You asked:" header now scrolls to and flashes the anchored spot. The click is scoped to the header/block itself (not the answer body), so the answer text stays selectable and commentable, and the header gets a pointer cursor + hover underline to signal it is a back-link. Adds a fixture and a browser test that fails before the change (the anchor never flashes) and passes after. Signed-off-by: Austin (Ngoc Thang) Pham <austinpham@microsoft.com>
fa82a9f to
57501af
Compare
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
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
Fixes to the review surface, found while reviewing real plan/design artifacts.
1. Mermaid rearrange geometry (
client/diagram.js). Several related defects in how a diagram renders and rebuilds, all visible once a diagram has parallel edges, curved edges, or a dense hub of labelled edges:2. Warn the agent when artifact HTML has unbalanced block tags (
htmlit_core/validation.py). htmlit serves the artifact verbatim, so a stray or unclosed<div>/<section>collapses the layout (a container closes early and following sections escape the centring wrapper, rendering full-width). The browser silently repairs the DOM, so the client cannot see it. A stdlib structure check re-reads the raw file whenever the client reports layout and folds any imbalance intolayout_warningsas anunbalanced-htmlwarning, naming each stray/unclosed tag with its line. It tracks only containers that require an explicit end tag, so it never false-positives on optional-end tags (<p>,<li>,<td>). No silent auto-repair: htmlit reports the problem so the fix lands in the author's source.3. Make the answer/anchor jump two-way (
client/annotate.js). Clicking a comment anchor already jumped to its agent answer, but there was no way back. A plain click on an answer block's "You asked:" header now scrolls to and flashes the anchored spot. The click is scoped to the header/block itself, not the answer body, so the answer text stays selectable and commentable; the header gets a pointer cursor and hover underline.Type of change
How was this tested?
Every change is TDD: each new test fails before its fix and passes after (verified by reverting each change and re-running its test).
python -m pytest tests/python(45 passed, incl. newtest_validation.py+ server integration tests)ruff check skills/htmlit tests/python(clean)npm test(browser client, 19 passed, incl. parallel-edge curve/arrowhead, label-bend pinning, dense-diagram label matching across straight and curved edges, labels-on-line-at-load, answer-anchor jump, and the existing subgraph tests)Checklist
git commit -s).