@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,639 +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>
-    );
-};
-
+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;