From 09b05e10b994512d32b499211c5e949dbd73cfe4 Mon Sep 17 00:00:00 2001
From: Sipke Schoorstra <sipkeschoorstra@outlook.com>
Date: Wed, 6 Jul 2022 22:58:48 +0200
Subject: [PATCH] Refactor add activity

---
 .../elsa-workflows-designer/src/components.d.ts   |  4 ++--
 .../activities/container-activity-component.tsx   |  2 +-
 .../components/activities/flowchart/flowchart.tsx |  7 ++++---
 .../default-activity-template.tsx                 |  6 +++---
 .../src/components/designer/canvas/canvas.tsx     |  4 ++--
 .../workflow-definition-editor.tsx                | 15 ++++++---------
 6 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts
index 11f273308..08f192fd2 100644
--- a/src/designer/elsa-workflows-designer/src/components.d.ts
+++ b/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>;
diff --git a/src/designer/elsa-workflows-designer/src/components/activities/container-activity-component.tsx b/src/designer/elsa-workflows-designer/src/components/activities/container-activity-component.tsx
index 79b578bc7..bb014835b 100644
--- a/src/designer/elsa-workflows-designer/src/components/activities/container-activity-component.tsx
+++ b/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>;
diff --git a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx
index f31f1a335..e8193e9ca 100644
--- a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx
+++ b/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()
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/activity-templates/default-activity-template.tsx b/src/designer/elsa-workflows-designer/src/components/designer/activity-templates/default-activity-template.tsx
index 5e1138d36..a337621c3 100644
--- a/src/designer/elsa-workflows-designer/src/components/designer/activity-templates/default-activity-template.tsx
+++ b/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">
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/canvas/canvas.tsx b/src/designer/elsa-workflows-designer/src/components/designer/canvas/canvas.tsx
index 05a806229..14ab5c7cc 100644
--- a/src/designer/elsa-workflows-designer/src/components/designer/canvas/canvas.tsx
+++ b/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()
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx
index 7c1ca9c81..6ddef7e38 100644
--- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx
+++ b/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()