@flowuent-org/diagramming-core 1.3.10 → 1.4.0

package/packages/diagrams/src/lib/templates/systemFlow/components/SystemFlowNodeSettings.tsx

@@ -1,151 +0,0 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import {
-    Box,
-    Button,
-    TextField,
-    Typography,
-    IconButton,
-} from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import { useTranslation } from 'react-i18next';
-import { SystemFlowNode, SystemFlowEdge } from '../../../types/system-flow-types';
-
-interface SystemFlowNodeSettingsProps {
-    nodeId: string;
-    data: {
-        label?: string;
-        color?: string;
-        [key: string]: unknown;
-    };
-    onUpdate: (updates: Record<string, unknown>) => void;
-    onClose: () => void;
-    edges: SystemFlowEdge[];
-    setEdges: (edges: SystemFlowEdge[] | ((prev: SystemFlowEdge[]) => SystemFlowEdge[])) => void;
-    nodes?: SystemFlowNode[];
-}
-
-const SystemFlowNodeSettings: React.FC<SystemFlowNodeSettingsProps> = React.memo(({
-    nodeId,
-    data,
-    onUpdate,
-    onClose,
-    edges,
-    setEdges,
-    nodes,
-}) => {
-    const { t } = useTranslation();
-    const [label, setLabel] = useState(data.label || '');
-    const [color, setColor] = useState(data.color || '#2196F3');
-
-    const handleLabelChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-        setLabel(e.target.value);
-        onUpdate({ label: e.target.value });
-    }, [onUpdate]);
-
-    const handleColorChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-        setColor(e.target.value);
-        onUpdate({ color: e.target.value });
-    }, [onUpdate]);
-
-    const handleColorOptionClick = useCallback((colorOption: string) => {
-        setColor(colorOption);
-        onUpdate({ color: colorOption });
-    }, [onUpdate]);
-
-    // Memoize color palette to prevent recreation on every render
-    const colorPalette = useMemo(() => [
-        '#2196F3', '#4CAF50', '#FF9800', '#F44336', '#9C27B0', '#795548', '#666'
-    ], []);
-
-    return (
-        <Box
-            sx={{
-                position: 'fixed',
-                right: 0,
-                top: 0,
-                width: 320,
-                height: '100vh',
-                backgroundColor: '#2d2d2d',
-                borderLeft: '1px solid #444',
-                boxShadow: '-2px 0 8px rgba(0,0,0,0.3)',
-                zIndex: 1000,
-                overflowY: 'auto',
-                padding: 2,
-            }}
-        >
-            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
-                <Typography variant="h6" fontWeight="bold" sx={{ color: '#fff' }}>
-                    Node Settings
-                </Typography>
-                <IconButton onClick={onClose} size="small">
-                    <CloseIcon />
-                </IconButton>
-            </Box>
-
-            {/* Node Label */}
-            <Box sx={{ mb: 3 }}>
-                <Typography variant="subtitle2" sx={{ mb: 1, color: '#b0b0b0' }}>
-                    Node Label
-                </Typography>
-                <TextField
-                    value={label}
-                    onChange={handleLabelChange}
-                    fullWidth
-                    variant="outlined"
-                    size="small"
-                    placeholder="Enter node label"
-                />
-            </Box>
-
-            {/* Color Picker */}
-            <Box sx={{ mb: 3 }}>
-                <Typography variant="subtitle2" sx={{ mb: 1, color: '#b0b0b0' }}>
-                    Node Color
-                </Typography>
-                <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
-                    {colorPalette.map((colorOption) => (
-                        <Box
-                            key={colorOption}
-                            onClick={() => handleColorOptionClick(colorOption)}
-                            sx={{
-                                width: 32,
-                                height: 32,
-                                backgroundColor: colorOption,
-                                border: color === colorOption ? '3px solid #61dafb' : '2px solid #555',
-                                borderRadius: 1,
-                                cursor: 'pointer',
-                                '&:hover': {
-                                    borderColor: '#61dafb',
-                                },
-                            }}
-                        />
-                    ))}
-                </Box>
-            </Box>
-
-            {/* Custom Color Input */}
-            <Box sx={{ mb: 3 }}>
-                <Typography variant="subtitle2" sx={{ mb: 1, color: '#b0b0b0' }}>
-                    Custom Color
-                </Typography>
-                <input
-                    type="color"
-                    value={color}
-                    onChange={handleColorChange}
-                    style={{
-                        width: '100%',
-                        height: 36,
-                        border: '1px solid #555',
-                        borderRadius: 4,
-                        cursor: 'pointer',
-                        backgroundColor: '#444'
-                    }}
-                />
-            </Box>
-        </Box>
-    );
-});
-
-SystemFlowNodeSettings.displayName = 'SystemFlowNodeSettings';
-
-export default SystemFlowNodeSettings;

