@flowuent-org/diagramming-core 1.3.10 → 1.4.0

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); 

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

@@ -1,288 +0,0 @@
-import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
-import { Box, Button, Modal, Stack, TextField, Typography, MenuItem, Select, SelectChangeEvent } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-interface Argument {
-    name: string;
-    type: string;
-}
-
-const DEFAULT_ARG_NAMES = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
-const ARGUMENT_TYPES = ['number', 'string', 'boolean', 'array'];
-
-interface CustomCodeModalProps {
-    open: boolean;
-    onClose: () => void;
-    code: string;
-    onCodeChange: (code: string) => void;
-    functionName?: string;
-    parameters?: (string | { name: string; type: string })[];
-    title?: string;
-    description?: string;
-    onSaveAsFunction?: (func: { name: string; args: { name: string; type: string }[]; code: string }) => void;
-}
-
-// Memoize the modal styles
-const useModalStyles = () => useMemo(() => ({
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    width: '80%',
-    maxHeight: 600,
-    overflowY: 'auto',
-    bgcolor: '#232323',
-    color: '#fff',
-    boxShadow: 24,
-    p: 4,
-    borderRadius: 2,
-    '&::-webkit-scrollbar': {
-        width: '10px',
-        background: '#181818',
-    },
-    '&::-webkit-scrollbar-thumb': {
-        background: '#393939',
-        borderRadius: '8px',
-    },
-    scrollbarColor: '#393939 #181818',
-    scrollbarWidth: 'thin',
-}), []);
-
-const CustomCodeModal: React.FC<CustomCodeModalProps> = React.memo(({
-    open,
-    onClose,
-    code = '',
-    onCodeChange,
-    functionName = '',
-    parameters = [],
-    title,
-    description,
-    onSaveAsFunction,
-}) => {
-    const { t } = useTranslation();
-    const [execResult, setExecResult] = useState<string | null>(null);
-    const [execError, setExecError] = useState<string | null>(null);
-    const fileInputRef = useRef<HTMLInputElement>(null);
-    const modalStyles = useModalStyles();
-
-    const handleImportCode = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-        const file = event.target.files && event.target.files[0];
-        if (file) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                const text = e.target?.result as string;
-                if (typeof text === 'string') {
-                    onCodeChange(text);
-                }
-            };
-            reader.onerror = () => {
-                alert('Failed to read file.');
-            };
-            reader.readAsText(file);
-        }
-        event.target.value = '';
-    }, [onCodeChange]);
-
-    const handleRunCode = useCallback(() => {
-        setExecResult(null);
-        setExecError(null);
-        try {
-            // Filter out invalid parameters
-            const validParameters = parameters.filter(Boolean);
-            const paramNames = validParameters.map(p => {
-                if (typeof p === 'string') {
-                    return p;
-                } else {
-                    return p.name;
-                }
-            });
-
-            // Construct the complete function with the user's code as the body
-            const completeFunction = `function ${functionName || 'anonymous'}(${paramNames.join(', ')}) {\n${code}\n}`;
-            const fn = new Function(...paramNames, code);
-            const result = fn(...validParameters.map(p => {
-                if (typeof p === 'string') {
-                    try {
-                        return JSON.parse(p);
-                    } catch {
-                        const n = Number(p);
-                        return isNaN(n) ? p : n;
-                    }
-                } else {
-                    return p.name;
-                }
-            }));
-            setExecResult(String(result));
-        } catch (err: any) {
-            setExecError(err?.message || String(err));
-        }
-    }, [parameters, code, functionName]);
-
-    const handleSaveFunction = useCallback(() => {
-        if (typeof onSaveAsFunction === 'function' && functionName) {
-            onSaveAsFunction({
-                name: functionName,
-                args: parameters.filter(Boolean).map(p => {
-                    if (typeof p === 'string') {
-                        return { name: p, type: 'string' };
-                    } else {
-                        return { name: p.name, type: p.type };
-                    }
-                }),
-                code, // This now contains just the function body
-            });
-        }
-    }, [onSaveAsFunction, functionName, parameters, code]);
-
-    useEffect(() => {
-        if (open) {
-            setExecResult(null);
-            setExecError(null);
-        }
-    }, [open]);
-
-    return (
-        <Modal open={open} onClose={onClose}>
-            <Box sx={modalStyles}>
-                <Typography variant="h6" gutterBottom sx={{ color: '#fff' }}>
-                    {title || t('customCodeModal.title')}
-                </Typography>
-                <TextField
-                    label={t('customCodeModal.functionName')}
-                    value={functionName}
-                    fullWidth
-                    InputProps={{ readOnly: true, style: { color: '#fff', background: '#232323' } }}
-                    sx={{ mt: 2, mb: 2, '& .MuiInputBase-input': { color: '#fff', background: '#232323' }, '& .MuiOutlinedInput-root': { '& fieldset': { borderColor: '#8E8E93' }, '&:hover fieldset': { borderColor: '#fff' } } }}
-                    InputLabelProps={{ style: { color: '#aaa' } }}
-                />
-                <Box sx={{ mb: 2 }}>
-                    <Typography variant="subtitle2" sx={{ color: '#aaa', mr: 1, mb: 1 }}>{t('customCodeModal.parameters')}:</Typography>
-                    <Stack direction="row" spacing={1}>
-                        {parameters.filter(Boolean).map((param, idx) => (
-                            <Box key={idx} sx={{ px: 2, py: 0.5, bgcolor: '#393939', borderRadius: 1, color: '#fff', fontSize: 14 }}>
-                                {typeof param === 'string' ? param : `${param.name}: ${param.type}`}
-                            </Box>
-                        ))}
-                    </Stack>
-                </Box>
-                <Typography variant="body1" sx={{ mt: 2, color: '#aaa' }}>
-                    {description || t('customCodeModal.description')}
-                </Typography>
-
-                {/* Function declaration preview */}
-                <Box sx={{
-                    mt: 2,
-                    p: 2,
-                    bgcolor: '#2a2a2a',
-                    borderRadius: 1,
-                    border: '1px solid #444',
-                    fontFamily: 'monospace',
-                    fontSize: '14px'
-                }}>
-                    <Typography variant="body2" sx={{ color: '#888', mb: 1 }}>
-                        {t('customCodeModal.functionPreview') || 'Function Preview:'}
-                    </Typography>
-                    <Box sx={{ color: '#fff' }}>
-                        <span style={{ color: '#ff79c6' }}>function</span>{' '}
-                        <span style={{ color: '#50fa7b' }}>{functionName || 'functionName'}</span>
-                        <span style={{ color: '#fff' }}>(</span>
-                        <span style={{ color: '#f1fa8c' }}>
-                            {parameters.filter(Boolean).length > 0 ? parameters.filter(Boolean).map(p => typeof p === 'string' ? p : `${p.name}: ${p.type}`).join(', ') : '/* no parameters */'}
-                        </span>
-                        <span style={{ color: '#fff' }}>) {'{'}</span>
-                    </Box>
-                    <Box sx={{
-                        mt: 1,
-                        color: '#888',
-                        fontStyle: 'italic',
-                        fontSize: '12px'
-                    }}>
-                        {/* Function body placeholder */}
-                        <span style={{ color: '#6272a4' }}>// Your function body goes here</span>
-                    </Box>
-                    <Box sx={{ color: '#fff' }}>
-                        <span style={{ color: '#fff' }}>{'}'}</span>
-                    </Box>
-                </Box>
-
-                <Typography variant="body2" sx={{ mt: 2, color: '#aaa', fontStyle: 'italic' }}>
-                    {t('customCodeModal.functionBodyHint') || 'Write only the function body below (without function declaration):'}
-                </Typography>
-                <Typography variant="caption" sx={{ color: '#666', fontStyle: 'italic', display: 'block', mt: 0.5 }}>
-                    {t('customCodeModal.functionBodyNote') || 'The function declaration above will be automatically added when executing or saving.'}
-                </Typography>
-
-                <TextField
-                    multiline
-                    rows={8}
-                    fullWidth
-                    value={code}
-                    onChange={(e) => onCodeChange(e.target.value)}
-                    placeholder={t('customCodeModal.functionBodyPlaceholder') || '// Example: return a + b;'}
-                    sx={{
-                        mt: 2,
-                        '& .MuiInputBase-input': { color: '#fff', background: '#232323' },
-                        '& .MuiOutlinedInput-root': {
-                            '& fieldset': { borderColor: '#8E8E93' },
-                            '&:hover fieldset': { borderColor: '#fff' },
-                        },
-                    }}
-                    InputLabelProps={{ style: { color: '#aaa' } }}
-                    InputProps={{ style: { color: '#fff', background: '#232323' } }}
-                />
-                {execResult !== null && (
-                    <Box sx={{ mt: 2, color: '#4caf50', fontFamily: 'monospace' }}>
-                        <b>{t('customCodeModal.result')}:</b> {execResult}
-                    </Box>
-                )}
-                {execError !== null && (
-                    <Box sx={{ mt: 2, color: '#ff5252', fontFamily: 'monospace' }}>
-                        <b>{t('customCodeModal.error')}:</b> {execError}
-                    </Box>
-                )}
-                <Stack direction="row" spacing={2} sx={{ mt: 4, justifyContent: 'flex-end' }}>
-                    <input
-                        type="file"
-                        accept=".js,.ts,.txt,.json"
-                        style={{ display: 'none' }}
-                        ref={fileInputRef}
-                        onChange={handleImportCode}
-                    />
-                    <Button
-                        variant="outlined"
-                        sx={{ color: '#fff', borderColor: '#6c47ff' }}
-                        onClick={() => fileInputRef.current?.click()}
-                    >
-                        {t('customCodeModal.importCode')}
-                    </Button>
-                    <Button
-                        variant="contained"
-                        sx={{ background: '#6c47ff', color: '#fff' }}
-                        onClick={handleRunCode}
-                    >
-                        {t('customCodeModal.runCode')}
-                    </Button>
-                    <Button
-                        variant="outlined"
-                        sx={{ color: '#fff', borderColor: '#6c47ff' }}
-                        disabled={!functionName}
-                        onClick={handleSaveFunction}
-                    >
-                        {t('customCodeModal.saveAsFunction')}
-                    </Button>
-                    <Button
-                        variant="contained"
-                        sx={{ background: '#6c47ff', color: '#fff' }}
-                        onClick={onClose}
-                    >
-                        {t('customCodeModal.close')}
-                    </Button>
-                </Stack>
-            </Box>
-        </Modal>
-    );
-});
-
-CustomCodeModal.displayName = 'CustomCodeModal';
-
-export default CustomCodeModal;