@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

@@ -1,475 +0,0 @@
-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);