From 5e99e8cfde7f450367a4f48e2bf1da6c58bdb780 Mon Sep 17 00:00:00 2001
From: Matthias <matthias@example.com>
Date: Wed, 25 Mar 2026 21:54:42 +0100
Subject: [PATCH] feat: improve MiniMap node styling with dynamic color
 functions

- Introduced functions to determine node color and stroke color based on node type for the MiniMap component.
- Updated MiniMap to utilize these functions for enhanced visual representation of nodes.
---
 components/canvas/canvas.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/canvas/canvas.tsx b/components/canvas/canvas.tsx
index 09b8b0d..31ab457 100644
--- a/components/canvas/canvas.tsx
+++ b/components/canvas/canvas.tsx
@@ -80,6 +80,14 @@ function withResolvedCompareData(nodes: RFNode[], edges: RFEdge[]): RFNode[] {
   });
 }
 
+function getMiniMapNodeColor(node: RFNode): string {
+  return node.type === "frame" ? "transparent" : "#6366f1";
+}
+
+function getMiniMapNodeStrokeColor(node: RFNode): string {
+  return node.type === "frame" ? "transparent" : "#4f46e5";
+}
+
 function CanvasInner({ canvasId }: CanvasInnerProps) {
   const { screenToFlowPosition } = useReactFlow();
   const { resolvedTheme } = useTheme();
@@ -318,7 +326,8 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
         <Controls className="bg-card! border! shadow-sm! rounded-lg!" />
         <MiniMap
           className="bg-card! border! shadow-sm! rounded-lg!"
-          nodeColor="#6366f1"
+          nodeColor={getMiniMapNodeColor}
+          nodeStrokeColor={getMiniMapNodeStrokeColor}
           maskColor="rgba(0, 0, 0, 0.1)"
         />
       </ReactFlow>