opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-08-28 21:23:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance minimap node color handling

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/app/components/workflow/operator/index.tsx
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 { MiniMap } from 'reactflow'
import UndoRedo from '../header/undo-redo' import UndoRedo from '../header/undo-redo'
import ZoomInOut from './zoom-in-out' import ZoomInOut from './zoom-in-out'
@ -24,6 +25,16 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
return Math.max((workflowCanvasWidth - rightPanelWidth), 400) return Math.max((workflowCanvasWidth - rightPanelWidth), 400)
}, [workflowCanvasWidth, rightPanelWidth]) }, [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 // update bottom panel height
useEffect(() => { useEffect(() => {
if (bottomPanelRef.current) { if (bottomPanelRef.current) {
@ -65,6 +76,9 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
height: 72, height: 72,
}} }}
maskColor='var(--color-workflow-minimap-bg)' 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] 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' !border-divider-subtle !bg-background-default-subtle !shadow-md !shadow-shadow-shadow-5'
/> />