@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,124 +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>
-    );
-};
-
+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 +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>
-    );
-};
-
+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);