@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,278 @@
+import React, { memo } from 'react';
+import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow';
+import { Box, Typography } from '@mui/material';
+import ResizeIcon from '../../../../components/ResizeIcon';
+
+interface UsersNodeData {
+  label: string;
+  sublabel?: string;
+  handles?: string[];
+  width?: number;
+  height?: number;
+  highlighted?: boolean;
+  resizable?: boolean;
+  infiniteResize?: boolean;
+  customRestrictions?: {
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+  };
+}
+
+const controlStyle = {
+  background: 'transparent',
+  border: 'none',
+  cursor: 'nw-resize',
+  width: '32px',
+  height: '32px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+const UsersNode: React.FC<NodeProps<UsersNodeData>> = ({
+  data,
+  isConnectable,
+  selected,
+}) => {
+  // Flexible dimensions calculation
+  const labelLength = data.label.length;
+  const sublabelLength = data.sublabel ? data.sublabel.length : 0;
+  const maxTextLength = Math.max(labelLength, sublabelLength);
+
+  const getFlexibleDimensions = () => {
+    // 1. INFINITE RESIZE: Truly infinite limits
+    if (data.infiniteResize === true) {
+      return {
+        minWidth: 30,
+        minHeight: 30,
+        maxWidth: 50000, // Effectively infinite
+        maxHeight: 50000 // Effectively infinite
+      };
+    }
+
+    // 2. CUSTOM RESTRICTIONS: User-defined limits
+    if (data.customRestrictions) {
+      const baseMinWidth = Math.max(maxTextLength * 8 + 32, data.customRestrictions.minWidth || 60);
+      return {
+        minWidth: baseMinWidth,
+        minHeight: data.customRestrictions.minHeight || (data.sublabel ? 80 : 70),
+        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 user node sizing
+    const baseMinWidth = Math.max(maxTextLength * 8 + 32, 80);
+    const baseMinHeight = data.sublabel ? 100 : 90;
+
+    return {
+      minWidth: baseMinWidth,
+      minHeight: baseMinHeight,
+      maxWidth: 25000, // Much larger default limits
+      maxHeight: 25000, // Much larger default limits
+    };
+  };
+
+  const { minWidth, minHeight, maxWidth, maxHeight } = getFlexibleDimensions();
+
+  // Use flexible sizing for real-time updates
+  const currentWidth = Math.max(
+    Math.min(data.width || minWidth, maxWidth),
+    minWidth
+  );
+  const currentHeight = Math.max(
+    Math.min(data.height || minHeight, maxHeight),
+    minHeight
+  );
+
+  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={{
+          width: '100%',
+          height: '100%',
+          minWidth,
+          minHeight,
+          bgcolor: '#1e1e1e',
+          borderRadius: 1,
+          border: '1px solid',
+          borderColor: selected ? '#61dafb' : '#333',
+          boxShadow: selected
+            ? '0 8px 16px rgba(97, 218, 251, 0.3)'
+            : '0 4px 12px rgba(0,0,0,0.5)',
+          p: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          transition: 'all 0.2s ease',
+          cursor: 'grab',
+          '&:hover': {
+            boxShadow: '0 8px 16px rgba(0,0,0,0.6)',
+            borderColor: '#61dafb',
+            transform: 'translateY(-2px)',
+          },
+          '&:active': {
+            cursor: 'grabbing',
+          },
+          ...(data.highlighted && {
+            outline: '2px solid #61dafb',
+            boxShadow: '0 0 20px rgba(97, 218, 251, 0.3)',
+          }),
+        }}
+      >
+        {/* Connection Handles */}
+        {data.handles?.includes('top') && (
+          <Handle
+            type="target"
+            position={Position.Top}
+            isConnectable={isConnectable}
+            style={{
+              background: '#61dafb',
+              width: '14px',
+              height: '14px',
+              top: '-7px',
+              border: '2px solid #fff',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+            }}
+          />
+        )}
+
+        {data.handles?.includes('left') && (
+          <Handle
+            type="target"
+            position={Position.Left}
+            isConnectable={isConnectable}
+            style={{
+              background: '#61dafb',
+              width: '14px',
+              height: '14px',
+              left: '-7px',
+              border: '2px solid #fff',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+            }}
+          />
+        )}
+
+        {/* Icon Container */}
+        <Box
+          sx={{
+            height: Math.max(currentHeight * 0.6, 50),
+            mb: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            '& > svg': {
+              width: Math.min(currentWidth * 0.8, 60),
+              height: Math.min(currentHeight * 0.5, 40),
+              fill: '#61dafb',
+            },
+          }}
+        >
+          {/* Users Icon */}
+          <svg viewBox="0 0 24 24">
+            <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+          </svg>
+        </Box>
+
+        {/* Text Container */}
+        <Box
+          sx={{
+            minHeight: Math.max(currentHeight * 0.3, 30),
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            px: 1,
+          }}
+        >
+          <Typography
+            variant="caption"
+            sx={{
+              fontWeight: 500,
+              width: '100%',
+              textAlign: 'center',
+              wordBreak: 'break-word',
+              color: '#fff',
+              fontSize: Math.max(currentWidth / 15, 10),
+              lineHeight: 1.2,
+            }}
+          >
+            {data.label}
+          </Typography>
+          {data.sublabel && (
+            <Typography
+              variant="caption"
+              sx={{
+                color: '#61dafb',
+                width: '100%',
+                textAlign: 'center',
+                wordBreak: 'break-word',
+                mt: 0.5,
+                opacity: 0.8,
+                fontSize: Math.max(currentWidth / 18, 9),
+                lineHeight: 1.2,
+              }}
+            >
+              {data.sublabel}
+            </Typography>
+          )}
+        </Box>
+
+        {/* Connection Handles */}
+        {data.handles?.includes('right') && (
+          <Handle
+            type="source"
+            position={Position.Right}
+            isConnectable={isConnectable}
+            style={{
+              background: '#61dafb',
+              width: '14px',
+              height: '14px',
+              right: '-7px',
+              border: '2px solid #fff',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+            }}
+          />
+        )}
+
+        {data.handles?.includes('bottom') && (
+          <Handle
+            type="source"
+            position={Position.Bottom}
+            isConnectable={isConnectable}
+            style={{
+              background: '#61dafb',
+              width: '14px',
+              height: '14px',
+              bottom: '-7px',
+              border: '2px solid #fff',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+            }}
+          />
+        )}
+      </Box>
+    </>
+  );
+};
+
+export default memo(UsersNode); 

package/packages/diagrams/src/lib/templates/cloud-arch/data/diagramManager.ts

@@ -0,0 +1,365 @@
+// Diagram Data Manager
+// Handles user-created diagrams with positions, dimensions, and UI state
+// Completely separate from schema validation rules
+
+import { Node, Edge } from 'reactflow';
+import {
+  DiagramData,
+  DiagramNodeData,
+  DiagramEdgeData,
+  DiagramViewport,
+  DiagramCollection,
+  DiagramExport,
+  DiagramFilter,
+  DiagramSearchResult,
+  DiagramTemplate
+} from './types';
+import { generateMeaningfulId } from '../utils/idGenerator';
+
+export class DiagramDataManager {
+  private diagrams: Map<string, DiagramData> = new Map();
+  private collections: Map<string, DiagramCollection> = new Map();
+
+  // Convert ReactFlow nodes/edges to DiagramData format
+  toDiagramData(
+    nodes: Node[],
+    edges: Edge[],
+    metadata: {
+      name: string;
+      description?: string;
+      author: string;
+      tags?: string[];
+    },
+    viewport: DiagramViewport = { x: 0, y: 0, zoom: 1 }
+  ): DiagramData {
+    const diagramId = generateMeaningfulId('diagram', 'instance');
+    
+    const diagramNodes: DiagramNodeData[] = nodes.map(node => ({
+      id: node.id,
+      type: node.type || 'serviceNode',
+      position: node.position,
+      dimensions: {
+        width: (node.style?.width as number) || (node.data?.width as number) || 120,
+        height: (node.style?.height as number) || (node.data?.height as number) || 80
+      },
+      style: node.style,
+      data: {
+        service: node.data?.service,
+        label: node.data?.label,
+        sublabel: node.data?.sublabel,
+        cloudProvider: node.data?.cloudProvider,
+        isSelected: node.selected,
+        isHighlighted: node.data?.highlighted,
+        parentNode: node.parentNode
+      },
+      selected: node.selected,
+      dragging: node.data?.dragging,
+      className: node.className,
+      extent: node.extent
+    }));
+
+    const diagramEdges: DiagramEdgeData[] = edges.map(edge => ({
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      type: edge.type,
+      style: edge.style,
+      label: edge.label as string,
+      animated: edge.animated,
+      markerStart: edge.markerStart,
+      markerEnd: edge.markerEnd
+    }));
+
+    const cloudProviders = [...new Set(
+      nodes
+        .map(node => node.data?.cloudProvider)
+        .filter(provider => provider)
+    )] as string[];
+
+    return {
+      id: diagramId,
+      name: metadata.name,
+      description: metadata.description,
+      nodes: diagramNodes,
+      edges: diagramEdges,
+      viewport,
+      selectedNodes: nodes.filter(n => n.selected).map(n => n.id),
+      selectedEdges: edges.filter(e => e.selected).map(e => e.id),
+      metadata: {
+        createdAt: new Date().toISOString(),
+        lastModified: new Date().toISOString(),
+        author: metadata.author,
+        version: '1.0.0',
+        tags: metadata.tags || [],
+        cloudProviders,
+        nodeCount: nodes.length,
+        edgeCount: edges.length
+      },
+      formatVersion: '2.0.0'
+    };
+  }
+
+  // Convert DiagramData back to ReactFlow format
+  fromDiagramData(diagramData: DiagramData): { nodes: Node[]; edges: Edge[]; viewport: DiagramViewport } {
+    const nodes: Node[] = diagramData.nodes.map(nodeData => ({
+      id: nodeData.id,
+      type: nodeData.type,
+      position: nodeData.position,
+      data: {
+        service: nodeData.data.service,
+        label: nodeData.data.label,
+        sublabel: nodeData.data.sublabel,
+        cloudProvider: nodeData.data.cloudProvider,
+        highlighted: nodeData.data.isHighlighted,
+        width: nodeData.dimensions?.width,
+        height: nodeData.dimensions?.height,
+        // Note: No schema validation data here - that's handled separately
+      },
+      style: {
+        ...nodeData.style,
+        width: nodeData.dimensions?.width,
+        height: nodeData.dimensions?.height
+      },
+      selected: nodeData.selected,
+      dragging: nodeData.dragging,
+      className: nodeData.className,
+      parentNode: nodeData.data.parentNode,
+      extent: nodeData.extent
+    }));
+
+    const edges: Edge[] = diagramData.edges.map(edgeData => ({
+      id: edgeData.id,
+      source: edgeData.source,
+      target: edgeData.target,
+      type: edgeData.type,
+      style: edgeData.style,
+      label: edgeData.label,
+      animated: edgeData.animated,
+      markerStart: edgeData.markerStart,
+      markerEnd: edgeData.markerEnd
+    }));
+
+    return {
+      nodes,
+      edges,
+      viewport: diagramData.viewport
+    };
+  }
+
+  // Save diagram data
+  saveDiagram(diagramData: DiagramData): void {
+    diagramData.metadata.lastModified = new Date().toISOString();
+    this.diagrams.set(diagramData.id, diagramData);
+  }
+
+  // Load diagram data
+  loadDiagram(diagramId: string): DiagramData | null {
+    return this.diagrams.get(diagramId) || null;
+  }
+
+  // Delete diagram
+  deleteDiagram(diagramId: string): boolean {
+    return this.diagrams.delete(diagramId);
+  }
+
+  // List all diagrams
+  listDiagrams(): DiagramData[] {
+    return Array.from(this.diagrams.values());
+  }
+
+  // Search and filter diagrams
+  searchDiagrams(filter: DiagramFilter): DiagramSearchResult {
+    let filteredDiagrams = this.listDiagrams();
+
+    // Filter by cloud providers
+    if (filter.cloudProviders && filter.cloudProviders.length > 0) {
+      filteredDiagrams = filteredDiagrams.filter(diagram =>
+        filter.cloudProviders!.some(provider =>
+          diagram.metadata.cloudProviders.includes(provider)
+        )
+      );
+    }
+
+    // Filter by tags
+    if (filter.tags && filter.tags.length > 0) {
+      filteredDiagrams = filteredDiagrams.filter(diagram =>
+        filter.tags!.some(tag => diagram.metadata.tags.includes(tag))
+      );
+    }
+
+    // Filter by author
+    if (filter.author) {
+      filteredDiagrams = filteredDiagrams.filter(diagram =>
+        diagram.metadata.author.toLowerCase().includes(filter.author!.toLowerCase())
+      );
+    }
+
+    // Filter by date range
+    if (filter.dateRange) {
+      const startDate = new Date(filter.dateRange.start);
+      const endDate = new Date(filter.dateRange.end);
+      filteredDiagrams = filteredDiagrams.filter(diagram => {
+        const diagramDate = new Date(diagram.metadata.createdAt);
+        return diagramDate >= startDate && diagramDate <= endDate;
+      });
+    }
+
+    // Filter by node count range
+    if (filter.nodeCountRange) {
+      filteredDiagrams = filteredDiagrams.filter(diagram =>
+        diagram.metadata.nodeCount >= filter.nodeCountRange!.min &&
+        diagram.metadata.nodeCount <= filter.nodeCountRange!.max
+      );
+    }
+
+    return {
+      diagrams: filteredDiagrams,
+      totalCount: this.diagrams.size,
+      filteredCount: filteredDiagrams.length
+    };
+  }
+
+  // Export diagram data
+  exportDiagram(diagramId: string, format: 'json' | 'yaml' = 'json', includeMetadata: boolean = true): DiagramExport | null {
+    const diagram = this.loadDiagram(diagramId);
+    if (!diagram) return null;
+
+    return {
+      format,
+      timestamp: new Date().toISOString(),
+      data: diagram,
+      includeMetadata
+    };
+  }
+
+  // Import diagram data
+  importDiagram(diagramExport: DiagramExport): string {
+    const diagramData = diagramExport.data;
+    
+    // Generate new ID to avoid conflicts
+    diagramData.id = generateMeaningfulId('diagram', 'imported');
+    diagramData.metadata.lastModified = new Date().toISOString();
+    
+    this.saveDiagram(diagramData);
+    return diagramData.id;
+  }
+
+  // Clone diagram
+  cloneDiagram(sourceId: string, newName: string): string | null {
+    const source = this.loadDiagram(sourceId);
+    if (!source) return null;
+
+    const clonedData: DiagramData = {
+      ...source,
+      id: generateMeaningfulId('diagram', 'clone'),
+      name: newName,
+      metadata: {
+        ...source.metadata,
+        createdAt: new Date().toISOString(),
+        lastModified: new Date().toISOString(),
+        version: '1.0.0'
+      }
+    };
+
+    this.saveDiagram(clonedData);
+    return clonedData.id;
+  }
+
+  // Update diagram viewport
+  updateViewport(diagramId: string, viewport: DiagramViewport): boolean {
+    const diagram = this.loadDiagram(diagramId);
+    if (!diagram) return false;
+
+    diagram.viewport = viewport;
+    diagram.metadata.lastModified = new Date().toISOString();
+    this.saveDiagram(diagram);
+    return true;
+  }
+
+  // Update node positions (for autosave during editing)
+  updateNodePositions(diagramId: string, nodeUpdates: Array<{ id: string; position: { x: number; y: number } }>): boolean {
+    const diagram = this.loadDiagram(diagramId);
+    if (!diagram) return false;
+
+    for (const update of nodeUpdates) {
+      const node = diagram.nodes.find(n => n.id === update.id);
+      if (node) {
+        node.position = update.position;
+      }
+    }
+
+    diagram.metadata.lastModified = new Date().toISOString();
+    this.saveDiagram(diagram);
+    return true;
+  }
+
+  // Create collection
+  createCollection(name: string, description: string, author: string): string {
+    const collectionId = generateMeaningfulId('collection', 'instance');
+    
+    const collection: DiagramCollection = {
+      id: collectionId,
+      name,
+      description,
+      diagrams: [],
+      metadata: {
+        createdAt: new Date().toISOString(),
+        lastModified: new Date().toISOString(),
+        author,
+        totalDiagrams: 0,
+        tags: []
+      }
+    };
+
+    this.collections.set(collectionId, collection);
+    return collectionId;
+  }
+
+  // Add diagram to collection
+  addToCollection(collectionId: string, diagramId: string): boolean {
+    const collection = this.collections.get(collectionId);
+    const diagram = this.loadDiagram(diagramId);
+    
+    if (!collection || !diagram) return false;
+
+    if (!collection.diagrams.find(d => d.id === diagramId)) {
+      collection.diagrams.push(diagram);
+      collection.metadata.totalDiagrams = collection.diagrams.length;
+      collection.metadata.lastModified = new Date().toISOString();
+    }
+
+    return true;
+  }
+
+  // Get diagram statistics
+  getDiagramStats(diagramId: string): any {
+    const diagram = this.loadDiagram(diagramId);
+    if (!diagram) return null;
+
+    const nodesByProvider = diagram.nodes.reduce((acc, node) => {
+      const provider = node.data.cloudProvider || 'unknown';
+      acc[provider] = (acc[provider] || 0) + 1;
+      return acc;
+    }, {} as Record<string, number>);
+
+    const nodesByType = diagram.nodes.reduce((acc, node) => {
+      const service = node.data.service || 'unknown';
+      acc[service] = (acc[service] || 0) + 1;
+      return acc;
+    }, {} as Record<string, number>);
+
+    return {
+      totalNodes: diagram.nodes.length,
+      totalEdges: diagram.edges.length,
+      cloudProviders: diagram.metadata.cloudProviders,
+      nodesByProvider,
+      nodesByType,
+      createdAt: diagram.metadata.createdAt,
+      lastModified: diagram.metadata.lastModified,
+      author: diagram.metadata.author
+    };
+  }
+}
+
+// Default instance
+export const diagramDataManager = new DiagramDataManager();