@flowuent-org/diagramming-core 1.0.5

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

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

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