Refactor CanvasNode to use the new sticky node

packages/ui/src/views/canvas/CanvasNode.js

@@ -3,12 +3,13 @@ import { useContext, useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 
 // 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 Tooltip, { tooltipClasses } from '@mui/material/Tooltip'
+import Tooltip from '@mui/material/Tooltip'
 
 // project imports
-import MainCard from 'ui-component/cards/MainCard'
+import CardWrapper from './CardWrapper'
+import LightTooltip from './LightTooltip'
 import NodeInputHandler from './NodeInputHandler'
 import NodeOutputHandler from './NodeOutputHandler'
 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 { 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 ||=========================== //
 
 const CanvasNode = ({ data }) => {
@@ -54,7 +33,6 @@ const CanvasNode = ({ data }) => {
     const [infoDialogProps, setInfoDialogProps] = useState({})
     const [warningMessage, setWarningMessage] = useState('')
     const [open, setOpen] = useState(false)
-    const isNote = data.type === 'StickyNote'
 
     const handleClose = () => {
         setOpen(false)
@@ -151,7 +129,6 @@ const CanvasNode = ({ data }) => {
                     placement='right-start'
                 >
                     <Box>
-                        {!isNote && (
                         <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                             <Box style={{ width: 50, marginRight: 10, padding: 5 }}>
                                 <div
@@ -192,8 +169,7 @@ const CanvasNode = ({ data }) => {
                                 </>
                             )}
                         </div>
-                        )}
-                        {(data.inputAnchors.length > 0 || data.inputParams.length > 0) && !isNote && (
+                        {(data.inputAnchors.length > 0 || data.inputParams.length > 0) && (
                             <>
                                 <Divider />
                                 <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
@@ -233,8 +209,6 @@ const CanvasNode = ({ data }) => {
                                 </Button>
                             </div>
                         )}
-                        {!isNote && (
-                            <>
                         <Divider />
                         <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
                             <Typography
@@ -250,8 +224,6 @@ const CanvasNode = ({ data }) => {
                         {data.outputAnchors.map((outputAnchor, index) => (
                             <NodeOutputHandler key={index} outputAnchor={outputAnchor} data={data} />
                         ))}
-                            </>
-                        )}
                     </Box>
                 </LightTooltip>
             </CardWrapper>

packages/ui/src/views/canvas/index.js

@@ -21,6 +21,7 @@ import { useTheme } from '@mui/material/styles'
 // project imports
 import CanvasNode from './CanvasNode'
 import ButtonEdge from './ButtonEdge'
+import StickyNote from './StickyNote'
 import CanvasHeader from './CanvasHeader'
 import AddNodes from './AddNodes'
 import ConfirmDialog from 'ui-component/dialog/ConfirmDialog'
@@ -46,7 +47,7 @@ import useNotifier from 'utils/useNotifier'
 // const
 import { FLOWISE_CREDENTIAL_ID } from 'store/constant'
 
-const nodeTypes = { customNode: CanvasNode }
+const nodeTypes = { customNode: CanvasNode, stickyNote: StickyNote }
 const edgeTypes = { buttonedge: ButtonEdge }
 
 // ==============================|| CANVAS ||============================== //
@@ -276,7 +277,7 @@ const Canvas = () => {
             const newNode = {
                 id: newNodeId,
                 position,
-                type: 'customNode',
+                type: nodeData.type !== 'StickyNote' ? 'customNode' : 'stickyNote',
                 data: initNode(nodeData, newNodeId)
             }