feat: workflow new nodes (#4683)
Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: Patryk Garstecki <patryk20120@yahoo.pl> Co-authored-by: Sebastian.W <thiner@gmail.com> Co-authored-by: 呆萌闷油瓶 <253605712@qq.com> Co-authored-by: takatost <takatost@users.noreply.github.com> Co-authored-by: rechardwang <wh_goodjob@163.com> Co-authored-by: Nite Knite <nkCoding@gmail.com> Co-authored-by: Chenhe Gu <guchenhe@gmail.com> Co-authored-by: Joshua <138381132+joshua20231026@users.noreply.github.com> Co-authored-by: Weaxs <459312872@qq.com> Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com> Co-authored-by: leejoo0 <81673835+leejoo0@users.noreply.github.com> Co-authored-by: JzoNg <jzongcode@gmail.com> Co-authored-by: sino <sino2322@gmail.com> Co-authored-by: Vikey Chen <vikeytk@gmail.com> Co-authored-by: wanghl <Wang-HL@users.noreply.github.com> Co-authored-by: Haolin Wang-汪皓临 <haolin.wang@atlaslovestravel.com> Co-authored-by: Zixuan Cheng <61724187+Theysua@users.noreply.github.com> Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: Bowen Liang <bowenliang@apache.org> Co-authored-by: Bowen Liang <liangbowen@gf.com.cn> Co-authored-by: fanghongtai <42790567+fanghongtai@users.noreply.github.com> Co-authored-by: wxfanghongtai <wxfanghongtai@gf.com.cn> Co-authored-by: Matri <qjp@bithuman.io> Co-authored-by: Benjamin <benjaminx@gmail.com>
This commit is contained in:
zxhlyh
@@ -0,0 +1,87 @@
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
} from 'react'
|
||||
import cn from 'classnames'
|
||||
import { useVariableAssigner } from '../../hooks'
|
||||
import type { VariableAssignerNodeType } from '../../types'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import { Plus02 } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import AddVariablePopup from '@/app/components/workflow/nodes/_base/components/add-variable-popup'
|
||||
import type {
|
||||
NodeOutPutVar,
|
||||
ValueSelector,
|
||||
Var,
|
||||
} from '@/app/components/workflow/types'
|
||||
|
||||
export type AddVariableProps = {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
variableAssignerNodeId: string
|
||||
variableAssignerNodeData: VariableAssignerNodeType
|
||||
availableVars: NodeOutPutVar[]
|
||||
handleId?: string
|
||||
}
|
||||
const AddVariable = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
availableVars,
|
||||
variableAssignerNodeId,
|
||||
variableAssignerNodeData,
|
||||
handleId,
|
||||
}: AddVariableProps) => {
|
||||
const { handleAssignVariableValueChange } = useVariableAssigner()
|
||||
|
||||
const handleSelectVariable = useCallback((v: ValueSelector, varDetail: Var) => {
|
||||
handleAssignVariableValueChange(
|
||||
variableAssignerNodeId,
|
||||
v,
|
||||
varDetail,
|
||||
handleId,
|
||||
)
|
||||
onOpenChange(false)
|
||||
}, [handleAssignVariableValueChange, variableAssignerNodeId, handleId, onOpenChange])
|
||||
|
||||
return (
|
||||
<div className={cn(
|
||||
'hidden group-hover:flex absolute top-0 left-0 z-10 pointer-events-none',
|
||||
open && '!flex',
|
||||
variableAssignerNodeData.selected && '!flex',
|
||||
)}>
|
||||
<PortalToFollowElem
|
||||
placement={'left-start'}
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
crossAxis: -60,
|
||||
}}
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
<PortalToFollowElemTrigger
|
||||
onClick={() => onOpenChange(!open)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center',
|
||||
'w-4 h-4 rounded-full bg-primary-600 cursor-pointer z-10',
|
||||
)}
|
||||
>
|
||||
<Plus02 className='w-2.5 h-2.5 text-white' />
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[1000]'>
|
||||
<AddVariablePopup
|
||||
onSelect={handleSelectVariable}
|
||||
availableVars={availableVars}
|
||||
/>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(AddVariable)
|
||||
@@ -0,0 +1,107 @@
|
||||
import {
|
||||
memo,
|
||||
useMemo,
|
||||
} from 'react'
|
||||
import cn from 'classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useNodes } from 'reactflow'
|
||||
import { useStore } from '../../../store'
|
||||
import { BlockEnum } from '../../../types'
|
||||
import type {
|
||||
Node,
|
||||
ValueSelector,
|
||||
VarType,
|
||||
} from '../../../types'
|
||||
import type { VariableAssignerNodeType } from '../types'
|
||||
import {
|
||||
useGetAvailableVars,
|
||||
useVariableAssigner,
|
||||
} from '../hooks'
|
||||
import { filterVar } from '../utils'
|
||||
import NodeHandle from './node-handle'
|
||||
import NodeVariableItem from './node-variable-item'
|
||||
import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
|
||||
|
||||
const i18nPrefix = 'workflow.nodes.variableAssigner'
|
||||
type GroupItem = {
|
||||
groupEnabled: boolean
|
||||
targetHandleId: string
|
||||
title: string
|
||||
type: string
|
||||
variables: ValueSelector[]
|
||||
variableAssignerNodeId: string
|
||||
variableAssignerNodeData: VariableAssignerNodeType
|
||||
}
|
||||
type NodeGroupItemProps = {
|
||||
item: GroupItem
|
||||
}
|
||||
const NodeGroupItem = ({
|
||||
item,
|
||||
}: NodeGroupItemProps) => {
|
||||
const { t } = useTranslation()
|
||||
const enteringNodePayload = useStore(s => s.enteringNodePayload)
|
||||
const hoveringAssignVariableGroupId = useStore(s => s.hoveringAssignVariableGroupId)
|
||||
const nodes: Node[] = useNodes()
|
||||
const {
|
||||
handleGroupItemMouseEnter,
|
||||
handleGroupItemMouseLeave,
|
||||
} = useVariableAssigner()
|
||||
const getAvailableVars = useGetAvailableVars()
|
||||
const outputType = useMemo(() => {
|
||||
if (item.targetHandleId === 'target')
|
||||
return item.variableAssignerNodeData.output_type
|
||||
|
||||
const group = item.variableAssignerNodeData.advanced_settings?.groups.find(group => group.groupId === item.targetHandleId)
|
||||
return group?.output_type || ''
|
||||
}, [item.variableAssignerNodeData, item.targetHandleId])
|
||||
const availableVars = getAvailableVars(item.variableAssignerNodeId, item.targetHandleId, filterVar(outputType as VarType))
|
||||
const showSelectionBorder = enteringNodePayload?.nodeId === item.variableAssignerNodeId && item.groupEnabled && hoveringAssignVariableGroupId === item.targetHandleId
|
||||
const connected = item.variableAssignerNodeData._connectedTargetHandleIds?.includes(item.targetHandleId)
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'relative pt-1 px-1.5 pb-1.5 rounded-lg border border-transparent',
|
||||
showSelectionBorder && '!border-primary-600',
|
||||
)}
|
||||
onMouseEnter={() => handleGroupItemMouseEnter(item.targetHandleId)}
|
||||
onMouseLeave={handleGroupItemMouseLeave}
|
||||
>
|
||||
<div className='flex items-center justify-between h-4 text-[10px] font-medium text-gray-500'>
|
||||
<NodeHandle
|
||||
connected={connected}
|
||||
variableAssignerNodeId={item.variableAssignerNodeId}
|
||||
variableAssignerNodeData={item.variableAssignerNodeData}
|
||||
handleId={item.targetHandleId}
|
||||
availableVars={availableVars}
|
||||
/>
|
||||
<span className='grow uppercase truncate' title={item.title}>{item.title}</span>
|
||||
<span className='shrink-0 ml-2'>{item.type}</span>
|
||||
</div>
|
||||
{
|
||||
!item.variables.length && (
|
||||
<div className='relative flex items-center px-1 h-[22px] justify-between bg-gray-100 rounded-md space-x-1 text-[10px] font-normal text-gray-400 uppercase'>
|
||||
{t(`${i18nPrefix}.varNotSet`)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
!!item.variables.length && item.variables.map((variable = [], index) => {
|
||||
const isSystem = isSystemVar(variable)
|
||||
const node = isSystem ? nodes.find(node => node.data.type === BlockEnum.Start) : nodes.find(node => node.id === variable[0])
|
||||
const varName = isSystem ? `sys.${variable[variable.length - 1]}` : variable.slice(1).join('.')
|
||||
|
||||
return (
|
||||
<NodeVariableItem
|
||||
key={index}
|
||||
node={node as Node}
|
||||
varName={varName}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(NodeGroupItem)
|
||||
@@ -0,0 +1,69 @@
|
||||
import type { MouseEvent } from 'react'
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
useState,
|
||||
} from 'react'
|
||||
import cn from 'classnames'
|
||||
import {
|
||||
Handle,
|
||||
Position,
|
||||
} from 'reactflow'
|
||||
import type { VariableAssignerNodeType } from '../types'
|
||||
import AddVariable from './add-variable'
|
||||
import type { NodeOutPutVar } from '@/app/components/workflow/types'
|
||||
import { useStore } from '@/app/components/workflow/store'
|
||||
|
||||
type NodeHandleProps = {
|
||||
handleId?: string
|
||||
connected?: boolean
|
||||
variableAssignerNodeId: string
|
||||
availableVars: NodeOutPutVar[]
|
||||
variableAssignerNodeData: VariableAssignerNodeType
|
||||
}
|
||||
const NodeHandle = ({
|
||||
connected,
|
||||
variableAssignerNodeId,
|
||||
handleId = 'target',
|
||||
availableVars,
|
||||
variableAssignerNodeData,
|
||||
}: NodeHandleProps) => {
|
||||
const [open, setOpen] = useState(false)
|
||||
const connectingNodePayload = useStore(s => s.connectingNodePayload)
|
||||
const isUnConnectable = connectingNodePayload?.handleType === 'source'
|
||||
|
||||
const handleOpenChange = useCallback((v: boolean) => {
|
||||
setOpen(v)
|
||||
}, [])
|
||||
|
||||
const handleHandleClick = useCallback((e: MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
setOpen(v => !v)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Handle
|
||||
id={handleId}
|
||||
type='target'
|
||||
onClick={handleHandleClick}
|
||||
position={Position.Left}
|
||||
isConnectable={!isUnConnectable}
|
||||
className={cn(
|
||||
'!-left-[13px] !top-1 !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1] !transform-none',
|
||||
'after:absolute after:w-0.5 after:h-2 after:left-[5px] after:top-1 after:bg-primary-500 pointer-events-none',
|
||||
!connected && 'after:opacity-0',
|
||||
)}
|
||||
>
|
||||
<AddVariable
|
||||
open={open}
|
||||
onOpenChange={handleOpenChange}
|
||||
variableAssignerNodeId={variableAssignerNodeId}
|
||||
variableAssignerNodeData={variableAssignerNodeData}
|
||||
handleId={handleId}
|
||||
availableVars={availableVars}
|
||||
/>
|
||||
</Handle>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(NodeHandle)
|
||||
@@ -0,0 +1,36 @@
|
||||
import { memo } from 'react'
|
||||
import { VarBlockIcon } from '@/app/components/workflow/block-icon'
|
||||
import { Line3 } from '@/app/components/base/icons/src/public/common'
|
||||
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
|
||||
import type { Node } from '@/app/components/workflow/types'
|
||||
import { BlockEnum } from '@/app/components/workflow/types'
|
||||
|
||||
type NodeVariableItemProps = {
|
||||
node: Node
|
||||
varName: string
|
||||
}
|
||||
const NodeVariableItem = ({
|
||||
node,
|
||||
varName,
|
||||
}: NodeVariableItemProps) => {
|
||||
return (
|
||||
<div className='relative flex items-center mt-0.5 h-6 bg-gray-100 rounded-md px-1 text-xs font-normal text-gray-700' >
|
||||
<div className='flex items-center'>
|
||||
<div className='p-[1px]'>
|
||||
<VarBlockIcon
|
||||
className='!text-gray-900'
|
||||
type={node?.data.type || BlockEnum.Start}
|
||||
/>
|
||||
</div>
|
||||
<div className='max-w-[85px] truncate mx-0.5 text-xs font-medium text-gray-700' title={node?.data.title}>{node?.data.title}</div>
|
||||
<Line3 className='mr-0.5'></Line3>
|
||||
</div>
|
||||
<div className='flex items-center text-primary-600'>
|
||||
<Variable02 className='w-3.5 h-3.5' />
|
||||
<div className='max-w-[75px] truncate ml-0.5 text-xs font-medium' title={varName}>{varName}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(NodeVariableItem)
|
||||
@@ -0,0 +1,176 @@
|
||||
'use client'
|
||||
import React, { useCallback } from 'react'
|
||||
import type { ChangeEvent, FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import produce from 'immer'
|
||||
import { useBoolean } from 'ahooks'
|
||||
import type { VarGroupItem as VarGroupItemType } from '../types'
|
||||
import VarReferencePicker from '../../_base/components/variable/var-reference-picker'
|
||||
import VarList from '../components/var-list'
|
||||
import Field from '@/app/components/workflow/nodes/_base/components/field'
|
||||
import { VarType } from '@/app/components/workflow/types'
|
||||
import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
|
||||
import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
|
||||
import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import { Folder } from '@/app/components/base/icons/src/vender/line/files'
|
||||
import { checkKeys } from '@/utils/var'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
|
||||
const i18nPrefix = 'workflow.nodes.variableAssigner'
|
||||
|
||||
type Payload = VarGroupItemType & {
|
||||
group_name?: string
|
||||
}
|
||||
|
||||
type Props = {
|
||||
readOnly: boolean
|
||||
nodeId: string
|
||||
payload: Payload
|
||||
onChange: (newPayload: Payload) => void
|
||||
groupEnabled: boolean
|
||||
onGroupNameChange?: (value: string) => void
|
||||
canRemove?: boolean
|
||||
onRemove?: () => void
|
||||
availableVars: NodeOutPutVar[]
|
||||
}
|
||||
|
||||
const VarGroupItem: FC<Props> = ({
|
||||
readOnly,
|
||||
nodeId,
|
||||
payload,
|
||||
onChange,
|
||||
groupEnabled,
|
||||
onGroupNameChange,
|
||||
canRemove,
|
||||
onRemove,
|
||||
availableVars,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleAddVariable = useCallback((value: ValueSelector | string, _varKindType: VarKindType, varInfo?: Var) => {
|
||||
const chosenVariables = payload.variables
|
||||
if (chosenVariables.some(item => item.join('.') === (value as ValueSelector).join('.')))
|
||||
return
|
||||
|
||||
const newPayload = produce(payload, (draft: Payload) => {
|
||||
draft.variables.push(value as ValueSelector)
|
||||
if (varInfo && varInfo.type !== VarType.any)
|
||||
draft.output_type = varInfo.type
|
||||
})
|
||||
onChange(newPayload)
|
||||
}, [onChange, payload])
|
||||
|
||||
const handleListChange = useCallback((newList: ValueSelector[], changedItem?: ValueSelector) => {
|
||||
if (changedItem) {
|
||||
const chosenVariables = payload.variables
|
||||
if (chosenVariables.some(item => item.join('.') === (changedItem as ValueSelector).join('.')))
|
||||
return
|
||||
}
|
||||
|
||||
const newPayload = produce(payload, (draft) => {
|
||||
draft.variables = newList
|
||||
if (newList.length === 0)
|
||||
draft.output_type = VarType.any
|
||||
})
|
||||
onChange(newPayload)
|
||||
}, [onChange, payload])
|
||||
|
||||
const filterVar = useCallback((varPayload: Var) => {
|
||||
if (payload.output_type === VarType.any)
|
||||
return true
|
||||
return varPayload.type === payload.output_type
|
||||
}, [payload.output_type])
|
||||
|
||||
const [isEditGroupName, {
|
||||
setTrue: setEditGroupName,
|
||||
setFalse: setNotEditGroupName,
|
||||
}] = useBoolean(false)
|
||||
|
||||
const handleGroupNameChange = useCallback((e: ChangeEvent<any>) => {
|
||||
const value = e.target.value
|
||||
const { isValid, errorKey, errorMessageKey } = checkKeys([value], false)
|
||||
if (!isValid) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
|
||||
})
|
||||
return
|
||||
}
|
||||
onGroupNameChange?.(value)
|
||||
}, [onGroupNameChange, t])
|
||||
|
||||
return (
|
||||
<Field
|
||||
className='group'
|
||||
title={groupEnabled
|
||||
? <div className='flex items-center'>
|
||||
<div className='flex items-center !normal-case'>
|
||||
<Folder className='mr-0.5 w-3.5 h-3.5' />
|
||||
{(!isEditGroupName)
|
||||
? (
|
||||
<div className='flex items-center h-6 px-1 rounded-lg cursor-text hover:bg-gray-100' onClick={setEditGroupName}>
|
||||
{payload.group_name}
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<input
|
||||
type='text'
|
||||
className='h-6 px-1 rounded-lg bg-white border border-gray-300 focus:outline-none'
|
||||
// style={{
|
||||
// width: `${((payload.group_name?.length || 0) + 1) / 2}em`,
|
||||
// }}
|
||||
size={payload.group_name?.length} // to fit the input width
|
||||
autoFocus
|
||||
value={payload.group_name}
|
||||
onChange={handleGroupNameChange}
|
||||
onBlur={setNotEditGroupName}
|
||||
maxLength={30}
|
||||
/>)}
|
||||
|
||||
</div>
|
||||
{canRemove && (
|
||||
<div
|
||||
className='group-hover:block hidden ml-0.5 p-1 rounded-md text-gray-500 cursor-pointer hover:bg-[#FEE4E2] hover:text-[#D92D20]'
|
||||
onClick={onRemove}
|
||||
>
|
||||
<Trash03
|
||||
className='w-4 h-4'
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
: t(`${i18nPrefix}.title`)!}
|
||||
operations={
|
||||
<div className='flex items-center h-6 space-x-2'>
|
||||
{payload.variables.length > 0 && (
|
||||
<div className='flex items-center h-[18px] px-1 border border-black/8 rounded-[5px] text-xs font-medium text-gray-500 capitalize'>{payload.output_type}</div>
|
||||
)}
|
||||
{
|
||||
!readOnly
|
||||
? <VarReferencePicker
|
||||
isAddBtnTrigger
|
||||
readonly={false}
|
||||
nodeId={nodeId}
|
||||
isShowNodeName
|
||||
value={[]}
|
||||
onChange={handleAddVariable}
|
||||
defaultVarKindType={VarKindType.variable}
|
||||
filterVar={filterVar}
|
||||
availableVars={availableVars}
|
||||
/>
|
||||
: undefined
|
||||
}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<VarList
|
||||
readonly={readOnly}
|
||||
nodeId={nodeId}
|
||||
list={payload.variables}
|
||||
onChange={handleListChange}
|
||||
filterVar={filterVar}
|
||||
/>
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
export default React.memo(VarGroupItem)
|
||||
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
|
||||
import React, { useCallback } from 'react'
|
||||
import produce from 'immer'
|
||||
import RemoveButton from '../../../_base/components/remove-button'
|
||||
import ListNoDataPlaceholder from '../../../_base/components/list-no-data-placeholder'
|
||||
import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
|
||||
import type { ValueSelector, Var } from '@/app/components/workflow/types'
|
||||
import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
|
||||
@@ -12,9 +13,8 @@ type Props = {
|
||||
readonly: boolean
|
||||
nodeId: string
|
||||
list: ValueSelector[]
|
||||
onChange: (list: ValueSelector[]) => void
|
||||
onChange: (list: ValueSelector[], value?: ValueSelector) => void
|
||||
onOpen?: (index: number) => void
|
||||
onlyLeafNodeVar?: boolean
|
||||
filterVar?: (payload: Var, valueSelector: ValueSelector) => boolean
|
||||
}
|
||||
|
||||
@@ -24,7 +24,6 @@ const VarList: FC<Props> = ({
|
||||
list,
|
||||
onChange,
|
||||
onOpen = () => { },
|
||||
onlyLeafNodeVar,
|
||||
filterVar,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
@@ -33,7 +32,7 @@ const VarList: FC<Props> = ({
|
||||
const newList = produce(list, (draft) => {
|
||||
draft[index] = value as ValueSelector
|
||||
})
|
||||
onChange(newList)
|
||||
onChange(newList, value as ValueSelector)
|
||||
}
|
||||
}, [list, onChange])
|
||||
|
||||
@@ -52,9 +51,9 @@ const VarList: FC<Props> = ({
|
||||
|
||||
if (list.length === 0) {
|
||||
return (
|
||||
<div className='flex rounded-md bg-gray-50 items-center h-[42px] justify-center leading-[18px] text-xs font-normal text-gray-500'>
|
||||
<ListNoDataPlaceholder>
|
||||
{t('workflow.nodes.variableAssigner.noVarTip')}
|
||||
</div>
|
||||
</ListNoDataPlaceholder>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -70,7 +69,6 @@ const VarList: FC<Props> = ({
|
||||
value={item}
|
||||
onChange={handleVarReferenceChange(index)}
|
||||
onOpen={handleOpen(index)}
|
||||
onlyLeafNodeVar={onlyLeafNodeVar}
|
||||
filterVar={filterVar}
|
||||
defaultVarKindType={VarKindType.variable}
|
||||
/>
|
||||
|
||||
@@ -2,7 +2,6 @@ import { useCallback } from 'react'
|
||||
import produce from 'immer'
|
||||
import type { VariableAssignerNodeType } from '../../types'
|
||||
import type { ValueSelector } from '@/app/components/workflow/types'
|
||||
import { useEdgesInteractions } from '@/app/components/workflow/hooks'
|
||||
|
||||
type Params = {
|
||||
id: string
|
||||
@@ -10,18 +9,15 @@ type Params = {
|
||||
setInputs: (newInputs: VariableAssignerNodeType) => void
|
||||
}
|
||||
function useVarList({
|
||||
id,
|
||||
inputs,
|
||||
setInputs,
|
||||
}: Params) {
|
||||
const { handleVariableAssignerEdgesChange } = useEdgesInteractions()
|
||||
const handleVarListChange = useCallback((newList: ValueSelector[]) => {
|
||||
const newInputs = produce(inputs, (draft) => {
|
||||
draft.variables = newList
|
||||
})
|
||||
setInputs(newInputs)
|
||||
handleVariableAssignerEdgesChange(id, newList)
|
||||
}, [inputs, setInputs, id, handleVariableAssignerEdgesChange])
|
||||
}, [inputs, setInputs])
|
||||
|
||||
const handleAddVariable = useCallback(() => {
|
||||
const newInputs = produce(inputs, (draft) => {
|
||||
|
||||
Reference in New Issue
Block a user