@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,121 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Box, Button, TextField, Typography, IconButton, InputLabel } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { Node } from '@xyflow/react';
+import { UseCaseNodeData } from '../../../types/usecase-types';
+
+interface UseCaseNodeSettingsProps {
+    open: boolean;
+    node: Node<UseCaseNodeData> | null;
+    onUpdate: (updates: Partial<UseCaseNodeData>) => void;
+    onClose: () => void;
+}
+
+const SEPARATORS = [
+    { label: 'Dashes (--)', value: '--' },
+    { label: 'Periods (..)', value: '..' },
+    { label: 'Equals (==)', value: '==' },
+    { label: 'Underscores (__)', value: '__' },
+];
+
+const UseCaseNodeSettings: React.FC<UseCaseNodeSettingsProps> = ({ open, node, onUpdate, onClose }) => {
+    const [label, setLabel] = useState(node?.data.label || '');
+    const [description, setDescription] = useState(node?.data.description || '');
+
+    useEffect(() => {
+        setLabel(node?.data.label || '');
+        setDescription(node?.data.description || '');
+    }, [node]);
+
+    const handleLabelChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        setLabel(e.target.value);
+        onUpdate({ label: e.target.value });
+    }, [onUpdate]);
+
+    const handleDescriptionChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        setDescription(e.target.value);
+        onUpdate({ description: e.target.value });
+    }, [onUpdate]);
+
+    const handleInsertSeparator = (separator: string) => {
+        const textarea = document.getElementById('usecase-description-textarea') as HTMLTextAreaElement | null;
+        if (!textarea) return;
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const newValue = description.slice(0, start) + `\n${separator}\n` + description.slice(end);
+        setDescription(newValue);
+        onUpdate({ description: newValue });
+        setTimeout(() => {
+            textarea.focus();
+            textarea.selectionStart = textarea.selectionEnd = start + separator.length + 2;
+        }, 0);
+    };
+
+    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: 340,
+            }}
+        >
+            <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
+                <Typography variant="h6">Use Case Node Settings</Typography>
+                <IconButton onClick={onClose} size="small" sx={{ color: '#666' }}>
+                    <CloseIcon fontSize="small" />
+                </IconButton>
+            </Box>
+            <TextField
+                label="Label"
+                value={label}
+                onChange={handleLabelChange}
+                fullWidth
+                variant="outlined"
+                size="small"
+                sx={{ mb: 2 }}
+            />
+            <Box mb={1}>
+                <Typography variant="subtitle2" sx={{ mb: 0.5 }}>Description</Typography>
+                <TextField
+                    id="usecase-description-textarea"
+                    value={description}
+                    onChange={handleDescriptionChange}
+                    multiline
+                    minRows={4}
+                    maxRows={8}
+                    fullWidth
+                    variant="outlined"
+                    size="small"
+                />
+            </Box>
+            <Box mb={2}>
+                <Typography variant="caption">Insert Separator:</Typography>
+                <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mt: 0.5 }}>
+                    {SEPARATORS.map((sep) => (
+                        <Button key={sep.value} size="small" variant="outlined" onClick={() => handleInsertSeparator(sep.value)}>{sep.label}</Button>
+                    ))}
+                </Box>
+            </Box>
+            <Button
+                variant="contained"
+                color="primary"
+                fullWidth
+                onClick={onClose}
+                sx={{ mt: 1 }}
+            >
+                Close
+            </Button>
+        </Box>
+    );
+};
+
+export default React.memo(UseCaseNodeSettings); 

package/packages/diagrams/src/lib/templates/useCaseDiagram/controls/UseCaseControls.tsx

