@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/templates/collaborationDiagram/components/DraggableEdgeLabel.tsx

@@ -0,0 +1,124 @@
+import { Box } from '@mui/material';
+import React, { useState, useEffect } from 'react';
+
+interface DraggableEdgeLabelProps {
+    pathId: string;
+    label: string;
+    labelPosition: number;
+    onPositionChange: (percent: number) => void;
+    pathVersion?: string;
+}
+
+function getPointAtPercent(path: SVGPathElement, percent: number) {
+    const length = path.getTotalLength();
+    return path.getPointAtLength(length * percent);
+}
+
+// Utility to estimate label box size
+function getLabelBox(label: string, x: number, y: number) {
+    // Treat label as a single line (ignore \n)
+    const line = label.replace(/\n/g, ' ');
+    const width = Math.max(30, Math.min(600, line.length * 7 + 10)); // allow longer max width
+    const height = 22; // single line height
+    return { width, height, x: x - width / 2, y: y - height / 2 };
+}
+
+const DraggableEdgeLabel: React.FC<DraggableEdgeLabelProps> = ({ pathId, label, labelPosition, onPositionChange, pathVersion }) => {
+    const [dragging, setDragging] = useState(false);
+    const [coords, setCoords] = useState({ x: 0, y: 0 });
+
+    // Recalculate label position when path changes
+    useEffect(() => {
+        const path = document.getElementById(pathId) as SVGPathElement | null;
+        if (path) {
+            const pt = getPointAtPercent(path, labelPosition ?? 0.5);
+            setCoords({ x: pt.x, y: pt.y });
+        }
+    }, [pathId, labelPosition, pathVersion]);
+
+    useEffect(() => {
+        if (!dragging) return;
+        let rafId: number | null = null;
+        const handleMouseMove = (e: MouseEvent) => {
+            if (rafId) return; // Only schedule one frame at a time
+            rafId = window.requestAnimationFrame(() => {
+                rafId = null;
+                const path = document.getElementById(pathId) as SVGPathElement | null;
+                if (!path) return;
+                const svg = path.ownerSVGElement;
+                if (!svg) return;
+                const pt = svg.createSVGPoint();
+                pt.x = e.clientX;
+                pt.y = e.clientY;
+                const ctm = svg.getScreenCTM();
+                if (!ctm) return;
+                const svgP = pt.matrixTransform(ctm.inverse());
+                // Find the closest point along the path (reduce to 51 steps for perf)
+                const total = path.getTotalLength();
+                let best = 0;
+                let bestDist = Infinity;
+                for (let i = 0; i <= 50; i++) {
+                    const len = (i / 50) * total;
+                    const p = path.getPointAtLength(len);
+                    const dx = p.x - svgP.x;
+                    const dy = p.y - svgP.y;
+                    const dist = dx * dx + dy * dy;
+                    if (dist < bestDist) {
+                        bestDist = dist;
+                        best = i / 50;
+                    }
+                }
+                onPositionChange(best);
+            });
+        };
+        const handleMouseUp = () => setDragging(false);
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+            if (rafId) window.cancelAnimationFrame(rafId);
+        };
+    }, [dragging, onPositionChange, pathId]);
+
+    const { width, height, x: boxX, y: boxY } = getLabelBox(label, coords.x, coords.y);
+
+    return (
+        <foreignObject
+            x={boxX}
+            y={boxY}
+            width={width}
+            height={height}
+            style={{ cursor: 'grab', pointerEvents: 'all' }}
+            onMouseDown={e => { setDragging(true); e.stopPropagation(); }}
+        >
+            <Box
+                sx={{
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    whiteSpace: 'nowrap',
+                    wordBreak: 'normal',
+                    overflowWrap: 'normal',
+                    textAlign: 'center',
+                    background: 'rgba(77, 77, 77, 0.95)',
+                    borderRadius: 4,
+                    boxShadow: '0 1px 4px rgba(97, 218, 251, 0.3)',
+                    border: '1px solid #61dafb',
+                    userSelect: 'none',
+                    fontSize: 14,
+                    color: '#ffffff',
+                    padding: 0,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                }}
+            >
+                {label}
+            </Box>
+        </foreignObject>
+    );
+};
+
+export default DraggableEdgeLabel; 

package/packages/diagrams/src/lib/templates/collaborationDiagram/controls/CollaborationControls.tsx

