@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

@@ -1,345 +0,0 @@
-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

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

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

@@ -1,118 +0,0 @@
-import DraggablePane from '../molecules/DraggablePane';
-import {
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-} from '@mui/material';
-import React, { memo } from 'react';
-import {
-  useDiagram,
-  useHistory,
-  useHistoryIndex,
-} from '../contexts/DiagramProvider';
-
-// Types for history event and list props
-interface HistoryEvent {
-  title: string;
-  forward: { type: string };
-  nodesAndEdges?: boolean;
-}
-
-interface HistoryListItemProps {
-  event: HistoryEvent;
-  index: number;
-  isDisabled: boolean;
-  isSelected: boolean;
-  onSelect: () => void;
-}
-
-const HistoryListItem = memo(
-  ({
-    event,
-    index,
-    isDisabled,
-    isSelected,
-    onSelect,
-  }: HistoryListItemProps) => {
-    return (
-      <ListItem>
-        <ListItemButton
-          onClick={onSelect}
-          disabled={isDisabled}
-          selected={isSelected}
-        >
-          <ListItemIcon>({index})</ListItemIcon>
-          <ListItemText
-            primary={event.title}
-            secondary={`Change Type: ${'nodesAndEdges' in event ? 'Complex' : event.forward.type
-              }`}
-          />
-        </ListItemButton>
-      </ListItem>
-    );
-  },
-);
-
-interface HistoryListProps {
-  history: HistoryEvent[];
-  historyIndex: number;
-  goToHistoryIndex: (index: number) => void;
-}
-
-const HistoryList = memo(
-  ({
-    history,
-    historyIndex,
-    goToHistoryIndex,
-  }: HistoryListProps) => {
-    return (
-      <List dense>
-        {history.map((event, index) => (
-          <HistoryListItem
-            key={index}
-            event={event}
-            index={index}
-            isDisabled={index > historyIndex}
-            isSelected={index === historyIndex}
-            onSelect={() => goToHistoryIndex(index)}
-          />
-        ))}
-      </List>
-    );
-  },
-);
-
-HistoryList.displayName = 'HistoryList';
-
-interface HistoryPaneProps {
-  className?: string;
-}
-
-export const HistoryPane = memo(({ className }: HistoryPaneProps) => {
-  const history = useHistory();
-  const historyIndex = useHistoryIndex();
-  const goToHistoryIndex = useDiagram((state) => state.goToHistoryIndex);
-  const flushUndoStack = useDiagram((state) => state.flushUndoStack);
-
-  return (
-    <DraggablePane
-      title="History"
-      height={(window.innerHeight - 56) * 0.5}
-      anchorPoint="top-right"
-      x={0}
-      y={50}
-    >
-      <HistoryList
-        history={history}
-        historyIndex={historyIndex}
-        goToHistoryIndex={goToHistoryIndex}
-      />
-    </DraggablePane>
-  );
-});
-
-HistoryPane.displayName = 'HistoryPane';
-
-export default HistoryPane;