feat: lift a graph node on hover - #367
Merged
Merged
Conversation
Collapsed graph cards were inert under the cursor, leaving the canvas without any read on what the pointer was over. Hovering a node now lifts it 2px. The top card and the folded layers under it carry the same transform, so a stack travels as one object and its peek stays as it looks at rest, and only the floor of the stack — the card actually casting onto the canvas — deepens its shadow. The hover is driven from the node root rather than the card so the corner badges, which sit over the card but outside it, don't break it. Expanded containers sit it out: their members are separate canvas nodes that wouldn't travel with the frame. By Digitl
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.
What
Collapsed catalog graph cards (asset, source, source type) now lift
2pxunder the cursor, with a shadow step.CardStacklayers under it carry the same transform, so a stack travels as one object and the peek under it stays exactly as it looks at rest.prefers-reduced-motion: reducekeeps the shadow step and pins the lift.Why
The canvas gave no feedback on what the pointer was over. The cards already read as physical objects (elevation tokens, a folded deck peeking out below a collapsed container), so a small lift is the cheapest thing that makes them feel picked out without adding chrome.
Notes for review
.graph-nodeclass on each node root, not from the card. Two reasons: the layers are siblings of the card, so a card-scoped:hovercannot reach them; and the corner badges sit over the card but outside it, so crossing one used to drop the hover and flicker.graph-raiseis only applied while collapsed: an expanded source or type group holds its members as separate VueFlow nodes, which would not travel with the frame.2pxshift — VueFlow draws them from stored handle bounds. At this amplitude the edge still meets the card, and it is the reason the travel is small rather than dramatic.RunNode(the compact run-graph node) is untouched: it carries its own bespoke shadow and is not part of this card system.New tokens:
--graph-card-shadow-raised,--graph-asset-shadow-raised,--graph-layer-shadow-raised, defined for both themes.Verification
pnpm run lintandpnpm exec nuxt typecheckpass (4 pre-existing warnings in unrelated files). Not verified in a browser on my side, so the amplitudes are a judgement call and worth a look while reviewing.By Digitl