package/packages/diagrams/src/lib/templates/systemFlow/controls/SystemFlowControls.tsx

@@ -1,435 +0,0 @@
-'use client';
-
-import React, { useState, createContext, useCallback, useMemo } from 'react';
-import {
-    Box,
-    Typography,
-    Paper,
-    IconButton,
-    Tabs,
-    Tab,
-    Tooltip,
-    Divider,
-    Collapse,
-    List,
-    ListItem,
-    ListItemButton,
-    ListItemIcon,
-    ListItemText,
-} from '@mui/material';
-import UndoIcon from '@mui/icons-material/Undo';
-import RedoIcon from '@mui/icons-material/Redo';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import TimelineIcon from '@mui/icons-material/Timeline';
-import AccountTreeIcon from '@mui/icons-material/AccountTree';
-import ControlEdgeList from '../../../components/ControlEdgeList';
-import {
-    DiagramControlsProps,
-    NodeType,
-    TabPanelProps,
-    NodeSelectionContextType,
-    SystemFlowNode,
-    SystemFlowEdge
-} from '../../../types/system-flow-types';
-import { Edge } from '@xyflow/react';
-
-// Simple node icon
-const NodeIcon = React.memo(() => (
-    <svg width="20" height="20" viewBox="0 0 20 20">
-        <rect x="2" y="2" width="16" height="16" rx="2" fill="none" stroke="black" strokeWidth="2" />
-    </svg>
-));
-
-function TabPanel(props: TabPanelProps) {
-    const { children, value, index, ...other } = props;
-    return (
-        <div
-            role="tabpanel"
-            hidden={value !== index}
-            id={`simple-tabpanel-${index}`}
-            aria-labelledby={`simple-tab-${index}`}
-            {...other}
-            style={{ padding: '8px 0' }}
-        >
-            {value === index && <Box>{children}</Box>}
-        </div>
-    );
-}
-
-// Node types including structures
-const nodeTypes: NodeType[] = [
-    {
-        id: 'SystemNode',
-        name: 'Node',
-        icon: <NodeIcon />,
-    },
-];
-
-// Structure types
-const structureTypes: NodeType[] = [
-    {
-        id: 'Structure1',
-        name: 'Structure 1',
-        icon: <AccountTreeIcon fontSize="small" />,
-    },
-    {
-        id: 'Structure2',
-        name: 'Structure 2',
-        icon: <AccountTreeIcon fontSize="small" />,
-    },
-    {
-        id: 'Structure3',
-        name: 'Structure 3',
-        icon: <AccountTreeIcon fontSize="small" />,
-    },
-];
-
-const SystemFlowControls: React.FC<DiagramControlsProps> = React.memo(({
-    onAddEntity,
-    onUndo,
-    onRedo,
-    canUndo,
-    canRedo,
-    onLoadTemplate,
-    edges,
-    nodes,
-    onEditEdge,
-}) => {
-    const [tabValue, setTabValue] = useState(0);
-    const [expandComponents, setExpandComponents] = useState(true);
-    const [expandStructures, setExpandStructures] = useState(true);
-    const [expandFlows, setExpandFlows] = useState(true);
-
-    const handleTabChange = useCallback(
-        (event: React.SyntheticEvent, newValue: number) => {
-            setTabValue(newValue);
-        },
-        [],
-    );
-
-    // For adding nodes
-    const handleAddNode = useCallback(
-        (nodeType: string) => {
-            onAddEntity(nodeType);
-        },
-        [onAddEntity],
-    );
-
-    // For loading templates
-    const handleLoadTemplate = useCallback(
-        (templateType: string) => {
-            if (onLoadTemplate) {
-                onLoadTemplate(templateType);
-            }
-        },
-        [onLoadTemplate],
-    );
-
-    // Wrapper function to handle edge type conversion
-    const handleEditEdge = useCallback(
-        (edge: Edge) => {
-            if (onEditEdge) {
-                onEditEdge(edge as SystemFlowEdge);
-            }
-        },
-        [onEditEdge],
-    );
-
-    // Handle expand/collapse for components section
-    const handleToggleComponents = useCallback(() => {
-        setExpandComponents(prev => !prev);
-    }, []);
-
-    // Handle expand/collapse for structures section
-    const handleToggleStructures = useCallback(() => {
-        setExpandStructures(prev => !prev);
-    }, []);
-
-    // Handle expand/collapse for flows section
-    const handleToggleFlows = useCallback(() => {
-        setExpandFlows(prev => !prev);
-    }, []);
-
-    // Memoize the nodeTypes and structureTypes arrays to prevent unnecessary re-renders
-    const memoizedNodeTypes = useMemo(() => nodeTypes, []);
-    const memoizedStructureTypes = useMemo(() => structureTypes, []);
-
-    return (
-        <Paper
-            elevation={3}
-            sx={{
-                p: 2,
-                borderRadius: 2,
-                bgcolor: '#242424',
-                color: '#fff',
-                border: '1px solid #333',
-                width: '100%',
-                maxHeight: '100%',
-                overflowY: 'auto',
-                // Custom scrollbar styling
-                '&::-webkit-scrollbar': {
-                    width: '6px',
-                },
-                '&::-webkit-scrollbar-track': {
-                    background: 'transparent',
-                },
-                '&::-webkit-scrollbar-thumb': {
-                    background: '#444',
-                    borderRadius: '3px',
-                    '&:hover': {
-                        background: '#666',
-                    },
-                },
-                // Dark theme styling for all child components
-                '& .MuiTab-root': {
-                    color: '#999',
-                    '&.Mui-selected': {
-                        color: '#61dafb',
-                    },
-                },
-                '& .MuiTabs-indicator': {
-                    backgroundColor: '#61dafb',
-                },
-                '& .MuiDivider-root': {
-                    borderColor: '#333',
-                },
-                '& .MuiListItemButton-root': {
-                    color: '#fff',
-                    '&:hover': {
-                        bgcolor: 'rgba(97, 218, 251, 0.1)',
-                    },
-                },
-                '& .MuiIconButton-root': {
-                    color: '#999',
-                    '&:hover': {
-                        color: '#fff',
-                        bgcolor: 'rgba(255, 255, 255, 0.1)',
-                    },
-                    '&.Mui-disabled': {
-                        color: '#555',
-                    },
-                },
-            }}
-        >
-            <Box
-                display="flex"
-                justifyContent="space-between"
-                alignItems="center"
-                mb={1}
-            >
-                <Typography variant="h6" sx={{ fontWeight: 'medium' }}>
-                    System Flow
-                </Typography>
-                <Box>
-                    <Tooltip title="Undo">
-                        <span>
-                            <IconButton
-                                size="small"
-                                onClick={onUndo}
-                                disabled={!canUndo}
-                                sx={{ color: canUndo ? 'primary.main' : 'text.disabled' }}
-                            >
-                                <UndoIcon fontSize="small" />
-                            </IconButton>
-                        </span>
-                    </Tooltip>
-                    <Tooltip title="Redo">
-                        <span>
-                            <IconButton
-                                size="small"
-                                onClick={onRedo}
-                                disabled={!canRedo}
-                                sx={{ color: canRedo ? 'primary.main' : 'text.disabled' }}
-                            >
-                                <RedoIcon fontSize="small" />
-                            </IconButton>
-                        </span>
-                    </Tooltip>
-                </Box>
-            </Box>
-
-            <Tabs
-                value={tabValue}
-                onChange={handleTabChange}
-                sx={{
-                    '& .MuiTab-root': {
-                        minHeight: 40,
-                        fontSize: '0.875rem',
-                    },
-                }}
-            >
-                <Tab label="Components" />
-                <Tab label="Templates" />
-            </Tabs>
-
-            {/* Components Tab */}
-            <TabPanel value={tabValue} index={0}>
-                {/* Components Section */}
-                <Box mb={1}>
-                    <Box
-                        display="flex"
-                        justifyContent="space-between"
-                        alignItems="center"
-                        onClick={handleToggleComponents}
-                        sx={{
-                            cursor: 'pointer',
-                            '&:hover': { bgcolor: 'action.hover' },
-                            p: 1,
-                            borderRadius: 1,
-                        }}
-                    >
-                        <Typography variant="subtitle2" fontWeight="bold">
-                            Components
-                        </Typography>
-                        {expandComponents ? (
-                            <ExpandLessIcon fontSize="small" />
-                        ) : (
-                            <ExpandMoreIcon fontSize="small" />
-                        )}
-                    </Box>
-                    <Collapse in={expandComponents}>
-                        <List dense disablePadding>
-                            {memoizedNodeTypes.map((type) => (
-                                <ListItem disablePadding key={type.id}>
-                                    <ListItemButton
-                                        onClick={() => handleAddNode(type.id)}
-                                        sx={{ pl: 2 }}
-                                    >
-                                        <ListItemIcon sx={{ minWidth: 36 }}>
-                                            {type.icon}
-                                        </ListItemIcon>
-                                        <ListItemText primary={type.name} />
-                                    </ListItemButton>
-                                </ListItem>
-                            ))}
-                        </List>
-                    </Collapse>
-                </Box>
-
-                <Divider sx={{ my: 1 }} />
-
-                {/* Structures Section */}
-                <Box mb={1}>
-                    <Box
-                        display="flex"
-                        justifyContent="space-between"
-                        alignItems="center"
-                        onClick={handleToggleStructures}
-                        sx={{
-                            cursor: 'pointer',
-                            '&:hover': { bgcolor: 'action.hover' },
-                            p: 1,
-                            borderRadius: 1,
-                        }}
-                    >
-                        <Typography variant="subtitle2" fontWeight="bold">
-                            Structures
-                        </Typography>
-                        {expandStructures ? (
-                            <ExpandLessIcon fontSize="small" />
-                        ) : (
-                            <ExpandMoreIcon fontSize="small" />
-                        )}
-                    </Box>
-                    <Collapse in={expandStructures}>
-                        <List dense disablePadding>
-                            {memoizedStructureTypes.map((type) => (
-                                <ListItem disablePadding key={type.id}>
-                                    <ListItemButton
-                                        onClick={() => handleAddNode(type.id)}
-                                        sx={{ pl: 2 }}
-                                    >
-                                        <ListItemIcon sx={{ minWidth: 36 }}>
-                                            {type.icon}
-                                        </ListItemIcon>
-                                        <ListItemText primary={type.name} />
-                                    </ListItemButton>
-                                </ListItem>
-                            ))}
-                        </List>
-                    </Collapse>
-                </Box>
-
-                <Divider sx={{ my: 1 }} />
-
-                {/* Flows Section */}
-                <Box mb={1}>
-                    <Box
-                        display="flex"
-                        justifyContent="space-between"
-                        alignItems="center"
-                        onClick={handleToggleFlows}
-                        sx={{
-                            cursor: 'pointer',
-                            '&:hover': { bgcolor: 'action.hover' },
-                            p: 1,
-                            borderRadius: 1,
-                        }}
-                    >
-                        <Typography variant="subtitle2" fontWeight="bold">
-                            Flows
-                        </Typography>
-                        {expandFlows ? (
-                            <ExpandLessIcon fontSize="small" />
-                        ) : (
-                            <ExpandMoreIcon fontSize="small" />
-                        )}
-                    </Box>
-                    <Collapse in={expandFlows}>
-                        <Box sx={{ px: 1 }}>
-                            {/* Edge list using ControlEdgeList */}
-                            <ControlEdgeList
-                                edges={edges}
-                                nodes={nodes}
-                                type="systemFlow"
-                                onEditEdge={handleEditEdge}
-                                nodeTypes={memoizedNodeTypes}
-                            />
-                        </Box>
-                    </Collapse>
-                </Box>
-            </TabPanel>
-
-            {/* Templates Tab */}
-            <TabPanel value={tabValue} index={1}>
-                <Typography variant="body2" color="text.secondary" sx={{ p: 1 }}>
-                    Quick start with pre-defined system flow templates
-                </Typography>
-                <List dense>
-                    <ListItem disablePadding>
-                        <ListItemButton
-                            onClick={() => handleLoadTemplate('simple-system-flow')}
-                            sx={{
-                                pl: 2,
-                                border: '1px solid',
-                                borderColor: 'divider',
-                                borderRadius: 1,
-                                mb: 1,
-                            }}
-                        >
-                            <ListItemIcon sx={{ minWidth: 36 }}>
-                                <TimelineIcon fontSize="small" />
-                            </ListItemIcon>
-                            <ListItemText
-                                primary="Simple System Flow"
-                                secondary="Basic system components and flows"
-                            />
-                        </ListItemButton>
-                    </ListItem>
-                </List>
-            </TabPanel>
-        </Paper>
-    );
-});
-
-SystemFlowControls.displayName = 'SystemFlowControls';
-
-// Node selection context
-export const NodeSelectionContext = createContext<NodeSelectionContextType>({
-    selectedNodeType: null,
-    setSelectedNodeType: () => { },
-    addNodeAtCenter: undefined,
-});
-
-export default SystemFlowControls;