@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/apps/diagramming/src/CustomIconExamples.ts

@@ -1,233 +1,233 @@
-// Example: How to use fully customizable icons in automation nodes
-// This file demonstrates the usage of configurable icons with complete user control
-
-import { automationDefaultNodes } from './AutomationDiagramData';
-
-// Example 1: Set up your icon library first
-import {
-  getIconByName,
-  getAvailableIconNames,
-  iconExists,
-  addCustomIcon,
-  addCustomIcons,
-} from '../../../packages/diagrams/src/lib/utils/iconMapper';
-import {
-  PlayArrow as PlayArrowIcon,
-  AccountTree,
-  Timeline,
-  Home,
-  Cloud,
-  Storage as Database,
-  Email,
-  Settings,
-  Stop,
-  Api,
-  Article,
-} from '@mui/icons-material';
-
-// Add your custom icons - this is REQUIRED since there are no default icons
-addCustomIcons({
-  // Basic automation icons
-  PlayArrow: PlayArrowIcon,
-  Stop: Stop,
-  Api: Api,
-  Article: Article,
-
-  // Custom icons for your use case
-  Home: Home,
-  Cloud: Cloud,
-  Database: Database,
-  Email: Email,
-  Settings: Settings,
-  AccountTree: AccountTree,
-  Timeline: Timeline,
-});
-
-// Example 2: Modify existing nodes with custom icons
-export const customIconNodes = automationDefaultNodes.map((node) => {
-  // Add custom icons based on node type
-  let customIconName: string;
-
-  switch (node.type) {
-    case 'AutomationStartNode':
-      customIconName = 'Home'; // Use Home icon
-      break;
-    case 'AutomationApiNode':
-      customIconName = 'Cloud'; // Use Cloud icon
-      break;
-    case 'AutomationFormattingNode':
-      customIconName = 'AccountTree'; // Use AccountTree icon
-      break;
-    case 'AutomationEndNode':
-      customIconName = 'Settings'; // Use Settings icon
-      break;
-    default:
-      customIconName = 'Settings'; // Default fallback
-  }
-
-  return {
-    ...node,
-    data: {
-      ...node.data,
-      iconName: customIconName,
-    },
-  };
-});
-
-// Example 3: Create completely new nodes with specific icons
-export const exampleCustomNodes = [
-  {
-    id: 'email-trigger-node',
-    type: 'AutomationStartNode',
-    position: { x: 50, y: 300 },
-    data: {
-      label: 'Email Trigger',
-      description: 'Triggered when new email arrives',
-      status: 'Ready',
-      backgroundColor: '#1e3a8a',
-      textColor: '#ffffff',
-      borderColor: '#3b82f6',
-      lastRun: 'Never',
-      duration: '0.0s',
-      iconName: 'Email', // Custom email icon
-      // ... other configuration
-    },
-  },
-  {
-    id: 'database-query-node',
-    type: 'AutomationApiNode',
-    position: { x: 400, y: 300 },
-    data: {
-      label: 'Database Query',
-      description: 'Query user data from database',
-      status: 'Ready',
-      backgroundColor: '#1e40af',
-      textColor: '#ffffff',
-      borderColor: '#3b82f6',
-      lastRun: '2 minutes ago',
-      duration: '0.5s',
-      iconName: 'Database', // Custom database icon
-      // ... other configuration
-    },
-  },
-  {
-    id: 'ai-analysis-node',
-    type: 'AutomationFormattingNode',
-    position: { x: 750, y: 300 },
-    data: {
-      label: 'AI Analysis',
-      description: 'Analyze data using AI models',
-      status: 'Ready',
-      backgroundColor: '#1e40af',
-      textColor: '#ffffff',
-      borderColor: '#3b82f6',
-      lastRun: '1 minute ago',
-      duration: '2.1s',
-      iconName: 'AccountTree', // Custom AI icon
-      // ... other configuration
-    },
-  },
-  {
-    id: 'notification-end-node',
-    type: 'AutomationEndNode',
-    position: { x: 1100, y: 300 },
-    data: {
-      label: 'Send Notification',
-      description: 'Send notification to user',
-      status: 'Ready',
-      backgroundColor: '#1e3a8a',
-      textColor: '#ffffff',
-      borderColor: '#3b82f6',
-      lastRun: '30 seconds ago',
-      duration: '0.2s',
-      iconName: 'Settings', // Custom notification icon
-      // ... other configuration
-    },
-  },
-];
-
-// Example 4: Dynamic icon selection based on data
-export const createNodeWithDynamicIcon = (nodeType: string, nodeData: any) => {
-  // Select icon based on node data or type
-  let iconName: string;
-
-  // Use switch case for category-based icon selection
-  switch (nodeData.category) {
-    case 'communication':
-      iconName = 'Email';
-      break;
-    case 'data':
-      iconName = 'Database';
-      break;
-    case 'ai':
-      iconName = 'AccountTree';
-      break;
-    case 'security':
-      iconName = 'Settings';
-      break;
-    default:
-      // Default based on node type
-      switch (nodeType) {
-        case 'AutomationStartNode':
-          iconName = 'PlayArrow';
-          break;
-        case 'AutomationApiNode':
-          iconName = 'Api';
-          break;
-        case 'AutomationFormattingNode':
-          iconName = 'Article';
-          break;
-        case 'AutomationEndNode':
-          iconName = 'Stop';
-          break;
-        default:
-          iconName = 'Settings';
-      }
-      break;
-  }
-
-  return {
-    ...nodeData,
-    iconName,
-  };
-};
-
-// Example 5: Using the icon mapper utility directly
-// Check if an icon exists before using it
-const safeIconName = iconExists('CustomIcon') ? 'CustomIcon' : 'Settings';
-
-// Get all available icon names for a dropdown/selector
-const availableIcons = getAvailableIconNames();
-console.log('Available icons:', availableIcons);
-
-// Get icon component for rendering
-const IconComponent = getIconByName('Home');
-
-// Example 6: Adding more custom icons dynamically
-// Add a single custom icon
-addCustomIcon('Timeline', Timeline);
-
-// Add multiple custom icons at once
-addCustomIcons({
-  Timeline: Timeline,
-  CustomWorkflow: AccountTree,
-});
-
-// Now you can use these custom icons in your nodes
-const customIconNode = {
-  id: 'custom-workflow-node',
-  type: 'AutomationStartNode',
-  position: { x: 50, y: 400 },
-  data: {
-    label: 'Custom Workflow',
-    description: 'A workflow with custom icons',
-    status: 'Ready',
-    backgroundColor: '#1e3a8a',
-    textColor: '#ffffff',
-    borderColor: '#3b82f6',
-    lastRun: 'Never',
-    duration: '0.0s',
-    iconName: 'AccountTree', // Now this will work!
-    // ... other configuration
-  },
-};
+// Example: How to use fully customizable icons in automation nodes
+// This file demonstrates the usage of configurable icons with complete user control
+
+import { automationDefaultNodes } from './AutomationDiagramData';
+
+// Example 1: Set up your icon library first
+import {
+  getIconByName,
+  getAvailableIconNames,
+  iconExists,
+  addCustomIcon,
+  addCustomIcons,
+} from '../../../packages/diagrams/src/lib/utils/iconMapper';
+import {
+  PlayArrow as PlayArrowIcon,
+  AccountTree,
+  Timeline,
+  Home,
+  Cloud,
+  Storage as Database,
+  Email,
+  Settings,
+  Stop,
+  Api,
+  Article,
+} from '@mui/icons-material';
+
+// Add your custom icons - this is REQUIRED since there are no default icons
+addCustomIcons({
+  // Basic automation icons
+  PlayArrow: PlayArrowIcon,
+  Stop: Stop,
+  Api: Api,
+  Article: Article,
+
+  // Custom icons for your use case
+  Home: Home,
+  Cloud: Cloud,
+  Database: Database,
+  Email: Email,
+  Settings: Settings,
+  AccountTree: AccountTree,
+  Timeline: Timeline,
+});
+
+// Example 2: Modify existing nodes with custom icons
+export const customIconNodes = automationDefaultNodes.map((node) => {
+  // Add custom icons based on node type
+  let customIconName: string;
+
+  switch (node.type) {
+    case 'AutomationStartNode':
+      customIconName = 'Home'; // Use Home icon
+      break;
+    case 'AutomationApiNode':
+      customIconName = 'Cloud'; // Use Cloud icon
+      break;
+    case 'AutomationFormattingNode':
+      customIconName = 'AccountTree'; // Use AccountTree icon
+      break;
+    case 'AutomationEndNode':
+      customIconName = 'Settings'; // Use Settings icon
+      break;
+    default:
+      customIconName = 'Settings'; // Default fallback
+  }
+
+  return {
+    ...node,
+    data: {
+      ...node.data,
+      iconName: customIconName,
+    },
+  };
+});
+
+// Example 3: Create completely new nodes with specific icons
+export const exampleCustomNodes = [
+  {
+    id: 'email-trigger-node',
+    type: 'AutomationStartNode',
+    position: { x: 50, y: 300 },
+    data: {
+      label: 'Email Trigger',
+      description: 'Triggered when new email arrives',
+      status: 'Ready',
+      backgroundColor: '#1e3a8a',
+      textColor: '#ffffff',
+      borderColor: '#3b82f6',
+      lastRun: 'Never',
+      duration: '0.0s',
+      iconName: 'Email', // Custom email icon
+      // ... other configuration
+    },
+  },
+  {
+    id: 'database-query-node',
+    type: 'AutomationApiNode',
+    position: { x: 400, y: 300 },
+    data: {
+      label: 'Database Query',
+      description: 'Query user data from database',
+      status: 'Ready',
+      backgroundColor: '#1e40af',
+      textColor: '#ffffff',
+      borderColor: '#3b82f6',
+      lastRun: '2 minutes ago',
+      duration: '0.5s',
+      iconName: 'Database', // Custom database icon
+      // ... other configuration
+    },
+  },
+  {
+    id: 'ai-analysis-node',
+    type: 'AutomationFormattingNode',
+    position: { x: 750, y: 300 },
+    data: {
+      label: 'AI Analysis',
+      description: 'Analyze data using AI models',
+      status: 'Ready',
+      backgroundColor: '#1e40af',
+      textColor: '#ffffff',
+      borderColor: '#3b82f6',
+      lastRun: '1 minute ago',
+      duration: '2.1s',
+      iconName: 'AccountTree', // Custom AI icon
+      // ... other configuration
+    },
+  },
+  {
+    id: 'notification-end-node',
+    type: 'AutomationEndNode',
+    position: { x: 1100, y: 300 },
+    data: {
+      label: 'Send Notification',
+      description: 'Send notification to user',
+      status: 'Ready',
+      backgroundColor: '#1e3a8a',
+      textColor: '#ffffff',
+      borderColor: '#3b82f6',
+      lastRun: '30 seconds ago',
+      duration: '0.2s',
+      iconName: 'Settings', // Custom notification icon
+      // ... other configuration
+    },
+  },
+];
+
+// Example 4: Dynamic icon selection based on data
+export const createNodeWithDynamicIcon = (nodeType: string, nodeData: any) => {
+  // Select icon based on node data or type
+  let iconName: string;
+
+  // Use switch case for category-based icon selection
+  switch (nodeData.category) {
+    case 'communication':
+      iconName = 'Email';
+      break;
+    case 'data':
+      iconName = 'Database';
+      break;
+    case 'ai':
+      iconName = 'AccountTree';
+      break;
+    case 'security':
+      iconName = 'Settings';
+      break;
+    default:
+      // Default based on node type
+      switch (nodeType) {
+        case 'AutomationStartNode':
+          iconName = 'PlayArrow';
+          break;
+        case 'AutomationApiNode':
+          iconName = 'Api';
+          break;
+        case 'AutomationFormattingNode':
+          iconName = 'Article';
+          break;
+        case 'AutomationEndNode':
+          iconName = 'Stop';
+          break;
+        default:
+          iconName = 'Settings';
+      }
+      break;
+  }
+
+  return {
+    ...nodeData,
+    iconName,
+  };
+};
+
+// Example 5: Using the icon mapper utility directly
+// Check if an icon exists before using it
+const safeIconName = iconExists('CustomIcon') ? 'CustomIcon' : 'Settings';
+
+// Get all available icon names for a dropdown/selector
+const availableIcons = getAvailableIconNames();
+console.log('Available icons:', availableIcons);
+
+// Get icon component for rendering
+const IconComponent = getIconByName('Home');
+
+// Example 6: Adding more custom icons dynamically
+// Add a single custom icon
+addCustomIcon('Timeline', Timeline);
+
+// Add multiple custom icons at once
+addCustomIcons({
+  Timeline: Timeline,
+  CustomWorkflow: AccountTree,
+});
+
+// Now you can use these custom icons in your nodes
+const customIconNode = {
+  id: 'custom-workflow-node',
+  type: 'AutomationStartNode',
+  position: { x: 50, y: 400 },
+  data: {
+    label: 'Custom Workflow',
+    description: 'A workflow with custom icons',
+    status: 'Ready',
+    backgroundColor: '#1e3a8a',
+    textColor: '#ffffff',
+    borderColor: '#3b82f6',
+    lastRun: 'Never',
+    duration: '0.0s',
+    iconName: 'AccountTree', // Now this will work!
+    // ... other configuration
+  },
+};