@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

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

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

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

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

@@ -1,16 +0,0 @@
-.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;
-}