@@ -0,0 +1,132 @@
+import React, { useCallback } from 'react';
+import { Box, Typography, Paper, Divider, List, ListItem, ListItemButton, Button } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Edge } from '@xyflow/react';
+import ControlEdgeList from '../../../components/ControlEdgeList';
+import { CollaborationNode, CollaborationEdge } from '../../../types/collaboration-types';
+
+interface CollaborationControlsProps {
+    onAddObject?: () => void;
+    onAddMultipleObjects?: () => void;
+    onAddActor?: () => void;
+    onAddMessage?: () => void;
+    nodes: CollaborationNode[];
+    edges: CollaborationEdge[];
+    onEditMessage?: (edge: CollaborationEdge) => void;
+}
+
+const nodeTypes = [
+    { id: 'object', name: 'Object', icon: null },
+    { id: 'actor', name: 'Actor', icon: null },
+];
+
+const CollaborationControls: React.FC<CollaborationControlsProps> = ({
+    onAddObject,
+    onAddMultipleObjects,
+    onAddActor,
+    onAddMessage,
+    nodes = [],
+    edges = [],
+    onEditMessage,
+}) => {
+    const { t } = useTranslation();
+    const handleEditMessage = useCallback((edge: Edge) => onEditMessage?.(edge as CollaborationEdge), [onEditMessage]);
+
+    return (
+        <Paper
+            elevation={3}
+            sx={{
+                p: 2,
+                bgcolor: '#1a1a1a',
+                color: '#b0b0b0',
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                '& .MuiButton-contained': {
+                    bgcolor: '#666',
+                    color: '#fff',
+                    '&:hover': {
+                        bgcolor: '#777',
+                    },
+                },
+                '& .MuiListItemButton-root': {
+                    color: '#b0b0b0',
+                    '&:hover': {
+                        bgcolor: 'rgba(176, 176, 176, 0.1)',
+                    },
+                },
+                '& .MuiDivider-root': {
+                    borderColor: '#444',
+                },
+                '& .MuiTypography-root': {
+                    color: '#b0b0b0',
+                },
+            }}
+        >
+            <Typography variant="h6" sx={{ fontWeight: 'medium', mb: 2, color: '#888' }}>
+                {t('collaborationDiagram.title')}
+            </Typography>
+            <Divider sx={{ my: 1 }} />
+            <Typography variant="subtitle2" fontWeight="bold" sx={{ mb: 1, color: '#888' }}>
+                {t('collaborationDiagram.objects')}
+            </Typography>
+            <List dense disablePadding>
+                <ListItem disablePadding>
+                    <ListItemButton onClick={onAddObject}>
+                        <Typography>{t('collaborationDiagram.object')}</Typography>
+                    </ListItemButton>
+                </ListItem>
+                <ListItem disablePadding>
+                    <ListItemButton onClick={onAddMultipleObjects}>
+                        <Typography>{t('collaborationDiagram.multipleObjects')}</Typography>
+                    </ListItemButton>
+                </ListItem>
+                <ListItem disablePadding>
+                    <ListItemButton onClick={onAddActor}>
+                        <Typography>{t('collaborationDiagram.actor')}</Typography>
+                    </ListItemButton>
+                </ListItem>
+            </List>
+            <Divider sx={{ my: 1 }} />
+            <Typography variant="subtitle2" fontWeight="bold" sx={{ mb: 1, color: '#888' }}>
+                {t('collaborationDiagram.messages')}
+            </Typography>
+            <Box sx={{ mb: 1 }}>
+                <Button variant="contained" color="primary" size="small" fullWidth onClick={onAddMessage}>
+                    {t('collaborationDiagram.addMessage')}
+                </Button>
+            </Box>
+            <Box sx={{
+                flexGrow: 1,
+                minHeight: 0,
+                overflowY: 'auto',
+                // Custom scrollbar styling
+                '&::-webkit-scrollbar': {
+                    width: '6px',
+                },
+                '&::-webkit-scrollbar-track': {
+                    background: 'transparent',
+                },
+                '&::-webkit-scrollbar-thumb': {
+                    background: '#444',
+                    borderRadius: '3px',
+                    '&:hover': {
+                        background: '#666',
+                    },
+                },
+            }}>
+                <ControlEdgeList
+                    edges={edges}
+                    nodes={nodes}
+                    type="collaboration"
+                    onEditEdge={handleEditMessage}
+                    t={t}
+                    nodeTypes={nodeTypes}
+                />
+            </Box>
+        </Paper>
+    );
+};
+
+export default React.memo(CollaborationControls); 

