@flowuent-org/diagramming-core 1.1.0 → 1.1.1

package/packages/diagrams/src/lib/organisms/CustomEdge/useEdgePath.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback } from 'react';
+import { getBezierPath, getSmoothStepPath, useStore } from '@xyflow/react';
+import { getEdgeParams } from '../../utils/nodeutils';
+import { ICardNode } from '../../types/card-node';
+import { useDiagram, useDiagramType, useDiagramNodes } from '../../contexts/DiagramProvider';
+import { DiagramStore } from '../../contexts/diagramStoreTypes';
+import { EdgeTypes } from './custom-edge.type';
+
+export const useEdgePath = (
+  source: string,
+  target: string,
+  type: EdgeTypes,
+  style?: React.CSSProperties,
+) => {
+  const sourceNode = useStore(
+    useCallback((store: any) => {
+      const lookup: Map<string, unknown> | undefined =
+        (store as any).nodeLookup ?? (store as any).nodeInternals;
+      return lookup?.get(source);
+    }, [source]),
+  ) as unknown as ICardNode;
+  const targetNode = useStore(
+    useCallback((store: any) => {
+      const lookup: Map<string, unknown> | undefined =
+        (store as any).nodeLookup ?? (store as any).nodeInternals;
+      return lookup?.get(target);
+    }, [target]),
+  ) as unknown as ICardNode;
+
+  const { edgeShapeType } = useDiagram<DiagramStore>();
+  const diagramType = useDiagramType();
+  const nodes = useDiagramNodes();
+
+  if (!sourceNode || !targetNode) {
+    return {
+      edgePath: null,
+      labelX: 0,
+      labelY: 0,
+      edgeParams: null,
+      sourceNode: null,
+      targetNode: null,
+    };
+  }
+
+  const edgeParams = getEdgeParams(
+    sourceNode,
+    targetNode,
+    type,
+    parseInt(style?.strokeWidth?.toString() || '10', 10),
+    diagramType,
+    nodes
+  );
+
+  // Debug logging for edge path calculation
+  // console.log('useEdgePath Debug:', {
+  //   sourceId: source,
+  //   targetId: target,
+  //   edgeType: type,
+  //   diagramType,
+  //   edgeShapeType,
+  //   edgeParams,
+  //   sourceNode: sourceNode ? {
+  //     id: sourceNode.id,
+  //     width: sourceNode.width || sourceNode.measured?.width,
+  //     height: sourceNode.height || sourceNode.measured?.height,
+  //     position: sourceNode.position
+  //   } : null,
+  //   targetNode: targetNode ? {
+  //     id: targetNode.id,
+  //     width: targetNode.width || targetNode.measured?.width,
+  //     height: targetNode.height || targetNode.measured?.height,
+  //     position: targetNode.position
+  //   } : null
+  // });
+
+  const [edgePath, labelX, labelY] =
+    edgeShapeType === 'curly'
+      ? getBezierPath(edgeParams)
+      : getSmoothStepPath(edgeParams);
+
+  // Debug logging for final edge path
+  // console.log('useEdgePath Final:', {
+  //   sourceId: source,
+  //   targetId: target,
+  //   edgePath,
+  //   labelX,
+  //   labelY,
+  //   edgeShapeType
+  // });
+
+  return {
+    edgePath,
+    labelX,
+    labelY,
+    edgeParams,
+    sourceNode,
+    targetNode,
+  };
+};

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

