Skip to content

feat: lift a graph node on hover - #367

Merged
aaaaahaaaaa merged 1 commit into
mainfrom
feat/graph-node-hover-raise
Sep 17, 2026
Merged

aaaaahaaaaa merged 1 commit into
mainfrom
feat/graph-node-hover-raise

Conversation

@aaaaahaaaaa

Copy link
Copy Markdown
Contributor

What

Collapsed catalog graph cards (asset, source, source type) now lift 2px under the cursor, with a shadow step.

  • The top card and the folded CardStack layers 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.
  • Only the floor of the stack deepens its shadow, i.e. the one card actually casting onto the canvas: the deepest folded layer when there is one, otherwise the card itself. The shadows between the folded layers stay put.
  • prefers-reduced-motion: reduce keeps 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

  • The hover triggers from a new .graph-node class on each node root, not from the card. Two reasons: the layers are siblings of the card, so a card-scoped :hover cannot reach them; and the corner badges sit over the card but outside it, so crossing one used to drop the hover and flicker.
  • Expanded containers sit it out. graph-raise is only applied while collapsed: an expanded source or type group holds its members as separate VueFlow nodes, which would not travel with the frame.
  • Edge endpoints do not follow the 2px shift — 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.
  • The fan adds nothing to layout, but a hovered card reaches ~2px higher against a 20px node gap.
  • 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 lint and pnpm exec nuxt typecheck pass (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

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
@aaaaahaaaaa
aaaaahaaaaa merged commit a07ed96 into main Sep 17, 2026
10 checks passed
@aaaaahaaaaa
aaaaahaaaaa deleted the feat/graph-node-hover-raise branch September 17, 2026 22:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant