@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/templates/useCaseDiagram/UseCaseDiagram.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { UseCaseDiagramProps } from '../../types/usecase-types';
+import UseCaseDiagramFlow from './components/UseCaseDiagramFlow';
+
+const UseCaseDiagram: React.FC<UseCaseDiagramProps> = ({ caseNodes, caseEdges }) => {
+    return (
+        <div className="use-case-diagram-container">
+            <ReactFlowProvider>
+                <UseCaseDiagramFlow caseNodes={caseNodes} caseEdges={caseEdges} />
+            </ReactFlowProvider>
+        </div>
+    );
+};
+
+export default UseCaseDiagram;

package/packages/diagrams/src/lib/templates/useCaseDiagram/components/ActorNodeSettings.tsx

@@ -0,0 +1,104 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Box, Button, TextField, Typography, IconButton, InputLabel, FormControlLabel, Checkbox } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { Node } from '@xyflow/react';
+import { ActorNodeData } from '../../../types/shared-node-types';
+import { useTranslation } from 'react-i18next';
+
+interface ActorNodeSettingsProps {
+    open: boolean;
+    node: Node<ActorNodeData> | null;
+    onUpdate: (updates: Partial<ActorNodeData>) => void;
+    onClose: () => void;
+    onSelfMessageChange?: (checked: boolean) => void;
+    hasSelfMessage?: boolean;
+}
+
+const ActorNodeSettings: React.FC<ActorNodeSettingsProps> = ({ open, node, onUpdate, onClose, onSelfMessageChange, hasSelfMessage }) => {
+    const { t } = useTranslation();
+    const [label, setLabel] = useState(node?.data.label || '');
+    const [color, setColor] = useState(node?.data.color || '#000000');
+    const [selfMessage, setSelfMessage] = useState(!!hasSelfMessage);
+
+    useEffect(() => {
+        setLabel(node?.data.label || '');
+        setColor(node?.data.color || '#000000');
+        setSelfMessage(!!hasSelfMessage);
+    }, [node, hasSelfMessage]);
+
+    const handleLabelChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setLabel(e.target.value);
+        onUpdate({ label: e.target.value });
+    }, [onUpdate]);
+
+    const handleColorChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setColor(e.target.value);
+        onUpdate({ color: e.target.value });
+    }, [onUpdate]);
+
+    const handleSelfMessageChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setSelfMessage(e.target.checked);
+        if (onSelfMessageChange) onSelfMessageChange(e.target.checked);
+    }, [onSelfMessageChange]);
+
+    if (!open || !node) return null;
+
+    return (
+        <Box
+            sx={{
+                position: 'absolute',
+                top: 100,
+                right: 20,
+                bgcolor: 'background.paper',
+                p: 2,
+                border: '1px solid #ddd',
+                borderRadius: 1,
+                boxShadow: 3,
+                zIndex: 20,
+                width: 320,
+            }}
+        >
+            <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
+                <Typography variant="h6">{t('actorNodeSettings.title')}</Typography>
+                <IconButton onClick={onClose} size="small" sx={{ color: '#666' }}>
+                    <CloseIcon fontSize="small" />
+                </IconButton>
+            </Box>
+            <TextField
+                label={t('actorNodeSettings.label')}
+                value={label}
+                onChange={handleLabelChange}
+                fullWidth
+                variant="outlined"
+                size="small"
+                sx={{ mb: 2 }}
+            />
+            <Box mb={2}>
+                <InputLabel shrink htmlFor="color-picker">{t('actorNodeSettings.color')}</InputLabel>
+                <input
+                    id="color-picker"
+                    type="color"
+                    value={color}
+                    onChange={handleColorChange}
+                    style={{ width: '100%', height: 36, border: 'none', background: 'none', cursor: 'pointer' }}
+                />
+            </Box>
+            <FormControlLabel
+                control={<Checkbox checked={selfMessage} onChange={handleSelfMessageChange} />}
+                label={t('actorNodeSettings.addSelfMessage')}
+                sx={{ mb: 2 }}
+            />
+            <Button
+                variant="contained"
+                color="primary"
+                fullWidth
+                onClick={onClose}
+                sx={{ mt: 1 }}
+            >
+                {t('actorNodeSettings.close')}
+            </Button>
+        </Box>
+    );
+};
+
+export default React.memo(ActorNodeSettings); 

package/packages/diagrams/src/lib/templates/useCaseDiagram/components/AddRelationshipDialog.tsx

