machinaos 0.0.1 → 0.0.7

package/client/src/hooks/useDragAndDrop.ts

@@ -1,124 +1,124 @@
-import { useCallback } from 'react';
-import { Node } from 'reactflow';
-import { snapToGrid, getDefaultNodePosition } from '../utils/workflow';
-import { theme } from '../styles/theme';
-import { nodeDefinitions } from '../nodeDefinitions';
-
-interface UseDragAndDropProps {
-  nodes: Node[];
-  setNodes: (nodes: Node[] | ((nodes: Node[]) => Node[])) => void;
-  saveNodeParameters?: (nodeId: string, parameters: Record<string, any>) => Promise<boolean>;
-}
-
-/**
- * Generate a unique label for a new node (n8n pattern).
- * First node of type: "Cron Scheduler"
- * Second node of type: "Cron Scheduler 1"
- * Third node of type: "Cron Scheduler 2"
- */
-export const generateUniqueLabel = (displayName: string, nodeType: string, existingNodes: Node[]): string => {
-  // Collect all labels from nodes of the same type
-  const existingLabels = existingNodes
-    .filter(n => n.type === nodeType)
-    .map(n => n.data?.label as string | undefined)
-    .filter((label): label is string => !!label);
-
-  // If no nodes have this base displayName, use it as-is
-  if (!existingLabels.includes(displayName)) {
-    return displayName;
-  }
-
-  // Find next available suffix
-  let suffix = 1;
-  while (existingLabels.includes(`${displayName} ${suffix}`)) {
-    suffix++;
-  }
-  return `${displayName} ${suffix}`;
-};
-
-export const useDragAndDrop = ({ nodes, setNodes, saveNodeParameters }: UseDragAndDropProps) => {
-  const onDragOver = useCallback((event: React.DragEvent) => {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'move';
-  }, []);
-
-  const onDrop = useCallback(
-    async (event: React.DragEvent) => {
-      event.preventDefault();
-
-      try {
-        const nodeData = JSON.parse(event.dataTransfer.getData('application/reactflow'));
-        if (!nodeData || !nodeData.type) {
-          return;
-        }
-
-        const reactFlowBounds = (event.target as Element).getBoundingClientRect();
-
-        let position = {
-          x: event.clientX - reactFlowBounds.left - theme.constants.dragOffset.x,
-          y: event.clientY - reactFlowBounds.top - theme.constants.dragOffset.y,
-        };
-
-        // Snap to grid for better alignment
-        position = snapToGrid(position);
-
-        // If no nodes exist, use default position
-        if (nodes.length === 0) {
-          position = getDefaultNodePosition(nodes.length);
-        }
-
-        // Get node definition to access displayName
-        const nodeDef = nodeDefinitions[nodeData.type];
-        const displayName = nodeDef?.displayName || nodeData.type;
-
-        // Generate unique label for template variable resolution (n8n pattern)
-        const uniqueLabel = generateUniqueLabel(displayName, nodeData.type, nodes);
-
-        const newNode: Node = {
-          id: `${nodeData.type}-${Date.now()}`,
-          type: nodeData.type,
-          position,
-          data: {
-            ...(nodeData.data || {}),
-            label: uniqueLabel,  // Add unique label for template resolution
-          },
-        };
-
-        // Save node parameters to database immediately via WebSocket (including hidden parameters)
-        if (newNode.data && Object.keys(newNode.data).length > 0 && saveNodeParameters) {
-          try {
-            await saveNodeParameters(newNode.id, newNode.data);
-            console.log(`[DragAndDrop] Saved default parameters for node ${newNode.id}:`, newNode.data);
-          } catch (error) {
-            console.error(`[DragAndDrop] Failed to save parameters for node ${newNode.id}:`, error);
-          }
-        }
-
-        setNodes((nds) => nds.concat(newNode));
-      } catch (error) {
-        console.error('Error dropping node:', error);
-      }
-    },
-    [setNodes, nodes, saveNodeParameters]
-  );
-
-  const handleComponentDragStart = useCallback((event: React.DragEvent, definition: any) => {
-    const defaults: any = {};
-    // Handle both old (parameters) and new (properties) interface formats
-    const properties = definition.properties || definition.parameters || [];
-    properties.forEach((param: any) => {
-      defaults[param.name] = param.default;
-    });
-    event.dataTransfer.setData('application/reactflow', JSON.stringify({ 
-      type: definition.name || definition.type, // Handle both new (name) and old (type) formats
-      data: defaults 
-    }));
-    event.dataTransfer.effectAllowed = 'move';
-  }, []);
-
-  return {
-    onDragOver,
-    onDrop,
-    handleComponentDragStart,
-  };
+import { useCallback } from 'react';
+import { Node } from 'reactflow';
+import { snapToGrid, getDefaultNodePosition } from '../utils/workflow';
+import { theme } from '../styles/theme';
+import { nodeDefinitions } from '../nodeDefinitions';
+
+interface UseDragAndDropProps {
+  nodes: Node[];
+  setNodes: (nodes: Node[] | ((nodes: Node[]) => Node[])) => void;
+  saveNodeParameters?: (nodeId: string, parameters: Record<string, any>) => Promise<boolean>;
+}
+
+/**
+ * Generate a unique label for a new node (n8n pattern).
+ * First node of type: "Cron Scheduler"
+ * Second node of type: "Cron Scheduler 1"
+ * Third node of type: "Cron Scheduler 2"
+ */
+export const generateUniqueLabel = (displayName: string, nodeType: string, existingNodes: Node[]): string => {
+  // Collect all labels from nodes of the same type
+  const existingLabels = existingNodes
+    .filter(n => n.type === nodeType)
+    .map(n => n.data?.label as string | undefined)
+    .filter((label): label is string => !!label);
+
+  // If no nodes have this base displayName, use it as-is
+  if (!existingLabels.includes(displayName)) {
+    return displayName;
+  }
+
+  // Find next available suffix
+  let suffix = 1;
+  while (existingLabels.includes(`${displayName} ${suffix}`)) {
+    suffix++;
+  }
+  return `${displayName} ${suffix}`;
+};
+
+export const useDragAndDrop = ({ nodes, setNodes, saveNodeParameters }: UseDragAndDropProps) => {
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const onDrop = useCallback(
+    async (event: React.DragEvent) => {
+      event.preventDefault();
+
+      try {
+        const nodeData = JSON.parse(event.dataTransfer.getData('application/reactflow'));
+        if (!nodeData || !nodeData.type) {
+          return;
+        }
+
+        const reactFlowBounds = (event.target as Element).getBoundingClientRect();
+
+        let position = {
+          x: event.clientX - reactFlowBounds.left - theme.constants.dragOffset.x,
+          y: event.clientY - reactFlowBounds.top - theme.constants.dragOffset.y,
+        };
+
+        // Snap to grid for better alignment
+        position = snapToGrid(position);
+
+        // If no nodes exist, use default position
+        if (nodes.length === 0) {
+          position = getDefaultNodePosition(nodes.length);
+        }
+
+        // Get node definition to access displayName
+        const nodeDef = nodeDefinitions[nodeData.type];
+        const displayName = nodeDef?.displayName || nodeData.type;
+
+        // Generate unique label for template variable resolution (n8n pattern)
+        const uniqueLabel = generateUniqueLabel(displayName, nodeData.type, nodes);
+
+        const newNode: Node = {
+          id: `${nodeData.type}-${Date.now()}`,
+          type: nodeData.type,
+          position,
+          data: {
+            ...(nodeData.data || {}),
+            label: uniqueLabel,  // Add unique label for template resolution
+          },
+        };
+
+        // Save node parameters to database immediately via WebSocket (including hidden parameters)
+        if (newNode.data && Object.keys(newNode.data).length > 0 && saveNodeParameters) {
+          try {
+            await saveNodeParameters(newNode.id, newNode.data);
+            console.log(`[DragAndDrop] Saved default parameters for node ${newNode.id}:`, newNode.data);
+          } catch (error) {
+            console.error(`[DragAndDrop] Failed to save parameters for node ${newNode.id}:`, error);
+          }
+        }
+
+        setNodes((nds) => nds.concat(newNode));
+      } catch (error) {
+        console.error('Error dropping node:', error);
+      }
+    },
+    [setNodes, nodes, saveNodeParameters]
+  );
+
+  const handleComponentDragStart = useCallback((event: React.DragEvent, definition: any) => {
+    const defaults: any = {};
+    // Handle both old (parameters) and new (properties) interface formats
+    const properties = definition.properties || definition.parameters || [];
+    properties.forEach((param: any) => {
+      defaults[param.name] = param.default;
+    });
+    event.dataTransfer.setData('application/reactflow', JSON.stringify({ 
+      type: definition.name || definition.type, // Handle both new (name) and old (type) formats
+      data: defaults 
+    }));
+    event.dataTransfer.effectAllowed = 'move';
+  }, []);
+
+  return {
+    onDragOver,
+    onDrop,
+    handleComponentDragStart,
+  };
 };

package/client/src/hooks/useDragVariable.ts

@@ -1,88 +1,88 @@
-import { useCallback } from 'react';
-import { useAppStore } from '../store/useAppStore';
-import { nodeDefinitions } from '../nodeDefinitions';
-import { Node } from 'reactflow';
-
-interface DragVariableHookReturn {
-  handleVariableDragStart: (
-    e: React.DragEvent,
-    sourceNodeId: string,
-    propertyPath: string,
-    value: any
-  ) => void;
-  getTemplateVariableName: (sourceNodeId: string) => string;
-}
-
-/**
- * Hook for handling drag-and-drop of template variables from connected nodes.
- *
- * Template variables use the SOURCE NODE LABEL as the key to ensure uniqueness
- * when multiple nodes of the same type are connected to the same target.
- * This follows the n8n pattern where each node has a unique label.
- *
- * Format: {{normalizedLabel.propertyPath}}
- * Example: {{cronscheduler.data}} or {{cronscheduler1.data}}
- *
- * @param targetNodeId - The ID of the node receiving the drag (target of edge)
- */
-export const useDragVariable = (_targetNodeId: string): DragVariableHookReturn => {
-  const { currentWorkflow } = useAppStore();
-
-  /**
-   * Get template variable name for a source node.
-   * Uses node label (n8n pattern) for uniqueness when multiple same-type nodes connect.
-   * Falls back to displayName -> nodeType -> nodeId for backward compatibility.
-   */
-  const getTemplateVariableName = useCallback((sourceNodeId: string): string => {
-    if (!currentWorkflow) return sourceNodeId;
-
-    // Find the source node by ID
-    const sourceNode = (currentWorkflow.nodes || []).find(
-      (node: Node) => node.id === sourceNodeId
-    );
-
-    if (!sourceNode) return sourceNodeId;
-
-    // Priority: node.data.label > displayName > nodeType > nodeId
-    const label = sourceNode.data?.label;
-    if (label && typeof label === 'string') {
-      // Normalize label: lowercase, remove spaces
-      return label.toLowerCase().replace(/\s+/g, '');
-    }
-
-    // Fallback to displayName from node definition
-    const nodeDef = nodeDefinitions[sourceNode.type || ''];
-    if (nodeDef?.displayName) {
-      return nodeDef.displayName.toLowerCase().replace(/\s+/g, '');
-    }
-
-    // Ultimate fallback: node type or ID
-    return (sourceNode.type || sourceNodeId).toLowerCase().replace(/\s+/g, '');
-  }, [currentWorkflow]);
-
-  const handleVariableDragStart = useCallback((
-    e: React.DragEvent,
-    sourceNodeId: string,
-    propertyPath: string,
-    value: any
-  ) => {
-    const templateName = getTemplateVariableName(sourceNodeId);
-    const variableTemplate = `{{${templateName}.${propertyPath}}}`;
-
-    e.dataTransfer.setData('text/plain', variableTemplate);
-    e.dataTransfer.setData('application/json', JSON.stringify({
-      type: 'nodeVariable',
-      nodeId: sourceNodeId,  // Include source node ID for reference
-      nodeName: templateName,
-      key: propertyPath,
-      variableTemplate,
-      dataType: typeof value
-    }));
-    e.dataTransfer.effectAllowed = 'copy';
-  }, [getTemplateVariableName]);
-
-  return {
-    handleVariableDragStart,
-    getTemplateVariableName
-  };
-};
+import { useCallback } from 'react';
+import { useAppStore } from '../store/useAppStore';
+import { nodeDefinitions } from '../nodeDefinitions';
+import { Node } from 'reactflow';
+
+interface DragVariableHookReturn {
+  handleVariableDragStart: (
+    e: React.DragEvent,
+    sourceNodeId: string,
+    propertyPath: string,
+    value: any
+  ) => void;
+  getTemplateVariableName: (sourceNodeId: string) => string;
+}
+
+/**
+ * Hook for handling drag-and-drop of template variables from connected nodes.
+ *
+ * Template variables use the SOURCE NODE LABEL as the key to ensure uniqueness
+ * when multiple nodes of the same type are connected to the same target.
+ * This follows the n8n pattern where each node has a unique label.
+ *
+ * Format: {{normalizedLabel.propertyPath}}
+ * Example: {{cronscheduler.data}} or {{cronscheduler1.data}}
+ *
+ * @param targetNodeId - The ID of the node receiving the drag (target of edge)
+ */
+export const useDragVariable = (_targetNodeId: string): DragVariableHookReturn => {
+  const { currentWorkflow } = useAppStore();
+
+  /**
+   * Get template variable name for a source node.
+   * Uses node label (n8n pattern) for uniqueness when multiple same-type nodes connect.
+   * Falls back to displayName -> nodeType -> nodeId for backward compatibility.
+   */
+  const getTemplateVariableName = useCallback((sourceNodeId: string): string => {
+    if (!currentWorkflow) return sourceNodeId;
+
+    // Find the source node by ID
+    const sourceNode = (currentWorkflow.nodes || []).find(
+      (node: Node) => node.id === sourceNodeId
+    );
+
+    if (!sourceNode) return sourceNodeId;
+
+    // Priority: node.data.label > displayName > nodeType > nodeId
+    const label = sourceNode.data?.label;
+    if (label && typeof label === 'string') {
+      // Normalize label: lowercase, remove spaces
+      return label.toLowerCase().replace(/\s+/g, '');
+    }
+
+    // Fallback to displayName from node definition
+    const nodeDef = nodeDefinitions[sourceNode.type || ''];
+    if (nodeDef?.displayName) {
+      return nodeDef.displayName.toLowerCase().replace(/\s+/g, '');
+    }
+
+    // Ultimate fallback: node type or ID
+    return (sourceNode.type || sourceNodeId).toLowerCase().replace(/\s+/g, '');
+  }, [currentWorkflow]);
+
+  const handleVariableDragStart = useCallback((
+    e: React.DragEvent,
+    sourceNodeId: string,
+    propertyPath: string,
+    value: any
+  ) => {
+    const templateName = getTemplateVariableName(sourceNodeId);
+    const variableTemplate = `{{${templateName}.${propertyPath}}}`;
+
+    e.dataTransfer.setData('text/plain', variableTemplate);
+    e.dataTransfer.setData('application/json', JSON.stringify({
+      type: 'nodeVariable',
+      nodeId: sourceNodeId,  // Include source node ID for reference
+      nodeName: templateName,
+      key: propertyPath,
+      variableTemplate,
+      dataType: typeof value
+    }));
+    e.dataTransfer.effectAllowed = 'copy';
+  }, [getTemplateVariableName]);
+
+  return {
+    handleVariableDragStart,
+    getTemplateVariableName
+  };
+};