@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +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';
+
+export default CustomCodeModal; 

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

@@ -0,0 +1,331 @@
+import React from 'react';
+import { Box, Button } from '@mui/material';
+import UndoIcon from '@mui/icons-material/Undo';
+import RedoIcon from '@mui/icons-material/Redo';
+import UploadIcon from '@mui/icons-material/Upload';
+import SettingsIcon from '@mui/icons-material/Settings';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import AccountTreeIcon from '@mui/icons-material/AccountTree';
+import { useReactFlow, Panel } from '@xyflow/react';
+
+export interface DiagramPanelProps {
+  // History controls
+  historyIndex: number;
+  historyLength: number;
+  onUndo: () => void;
+  onRedo: () => void;
+  onClear: () => void;
+
+  // Import/Export
+  onImport: (data: any) => void;
+
+  // Settings
+  isSettingsOpen: boolean;
+  onToggleSettings: () => void;
+
+  // Optional custom controls
+  showCustomControls?: boolean;
+  onGridLayout?: () => void;
+  onTreeLayout?: () => void;
+}
+
+// Custom controls component that uses useReactFlow
+const CustomControls: React.FC<{
+  onGridLayout?: () => void;
+  onTreeLayout?: () => void;
+}> = ({ onGridLayout, onTreeLayout }) => {
+  const { zoomIn, zoomOut } = useReactFlow();
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5,
+        bgcolor: '#2a2a2a',
+        borderRadius: '8px',
+        padding: '4px 8px',
+        border: '1px solid #404040',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+      }}
+    >
+      {/* Zoom Out */}
+      <Button
+        variant="text"
+        size="small"
+        onClick={() => zoomOut()}
+        sx={{
+          minWidth: '32px',
+          width: '32px',
+          height: '32px',
+          padding: 0,
+          color: '#ffffff',
+          '&:hover': {
+            bgcolor: 'rgba(255,255,255,0.1)',
+            borderRadius: '4px',
+          },
+        }}
+      >
+        <ZoomOutIcon sx={{ fontSize: '18px' }} />
+      </Button>
+
+      {/* Divider */}
+      <Box
+        sx={{
+          width: '1px',
+          height: '24px',
+          bgcolor: '#404040',
+          mx: 0.5,
+        }}
+      />
+
+      {/* Zoom In */}
+      <Button
+        variant="text"
+        size="small"
+        onClick={() => zoomIn()}
+        sx={{
+          minWidth: '32px',
+          width: '32px',
+          height: '32px',
+          padding: 0,
+          color: '#ffffff',
+          '&:hover': {
+            bgcolor: 'rgba(255,255,255,0.1)',
+            borderRadius: '4px',
+          },
+        }}
+      >
+        <ZoomInIcon sx={{ fontSize: '18px' }} />
+      </Button>
+
+      {/* Divider */}
+      <Box
+        sx={{
+          width: '1px',
+          height: '24px',
+          bgcolor: '#404040',
+          mx: 0.5,
+        }}
+      />
+
+      {/* Grid Layout */}
+      <Button
+        variant="text"
+        size="small"
+        onClick={onGridLayout || (() => console.log('Grid layout clicked'))}
+        sx={{
+          minWidth: '32px',
+          width: '32px',
+          height: '32px',
+          padding: 0,
+          color: '#ffffff',
+          '&:hover': {
+            bgcolor: 'rgba(255,255,255,0.1)',
+            borderRadius: '4px',
+          },
+        }}
+      >
+        <ViewModuleIcon sx={{ fontSize: '18px' }} />
+      </Button>
+
+      {/* Tree Layout */}
+      <Button
+        variant="text"
+        size="small"
+        onClick={onTreeLayout || (() => console.log('Tree layout clicked'))}
+        sx={{
+          minWidth: '32px',
+          width: '32px',
+          height: '32px',
+          padding: 0,
+          color: '#ffffff',
+          '&:hover': {
+            bgcolor: 'rgba(255,255,255,0.1)',
+            borderRadius: '4px',
+          },
+        }}
+      >
+        <AccountTreeIcon sx={{ fontSize: '18px' }} />
+      </Button>
+    </Box>
+  );
+};
+
+// Divider component for reusability
+const Divider: React.FC = () => (
+  <Box
+    sx={{
+      width: '1px',
+      height: '24px',
+      bgcolor: '#404040',
+      mx: 0.5,
+    }}
+  />
+);
+
+export default function DiagramPanel({
+  historyIndex,
+  historyLength,
+  onUndo,
+  onRedo,
+  onClear,
+  onImport,
+  isSettingsOpen,
+  onToggleSettings,
+  showCustomControls = true,
+  onGridLayout,
+  onTreeLayout,
+}: DiagramPanelProps) {
+  const handleFileImport = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const data = JSON.parse(e.target?.result as string);
+          if (data.nodes && data.edges) {
+            onImport(data);
+          }
+        } catch (error) {
+          console.error('Error importing diagram:', error);
+        }
+      };
+      reader.readAsText(file);
+    }
+  };
+
+  return (
+    <Panel position="top-left">
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          marginTop: '30px', // Add top margin to push buttons down
+        }}
+      >
+        {/* Main Controls Toolbar */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            bgcolor: '#2a2a2a',
+            borderRadius: '8px',
+            padding: '4px 8px',
+            border: '1px solid #404040',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+          }}
+        >
+          {/* Clear Button */}
+          <Button
+            variant="text"
+            size="small"
+            onClick={onClear}
+            sx={{
+              minWidth: '32px',
+              width: '32px',
+              height: '32px',
+              padding: 0,
+              color: '#ffffff',
+              fontSize: '12px',
+              '&:hover': {
+                bgcolor: 'rgba(255,255,255,0.1)',
+                borderRadius: '4px',
+              },
+            }}
+          >
+            C
+          </Button>
+
+          <Divider />
+
+          {/* Undo Button */}
+          <Button
+            variant="text"
+            size="small"
+            onClick={onUndo}
+            disabled={historyIndex <= 0}
+            sx={{
+              minWidth: '32px',
+              width: '32px',
+              height: '32px',
+              padding: 0,
+              color: historyIndex <= 0 ? '#666666' : '#ffffff',
+              '&:hover': {
+                bgcolor:
+                  historyIndex <= 0 ? 'transparent' : 'rgba(255,255,255,0.1)',
+                borderRadius: '4px',
+              },
+            }}
+          >
+            <UndoIcon sx={{ fontSize: '18px' }} />
+          </Button>
+
+          {/* Redo Button */}
+          <Button
+            variant="text"
+            size="small"
+            onClick={onRedo}
+            disabled={historyIndex >= historyLength - 1}
+            sx={{
+              minWidth: '32px',
+              width: '32px',
+              height: '32px',
+              padding: 0,
+              color: historyIndex >= historyLength - 1 ? '#666666' : '#ffffff',
+              '&:hover': {
+                bgcolor:
+                  historyIndex >= historyLength - 1
+                    ? 'transparent'
+                    : 'rgba(255,255,255,0.1)',
+                borderRadius: '4px',
+              },
+            }}
+          >
+            <RedoIcon sx={{ fontSize: '18px' }} />
+          </Button>
+
+          <Divider />
+
+          {/* Import Button */}
+          <Button
+            variant="text"
+            component="label"
+            size="small"
+            sx={{
+              minWidth: '32px',
+              width: '32px',
+              height: '32px',
+              padding: 0,
+              color: '#ffffff',
+              '&:hover': {
+                bgcolor: 'rgba(255,255,255,0.1)',
+                borderRadius: '4px',
+              },
+            }}
+          >
+            <UploadIcon sx={{ fontSize: '18px' }} />
+            <input
+              type="file"
+              onChange={handleFileImport}
+              accept=".json"
+              style={{ display: 'none' }}
+            />
+          </Button>
+        </Box>
+
+        {/* Custom Controls Toolbar */}
+        {showCustomControls && (
+          <CustomControls
+            onGridLayout={onGridLayout}
+            onTreeLayout={onTreeLayout}
+          />
+        )}
+      </Box>
+    </Panel>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface FunctionModalTooltipProps {
+    backgroundColor: string;
+}
+
+const FunctionModalTooltip = memo(({ backgroundColor }: FunctionModalTooltipProps) => {
+    const { t } = useTranslation();
+
+    return (
+        <>
+            <div><b>{t('createFunctionModal.guidelines.title')}</b></div>
+            <ul style={{ margin: 0, paddingLeft: 18 }}>
+                <li>{t('createFunctionModal.guidelines.uniqueName')}</li>
+                <li>{t('createFunctionModal.guidelines.arguments')}</li>
+                <li>{t('createFunctionModal.guidelines.autoGeneration')}</li>
+            </ul>
+            <div style={{ marginTop: 8 }}><b>{t('createFunctionModal.example.title')}</b></div>
+            <div style={{ fontFamily: 'monospace', fontSize: 13, background: backgroundColor, padding: 6, borderRadius: 4 }}>
+                {t('createFunctionModal.example.name')}<br />
+                {t('createFunctionModal.example.args')}<br />
+                {t('createFunctionModal.example.code')}
+            </div>
+        </>
+    );
+});
+
+FunctionModalTooltip.displayName = 'FunctionModalTooltip';
+
+export default FunctionModalTooltip;