@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/sequence/components/SequenceEntityNode.tsx

@@ -1,394 +1,394 @@
-import React, { useState } from 'react';
-import { Box } from '@mui/material';
-import { Handle, Position, NodeProps } from '@xyflow/react';
-import { SequenceEntityData, ActivationSection } from '../../../types/sequence-types';
-
-export const SequenceEntityNode: React.FC<NodeProps> = (props) => {
-  const { data, selected } = props as NodeProps & { data: SequenceEntityData };
-  const {
-    label,
-    color,
-    backgroundColor,
-    lifelineLength,
-    shape = 'rectangle',
-    collapsed = false,
-    description = '',
-    borderWidth = 2,
-    fontSize = 12,
-    activationSections = [], // Default empty array
-  } = data || {};
-
-  const [isCollapsed, setIsCollapsed] = useState(collapsed);
-
-  // Calculate center points for different shapes
-  const getCenterX = () => {
-    switch (shape) {
-      case 'circle':
-        return 40; // Half of circle width (80px)
-      case 'database':
-        return 50; // Half of database width (100px)
-      case 'actor':
-        return 60; // Center of actor figure
-      case 'roundedBox':
-      case 'rectangle':
-      default:
-        return 60; // Half of box width (120px)
-    }
-  };
-
-  // Get text color based on background brightness
-  const getTextColor = () => {
-    // Use white text for better contrast in dark theme
-    return 'black';
-  };
-
-  // Get dark theme border color
-  const getBorderColor = () => {
-    return color || '#61dafb';
-  };
-
-  // Get dark theme background color
-  const getBackgroundColor = () => {
-    return backgroundColor || '#2a2a2a';
-  };
-
-  // Shape-specific rendering functions
-  const renderEntityShape = () => {
-    const textColor = getTextColor();
-    const borderColor = getBorderColor();
-    const bgColor = getBackgroundColor();
-
-    const commonStyles = {
-      border: `${borderWidth}px solid ${borderColor}`,
-      backgroundColor: bgColor,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      fontWeight: 'bold',
-      fontSize: `${fontSize}px`,
-      color: textColor,
-      position: 'relative' as const,
-      overflow: 'hidden' as const,
-      boxShadow: selected ? `0 0 0 2px #61dafb` : 'none',
-    };
-
-    switch (shape) {
-      case 'roundedBox':
-        return (
-          <Box
-            className="entity-box rounded"
-            sx={{
-              ...commonStyles,
-              width: '120px',
-              height: '40px',
-              borderRadius: '8px',
-            }}
-          >
-            {label}
-          </Box>
-        );
-
-      case 'circle':
-        return (
-          <Box
-            className="entity-box circle"
-            sx={{
-              ...commonStyles,
-              width: '80px',
-              height: '80px',
-              borderRadius: '50%',
-              textAlign: 'center' as const,
-            }}
-          >
-            {label}
-          </Box>
-        );
-
-      case 'database':
-        return (
-          <Box className="entity-database" sx={{ position: 'relative' }}>
-            <Box
-              sx={{
-                ...commonStyles,
-                width: '100px',
-                height: '20px',
-                borderTopLeftRadius: '50px',
-                borderTopRightRadius: '50px',
-                borderBottom: 'none',
-              }}
-            ></Box>
-            <Box
-              sx={{
-                ...commonStyles,
-                width: '100px',
-                height: '50px',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                borderTop: 'none',
-              }}
-            >
-              {label}
-            </Box>
-            <Box
-              sx={{
-                ...commonStyles,
-                width: '100px',
-                height: '10px',
-                borderBottomLeftRadius: '50px',
-                borderBottomRightRadius: '50px',
-                borderTop: 'none',
-              }}
-            ></Box>
-          </Box>
-        );
-
-      case 'actor':
-        return (
-          <Box className="entity-actor" sx={{ textAlign: 'center', width: '120px' }}>
-            {/* Head */}
-            <Box
-              sx={{
-                width: '25px',
-                height: '25px',
-                borderRadius: '50%',
-                border: `${borderWidth}px solid ${borderColor}`,
-                backgroundColor: bgColor,
-                margin: '0 auto',
-              }}
-            ></Box>
-            {/* Body */}
-            <Box
-              sx={{
-                width: '2px',
-                height: '30px',
-                backgroundColor: borderColor,
-                margin: '0 auto',
-              }}
-            ></Box>
-            {/* Arms */}
-            <Box
-              sx={{
-                width: '30px',
-                height: '2px',
-                backgroundColor: borderColor,
-                margin: '-15px auto 0 auto',
-              }}
-            ></Box>
-            {/* Legs */}
-            <Box sx={{ position: 'relative', height: '20px', width: '120px' }}>
-              <Box
-                sx={{
-                  width: '2px',
-                  height: '20px',
-                  backgroundColor: borderColor,
-                  transform: 'rotate(30deg)',
-                  position: 'absolute',
-                  left: 'calc(50% - 15px)',
-                  top: '0',
-                }}
-              ></Box>
-              <Box
-                sx={{
-                  width: '2px',
-                  height: '20px',
-                  backgroundColor: borderColor,
-                  transform: 'rotate(-30deg)',
-                  position: 'absolute',
-                  left: 'calc(50% + 15px)',
-                  top: '0',
-                }}
-              ></Box>
-            </Box>
-            {/* Label */}
-            <Box
-              sx={{
-                marginTop: '5px',
-                fontWeight: 'bold',
-                fontSize: `${fontSize}px`,
-                color: textColor,
-              }}
-            >
-              {label}
-            </Box>
-          </Box>
-        );
-
-      case 'rectangle':
-      default:
-        return (
-          <Box
-            className="entity-box"
-            sx={{
-              ...commonStyles,
-              width: '120px',
-              height: '40px',
-              borderRadius: '4px',
-            }}
-          >
-            {label}
-          </Box>
-        );
-    }
-  };
-
-  // Toggle lifeline collapse
-  const toggleCollapse = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsCollapsed(!isCollapsed);
-  };
-
-
-  const getLifelineTop = () => {
-    switch (shape) {
-      case 'circle':
-        return 80;
-      case 'database':
-        return 80;
-      case 'actor':
-        return 90;
-      case 'roundedBox':
-      case 'rectangle':
-      default:
-        return 40;
-    }
-  };
-
-  const centerX = getCenterX();
-  const lifelineTop = getLifelineTop();
-
-  // Render activation areas
-  const renderActivationAreas = () => {
-    if (isCollapsed) return null;
-
-    const borderColor = getBorderColor();
-
-    return activationSections.map((section: ActivationSection, index: number) => {
-      // Ensure sections don't extend beyond the lifeline
-      const start = Math.max(0, section.start);
-      const end = Math.min(lifelineLength, section.end);
-
-      return (
-        <Box
-          key={`activation-${index}`}
-          className="activation-area"
-          sx={{
-            position: 'absolute',
-            width: '10px',
-            height: `${end - start}px`,
-            backgroundColor: borderColor,
-            opacity: 0.6,
-            left: centerX - 5, // Center the activation area on the lifeline
-            top: `${lifelineTop + start}px`,
-            border: `1px solid ${borderColor}`,
-            zIndex: 1,
-          }}
-        />
-      );
-    });
-  };
-
-  const borderColor = getBorderColor();
-  const bgColor = getBackgroundColor();
-  const textColor = getTextColor();
-
-  return (
-    <Box className="sequence-entity">
-      {/* Entity shape */}
-      {renderEntityShape()}
-
-      {/* Description tooltip */}
-      {description && (
-        <Box
-          className="entity-description"
-          sx={{
-            position: 'absolute',
-            top: '-30px',
-            left: '0',
-            fontSize: '10px',
-            color: '#999', // Light gray for dark theme
-            width: '120px',
-            textAlign: 'center',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {description}
-        </Box>
-      )}
-
-      {/* Collapse/Expand button */}
-      <Box
-        className="lifeline-toggle"
-        sx={{
-          position: 'absolute',
-          top: lifelineTop,
-          left: centerX - 10,
-          width: '20px',
-          height: '20px',
-          backgroundColor: bgColor,
-          border: `1px solid ${borderColor}`,
-          borderRadius: '50%',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          cursor: 'pointer',
-          fontSize: '14px',
-          color: textColor,
-          zIndex: 2,
-        }}
-        onClick={toggleCollapse}
-      >
-        {isCollapsed ? '+' : '-'}
-      </Box>
-
-      {/* Lifeline */}
-      <Box
-        className="lifeline"
-        sx={{
-          width: '2px',
-          height: isCollapsed ? '20px' : `${lifelineLength}px`,
-          borderLeft: isCollapsed
-            ? `2px solid ${borderColor}`
-            : `2px dashed ${borderColor}`,
-          marginLeft: `${centerX}px`,
-          position: 'absolute',
-          top: `${lifelineTop}px`,
-          transition: 'height 0.3s ease',
-        }}
-      />
-
-      {/* Activation areas - from entity data */}
-      {renderActivationAreas()}
-
-      {/* Handles for connections - positioned at the lifeline center */}
-      <Handle
-        type="source"
-        position={Position.Right}
-        id="right"
-        style={{ left: centerX, opacity: 0 }}
-      />
-      <Handle
-        type="target"
-        position={Position.Right}
-        id="right"
-        style={{ left: centerX, opacity: 0 }}
-      />
-      <Handle
-        type="source"
-        position={Position.Left}
-        id="left"
-        style={{ left: centerX, opacity: 0 }}
-      />
-      <Handle
-        type="target"
-        position={Position.Left}
-        id="left"
-        style={{ left: centerX, opacity: 0 }}
-      />
-    </Box>
-  );
-};
-
-export default SequenceEntityNode;
+import React, { useState } from 'react';
+import { Box } from '@mui/material';
+import { Handle, Position, NodeProps } from '@xyflow/react';
+import { SequenceEntityData, ActivationSection } from '../../../types/sequence-types';
+
+export const SequenceEntityNode: React.FC<NodeProps> = (props) => {
+  const { data, selected } = props as NodeProps & { data: SequenceEntityData };
+  const {
+    label,
+    color,
+    backgroundColor,
+    lifelineLength,
+    shape = 'rectangle',
+    collapsed = false,
+    description = '',
+    borderWidth = 2,
+    fontSize = 12,
+    activationSections = [], // Default empty array
+  } = data || {};
+
+  const [isCollapsed, setIsCollapsed] = useState(collapsed);
+
+  // Calculate center points for different shapes
+  const getCenterX = () => {
+    switch (shape) {
+      case 'circle':
+        return 40; // Half of circle width (80px)
+      case 'database':
+        return 50; // Half of database width (100px)
+      case 'actor':
+        return 60; // Center of actor figure
+      case 'roundedBox':
+      case 'rectangle':
+      default:
+        return 60; // Half of box width (120px)
+    }
+  };
+
+  // Get text color based on background brightness
+  const getTextColor = () => {
+    // Use white text for better contrast in dark theme
+    return 'black';
+  };
+
+  // Get dark theme border color
+  const getBorderColor = () => {
+    return color || '#61dafb';
+  };
+
+  // Get dark theme background color
+  const getBackgroundColor = () => {
+    return backgroundColor || '#2a2a2a';
+  };
+
+  // Shape-specific rendering functions
+  const renderEntityShape = () => {
+    const textColor = getTextColor();
+    const borderColor = getBorderColor();
+    const bgColor = getBackgroundColor();
+
+    const commonStyles = {
+      border: `${borderWidth}px solid ${borderColor}`,
+      backgroundColor: bgColor,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      fontWeight: 'bold',
+      fontSize: `${fontSize}px`,
+      color: textColor,
+      position: 'relative' as const,
+      overflow: 'hidden' as const,
+      boxShadow: selected ? `0 0 0 2px #61dafb` : 'none',
+    };
+
+    switch (shape) {
+      case 'roundedBox':
+        return (
+          <Box
+            className="entity-box rounded"
+            sx={{
+              ...commonStyles,
+              width: '120px',
+              height: '40px',
+              borderRadius: '8px',
+            }}
+          >
+            {label}
+          </Box>
+        );
+
+      case 'circle':
+        return (
+          <Box
+            className="entity-box circle"
+            sx={{
+              ...commonStyles,
+              width: '80px',
+              height: '80px',
+              borderRadius: '50%',
+              textAlign: 'center' as const,
+            }}
+          >
+            {label}
+          </Box>
+        );
+
+      case 'database':
+        return (
+          <Box className="entity-database" sx={{ position: 'relative' }}>
+            <Box
+              sx={{
+                ...commonStyles,
+                width: '100px',
+                height: '20px',
+                borderTopLeftRadius: '50px',
+                borderTopRightRadius: '50px',
+                borderBottom: 'none',
+              }}
+            ></Box>
+            <Box
+              sx={{
+                ...commonStyles,
+                width: '100px',
+                height: '50px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderTop: 'none',
+              }}
+            >
+              {label}
+            </Box>
+            <Box
+              sx={{
+                ...commonStyles,
+                width: '100px',
+                height: '10px',
+                borderBottomLeftRadius: '50px',
+                borderBottomRightRadius: '50px',
+                borderTop: 'none',
+              }}
+            ></Box>
+          </Box>
+        );
+
+      case 'actor':
+        return (
+          <Box className="entity-actor" sx={{ textAlign: 'center', width: '120px' }}>
+            {/* Head */}
+            <Box
+              sx={{
+                width: '25px',
+                height: '25px',
+                borderRadius: '50%',
+                border: `${borderWidth}px solid ${borderColor}`,
+                backgroundColor: bgColor,
+                margin: '0 auto',
+              }}
+            ></Box>
+            {/* Body */}
+            <Box
+              sx={{
+                width: '2px',
+                height: '30px',
+                backgroundColor: borderColor,
+                margin: '0 auto',
+              }}
+            ></Box>
+            {/* Arms */}
+            <Box
+              sx={{
+                width: '30px',
+                height: '2px',
+                backgroundColor: borderColor,
+                margin: '-15px auto 0 auto',
+              }}
+            ></Box>
+            {/* Legs */}
+            <Box sx={{ position: 'relative', height: '20px', width: '120px' }}>
+              <Box
+                sx={{
+                  width: '2px',
+                  height: '20px',
+                  backgroundColor: borderColor,
+                  transform: 'rotate(30deg)',
+                  position: 'absolute',
+                  left: 'calc(50% - 15px)',
+                  top: '0',
+                }}
+              ></Box>
+              <Box
+                sx={{
+                  width: '2px',
+                  height: '20px',
+                  backgroundColor: borderColor,
+                  transform: 'rotate(-30deg)',
+                  position: 'absolute',
+                  left: 'calc(50% + 15px)',
+                  top: '0',
+                }}
+              ></Box>
+            </Box>
+            {/* Label */}
+            <Box
+              sx={{
+                marginTop: '5px',
+                fontWeight: 'bold',
+                fontSize: `${fontSize}px`,
+                color: textColor,
+              }}
+            >
+              {label}
+            </Box>
+          </Box>
+        );
+
+      case 'rectangle':
+      default:
+        return (
+          <Box
+            className="entity-box"
+            sx={{
+              ...commonStyles,
+              width: '120px',
+              height: '40px',
+              borderRadius: '4px',
+            }}
+          >
+            {label}
+          </Box>
+        );
+    }
+  };
+
+  // Toggle lifeline collapse
+  const toggleCollapse = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsCollapsed(!isCollapsed);
+  };
+
+
+  const getLifelineTop = () => {
+    switch (shape) {
+      case 'circle':
+        return 80;
+      case 'database':
+        return 80;
+      case 'actor':
+        return 90;
+      case 'roundedBox':
+      case 'rectangle':
+      default:
+        return 40;
+    }
+  };
+
+  const centerX = getCenterX();
+  const lifelineTop = getLifelineTop();
+
+  // Render activation areas
+  const renderActivationAreas = () => {
+    if (isCollapsed) return null;
+
+    const borderColor = getBorderColor();
+
+    return activationSections.map((section: ActivationSection, index: number) => {
+      // Ensure sections don't extend beyond the lifeline
+      const start = Math.max(0, section.start);
+      const end = Math.min(lifelineLength, section.end);
+
+      return (
+        <Box
+          key={`activation-${index}`}
+          className="activation-area"
+          sx={{
+            position: 'absolute',
+            width: '10px',
+            height: `${end - start}px`,
+            backgroundColor: borderColor,
+            opacity: 0.6,
+            left: centerX - 5, // Center the activation area on the lifeline
+            top: `${lifelineTop + start}px`,
+            border: `1px solid ${borderColor}`,
+            zIndex: 1,
+          }}
+        />
+      );
+    });
+  };
+
+  const borderColor = getBorderColor();
+  const bgColor = getBackgroundColor();
+  const textColor = getTextColor();
+
+  return (
+    <Box className="sequence-entity">
+      {/* Entity shape */}
+      {renderEntityShape()}
+
+      {/* Description tooltip */}
+      {description && (
+        <Box
+          className="entity-description"
+          sx={{
+            position: 'absolute',
+            top: '-30px',
+            left: '0',
+            fontSize: '10px',
+            color: '#999', // Light gray for dark theme
+            width: '120px',
+            textAlign: 'center',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {description}
+        </Box>
+      )}
+
+      {/* Collapse/Expand button */}
+      <Box
+        className="lifeline-toggle"
+        sx={{
+          position: 'absolute',
+          top: lifelineTop,
+          left: centerX - 10,
+          width: '20px',
+          height: '20px',
+          backgroundColor: bgColor,
+          border: `1px solid ${borderColor}`,
+          borderRadius: '50%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          cursor: 'pointer',
+          fontSize: '14px',
+          color: textColor,
+          zIndex: 2,
+        }}
+        onClick={toggleCollapse}
+      >
+        {isCollapsed ? '+' : '-'}
+      </Box>
+
+      {/* Lifeline */}
+      <Box
+        className="lifeline"
+        sx={{
+          width: '2px',
+          height: isCollapsed ? '20px' : `${lifelineLength}px`,
+          borderLeft: isCollapsed
+            ? `2px solid ${borderColor}`
+            : `2px dashed ${borderColor}`,
+          marginLeft: `${centerX}px`,
+          position: 'absolute',
+          top: `${lifelineTop}px`,
+          transition: 'height 0.3s ease',
+        }}
+      />
+
+      {/* Activation areas - from entity data */}
+      {renderActivationAreas()}
+
+      {/* Handles for connections - positioned at the lifeline center */}
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="right"
+        style={{ left: centerX, opacity: 0 }}
+      />
+      <Handle
+        type="target"
+        position={Position.Right}
+        id="right"
+        style={{ left: centerX, opacity: 0 }}
+      />
+      <Handle
+        type="source"
+        position={Position.Left}
+        id="left"
+        style={{ left: centerX, opacity: 0 }}
+      />
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="left"
+        style={{ left: centerX, opacity: 0 }}
+      />
+    </Box>
+  );
+};
+
+export default SequenceEntityNode;