farcasclaudiu/Flowise
1
0
Fork 0
mirror of https://github.com/farcasclaudiu/Flowise.git synced 2026-06-28 21:00:58 +03:00
Code Issues Packages Projects Releases Wiki Activity

add if else node and logic

Browse Source
This commit is contained in:
Henry
2023-12-19 17:48:45 +00:00
parent 9840a2df7e
commit 0e8f3ea572
11 changed files with 2086 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/ui-component/json/SelectVariable.js
+5 -1
View File
@@ -147,7 +147,11 @@ const SelectVariable = ({ availableNodesForVariable, disabled = false, onSelectA
node.data.inputs.variableName ??
node.data.id
}
secondary={`${selectedOutputAnchor?.label ?? 'output'} from ${node.data.label}`}
secondary={
node.data.name === 'ifElseFunction'
? `${node.data.description}`
: `${selectedOutputAnchor?.label ?? 'output'} from ${node.data.label}`
}
/>
</ListItem>
</ListItemButton>
packages/ui/src/utils/genericHelper.js
-9
View File
@@ -182,15 +182,6 @@ export const initNode = (nodeData, newNodeId) => {
return nodeData
}
export const getEdgeLabelName = (source) => {
const sourceSplit = source.split('-')
if (sourceSplit.length && sourceSplit[0].includes('ifElse')) {
const outputAnchorsIndex = sourceSplit[sourceSplit.length - 1]
return outputAnchorsIndex === '0' ? 'true' : 'false'
}
return ''
}
export const isValidConnection = (connection, reactFlowInstance) => {
const sourceHandle = connection.sourceHandle
const targetHandle = connection.targetHandle
packages/ui/src/views/canvas/NodeInputHandler.js
+2 -2
View File
@@ -330,11 +330,11 @@ const NodeInputHandler = ({ inputAnchor, inputParam, data, disabled = false, isA
{inputParam.type === 'code' && (
<>
<div style={{ height: '5px' }}></div>
<div style={{ height: '200px' }}>
<div style={{ height: inputParam.rows ? '100px' : '200px' }}>
<CodeEditor
disabled={disabled}
value={data.inputs[inputParam.name] ?? inputParam.default ?? ''}
height='200px'
height={inputParam.rows ? '100px' : '200px'}
theme={customization.isDarkMode ? 'dark' : 'light'}
lang={'js'}
placeholder={inputParam.placeholder}
packages/ui/src/views/canvas/NodeOutputHandler.js
+97 -35
View File
@@ -73,42 +73,104 @@ const NodeOutputHandler = ({ outputAnchor, data, disabled = false }) => {
</Box>
</>
)}
{outputAnchor.type === 'options' && outputAnchor.options && outputAnchor.options.length > 0 && (
<>
<CustomWidthTooltip
placement='right'
title={
outputAnchor.options.find((opt) => opt.name === data.outputs?.[outputAnchor.name])?.type ?? outputAnchor.type
}
>
<Handle
type='source'
position={Position.Right}
id={outputAnchor.options.find((opt) => opt.name === data.outputs?.[outputAnchor.name])?.id ?? ''}
isValidConnection={(connection) => isValidConnection(connection, reactFlowInstance)}
style={{
height: 10,
width: 10,
backgroundColor: data.selected ? theme.palette.primary.main : theme.palette.text.secondary,
top: position
}}
/>
</CustomWidthTooltip>
<Box sx={{ p: 2, textAlign: 'end' }}>
<Dropdown
disabled={disabled}
disableClearable={true}
name={outputAnchor.name}
options={outputAnchor.options}
onSelect={(newValue) => {
setDropdownValue(newValue)
data.outputs[outputAnchor.name] = newValue
}}
value={data.outputs[outputAnchor.name] ?? outputAnchor.default ?? 'choose an option'}
/>
</Box>
</>
{data.name === 'ifElseFunction' && outputAnchor.type === 'options' && outputAnchor.options && (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<CustomWidthTooltip
placement='right'
title={
outputAnchor.options.find((opt) => opt.name === data.outputs?.[outputAnchor.name])?.type ??
outputAnchor.type
}
>
<Handle
type='source'
position={Position.Right}
key={outputAnchor.options.find((opt) => opt.name === 'returnTrue')?.id ?? ''}
id={outputAnchor.options.find((opt) => opt.name === 'returnTrue')?.id ?? ''}
isValidConnection={(connection) => isValidConnection(connection, reactFlowInstance)}
style={{
height: 10,
width: 10,
backgroundColor: data.selected ? theme.palette.primary.main : theme.palette.text.secondary,
top: position - 25
}}
/>
</CustomWidthTooltip>
<div style={{ flex: 1 }}></div>
<Box sx={{ p: 2, textAlign: 'end' }}>
<Typography>True</Typography>
</Box>
</div>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<CustomWidthTooltip
placement='right'
title={
outputAnchor.options.find((opt) => opt.name === data.outputs?.[outputAnchor.name])?.type ??
outputAnchor.type
}
>
<Handle
type='source'
position={Position.Right}
key={outputAnchor.options.find((opt) => opt.name === 'returnFalse')?.id ?? ''}
id={outputAnchor.options.find((opt) => opt.name === 'returnFalse')?.id ?? ''}
isValidConnection={(connection) => isValidConnection(connection, reactFlowInstance)}
style={{
height: 10,
width: 10,
backgroundColor: data.selected ? theme.palette.primary.main : theme.palette.text.secondary,
top: position + 25
}}
/>
</CustomWidthTooltip>
<div style={{ flex: 1 }}></div>
<Box sx={{ p: 2, textAlign: 'end' }}>
<Typography>False</Typography>
</Box>
</div>
</div>
)}
{data.name !== 'ifElseFunction' &&
outputAnchor.type === 'options' &&
outputAnchor.options &&
outputAnchor.options.length > 0 && (
<>
<CustomWidthTooltip
placement='right'
title={
outputAnchor.options.find((opt) => opt.name === data.outputs?.[outputAnchor.name])?.type ??
outputAnchor.type
}
>
<Handle
type='source'
position={Position.Right}
id={outputAnchor.options.find((opt) => opt.name === data.outputs?.[outputAnchor.name])?.id ?? ''}
isValidConnection={(connection) => isValidConnection(connection, reactFlowInstance)}
style={{
height: 10,
width: 10,
backgroundColor: data.selected ? theme.palette.primary.main : theme.palette.text.secondary,
top: position
}}
/>
</CustomWidthTooltip>
<Box sx={{ p: 2, textAlign: 'end' }}>
<Dropdown
disabled={disabled}
disableClearable={true}
name={outputAnchor.name}
options={outputAnchor.options}
onSelect={(newValue) => {
setDropdownValue(newValue)
data.outputs[outputAnchor.name] = newValue
}}
value={data.outputs[outputAnchor.name] ?? outputAnchor.default ?? 'choose an option'}
/>
</Box>
</>
)}
</div>
)
}
packages/ui/src/views/canvas/index.js
+2 -3
View File
@@ -40,7 +40,7 @@ import useConfirm from 'hooks/useConfirm'
import { IconX } from '@tabler/icons'
// utils
import { getUniqueNodeId, initNode, getEdgeLabelName, rearrangeToolsOrdering, getUpsertDetails } from 'utils/genericHelper'
import { getUniqueNodeId, initNode, rearrangeToolsOrdering, getUpsertDetails } from 'utils/genericHelper'
import useNotifier from 'utils/useNotifier'
// const
@@ -100,8 +100,7 @@ const Canvas = () => {
const newEdge = {
...params,
type: 'buttonedge',
id: `${params.source}-${params.sourceHandle}-${params.target}-${params.targetHandle}`,
data: { label: getEdgeLabelName(params.sourceHandle) }
id: `${params.source}-${params.sourceHandle}-${params.target}-${params.targetHandle}`
}
const targetNodeId = params.targetHandle.split('-')[0]