@flowuent-org/diagramming-core 1.0.7 → 1.1.0

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

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

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

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

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