Skip to content

D
dify
Commit f1b868d5 authored by StyleZhang's avatar StyleZhang
Browse files
Options

next step

parent 76ff004e
Show whitespace changes
Inline Side-by-side
Showing with 430 additions and 213 deletions
web/app/(commonLayout)/workflow/page.tsx
View file @ f1b868d5
...@@ -8,14 +8,26 @@ const initialNodes = [ ...@@ -8,14 +8,26 @@ const initialNodes = [
{ {
id: '1', id: '1',
type: 'custom', type: 'custom',
// position: { x: 130, y: 130 }, position: { x: 130, y: 130 },
data: { type: 'start' }, data: { type: 'start' },
}, },
{ {
id: '2', id: '2',
type: 'custom', type: 'custom',
position: { x: 434, y: 130 }, position: { x: 434, y: 130 },
data: { type: 'if-else' }, data: {
type: 'if-else',
branches: [
{
id: 'if-true',
name: 'IS TRUE',
},
{
id: 'if-false',
name: 'IS FALSE',
},
],
},
}, },
{ {
id: '3', id: '3',
...@@ -50,7 +62,7 @@ const initialEdges = [ ...@@ -50,7 +62,7 @@ const initialEdges = [
id: '1', id: '1',
type: 'custom', type: 'custom',
source: '2', source: '2',
sourceHandle: 'condition1', sourceHandle: 'if-true',
target: '3', target: '3',
targetHandle: 'target', targetHandle: 'target',
}, },
...@@ -58,7 +70,7 @@ const initialEdges = [ ...@@ -58,7 +70,7 @@ const initialEdges = [
id: '2', id: '2',
type: 'custom', type: 'custom',
source: '2', source: '2',
sourceHandle: 'condition2', sourceHandle: 'if-false',
target: '4', target: '4',
targetHandle: 'target', targetHandle: 'target',
}, },
......
web/app/components/workflow/constants.ts
View file @ f1b868d5
...@@ -92,3 +92,7 @@ export const NodeInitialData = { ...@@ -92,3 +92,7 @@ export const NodeInitialData = {
desc: '', desc: '',
}, },
} }
export const NODE_WIDTH = 220
export const X_OFFSET = 64
export const Y_OFFSET = 39
web/app/components/workflow/hooks.ts
View file @ f1b868d5
...@@ -10,6 +10,7 @@ import { ...@@ -10,6 +10,7 @@ import {
} from 'reactflow' } from 'reactflow'
import type { import type {
BlockEnum, BlockEnum,
Node,
SelectedNode, SelectedNode,
} from './types' } from './types'
import { NodeInitialData } from './constants' import { NodeInitialData } from './constants'
...@@ -123,13 +124,14 @@ export const useWorkflow = () => { ...@@ -123,13 +124,14 @@ export const useWorkflow = () => {
setNodes(newNodes) setNodes(newNodes)
} }
}, [setSelectedNode, store]) }, [setSelectedNode, store])
const handleUpdateNodeData = useCallback(({ id, data }: SelectedNode) => { const handleUpdateNodeData = useCallback(({ id, data }: SelectedNode) => {
const { const {
getNodes, getNodes,
setNodes, setNodes,
} = store.getState() } = store.getState()
const newNodes = produce(getNodes(), (draft) => { const newNodes = produce(getNodes(), (draft) => {
const currentNode = draft.find(n => n.id === id)! const currentNode = draft.find(node => node.id === id)!
currentNode.data = { ...currentNode.data, ...data } currentNode.data = { ...currentNode.data, ...data }
}) })
...@@ -137,7 +139,7 @@ export const useWorkflow = () => { ...@@ -137,7 +139,7 @@ export const useWorkflow = () => {
setSelectedNode({ id, data }) setSelectedNode({ id, data })
}, [store, setSelectedNode]) }, [store, setSelectedNode])
const handleAddNextNode = useCallback((currentNodeId: string, nodeType: BlockEnum, branchId?: string) => { const handleAddNextNode = useCallback((currentNodeId: string, nodeType: BlockEnum, sourceHandle: string) => {
const { const {
getNodes, getNodes,
setNodes, setNodes,
...@@ -146,35 +148,85 @@ export const useWorkflow = () => { ...@@ -146,35 +148,85 @@ export const useWorkflow = () => {
} = store.getState() } = store.getState()
const nodes = getNodes() const nodes = getNodes()
const currentNode = nodes.find(node => node.id === currentNodeId)! const currentNode = nodes.find(node => node.id === currentNodeId)!
const nextNode = { const nextNode: Node = {
id: `${Date.now()}`, id: `${Date.now()}`,
type: 'custom', type: 'custom',
data: { ...NodeInitialData[nodeType], selected: true }, data: {
...NodeInitialData[nodeType],
selected: true,
},
position: { position: {
x: currentNode.position.x + 304, x: currentNode.position.x + 304,
y: currentNode.position.y, y: currentNode.position.y,
}, },
} }
const newEdge = {
id: `${currentNode.id}-${nextNode.id}`,
type: 'custom',
source: currentNode.id,
sourceHandle,
target: nextNode.id,
targetHandle: 'target',
}
const newNodes = produce(nodes, (draft) => { const newNodes = produce(nodes, (draft) => {
draft.forEach((item) => { draft.forEach((node) => {
item.data = { ...item.data, selected: false } node.data = { ...node.data, selected: false }
}) })
draft.push(nextNode) draft.push(nextNode)
}) })
setNodes(newNodes) setNodes(newNodes)
const newEdges = produce(edges, (draft) => { const newEdges = produce(edges, (draft) => {
draft.push({ draft.push(newEdge)
id: `${currentNode.id}-${nextNode.id}`, })
setEdges(newEdges)
setSelectedNode(nextNode)
}, [store, setSelectedNode])
const handleChangeCurrentNode = useCallback((parentNodeId: string, currentNodeId: string, nodeType: BlockEnum, sourceHandle: string) => {
const {
getNodes,
setNodes,
edges,
setEdges,
} = store.getState()
const nodes = getNodes()
const currentNode = nodes.find(node => node.id === currentNodeId)!
const connectedEdges = getConnectedEdges([currentNode], edges)
const newCurrentNode: Node = {
id: `${Date.now()}`,
type: 'custom', type: 'custom',
source: currentNode.id, data: {
sourceHandle: branchId || 'source', ...NodeInitialData[nodeType],
target: nextNode.id, selected: true,
},
position: {
x: currentNode.position.x,
y: currentNode.position.y,
},
}
const newEdge = {
id: `${parentNodeId}-${newCurrentNode.id}`,
type: 'custom',
source: parentNodeId,
sourceHandle,
target: newCurrentNode.id,
targetHandle: 'target', targetHandle: 'target',
}
const newNodes = produce(nodes, (draft) => {
const index = draft.findIndex(node => node.id === currentNodeId)
draft.splice(index, 1, newCurrentNode)
}) })
setNodes(newNodes)
const newEdges = produce(edges, (draft) => {
const filtered = draft.filter(edge => !connectedEdges.find(connectedEdge => connectedEdge.id === edge.id))
filtered.push(newEdge)
return filtered
}) })
setEdges(newEdges) setEdges(newEdges)
setSelectedNode(nextNode) }, [store])
}, [store, setSelectedNode])
const handleInitialLayoutNodes = useCallback(() => { const handleInitialLayoutNodes = useCallback(() => {
const { const {
getNodes, getNodes,
...@@ -191,6 +243,43 @@ export const useWorkflow = () => { ...@@ -191,6 +243,43 @@ export const useWorkflow = () => {
})) }))
}, [store]) }, [store])
const handleUpdateNodesPosition = useCallback(() => {
const {
getNodes,
setNodes,
} = store.getState()
const nodes = getNodes()
const groups = nodes.reduce((acc, cur) => {
const x = cur.data.position.x
if (!acc[x])
acc[x] = [cur]
else
acc[x].push(cur)
return acc
}, {} as Record<string, Node[]>)
const heightMap: Record<string, number> = {}
Object.keys(groups).forEach((key) => {
let baseHeight = 0
groups[key].sort((a, b) => a.data.position!.y - b.data.position!.y).forEach((node) => {
heightMap[node.id] = baseHeight
baseHeight = node.height! + 39
})
})
setNodes(produce(nodes, (draft) => {
draft.forEach((node) => {
node.position = {
...node.position,
x: node.data.position.x * (220 + 64),
y: heightMap[node.id],
}
})
}))
}, [store])
return { return {
handleEnterNode, handleEnterNode,
handleLeaveNode, handleLeaveNode,
...@@ -199,6 +288,8 @@ export const useWorkflow = () => { ...@@ -199,6 +288,8 @@ export const useWorkflow = () => {
handleSelectNode, handleSelectNode,
handleUpdateNodeData, handleUpdateNodeData,
handleAddNextNode, handleAddNextNode,
handleChangeCurrentNode,
handleInitialLayoutNodes, handleInitialLayoutNodes,
handleUpdateNodesPosition,
} }
} }
web/app/components/workflow/index.tsx
View file @ f1b868d5
...@@ -10,7 +10,7 @@ import ReactFlow, { ...@@ -10,7 +10,7 @@ import ReactFlow, {
Background, Background,
ReactFlowProvider, ReactFlowProvider,
useEdgesState, useEdgesState,
useNodesInitialized, // useNodesInitialized,
useNodesState, useNodesState,
} from 'reactflow' } from 'reactflow'
import 'reactflow/dist/style.css' import 'reactflow/dist/style.css'
...@@ -70,10 +70,10 @@ const Workflow: FC<WorkflowProps> = memo(({ ...@@ -70,10 +70,10 @@ const Workflow: FC<WorkflowProps> = memo(({
needUpdatePosition: true, needUpdatePosition: true,
} }
}, [initialNodes, initialEdges]) }, [initialNodes, initialEdges])
const nodesInitialized = useNodesInitialized({ // const nodesInitialized = useNodesInitialized({
includeHiddenNodes: true, // includeHiddenNodes: true,
}) // })
const [nodes] = useNodesState(initialData.nodes) const [nodes, setNodes, onNodesChange] = useNodesState(initialData.nodes)
const [edges, setEdges, onEdgesChange] = useEdgesState(initialData.edges) const [edges, setEdges, onEdgesChange] = useEdgesState(initialData.edges)
const { const {
...@@ -85,11 +85,10 @@ const Workflow: FC<WorkflowProps> = memo(({ ...@@ -85,11 +85,10 @@ const Workflow: FC<WorkflowProps> = memo(({
handleInitialLayoutNodes, handleInitialLayoutNodes,
} = useWorkflow() } = useWorkflow()
useEffect(() => { // useEffect(() => {
console.log(nodesInitialized, '2') // if (nodesInitialized)
if (nodesInitialized && initialData.needUpdatePosition) // handleInitialLayoutNodes()
handleInitialLayoutNodes() // }, [nodesInitialized])
}, [nodesInitialized])
useEffect(() => { useEffect(() => {
if (initialSelectedNodeId) { if (initialSelectedNodeId) {
......
web/app/components/workflow/nodes/_base/components/next-step.tsx deleted 100644 → 0
View file @ 76ff004e
import {
memo,
useCallback,
} from 'react'
import {
getOutgoers,
useStoreApi,
} from 'reactflow'
import BlockIcon from '../../../block-icon'
import type { Node } from '../../../types'
import { useStore } from '../../../store'
import BlockSelector from '../../../block-selector'
import { Plus } from '@/app/components/base/icons/src/vender/line/general'
import Button from '@/app/components/base/button'
const NextStep = () => {
const store = useStoreApi()
const selectedNode = useStore(state => state.selectedNode)
const outgoers: Node[] = getOutgoers(selectedNode as Node, store.getState().getNodes(), store.getState().edges)
const svgHeight = outgoers.length > 1 ? (outgoers.length + 1) * 36 + 12 * outgoers.length : 36
const renderAddNextNodeTrigger = useCallback((open: boolean) => {
return (
<div
className={`
relative flex items-center px-2 w-[328px] h-9 rounded-lg border border-dashed border-gray-200 bg-gray-50
hover:bg-gray-100 text-xs text-gray-500 cursor-pointer
${open && '!bg-gray-100'}
`}
>
<div className='flex items-center justify-center mr-1.5 w-5 h-5 rounded-[5px] bg-gray-200'>
<Plus className='w-3 h-3' />
</div>
SELECT NEXT BLOCK
</div>
)
}, [])
const renderChangeCurrentNodeTrigger = useCallback((open: boolean) => {
return (
<Button
className={`
hidden group-hover:flex px-2 py-0 h-6 bg-white text-xs text-gray-700 font-medium rounded-md
${open && '!bg-gray-100 !flex'}
`}
>
Change
</Button>
)
}, [])
return (
<div className='flex py-1'>
<div className='shrink-0 relative flex items-center justify-center w-9 h-9 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-xs'>
<BlockIcon type={selectedNode!.data.type} />
</div>
<svg className='shrink-0 w-6' style={{ height: svgHeight }}>
{
outgoers.length < 2 && (
<g>
<path
d='M0,18 L24,18'
strokeWidth={1}
stroke='#D0D5DD'
fill='none'
/>
<rect
x={0}
y={16}
width={1}
height={4}
fill='#98A2B3'
/>
<rect
x={23}
y={16}
width={1}
height={4}
fill='#98A2B3'
/>
</g>
)
}
{
outgoers.length > 1 && (
<g>
{
Array(outgoers.length + 1).fill(0).map((_, index) => (
<g key={index}>
{
index === 0 && (
<path
d='M0,18 L24,18'
strokeWidth={1}
stroke='#D0D5DD'
fill='none'
/>
)
}
{
index > 0 && (
<path
d={`M0,18 Q12,18 12,28 L12,${index * 48 + 18 - 10} Q12,${index * 48 + 18} 24,${index * 48 + 18}`}
strokeWidth={1}
stroke='#D0D5DD'
fill='none'
/>
)
}
<rect
x={23}
y={index * 48 + 18 - 2}
width={1}
height={4}
fill='#98A2B3'
/>
</g>
))
}
<rect
x={0}
y={16}
width={1}
height={4}
fill='#98A2B3'
/>
</g>
)
}
</svg>
<div className='grow'>
{
!!outgoers.length && outgoers.map(outgoer => (
<div
key={outgoer.id}
className='relative group flex items-center mb-3 last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-gray-200 bg-white hover:bg-gray-50 shadow-xs text-xs text-gray-700 cursor-pointer'
>
<div className='absolute left-1 -top-[7.5px] flex items-center px-0.5 h-3 bg-white text-[10px] text-gray-500 font-semibold rounded-[5px]'>
IS TRUE
</div>
<BlockIcon
type={outgoer.data.type}
className='shrink-0 mr-1.5'
/>
<div className='grow'>{outgoer.data.title}</div>
<BlockSelector
onSelect={() => {}}
placement='top-end'
offset={{
mainAxis: 6,
crossAxis: 8,
}}
trigger={renderChangeCurrentNodeTrigger}
popupClassName='!w-[328px]'
/>
</div>
))
}
{
(!outgoers.length || outgoers.length > 1) && (
<BlockSelector
onSelect={() => {}}
placement='top'
offset={0}
trigger={renderAddNextNodeTrigger}
popupClassName='!w-[328px]'
/>
)
}
</div>
</div>
)
}
export default memo(NextStep)
web/app/components/workflow/nodes/_base/components/next-step/add.tsx 0 → 100644
View file @ f1b868d5
import {
memo,
useCallback,
} from 'react'
import BlockSelector from '../../../../block-selector'
import { useWorkflow } from '../../../../hooks'
import type { BlockEnum } from '../../../../types'
import { Plus } from '@/app/components/base/icons/src/vender/line/general'
type AddProps = {
nodeId: string
sourceHandle: string
branchName?: string
}
const Add = ({
nodeId,
sourceHandle,
branchName,
}: AddProps) => {
const { handleAddNextNode } = useWorkflow()
const handleSelect = useCallback((type: BlockEnum) => {
handleAddNextNode(nodeId, type, sourceHandle)
}, [nodeId, sourceHandle, handleAddNextNode])
const renderTrigger = useCallback((open: boolean) => {
return (
<div
className={`
relative flex items-center px-2 w-[328px] h-9 rounded-lg border border-dashed border-gray-200 bg-gray-50
hover:bg-gray-100 text-xs text-gray-500 cursor-pointer
${open && '!bg-gray-100'}
`}
>
{
branchName && (
<div className='absolute left-1 -top-[7.5px] flex items-center px-0.5 h-3 bg-white text-[10px] text-gray-500 font-semibold rounded-[5px]'>
{branchName.toLocaleUpperCase()}
</div>
)
}
<div className='flex items-center justify-center mr-1.5 w-5 h-5 rounded-[5px] bg-gray-200'>
<Plus className='w-3 h-3' />
</div>
SELECT NEXT BLOCK
</div>
)
}, [branchName])
return (
<BlockSelector
onSelect={handleSelect}
placement='top'
offset={0}
trigger={renderTrigger}
popupClassName='!w-[328px]'
/>
)
}
export default memo(Add)
web/app/components/workflow/nodes/_base/components/next-step/index.tsx 0 → 100644
View file @ f1b868d5
import { memo } from 'react'
import {
getConnectedEdges,
getOutgoers,
useEdges,
useStoreApi,
} from 'reactflow'
import BlockIcon from '../../../../block-icon'
import type { Node } from '../../../../types'
import { useStore } from '../../../../store'
import Add from './add'
import Item from './item'
import Line from './line'
const NextStep = () => {
const store = useStoreApi()
const selectedNode = useStore(state => state.selectedNode)
const branches = selectedNode?.data.branches
const edges = useEdges()
const outgoers = getOutgoers(selectedNode as Node, store.getState().getNodes(), edges)
const connectedEdges = getConnectedEdges([selectedNode] as Node[], edges).filter(edge => edge.source === selectedNode!.id)
return (
<div className='flex py-1'>
<div className='shrink-0 relative flex items-center justify-center w-9 h-9 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-xs'>
<BlockIcon type={selectedNode!.data.type} />
</div>
<Line linesNumber={branches ? branches.length : 1} />
<div className='grow'>
{
!branches && !!outgoers.length && (
<Item
parentNodeId={selectedNode!.id}
nodeId={outgoers[0].id}
sourceHandle='source'
data={outgoers[0].data}
/>
)
}
{
!branches && !outgoers.length && (
<Add
nodeId={selectedNode!.id}
sourceHandle='source'
/>
)
}
{
branches?.length && (
branches.map((branch) => {
const connected = connectedEdges.find(edge => edge.sourceHandle === branch.id)
const target = outgoers.find(outgoer => outgoer.id === connected?.target)
return (
<div
key={branch.id}
className='mb-3 last-of-type:mb-0'
>
{
connected && (
<Item
data={target!.data!}
parentNodeId={selectedNode!.id}
nodeId={target!.id}
sourceHandle={branch.id}
branchName={branch.name}
/>
)
}
{
!connected && (
<Add
key={branch.id}
nodeId={selectedNode!.id}
sourceHandle={branch.id}
branchName={branch.name}
/>
)
}
</div>
)
})
)
}
</div>
</div>
)
}
export default memo(NextStep)
web/app/components/workflow/nodes/_base/components/next-step/item.tsx 0 → 100644
View file @ f1b868d5
import {
memo,
useCallback,
} from 'react'
import type {
BlockEnum,
CommonNodeType,
} from '../../../../types'
import BlockIcon from '../../../../block-icon'
import BlockSelector from '../../../../block-selector'
import { useWorkflow } from '../../../../hooks'
import Button from '@/app/components/base/button'
type ItemProps = {
parentNodeId: string
nodeId: string
sourceHandle: string
branchName?: string
data: CommonNodeType
}
const Item = ({
parentNodeId,
nodeId,
sourceHandle,
branchName,
data,
}: ItemProps) => {
const { handleChangeCurrentNode } = useWorkflow()
const handleSelect = useCallback((type: BlockEnum) => {
handleChangeCurrentNode(parentNodeId, nodeId, type, sourceHandle)
}, [parentNodeId, nodeId, sourceHandle, handleChangeCurrentNode])
const renderTrigger = useCallback((open: boolean) => {
return (
<Button
className={`
hidden group-hover:flex px-2 py-0 h-6 bg-white text-xs text-gray-700 font-medium rounded-md
${open && '!bg-gray-100 !flex'}
`}
>
Change
</Button>
)
}, [])
return (
<div
className='relative group flex items-center mb-3 last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-gray-200 bg-white hover:bg-gray-50 shadow-xs text-xs text-gray-700 cursor-pointer'
>
{
branchName && (
<div className='absolute left-1 -top-[7.5px] flex items-center px-0.5 h-3 bg-white text-[10px] text-gray-500 font-semibold rounded-[5px]'>
{branchName.toLocaleUpperCase()}
</div>
)
}
<BlockIcon
type={data.type}
className='shrink-0 mr-1.5'
/>
<div className='grow'>{data.title}</div>
<BlockSelector
onSelect={handleSelect}
placement='top-end'
offset={{
mainAxis: 6,
crossAxis: 8,
}}
trigger={renderTrigger}
popupClassName='!w-[328px]'
/>
</div>
)
}
export default memo(Item)
web/app/components/workflow/nodes/_base/components/next-step/line.tsx 0 → 100644
View file @ f1b868d5
import { memo } from 'react'
type LineProps = {
linesNumber: number
}
const Line = ({
linesNumber,
}: LineProps) => {
const svgHeight = linesNumber * 36 + (linesNumber - 1) * 12
return (
<svg className='shrink-0 w-6' style={{ height: svgHeight }}>
{
Array(linesNumber).fill(0).map((_, index) => (
<g key={index}>
{
index === 0 && (
<>
<rect
x={0}
y={16}
width={1}
height={4}
fill='#98A2B3'
/>
<path
d='M0,18 L24,18'
strokeWidth={1}
stroke='#D0D5DD'
fill='none'
/>
</>
)
}
{
index > 0 && (
<path
d={`M0,18 Q12,18 12,28 L12,${index * 48 + 18 - 10} Q12,${index * 48 + 18} 24,${index * 48 + 18}`}
strokeWidth={1}
stroke='#D0D5DD'
fill='none'
/>
)
}
<rect
x={23}
y={index * 48 + 18 - 2}
width={1}
height={4}
fill='#98A2B3'
/>
</g>
))
}
</svg>
)
}
export default memo(Line)
web/app/components/workflow/nodes/_base/components/node-handle.tsx
View file @ f1b868d5
...@@ -7,7 +7,7 @@ import { ...@@ -7,7 +7,7 @@ import {
Handle, Handle,
Position, Position,
getConnectedEdges, getConnectedEdges,
useStoreApi, useEdges,
} from 'reactflow' } from 'reactflow'
import { BlockEnum } from '../../../types' import { BlockEnum } from '../../../types'
import type { Node } from '../../../types' import type { Node } from '../../../types'
...@@ -15,7 +15,7 @@ import BlockSelector from '../../../block-selector' ...@@ -15,7 +15,7 @@ import BlockSelector from '../../../block-selector'
import { useWorkflow } from '../../../hooks' import { useWorkflow } from '../../../hooks'
type NodeHandleProps = { type NodeHandleProps = {
handleId?: string handleId: string
handleClassName?: string handleClassName?: string
nodeSelectorClassName?: string nodeSelectorClassName?: string
} & Pick<NodeProps, 'id' | 'data'> } & Pick<NodeProps, 'id' | 'data'>
...@@ -28,9 +28,10 @@ export const NodeTargetHandle = ({ ...@@ -28,9 +28,10 @@ export const NodeTargetHandle = ({
nodeSelectorClassName, nodeSelectorClassName,
}: NodeHandleProps) => { }: NodeHandleProps) => {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const store = useStoreApi() const edges = useEdges()
const connectedEdges = getConnectedEdges([{ id } as Node], store.getState().edges) const connectedEdges = getConnectedEdges([{ id } as Node], edges)
const connected = connectedEdges.find(edge => edge.targetHandle === handleId && edge.target === id) const connected = connectedEdges.find(edge => edge.targetHandle === handleId && edge.target === id)
const handleOpenChange = useCallback((v: boolean) => { const handleOpenChange = useCallback((v: boolean) => {
setOpen(v) setOpen(v)
}, []) }, [])
...@@ -86,8 +87,8 @@ export const NodeSourceHandle = ({ ...@@ -86,8 +87,8 @@ export const NodeSourceHandle = ({
}: NodeHandleProps) => { }: NodeHandleProps) => {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const { handleAddNextNode } = useWorkflow() const { handleAddNextNode } = useWorkflow()
const store = useStoreApi() const edges = useEdges()
const connectedEdges = getConnectedEdges([{ id } as Node], store.getState().edges) const connectedEdges = getConnectedEdges([{ id } as Node], edges)
const connected = connectedEdges.find(edge => edge.sourceHandle === handleId && edge.source === id) const connected = connectedEdges.find(edge => edge.sourceHandle === handleId && edge.source === id)
const handleOpenChange = useCallback((v: boolean) => { const handleOpenChange = useCallback((v: boolean) => {
setOpen(v) setOpen(v)
...@@ -97,8 +98,8 @@ export const NodeSourceHandle = ({ ...@@ -97,8 +98,8 @@ export const NodeSourceHandle = ({
handleOpenChange(!open) handleOpenChange(!open)
} }
const handleSelect = useCallback((type: BlockEnum) => { const handleSelect = useCallback((type: BlockEnum) => {
handleAddNextNode(id, type) handleAddNextNode(id, type, handleId)
}, [handleAddNextNode, id]) }, [handleAddNextNode, id, handleId])
return ( return (
<> <>
......
web/app/components/workflow/nodes/if-else/node.tsx
View file @ f1b868d5
...@@ -17,7 +17,7 @@ const IfElseNode: FC<Pick<NodeProps, 'id' | 'data'>> = (props) => { ...@@ -17,7 +17,7 @@ const IfElseNode: FC<Pick<NodeProps, 'id' | 'data'>> = (props) => {
<div className='w-full text-right text-gray-700 text-xs font-semibold'>IF</div> <div className='w-full text-right text-gray-700 text-xs font-semibold'>IF</div>
<NodeSourceHandle <NodeSourceHandle
{...props} {...props}
handleId='condition1' handleId='if-true'
handleClassName='!top-1 !-right-[21px]' handleClassName='!top-1 !-right-[21px]'
/> />
</div> </div>
...@@ -41,7 +41,7 @@ const IfElseNode: FC<Pick<NodeProps, 'id' | 'data'>> = (props) => { ...@@ -41,7 +41,7 @@ const IfElseNode: FC<Pick<NodeProps, 'id' | 'data'>> = (props) => {
<div className='w-full text-right text-gray-700 text-xs font-semibold'>ELSE</div> <div className='w-full text-right text-gray-700 text-xs font-semibold'>ELSE</div>
<NodeSourceHandle <NodeSourceHandle
{...props} {...props}
handleId='condition2' handleId='if-false'
handleClassName='!top-1 !-right-[21px]' handleClassName='!top-1 !-right-[21px]'
/> />
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment