@flowuent-org/diagramming-core 1.1.0 → 1.1.2

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

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

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