diff --git a/src/app/globals.css b/src/app/globals.css index b2a47540..5fe315cf 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -172,6 +172,11 @@ body { ::view-transition-new(root) { animation-duration: 1ms; } + + .react-flow__node { + transition: filter 1ms linear !important; + will-change: auto !important; + } } /* React Flow customizations */ @@ -187,6 +192,11 @@ body { .react-flow__node { font-family: inherit; + transition: + width 180ms cubic-bezier(0.22, 1, 0.36, 1), + height 180ms cubic-bezier(0.22, 1, 0.36, 1), + filter 250ms ease-in-out; + will-change: width, height; } /* Skip hit-testing on images inside nodes — parent containers handle all @@ -202,6 +212,12 @@ body { pointer-events: none; } +.canvas-interacting .react-flow__node, +.react-flow__node.resizing { + transition: none !important; + will-change: auto !important; +} + .canvas-default-cursor .react-flow, .canvas-default-cursor .react-flow__pane { cursor: default !important; @@ -254,18 +270,15 @@ body { /* Switch dimming - nodes downstream of disabled Switch outputs */ .react-flow__node.switch-dimmed { filter: brightness(0.62) saturate(0.55); - transition: filter 250ms ease-in-out; } /* Skip dimming - nodes skipped due to optional empty inputs */ .react-flow__node.node-skipped { filter: brightness(0.55) saturate(0.45); - transition: filter 250ms ease-in-out; } .react-flow__node:not(.switch-dimmed):not(.node-skipped) { filter: none; - transition: filter 250ms ease-in-out; } .react-flow__node-group {