fix(dashboard): optimize pan/zoom interaction performance

- Widen transition to [box-shadow,outline,opacity,filter] to exclude
  transform (the pan/zoom culprit) while preserving ring animations
  (Tailwind v4 outline) and diff-fade opacity/filter transitions
- Replace inline boxShadow with Tailwind shadow-[] utility so
  .node-glow/.diff-*-glow CSS classes compose correctly
- Disable nodesDraggable, nodesConnectable, edgesFocusable,
  edgesReconnectable, elementsSelectable for read-only visualization
This commit is contained in:
mengdehong
2026-03-24 20:30:56 +08:00
Unverified
parent ed16da7e12
commit b8d88023a5
2 changed files with 6 additions and 2 deletions
@@ -80,8 +80,7 @@ function CustomNodeComponent({
return (
<div
className={`relative rounded-lg bg-elevated border border-border-subtle ${extraClass} min-w-[180px] max-w-[220px] overflow-hidden transition-all duration-200 cursor-pointer`}
style={{ boxShadow: '0 2px 8px rgba(0,0,0,0.3)' }}
className={`relative rounded-lg bg-elevated border border-border-subtle ${extraClass} min-w-[180px] max-w-[220px] overflow-hidden transition-[box-shadow,outline,opacity,filter] duration-200 cursor-pointer shadow-[0_2px_8px_rgba(0,0,0,0.3)]`}
onClick={() => data.onNodeClick?.(id)}
>
{/* Left color bar */}
@@ -444,6 +444,11 @@ function GraphViewInner() {
onNodeClick={onNodeClick}
onPaneClick={onPaneClick}
nodeTypes={nodeTypes}
nodesDraggable={false}
nodesConnectable={false}
edgesFocusable={false}
edgesReconnectable={false}
elementsSelectable={false}
fitView
fitViewOptions={{ minZoom: 0.01, padding: 0.1 }}
minZoom={0.01}