Refactor add activity

src/designer/elsa-workflows-designer/src/components.d.ts

@@ -41,7 +41,7 @@ export namespace Components {
         "buttons": Array<Button>;
     }
     interface ElsaCanvas {
-        "addActivity": (args: AddActivityArgs) => Promise<void>;
+        "addActivity": (args: AddActivityArgs) => Promise<Activity>;
         "exportGraph": () => Promise<Activity>;
         "getRootComponent": () => Promise<ContainerActivityComponent>;
         "importGraph": (root: Activity) => Promise<void>;
@@ -83,7 +83,7 @@ export namespace Components {
         "inputContext": ActivityInputContext;
     }
     interface ElsaFlowchart {
-        "addActivity": (args: AddActivityArgs) => Promise<void>;
+        "addActivity": (args: AddActivityArgs) => Promise<Activity>;
         "export": () => Promise<Activity>;
         "getGraph": () => Promise<Graph>;
         "import": (root: Activity) => Promise<void>;

src/designer/elsa-workflows-designer/src/components/activities/container-activity-component.tsx

@@ -3,7 +3,7 @@ import {Activity} from '../../models';
 
 export interface ContainerActivityComponent {
   updateLayout(): Promise<void>;
-  addActivity(args: AddActivityArgs): Promise<void>;
+  addActivity(args: AddActivityArgs): Promise<Activity>;
   updateActivity(args: UpdateActivityArgs): Promise<void>;
   export(): Promise<Activity>
   import(root: Activity): Promise<void>;

src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx

@@ -5,7 +5,7 @@ import {v4 as uuid} from 'uuid';
 import {first} from 'lodash';
 import './shapes';
 import './ports';
-import {ActivityNode as ActivityNodeShape} from './shapes';
+import {ActivityNode, ActivityNode as ActivityNodeShape} from './shapes';
 import {ContainerActivityComponent} from '../container-activity-component';
 import {AddActivityArgs, UpdateActivityArgs} from '../../designer/canvas/canvas';
 import {Activity, ActivityDeletedArgs, ActivitySelectedArgs, ContainerSelectedArgs, GraphUpdatedArgs} from '../../../models';
@@ -81,7 +81,7 @@ export class FlowchartComponent implements ContainerActivityComponent {
   }
 
   @Method()
-  async addActivity(args: AddActivityArgs): Promise<void> {
+  async addActivity(args: AddActivityArgs): Promise<Activity> {
     const graph = this.graph;
     const {descriptor, x, y} = args;
     let id = args.id ?? uuid();
@@ -104,7 +104,8 @@ export class FlowchartComponent implements ContainerActivityComponent {
     };
 
     const node = this.nodeFactory.createNode(descriptor, activity, sx, sy);
-    graph.addNode(node);
+    graph.addNode(node, { merge: true});
+    return activity;
   }
 
   @Method()

src/designer/elsa-workflows-designer/src/components/designer/activity-templates/default-activity-template.tsx

@@ -102,10 +102,10 @@ export class DefaultActivityTemplate {
     );
   }
 
-  private renderPorts = (activity: Activity) => {
+  private renderPorts = (activity?: Activity) => {
 
     if (this.displayTypeIsPicker)
-      return undefined;
+      return;
 
     const activityDescriptor = this.activityDescriptor;
     const portProvider = this.portProviderRegistry.get(activityDescriptor.activityType);
@@ -113,7 +113,7 @@ export class DefaultActivityTemplate {
     const embeddedPorts = ports.filter(x => x.mode == PortMode.Embedded);
 
     if (embeddedPorts.length == 0)
-      return undefined;
+      return;
 
     return (
       <div class="activity-ports mt-2 flex space-x-2">

src/designer/elsa-workflows-designer/src/components/designer/canvas/canvas.tsx

@@ -30,8 +30,8 @@ export class Canvas {
   }
 
   @Method()
-  public async addActivity(args: AddActivityArgs): Promise<void> {
-    await this.root.addActivity(args);
+  public async addActivity(args: AddActivityArgs): Promise<Activity> {
+    return await this.root.addActivity(args);
   }
 
   @Method()

src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx

@@ -308,6 +308,7 @@ export class WorkflowDefinitionEditor {
         const parentActivitiesProp = parentActivity[portName] as Array<Activity>;
         parentActivitiesProp[currentWorkflowNavigationItem.index] = activity;
       } else {
+        debugger;
         currentActivity[portName] = activity;
       }
     } else {
@@ -386,20 +387,16 @@ export class WorkflowDefinitionEditor {
     const activityDescriptor: ActivityDescriptor = JSON.parse(json);
     const newName = await this.generateUniqueActivityName(activityDescriptor);
 
-    // Make sure the node hash is up to date so that it can be found by the activity template.
-    this.nodeMap[newName] = {
-      id: newName,
-      typeName: activityDescriptor.activityType,
-      metadata: {},
-      applicationProperties: {}
-    };
-
-    await this.canvas.addActivity({
+    const activity = await this.canvas.addActivity({
       descriptor: activityDescriptor,
       id: newName,
       x: e.pageX,
       y: e.pageY
     });
+
+    this.nodeMap[newName] = activity;
+
+    requestAnimationFrame(() => {});
   };
 
   private onZoomToFit = async () => await this.canvas.zoomToFit()