@flowuent-org/diagramming-core 1.0.7 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowuent-org/diagramming-core",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/packages/diagrams/README.md

@@ -379,6 +379,22 @@ With `onNodeUpdate`:
 - ✅ Visual feedback as nodes execute
 - ✅ Proper React state synchronization
 
+**Important**: The engine creates new object references when calling `onNodeUpdate` to ensure React detects changes. Make sure your callback updates state properly:
+
+```typescript
+const handleNodeUpdate = (nodeId: string, updatedData: any) => {
+  setNodes((nds) =>
+    nds.map((node) => {
+      if (node.id === nodeId) {
+        // This creates a new node object with updated data
+        return { ...node, data: updatedData };
+      }
+      return node;
+    })
+  );
+};
+```
+
 ### Using AutomationExecutionEngine Directly
 
 You can also use the execution engine programmatically:

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

@@ -93,7 +93,12 @@ export class AutomationExecutionEngine {
 
     // Notify the parent component about the node update
     if (this.onNodeUpdate) {
-      this.onNodeUpdate(nodeId, node.data);
+      // Create new object reference with deep clone of formData so React detects the change
+      const updatedData = {
+        ...node.data,
+        ...(node.data.formData ? { formData: { ...node.data.formData } } : {}),
+      };
+      this.onNodeUpdate(nodeId, updatedData);
     }
   }
 
@@ -1094,22 +1099,28 @@ Execution Details:
 
         // Update node status to running
         (currentNode.data as Record<string, unknown>).status = 'Running';
-        if (this.onNodeUpdate)
-          this.onNodeUpdate(currentNode.id, currentNode.data);
+        if (this.onNodeUpdate) {
+          // Create new object reference so React detects the change
+          this.onNodeUpdate(currentNode.id, { ...currentNode.data });
+        }
 
         try {
           currentData = await this.executeNode(currentNode, currentData);
           (currentNode.data as Record<string, unknown>).status = 'Completed';
           (currentNode.data as Record<string, unknown>).lastRun =
             new Date().toISOString();
-          if (this.onNodeUpdate)
-            this.onNodeUpdate(currentNode.id, currentNode.data);
+          if (this.onNodeUpdate) {
+            // Create new object reference so React detects the change
+            this.onNodeUpdate(currentNode.id, { ...currentNode.data });
+          }
         } catch (error) {
           (currentNode.data as Record<string, unknown>).status = 'Error';
           (currentNode.data as Record<string, unknown>).lastRun =
             new Date().toISOString();
-          if (this.onNodeUpdate)
-            this.onNodeUpdate(currentNode.id, currentNode.data);
+          if (this.onNodeUpdate) {
+            // Create new object reference so React detects the change
+            this.onNodeUpdate(currentNode.id, { ...currentNode.data });
+          }
           throw error;
         }