@flowuent-org/diagramming-core 1.0.8 → 1.1.0

package/packages/diagrams/src/lib/components/ControlEdgeList.tsx

@@ -1,304 +0,0 @@
-import React, { useMemo } from 'react';
-import { List, ListItem, ListItemButton, Tooltip, Box, Typography } from '@mui/material';
-import { Node, Edge } from '@xyflow/react';
-import { CollaborationNode, CollaborationEdge, CollabEdgeData } from '../types/collaboration-types';
-import { StateMachineNode, StateMachineEdge, StateMachineEdgeData } from '../types/state-machine-types';
-import { UseCaseNodeData, UseCaseEdgeData } from '../types/usecase-types';
-import { SystemFlowNode, SystemFlowEdge, SystemFlowEdgeData } from '../types/system-flow-types';
-
-// Union type for all possible node types
-type DiagramNode = CollaborationNode | StateMachineNode | Node<UseCaseNodeData> | SystemFlowNode;
-
-// Union type for all possible edge data types
-type DiagramEdgeData = CollabEdgeData | StateMachineEdgeData | UseCaseEdgeData | SystemFlowEdgeData;
-
-// Union type for all possible edge types
-type DiagramEdge = CollaborationEdge | StateMachineEdge | Edge<UseCaseNodeData> | SystemFlowEdge;
-
-// Types for props
-interface ControlEdgeListProps {
-    edges: Edge[];
-    nodes: DiagramNode[];
-    type: 'collaboration' | 'usecase' | 'state' | 'systemFlow';
-    onEditEdge?: (edge: Edge) => void;
-    t?: (key: string) => string; // for i18n in collaboration
-    nodeTypes: { id: string; name: string; icon: React.ReactNode | null }[];
-}
-
-// Type guards for edge data
-const isCollabEdgeData = (data: DiagramEdgeData): data is CollabEdgeData => {
-    return 'variant' in data && typeof data.variant === 'string' && ['message', 'self-message', 'return-message'].includes(data.variant);
-};
-
-const isStateMachineEdgeData = (data: DiagramEdgeData): data is StateMachineEdgeData => {
-    return 'label' in data && !('variant' in data) && !('type' in data);
-};
-
-const isUseCaseEdgeData = (data: DiagramEdgeData): data is UseCaseEdgeData => {
-    return 'type' in data && typeof data.type === 'string' && ['association', 'include', 'extend'].includes(data.type);
-};
-
-const isSystemFlowEdgeData = (data: DiagramEdgeData): data is SystemFlowEdgeData => {
-    return 'isTwoWay' in data || 'reverseEdgeId' in data || 'arrowHeadLeft' in data || 'arrowHeadRight' in data;
-};
-
-// Helper functions
-const getNodeLabel = (nodes: DiagramNode[], id: string): string => {
-    const node = nodes.find((n) => n.id === id);
-    return node?.data?.label || id;
-};
-
-const getNodeTypeInfo = (nodeTypes: { id: string; name: string; icon: React.ReactNode | null }[], typeId: string): { name: string; icon: React.ReactNode | null } => {
-    return nodeTypes.find((nt) => nt.id === typeId) || { name: typeId, icon: null };
-};
-
-const getEdgeTypeLabel = (edge: Edge, t?: (key: string) => string): string => {
-    if (!t) {
-        const edgeData = edge.data as DiagramEdgeData;
-        if (isCollabEdgeData(edgeData)) {
-            return edgeData.variant || edge.type || '';
-        }
-        if (isUseCaseEdgeData(edgeData)) {
-            return edgeData.type || edge.type || '';
-        }
-        return edge.type || '';
-    }
-
-    const edgeData = edge.data as DiagramEdgeData;
-    let variant: string;
-
-    if (isCollabEdgeData(edgeData)) {
-        variant = edgeData.variant || edge.type || '';
-    } else if (isUseCaseEdgeData(edgeData)) {
-        variant = edgeData.type || edge.type || '';
-    } else {
-        variant = edge.type || '';
-    }
-
-    switch (variant) {
-        case 'message':
-            return t('collaborationDiagram.edgeType.message');
-        case 'self-message':
-            return t('collaborationDiagram.edgeType.selfMessage');
-        case 'return-message':
-            return t('collaborationDiagram.edgeType.returnMessage');
-        default:
-            return t(`collaborationDiagram.edgeType.${variant}`);
-    }
-};
-
-const getEdgeLabel = (edge: Edge): string | undefined => {
-    const edgeData = edge.data as DiagramEdgeData;
-    if (isCollabEdgeData(edgeData)) {
-        return edgeData.label;
-    }
-    if (isStateMachineEdgeData(edgeData)) {
-        return edgeData.label;
-    }
-    if (isUseCaseEdgeData(edgeData)) {
-        return edgeData.label;
-    }
-    if (isSystemFlowEdgeData(edgeData)) {
-        // SystemFlow edges don't have labels, return undefined
-        return undefined;
-    }
-    return undefined;
-};
-
-const getEdgeType = (edge: Edge): string => {
-    const edgeData = edge.data as DiagramEdgeData;
-    if (isCollabEdgeData(edgeData)) {
-        return edgeData.variant || edge.type || '';
-    }
-    if (isUseCaseEdgeData(edgeData)) {
-        return edgeData.type || edge.type || '';
-    }
-    if (isSystemFlowEdgeData(edgeData)) {
-        return edge.type || 'systemFlow';
-    }
-    return edge.type || '';
-};
-
-const ControlEdgeList: React.FC<ControlEdgeListProps> = React.memo((props) => {
-    const {
-        edges,
-        nodes,
-        type,
-        onEditEdge,
-        t,
-        nodeTypes,
-    } = props;
-
-    // Memoize node and nodeType maps for efficient lookup
-    const nodeMap = useMemo(() => {
-        const map: Record<string, DiagramNode> = {};
-        nodes.forEach(n => { map[n.id] = n; });
-        return map;
-    }, [nodes]);
-
-    const nodeTypeMap = useMemo(() => {
-        const map: Record<string, { name: string; icon: React.ReactNode | null }> = {};
-        nodeTypes.forEach(nt => { map[nt.id] = nt; });
-        return map;
-    }, [nodeTypes]);
-
-    // Unified edge row rendering for collaboration, state, usecase, and systemFlow
-    if (type === 'collaboration' || type === 'state' || type === 'usecase' || type === 'systemFlow') {
-        // For collaboration, filter only message/self-message/return-message edges
-        const filteredEdges = type === 'collaboration'
-            ? edges.filter((edge) => {
-                const edgeData = edge.data as CollabEdgeData;
-                return ['message', 'self-message', 'return-message'].includes(edgeData?.variant || edge.type || '');
-            })
-            : edges;
-        return (
-            <List dense disablePadding>
-                {filteredEdges.length === 0 ? (
-                    <ListItem disablePadding>
-                        <Box sx={{ p: 2, textAlign: 'center', width: '100%' }}>
-                            <Typography variant="body2" color="text.secondary">
-                                {type === 'systemFlow' ? 'No flows created yet. Add nodes and connect them to see flows here.' : 'No edges found.'}
-                            </Typography>
-                        </Box>
-                    </ListItem>
-                ) : (
-                    filteredEdges.map((edge, idx) => {
-                        const source = nodes.find((n: DiagramNode) => n.id === edge.source);
-                        const target = nodes.find((n: DiagramNode) => n.id === edge.target);
-                        const label = getEdgeLabel(edge);
-                        let centerContent: string;
-                        if (type === 'collaboration') {
-                            centerContent = getEdgeTypeLabel(edge, t);
-                        } else if (type === 'state' && label) {
-                            centerContent = label || '';
-                        } else if (type === 'systemFlow') {
-                            // For systemFlow, show edge type and additional info
-                            const edgeData = edge.data as SystemFlowEdgeData;
-                            const edgeInfo = [];
-                            if (edgeData?.isTwoWay) edgeInfo.push('Two-way');
-                            if (edgeData?.arrowHeadLeft === 'v') edgeInfo.push('←');
-                            if (edgeData?.arrowHeadRight === 'v') edgeInfo.push('→');
-                            centerContent = edgeInfo.length > 0 ? edgeInfo.join(' ') : 'Flow';
-                        } else {
-                            centerContent = getEdgeType(edge);
-                        }
-                        const ListItemContent = (
-                            <ListItem
-                                disablePadding
-                                key={edge.id}
-                                sx={{
-                                    alignItems: 'center',
-                                    width: '100%',
-                                    py: 0.5,
-                                    transition: 'background 0.2s',
-                                    cursor: 'pointer',
-                                    borderRadius: 1,
-                                    '&:hover': {
-                                        bgcolor: 'action.hover',
-                                        '.edge-list-cell': {
-                                            whiteSpace: 'normal',
-                                            textOverflow: 'unset',
-                                            overflow: 'visible',
-                                            wordBreak: 'break-word',
-                                            height: 'auto',
-                                            minHeight: '24px',
-                                        },
-                                    },
-                                }}
-                                onClick={() => onEditEdge && onEditEdge(edge)}
-                            >
-                                <Box
-                                    sx={{
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        width: '100%',
-                                        p: 1,
-                                    }}
-                                >
-                                    {/* Source node label */}
-                                    <Box
-                                        sx={{
-                                            flex: '0 0 33%',
-                                            width: '33%',
-                                            maxWidth: 160,
-                                            minWidth: 0,
-                                            textAlign: 'left',
-                                            overflow: 'hidden',
-                                            textOverflow: 'ellipsis',
-                                            fontWeight: 600,
-                                            fontSize: 13,
-                                            whiteSpace: 'nowrap',
-                                            height: '24px',
-                                            lineHeight: 1.2,
-                                            transition: 'all 0.2s',
-                                        }}
-                                    >
-                                        {source?.data?.label || source?.id}
-                                    </Box>
-                                    {/* Center: edge type or label */}
-                                    <Box
-                                        sx={{
-                                            flex: '0 0 33%',
-                                            width: '33%',
-                                            maxWidth: 160,
-                                            minWidth: 0,
-                                            textAlign: 'center',
-                                            overflow: 'hidden',
-                                            textOverflow: 'ellipsis',
-                                            fontWeight: 500,
-                                            fontSize: 12,
-                                            color: 'grey.700',
-                                            whiteSpace: 'nowrap',
-                                            height: '24px',
-                                            lineHeight: 1.2,
-                                            transition: 'all 0.2s',
-                                        }}
-                                    >
-                                        {centerContent}
-                                        {type !== 'state' && type !== 'collaboration' && label && (
-                                            <Typography variant="caption" sx={{ display: 'block', color: 'text.secondary', fontSize: 11 }}>
-                                                {label}
-                                            </Typography>
-                                        )}
-                                    </Box>
-                                    {/* Target node label */}
-                                    <Box
-                                        sx={{
-                                            flex: '0 0 33%',
-                                            width: '33%',
-                                            maxWidth: 160,
-                                            minWidth: 0,
-                                            textAlign: 'right',
-                                            overflow: 'hidden',
-                                            textOverflow: 'ellipsis',
-                                            fontWeight: 600,
-                                            fontSize: 13,
-                                            whiteSpace: 'nowrap',
-                                            height: '24px',
-                                            lineHeight: 1.2,
-                                            transition: 'all 0.2s',
-                                        }}
-                                    >
-                                        {target?.data?.label || target?.id}
-                                    </Box>
-                                </Box>
-                            </ListItem>
-                        );
-                        if (type === 'collaboration' && label) {
-                            return (
-                                <Tooltip key={edge.id} title={label ? `${t?.('collaborationDiagram.label')}: ${label}` : ''} placement="top" arrow>
-                                    {ListItemContent}
-                                </Tooltip>
-                            );
-                        }
-                        return ListItemContent;
-                    })
-                )}
-            </List>
-        );
-    }
-
-    return null;
-});
-
-export default ControlEdgeList; 

