@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/organisms/NodeContextMenu.tsx

@@ -1,259 +1,259 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { IconPhoto, IconPlus, IconTrash } from '@tabler/icons-react';
-import { motion } from 'framer-motion';
-import { CirclePicker } from 'react-color';
-
-import { ICardNode } from '../types/card-node';
-
-import { compressImage } from '../utils/compress-img';
-import { colorMap } from '../types/colors';
-import { reverseObj } from '../utils/object';
-import { useDeleteNode, useUpdateNode } from '../utils/node-hooks';
-import { Box, Button, Input, InputLabel } from '@mui/material';
-import { useDiagramType, useSelectedNode } from '../contexts/DiagramProvider';
-import { useCustomReactFlow } from '../hooks/customUseReactFlow';
-import {
-  useNodeColor,
-  useNodeId,
-  useNodeImg,
-  useNodeIsBlock,
-  useSetAddingBlock,
-} from '../contexts/CardDataProvider';
-
-
-export const NodeContextMenu = React.memo(() => {
-  const diagramType = useDiagramType();
-  const isErDiagram = diagramType === 'erd';
-
-  // Use selectors instead of useCardData
-  const nodeId = useNodeId() || '';
-  const isBlock = useNodeIsBlock();
-  const color = useNodeColor();
-  const setAddingBlock = useSetAddingBlock();
-  const nodeImg = useNodeImg();
-
-  const deleteNode = useDeleteNode(nodeId);
-  const selectedNode = useSelectedNode(); // Specific hook for selectedNode
-
-  const selected = isBlock ? 'block' : 'cover';
-  const [colorToggle, setColorToggle] = useState<boolean>(false);
-  const [currentColor, setCurrentColor] = useState<string>(colorMap[color || 'red']);
-
-  const updateNode = useUpdateNode();
-  const setContentType = useCallback(
-    (type: string) => {
-      updateNode(nodeId, (node) => {
-        return { ...node, data: { ...node.data, isBlock: type === 'block' } };
-      });
-    },
-    [updateNode, nodeId],
-  );
-
-  const { setNodes, getNodes } = useCustomReactFlow();
-
-  async function handleImgChange(e: React.ChangeEvent<HTMLInputElement>) {
-    try {
-      const file = e.target.files ? e.target.files[0] : null;
-      if (!file) return;
-
-      const targetWidth = 300;
-      const targetHeight = 300;
-      const quality = 0.7;
-
-      const { blob: _blob, dataUrl } = await compressImage(
-        file,
-        targetWidth,
-        targetHeight,
-        quality,
-      );
-
-      const prevNodes = [...getNodes()] as ICardNode[];
-      const newNodes: ICardNode[] = prevNodes.map((node) => {
-        if (node.id === nodeId) {
-          return {
-            ...node,
-            data: { ...node.data, img: dataUrl },
-          };
-        } else return node;
-      });
-      setNodes(newNodes);
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  function onColorChange(value: string): void {
-    const colToName = reverseObj(colorMap);
-    const color = colToName[value] || value;
-
-    const newNodes = [...getNodes()].map((node) => {
-      if (node.id === nodeId)
-        return { ...node, data: { ...node.data, color: color } } as ICardNode;
-      else return node;
-    });
-    setNodes(newNodes);
-  }
-
-  useEffect(() => {
-    const colToName = reverseObj(colorMap);
-    const c: string = colorMap[color ?? 'grey'];
-    setCurrentColor(c);
-  }, [color]);
-
-  if (selectedNode !== nodeId) {
-    return null;
-  }
-
-  const toolbtn_sx = {
-    border: 'none',
-    outline: 'none',
-    bgcolor: '#fff',
-    position: 'relative',
-    minWidth: 10,
-    p: 0,
-    m: 0,
-  };
-
-  const block_sx = {
-    p: '0.3rem',
-    borderRadius: '0.3rem',
-    transition: 'all 0.1s',
-  };
-
-  return (
-    <Box
-      component={motion.div}
-      initial={{ y: 20, scale: 0.7 }}
-      animate={{ y: 0, scale: 1 }}
-      bgcolor="#333131"
-      position="absolute"
-      top="-3.5rem"
-      boxShadow="rgba(0, 0, 0, 0.35) 0px 5px 15px"
-      fontSize="0.7rem"
-      borderRadius="0.4rem"
-      p="5px"
-      mb="0.5rem"
-      display="flex"
-      zIndex="9999999"
-      left={selected === 'cover' ? '-0.3rem' : '-2.6rem'}
-      sx={{
-        '& div, & button': {
-          cursor: 'pointer',
-        },
-      }}
-    >
-      {/* Cover, Block Box */}
-      {!isErDiagram && (
-        <>
-          <Box
-            sx={{
-              width: '6rem',
-              display: 'flex',
-              padding: '5px',
-              borderRadius: '0.5rem',
-              justifyContent: 'space-between',
-              backgroundColor: 'rgba(0, 0, 0, 0.04)',
-              gap: '5px',
-              boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
-            }}
-          >
-            <Box
-              sx={block_sx}
-              color="#fff"
-              bgcolor={selected === 'cover' ? '#000000' : 'transparent'}
-              onClick={() => setContentType('cover')}
-            >
-              Cover
-            </Box>
-            <Box
-              sx={block_sx}
-              color="#fff"
-              bgcolor={selected === 'block' ? '#000000' : 'transparent'}
-              onClick={() => setContentType('block')}
-            >
-              Block
-            </Box>
-          </Box>
-        </>
-      )}
-
-      <Box
-        display="flex"
-        bgcolor="#333131"
-        ml="0.75rem"
-        gap="0.5rem"
-        p="0rem 0.2rem"
-        alignItems="center"
-        position="relative"
-      >
-        {selected === 'block' && (
-          <Button sx={{ ...toolbtn_sx, bgcolor: '#333131' }} onClick={deleteNode}>
-            <IconTrash color="#FFFF" size={18} />
-          </Button>
-        )}
-        {selected === 'block' && (
-          <Button
-            sx={{ ...toolbtn_sx, bgcolor: '#333131' }}
-            onClick={() => {
-              setAddingBlock(true);
-            }}
-          >
-            <IconPlus color="#FFFF" size={18} />
-          </Button>
-        )}
-
-        {selected === 'cover' && (
-          <Box display="flex" alignItems="center">
-            <Input
-              type="file"
-              inputProps={{ accept: 'image/*' }}
-              id="uploadimg"
-              sx={{ display: 'none' }}
-              onChange={handleImgChange}
-            />
-            <InputLabel htmlFor="uploadimg" sx={{ ...toolbtn_sx, bgcolor: '#333131', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-              <IconPhoto color="#FFFF" size={20} />
-            </InputLabel>
-          </Box>
-        )}
-
-        {selected === 'block' && (
-          <>
-            <Button
-              sx={{ ...toolbtn_sx, bgcolor: '#333131' }}
-              onClick={() => setColorToggle(!colorToggle)}
-            >
-              <Box
-                width="14px"
-                height="14px"
-                position="relative"
-                bgcolor={currentColor}
-                sx={{ borderRadius: '50%' }}
-              />
-            </Button>
-            <Box
-              display={colorToggle ? 'flex' : 'none'}
-              position="absolute"
-              bgcolor="white"
-              top="1rem"
-              zIndex="100"
-              height="8rem"
-              padding="1rem"
-              sx={{
-                transform: 'scale(0.5)',
-                borderRadius: '19px',
-                boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
-              }}
-            >
-              <CirclePicker
-                colors={Object.values(colorMap)}
-                color={currentColor}
-                onChange={(e) => onColorChange(e.hex)}
-              />
-            </Box>
-          </>
-        )}
-      </Box>
-    </Box>
-  );
-});
+import React, { useCallback, useEffect, useState } from 'react';
+import { IconPhoto, IconPlus, IconTrash } from '@tabler/icons-react';
+import { motion } from 'framer-motion';
+import { CirclePicker } from 'react-color';
+
+import { ICardNode } from '../types/card-node';
+
+import { compressImage } from '../utils/compress-img';
+import { colorMap } from '../types/colors';
+import { reverseObj } from '../utils/object';
+import { useDeleteNode, useUpdateNode } from '../utils/node-hooks';
+import { Box, Button, Input, InputLabel } from '@mui/material';
+import { useDiagramType, useSelectedNode } from '../contexts/DiagramProvider';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+import {
+  useNodeColor,
+  useNodeId,
+  useNodeImg,
+  useNodeIsBlock,
+  useSetAddingBlock,
+} from '../contexts/CardDataProvider';
+
+
+export const NodeContextMenu = React.memo(() => {
+  const diagramType = useDiagramType();
+  const isErDiagram = diagramType === 'erd';
+
+  // Use selectors instead of useCardData
+  const nodeId = useNodeId() || '';
+  const isBlock = useNodeIsBlock();
+  const color = useNodeColor();
+  const setAddingBlock = useSetAddingBlock();
+  const nodeImg = useNodeImg();
+
+  const deleteNode = useDeleteNode(nodeId);
+  const selectedNode = useSelectedNode(); // Specific hook for selectedNode
+
+  const selected = isBlock ? 'block' : 'cover';
+  const [colorToggle, setColorToggle] = useState<boolean>(false);
+  const [currentColor, setCurrentColor] = useState<string>(colorMap[color || 'red']);
+
+  const updateNode = useUpdateNode();
+  const setContentType = useCallback(
+    (type: string) => {
+      updateNode(nodeId, (node) => {
+        return { ...node, data: { ...node.data, isBlock: type === 'block' } };
+      });
+    },
+    [updateNode, nodeId],
+  );
+
+  const { setNodes, getNodes } = useCustomReactFlow();
+
+  async function handleImgChange(e: React.ChangeEvent<HTMLInputElement>) {
+    try {
+      const file = e.target.files ? e.target.files[0] : null;
+      if (!file) return;
+
+      const targetWidth = 300;
+      const targetHeight = 300;
+      const quality = 0.7;
+
+      const { blob: _blob, dataUrl } = await compressImage(
+        file,
+        targetWidth,
+        targetHeight,
+        quality,
+      );
+
+      const prevNodes = [...getNodes()] as ICardNode[];
+      const newNodes: ICardNode[] = prevNodes.map((node) => {
+        if (node.id === nodeId) {
+          return {
+            ...node,
+            data: { ...node.data, img: dataUrl },
+          };
+        } else return node;
+      });
+      setNodes(newNodes);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  function onColorChange(value: string): void {
+    const colToName = reverseObj(colorMap);
+    const color = colToName[value] || value;
+
+    const newNodes = [...getNodes()].map((node) => {
+      if (node.id === nodeId)
+        return { ...node, data: { ...node.data, color: color } } as ICardNode;
+      else return node;
+    });
+    setNodes(newNodes);
+  }
+
+  useEffect(() => {
+    const colToName = reverseObj(colorMap);
+    const c: string = colorMap[color ?? 'grey'];
+    setCurrentColor(c);
+  }, [color]);
+
+  if (selectedNode !== nodeId) {
+    return null;
+  }
+
+  const toolbtn_sx = {
+    border: 'none',
+    outline: 'none',
+    bgcolor: '#fff',
+    position: 'relative',
+    minWidth: 10,
+    p: 0,
+    m: 0,
+  };
+
+  const block_sx = {
+    p: '0.3rem',
+    borderRadius: '0.3rem',
+    transition: 'all 0.1s',
+  };
+
+  return (
+    <Box
+      component={motion.div}
+      initial={{ y: 20, scale: 0.7 }}
+      animate={{ y: 0, scale: 1 }}
+      bgcolor="#333131"
+      position="absolute"
+      top="-3.5rem"
+      boxShadow="rgba(0, 0, 0, 0.35) 0px 5px 15px"
+      fontSize="0.7rem"
+      borderRadius="0.4rem"
+      p="5px"
+      mb="0.5rem"
+      display="flex"
+      zIndex="9999999"
+      left={selected === 'cover' ? '-0.3rem' : '-2.6rem'}
+      sx={{
+        '& div, & button': {
+          cursor: 'pointer',
+        },
+      }}
+    >
+      {/* Cover, Block Box */}
+      {!isErDiagram && (
+        <>
+          <Box
+            sx={{
+              width: '6rem',
+              display: 'flex',
+              padding: '5px',
+              borderRadius: '0.5rem',
+              justifyContent: 'space-between',
+              backgroundColor: 'rgba(0, 0, 0, 0.04)',
+              gap: '5px',
+              boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
+            }}
+          >
+            <Box
+              sx={block_sx}
+              color="#fff"
+              bgcolor={selected === 'cover' ? '#000000' : 'transparent'}
+              onClick={() => setContentType('cover')}
+            >
+              Cover
+            </Box>
+            <Box
+              sx={block_sx}
+              color="#fff"
+              bgcolor={selected === 'block' ? '#000000' : 'transparent'}
+              onClick={() => setContentType('block')}
+            >
+              Block
+            </Box>
+          </Box>
+        </>
+      )}
+
+      <Box
+        display="flex"
+        bgcolor="#333131"
+        ml="0.75rem"
+        gap="0.5rem"
+        p="0rem 0.2rem"
+        alignItems="center"
+        position="relative"
+      >
+        {selected === 'block' && (
+          <Button sx={{ ...toolbtn_sx, bgcolor: '#333131' }} onClick={deleteNode}>
+            <IconTrash color="#FFFF" size={18} />
+          </Button>
+        )}
+        {selected === 'block' && (
+          <Button
+            sx={{ ...toolbtn_sx, bgcolor: '#333131' }}
+            onClick={() => {
+              setAddingBlock(true);
+            }}
+          >
+            <IconPlus color="#FFFF" size={18} />
+          </Button>
+        )}
+
+        {selected === 'cover' && (
+          <Box display="flex" alignItems="center">
+            <Input
+              type="file"
+              inputProps={{ accept: 'image/*' }}
+              id="uploadimg"
+              sx={{ display: 'none' }}
+              onChange={handleImgChange}
+            />
+            <InputLabel htmlFor="uploadimg" sx={{ ...toolbtn_sx, bgcolor: '#333131', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <IconPhoto color="#FFFF" size={20} />
+            </InputLabel>
+          </Box>
+        )}
+
+        {selected === 'block' && (
+          <>
+            <Button
+              sx={{ ...toolbtn_sx, bgcolor: '#333131' }}
+              onClick={() => setColorToggle(!colorToggle)}
+            >
+              <Box
+                width="14px"
+                height="14px"
+                position="relative"
+                bgcolor={currentColor}
+                sx={{ borderRadius: '50%' }}
+              />
+            </Button>
+            <Box
+              display={colorToggle ? 'flex' : 'none'}
+              position="absolute"
+              bgcolor="white"
+              top="1rem"
+              zIndex="100"
+              height="8rem"
+              padding="1rem"
+              sx={{
+                transform: 'scale(0.5)',
+                borderRadius: '19px',
+                boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
+              }}
+            >
+              <CirclePicker
+                colors={Object.values(colorMap)}
+                color={currentColor}
+                onChange={(e) => onColorChange(e.hex)}
+              />
+            </Box>
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+});