@@ -0,0 +1,345 @@
+import React, { HTMLAttributes, useState, useCallback } from 'react';
+import { Panel } from '@xyflow/react';
+import { useDownload, useExportJson, useImportJson } from '../utils/model-hooks';
+import { Card, IconButton, Input, Stack, styled, Switch, Tooltip, useMediaQuery, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { useDiagram, useDiagramEdges, useDiagramNodes, useLayoutDirection, useSetLayoutDirection } from '../contexts/DiagramProvider';
+import {
+  RiArrowGoBackFill as UndoIcon,
+  RiArrowGoForwardFill as RedoIcon,
+  RiBrushFill as BroomIcon,
+  RiCodeBoxFill as CodeIcon,
+  RiDownload2Fill as DownloadIcon,
+  RiUpload2Fill as ImportIcon,
+  RiUploadCloud2Fill as ExportIcon,
+} from 'react-icons/ri';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import CodeModal from './CodeModal';
+import { flowToCode } from '../utils/flow-to-js';
+import { useTranslation } from 'react-i18next';
+
+export type PanelPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
+export type PanelProps = HTMLAttributes<HTMLDivElement> & {
+  position: PanelPosition;
+};
+
+interface DownloadPanelProps extends Omit<PanelProps, 'position'> {
+  position?: PanelProps['position'];
+  customButtons?: React.ReactNode;
+  hideUndo?: boolean;
+  hideRedo?: boolean;
+  hideDownload?: boolean;
+  hideExportJson?: boolean;
+  hideImportJson?: boolean;
+  hideEdgeTypeSwitch?: boolean;
+  hideLayoutDirection?: boolean;
+  offsetX?: number;
+  offsetY?: number;
+}
+
+// Memoized subcomponent for the Clear button
+const ClearButton = React.memo(() => {
+  const reset = useDiagram((state) => state.reset);
+  const { t } = useTranslation();
+  return (
+    <Tooltip title={t('tooltip.clear')}>
+      <IconButton size="small" onClick={reset}>
+        <BroomIcon />
+      </IconButton>
+    </Tooltip>
+  );
+});
+
+// Memoized subcomponent for the Undo button
+const UndoButton = React.memo(() => {
+  const undo = useDiagram((state) => state.undo);
+  const { t } = useTranslation();
+  return (
+    <Tooltip title={t('tooltip.undo')}>
+      <IconButton size="small" onClick={undo}>
+        <UndoIcon />
+      </IconButton>
+    </Tooltip>
+  );
+});
+
+// Memoized subcomponent for the Redo button
+const RedoButton = React.memo(() => {
+  const redo = useDiagram((state) => state.redo);
+  const { t } = useTranslation();
+  return (
+    <Tooltip title={t('tooltip.redo')}>
+      <IconButton size="small" onClick={redo}>
+        <RedoIcon />
+      </IconButton>
+    </Tooltip>
+  );
+});
+
+// Memoized subcomponent for the Download button
+const DownloadButton = React.memo(() => {
+  const download = useDownload();
+  const { t } = useTranslation();
+  return (
+    <Tooltip title={t('tooltip.download')}>
+      <IconButton size="small" onClick={download}>
+        <DownloadIcon />
+      </IconButton>
+    </Tooltip>
+  );
+});
+
+// Memoized subcomponent for the Export JSON button
+const ExportJsonButton = React.memo(() => {
+  const exportJson = useExportJson();
+  const { t } = useTranslation();
+  return (
+    <Tooltip title={t('tooltip.exportJson')}>
+      <IconButton size="small" onClick={exportJson}>
+        <ExportIcon />
+      </IconButton>
+    </Tooltip>
+  );
+});
+
+// Memoized subcomponent for the Export Code button
+const ExportCodeButton = React.memo(() => {
+  const nodes = useDiagramNodes();
+  const edges = useDiagramEdges();
+  const [codeModalOpen, setCodeModalOpen] = useState(false);
+  const [generatedCode, setGeneratedCode] = useState('');
+  const { t } = useTranslation();
+
+  const exportCode = useCallback(() => {
+    const { mainCode, externalFunctions } = flowToCode({
+      nodes: nodes,
+      edges,
+    });
+    setGeneratedCode([externalFunctions, mainCode].join('\n'));
+    setCodeModalOpen(true);
+  }, [nodes, edges]); // add nodes, edges as dependencies
+
+  return (
+    <>
+      <Tooltip title={t('tooltip.exportCode')}>
+        <IconButton size="small" onClick={exportCode}>
+          <CodeIcon />
+        </IconButton>
+      </Tooltip>
+      <CodeModal open={codeModalOpen} onClose={() => setCodeModalOpen(false)} code={generatedCode} />
+    </>
+  );
+});
+
+// Memoized subcomponent for the Import JSON button
+const ImportJsonButton = React.memo(() => {
+  const importJson = useImportJson();
+  const { t } = useTranslation();
+  return (
+    <>
+      <Input
+        onChange={importJson}
+        type="file"
+        id="json-input"
+        style={{ display: 'none', }}
+        inputProps={{ accept: 'application/JSON' }}
+      />
+      <Tooltip title={t('tooltip.importJson')}>
+        <IconButton size="small" component="label" htmlFor="json-input">
+          <ImportIcon />
+        </IconButton>
+      </Tooltip>
+    </>
+  );
+});
+
+// Memoized subcomponent for the Edge Type Switch
+const EdgeTypeSwitch = React.memo(() => {
+  const edgeShapeType = useDiagram((state) => state.edgeShapeType);
+  const setEdgeShapeType = useDiagram((state) => state.setEdgeShapeType);
+  const { t } = useTranslation();
+
+  const handleEdgeTypeSwitch = useCallback(() => {
+    setEdgeShapeType(edgeShapeType === 'curly' ? 'step' : 'curly');
+  }, [edgeShapeType, setEdgeShapeType]);
+
+  return (
+    <Tooltip title={t('tooltip.toggleEdgeType')}>
+      <IconButton size="small">
+        Edge Curls:
+        <Switch
+          checked={edgeShapeType === 'curly'}
+          onChange={handleEdgeTypeSwitch}
+          inputProps={{ 'aria-label': 'Edge Type Switch' }}
+        />
+      </IconButton>
+    </Tooltip>
+  );
+});
+
+// Memoized subcomponent for the Layout Direction Toggle
+const LayoutDirectionToggle = React.memo(() => {
+  const layoutDirection = useLayoutDirection();
+  const setLayoutDirection = useSetLayoutDirection();
+  const { t } = useTranslation();
+
+  const handleLayoutDirectionChange = useCallback(
+    (event: React.MouseEvent<HTMLElement>, newDirection: 'DOWN' | 'RIGHT') => {
+      if (newDirection !== null) {
+        setLayoutDirection(newDirection);
+        // Trigger a re-layout by dispatching a custom event
+        window.dispatchEvent(new CustomEvent('layoutDirectionChanged', {
+          detail: { direction: newDirection }
+        }));
+      }
+    },
+    [setLayoutDirection]
+  );
+
+  return (
+    <ToggleButtonGroup
+      value={layoutDirection}
+      exclusive
+      onChange={handleLayoutDirectionChange}
+      aria-label="layout direction"
+      size="small"
+      sx={{
+        backgroundColor: 'transparent',
+        boxShadow: 'none',
+        borderRadius: 3,
+        gap: 1,
+        border: 'none',
+      }}
+    >
+      <ToggleButton
+        value="DOWN"
+        aria-label="vertical layout"
+        sx={{
+          p: 0.5,
+          minWidth: 32,
+          borderRadius: 2,
+          bgcolor: 'transparent',
+          color: '#fff',
+          border: 'none',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+          mr: 0,
+          '&.Mui-selected': {
+            bgcolor: '#393939',
+            color: '#fff',
+            border: 'none',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.20)',
+          },
+          '&:hover': {
+            border: 'none',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.20)',
+          },
+        }}
+      >
+        <BarChartIcon fontSize="small" sx={{ color: 'inherit', transform: 'rotate(90deg)' }} />
+      </ToggleButton>
+      <ToggleButton
+        value="RIGHT"
+        aria-label="horizontal layout"
+        sx={{
+          p: 0.5,
+          minWidth: 32,
+          borderRadius: 2,
+          bgcolor: 'transparent',
+          color: '#fff',
+          border: 'none',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+          '&.Mui-selected': {
+            bgcolor: '#393939',
+            color: '#fff',
+            border: 'none',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.20)',
+          },
+          '&:hover': {
+            border: 'none',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.20)',
+          },
+        }}
+      >
+        <BarChartIcon fontSize="small" sx={{ color: 'inherit' }} />
+      </ToggleButton>
+    </ToggleButtonGroup>
+  );
+});
+
+// Helper to map offset to style based on position
+function getOffsetStyle(position: PanelPosition, offsetX: number, offsetY: number) {
+  switch (position) {
+    case 'top-left':
+      return { top: offsetY, left: offsetX };
+    case 'top-center':
+      return { top: offsetY, left: '50%', transform: 'translateX(-50%)' };
+    case 'top-right':
+      return { top: offsetY, right: offsetX };
+    case 'bottom-left':
+      return { bottom: offsetY, left: offsetX };
+    case 'bottom-center':
+      return { bottom: offsetY, left: '50%', transform: 'translateX(-50%)' };
+    case 'bottom-right':
+      return { bottom: offsetY, right: offsetX };
+    default:
+      return {};
+  }
+}
+
+// Main DownloadPanel component
+export const DownloadPanel: React.FC<DownloadPanelProps> = React.memo(
+  ({
+    position = 'top-left',
+    customButtons,
+    hideUndo = false,
+    hideRedo = false,
+    hideDownload = false,
+    hideExportJson = false,
+    hideImportJson = false,
+    hideEdgeTypeSwitch = false,
+    hideLayoutDirection = false,
+    offsetX = 230,
+    offsetY = 50,
+    ...rest
+  }) => {
+    const smScreen = useMediaQuery('only screen and (min-width:768px)');
+    const { t } = useTranslation();
+
+    const StyledPanel = styled(Panel)`
+      display: flex;
+      flex-direction: ${smScreen ? 'row' : 'column'};
+      gap: 1rem;
+    `;
+
+    return (
+      <StyledPanel
+        position={position}
+        style={getOffsetStyle(position, offsetX, offsetY)}
+        {...rest}
+      >
+        <Card sx={{ backgroundColor: '#232323' }}>
+          <Stack direction="row" sx={{ height: 30 }} spacing={2}>
+            <ClearButton />
+            {!hideUndo && <UndoButton />}
+            {!hideRedo && <RedoButton />}
+            {!hideDownload && <DownloadButton />}
+            {!hideExportJson && <ExportJsonButton />}
+            {!hideExportJson && <ExportCodeButton />}
+            {!hideImportJson && <ImportJsonButton />}
+            {!hideEdgeTypeSwitch && <EdgeTypeSwitch />}
+            {!hideLayoutDirection && <LayoutDirectionToggle />}
+            {customButtons}
+          </Stack>
+        </Card>
+      </StyledPanel>
+    );
+  },
+);
+
+export default DownloadPanel;

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

@@ -0,0 +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>
+  );
+}