@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

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