Highlight selected atoms in the XYZ text editor#31
Merged
Conversation
When editing coordinates in the XYZ editor's text mode, the lines belonging to currently selected atoms are now tinted via a highlight overlay behind the textarea, so it's easy to find and modify them. Entering edit mode no longer clears the selection, and selecting an atom (in 3D or the row view) updates the overlay live. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Adds line-level highlighting in the XYZ editor's text edit mode so users can visually identify which textarea rows correspond to currently selected atoms. A transparent textarea is layered over a backdrop that renders the same text with tinted spans on selected lines; scroll and input events keep the two synchronized, and toggling into edit mode no longer clears the selection.
Changes:
- Wrap the XYZ edit textarea in a backdrop/highlights overlay and add matching CSS metrics so text and tint align pixel-perfectly.
- Add
renderXYZEditHighlights()/initXYZEditHighlights()and stop clearing the selection on entering edit mode. - Refresh the overlay from
updateSelectionUI()whenever edit mode is visible.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| index.html | Wrap textarea with #xyz-edit-wrap containing backdrop/highlights layers. |
| css/styles.css | Shared font/padding/line metrics for textarea + backdrop; soft-yellow line tint and transparent textarea background. |
| js/xyz-editor.js | New highlight render/init functions; toggle wrap visibility; preserve selection on entering edit mode. |
| js/selection.js | New refreshEditHighlightsIfVisible() invoked from updateSelectionUI(). |
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
Makes it easy to find and modify selected atoms while editing coordinates: in the XYZ editor's text edit mode, the lines belonging to currently selected atoms are now highlighted.
Previously the row-based selection mode highlighted selected atoms, but switching to edit mode (the textarea) cleared the selection and gave no visual cue about which lines to change.
How it works
#xyz-edit-backdrop/#xyz-edit-highlights) sits behind a transparent-background textarea. Both share identical font/padding/line metrics so the tint lines up exactly with the text. Atom i (0-based) maps to text line i + 2 (line 0 = count, line 1 = comment).Files
index.html— wrap the textarea with the backdrop/highlights layer.css/styles.css— coordinated metrics for textarea + overlay; soft-yellow line tint.js/xyz-editor.js—renderXYZEditHighlights()/initXYZEditHighlights(); toggle the wrapper and keep selection on entering edit mode.js/selection.js— refresh the overlay from selection changes when edit mode is visible.Testing
Verified the overlay alignment and line mapping by rendering the real CSS + render logic in headless Chromium: selecting atoms 1, 3, 4 tints exactly those rows, pixel-aligned with the textarea text.
🤖 Generated with Claude Code