feat: enhance minimap node color handling

This commit is contained in:
zhsama 2025-09-28 21:11:46 +08:00
parent ffbc007f82
commit 48597ef193
1 changed files with 15 additions and 1 deletions

View File

@ -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'
/>