package/packages/diagrams/src/lib/components/CreateFunctionModal.tsx

@@ -1,265 +0,0 @@
-import { useState, useMemo, useCallback, useEffect, Fragment, memo } from 'react';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-import Stack from '@mui/material/Stack';
-import { Box } from '@mui/material';
-import Tooltip from '@mui/material/Tooltip';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import MenuItem from '@mui/material/MenuItem';
-import { generateFunctionCode, ARITHMETIC_OPERATORS, FunctionArgument } from '../utils/functionGenerator';
-import { useTranslation } from 'react-i18next';
-import FunctionModalTooltip from './FunctionModalTooltip';
-
-interface CreateFunctionModalProps {
-    open: boolean;
-    onClose: () => void;
-    onCreate?: (func: { name: string; args: string[]; code: string }) => void;
-    initialValues?: { name: string; args: string[]; code: string };
-    theme?: {
-        backgroundColor?: string;
-        textColor?: string;
-        accentColor?: string;
-    };
-}
-
-const CreateFunctionModal = ({
-    open,
-    onClose,
-    onCreate,
-    initialValues,
-    theme = {
-        backgroundColor: '#232323',
-        textColor: '#fff',
-        accentColor: '#6c47ff'
-    }
-}: CreateFunctionModalProps) => {
-    const { t } = useTranslation();
-    const [name, setName] = useState(initialValues?.name || '');
-    const [argCount, setArgCount] = useState(initialValues?.args?.length || 2);
-    const [args, setArgs] = useState<FunctionArgument[]>(
-        initialValues?.args
-            ? initialValues.args.map((n, i) => ({ name: n, operator: '+' }))
-            : Array.from({ length: 2 }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' }))
-    );
-
-    useEffect(() => {
-        setName(initialValues?.name || '');
-        const count = initialValues?.args?.length || 2;
-        setArgCount(count);
-        setArgs(
-            initialValues?.args
-                ? initialValues.args.map((n, i) => ({ name: n, operator: '+' }))
-                : Array.from({ length: count }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' }))
-        );
-    }, [initialValues, open]);
-
-    useEffect(() => {
-        setArgs(prevArgs => {
-            const newArgs = [...prevArgs];
-            if (argCount > prevArgs.length) {
-                for (let i = prevArgs.length; i < argCount; i++) {
-                    newArgs.push({ name: String.fromCharCode(97 + i), operator: '+' });
-                }
-            } else if (argCount < prevArgs.length) {
-                newArgs.length = argCount;
-            }
-            return newArgs;
-        });
-    }, [argCount]);
-
-    const handleArgNameChange = useCallback((idx: number, value: string) => {
-        setArgs(args => args.map((arg, i) => i === idx ? { ...arg, name: value } : arg));
-    }, []);
-
-    const handleArgOperatorChange = useCallback((idx: number, value: string) => {
-        setArgs(args => args.map((arg, i) => i === idx ? { ...arg, operator: value } : arg));
-    }, []);
-
-    const handleSubmit = useCallback(() => {
-        if (name.trim()) {
-            const code = generateFunctionCode(args);
-            const argNames = args.map(arg => arg.name);
-            onCreate?.({ name: name.trim(), args: argNames, code });
-            setName('');
-            setArgCount(2);
-            setArgs(Array.from({ length: 2 }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' })));
-            onClose();
-        }
-    }, [name, args, onCreate, onClose]);
-
-    const handleClose = useCallback(() => {
-        setName('');
-        setArgCount(2);
-        setArgs(Array.from({ length: 2 }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' })));
-        onClose();
-    }, [onClose]);
-
-    // Memoize the initial args array creation
-    const initialArgsArray = useMemo(() => Array.from({ length: 2 }, (_, i) => ({ name: String.fromCharCode(97 + i), operator: '+' })), []);
-
-    // Memoize the argument count menu items
-    const argCountMenuItems = useMemo(() => (
-        [...Array(10)].map((_, i) => (
-            <MenuItem key={i + 1} value={i + 1} sx={{ backgroundColor: '#232323', color: '#fff' }}>{i + 1}</MenuItem>
-        ))
-    ), []);
-
-    // Memoize the operator menu items
-    const operatorMenuItems = useMemo(() => (
-        ARITHMETIC_OPERATORS.map(op => (
-            <MenuItem key={op} value={op} sx={{ backgroundColor: '#232323', color: '#fff' }}>{op}</MenuItem>
-        ))
-    ), []);
-
-    return (
-        <Dialog
-            open={open}
-            onClose={handleClose}
-            maxWidth="md"
-            fullWidth
-            PaperProps={{
-                style: {
-                    background: theme.backgroundColor,
-                    color: theme.textColor,
-                    minWidth: 700
-                }
-            }}
-        >
-            <DialogTitle sx={{
-                color: theme.textColor,
-                background: theme.backgroundColor,
-                display: 'flex',
-                alignItems: 'center',
-                gap: 1
-            }}>
-                {initialValues ? t('createFunctionModal.editTitle') : t('createFunctionModal.title')}
-                <Tooltip
-                    title={<FunctionModalTooltip backgroundColor={theme.backgroundColor || '#232323'} />}
-                    placement="right"
-                    arrow
-                >
-                    <InfoOutlinedIcon sx={{ color: '#aaa', cursor: 'pointer', fontSize: 20 }} />
-                </Tooltip>
-            </DialogTitle>
-            <DialogContent sx={{ background: theme.backgroundColor, mt: 2 }}>
-                <Stack spacing={2}>
-                    <TextField
-                        label={t('createFunctionModal.functionName')}
-                        style={{ marginTop: '10px' }}
-                        value={name}
-                        onChange={e => setName(e.target.value)}
-                        fullWidth
-                        InputLabelProps={{ style: { color: '#aaa' } }}
-                        InputProps={{ style: { color: theme.textColor, background: theme.backgroundColor } }}
-                        variant="outlined"
-                    />
-                    <TextField
-                        select
-                        label={t('createFunctionModal.numberOfArguments')}
-                        value={argCount}
-                        onChange={e => setArgCount(Number(e.target.value))}
-                        fullWidth
-                        InputLabelProps={{ style: { color: '#aaa' } }}
-                        InputProps={{ style: { color: theme.textColor, background: theme.backgroundColor } }}
-                        variant="outlined"
-                        size="small"
-                        sx={{ width: 180 }}
-                        SelectProps={{
-                            MenuProps: {
-                                PaperProps: {
-                                    sx: {
-                                        backgroundColor: theme.backgroundColor,
-                                        color: theme.textColor,
-                                    },
-                                },
-                            },
-                        }}
-                    >
-                        {argCountMenuItems}
-                    </TextField>
-                    <Box>
-                        <Stack direction="row" spacing={1} alignItems="center" sx={{ width: '100%', flexWrap: 'wrap' }}>
-                            {args.map((arg, idx) => (
-                                <Fragment key={idx}>
-                                    <TextField
-                                        value={arg.name}
-                                        onChange={e => handleArgNameChange(idx, e.target.value)}
-                                        InputLabelProps={{ style: { color: '#aaa', fontSize: 12 } }}
-                                        InputProps={{
-                                            style: {
-                                                color: theme.textColor,
-                                                background: theme.backgroundColor,
-                                                fontSize: 13,
-                                                padding: 2
-                                            }
-                                        }}
-                                        variant="outlined"
-                                        size="small"
-                                        sx={{ width: 60, minWidth: 40 }}
-                                    />
-                                    {idx < args.length - 1 && (
-                                        <TextField
-                                            select
-                                            value={args[idx + 1].operator}
-                                            onChange={e => handleArgOperatorChange(idx + 1, e.target.value)}
-                                            InputLabelProps={{ style: { color: '#aaa', fontSize: 12 } }}
-                                            InputProps={{
-                                                style: {
-                                                    color: theme.textColor,
-                                                    background: theme.backgroundColor,
-                                                    fontSize: 13,
-                                                    padding: 2
-                                                }
-                                            }}
-                                            variant="outlined"
-                                            size="small"
-                                            sx={{ width: 60, minWidth: 50 }}
-                                            SelectProps={{
-                                                MenuProps: {
-                                                    PaperProps: {
-                                                        sx: {
-                                                            backgroundColor: theme.backgroundColor,
-                                                            color: theme.textColor,
-                                                        },
-                                                    },
-                                                },
-                                            }}
-                                        >
-                                            {operatorMenuItems}
-                                        </TextField>
-                                    )}
-                                </Fragment>
-                            ))}
-                        </Stack>
-                    </Box>
-                    <Box sx={{ mt: 2, color: '#aaa', fontFamily: 'monospace', fontSize: 14 }}>
-                        <b>{t('createFunctionModal.generatedCode')}</b> {generateFunctionCode(args)}
-                    </Box>
-                </Stack>
-            </DialogContent>
-            <DialogActions sx={{ background: theme.backgroundColor }}>
-                <Button
-                    onClick={handleClose}
-                    color="secondary"
-                    sx={{ color: theme.textColor }}
-                >
-                    {t('createFunctionModal.buttons.cancel')}
-                </Button>
-                <Button
-                    onClick={handleSubmit}
-                    color="primary"
-                    variant="contained"
-                    sx={{ background: theme.accentColor, color: theme.textColor }}
-                >
-                    {initialValues ? t('createFunctionModal.buttons.save') : t('createFunctionModal.buttons.create')}
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
-};
-
-export default memo(CreateFunctionModal);