Map↔card interaction: link pins to cards + numbered pins#216
Open
ivanmkc wants to merge 1 commit into
Open
Conversation
- MapLink component links a card to a Map marker by shared id (+ group): hover/click a pin rings its card and scrolls it into view; hover a card opens the pin's popup and pans to it. - Map: markers gain optional id; new group + numbered props (1..N pins). - map-link.ts: tiny module-level focus pub/sub (no provider wiring), keyed by group so independent boards don't cross-talk; each side ignores its own source to avoid feedback loops. - CSS ring for .tc-maplink(:hover/--active); tests (bus isolation, resolver registration, active-class toggle via react-dom/client, Map link props); component.md recipe.
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
2 participants
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.
Tighter integration between a
Mapand its sibling cards — hover/select one, highlight the other.What
MapLinkcomponent: wraps a card and links it to aMapmarker sharing the sameid(scoped by optionalgroup). Hover/click a pin → the linked card rings and scrolls into view; hover a card → the pin's popup opens and the map pans to it.Mapadditions:markers[].id, agroupprop, andnumbered(pins labelled 1..N in order).map-link.ts: a tiny module-level focus pub/sub — no React-context/provider wiring through the generic resolver; keyed bygroupso independent boards don't cross-talk, and each side ignores its ownsourceto avoid feedback loops..tc-maplink(hover/active), keyboard-focusable.Why this shape
The component tree is generic
{type,props,children}with no shared state; a module-level bus keyed by id/group is the least-invasive way to let two independent nodes talk. Purely additive — existing maps/cards are unchanged; linking only activates when a markeridmatches aMapLinkid.Tests
test/map-link.test.ts: bus group-isolation + unsubscribe; resolver registration + children render; active-class toggle driven viareact-dom/client+act(map-source focus rings, card-source ignored, other-id clears); Map accepts id/numbered/group and renders (SSR). Full viewer suite green (496), tsc clean, client bundle builds.Docs
component.mdgeo/map recipe gains a "Link pins to cards (MapLink)" section with a Grid(map + linked cards) snippet.