@@ -0,0 +1,187 @@
+import React, { useState, useEffect } from 'react';
+import {
+    Box,
+    Button,
+    FormControl,
+    InputLabel,
+    Select,
+    MenuItem,
+    TextField,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    SelectChangeEvent,
+    ToggleButton,
+    ToggleButtonGroup,
+} from '@mui/material';
+import { Node, Edge } from '@xyflow/react';
+import { UseCaseEdgeType, UseCaseEdgeData } from '../../../types/usecase-types';
+
+interface AddRelationshipDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onAddRelationship: (sourceId: string, targetId: string, type: UseCaseEdgeType, label?: string, arrowHeadSource?: 'none' | 'triangle' | 'v', arrowHeadTarget?: 'none' | 'triangle' | 'v') => void;
+    nodes: Node[];
+    initialSourceId?: string | null;
+    initialTargetId?: string | null;
+    onDialogOpen?: () => void;
+    editingEdge?: Edge<UseCaseEdgeData> | null;
+    onDeleteRelationship?: () => void;
+}
+
+const AddRelationshipDialog: React.FC<AddRelationshipDialogProps> = ({ open, onClose, onAddRelationship, nodes, initialSourceId, initialTargetId, onDialogOpen, editingEdge, onDeleteRelationship }) => {
+    const [sourceId, setSourceId] = useState('');
+    const [targetId, setTargetId] = useState('');
+    const [relationshipType, setRelationshipType] = useState<UseCaseEdgeType>('association');
+    const [edgeLabel, setEdgeLabel] = useState('');
+    const [arrowHeadSource, setArrowHeadSource] = useState<'none' | 'triangle' | 'v'>('none');
+    const [arrowHeadTarget, setArrowHeadTarget] = useState<'none' | 'triangle' | 'v'>('none');
+
+    useEffect(() => {
+        if (open && nodes.length > 0) {
+            if (editingEdge) {
+                setSourceId(editingEdge.source);
+                setTargetId(editingEdge.target);
+                setRelationshipType((editingEdge.data?.type || editingEdge.type || 'association') as UseCaseEdgeType);
+                setEdgeLabel(editingEdge.data?.label || '');
+                setArrowHeadSource(editingEdge.data?.arrowHeadSource || 'none');
+                setArrowHeadTarget(editingEdge.data?.arrowHeadTarget || editingEdge.data?.arrowHead || 'none');
+            } else {
+                setSourceId(initialSourceId || nodes[0].id);
+                setTargetId(initialTargetId || (nodes.length > 1 ? nodes[1].id : nodes[0].id));
+                setRelationshipType('association');
+                setEdgeLabel('');
+                setArrowHeadSource('none');
+                setArrowHeadTarget('none');
+            }
+            if (onDialogOpen) onDialogOpen();
+        }
+    }, [open, nodes, initialSourceId, initialTargetId, onDialogOpen, editingEdge]);
+
+    const handleSubmit = () => {
+        onAddRelationship(
+            sourceId,
+            targetId,
+            relationshipType,
+            edgeLabel,
+            arrowHeadSource,
+            arrowHeadTarget
+        );
+        onClose();
+    };
+
+    return (
+        <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+            <DialogTitle>{editingEdge ? 'Edit Relationship' : 'Add Relationship'}</DialogTitle>
+            <DialogContent>
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, my: 2 }}>
+                    <FormControl fullWidth>
+                        <InputLabel>Source Node</InputLabel>
+                        <Select
+                            value={sourceId}
+                            onChange={(e: SelectChangeEvent) => setSourceId(e.target.value as string)}
+                            label="Source Node"
+                        >
+                            {nodes.map((node) => (
+                                <MenuItem key={`source-${node.id}`} value={node.id}>
+                                    {String(node.data?.label) || node.id}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+
+                    <FormControl fullWidth>
+                        <InputLabel>Target Node</InputLabel>
+                        <Select
+                            value={targetId}
+                            onChange={(e: SelectChangeEvent) => setTargetId(e.target.value as string)}
+                            label="Target Node"
+                        >
+                            {nodes.map((node) => (
+                                <MenuItem key={`target-${node.id}`} value={node.id}>
+                                    {String(node.data?.label) || node.id}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+
+                    <FormControl fullWidth>
+                        <InputLabel>Relationship Type</InputLabel>
+                        <Select
+                            value={relationshipType}
+                            onChange={(e: SelectChangeEvent) => setRelationshipType(e.target.value as UseCaseEdgeType)}
+                            label="Relationship Type"
+                        >
+                            <MenuItem value="association">Association</MenuItem>
+                            <MenuItem value="include">Include</MenuItem>
+                            <MenuItem value="extend">Extend</MenuItem>
+                        </Select>
+                    </FormControl>
+
+                    <TextField
+                        label="Label (optional)"
+                        value={edgeLabel}
+                        onChange={(e) => setEdgeLabel(e.target.value)}
+                        fullWidth
+                    />
+
+                    <Box mb={2}>
+                        <InputLabel shrink>Arrowhead at Source</InputLabel>
+                        <ToggleButtonGroup
+                            value={arrowHeadSource}
+                            exclusive
+                            onChange={(_, value) => value && setArrowHeadSource(value)}
+                            size="small"
+                        >
+                            <ToggleButton value="none">None</ToggleButton>
+                            <ToggleButton value="triangle">
+                                <svg width="24" height="16"><polygon points="24,8 0,0 0,16" fill="white" stroke="black" /></svg>
+                            </ToggleButton>
+                            <ToggleButton value="v">
+                                <svg width="24" height="16"><polyline points="24,0 12,8 24,16" fill="none" stroke="black" strokeWidth="2" /></svg>
+                            </ToggleButton>
+                        </ToggleButtonGroup>
+                    </Box>
+                    <Box mb={2}>
+                        <InputLabel shrink>Arrowhead at Target</InputLabel>
+                        <ToggleButtonGroup
+                            value={arrowHeadTarget}
+                            exclusive
+                            onChange={(_, value) => value && setArrowHeadTarget(value)}
+                            size="small"
+                        >
+                            <ToggleButton value="none">None</ToggleButton>
+                            <ToggleButton value="triangle">
+                                <svg width="24" height="16"><polygon points="0,8 24,0 24,16" fill="white" stroke="black" /></svg>
+                            </ToggleButton>
+                            <ToggleButton value="v">
+                                <svg width="24" height="16"><polyline points="0,0 12,8 0,16" fill="none" stroke="black" strokeWidth="2" /></svg>
+                            </ToggleButton>
+                        </ToggleButtonGroup>
+                    </Box>
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                {editingEdge && onDeleteRelationship && (
+                    <Button onClick={onDeleteRelationship} color="error">
+                        Delete
+                    </Button>
+                )}
+                <Button onClick={onClose} color="secondary">
+                    Cancel
+                </Button>
+                <Button
+                    onClick={handleSubmit}
+                    color="primary"
+                    variant="contained"
+                    disabled={!sourceId || !targetId}
+                >
+                    {editingEdge ? 'Save' : 'Add Relationship'}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default AddRelationshipDialog; 

package/packages/diagrams/src/lib/templates/useCaseDiagram/components/PackageNodeSettings.tsx

@@ -0,0 +1,206 @@
+import React, { useState, useCallback } from 'react';
+import {
+    Box,
+    TextField,
+    Typography,
+    Button,
+    List,
+    ListItem,
+    ListItemText,
+    IconButton,
+    Select,
+    MenuItem,
+    Slider
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Node } from '@xyflow/react';
+import { PackageNodeData, UseCaseNodeData } from '../../../types/usecase-types';
+import { ActorNodeData } from '../../../types/shared-node-types';
+
+const AVAILABLE_NODE_TYPES = [
+    { id: 'UseCaseNode', name: 'Use Case' },
+    { id: 'BusinessUseCaseNode', name: 'Business Use Case' },
+    { id: 'ActorNode', name: 'Actor' },
+    { id: 'BusinessActorNode', name: 'Business Actor' },
+    { id: 'PackageNode', name: 'Package' },
+    // Add more node types as needed
+];
+
+interface PackageNodeSettingsProps {
+    nodeId: string;
+    data: PackageNodeData;
+    nodes: Node[];
+    setNodes: (nodes: Node[]) => void;
+    onUpdate: (updates: Partial<PackageNodeData>) => void;
+    onClose: () => void;
+}
+
+const PackageNodeSettings: React.FC<PackageNodeSettingsProps> = ({ nodeId, data, nodes, setNodes, onUpdate, onClose }) => {
+    const [label, setLabel] = useState<string>(data.label || '');
+    const children: string[] = Array.isArray(data.children) ? data.children : [];
+    const [selectedType, setSelectedType] = useState<string>(AVAILABLE_NODE_TYPES[0].id);
+    const initialWidth = typeof data.width === 'number' && !isNaN(data.width) ? data.width : 300;
+    const initialHeight = typeof data.height === 'number' && !isNaN(data.height) ? data.height : 180;
+    const [width, setWidth] = useState<number>(initialWidth);
+    const [height, setHeight] = useState<number>(initialHeight);
+
+    const handleLabelChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setLabel(e.target.value);
+        onUpdate({ label: e.target.value });
+    }, [onUpdate]);
+
+    const handleAddChild = useCallback(() => {
+        const newId = `${selectedType}_${Date.now()}`;
+        const offsetX = 40 + (children.length % 3) * 100;
+        const offsetY = 40 + Math.floor(children.length / 3) * 80;
+        let type: string;
+        let data: Partial<UseCaseNodeData | PackageNodeData | ActorNodeData>;
+        let label: string;
+        if (selectedType === 'UseCaseNode') {
+            type = 'usecase';
+            label = `Use Case ${nodes.filter(n => n.type === 'usecase' && !n.data.business && n.parentId === nodeId).length + 1}`;
+            data = { label, business: false };
+        } else if (selectedType === 'BusinessUseCaseNode') {
+            type = 'usecase';
+            label = `Business Use Case ${nodes.filter(n => n.type === 'usecase' && n.data.business && n.parentId === nodeId).length + 1}`;
+            data = { label, business: true };
+        } else if (selectedType === 'ActorNode') {
+            type = 'actor';
+            label = `Actor ${nodes.filter(n => n.type === 'actor' && n.data.style !== 'business' && n.parentId === nodeId).length + 1}`;
+            data = { label, style: 'stickman' };
+        } else if (selectedType === 'BusinessActorNode') {
+            type = 'actor';
+            label = `Business Actor ${nodes.filter(n => n.type === 'actor' && n.data.style === 'business' && n.parentId === nodeId).length + 1}`;
+            data = { label, style: 'business' };
+        } else if (selectedType === 'PackageNode') {
+            type = 'package';
+            label = `Package ${nodes.filter(n => n.type === 'package' && n.parentId === nodeId).length + 1}`;
+            data = { label };
+        } else {
+            type = 'usecase';
+            label = 'Node';
+            data = { label };
+        }
+        const newNode: Node = {
+            id: newId,
+            type,
+            position: { x: offsetX, y: offsetY },
+            data,
+            parentId: nodeId,
+            extent: 'parent',
+            draggable: true,
+        };
+        setNodes([...nodes, newNode]);
+        onUpdate({ children: [...children, newId] });
+    }, [selectedType, children, setNodes, nodes, nodeId, onUpdate]);
+
+    const handleRemoveChild = useCallback((childId: string) => {
+        setNodes(nodes.filter((n: Node) => n.id !== childId));
+        onUpdate({ children: children.filter((id: string) => id !== childId) });
+    }, [setNodes, nodes, onUpdate, children]);
+
+    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 });
+    }, [onUpdate]);
+
+    return (
+        <Box
+            sx={{
+                position: 'absolute',
+                top: 100,
+                right: 20,
+                bgcolor: 'background.paper',
+                p: 2,
+                border: '1px solid #ddd',
+                borderRadius: 1,
+                boxShadow: 3,
+                zIndex: 20,
+                width: 320,
+            }}
+        >
+            <Typography variant="h6" mb={2}>Package Settings</Typography>
+            <TextField
+                label="Package Name"
+                value={label}
+                onChange={handleLabelChange}
+                fullWidth
+                size="small"
+                sx={{ mb: 2 }}
+            />
+            <Box mb={2}>
+                <Typography variant="subtitle2" mb={1}>Add Child Node</Typography>
+                <Box display="flex" gap={1} alignItems="center">
+                    <Select
+                        value={selectedType}
+                        onChange={e => setSelectedType(e.target.value as string)}
+                        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">Add</Button>
+                </Box>
+            </Box>
+            <Box mb={2}>
+                <Typography variant="subtitle2" mb={1}>Child Nodes</Typography>
+                <List dense>
+                    {children.length === 0 ? (
+                        <ListItem>
+                            <ListItemText primary={<Typography variant="caption" color="text.secondary">No child nodes</Typography>} />
+                        </ListItem>
+                    ) : (
+                        children.map((childId: string, idx: number) => {
+                            const child = nodes.find((n: Node) => n.id === childId);
+                            return (
+                                <ListItem key={childId} secondaryAction={
+                                    <IconButton edge="end" aria-label="delete" onClick={() => handleRemoveChild(childId)}>
+                                        <DeleteIcon fontSize="small" />
+                                    </IconButton>
+                                }>
+                                    <ListItemText primary={String(child?.data?.label || `Node ${idx + 1}`)} />
+                                </ListItem>
+                            );
+                        })
+                    )}
+                </List>
+            </Box>
+            <Box mb={2}>
+                <Typography variant="body2" fontWeight="bold" mb={0.5}>
+                    Width: {width}px
+                </Typography>
+                <Slider
+                    min={120}
+                    max={5000}
+                    step={10}
+                    value={width}
+                    onChange={handleWidthSlider}
+                />
+            </Box>
+            <Box mb={2}>
+                <Typography variant="body2" fontWeight="bold" mb={0.5}>
+                    Height: {height}px
+                </Typography>
+                <Slider
+                    min={80}
+                    max={5000}
+                    step={10}
+                    value={height}
+                    onChange={handleHeightSlider}
+                />
+            </Box>
+            <Button variant="contained" color="primary" fullWidth onClick={onClose}>Done</Button>
+        </Box>
+    );
+};
+
+export default React.memo(PackageNodeSettings);