@flowuent-org/diagramming-core 1.4.0 → 1.4.1

package/packages/diagrams/src/lib/utils/add-new-node.ts

@@ -0,0 +1,52 @@
+import { Node } from '@xyflow/react';
+import { v4 as uuidv4 } from 'uuid';
+import { ICardNode } from '../types/card-node';
+import { EdgeTypes } from '../organisms/CustomEdge/custom-edge.type';
+
+const OFFSET = { x: 500, y: 500 };
+
+export function getNewNodeEdge({ pos, curr }: Args) {
+  const newPos = {
+    x: curr.position?.x || 0,
+    y: curr.position?.y || 0,
+  };
+
+  if (pos === 'bottom') {
+    newPos.y += OFFSET.y;
+  }
+  if (pos === 'right') {
+    newPos.x += OFFSET.x;
+  }
+
+  const id = uuidv4();
+
+  const newNode: ICardNode = {
+    id,
+    type: 'entity',
+    position: newPos,
+    parentId: curr.id,
+    data: {
+      isPinned: false,
+      isBlock: true,
+      color: 'blue',
+      nodeId: id,
+      title: 'New Entity',
+      blocks: [],
+    },
+  };
+
+  return {
+    node: newNode,
+    edge: {
+      id: `${curr.id}v${newNode.id}`,
+      source: curr.id,
+      target: newNode.id,
+      type: EdgeTypes.Default,
+    },
+  };
+}
+
+interface Args {
+  curr: Node;
+  pos: 'bottom' | 'right';
+}

package/packages/diagrams/src/lib/utils/addToHistory.ts

@@ -0,0 +1,15 @@
+import { DiagramStore, HistoryEvent } from '../contexts/diagramStoreTypes';
+
+export default function addToHistory(
+  state: DiagramStore,
+  events: HistoryEvent[],
+): DiagramStore {
+  const slicedHistory = state.history.slice(0, state.historyIndex + 1);
+  const newHistoryIndex = state.historyIndex + events.length;
+
+  return {
+    ...state,
+    history: events.length > 0 ? [...slicedHistory, ...events] : state.history,
+    historyIndex: newHistoryIndex,
+  };
+}

package/packages/diagrams/src/lib/utils/automation-flow-processor.ts

