feat: highlight all same-net traces on hover via JS DOM class toggling#207
Open
onchito-walks wants to merge 3 commits into
Open
feat: highlight all same-net traces on hover via JS DOM class toggling#207onchito-walks wants to merge 3 commits into
onchito-walks wants to merge 3 commits into
Conversation
Adds useTraceHoverHighlight hook that finds all traces sharing the same data-subcircuit-connectivity-map-key on mouseenter/mouseleave and toggles a .trace-highlighted class on matching groups.\n\nThe CSS-only approach from circuit-to-svg has inconsistent SVG-browser support. This JS approach uses direct DOM class manipulation which is reliable across all contexts.\n\nCo-authored-by: rdthree <rdthree@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Tests the hook's core interaction logic: class toggling on mouseenter/mouseleave, same-net vs different-net highlighting, overlay propagation, and cleanup on unmount. 6 tests, 0 failures. First tests in this repository.
Author
|
Updated with tests. Added 6 DOM-based tests covering:
Run with |
Also fixes MouseEvent type compatibility with addEventListener signatures. Both the hook and test use (e as MouseEvent).relatedTarget instead of declaring handlers as MouseEvent (which is incompatible with EventListener).
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.
Summary
useTraceHoverHighlighthook that highlights all traces sharing the samedata-subcircuit-connectivity-map-keywhen any trace in that net is hoveredmouseenter/mouseleave) instead of the CSS-only:has()approach which has inconsistent SVG-browser support<g class="trace">base groups and<g class="trace-overlays">crossing overlay groups.trace-highlightedCSS class withfilter: invert(1)visual effectVerification
bun run build→ passesbun run formatNotes
:has()selectors within SVG style elements have known cross-browser issues@bimakwin PR feat: highlight all connected traces on hover #157 and@aifunmobiin PR feat: highlight traces and same-net traces on hover #164, but simplified and made reliable/claim #1130