opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

node control

This commit is contained in:
StyleZhang 2024-03-07 17:09:04 +08:00
parent 173336f256
commit 16abcf082c
6 changed files with 72 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/app/components/workflow/hooks.ts
View File

@ -368,6 +368,7 @@ export const useWorkflow = () => {
x: currentNode.position.x,
y: currentNode.position.y,
},
targetPosition: Position.Left,
}
const newNodes = produce(nodes, (draft) => {
const index = draft.findIndex(node => node.id === currentNodeId)

8
web/app/components/workflow/index.tsx
View File

@ -9,8 +9,6 @@ import { useKeyPress } from 'ahooks'
import ReactFlow, {
Background,
ReactFlowProvider,
useEdgesState,
useNodesState,
useOnViewportChange,
} from 'reactflow'
import type { Viewport } from 'reactflow'
@ -56,13 +54,11 @@ type WorkflowProps = {
viewport?: Viewport
}
const Workflow: FC<WorkflowProps> = memo(({
nodes: initialNodes,
edges: initialEdges,
nodes,
edges,
viewport,
}) => {
const showFeaturesPanel = useStore(state => state.showFeaturesPanel)
const [nodes] = useNodesState(initialNodes)
const [edges] = useEdgesState(initialEdges)
const {
handleSyncWorkflowDraft,

2
web/app/components/workflow/nodes/_base/components/node-control.tsx
View File

@ -21,7 +21,7 @@ const NodeControl: FC<NodeControlProps> = ({
const { handleNodeDataUpdate } = useWorkflow()
return (
<div className='absolute right-0 -top-7 flex items-center px-0.5 h-6 bg-white rounded-lg border-[0.5px] border-gray-100 shadow-xs text-gray-500'>
<div className='flex items-center px-0.5 h-6 bg-white rounded-lg border-[0.5px] border-gray-100 shadow-xs text-gray-500'>
{
isRunning && (
<div className='flex items-center px-1 h-5 rounded-md bg-primary-50 text-xs font-medium text-primary-600'>

110
web/app/components/workflow/nodes/_base/node.tsx
View File

@ -8,10 +8,12 @@ import {
} from 'react'
import type { NodeProps } from '../../types'
import { BlockEnum } from '../../types'
import { canRunBySingle } from '../../utils'
import {
NodeSourceHandle,
NodeTargetHandle,
} from './components/node-handle'
import NodeControl from './components/node-control'
import BlockIcon from '@/app/components/workflow/block-icon'
type BaseNodeProps = {
@ -26,55 +28,73 @@ const BaseNode: FC<BaseNodeProps> = ({
return (
<div
className={`
group relative w-[240px] bg-[#fcfdff] rounded-2xl shadow-xs
hover:shadow-lg
${data._selected ? 'border-[2px] border-primary-600' : 'border border-white'}
flex border-[2px] rounded-2xl
${data._selected ? 'border-primary-600' : 'border-transparent'}
`}
>
{
data.type !== BlockEnum.VariableAssigner && (
<NodeTargetHandle
id={id}
data={data}
handleClassName='!top-[17px] !-left-2'
handleId='target'
<div
className={`
group relative w-[240px] bg-[#fcfdff] shadow-xs
border border-transparent rounded-[15px]
hover:shadow-lg
`}
>
{
data.type !== BlockEnum.VariableAssigner && (
<NodeTargetHandle
id={id}
data={data}
handleClassName='!top-4 !-left-[9px]'
handleId='target'
/>
)
}
{
data.type !== BlockEnum.IfElse && data.type !== BlockEnum.QuestionClassifier && (
<NodeSourceHandle
id={id}
data={data}
handleClassName='!top-4 !-right-[9px]'
handleId='source'
/>
)
}
{
canRunBySingle(data.type)
&& (
<div className='hidden group-hover:flex pb-1 absolute right-0 -top-7 h-7'>
<NodeControl
nodeId={id}
isRunning={data._isSingleRun}
/>
</div>
)
}
<div className='flex items-center px-3 pt-3 pb-2'>
<BlockIcon
className='shrink-0 mr-2'
type={data.type}
size='md'
icon={data._icon}
/>
)
}
{
data.type !== BlockEnum.IfElse && data.type !== BlockEnum.QuestionClassifier && (
<NodeSourceHandle
id={id}
data={data}
handleClassName='!top-[17px] !-right-2'
handleId='source'
/>
)
}
<div className='flex items-center px-3 pt-3 pb-2'>
<BlockIcon
className='shrink-0 mr-2'
type={data.type}
size='md'
icon={data._icon}
/>
<div
title={data.title}
className='grow text-[13px] font-semibold text-gray-700 truncate'
>
{data.title}
</div>
</div>
<div className='mb-1'>
{cloneElement(children, { id, data })}
</div>
{
data.desc && (
<div className='px-3 pt-s1 pb-2 text-xs leading-[18px] text-gray-500 whitespace-pre-line break-words'>
{data.desc}
<div
title={data.title}
className='grow text-[13px] font-semibold text-gray-700 truncate'
>
{data.title}
</div>
)
}
</div>
<div className='mb-1'>
{cloneElement(children, { id, data })}
</div>
{
data.desc && (
<div className='px-3 pt-s1 pb-2 text-xs leading-[18px] text-gray-500 whitespace-pre-line break-words'>
{data.desc}
</div>
)
}
</div>
</div>
)
}

21
web/app/components/workflow/nodes/index.tsx
View File

@ -1,36 +1,21 @@
import { memo } from 'react'
import type { NodeProps } from 'reactflow'
import type { Node } from '../types'
import { canRunBySingle } from '../utils'
import {
NodeComponentMap,
PanelComponentMap,
} from './constants'
import BaseNode from './_base/node'
import BasePanel from './_base/panel'
import NodeControl from './_base/components/node-control'
const CustomNode = memo((props: NodeProps) => {
const nodeId = props.id
const nodeData = props.data
const NodeComponent = NodeComponentMap[nodeData.type]
return (
<>
<BaseNode { ...props }>
<NodeComponent />
</BaseNode>
{
nodeData._selected
&& canRunBySingle(nodeData.type)
&& (
<NodeControl
nodeId={nodeId}
isRunning={nodeData._isSingleRun}
/>
)
}
</>
<BaseNode { ...props }>
<NodeComponent />
</BaseNode>
)
})
CustomNode.displayName = 'CustomNode'

1
web/app/components/workflow/types.ts
View File

@ -27,7 +27,6 @@ export type Branch = {
export type CommonNodeType<T = {}> = {
_selected?: boolean
_hovering?: boolean
_targetBranches?: Branch[]
_isSingleRun?: boolean
_icon?: Collection['icon']