fix(visimer): smooth edge-anim loop + stop hero labels growing on edit (PRD-7994) (#3457) - #27
Merged
Merged
Conversation
…t (PRD-7994) (#3457)
* fix(visimer): smooth edge-anim loop + stop hero labels growing on edit (PRD-7994)
Two independent polish bugs surfaced editing the hero on visimer.com.
1. `injectAnimationKeyframes` ended each cycle at `stroke-dashoffset: -20`.
With `stroke-dasharray: 8` the visual dash+gap period is 16, so
`-20 mod 16 = -4` — the pattern snapped back 4 units at every loop
boundary. `-16` completes exactly one period per cycle → invisible
transition.
2. Editing a hero node text ("WYSIWYG editor" → "WYSIWYG editor NEW TEXT")
grew the node's box by ~24 px and rewrote the source with quotes it
didn't need. Two things collided:
2a. Chromium's contenteditable substitutes ` ` for a trailing
space to keep it visible. `readLabelHtml` was passing that
through to the source rewriter, where the `&` tripped
`NEEDS_QUOTE` → live commit wrapped the label in quotes → later
keystrokes saw `ref.quoted === true` and kept the quotes forever.
Now canonicalises ` ` → real space before trim.
2b. Mermaid's `flowchart.wrappingWidth` default of 200 flips longer
labels into `display: table; white-space: break-spaces; width:
200px` layout, which reserves a phantom second line even when
the SVG grows out to fit the one-line text. Bumped to 800 in
both `heroConfig` (App.tsx) and the `/hero-loop` renderer.
Verified in the running site: dashoffset now transitions -15 → -0.5
across a loop with no visual break, and after " NEW TEXT" the edited
node's height matches the untouched sibling's exactly.
* fix(visimer): split readLabel for snapshot vs commit + correct comment (PRD-7994)
Addressing pullfrog review on #3457:
1. `readLabelSnapshot` is now the DOM-faithful reader used by the
mid-flight snapshot at `render()` and by the equality gate in
`resumeInPlaceSession`. It skips both the ` ` canonicalisation
and the `.trim()`. Without the split, an in-flight render that
resolved the same instant the user typed a trailing space would
silently drop that space from the reinjected label and the next
keystroke would land against the previous word.
2. `readLabelHtml` keeps the canonicalise-then-trim shape — that is
what the commit paths (`liveCommit`, `finish`) want to hand to the
source rewriter so `NEEDS_QUOTE` doesn't trip on ` `.
3. Corrected the comment above `readLabelHtml`: mermaid's flip to the
wrap-safe layout is driven by rendered width crossing
`flowchart.wrappingWidth`, not by quotes on the label. The ` `
canonicalisation only prevents the source getting spuriously
quoted; the phantom-line growth is a separate bug fixed by the
`wrappingWidth: 800` bumps in App.tsx and HeroLoopPage.tsx.
GitOrigin-RevId: 8bb0b5a173e3a4e1a83a6d9537e2e99d8035d9e5
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.
Copybara-translated 1 Inkeep OSS change. Rebase-merge this PR so the prepared commit lands directly on public main.