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

Refactor CanvasNode to use the new sticky node

Browse Source
This commit is contained in:
Ilango
2024-01-12 13:41:58 +05:30
parent 42f80fade2
commit 1544f61407
2 changed files with 63 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/views/canvas/CanvasNode.js
+60 -88
View File
@@ -3,12 +3,13 @@ import { useContext, useState, useEffect } from 'react'
import { useSelector } from 'react-redux' import { useSelector } from 'react-redux'
// material-ui // material-ui
import { styled, useTheme } from '@mui/material/styles' import { useTheme } from '@mui/material/styles'
import { IconButton, Box, Typography, Divider, Button } from '@mui/material' import { IconButton, Box, Typography, Divider, Button } from '@mui/material'
import Tooltip, { tooltipClasses } from '@mui/material/Tooltip' import Tooltip from '@mui/material/Tooltip'
// project imports // project imports
import MainCard from 'ui-component/cards/MainCard' import CardWrapper from './CardWrapper'
import LightTooltip from './LightTooltip'
import NodeInputHandler from './NodeInputHandler' import NodeInputHandler from './NodeInputHandler'
import NodeOutputHandler from './NodeOutputHandler' import NodeOutputHandler from './NodeOutputHandler'
import AdditionalParamsDialog from 'ui-component/dialog/AdditionalParamsDialog' import AdditionalParamsDialog from 'ui-component/dialog/AdditionalParamsDialog'
@@ -19,28 +20,6 @@ import { baseURL } from 'store/constant'
import { IconTrash, IconCopy, IconInfoCircle, IconAlertTriangle } from '@tabler/icons' import { IconTrash, IconCopy, IconInfoCircle, IconAlertTriangle } from '@tabler/icons'
import { flowContext } from 'store/context/ReactFlowContext' import { flowContext } from 'store/context/ReactFlowContext'
const CardWrapper = styled(MainCard)(({ theme }) => ({
background: theme.palette.card.main,
color: theme.darkTextPrimary,
border: 'solid 1px',
borderColor: theme.palette.primary[200] + 75,
width: '300px',
height: 'auto',
padding: '10px',
boxShadow: '0 2px 14px 0 rgb(32 40 45 / 8%)',
'&:hover': {
borderColor: theme.palette.primary.main
}
}))
const LightTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} />)(({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: theme.palette.nodeToolTip.background,
color: theme.palette.nodeToolTip.color,
boxShadow: theme.shadows[1]
}
}))
// ===========================|| CANVAS NODE ||=========================== // // ===========================|| CANVAS NODE ||=========================== //
const CanvasNode = ({ data }) => { const CanvasNode = ({ data }) => {
@@ -54,7 +33,6 @@ const CanvasNode = ({ data }) => {
const [infoDialogProps, setInfoDialogProps] = useState({}) const [infoDialogProps, setInfoDialogProps] = useState({})
const [warningMessage, setWarningMessage] = useState('') const [warningMessage, setWarningMessage] = useState('')
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const isNote = data.type === 'StickyNote'
const handleClose = () => { const handleClose = () => {
setOpen(false) setOpen(false)
@@ -151,49 +129,47 @@ const CanvasNode = ({ data }) => {
placement='right-start' placement='right-start'
> >
<Box> <Box>
{!isNote && ( <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}> <Box style={{ width: 50, marginRight: 10, padding: 5 }}>
<Box style={{ width: 50, marginRight: 10, padding: 5 }}> <div
<div style={{
style={{ ...theme.typography.commonAvatar,
...theme.typography.commonAvatar, ...theme.typography.largeAvatar,
...theme.typography.largeAvatar, borderRadius: '50%',
borderRadius: '50%', backgroundColor: 'white',
backgroundColor: 'white', cursor: 'grab'
cursor: 'grab' }}
}} >
> <img
<img style={{ width: '100%', height: '100%', padding: 5, objectFit: 'contain' }}
style={{ width: '100%', height: '100%', padding: 5, objectFit: 'contain' }} src={`${baseURL}/api/v1/node-icon/${data.name}`}
src={`${baseURL}/api/v1/node-icon/${data.name}`} alt='Notification'
alt='Notification' />
/> </div>
</div> </Box>
</Box> <Box>
<Box> <Typography
<Typography sx={{
sx={{ fontSize: '1rem',
fontSize: '1rem', fontWeight: 500,
fontWeight: 500, mr: 2
mr: 2 }}
}} >
> {data.label}
{data.label} </Typography>
</Typography> </Box>
</Box> {warningMessage && (
{warningMessage && ( <>
<> <div style={{ flexGrow: 1 }}></div>
<div style={{ flexGrow: 1 }}></div> <Tooltip title={<span style={{ whiteSpace: 'pre-line' }}>{warningMessage}</span>} placement='top'>
<Tooltip title={<span style={{ whiteSpace: 'pre-line' }}>{warningMessage}</span>} placement='top'> <IconButton sx={{ height: 35, width: 35 }}>
<IconButton sx={{ height: 35, width: 35 }}> <IconAlertTriangle size={35} color='orange' />
<IconAlertTriangle size={35} color='orange' /> </IconButton>
</IconButton> </Tooltip>
</Tooltip> </>
</> )}
)} </div>
</div> {(data.inputAnchors.length > 0 || data.inputParams.length > 0) && (
)}
{(data.inputAnchors.length > 0 || data.inputParams.length > 0) && !isNote && (
<> <>
<Divider /> <Divider />
<Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}> <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
@@ -233,25 +209,21 @@ const CanvasNode = ({ data }) => {
</Button> </Button>
</div> </div>
)} )}
{!isNote && ( <Divider />
<> <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
<Divider /> <Typography
<Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}> sx={{
<Typography fontWeight: 500,
sx={{ textAlign: 'center'
fontWeight: 500, }}
textAlign: 'center' >
}} Output
> </Typography>
Output </Box>
</Typography> <Divider />
</Box> {data.outputAnchors.map((outputAnchor, index) => (
<Divider /> <NodeOutputHandler key={index} outputAnchor={outputAnchor} data={data} />
{data.outputAnchors.map((outputAnchor, index) => ( ))}
<NodeOutputHandler key={index} outputAnchor={outputAnchor} data={data} />
))}
</>
)}
</Box> </Box>
</LightTooltip> </LightTooltip>
</CardWrapper> </CardWrapper>
packages/ui/src/views/canvas/index.js
+3 -2
View File
@@ -21,6 +21,7 @@ import { useTheme } from '@mui/material/styles'
// project imports // project imports
import CanvasNode from './CanvasNode' import CanvasNode from './CanvasNode'
import ButtonEdge from './ButtonEdge' import ButtonEdge from './ButtonEdge'
import StickyNote from './StickyNote'
import CanvasHeader from './CanvasHeader' import CanvasHeader from './CanvasHeader'
import AddNodes from './AddNodes' import AddNodes from './AddNodes'
import ConfirmDialog from 'ui-component/dialog/ConfirmDialog' import ConfirmDialog from 'ui-component/dialog/ConfirmDialog'
@@ -46,7 +47,7 @@ import useNotifier from 'utils/useNotifier'
// const // const
import { FLOWISE_CREDENTIAL_ID } from 'store/constant' import { FLOWISE_CREDENTIAL_ID } from 'store/constant'
const nodeTypes = { customNode: CanvasNode } const nodeTypes = { customNode: CanvasNode, stickyNote: StickyNote }
const edgeTypes = { buttonedge: ButtonEdge } const edgeTypes = { buttonedge: ButtonEdge }
// ==============================|| CANVAS ||============================== // // ==============================|| CANVAS ||============================== //
@@ -276,7 +277,7 @@ const Canvas = () => {
const newNode = { const newNode = {
id: newNodeId, id: newNodeId,
position, position,
type: 'customNode', type: nodeData.type !== 'StickyNote' ? 'customNode' : 'stickyNote',
data: initNode(nodeData, newNodeId) data: initNode(nodeData, newNodeId)
} }