@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,243 +1,243 @@
-import { Box, Button, Card, Typography } from '@mui/material';
-import { EdgeTypes } from './CustomEdge/custom-edge.type';
-import MarkerSelector from '../atoms/MarkerSelector';
-import { CirclePicker } from 'react-color';
-import { IconTrash } from '@tabler/icons-react';
-import React, { useEffect, useState } from 'react';
-import { colorMappings } from './CustomEdge/custom-edge.params';
-import { useDeleteEdge, useSelectedMarkers, ExtendedEdge } from '../utils/edge-hooks';
-import { Edge } from '@xyflow/react';
-import { useDiagramType } from '../contexts/DiagramProvider';
-import { ICardNode } from '../types/card-node';
-import { Markers } from '../assets/markers/markers.type';
-import { useCustomReactFlow } from '../hooks/customUseReactFlow';
-
-export default function EdgeModal({
-  type,
-  id,
-  labelX,
-  labelY,
-  sourceNode,
-  targetNode,
-}: {
-  type: EdgeTypes;
-  id: string;
-  labelX: number;
-  labelY: number;
-  sourceNode: ICardNode;
-  targetNode: ICardNode;
-}) {
-  const foreignObjectSizes = [EdgeTypes.Default].includes(type)
-    ? { width: 150, height: 80, x: 0, y: 0 }
-    : { width: 150, height: 50, x: 0, y: 0 };
-  const { getEdges, setEdges, getEdge, screenToFlowPosition, addNodes } =
-    useCustomReactFlow();
-
-  const currentEdge = getEdge(id) as Edge;
-  const { selectedEdgeMarkerEnd, selectedEdgeMarkerStart, updateEdgeMarker } =
-    useSelectedMarkers(currentEdge as ExtendedEdge);
-  const handleEdgeDelete = useDeleteEdge(id);
-
-  const diagramType = useDiagramType();
-  const isErDiagram = diagramType === 'erd';
-  const [colorToggle, setColorToggle] = useState(false);
-  const [color, setColor] = useState<string | undefined>(
-    currentEdge.style?.stroke,
-  );
-  const onColorChange = (value: string): void => {
-    setColor(value);
-    setColorToggle(!colorToggle);
-    const colorValue = colorMappings[value] || value;
-
-    const newEdges = getEdges().map((e) => {
-      if (e.id === id) {
-        return {
-          ...e,
-          style: { ...e.style, stroke: colorValue },
-          markerEnd: e.markerEnd
-            ? typeof e.markerEnd === 'string'
-              ? e.markerEnd
-              : { ...e.markerEnd, color: colorValue }
-            : undefined,
-        };
-      } else {
-        return e;
-      }
-    });
-
-    setEdges(newEdges);
-  };
-
-  useEffect(() => {
-    if (isErDiagram) {
-      if (!Object.values(Markers).includes(currentEdge.markerStart as Markers)) {
-        updateEdgeMarker('markerStart', Markers.One);
-      }
-      if (!Object.values(Markers).includes(currentEdge.markerEnd as Markers)) {
-        updateEdgeMarker('markerEnd', Markers.One);
-      }
-    }
-  }, [currentEdge.markerEnd, currentEdge.markerStart]);
-
-  return (
-    <Card
-      elevation={3}
-      sx={{
-        backgroundColor: '#333131',
-        zIndex: 9999,
-        p: 1,
-        m: 0,
-        borderRadius: '8px',
-        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-        border: '1px solid rgba(0, 0, 0, 0.1)',
-        position: 'relative',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          backdropFilter: 'blur(2px)',
-          zIndex: -1
-        }
-      }}
-      component="foreignObject"
-      width={
-        '400px'
-      }
-      height={foreignObjectSizes.height + 40}
-      x={labelX - foreignObjectSizes.x}
-      y={labelY - foreignObjectSizes.y}
-      style={{
-        overflow: 'visible',
-        pointerEvents: 'all',
-      }}
-      requiredExtensions="http://www.w3.org/1999/xhtml"
-    >
-      <Box
-        sx={{
-          padding: 1,
-          alignItems: "center",
-          position: "relative",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          gap: 1,
-          zIndex: 9999
-        }}
-      >
-        {isErDiagram ? (
-          <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 1 }}>
-            {[EdgeTypes.Default, EdgeTypes.Source2Bend].includes(type) && (
-              <MarkerSelector
-                label={sourceNode?.data?.title || ''}
-                onChange={(value) => updateEdgeMarker('markerStart', value)}
-                value={selectedEdgeMarkerStart?.toString() || 'none'}
-              />
-            )}
-            {[EdgeTypes.Default, EdgeTypes.Bend2Target].includes(type) && (
-              <MarkerSelector
-                label={targetNode?.data?.title || ''}
-                keyPrefix={1}
-                onChange={(value) => updateEdgeMarker('markerEnd', value)}
-                value={selectedEdgeMarkerEnd?.toString() || 'none'}
-              />
-            )}
-          </Box>
-        ) : (
-          <Box
-            sx={{
-              width: '100%',
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              gap: 2
-            }}
-          >
-            <Box
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                gap: 1,
-                position: 'relative',
-                width: '100%'
-              }}
-            >
-              <Typography
-                sx={{
-                  fontSize: '0.75rem',
-                  fontWeight: 500,
-                  color: '#2c3e50'
-                }}
-              >
-                Color
-              </Typography>
-              <Button
-                onClick={() => setColorToggle(!colorToggle)}
-                sx={{
-                  minWidth: 'unset',
-                  padding: '4px',
-                  border: '1px solid #e2e8f0',
-                  borderRadius: '4px',
-                  backgroundColor: 'white',
-                  '&:hover': {
-                    backgroundColor: '#f7fafc'
-                  }
-                }}
-              >
-                <Box
-                  sx={{
-                    borderRadius: '50%',
-                    width: '20px',
-                    height: '20px',
-                    bgcolor: color,
-                    cursor: 'pointer',
-                    border: '1px solid rgba(0,0,0,0.1)'
-                  }}
-                />
-              </Button>
-              <Box
-                sx={{
-                  position: "absolute",
-                  display: colorToggle ? 'flex' : 'none',
-                  bgcolor: "white",
-                  left: "-3.5rem",
-                  top: "100%",
-                  zIndex: "100",
-                  height: "5rem",
-                  borderRadius: "8px",
-                  boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-                  p: "1rem",
-                  transform: "scale(0.5)",
-                  border: '1px solid rgba(0,0,0,0.1)'
-                }}
-              >
-                <CirclePicker
-                  colors={['#000000', '#4169E1', '#FFD700', '#FF4500']}
-                  color={color}
-                  onChange={(e) => onColorChange(e.hex)}
-                />
-              </Box>
-            </Box>
-            <Box
-              sx={{
-                cursor: 'pointer',
-                color: '#e53e3e',
-                transition: 'color 0.2s ease',
-                '&:hover': {
-                  color: '#c53030'
-                }
-              }}
-            >
-              <IconTrash
-                onClick={handleEdgeDelete}
-              />
-            </Box>
-          </Box>
-        )}
-      </Box>
-    </Card>
-  );
-}
+import { Box, Button, Card, Typography } from '@mui/material';
+import { EdgeTypes } from './CustomEdge/custom-edge.type';
+import MarkerSelector from '../atoms/MarkerSelector';
+import { CirclePicker } from 'react-color';
+import { IconTrash } from '@tabler/icons-react';
+import React, { useEffect, useState } from 'react';
+import { colorMappings } from './CustomEdge/custom-edge.params';
+import { useDeleteEdge, useSelectedMarkers, ExtendedEdge } from '../utils/edge-hooks';
+import { Edge } from '@xyflow/react';
+import { useDiagramType } from '../contexts/DiagramProvider';
+import { ICardNode } from '../types/card-node';
+import { Markers } from '../assets/markers/markers.type';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+
+export default function EdgeModal({
+  type,
+  id,
+  labelX,
+  labelY,
+  sourceNode,
+  targetNode,
+}: {
+  type: EdgeTypes;
+  id: string;
+  labelX: number;
+  labelY: number;
+  sourceNode: ICardNode;
+  targetNode: ICardNode;
+}) {
+  const foreignObjectSizes = [EdgeTypes.Default].includes(type)
+    ? { width: 150, height: 80, x: 0, y: 0 }
+    : { width: 150, height: 50, x: 0, y: 0 };
+  const { getEdges, setEdges, getEdge, screenToFlowPosition, addNodes } =
+    useCustomReactFlow();
+
+  const currentEdge = getEdge(id) as Edge;
+  const { selectedEdgeMarkerEnd, selectedEdgeMarkerStart, updateEdgeMarker } =
+    useSelectedMarkers(currentEdge as ExtendedEdge);
+  const handleEdgeDelete = useDeleteEdge(id);
+
+  const diagramType = useDiagramType();
+  const isErDiagram = diagramType === 'erd';
+  const [colorToggle, setColorToggle] = useState(false);
+  const [color, setColor] = useState<string | undefined>(
+    currentEdge.style?.stroke,
+  );
+  const onColorChange = (value: string): void => {
+    setColor(value);
+    setColorToggle(!colorToggle);
+    const colorValue = colorMappings[value] || value;
+
+    const newEdges = getEdges().map((e) => {
+      if (e.id === id) {
+        return {
+          ...e,
+          style: { ...e.style, stroke: colorValue },
+          markerEnd: e.markerEnd
+            ? typeof e.markerEnd === 'string'
+              ? e.markerEnd
+              : { ...e.markerEnd, color: colorValue }
+            : undefined,
+        };
+      } else {
+        return e;
+      }
+    });
+
+    setEdges(newEdges);
+  };
+
+  useEffect(() => {
+    if (isErDiagram) {
+      if (!Object.values(Markers).includes(currentEdge.markerStart as Markers)) {
+        updateEdgeMarker('markerStart', Markers.One);
+      }
+      if (!Object.values(Markers).includes(currentEdge.markerEnd as Markers)) {
+        updateEdgeMarker('markerEnd', Markers.One);
+      }
+    }
+  }, [currentEdge.markerEnd, currentEdge.markerStart]);
+
+  return (
+    <Card
+      elevation={3}
+      sx={{
+        backgroundColor: '#333131',
+        zIndex: 9999,
+        p: 1,
+        m: 0,
+        borderRadius: '8px',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+        border: '1px solid rgba(0, 0, 0, 0.1)',
+        position: 'relative',
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backdropFilter: 'blur(2px)',
+          zIndex: -1
+        }
+      }}
+      component="foreignObject"
+      width={
+        '400px'
+      }
+      height={foreignObjectSizes.height + 40}
+      x={labelX - foreignObjectSizes.x}
+      y={labelY - foreignObjectSizes.y}
+      style={{
+        overflow: 'visible',
+        pointerEvents: 'all',
+      }}
+      requiredExtensions="http://www.w3.org/1999/xhtml"
+    >
+      <Box
+        sx={{
+          padding: 1,
+          alignItems: "center",
+          position: "relative",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          gap: 1,
+          zIndex: 9999
+        }}
+      >
+        {isErDiagram ? (
+          <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 1 }}>
+            {[EdgeTypes.Default, EdgeTypes.Source2Bend].includes(type) && (
+              <MarkerSelector
+                label={sourceNode?.data?.title || ''}
+                onChange={(value) => updateEdgeMarker('markerStart', value)}
+                value={selectedEdgeMarkerStart?.toString() || 'none'}
+              />
+            )}
+            {[EdgeTypes.Default, EdgeTypes.Bend2Target].includes(type) && (
+              <MarkerSelector
+                label={targetNode?.data?.title || ''}
+                keyPrefix={1}
+                onChange={(value) => updateEdgeMarker('markerEnd', value)}
+                value={selectedEdgeMarkerEnd?.toString() || 'none'}
+              />
+            )}
+          </Box>
+        ) : (
+          <Box
+            sx={{
+              width: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 2
+            }}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: 1,
+                position: 'relative',
+                width: '100%'
+              }}
+            >
+              <Typography
+                sx={{
+                  fontSize: '0.75rem',
+                  fontWeight: 500,
+                  color: '#2c3e50'
+                }}
+              >
+                Color
+              </Typography>
+              <Button
+                onClick={() => setColorToggle(!colorToggle)}
+                sx={{
+                  minWidth: 'unset',
+                  padding: '4px',
+                  border: '1px solid #e2e8f0',
+                  borderRadius: '4px',
+                  backgroundColor: 'white',
+                  '&:hover': {
+                    backgroundColor: '#f7fafc'
+                  }
+                }}
+              >
+                <Box
+                  sx={{
+                    borderRadius: '50%',
+                    width: '20px',
+                    height: '20px',
+                    bgcolor: color,
+                    cursor: 'pointer',
+                    border: '1px solid rgba(0,0,0,0.1)'
+                  }}
+                />
+              </Button>
+              <Box
+                sx={{
+                  position: "absolute",
+                  display: colorToggle ? 'flex' : 'none',
+                  bgcolor: "white",
+                  left: "-3.5rem",
+                  top: "100%",
+                  zIndex: "100",
+                  height: "5rem",
+                  borderRadius: "8px",
+                  boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+                  p: "1rem",
+                  transform: "scale(0.5)",
+                  border: '1px solid rgba(0,0,0,0.1)'
+                }}
+              >
+                <CirclePicker
+                  colors={['#000000', '#4169E1', '#FFD700', '#FF4500']}
+                  color={color}
+                  onChange={(e) => onColorChange(e.hex)}
+                />
+              </Box>
+            </Box>
+            <Box
+              sx={{
+                cursor: 'pointer',
+                color: '#e53e3e',
+                transition: 'color 0.2s ease',
+                '&:hover': {
+                  color: '#c53030'
+                }
+              }}
+            >
+              <IconTrash
+                onClick={handleEdgeDelete}
+              />
+            </Box>
+          </Box>
+        )}
+      </Box>
+    </Card>
+  );
+}