@@ -0,0 +1,556 @@
+import {
+  AutomationNodeForm,
+  AutomationWorkflowData,
+  AutomationStartNodeForm,
+  AutomationApiNodeForm,
+  AutomationFormattingNodeForm,
+  AutomationEndNodeForm,
+} from '../types/automation-node-data-types';
+import { Node, Edge } from '@xyflow/react';
+
+export interface AutomationExecutionContext {
+  variables: Record<string, string | number | boolean | object | null>;
+  logs: Array<{
+    timestamp: string;
+    level: 'info' | 'warn' | 'error' | 'debug';
+    nodeId: string;
+    message: string;
+    data?: string | number | boolean | object | null;
+  }>;
+  errors: Array<{
+    timestamp: string;
+    nodeId: string;
+    error: string;
+    stack?: string;
+  }>;
+}
+
+export class AutomationFlowProcessor {
+  private context: AutomationExecutionContext;
+  private nodes: Node[];
+  private edges: Edge[];
+
+  constructor(nodes: Node[], edges: Edge[]) {
+    this.nodes = nodes;
+    this.edges = edges;
+    this.context = {
+      variables: {},
+      logs: [],
+      errors: [],
+    };
+  }
+
+  /**
+   * Process automation workflow data similar to workflow system
+   */
+  public processWorkflowData(): AutomationWorkflowData {
+    const workflowData: AutomationWorkflowData = {
+      id: `automation-workflow-${Date.now()}`,
+      name: 'Automation Workflow',
+      description: 'Generated automation workflow',
+      version: '1.0.0',
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      nodes: [],
+      edges: [],
+      variables: [],
+      settings: {
+        timeout: 300000, // 5 minutes
+        retryPolicy: {
+          maxRetries: 3,
+          retryDelay: 1000,
+          backoffMultiplier: 2,
+        },
+        logging: {
+          level: 'info',
+          destination: 'console',
+        },
+      },
+    };
+
+    // Process nodes
+    this.nodes.forEach((node) => {
+      if (node.data.formData) {
+        const formData = node.data.formData as AutomationNodeForm;
+
+        workflowData.nodes.push({
+          id: node.id,
+          type: node.type || 'unknown',
+          position: node.position,
+          data: formData,
+        });
+
+        // Extract variables from form data
+        this.extractVariablesFromNode(formData, workflowData.variables!);
+      }
+    });
+
+    // Process edges
+    this.edges.forEach((edge) => {
+      workflowData.edges.push({
+        id: edge.id,
+        source: edge.source,
+        target: edge.target,
+        sourceHandle: edge.sourceHandle || undefined,
+        targetHandle: edge.targetHandle || undefined,
+        data: edge.data || undefined,
+      });
+    });
+
+    return workflowData;
+  }
+
+  /**
+   * Extract variables from node form data
+   */
+  private extractVariablesFromNode(
+    formData: AutomationNodeForm,
+    variables: NonNullable<AutomationWorkflowData['variables']>,
+  ): void {
+    switch (formData.type) {
+      case 'start':
+        // Extract initial variables
+        if (formData.initialVariables) {
+          formData.initialVariables.forEach((variable) => {
+            if (!variables.find((v) => v.name === variable.name)) {
+              variables.push({
+                name: variable.name,
+                type: variable.type,
+                defaultValue: variable.value,
+                description: `Initial variable from ${formData.title}`,
+              });
+            }
+          });
+        }
+        break;
+
+      case 'api':
+        // Extract response variable
+        if (formData.responseVariable) {
+          if (!variables.find((v) => v.name === formData.responseVariable)) {
+            variables.push({
+              name: formData.responseVariable,
+              type: formData.responseDataType.toLowerCase() as any,
+              defaultValue: null,
+              description: `API response from ${formData.title}`,
+            });
+          }
+        }
+        break;
+
+      case 'formatting':
+        // Extract input and output variables
+        if (formData.inputVariable) {
+          if (!variables.find((v) => v.name === formData.inputVariable)) {
+            variables.push({
+              name: formData.inputVariable,
+              type: 'object',
+              defaultValue: null,
+              description: `Input data for ${formData.title}`,
+            });
+          }
+        }
+        if (formData.outputVariable) {
+          if (!variables.find((v) => v.name === formData.outputVariable)) {
+            variables.push({
+              name: formData.outputVariable,
+              type: formData.outputDataType.toLowerCase() as any,
+              defaultValue: null,
+              description: `Formatted output from ${formData.title}`,
+            });
+          }
+        }
+        break;
+
+      case 'end':
+        // End node doesn't create new variables
+        break;
+    }
+  }
+
+  /**
+   * Generate JavaScript code from automation workflow
+   */
+  public generateJavaScriptCode(): string {
+    const workflowData = this.processWorkflowData();
+    let code = `// Generated Automation Workflow Code
+// Workflow ID: ${workflowData.id}
+// Generated at: ${new Date().toISOString()}
+
+async function executeAutomationWorkflow() {
+  const context = {
+    variables: {},
+    logs: [],
+    errors: [],
+  };
+
+  // Initialize variables
+${
+  workflowData.variables
+    ?.map(
+      (variable) =>
+        `  context.variables['${variable.name}'] = ${JSON.stringify(variable.defaultValue)};`,
+    )
+    .join('\n') || ''
+}
+
+  try {
+`;
+
+    // Generate code for each node
+    workflowData.nodes.forEach((node) => {
+      code += this.generateNodeCode(node.data);
+    });
+
+    code += `
+    return {
+      success: true,
+      context,
+      finalOutput: context.variables,
+    };
+  } catch (error) {
+    context.errors.push({
+      timestamp: new Date().toISOString(),
+      nodeId: 'unknown',
+      error: error.message,
+      stack: error.stack,
+    });
+    
+    return {
+      success: false,
+      context,
+      error: error.message,
+    };
+  }
+}
+
+// Export for use
+module.exports = { executeAutomationWorkflow };
+`;
+
+    return code;
+  }
+
+  /**
+   * Generate JavaScript code for a specific node
+   */
+  private generateNodeCode(formData: AutomationNodeForm): string {
+    let code = `\n    // ${formData.title} (${formData.type})\n`;
+
+    switch (formData.type) {
+      case 'start':
+        code += this.generateStartNodeCode(formData as AutomationStartNodeForm);
+        break;
+      case 'api':
+        code += this.generateApiNodeCode(formData as AutomationApiNodeForm);
+        break;
+      case 'formatting':
+        code += this.generateFormattingNodeCode(
+          formData as AutomationFormattingNodeForm,
+        );
+        break;
+      case 'end':
+        code += this.generateEndNodeCode(formData as AutomationEndNodeForm);
+        break;
+    }
+
+    return code;
+  }
+
+  private generateStartNodeCode(formData: AutomationStartNodeForm): string {
+    return `    // Start Node: ${formData.title}
+    context.logs.push({
+      timestamp: new Date().toISOString(),
+      level: 'info',
+      nodeId: '${formData.nodeId}',
+      message: 'Starting automation workflow',
+    });
+
+    // Initialize workflow context
+    ${
+      formData.initialVariables
+        ?.map(
+          (variable) =>
+            `context.variables['${variable.name}'] = ${JSON.stringify(variable.value)};`,
+        )
+        .join('\n    ') || ''
+    }
+
+    context.variables['${formData.outputVariable || 'workflowContext'}'] = {
+      runId: context.variables['runId'] || Date.now().toString(),
+      startTime: context.variables['startTime'] || new Date().toISOString(),
+      triggerType: '${formData.triggerType}',
+    };
+`;
+  }
+
+  private generateApiNodeCode(formData: AutomationApiNodeForm): string {
+    return `    // API Node: ${formData.title}
+    try {
+      context.logs.push({
+        timestamp: new Date().toISOString(),
+        level: 'info',
+        nodeId: '${formData.nodeId}',
+        message: 'Making API call to ${formData.url}',
+      });
+
+      const headers = {
+        ${
+          formData.headers
+            ?.filter((h) => h.enabled)
+            .map((header) => `'${header.key}': '${header.value}',`)
+            .join('\n        ') || ''
+        }
+      };
+
+      const queryParams = new URLSearchParams({
+        ${
+          formData.queryParams
+            ?.filter((p) => p.enabled)
+            .map((param) => `'${param.key}': '${param.value}',`)
+            .join('\n        ') || ''
+        }
+      });
+
+      const url = '${formData.url}' + (queryParams.toString() ? '?' + queryParams.toString() : '');
+      
+      const response = await fetch(url, {
+        method: '${formData.method}',
+        headers,
+        ${formData.body ? `body: ${formData.bodyType === 'json' ? 'JSON.stringify(' + formData.body + ')' : formData.body},` : ''}
+        timeout: ${formData.timeout},
+      });
+
+      if (!response.ok) {
+        throw new Error(\`API call failed: \${response.status} \${response.statusText}\`);
+      }
+
+      const data = await response.json();
+      context.variables['${formData.responseVariable}'] = data;
+      
+      context.logs.push({
+        timestamp: new Date().toISOString(),
+        level: 'info',
+        nodeId: '${formData.nodeId}',
+        message: 'API call completed successfully',
+        data: data,
+      });
+    } catch (error) {
+      context.errors.push({
+        timestamp: new Date().toISOString(),
+        nodeId: '${formData.nodeId}',
+        error: error.message,
+      });
+      ${
+        formData.errorHandling?.onError === 'continue'
+          ? `context.variables['${formData.responseVariable}'] = ${JSON.stringify(formData.errorHandling.fallbackValue)};`
+          : 'throw error;'
+      }
+    }
+`;
+  }
+
+  private generateFormattingNodeCode(
+    formData: AutomationFormattingNodeForm,
+  ): string {
+    return `    // Formatting Node: ${formData.title}
+    try {
+      context.logs.push({
+        timestamp: new Date().toISOString(),
+        level: 'info',
+        nodeId: '${formData.nodeId}',
+        message: 'Processing data formatting',
+      });
+
+      const inputData = context.variables['${formData.inputVariable}'];
+      
+      let formattedData;
+      
+      if ('${formData.formattingType}' === 'ai-powered') {
+        // AI-powered formatting
+        // Validate API key is not a placeholder
+        if (!'${formData.aiFormatting?.apiKey}' || '${formData.aiFormatting?.apiKey}'.includes('your-openai-api-key-here') || '${formData.aiFormatting?.apiKey}'.length < 10) {
+          throw new Error('Invalid API key. Please provide a valid API key.');
+        }
+        
+        // Determine if this is Gemini API or OpenAI API based on URL
+        const isGeminiApi = '${formData.aiFormatting?.apiUrl}'.includes('generativelanguage.googleapis.com');
+        
+        let requestBody;
+        let headers;
+        
+        if (isGeminiApi) {
+          // Gemini API format
+          headers = {
+            'Content-Type': 'application/json',
+            'X-goog-api-key': '${formData.aiFormatting?.apiKey}',
+          };
+          
+          requestBody = {
+            contents: [
+              {
+                parts: [
+                  {
+                    text: \`${formData.aiFormatting?.systemPrompt || 'You are a data formatting assistant.'}\\n\\n${formData.aiFormatting?.instruction}\\n\\nData: \${JSON.stringify(inputData)}\`,
+                  },
+                ],
+              },
+            ],
+            generationConfig: {
+              temperature: ${formData.aiFormatting?.temperature},
+              maxOutputTokens: ${formData.aiFormatting?.maxTokens || 1000},
+              responseMimeType: 'application/json',
+            },
+          };
+        } else {
+          // OpenAI API format
+          headers = {
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer ${formData.aiFormatting?.apiKey}',
+          };
+          
+          requestBody = {
+            model: '${formData.aiFormatting?.model}',
+            messages: [
+              {
+                role: 'system',
+                content: '${formData.aiFormatting?.systemPrompt || 'You are a data formatting assistant.'}',
+              },
+              {
+                role: 'user',
+                content: \`${formData.aiFormatting?.instruction}\\n\\nData: \${JSON.stringify(inputData)}\`,
+              },
+            ],
+            temperature: ${formData.aiFormatting?.temperature},
+            max_tokens: ${formData.aiFormatting?.maxTokens || 1000},
+          };
+        }
+        
+        const aiResponse = await fetch('${formData.aiFormatting?.apiUrl}', {
+          method: 'POST',
+          headers,
+          body: JSON.stringify(requestBody),
+        });
+
+        if (!aiResponse.ok) {
+          const errorText = await aiResponse.text();
+          throw new Error(\`AI API call failed: \${aiResponse.status} \${aiResponse.statusText}. \${errorText}\`);
+        }
+
+        const aiResult = await aiResponse.json();
+        
+        let content;
+        
+        if (isGeminiApi) {
+          // Gemini API response format
+          if (!aiResult.candidates || !aiResult.candidates[0] || !aiResult.candidates[0].content || !aiResult.candidates[0].content.parts) {
+            throw new Error('Invalid Gemini API response format');
+          }
+          content = aiResult.candidates[0].content.parts[0].text;
+        } else {
+          // OpenAI API response format
+          if (!aiResult.choices || !aiResult.choices[0] || !aiResult.choices[0].message) {
+            throw new Error('Invalid AI API response format');
+          }
+          content = aiResult.choices[0].message.content;
+        }
+        
+        // Try to parse as JSON, fallback to string if parsing fails
+        try {
+          formattedData = JSON.parse(content);
+        } catch {
+          formattedData = content;
+        }
+      } else if ('${formData.formattingType}' === 'template') {
+        // Template-based formatting
+        let template = \`${formData.templateFormatting?.template}\`;
+        ${
+          formData.templateFormatting?.variables
+            ?.map(
+              (variable) =>
+                `template = template.replace(/{{${variable.name}}}/g, context.variables['${variable.source}'] || '');`,
+            )
+            .join('\n        ') || ''
+        }
+        formattedData = JSON.parse(template);
+      } else {
+        // Basic formatting
+        formattedData = inputData;
+        ${
+          formData.basicFormatting?.operations
+            ?.map((operation) => {
+              switch (operation.type) {
+                case 'trim':
+                  return `// Trim fields: ${(operation.config as { fields: string[] }).fields.join(', ')}`;
+                case 'rename':
+                  return `// Rename fields: ${(operation.config as { mappings: Array<{ from: string; to: string }> }).mappings.map((m) => `${m.from} -> ${m.to}`).join(', ')}`;
+                default:
+                  return `// ${operation.type} operation`;
+              }
+            })
+            .join('\n        ') || ''
+        }
+      }
+
+      context.variables['${formData.outputVariable}'] = formattedData;
+      
+      context.logs.push({
+        timestamp: new Date().toISOString(),
+        level: 'info',
+        nodeId: '${formData.nodeId}',
+        message: 'Data formatting completed',
+        data: formattedData,
+      });
+    } catch (error) {
+      context.errors.push({
+        timestamp: new Date().toISOString(),
+        nodeId: '${formData.nodeId}',
+        error: error.message,
+      });
+      throw error;
+    }
+`;
+  }
+
+  private generateEndNodeCode(formData: AutomationEndNodeForm): string {
+    return `    // End Node: ${formData.title}
+    context.logs.push({
+      timestamp: new Date().toISOString(),
+      level: 'info',
+      nodeId: '${formData.nodeId}',
+      message: 'Automation workflow completed',
+    });
+
+    // Handle output based on configuration
+    const finalData = context.variables;
+    
+    if ('${formData.outputType}' === 'display') {
+      console.log('Automation Results:', finalData);
+    } else if ('${formData.outputType}' === 'store') {
+      // Store results (implementation depends on storage type)
+      console.log('Storing results to ${formData.storeConfig?.destination}');
+    } else if ('${formData.outputType}' === 'send') {
+      // Send results (implementation depends on send method)
+      console.log('Sending results via ${formData.sendConfig?.method}');
+    } else if ('${formData.outputType}' === 'webhook') {
+      // Send to webhook
+      console.log('Sending results to webhook: ${formData.webhookConfig?.url}');
+    }
+`;
+  }
+
+  /**
+   * Export workflow data as JSON
+   */
+  public exportAsJSON(): string {
+    const workflowData = this.processWorkflowData();
+    return JSON.stringify(workflowData, null, 2);
+  }
+
+  /**
+   * Import workflow data from JSON
+   */
+  public static importFromJSON(jsonString: string): AutomationWorkflowData {
+    return JSON.parse(jsonString) as AutomationWorkflowData;
+  }
+}

package/packages/diagrams/src/lib/utils/closestPoint.ts

@@ -0,0 +1,45 @@
+export function closestPoint(pathNode: SVGPathElement, point: [number, number]) {
+  const pathLength = pathNode.getTotalLength();
+  let precision = 8,
+    best,
+    bestLength = 0,
+    bestDistance = Infinity;
+
+  // linear scan for coarse approximation
+  for (let scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) {
+    if ((scanDistance = distance2((scan = pathNode.getPointAtLength(scanLength)))) < bestDistance) {
+      (best = scan), (bestLength = scanLength), (bestDistance = scanDistance);
+    }
+  }
+
+  // binary search for precise estimate
+  precision /= 2;
+  while (precision > 0.5) {
+    let before, after, beforeLength, afterLength, beforeDistance, afterDistance;
+    if (
+      (beforeLength = bestLength - precision) >= 0 &&
+      (beforeDistance = distance2((before = pathNode.getPointAtLength(beforeLength)))) < bestDistance
+    ) {
+      (best = before), (bestLength = beforeLength), (bestDistance = beforeDistance);
+    } else if (
+      (afterLength = bestLength + precision) <= pathLength &&
+      (afterDistance = distance2((after = pathNode.getPointAtLength(afterLength)))) < bestDistance
+    ) {
+      (best = after), (bestLength = afterLength), (bestDistance = afterDistance);
+    } else {
+      precision /= 2;
+    }
+  }
+
+  //@ts-expect-error don't now what type it is
+  best = [best.x, best.y];
+  //@ts-expect-error don't now what type it is
+  best.distance = Math.sqrt(bestDistance);
+  return best;
+
+  function distance2(p: { x: number; y: number }) {
+    const dx = p.x - point[0],
+      dy = p.y - point[1];
+    return dx * dx + dy * dy;
+  }
+}

package/packages/diagrams/src/lib/utils/color-options.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Box, Stack, Typography } from '@mui/material';
+
+// Define the shape of the color map prop
+interface ColorMap {
+  [colorName: string]: string;
+}
+
+// Define the ColorSelector component
+export const getColorOptions = (colorMap: ColorMap) => {
+  return Object.entries(colorMap).map(([colorName, colorValue]) => ({
+    value: colorName,
+    label: (
+      <Stack spacing={2} direction="row" sx={{ alignItems: 'center' }}>
+        <Box
+          width="14px"
+          height="14px"
+          position="relative"
+          bgcolor={colorValue}
+          sx={{ borderRadius: '50%' }}
+        />
+        <Typography>{colorName.toUpperCase()}</Typography>
+      </Stack>
+    ),
+  }));
+};