@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/templates/cloud-arch/components/nodes/SubnetNode.tsx

@@ -0,0 +1,475 @@
+import React, { memo } from 'react';
+import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow';
+import { Box, Typography } from '@mui/material';
+import ResizeIcon from '../../../../components/ResizeIcon';
+import { getServiceIcon } from '../../utils/serviceIcons';
+
+interface SubnetNodeData {
+  label: string;
+  color?: string;
+  borderColor?: string;
+  width?: number;
+  height?: number;
+  draggable?: boolean;
+  textAlign?: 'left' | 'center' | 'right';
+  service?: string;
+  cloudProvider?: 'aws' | 'azure' | 'gcp';
+  minWidth?: number;
+  minHeight?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  resizable?: boolean; // Allow disabling resize
+  enforceRestrictions?: boolean; // Allow bypassing restrictions
+  infiniteResize?: boolean; // Allow infinite resizing without any restrictions
+  customRestrictions?: {
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+  };
+  isSelected?: boolean; // For container selection (different from ReactFlow selection)
+}
+
+const controlStyle = {
+  background: 'transparent',
+  border: 'none',
+  cursor: 'nw-resize',
+  width: '32px',
+  height: '32px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+const SubnetNode: React.FC<NodeProps<SubnetNodeData>> = ({ data, selected }) => {
+  // Flexible dimensions calculation - use user preferences or defaults
+  const getFlexibleDimensions = () => {
+    // 1. INFINITE RESIZE: Truly infinite limits
+    if (data.infiniteResize === true) {
+      return { 
+        minWidth: 50, 
+        minHeight: 30, 
+        maxWidth: 50000, // Effectively infinite
+        maxHeight: 50000 // Effectively infinite
+      };
+    }
+
+    // 2. CUSTOM RESTRICTIONS: User-defined limits
+    if (data.customRestrictions) {
+      return {
+        minWidth: data.customRestrictions.minWidth || 100,
+        minHeight: data.customRestrictions.minHeight || 60,
+        maxWidth: data.customRestrictions.maxWidth || 50000,
+        maxHeight: data.customRestrictions.maxHeight || 50000,
+      };
+    }
+
+    // 3. BYPASS DEFAULT RESTRICTIONS: Very generous limits
+    if (data.enforceRestrictions === false) {
+      return { 
+        minWidth: 50, 
+        minHeight: 30, 
+        maxWidth: 25000, // Very large but not infinite
+        maxHeight: 25000 // Very large but not infinite
+      };
+    }
+
+    // 4. DEFAULT SERVICE-BASED RESTRICTIONS: Now with infinite resize enabled by default for containers
+    switch (data.service) {
+      case 'account':
+        return { 
+          minWidth: data.minWidth || 600, 
+          minHeight: data.minHeight || 400, 
+          maxWidth: data.maxWidth || 50000, // Infinite by default for containers
+          maxHeight: data.maxHeight || 50000 // Infinite by default for containers
+        };
+      case 'project':
+        return { 
+          minWidth: data.minWidth || 600, 
+          minHeight: data.minHeight || 400, 
+          maxWidth: data.maxWidth || 50000, // Infinite by default for containers
+          maxHeight: data.maxHeight || 50000 // Infinite by default for containers
+        };
+      case 'vpc':
+      case 'virtual-network':
+        return { 
+          minWidth: data.minWidth || 400, 
+          minHeight: data.minHeight || 300, 
+          maxWidth: data.maxWidth || 50000, // Infinite by default for containers
+          maxHeight: data.maxHeight || 50000 // Infinite by default for containers
+        };
+      case 'subnet':
+        return { 
+          minWidth: data.minWidth || 200, 
+          minHeight: data.minHeight || 150, 
+          maxWidth: data.maxWidth || 25000, // Large but reasonable for subnets
+          maxHeight: data.maxHeight || 25000 // Large but reasonable for subnets
+        };
+      case 'availability-zone':
+      case 'local-zone':
+        return { 
+          minWidth: data.minWidth || 300, 
+          minHeight: data.minHeight || 200, 
+          maxWidth: data.maxWidth || 50000, // Infinite by default for containers
+          maxHeight: data.maxHeight || 50000 // Infinite by default for containers
+        };
+      case 'security-group':
+        return { 
+          minWidth: data.minWidth || 150, 
+          minHeight: data.minHeight || 100, 
+          maxWidth: data.maxWidth || 10000, // Reasonable limit for security groups
+          maxHeight: data.maxHeight || 10000 // Reasonable limit for security groups
+        };
+      default:
+        return { 
+          minWidth: data.minWidth || 100, 
+          minHeight: data.minHeight || 60, 
+          maxWidth: data.maxWidth || 25000, // Very generous default
+          maxHeight: data.maxHeight || 25000 // Very generous default
+        };
+    }
+  };
+
+  const { minWidth, minHeight, maxWidth, maxHeight } = getFlexibleDimensions();
+
+  // Get container styling based on service type - responsive design
+  const getContainerStyle = () => {
+    const baseStyle = {
+      position: 'relative',
+      border: data.isSelected 
+        ? `3px solid #4CAF50` // Green border for selected containers
+        : `2px solid ${data.borderColor || '#61dafb'}`,
+      borderRadius: '8px',
+      padding: '20px',
+      width: '100%',
+      height: '100%',
+      cursor: data.draggable ? 'grab' : 'pointer', // Change cursor to pointer for clickable containers
+      transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+      boxShadow: data.isSelected 
+        ? `0 0 20px #4CAF5060, 0 0 40px #4CAF5030` // Green glow for selected containers
+        : 'none',
+      '&:active': {
+        cursor: data.draggable ? 'grabbing' : 'default',
+      },
+      '&:hover': {
+        borderColor: data.isSelected 
+          ? '#4CAF50' 
+          : data.borderColor || '#61dafb',
+        boxShadow: data.isSelected 
+          ? `0 0 25px #4CAF5080, 0 0 50px #4CAF5040` // Enhanced glow on hover when selected
+          : selected 
+            ? `0 0 20px ${data.borderColor || '#61dafb'}60`
+            : `0 8px 16px rgba(0,0,0,0.3)`,
+      }
+    };
+
+    // Container-specific backgrounds with flexible styling
+    switch (data.service) {
+      case 'account':
+        return {
+          ...baseStyle,
+          background: data.color || 'linear-gradient(135deg, rgba(255, 153, 0, 0.1) 0%, rgba(255, 153, 0, 0.05) 100%)',
+          borderColor: data.borderColor || '#FF9900',
+          borderWidth: '3px',
+          borderStyle: 'solid',
+          boxShadow: selected 
+            ? `0 0 30px ${data.borderColor || '#FF9900'}40, inset 0 0 20px rgba(255, 153, 0, 0.1)`
+            : `0 4px 20px rgba(255, 153, 0, 0.2)`,
+        };
+      case 'project':
+        return {
+          ...baseStyle,
+          background: data.color || 'linear-gradient(135deg, rgba(66, 133, 244, 0.1) 0%, rgba(66, 133, 244, 0.05) 100%)',
+          borderColor: data.borderColor || '#4285F4',
+          borderWidth: '3px',
+          borderStyle: 'solid',
+          boxShadow: selected 
+            ? `0 0 30px ${data.borderColor || '#4285F4'}40, inset 0 0 20px rgba(66, 133, 244, 0.1)`
+            : `0 4px 20px rgba(66, 133, 244, 0.2)`,
+        };
+      case 'vpc':
+      case 'virtual-network':
+        return {
+          ...baseStyle,
+          background: data.color || 'linear-gradient(135deg, rgba(97, 218, 251, 0.1) 0%, rgba(97, 218, 251, 0.05) 100%)',
+          borderColor: data.borderColor || '#61dafb',
+          borderWidth: '2px',
+          borderStyle: 'solid',
+          boxShadow: selected 
+            ? `0 0 25px ${data.borderColor || '#61dafb'}40`
+            : `0 4px 15px rgba(97, 218, 251, 0.2)`,
+        };
+      case 'subnet':
+        return {
+          ...baseStyle,
+          background: data.color || 'linear-gradient(135deg, rgba(97, 218, 251, 0.05) 0%, rgba(97, 218, 251, 0.02) 100%)',
+          borderColor: data.borderColor || '#61dafb',
+          borderWidth: '2px',
+          borderStyle: 'dashed',
+          boxShadow: selected 
+            ? `0 0 20px ${data.borderColor || '#61dafb'}30`
+            : `0 2px 10px rgba(97, 218, 251, 0.1)`,
+        };
+      case 'security-group':
+        return {
+          ...baseStyle,
+          background: data.color || 'linear-gradient(135deg, rgba(244, 67, 54, 0.05) 0%, rgba(244, 67, 54, 0.02) 100%)',
+          borderColor: data.borderColor || '#f44336',
+          borderWidth: '2px',
+          borderStyle: 'dotted',
+        };
+      case 'availability-zone':
+      case 'local-zone':
+        return {
+          ...baseStyle,
+          background: data.color || 'linear-gradient(135deg, rgba(156, 39, 176, 0.05) 0%, rgba(156, 39, 176, 0.02) 100%)',
+          borderColor: data.borderColor || '#9c27b0',
+          borderWidth: '2px',
+          borderStyle: 'solid',
+        };
+      default:
+        return {
+          ...baseStyle,
+          background: data.color || 'linear-gradient(135deg, rgba(97, 218, 251, 0.05) 0%, rgba(97, 218, 251, 0.02) 100%)',
+        };
+    }
+  };
+
+  // Dynamic text styling - fully responsive
+  const getTextStyle = () => {
+    const baseStyle = {
+      color: '#fff',
+      position: 'absolute',
+      top: '15px',
+      fontWeight: 'bold',
+      fontSize: 'clamp(12px, 2.5vw, 24px)', // Responsive font size
+      zIndex: 10,
+      textShadow: '0 1px 3px rgba(0,0,0,0.7)',
+      maxWidth: 'calc(100% - 40px)', // Responsive width
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    };
+
+    return {
+      ...baseStyle,
+      left: data.textAlign === 'center' ? '50%' : '20px',
+      transform: data.textAlign === 'center' ? 'translateX(-50%)' : 'none',
+      right: data.textAlign === 'right' ? '20px' : 'auto',
+    };
+  };
+
+  // Handle color based on container theme
+  const getHandleColor = () => {
+    switch (data.service) {
+      case 'account':
+        return data.borderColor || '#FF9900';
+      case 'project':
+        return data.borderColor || '#4285F4';
+      case 'security-group':
+        return data.borderColor || '#f44336';
+      case 'availability-zone':
+      case 'local-zone':
+        return data.borderColor || '#9c27b0';
+      default:
+        return data.borderColor || '#61dafb';
+    }
+  };
+
+  const handleColor = getHandleColor();
+
+  return (
+    <>
+      {/* Conditional NodeResizeControl - can be disabled */}
+      {data.resizable !== false && (
+        <NodeResizeControl 
+          style={controlStyle} 
+          minWidth={minWidth} 
+          minHeight={minHeight}
+          maxWidth={maxWidth}
+          maxHeight={maxHeight}
+        >
+          <ResizeIcon 
+            size={22}
+            color={handleColor}
+            hoverColor={handleColor === '#61dafb' ? '#4fc3f7' : `${handleColor}cc`}
+          />
+        </NodeResizeControl>
+      )}
+
+      <Box
+        sx={getContainerStyle()}
+        draggable={data.draggable}
+      >
+        {/* Container with Icon and Label */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            position: 'absolute',
+            top: '15px',
+            left: data.textAlign === 'center' ? '50%' : '20px',
+            transform: data.textAlign === 'center' ? 'translateX(-50%)' : 'none',
+            right: data.textAlign === 'right' ? '20px' : 'auto',
+            zIndex: 20,
+            maxWidth: 'calc(100% - 40px)',
+          }}
+        >
+          {/* Service Icon */}
+          {data.service && (
+            <Box
+              sx={{
+                width: '24px',
+                height: '24px',
+                minWidth: '24px',
+                minHeight: '24px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: 'rgba(255, 255, 255, 0.15)',
+                borderRadius: '6px',
+                backdropFilter: 'blur(10px)',
+                border: `1px solid ${handleColor}50`,
+                boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+                '& img': {
+                  width: '18px',
+                  height: '18px',
+                  objectFit: 'contain',
+                  filter: 'brightness(1.1)',
+                },
+                '& svg': {
+                  width: '18px !important',
+                  height: '18px !important',
+                  fontSize: '18px !important',
+                },
+              }}
+            >
+              {getServiceIcon(data.service, data.cloudProvider || 'aws')}
+            </Box>
+          )}
+
+          {/* Dynamic label with responsive sizing */}
+          <Typography
+            variant="subtitle1"
+            sx={{
+              color: '#fff',
+              fontWeight: 'bold',
+              fontSize: '16px', // Fixed size for better readability
+              textShadow: '0 2px 4px rgba(0,0,0,0.8)',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              flex: 1,
+              userSelect: 'none',
+              letterSpacing: '0.5px',
+            }}
+            title={data.label} // Tooltip for full text if truncated
+          >
+            {data.label || 'Container'}
+          </Typography>
+        </Box>
+
+        {/* Flexible Connection Handles */}
+        <Handle 
+          type="source" 
+          position={Position.Left}
+          style={{ 
+            background: handleColor,
+            width: '14px',
+            height: '14px',
+            left: '-7px',
+            border: '2px solid #fff',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+          }}
+        />
+        <Handle 
+          type="source" 
+          position={Position.Right}
+          style={{ 
+            background: handleColor,
+            width: '14px',
+            height: '14px',
+            right: '-7px',
+            border: '2px solid #fff',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+          }}
+        />
+        <Handle 
+          type="source" 
+          position={Position.Top}
+          style={{ 
+            background: handleColor,
+            width: '14px',
+            height: '14px',
+            top: '-7px',
+            border: '2px solid #fff',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+          }}
+        />
+        <Handle 
+          type="source" 
+          position={Position.Bottom}
+          style={{ 
+            background: handleColor,
+            width: '14px',
+            height: '14px',
+            bottom: '-7px',
+            border: '2px solid #fff',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+          }}
+        />
+        <Handle 
+          type="target" 
+          position={Position.Left}
+          style={{ 
+            background: handleColor,
+            width: '14px',
+            height: '14px',
+            left: '-7px',
+            border: '2px solid #fff',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+          }}
+        />
+        <Handle 
+          type="target" 
+          position={Position.Right}
+          style={{ 
+            background: handleColor,
+            width: '14px',
+            height: '14px',
+            right: '-7px',
+            border: '2px solid #fff',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+          }}
+        />
+        <Handle 
+          type="target" 
+          position={Position.Top}
+          style={{ 
+            background: handleColor,
+            width: '14px',
+            height: '14px',
+            top: '-7px',
+            border: '2px solid #fff',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+          }}
+        />
+        <Handle 
+          type="target" 
+          position={Position.Bottom}
+          style={{ 
+            background: handleColor,
+            width: '14px',
+            height: '14px',
+            bottom: '-7px',
+            border: '2px solid #fff',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+          }}
+        />
+      </Box>
+    </>
+  );
+};
+
+export default memo(SubnetNode);