@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/templates/stateMachine/components/CompositeStateNodeSettings.tsx

@@ -0,0 +1,639 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import {
+    Box,
+    Button,
+    TextField,
+    Typography,
+    IconButton,
+    InputLabel,
+    List,
+    ListItem,
+    ListItemText,
+    Select,
+    MenuItem,
+    Slider,
+    RadioGroup,
+    FormControlLabel,
+    Radio,
+    Chip,
+    Checkbox,
+    SelectChangeEvent,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import DeleteIcon from '@mui/icons-material/Delete';
+import isEqual from 'lodash/isEqual';
+import { useTranslation } from 'react-i18next';
+import { StateMachineNode, StateMachineEdge, StateMachineNodeType, StateMachineEdgeType } from '../../../types/state-machine-types';
+
+const AVAILABLE_NODE_TYPES = [
+    { id: 'StateNode', name: 'State' },
+    { id: 'InitialStateNode', name: 'Initial State' },
+    { id: 'FinalStateNode', name: 'Final State' },
+    { id: 'CompositeStateNode', name: 'Composite State' },
+    { id: 'HistoryStateNode', name: 'History State' },
+    { id: 'JunctionPointNode', name: 'Junction Point' },
+    { id: 'ChoicePointNode', name: 'Choice Point' },
+    { id: 'EntryPointNode', name: 'Entry Point' },
+    { id: 'ExitPointNode', name: 'Exit Point' },
+    { id: 'ForkJoinNode', name: 'Fork/Join' },
+];
+
+type SetNodesFunction = ((nodes: StateMachineNode[]) => void) & ((updater: (nodes: StateMachineNode[]) => StateMachineNode[]) => void);
+
+interface AddNodeToCompositeParams {
+    type: string;
+    data?: Record<string, unknown>;
+    nodes: StateMachineNode[];
+    setNodes: SetNodesFunction;
+    parentId: string;
+    position: { x: number; y: number };
+    measured?: { width: number; height: number };
+}
+
+interface CompositeStateNodeSettingsProps {
+    nodeId: string;
+    data: {
+        label?: string;
+        children?: string[]; // array of node ids
+        width?: number;
+        height?: number;
+        dividers?: {
+            vertical?: number;
+            horizontal?: number;
+        };
+        pins?: Array<{
+            id: string;
+            type: 'pin' | 'point';
+            label: string;
+            side: 'top' | 'right' | 'bottom' | 'left';
+            position: number; // 0-100
+        }>;
+        [key: string]: unknown;
+    };
+    nodes: StateMachineNode[];
+    setNodes: SetNodesFunction;
+    onUpdate: (updates: Record<string, unknown>) => void;
+    onClose: () => void;
+    edges: StateMachineEdge[];
+    setEdges: (edges: StateMachineEdge[] | ((prev: StateMachineEdge[]) => StateMachineEdge[])) => void;
+}
+
+const addNodeToComposite = ({
+    type,
+    data = {},
+    nodes,
+    setNodes,
+    parentId,
+    position,
+    measured = { width: 120, height: 40 },
+}: AddNodeToCompositeParams) => {
+    const newId = `${type}-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
+
+    // Add onResize handler to node data
+    const onResize = (id: string, width: number, height: number) => {
+        const updater = (nds: StateMachineNode[]) =>
+            nds.map((node: StateMachineNode) =>
+                node.id === id ? { ...node, measured: { width, height } } : node
+            );
+        setNodes(updater);
+    };
+
+    const newNode: StateMachineNode = {
+        id: newId,
+        type: type as StateMachineNodeType,
+        position,
+        data: { ...data, onResize },
+        parentId: parentId, // was parentNode
+        extent: parentId ? 'parent' : undefined,
+        draggable: true,
+        measured,
+    };
+
+    setNodes([...nodes, newNode]);
+    return newId;
+};
+
+const CompositeStateNodeSettings: React.FC<CompositeStateNodeSettingsProps> = ({
+    nodeId,
+    data,
+    nodes,
+    setNodes,
+    onUpdate,
+    onClose,
+    edges,
+    setEdges,
+}) => {
+    const { t } = useTranslation();
+    const [label, setLabel] = useState(data.label || '');
+    const [selectedType, setSelectedType] = useState(AVAILABLE_NODE_TYPES[0].id);
+    const [width, setWidth] = useState(data.width || 400);
+    const [height, setHeight] = useState(data.height || 300);
+    const [dividerType, setDividerType] = useState(
+        data.dividers && typeof data.dividers.vertical === 'number' && data.dividers.vertical > 0
+            ? 'vertical'
+            : data.dividers && typeof data.dividers.horizontal === 'number' && data.dividers.horizontal > 0
+                ? 'horizontal'
+                : 'none'
+    );
+    const [dividerCount, setDividerCount] = useState(
+        (data.dividers && typeof data.dividers.vertical === 'number' && data.dividers.vertical > 0)
+            ? data.dividers.vertical
+            : (data.dividers && typeof data.dividers.horizontal === 'number' && data.dividers.horizontal > 0)
+                ? data.dividers.horizontal
+                : 0
+    );
+
+    // --- Pin/Point Node Management ---
+    const pinPointNodes = useMemo(
+        () => nodes.filter(n => n.type === 'PinPointNode' && n.parentId === nodeId),
+        [nodes, nodeId]
+    );
+    // Initialize pinCount and newPinType from current PinPointNodes
+    const initialPinType: 'pin' | 'point' = pinPointNodes[0]?.data?.type === 'point' ? 'point' : 'pin';
+    const [newPinType, setNewPinType] = useState<'pin' | 'point'>(initialPinType);
+    const [pinCount, setPinCount] = useState(pinPointNodes.length);
+
+    // Auto-sync data.pins with PinPointNodes
+    useEffect(() => {
+        // Map PinPointNodes to pin data for data.pins
+        const pins = pinPointNodes.map(pin => ({
+            id: pin.id,
+            type: pin.data.type,
+            label: pin.data.label || '',
+            side: pin.data.side || 'top', // fallback if not set
+            position: pin.data.position, // fallback if not set
+        }));
+        // Only update if pins have changed
+        if (!isEqual(pins, data.pins)) {
+            onUpdate({ pins });
+        }
+    }, [pinPointNodes, onUpdate, data.pins]);
+
+    // Effect: When pin type changes, update all existing PinPointNodes to the new type
+    useEffect(() => {
+        if (pinPointNodes.length > 0 && pinPointNodes[0].data.type !== newPinType) {
+            setNodes(nodes.map(n =>
+                (n.type === 'PinPointNode' && n.parentId === nodeId)
+                    ? { ...n, data: { ...n.data, type: newPinType } }
+                    : n
+            ));
+        }
+    }, [newPinType, pinPointNodes, setNodes, nodes, nodeId]);
+
+    // Effect: When pinCount changes, add or remove PinPointNodes to match count
+    useEffect(() => {
+        const current = pinPointNodes;
+        if (pinCount > current.length) {
+            // Add new nodes
+            const composite = nodes.find(n => n.id === nodeId);
+            if (!composite) return;
+            const width = composite.data.width || 400;
+            const size = 22;
+            for (let i = current.length; i < pinCount; i++) {
+                // Distribute along top border
+                const pos = { x: ((width / (pinCount + 1)) * (i + 1)) - size / 2, y: -size / 2 };
+                addNodeToComposite({
+                    type: 'PinPointNode',
+                    data: { type: newPinType, label: '', color: '#222', side: 'top', position: Math.round(((i + 1) * 100) / (pinCount + 1)) },
+                    nodes,
+                    setNodes,
+                    parentId: nodeId,
+                    position: pos,
+                    measured: { width: 22, height: 22 },
+                });
+            }
+        } else if (pinCount < current.length) {
+            // Remove last nodes
+            const toRemove = current.slice(pinCount).map(n => n.id);
+            setNodes(nodes.filter(n => !toRemove.includes(n.id)));
+        }
+    }, [pinCount, newPinType, pinPointNodes, nodes, setNodes, nodeId]);
+
+    // Memoized composite node and children
+    const compositeChildren = useMemo(
+        () => Array.isArray(data.children) ? data.children : [],
+        [data.children]
+    );
+
+    // Self-transition logic
+    const selfEdge = useMemo(() => edges.find(
+        (e) => e.source === nodeId && e.target === nodeId && (e.type === 'customEdge' || e.type === 'selfconnecting')
+    ), [edges, nodeId]);
+    const hasSelfTransition = !!selfEdge;
+    const [selfTransitionLabel, setSelfTransitionLabel] = useState(selfEdge?.data?.label || '');
+
+    useEffect(() => {
+        setSelfTransitionLabel(selfEdge?.data?.label || '');
+    }, [selfEdge]);
+
+    const toggleSelfTransition = useCallback(() => {
+        if (hasSelfTransition) {
+            setEdges(edges.filter((e) => e !== selfEdge));
+        } else {
+            const nodeWidth = data.width || 400;
+            const nodeHeight = data.height || 300;
+            const newEdge = {
+                id: `self-edge-${nodeId}-${Date.now()}`,
+                source: nodeId,
+                target: nodeId,
+                type: 'selfconnecting' as StateMachineEdgeType,
+                data: { label: selfTransitionLabel || 'Self Transition', nodeWidth, nodeHeight },
+                animated: false,
+            };
+            setEdges([...edges, newEdge]);
+        }
+    }, [hasSelfTransition, setEdges, edges, selfEdge, nodes, nodeId, selfTransitionLabel]);
+
+    const handleSelfTransitionLabelChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setSelfTransitionLabel(e.target.value);
+        if (selfEdge) {
+            setEdges(
+                edges.map((edge) =>
+                    edge === selfEdge
+                        ? { ...edge, data: { ...edge.data, label: e.target.value, nodeWidth: edge.data?.nodeWidth, nodeHeight: edge.data?.nodeHeight } }
+                        : edge
+                )
+            );
+        }
+    }, [selfEdge, setEdges, edges]);
+
+    const handleLabelChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setLabel(e.target.value);
+        onUpdate({ label: e.target.value });
+    }, [onUpdate]);
+
+    const handleAddChild = useCallback(() => {
+        const offsetX = 40 + (compositeChildren.length % 3) * 100;
+        const offsetY = 40 + Math.floor(compositeChildren.length / 3) * 80;
+        const pos = { x: offsetX, y: offsetY };
+        const newId = addNodeToComposite({
+            type: selectedType,
+            data: { label: AVAILABLE_NODE_TYPES.find(t => t.id === selectedType)?.name || 'Substate' },
+            nodes,
+            setNodes,
+            parentId: nodeId,
+            position: pos,
+            measured: { width: 120, height: 40 },
+        });
+        onUpdate({ children: [...compositeChildren, newId] });
+    }, [selectedType, compositeChildren, setNodes, nodes, nodeId, onUpdate]);
+
+    const handleWidthSlider = useCallback((_: Event, value: number | number[]) => {
+        const v = Array.isArray(value) ? value[0] : value;
+        setWidth(v);
+        onUpdate({ width: v });
+    }, [onUpdate]);
+
+    const handleHeightSlider = useCallback((_: Event, value: number | number[]) => {
+        const v = Array.isArray(value) ? value[0] : value;
+        setHeight(v);
+        onUpdate({ height: v });
+        // Update self-transition edge's topY and centerX to match composite node's position
+        const compositeNode = nodes.find(n => n.id === nodeId);
+        if (compositeNode) {
+            const width = compositeNode.data?.width || 400;
+            const newEdges = edges.map((edge: StateMachineEdge) =>
+                edge.source === nodeId && edge.target === nodeId && (edge.type === 'customEdge' || edge.type === 'selfconnecting')
+                    ? { ...edge, type: edge.type as StateMachineEdgeType, data: { ...edge.data, topY: compositeNode.position?.y ?? 0, centerX: (compositeNode.position?.x ?? 0) + width / 2 } }
+                    : edge
+            );
+            setEdges(newEdges);
+        }
+    }, [onUpdate, nodes, nodeId, setEdges, edges]);
+
+    const handleDividerTypeChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const type = e.target.value;
+        setDividerType(type);
+        if (type === 'none') {
+            setDividerCount(0);
+            onUpdate({ dividers: { vertical: 0, horizontal: 0 } });
+        } else {
+            setDividerCount(1);
+            onUpdate({ dividers: { vertical: type === 'vertical' ? 1 : 0, horizontal: type === 'horizontal' ? 1 : 0 } });
+        }
+    }, [onUpdate]);
+
+    const handleDividerCountChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        let value = Math.max(0, Math.min(10, parseInt(e.target.value) || 0));
+        setDividerCount(value);
+        if (dividerType === 'vertical') {
+            onUpdate({ dividers: { vertical: value, horizontal: 0 } });
+        } else if (dividerType === 'horizontal') {
+            onUpdate({ dividers: { vertical: 0, horizontal: value } });
+        }
+    }, [dividerType, onUpdate]);
+
+    // Remove a PinPointNode
+    const handleRemovePinPoint = useCallback((id: string) => {
+        setNodes(nodes.filter(n => n.id !== id));
+    }, [setNodes, nodes]);
+
+    // Memoized handlers for select and textfield
+    const handleSelectedTypeChange = useCallback(
+        (e: SelectChangeEvent<string>) => setSelectedType(e.target.value),
+        []
+    );
+    const handleNewPinTypeChange = useCallback(
+        (e: SelectChangeEvent<'pin' | 'point'>) => setNewPinType(e.target.value as 'pin' | 'point'),
+        []
+    );
+    const handlePinCountChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => setPinCount(Math.max(0, Math.min(32, parseInt(e.target.value) || 0))),
+        []
+    );
+
+    // Memoized rendered lists
+    const renderedSubstates = useMemo(() => (
+        compositeChildren.length === 0 ? (
+            <ListItem>
+                <ListItemText primary={<Typography variant="caption" color="text.secondary">{t('stateMachine.compositeNodeSettings.noSubstates')}</Typography>} />
+            </ListItem>
+        ) : (
+            compositeChildren.map((childId, idx) => {
+                const child = nodes.find(n => n.id === childId);
+                return (
+                    <ListItem key={childId}>
+                        <ListItemText primary={child?.data?.label || `Substate ${idx + 1}`} />
+                    </ListItem>
+                );
+            })
+        )
+    ), [compositeChildren, nodes, t]);
+
+    const renderedPinPoints = useMemo(() => (
+        pinPointNodes.length === 0 ? (
+            <ListItem>
+                <ListItemText primary={<Typography variant="caption" color="text.secondary">{t('stateMachine.compositeNodeSettings.noPins')}</Typography>} />
+            </ListItem>
+        ) : (
+            pinPointNodes.map((pin) => (
+                <ListItem key={pin.id} secondaryAction={
+                    <IconButton edge="end" aria-label={t('stateMachine.compositeNodeSettings.delete')} onClick={() => handleRemovePinPoint(pin.id)}>
+                        <DeleteIcon fontSize="small" />
+                    </IconButton>
+                }>
+                    <ListItemText
+                        primary={<span>{pin.data.type === 'pin' ? <span style={{ fontSize: 16 }}>■</span> : <span style={{ fontSize: 16 }}>●</span>}</span>}
+                    />
+                </ListItem>
+            ))
+        )
+    ), [pinPointNodes, t, handleRemovePinPoint]);
+
+    return (
+        <Box
+            className="composite-node-settings"
+            sx={{
+                position: 'absolute',
+                top: 100,
+                right: 20,
+                bgcolor: '#242424',
+                color: '#fff',
+                p: 2,
+                border: '1px solid #333',
+                borderRadius: 1,
+                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+                zIndex: 10,
+                width: 340,
+                maxHeight: '80vh',
+                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
+                '& .MuiTextField-root': {
+                    '& .MuiInputLabel-root': {
+                        color: '#999',
+                    },
+                    '& .MuiOutlinedInput-root': {
+                        color: '#fff',
+                        '& fieldset': {
+                            borderColor: '#444',
+                        },
+                        '&:hover fieldset': {
+                            borderColor: '#61dafb',
+                        },
+                        '&.Mui-focused fieldset': {
+                            borderColor: '#61dafb',
+                        },
+                    },
+                },
+                '& .MuiInputLabel-root': {
+                    color: '#999',
+                },
+                '& .MuiSelect-icon': {
+                    color: '#61dafb',
+                },
+                '& .MuiButton-contained': {
+                    bgcolor: '#61dafb',
+                    color: '#000',
+                    '&:hover': {
+                        bgcolor: '#4db6d6',
+                    },
+                },
+                '& .MuiButton-outlined': {
+                    borderColor: '#333',
+                    color: '#fff',
+                    '&:hover': {
+                        borderColor: '#61dafb',
+                        bgcolor: 'rgba(97, 218, 251, 0.1)',
+                    },
+                },
+                '& .MuiIconButton-root': {
+                    color: '#999',
+                    '&:hover': {
+                        color: '#fff',
+                        bgcolor: 'rgba(255, 255, 255, 0.1)',
+                    },
+                },
+                '& .MuiSlider-root': {
+                    color: '#61dafb',
+                    '& .MuiSlider-rail': {
+                        backgroundColor: '#333',
+                    },
+                    '& .MuiSlider-track': {
+                        backgroundColor: '#61dafb',
+                    },
+                    '& .MuiSlider-thumb': {
+                        backgroundColor: '#61dafb',
+                    },
+                },
+                '& .MuiRadio-root': {
+                    color: '#999',
+                    '&.Mui-checked': {
+                        color: '#61dafb',
+                    },
+                },
+                '& .MuiCheckbox-root': {
+                    color: '#999',
+                    '&.Mui-checked': {
+                        color: '#61dafb',
+                    },
+                },
+            }}
+        >
+            <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
+                <Typography variant="h6" sx={{ m: 0, color: '#61dafb' }}>
+                    {t('stateMachine.compositeNodeSettings.title')}
+                </Typography>
+                <IconButton onClick={onClose} size="small">
+                    <CloseIcon fontSize="small" />
+                </IconButton>
+            </Box>
+            <TextField
+                label={t('stateMachine.compositeNodeSettings.label')}
+                value={label}
+                onChange={handleLabelChange}
+                fullWidth
+                variant="outlined"
+                size="small"
+                sx={{ mb: 2 }}
+            />
+            <Box mb={2}>
+                <InputLabel shrink>{t('stateMachine.compositeNodeSettings.dividers')}</InputLabel>
+                <RadioGroup
+                    row
+                    value={dividerType}
+                    onChange={handleDividerTypeChange}
+                >
+                    <FormControlLabel value="none" control={<Radio size="small" />} label={t('stateMachine.compositeNodeSettings.none')} />
+                    <FormControlLabel value="vertical" control={<Radio size="small" />} label={t('stateMachine.compositeNodeSettings.vertical')} />
+                    <FormControlLabel value="horizontal" control={<Radio size="small" />} label={t('stateMachine.compositeNodeSettings.horizontal')} />
+                </RadioGroup>
+                {dividerType !== 'none' && (
+                    <Box display="flex" alignItems="center" gap={1} mt={1}>
+                        <TextField
+                            label={t('stateMachine.compositeNodeSettings.dividerCount')}
+                            type="number"
+                            size="small"
+                            inputProps={{ min: 1, max: 10 }}
+                            value={dividerCount}
+                            onChange={handleDividerCountChange}
+                            sx={{ width: 120 }}
+                        />
+                    </Box>
+                )}
+            </Box>
+            <Box mb={2}>
+                <InputLabel shrink>{t('stateMachine.compositeNodeSettings.addSubstate')}</InputLabel>
+                <Box display="flex" gap={1} alignItems="center">
+                    <Select
+                        value={selectedType}
+                        onChange={handleSelectedTypeChange}
+                        size="small"
+                        sx={{ minWidth: 120 }}
+                    >
+                        {AVAILABLE_NODE_TYPES.map(type => (
+                            <MenuItem key={type.id} value={type.id}>{type.name}</MenuItem>
+                        ))}
+                    </Select>
+                    <Button onClick={handleAddChild} size="small" variant="outlined">
+                        {t('stateMachine.compositeNodeSettings.add')}
+                    </Button>
+                </Box>
+            </Box>
+            <Box mb={2}>
+                <InputLabel shrink>{t('stateMachine.compositeNodeSettings.substates')}</InputLabel>
+                <List dense>
+                    {renderedSubstates}
+                </List>
+            </Box>
+            <Box mb={2}>
+                <Typography variant="body2" fontWeight="bold" mb={0.5}>
+                    {t('stateMachine.compositeNodeSettings.width')}: {width}px
+                </Typography>
+                <Slider
+                    min={200}
+                    max={1200}
+                    step={10}
+                    value={width}
+                    onChange={handleWidthSlider}
+                />
+            </Box>
+            <Box mb={2}>
+                <Typography variant="body2" fontWeight="bold" mb={0.5}>
+                    {t('stateMachine.compositeNodeSettings.height')}: {height}px
+                </Typography>
+                <Slider
+                    min={100}
+                    max={1000}
+                    step={10}
+                    value={height}
+                    onChange={handleHeightSlider}
+                />
+            </Box>
+            <Box mb={2}>
+                <Typography variant="subtitle2" fontWeight="bold" gutterBottom>
+                    {t('stateMachine.compositeNodeSettings.pinsTitle')}
+                </Typography>
+                <Box display="flex" gap={1} alignItems="center" mb={1}>
+                    <Select
+                        value={newPinType}
+                        onChange={handleNewPinTypeChange}
+                        size="small"
+                        sx={{ minWidth: 60 }}
+                        renderValue={(value) => value === 'pin' ? <span style={{ fontSize: 20 }}>■</span> : <span style={{ fontSize: 20 }}>●</span>}
+                    >
+                        <MenuItem value="pin"><span style={{ fontSize: 20 }}>■</span></MenuItem>
+                        <MenuItem value="point"><span style={{ fontSize: 20 }}>●</span></MenuItem>
+                    </Select>
+                    <TextField
+                        label={t('stateMachine.compositeNodeSettings.count')}
+                        type="number"
+                        size="small"
+                        inputProps={{ min: 0, max: 32 }}
+                        value={pinCount}
+                        onChange={handlePinCountChange}
+                        sx={{ width: 80 }}
+                    />
+                </Box>
+                <List dense>
+                    {renderedPinPoints}
+                </List>
+            </Box>
+            <Box mb={2} display="flex" alignItems="center" gap={1}>
+                <FormControlLabel
+                    control={
+                        <Checkbox
+                            checked={hasSelfTransition}
+                            onChange={toggleSelfTransition}
+                            color="primary"
+                        />
+                    }
+                    label={t('stateMachine.compositeNodeSettings.selfTransition')}
+                />
+                {hasSelfTransition && (
+                    <TextField
+                        label={t('stateMachine.compositeNodeSettings.label')}
+                        value={selfTransitionLabel}
+                        onChange={handleSelfTransitionLabelChange}
+                        size="small"
+                        sx={{ width: 160 }}
+                    />
+                )}
+            </Box>
+            <Button
+                variant="contained"
+                color="primary"
+                fullWidth
+                onClick={onClose}
+                sx={{ mt: 1 }}
+            >
+                {t('stateMachine.compositeNodeSettings.done')}
+            </Button>
+        </Box>
+    );
+};
+
+export default CompositeStateNodeSettings;