package/packages/diagrams/src/lib/templates/collaborationDiagram/nodes/CollabEdge.tsx

@@ -0,0 +1,171 @@
+import React, { useCallback, useMemo } from 'react';
+import { EdgeProps, useReactFlow } from '@xyflow/react';
+import { getEdgeParams } from '../../../utils/nodeutils';
+import DraggableEdgeLabel from '../components/DraggableEdgeLabel';
+import { useDiagramType, useDiagramNodes } from '../../../contexts/DiagramProvider';
+import { CollabEdgeVariant, CollabEdgeData } from '../../../types/collaboration-types';
+
+
+const CollabEdge: React.FC<EdgeProps> = ({
+    id, source, target, data, style,
+}) => {
+    const { getNodes, setEdges } = useReactFlow();
+    const nodes = getNodes();
+    const diagramType = useDiagramType();
+    const allNodes = useDiagramNodes();
+    // Memoize normalized source and target nodes
+    const [normSourceNode, normTargetNode] = useMemo(() => {
+        const sourceNode = nodes.find(n => n.id === source);
+        const targetNode = nodes.find(n => n.id === target);
+        return [
+            sourceNode ? { ...sourceNode, width: sourceNode.width ?? undefined, height: sourceNode.height ?? undefined } : undefined,
+            targetNode ? { ...targetNode, width: targetNode.width ?? undefined, height: targetNode.height ?? undefined } : undefined,
+        ];
+    }, [nodes, source, target]);
+    const edgeData = data as CollabEdgeData;
+    const parallelIndex = edgeData?.parallelIndex ?? 0;
+    const parallelCount = edgeData?.parallelCount ?? 1;
+
+    // Fallback: if nodes are not found, don't render the edge
+    if (!normSourceNode || !normTargetNode) return null;
+
+    // Memoize edge path and label position calculations
+    const { edgePath, labelPos } = useMemo(() => {
+        const variant = edgeData?.variant || 'message';
+        let edgePath = '';
+        let labelPos = { x: 0, y: 0 };
+        if (variant === 'message' || variant === 'return-message') {
+            const { sourceX, sourceY, targetX, targetY } = getEdgeParams(
+                normSourceNode,
+                normTargetNode,
+                undefined,
+                2,
+                diagramType,
+                allNodes
+            );
+            const dx = targetX - sourceX;
+            const dy = targetY - sourceY;
+            const len = Math.sqrt(dx * dx + dy * dy) || 1;
+            const PARALLEL_OFFSET = 40; // px
+            let offset = 0;
+            let isStraight = false;
+            if (parallelCount > 1) {
+                const middle = Math.floor(parallelCount / 2);
+                if (parallelIndex === middle) {
+                    isStraight = true;
+                } else {
+                    const distance = parallelIndex - middle;
+                    offset = (distance % 2 === 0 ? 3 : -3) * Math.ceil(Math.abs(distance) / 2) * PARALLEL_OFFSET;
+                }
+            } else {
+                isStraight = true;
+            }
+            if (isStraight) {
+                edgePath = `M ${sourceX} ${sourceY} L ${targetX} ${targetY}`;
+                labelPos = { x: (sourceX + targetX) / 2, y: (sourceY + targetY) / 2 };
+            } else {
+                const perpX = -dy / len;
+                const perpY = dx / len;
+                const ctrlX = (sourceX + targetX) / 2 + perpX * offset;
+                const ctrlY = (sourceY + targetY) / 2 + perpY * offset;
+                edgePath = `M ${sourceX} ${sourceY} Q ${ctrlX} ${ctrlY} ${targetX} ${targetY}`;
+                labelPos = { x: ctrlX, y: ctrlY };
+            }
+            let labelYOffset = 0;
+            if (parallelCount > 1) {
+                labelYOffset = ((parallelIndex || 0) - ((parallelCount || 1) - 1) / 2) * 25;
+            }
+            labelPos.y = (labelPos.y || 0) + labelYOffset;
+        } else if (variant === 'self-message') {
+            const r = 40;
+            const DEFAULT_WIDTH = 112;
+            const nodeX = normSourceNode?.position?.x ?? 0;
+            const nodeY = normSourceNode?.position?.y ?? 0;
+            const nodeWidth = normSourceNode?.width ?? normSourceNode?.data?.width ?? DEFAULT_WIDTH;
+            const centerX = nodeX + (nodeWidth as number) / 2;
+            const topY = nodeY + 20;
+            edgePath = `M ${centerX - r} ${topY - 18} a ${r} ${r} 0 1 1 ${2 * r} 0`;
+            labelPos = { x: centerX, y: topY - r - 20 };
+        }
+        return { edgePath, labelPos };
+    }, [edgeData, normSourceNode, normTargetNode, parallelCount, parallelIndex, diagramType, allNodes]);
+
+    // Edge style
+    const edgeStyle = React.useMemo(() => {
+        let styleObj = { stroke: '#61dafb', strokeWidth: 2, fill: 'none', ...style };
+        if (edgeData?.variant === 'return-message') {
+            styleObj = { ...styleObj, strokeDasharray: '6,4' };
+        }
+        return styleObj;
+    }, [edgeData?.variant, style]);
+
+    // SVG marker logic for 'v' arrowhead
+    let markerEnd = undefined;
+    let markerStart = undefined;
+    if (edgeData?.arrowHeadTarget === 'v') {
+        markerEnd = `url(#v-arrowhead-${id})`;
+    }
+    if (edgeData?.arrowHeadSource === 'v') {
+        markerStart = `url(#v-arrowhead-start-${id})`;
+    }
+
+    // --- Draggable label logic ---
+    // Default to 0.5 (midpoint) if not set
+    const labelPosition = edgeData?.labelPosition ?? 0.5;
+    // Memoize the onPositionChange callback
+    const onPositionChange = useCallback((percent: number) => {
+        setEdges(eds => eds.map(e => e.id === id ? { ...e, data: { ...e.data, labelPosition: percent } } : e));
+    }, [setEdges, id]);
+    // Only render label if present
+    return (
+        <>
+            <svg style={{ height: 0 }}>
+                <defs>
+                    {/* V marker (end) */}
+                    <marker
+                        id={`v-arrowhead-${id}`}
+                        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="#61dafb" strokeWidth="1.5" />
+                    </marker>
+                    {/* V marker (start) */}
+                    <marker
+                        id={`v-arrowhead-start-${id}`}
+                        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="#61dafb" strokeWidth="1.5" />
+                    </marker>
+                </defs>
+            </svg>
+            <path
+                id={id}
+                d={edgePath}
+                style={edgeStyle}
+                className="react-flow__edge-path"
+                markerEnd={markerEnd}
+                markerStart={markerStart}
+            />
+            {edgeData?.label && (
+                <DraggableEdgeLabel
+                    pathId={id}
+                    label={edgeData.label}
+                    labelPosition={labelPosition}
+                    onPositionChange={onPositionChange}
+                    pathVersion={edgePath}
+                />
+            )}
+        </>
+    );
+};
+
+export default React.memo(CollabEdge); 

