feat(visimer): add "Edit here" callouts to the inline playground (#2952) - #15
Merged
Conversation
* feat(visimer): add hand-drawn "Edit here" callouts to the inline playground Two Caveat/terracotta nudges flank the playground card on the landing page: "Edit here" above the source pane, "or edit here" below the preview. Same visual voice as the navbar's existing "Leave a star!" hint. Both live in the padding bands of a wrapper around the card, not inside it, so they never cover the editor or intercept a click (pointer-events: none). Anchoring the source callout top-left and the preview callout bottom-right means one placement reads correctly in both layouts: with side-by-side panes each arrow lands over its own column, and with stacked panes the source pane is on top and the preview below. * feat(visimer): aim the playground callouts at the content, not the chrome The callouts sat in the page margin outside the card, so both arrows stopped at chrome: "Edit here" landed on the preset pill row and "or edit here" on an empty stretch of canvas. Each one now lives in the pane it describes. "Edit here" sits in the code pane's flow directly under the last line, with its left padding clearing the line-number gutter so the arrow tips up into the code text. Letting the editor size to its content instead of filling the pane is what keeps it tucked under short presets like flowchart rather than stranded at the pane floor; flex-shrink pulls it back up for tall presets like classDiagram, which scroll internally instead of pushing the callout out of view. The stacked layout's code row grows by the callout's height so the amount of visible code on phones is unchanged. "or edit here" pins to the canvas's bottom-left, the corner the zoom controls leave free, and aims up-right at the diagram the canvas keeps centred. Both are scoped to the inline demo via .pg-inline-pane, since /playground shares .pg-code-pane, .demo-cm and .pg-grid and is deliberately untouched. * feat(visimer): centre the playground callouts on their pane's content Both arrows hugged the left edge of their pane, so "Edit here" pointed at the line-number gutter rather than at the code. Each callout is now a 1fr / auto / 1fr grid: the arrow sits in the centre column and the label hangs off to one side without pulling it off-centre, so the label's width no longer decides where the arrow lands. Each arrow is redrawn with its tip on the viewBox's horizontal centre and its tail sweeping out towards its own label, which makes the centring exact rather than offset by however far the tip sat from the middle of its box. The source callout insets by the gutter width so it centres on the code text column instead of the pane, and the preview callout spans the canvas so it centres under the diagram. Nothing is painted right of the preview arrow, so the corner zoom controls stay clear. Measured across all 36 preset and viewport combinations: the source tip lands within 5px of the code column's centre and the preview tip on the canvas centre exactly. * refactor(visimer): tidy the callout styles after local review Three cleanups from the local review pass: Merge the two .pg-callout-arrow rules into one and drop its `flex: none`. That declaration was left over from when the callout was a flex row; the arrow is a grid item now, and `flex` only applies to flex items, so it had stopped doing anything. The width and height stay: the SVG carries no width/height attributes of its own. Reword the contrast comment. It claimed the label sat in WCAG's "large text" bracket, which is wrong: that bracket needs font-weight 700 and the label is 600. The measured ratios were right, so the comment now just states them as a legibility rationale and notes these callouts are decorative (aria-hidden), which puts them outside SC 1.4.3 entirely. Hoist the static `stroke` object to module scope, alongside the existing kw/str/ident/cmt constants it matches. GitOrigin-RevId: 340bbc7a57d62c868c8b87ba9bd7352de3ebc674
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.