@@ -0,0 +1,289 @@
+import React from 'react';
+import { Box, Typography, Paper, Divider, Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import AddIcon from '@mui/icons-material/Add';
+import { Node, Edge } from '@xyflow/react';
+import { UseCaseEdgeData, UseCaseNodeData } from '../../../types/usecase-types';
+import { ActorNodeData } from '../../../types/shared-node-types';
+
+interface UseCaseControlsProps {
+    onAddActor: (type: 'stickman' | 'business') => void;
+    onAddUseCase: () => void;
+    onAddBusinessUseCase: () => void;
+    onAddPackage: () => void;
+    onAddAssociation: () => void;
+    onAddInclude: () => void;
+    onAddExtend: () => void;
+    edges: Edge<UseCaseEdgeData>[];
+    nodes: Node[];
+    onEditRelationship?: (edge: Edge<UseCaseEdgeData>) => void;
+}
+
+const StickmanIcon = () => (
+    <svg width="28" height="36" viewBox="0 0 40 60">
+        <circle cx="20" cy="10" r="8" stroke="black" strokeWidth="2" fill="white" />
+        <line x1="20" y1="18" x2="20" y2="38" stroke="black" strokeWidth="2" />
+        <line x1="20" y1="24" x2="8" y2="32" stroke="black" strokeWidth="2" />
+        <line x1="20" y1="24" x2="32" y2="32" stroke="black" strokeWidth="2" />
+        <line x1="20" y1="38" x2="8" y2="52" stroke="black" strokeWidth="2" />
+        <line x1="20" y1="38" x2="32" y2="52" stroke="black" strokeWidth="2" />
+    </svg>
+);
+
+const BusinessActorIcon = () => (
+    <svg width="28" height="36" viewBox="0 0 40 60">
+        <circle cx="20" cy="10" r="8" stroke="black" strokeWidth="2" fill="white" />
+        <line x1="16" y1="6" x2="24" y2="14" stroke="black" strokeWidth="2" /> {/* Cross for business actor */}
+        <line x1="24" y1="6" x2="16" y2="14" stroke="black" strokeWidth="2" />
+        <line x1="20" y1="18" x2="20" y2="38" stroke="black" strokeWidth="2" />
+        <line x1="20" y1="24" x2="8" y2="32" stroke="black" strokeWidth="2" />
+        <line x1="20" y1="24" x2="32" y2="32" stroke="black" strokeWidth="2" />
+        <line x1="20" y1="38" x2="8" y2="52" stroke="black" strokeWidth="2" />
+        <line x1="20" y1="38" x2="32" y2="52" stroke="black" strokeWidth="2" />
+    </svg>
+);
+
+// Move getNodeTypeLabel outside the component for efficiency
+const getNodeTypeLabel = (node: Node | undefined): string => {
+    if (!node || !node.type) return 'Unknown';
+    switch (node.type) {
+        case 'actor':
+            return (node.data as ActorNodeData)?.style === 'business' ? 'Business Actor' : 'Actor';
+        case 'usecase':
+            return (node.data as UseCaseNodeData)?.business ? 'Business Use Case' : 'Use Case';
+        case 'package':
+            return 'Package';
+        default:
+            return node.type;
+    }
+};
+
+const ACTOR_TYPES: Array<{
+    key: 'stickman' | 'business';
+    label: string;
+    icon: React.ReactElement;
+}> = [
+        {
+            key: 'stickman',
+            label: 'Stickman',
+            icon: <StickmanIcon />,
+        },
+        {
+            key: 'business',
+            label: 'Business Actor',
+            icon: <BusinessActorIcon />,
+        },
+    ];
+
+const UseCaseControls: React.FC<UseCaseControlsProps> = ({
+    onAddActor,
+    onAddUseCase,
+    onAddBusinessUseCase,
+    onAddPackage,
+    onAddAssociation,
+    onAddInclude,
+    onAddExtend,
+    edges = [],
+    nodes = [],
+    onEditRelationship,
+}) => {
+    const [expandActors, setExpandActors] = React.useState(true);
+    const [expandOthers, setExpandOthers] = React.useState(true);
+    const [expandRelationships, setExpandRelationships] = React.useState(true);
+
+    return (
+        <Paper
+            elevation={3}
+            sx={{
+                p: 2,
+                borderRadius: 2,
+                bgcolor: '#242424',
+                color: '#fff',
+                border: '1px solid #333',
+                width: '100%',
+                maxHeight: '100%',
+                overflowY: 'auto',
+                // Custom scrollbar styling
+                '&::-webkit-scrollbar': {
+                    width: '6px',
+                },
+                '&::-webkit-scrollbar-track': {
+                    background: 'transparent',
+                },
+                '&::-webkit-scrollbar-thumb': {
+                    background: '#444',
+                    borderRadius: '3px',
+                    '&:hover': {
+                        background: '#666',
+                    },
+                },
+                // Dark theme styling for all child components
+                '& .MuiDivider-root': {
+                    borderColor: '#333',
+                },
+                '& .MuiListItemButton-root': {
+                    color: '#fff',
+                    '&:hover': {
+                        bgcolor: 'rgba(97, 218, 251, 0.1)',
+                    },
+                },
+                '& .MuiIconButton-root': {
+                    color: '#999',
+                    '&:hover': {
+                        color: '#fff',
+                        bgcolor: 'rgba(255, 255, 255, 0.1)',
+                    },
+                },
+            }}
+        >
+            <Typography variant="h6" sx={{ fontWeight: 'medium', mb: 2 }}>
+                Use Case Diagram
+            </Typography>
+            {/* Actors Section */}
+            <Box mb={1}>
+                <Box
+                    display="flex"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    onClick={() => setExpandActors(!expandActors)}
+                    sx={{ cursor: 'pointer', '&:hover': { bgcolor: 'action.hover' }, p: 1, borderRadius: 1 }}
+                >
+                    <Typography variant="subtitle2" fontWeight="bold">
+                        Actors
+                    </Typography>
+                    {expandActors ? <ExpandLessIcon fontSize="small" /> : <ExpandMoreIcon fontSize="small" />}
+                </Box>
+                <Collapse in={expandActors}>
+                    <List dense disablePadding>
+                        {ACTOR_TYPES.map((actor) => (
+                            <ListItem disablePadding key={actor.key}>
+                                <ListItemButton onClick={() => onAddActor(actor.key as 'stickman' | 'business')} sx={{ pl: 2 }}>
+                                    <ListItemIcon sx={{ minWidth: 36 }}>
+                                        {actor.icon}
+                                    </ListItemIcon>
+                                    <ListItemText primary={actor.label} />
+                                </ListItemButton>
+                            </ListItem>
+                        ))}
+                    </List>
+                </Collapse>
+            </Box>
+            <Divider sx={{ my: 1 }} />
+            {/* Others Section */}
+            <Box mb={1}>
+                <Box
+                    display="flex"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    onClick={() => setExpandOthers(!expandOthers)}
+                    sx={{ cursor: 'pointer', '&:hover': { bgcolor: 'action.hover' }, p: 1, borderRadius: 1 }}
+                >
+                    <Typography variant="subtitle2" fontWeight="bold">
+                        Use Cases
+                    </Typography>
+                    {expandOthers ? <ExpandLessIcon fontSize="small" /> : <ExpandMoreIcon fontSize="small" />}
+                </Box>
+                <Collapse in={expandOthers}>
+                    <List dense disablePadding>
+                        <ListItem disablePadding>
+                            <ListItemButton onClick={onAddUseCase} sx={{ pl: 2 }}>
+                                <ListItemText primary="Use Case" />
+                            </ListItemButton>
+                        </ListItem>
+                        <ListItem disablePadding>
+                            <ListItemButton onClick={onAddBusinessUseCase} sx={{ pl: 2 }}>
+                                <ListItemText primary="Business Use Case" />
+                            </ListItemButton>
+                        </ListItem>
+                        <ListItem disablePadding>
+                            <ListItemButton onClick={onAddPackage} sx={{ pl: 2 }}>
+                                <ListItemText primary="Package" />
+                            </ListItemButton>
+                        </ListItem>
+                    </List>
+                </Collapse>
+            </Box>
+            <Divider sx={{ my: 1 }} />
+            {/* Relationships Section */}
+            <Box mb={1}>
+                <Box
+                    display="flex"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    onClick={() => setExpandRelationships(!expandRelationships)}
+                    sx={{ cursor: 'pointer', '&:hover': { bgcolor: 'action.hover' }, p: 1, borderRadius: 1 }}
+                >
+                    <Typography variant="subtitle2" fontWeight="bold">
+                        Relationships
+                    </Typography>
+                    {expandRelationships ? <ExpandLessIcon fontSize="small" /> : <ExpandMoreIcon fontSize="small" />}
+                </Box>
+                <Collapse in={expandRelationships}>
+                    <List dense disablePadding>
+                        <ListItem disablePadding>
+                            <ListItemButton
+                                onClick={onAddAssociation}
+                                sx={{ pl: 2, bgcolor: 'primary.50', color: 'primary.main', borderRadius: 1, mb: 1, '&:hover': { bgcolor: 'primary.100' } }}
+                            >
+                                <ListItemIcon sx={{ minWidth: 36 }}>
+                                    <AddIcon />
+                                </ListItemIcon>
+                                <ListItemText primary="Add Relationship" />
+                            </ListItemButton>
+                        </ListItem>
+                        {/* Relationship List */}
+                        {edges.map((edge) => {
+                            const source = nodes.find((n: Node) => n.id === edge.source);
+                            const target = nodes.find((n: Node) => n.id === edge.target);
+                            return (
+                                <ListItem
+                                    disablePadding
+                                    key={edge.id}
+                                    sx={{ alignItems: 'center', width: '100%', py: 0.5 }}
+                                >
+                                    <Box
+                                        sx={{
+                                            display: 'flex',
+                                            alignItems: 'space-between',
+                                            width: '100%',
+                                            justifyContent: 'space-between',
+                                            cursor: 'pointer',
+                                            borderRadius: 1,
+                                            transition: 'background 0.2s',
+                                            '&:hover': { bgcolor: 'action.hover' },
+                                            p: 1,
+                                        }}
+                                        onClick={() => onEditRelationship && onEditRelationship(edge)}
+                                    >
+                                        {/* Source node label */}
+                                        <Box sx={{ mr: 1, maxWidth: 140, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', fontSize: 12, whiteSpace: 'normal', wordBreak: 'break-word' }}>
+                                            <span style={{ fontWeight: 600 }} title={getNodeTypeLabel(source)}>{(source?.data as UseCaseNodeData | ActorNodeData)?.label || source?.id || 'Unknown'}</span>
+                                        </Box>
+                                        {/* Relationship type and label (smaller) */}
+                                        <Box sx={{ flex: '0 0 60px', textAlign: 'center' }}>
+                                            <Typography variant="caption" sx={{ fontWeight: 500 }}>
+                                                {edge.data?.type || edge.type}
+                                            </Typography>
+                                            {edge.data?.label && (
+                                                <Typography variant="caption" sx={{ display: 'block', color: 'text.secondary', fontSize: 11 }}>
+                                                    {edge.data.label}
+                                                </Typography>
+                                            )}
+                                        </Box>
+                                        {/* Target node label */}
+                                        <Box sx={{ ml: 1, maxWidth: 140, textAlign: 'right', overflow: 'hidden', textOverflow: 'ellipsis', fontSize: 12, whiteSpace: 'normal', wordBreak: 'break-word' }}>
+                                            <span style={{ fontWeight: 600 }} title={getNodeTypeLabel(target)}>{(target?.data as UseCaseNodeData | ActorNodeData)?.label || target?.id || 'Unknown'}</span>
+                                        </Box>
+                                    </Box>
+                                </ListItem>
+                            );
+                        })}
+                    </List>
+                </Collapse>
+            </Box>
+        </Paper>
+    );
+};
+
+export default React.memo(UseCaseControls);

package/packages/diagrams/src/lib/templates/useCaseDiagram/nodes/PackageNode.tsx

@@ -0,0 +1,84 @@
+import React, { memo } from 'react';
+import { Handle, NodeProps, Position, NodeResizeControl } from '@xyflow/react';
+import { PackageNodeData } from '../../../types/usecase-types';
+import ResizeIcon from '../../../components/ResizeIcon';
+
+const controlStyle = {
+    background: 'transparent',
+    border: 'none',
+};
+
+const PackageNode: React.FC<NodeProps> = ({ data, selected }) => {
+    const nodeData = data as PackageNodeData;
+    const width = nodeData.width || 300;
+    const height = nodeData.height || 180;
+
+    return (
+        <>
+            <NodeResizeControl
+                style={controlStyle}
+                minWidth={200}
+                minHeight={120}
+                maxWidth={25000}
+                maxHeight={25000}
+            >
+                {/* <ResizeIcon /> */}
+            </NodeResizeControl>
+
+            <div
+                style={{
+                    minWidth: Number(width),
+                    minHeight: Number(height),
+                    border: selected ? '2.5px solid #1976d2' : '2px solid #888',
+                    borderRadius: 8,
+                    background: 'transparent',
+                    position: 'relative',
+                    boxShadow: selected ? '0 0 0 2px #1976d2' : undefined,
+                    overflow: 'visible',
+                }}
+            >
+                {/* Package label tab */}
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: -18,
+                        left: 0,
+                        width: 140,
+                        height: 32,
+                        background: '#1976d2',
+                        color: '#fff',
+                        borderTopLeftRadius: 8,
+                        borderTopRightRadius: 8,
+                        fontWeight: 'bold',
+                        fontSize: 16,
+                        display: 'flex',
+                        alignItems: 'center',
+                        paddingLeft: 16,
+                        zIndex: 2,
+                    }}
+                >
+                    {nodeData.label}
+                </div>
+                {/* Description (optional) */}
+                {nodeData.description && (
+                    <div style={{ padding: '36px 12px 8px 12px', color: '#333', fontSize: 13 }}>
+                        {nodeData.description}
+                    </div>
+                )}
+                {/* Child nodes will be rendered by React Flow as children of this node via parentNode/extent, not as React children. */}
+                <Handle
+                    id="right"
+                    type="source"
+                    position={Position.Right}
+                />
+                <Handle
+                    id="left"
+                    type="target"
+                    position={Position.Left}
+                />
+            </div>
+        </>
+    );
+};
+
+export default memo(PackageNode); 

package/packages/diagrams/src/lib/templates/useCaseDiagram/nodes/UseCaseEdge.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { BaseEdge, EdgeLabelRenderer, getBezierPath, EdgeProps, Position } from '@xyflow/react';
+import { UseCaseEdgeData } from '../../../types/usecase-types';
+import { Box } from '@mui/material';
+
+const EDGE_STYLES = {
+    association: { color: '#222', dash: '', label: undefined },
+    include: { color: '#222', dash: '6,4', label: '<<include>>' },
+    extend: { color: '#222', dash: '6,4', label: '<<extend>>' },
+};
+
+const UseCaseEdge: React.FC<EdgeProps> = (props) => {
+    const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, label } = props;
+    const edgeData = data as UseCaseEdgeData;
+    const [edgePath, labelX, labelY] = getBezierPath({
+        sourceX,
+        sourceY,
+        sourcePosition: sourcePosition ?? Position.Right,
+        targetX,
+        targetY,
+        targetPosition: targetPosition ?? Position.Left,
+    });
+
+    // Determine edge style
+    const type = edgeData?.type || 'association';
+    const style = EDGE_STYLES[type] || EDGE_STYLES.association;
+    const edgeColor = edgeData?.color || style.color;
+    const edgeDash = style.dash;
+    const edgeLabel = label || style.label;
+
+    // Determine markerEnd and markerStart based on arrowHead type
+    let markerEnd = '';
+    let markerStart = '';
+    // Helper to pick marker by type
+    const getMarkerId = (type: 'triangle' | 'v', end: 'start' | 'end') => {
+        if (type === 'triangle') return end === 'end' ? 'triangle-arrowhead' : 'triangle-arrowhead-start';
+        if (type === 'v') return end === 'end' ? 'v-arrowhead' : 'v-arrowhead-start';
+        return '';
+    };
+    const validArrowTypes = ['none', 'triangle', 'v'];
+    const arrowHeadTargetType = typeof edgeData?.arrowHeadTarget === 'string' && validArrowTypes.includes(edgeData.arrowHeadTarget) ? edgeData.arrowHeadTarget : 'none';
+    const arrowHeadSourceType = typeof edgeData?.arrowHeadSource === 'string' && validArrowTypes.includes(edgeData.arrowHeadSource) ? edgeData.arrowHeadSource : 'none';
+    if (arrowHeadTargetType !== 'none') {
+        markerEnd = `url(#${getMarkerId(arrowHeadTargetType, 'end')})`;
+    }
+    if (arrowHeadSourceType !== 'none') {
+        markerStart = `url(#${getMarkerId(arrowHeadSourceType, 'start')})`;
+    }
+
+    return (
+        <>
+            <svg style={{ height: 0 }}>
+                <defs>
+                    {/* Triangle marker (end) */}
+                    <marker
+                        id="triangle-arrowhead"
+                        viewBox="0 0 12 8"
+                        refX="12"
+                        refY="4"
+                        markerWidth="6"
+                        markerHeight="8"
+                        orient="auto"
+                    >
+                        <polygon points="0,0 12,4 0,8 3,4" fill="white" stroke="black" />
+                    </marker>
+                    {/* Triangle marker (start) */}
+                    <marker
+                        id="triangle-arrowhead-start"
+                        viewBox="0 0 12 8"
+                        refX="0"
+                        refY="4"
+                        markerWidth="6"
+                        markerHeight="8"
+                        orient="auto"
+                    >
+                        <polygon points="12,0 0,4 12,8 9,4" fill="white" stroke="black" />
+                    </marker>
+                    {/* V marker (end) */}
+                    <marker
+                        id="v-arrowhead"
+                        viewBox="0 0 6 8"
+                        refX="6"
+                        refY="4"
+                        markerWidth="8"
+                        markerHeight="5"
+                        orient="auto"
+                    >
+                        <polyline points="0,0 6,4 0,8" fill="none" stroke="black" strokeWidth="1.5" />
+                    </marker>
+                    {/* V marker (start) */}
+                    <marker
+                        id="v-arrowhead-start"
+                        viewBox="0 0 6 8"
+                        refX="0"
+                        refY="4"
+                        markerWidth="8"
+                        markerHeight="5"
+                        orient="auto"
+                    >
+                        <polyline points="6,0 0,4 6,8" fill="none" stroke="black" strokeWidth="1.5" />
+                    </marker>
+                </defs>
+            </svg>
+            <BaseEdge path={edgePath} markerEnd={markerEnd} markerStart={markerStart} style={{ stroke: edgeColor, strokeWidth: 2, strokeDasharray: edgeDash }} />
+            {edgeLabel && (
+                <EdgeLabelRenderer>
+                    <Box sx={{ position: 'absolute', transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`, background: 'white', padding: '2px 6px', borderRadius: 2, fontSize: 12, border: '1px solid #ccc' }}>
+                        {edgeLabel}
+                    </Box>
+                </EdgeLabelRenderer>
+            )}
+        </>
+    );
+};
+
+export default React.memo(UseCaseEdge);