Add new node type for canvas - sticky note

2026-06-28 17:01:00 +03:00 · 2024-01-12 13:34:52 +05:30
parent 6462ba0fae
commit 42f80fade2
3 changed files with 138 additions and 0 deletions
@@ -0,0 +1,21 @@
+// material-ui
+import { styled } from '@mui/material/styles'
+
+// project imports
+import MainCard from '../../ui-component/cards/MainCard'
+
+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
+    }
+}))
+
+export default CardWrapper
@@ -0,0 +1,12 @@
+import { styled } from '@mui/material/styles'
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'
+
+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]
+    }
+}))
+
+export default LightTooltip
@@ -0,0 +1,105 @@
+import PropTypes from 'prop-types'
+import { useContext, useState } from 'react'
+import { useSelector } from 'react-redux'
+
+// material-ui
+import { useTheme } from '@mui/material/styles'
+
+// project imports
+import CardWrapper from './CardWrapper'
+import LightTooltip from './LightTooltip'
+import { IconButton, Box } from '@mui/material'
+import { IconCopy, IconTrash } from '@tabler/icons'
+import { Input } from 'ui-component/input/Input'
+
+// const
+import { flowContext } from '../../store/context/ReactFlowContext'
+
+const StickyNote = ({ data }) => {
+    const theme = useTheme()
+    const canvas = useSelector((state) => state.canvas)
+    const { deleteNode, duplicateNode } = useContext(flowContext)
+    const [inputParam] = data.inputParams
+
+    const [open, setOpen] = useState(false)
+
+    const handleClose = () => {
+        setOpen(false)
+    }
+
+    const handleOpen = () => {
+        setOpen(true)
+    }
+
+    console.log(data.id)
+
+    return (
+        <>
+            <CardWrapper
+                content={false}
+                sx={{
+                    padding: 0,
+                    borderColor: data.selected ? theme.palette.primary.main : theme.palette.text.secondary,
+                    backgroundColor: data.selected ? '#FFDC00' : '#FFE770'
+                }}
+                border={false}
+            >
+                <LightTooltip
+                    open={!canvas.canvasDialogShow && open}
+                    onClose={handleClose}
+                    onOpen={handleOpen}
+                    disableFocusListener={true}
+                    title={
+                        <div
+                            style={{
+                                background: 'transparent',
+                                display: 'flex',
+                                flexDirection: 'column'
+                            }}
+                        >
+                            <IconButton
+                                title='Duplicate'
+                                onClick={() => {
+                                    duplicateNode(data.id)
+                                }}
+                                sx={{ height: '35px', width: '35px', '&:hover': { color: theme?.palette.primary.main } }}
+                                color={theme?.customization?.isDarkMode ? theme.colors?.paper : 'inherit'}
+                            >
+                                <IconCopy />
+                            </IconButton>
+                            <IconButton
+                                title='Delete'
+                                onClick={() => {
+                                    deleteNode(data.id)
+                                }}
+                                sx={{ height: '35px', width: '35px', '&:hover': { color: 'red' } }}
+                                color={theme?.customization?.isDarkMode ? theme.colors?.paper : 'inherit'}
+                            >
+                                <IconTrash />
+                            </IconButton>
+                        </div>
+                    }
+                    placement='right-start'
+                >
+                    <Box>
+                        <Input
+                            key={data.id}
+                            inputParam={inputParam}
+                            onChange={(newValue) => (data.inputs[inputParam.name] = newValue)}
+                            value={data.inputs[inputParam.name] ?? inputParam.default ?? ''}
+                            nodes={inputParam?.acceptVariable && reactFlowInstance ? reactFlowInstance.getNodes() : []}
+                            edges={inputParam?.acceptVariable && reactFlowInstance ? reactFlowInstance.getEdges() : []}
+                            nodeId={data.id}
+                        />
+                    </Box>
+                </LightTooltip>
+            </CardWrapper>
+        </>
+    )
+}
+
+StickyNote.propTypes = {
+    data: PropTypes.object
+}
+
+export default StickyNote