setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ style={{ position: 'relative', width: '100%', height: '100%' }}
+ >
+
+
+
+
+ {isEditing ? : }
+
{
sx={{
borderColor: getStateColor(),
borderWidth: '1px',
- boxShadow: data.selected ? `0 0 0 1px ${getStateColor()} !important` : 'none',
- minHeight: 60,
- height: 'auto',
+ boxShadow: selected ? `0 0 0 1px ${getStateColor()} !important` : 'none',
+ minHeight: 160,
+ height: '100%',
+ width: '100%',
backgroundColor: getBackgroundColor(),
display: 'flex',
- alignItems: 'center',
+ flexDirection: 'column',
'&:hover': {
- boxShadow: data.selected ? `0 0 0 1px ${getStateColor()} !important` : 'none'
+ boxShadow: selected ? `0 0 0 1px ${getStateColor()} !important` : 'none'
}
}}
border={false}
>
-
- (data.inputs[inputParam.name] = newValue)}
- value={data.inputs[inputParam.name] ?? inputParam.default ?? ''}
- nodes={reactFlowInstance ? reactFlowInstance.getNodes() : []}
- edges={reactFlowInstance ? reactFlowInstance.getEdges() : []}
- nodeId={data.id}
- />
+
+ {isEditing ? (
+ {
+ data.inputs[inputParam.name] = newValue
+ setNoteValue(newValue)
+ }}
+ value={noteValue}
+ nodes={reactFlowInstance ? reactFlowInstance.getNodes() : []}
+ edges={reactFlowInstance ? reactFlowInstance.getEdges() : []}
+ nodeId={data.id}
+ />
+ ) : (
+ {noteValue || '*Add your note here...*'}
+ )}
+
+ setAnchorEl(null)}
+ anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+ transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+ >
+
+ {colorOptions.map((color) => (
+ handleColorSelect(color)}
+ sx={{
+ width: 24,
+ height: 24,
+ borderRadius: '50%',
+ backgroundColor: color,
+ cursor: 'pointer',
+ border: color === nodeColor ? `2px solid ${theme.palette.primary.main}` : '2px solid transparent'
+ }}
+ />
+ ))}
+
+
)
}
StickyNote.propTypes = {
- data: PropTypes.object
+ data: PropTypes.object,
+ selected: PropTypes.bool
}
export default StickyNote
diff --git a/packages/ui/src/views/canvas/StickyNote.jsx b/packages/ui/src/views/canvas/StickyNote.jsx
index 938a18b78f5..8cb5b451eb1 100644
--- a/packages/ui/src/views/canvas/StickyNote.jsx
+++ b/packages/ui/src/views/canvas/StickyNote.jsx
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types'
-import { useContext, useState, memo } from 'react'
+import { useContext, useEffect, useMemo, useState, memo } from 'react'
import { useSelector } from 'react-redux'
+import { NodeResizer } from 'reactflow'
// material-ui
import { useTheme, darken, lighten } from '@mui/material/styles'
@@ -8,21 +9,30 @@ import { useTheme, darken, lighten } from '@mui/material/styles'
// project imports
import NodeCardWrapper from '@/ui-component/cards/NodeCardWrapper'
import NodeTooltip from '@/ui-component/tooltip/NodeTooltip'
-import { IconButton, Box } from '@mui/material'
-import { IconCopy, IconTrash } from '@tabler/icons-react'
+import { IconButton, Box, Popover, Stack } from '@mui/material'
+import { IconCopy, IconMarkdown, IconMarkdownOff, IconPalette, IconTrash } from '@tabler/icons-react'
import { Input } from '@/ui-component/input/Input'
+import { MemoizedReactMarkdown } from '@/ui-component/markdown/MemoizedReactMarkdown'
// const
import { flowContext } from '@/store/context/ReactFlowContext'
+import { DEFAULT_STICKY_NOTE_COLOR } from '@/utils/genericHelper'
-const StickyNote = ({ data }) => {
+const StickyNote = ({ data, selected }) => {
const theme = useTheme()
const canvas = useSelector((state) => state.canvas)
const customization = useSelector((state) => state.customization)
- const { deleteNode, duplicateNode } = useContext(flowContext)
+ const { deleteNode, duplicateNode, reactFlowInstance } = useContext(flowContext)
const [inputParam] = data.inputParams
const [open, setOpen] = useState(false)
+ const [isEditing, setIsEditing] = useState(false)
+ const [anchorEl, setAnchorEl] = useState(null)
+ const colorOptions = useMemo(
+ () => ['#FFE770', '#B4F8C8', '#A0C4FF', '#FFADAD', '#FFD6A5'],
+ []
+ )
+ const [noteValue, setNoteValue] = useState(data.inputs?.[inputParam.name] ?? inputParam.default ?? '')
const handleClose = () => {
setOpen(false)
@@ -32,23 +42,49 @@ const StickyNote = ({ data }) => {
setOpen(true)
}
- const defaultColor = '#FFE770' // fallback color if data.color is not present
+ const defaultColor = DEFAULT_STICKY_NOTE_COLOR // fallback color if data.color is not present
const nodeColor = data.color || defaultColor
+ useEffect(() => {
+ if (!data.color) {
+ data.color = defaultColor
+ }
+ }, [data, defaultColor])
+
+ const currentNoteValue = data.inputs?.[inputParam.name]
+
+ useEffect(() => {
+ const latestValue = currentNoteValue ?? inputParam.default ?? ''
+ setNoteValue(latestValue)
+ }, [currentNoteValue, inputParam.default, inputParam.name])
+
const getBorderColor = () => {
- if (data.selected) return theme.palette.primary.main
+ if (selected) return theme.palette.primary.main
else if (customization?.isDarkMode) return theme.palette.grey[700]
else return theme.palette.grey[900] + 50
}
const getBackgroundColor = () => {
if (customization?.isDarkMode) {
- return data.selected ? darken(nodeColor, 0.7) : darken(nodeColor, 0.8)
+ return selected ? darken(nodeColor, 0.4) : darken(nodeColor, 0.5)
} else {
- return data.selected ? lighten(nodeColor, 0.1) : lighten(nodeColor, 0.2)
+ return selected ? lighten(nodeColor, 0.1) : lighten(nodeColor, 0.2)
}
}
+ const handleColorButtonClick = (event) => {
+ setAnchorEl(event.currentTarget)
+ }
+
+ const handleColorSelect = (color) => {
+ data.color = color
+ setAnchorEl(null)
+ }
+
+ const handleToggleEditing = () => {
+ setIsEditing((prev) => !prev)
+ }
+
return (
<>
{
sx={{
padding: 0,
borderColor: getBorderColor(),
- backgroundColor: getBackgroundColor()
+ backgroundColor: getBackgroundColor(),
+ width: '100%',
+ height: '100%',
+ minWidth: 220,
+ minHeight: 160,
+ position: 'relative',
+ display: 'flex',
+ flexDirection: 'column'
}}
border={false}
>
+
+
+
+
+
+
+ {isEditing ? : }
+
{
@@ -101,29 +163,61 @@ const StickyNote = ({ data }) => {
>
-