From 48597ef193e7b640ef8ff406a076920749084055 Mon Sep 17 00:00:00 2001 From: zhsama Date: Sun, 28 Sep 2025 21:11:46 +0800 Subject: [PATCH] feat: enhance minimap node color handling --- web/app/components/workflow/operator/index.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/web/app/components/workflow/operator/index.tsx b/web/app/components/workflow/operator/index.tsx index 1100a7a905..865119fdd7 100644 --- a/web/app/components/workflow/operator/index.tsx +++ b/web/app/components/workflow/operator/index.tsx @@ -1,4 +1,5 @@ -import { memo, useEffect, useMemo, useRef } from 'react' +import { memo, useCallback, useEffect, useMemo, useRef } from 'react' +import type { Node } from 'reactflow' import { MiniMap } from 'reactflow' import UndoRedo from '../header/undo-redo' import ZoomInOut from './zoom-in-out' @@ -24,6 +25,16 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => { return Math.max((workflowCanvasWidth - rightPanelWidth), 400) }, [workflowCanvasWidth, rightPanelWidth]) + const getMiniMapNodeColor = useCallback(() => { + return 'var(--color-workflow-minimap-block)' + }, []) + + const getMiniMapNodeStrokeColor = useCallback((node: Node) => { + return node.data?.selected + ? 'var(--components-option-card-option-selected-border, #296DFF)' + : 'transparent' + }, []) + // update bottom panel height useEffect(() => { if (bottomPanelRef.current) { @@ -65,6 +76,9 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => { height: 72, }} maskColor='var(--color-workflow-minimap-bg)' + nodeColor={getMiniMapNodeColor} + nodeStrokeColor={getMiniMapNodeStrokeColor} + nodeStrokeWidth={3} className='!absolute !bottom-10 z-[9] !m-0 !h-[73px] !w-[103px] !rounded-lg !border-[0.5px] !border-divider-subtle !bg-background-default-subtle !shadow-md !shadow-shadow-shadow-5' />