Sultan
/
Flowise
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a sticky note node under tools

This commit is contained in:
Ilango 2024-01-11 14:37:10 +05:30
parent 6e2bf91c21
commit d70c097341
3 changed files with 110 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/components/nodes/tools/StickyNotes/StickyNote.ts Normal file
View File

@ -0,0 +1,42 @@
import { INode, INodeOutputsValue, INodeParams } from '../../../src/Interface'
class StickyNote implements INode {
label: string
name: string
version: number
description: string
type: string
icon: string
category: string
baseClasses: string[]
inputs: INodeParams[]
disableOutput: boolean
constructor() {
this.label = 'Sticky Note'
this.name = 'stickyNote'
this.version = 1.0
this.type = 'StickyNote'
this.icon = 'stickyNote.svg'
this.category = 'Tools'
this.description = 'Add a note about a node'
this.inputs = [
{
label: 'Note',
name: 'note',
type: 'string',
rows: 4,
placeholder: 'Input your notes',
optional: true
}
]
this.disableOutput = true
this.baseClasses = [this.type]
}
async init(): Promise<any> {
return new StickyNote()
}
}
module.exports = { nodeClass: StickyNote }

5
packages/components/nodes/tools/StickyNotes/stickyNote.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z"/>
<path d="M15 3v6h6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 305 B

120
packages/ui/src/views/canvas/CanvasNode.js
View File

@ -54,6 +54,7 @@ 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)
@ -150,47 +151,49 @@ const CanvasNode = ({ data }) => {
placement='right-start' placement='right-start'
> >
<Box> <Box>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}> {!isNote && (
<Box style={{ width: 50, marginRight: 10, padding: 5 }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
<div <Box style={{ width: 50, marginRight: 10, padding: 5 }}>
style={{ <div
...theme.typography.commonAvatar, style={{
...theme.typography.largeAvatar, ...theme.typography.commonAvatar,
borderRadius: '50%', ...theme.typography.largeAvatar,
backgroundColor: 'white', borderRadius: '50%',
cursor: 'grab' backgroundColor: 'white',
}} cursor: 'grab'
> }}
<img >
style={{ width: '100%', height: '100%', padding: 5, objectFit: 'contain' }} <img
src={`${baseURL}/api/v1/node-icon/${data.name}`} style={{ width: '100%', height: '100%', padding: 5, objectFit: 'contain' }}
alt='Notification' src={`${baseURL}/api/v1/node-icon/${data.name}`}
/> alt='Notification'
</div> />
</Box> </div>
<Box> </Box>
<Typography <Box>
sx={{ <Typography
fontSize: '1rem', sx={{
fontWeight: 500, fontSize: '1rem',
mr: 2 fontWeight: 500,
}} mr: 2
> }}
{data.label} >
</Typography> {data.label}
</Box> </Typography>
{warningMessage && ( </Box>
<> {warningMessage && (
<div style={{ flexGrow: 1 }}></div> <>
<Tooltip title={<span style={{ whiteSpace: 'pre-line' }}>{warningMessage}</span>} placement='top'> <div style={{ flexGrow: 1 }}></div>
<IconButton sx={{ height: 35, width: 35 }}> <Tooltip title={<span style={{ whiteSpace: 'pre-line' }}>{warningMessage}</span>} placement='top'>
<IconAlertTriangle size={35} color='orange' /> <IconButton sx={{ height: 35, width: 35 }}>
</IconButton> <IconAlertTriangle size={35} color='orange' />
</Tooltip> </IconButton>
</> </Tooltip>
)} </>
</div> )}
{(data.inputAnchors.length > 0 || data.inputParams.length > 0) && ( </div>
)}
{(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 }}>
@ -230,22 +233,25 @@ const CanvasNode = ({ data }) => {
</Button> </Button>
</div> </div>
)} )}
<Divider /> {!isNote && (
<Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}> <>
<Typography <Divider />
sx={{ <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
fontWeight: 500, <Typography
textAlign: 'center' sx={{
}} fontWeight: 500,
> textAlign: 'center'
Output }}
</Typography> >
</Box> Output
<Divider /> </Typography>
</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>