package/packages/diagrams/src/lib/templates/collaborationDiagram/nodes/CollabObjectNode.tsx

@@ -0,0 +1,179 @@
+import React, { memo, useMemo } from 'react';
+import { Handle, NodeProps, Position, NodeResizeControl } from '@xyflow/react';
+import { Box, Typography } from '@mui/material';
+import ResizeIcon from '../../../components/ResizeIcon';
+import { CollabObjectNodeData } from '../../../types/collaboration-types';
+
+const controlStyle = {
+    background: 'transparent',
+    border: 'none',
+    cursor: 'nw-resize',
+    width: '32px',
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+
+const CollabObjectNode: React.FC<NodeProps> = (props) => {
+    const { data } = props as NodeProps & { data: CollabObjectNodeData };
+
+    // Flexible dimensions calculation
+    const getFlexibleDimensions = () => {
+        const labelLength = data.label.length;
+
+        // 1. INFINITE RESIZE: Truly infinite limits
+        if (data.infiniteResize === true) {
+            return {
+                minWidth: 30,
+                minHeight: 20,
+                maxWidth: 50000, // Effectively infinite
+                maxHeight: 50000 // Effectively infinite
+            };
+        }
+
+        // 2. CUSTOM RESTRICTIONS: User-defined limits
+        if (data.customRestrictions) {
+            const baseMinWidth = Math.max(labelLength * 10 + 32, data.customRestrictions.minWidth || 60);
+            return {
+                minWidth: baseMinWidth,
+                minHeight: data.customRestrictions.minHeight || 38,
+                maxWidth: data.customRestrictions.maxWidth || 50000, // Default to infinite if not specified
+                maxHeight: data.customRestrictions.maxHeight || 50000, // Default to infinite if not specified
+            };
+        }
+
+        // 3. DEFAULT RESTRICTIONS: Much more generous standard sizing
+        const baseMinWidth = Math.max(labelLength * 10 + 32, 60);
+        return {
+            minWidth: baseMinWidth,
+            minHeight: 38,
+            maxWidth: 25000, // Much larger default limits
+            maxHeight: 25000, // Much larger default limits
+        };
+    };
+
+    // Memoize width/height calculations
+    const { calculatedWidth, calculatedHeight, minWidth, minHeight, maxWidth, maxHeight } = useMemo(() => {
+        const dimensions = getFlexibleDimensions();
+        return {
+            calculatedWidth: Math.max(data.width || dimensions.minWidth, dimensions.minWidth),
+            calculatedHeight: Math.max(data.height || dimensions.minHeight, dimensions.minHeight),
+            ...dimensions,
+        };
+    }, [data.label, data.width, data.height, data.infiniteResize, data.customRestrictions]);
+
+    const { label, variant = 'normal' } = data;
+
+    return (
+        <>
+            {/* Conditional NodeResizeControl */}
+            {data.resizable !== false && (
+                <NodeResizeControl
+                    style={controlStyle}
+                    minWidth={minWidth}
+                    minHeight={minHeight}
+                    maxWidth={maxWidth}
+                    maxHeight={maxHeight}
+                >
+                    <ResizeIcon
+                        size={20}
+                        color="#61dafb"
+                        hoverColor="#4fc3f7"
+                    />
+                </NodeResizeControl>
+            )}
+
+            <Box
+                sx={{
+                    position: 'relative',
+                    display: 'inline-block',
+                    width: calculatedWidth,
+                    height: calculatedHeight,
+                }}
+            >
+                {/* Stacked rectangles for 'multiple' variant */}
+                {variant === 'multiple' && (
+                    <>
+                        <Box
+                            sx={{
+                                position: 'absolute',
+                                left: 12,
+                                top: 12,
+                                width: '100%',
+                                height: '100%',
+                                border: '2px solid',
+                                borderColor: '#61dafb',
+                                borderRadius: 1,
+                                bgcolor: '#2d2d2d',
+                                zIndex: 0,
+                                opacity: 0.7,
+                                pointerEvents: 'none',
+                            }}
+                        />
+                        <Box
+                            sx={{
+                                position: 'absolute',
+                                left: 6,
+                                top: 6,
+                                width: '100%',
+                                height: '100%',
+                                border: '2px solid',
+                                borderColor: '#61dafb',
+                                borderRadius: 1,
+                                bgcolor: '#3d3d3d',
+                                zIndex: 1,
+                                opacity: 0.85,
+                                pointerEvents: 'none',
+                            }}
+                        />
+                    </>
+                )}
+                {/* Main node content */}
+                <Box
+                    sx={{
+                        position: 'relative',
+                        border: '2px solid',
+                        borderColor: '#61dafb',
+                        borderRadius: 1,
+                        bgcolor: '#4d4d4d',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        boxShadow: '0 4px 8px rgba(97, 218, 251, 0.3)',
+                        padding: '0 12px',
+                        textAlign: 'center',
+                        wordBreak: 'break-word',
+                        whiteSpace: 'nowrap',
+                        overflowWrap: 'break-word',
+                        width: '100%',
+                        height: '100%',
+                        zIndex: 2,
+                    }}
+                >
+                    <Typography
+                        fontWeight="bold"
+                        fontSize={15}
+                        color="#ffffff"
+                        sx={{
+                            width: '100%',
+                            zIndex: 2,
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                        }}
+                    >
+                        {label}
+                    </Typography>
+                    <Handle type="target" position={Position.Left} />
+                    <Handle type="source" position={Position.Right} />
+                </Box>
+            </Box>
+        </>
+    );
+};
+
+export default memo(CollabObjectNode);
+
+export const MIN_WIDTH = 112;
+export const MIN_HEIGHT = 38; 

package/packages/diagrams/src/lib/templates/home.style.css

@@ -0,0 +1,16 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  gap: 8px;
+}
+.container a {
+  display: block;
+  border: 1px solid;
+  border-radius: 4px;
+  text-decoration: none;
+  padding: 8px;
+  font-size: 20px;
+}