@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,288 +1,288 @@
-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';
-
+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;