Implement persistence of manually created connections

src/designer/elsa-workflows-studio/package.json

@@ -23,7 +23,7 @@
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
-    "build:tailwind": "tailwind build ./tailwind.css -o ./src/globals/tailwind.css"
+    "build:tailwind": "tailwind build ./tailwind.css -o ./src/globals/tailwind.css & copyfiles -u 2 \"./src/globals/tailwind.css\" \"./src/assets\""
   },
   "dependencies": {
     "@fullhuman/postcss-purgecss": "^4.0.2",
@@ -37,6 +37,7 @@
     "axios": "^0.21.1",
     "cssnano": "^4.1.10",
     "el-transition": "^0.0.7",
+    "eslint": "7.20.0",
     "js-event-bus": "^1.0.3",
     "jsplumb": "2.15.5",
     "monaco-editor": "^0.22.3",
@@ -45,11 +46,13 @@
     "postcss-preset-env": "^6.7.0",
     "stencil-click-outside": "^1.7.1",
     "tailwindcss": "2.0.3",
-    "eslint": "7.20.0",
     "tslint": "6.1.3",
     "tslint-stencil": "1.0.1",
     "typescript": "4.2.2",
     "typescript-tslint-plugin": "1.0.1"
   },
+  "devDependencies": {
+    "copyfiles": "^2.4.1"
+  },
   "license": "MIT"
 }

src/designer/elsa-workflows-studio/src/assets/tailwind.css

@@ -51915,6 +51915,13 @@ svg.jtk-connector path {
   color: rgba(159, 166, 178, var(--tw-text-opacity));
 }
 
+svg.jtk-connector.jtk-hover path {
+  stroke: currentColor;
+  stroke-width: 2;
+  --tw-text-opacity: 1;
+  color: rgba(118, 169, 250, var(--tw-text-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:container {
     width: 100%;

src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx

@@ -83,7 +83,7 @@ export class ElsaWorkflowDesigner {
     const sourceEndpoints = this.getJsPlumbSourceEndpoints();
     const targets = this.getJsPlumbTargets();
 
-    updateConnections(canvasElement, connections, sourceEndpoints, targets);
+    updateConnections(canvasElement, connections, sourceEndpoints, targets, (sourceId, targetId, outcome) => this.onConnectionCreated(sourceId, targetId, outcome));
   }
 
   disconnectedCallback() {
@@ -198,6 +198,14 @@ export class ElsaWorkflowDesigner {
     this.workflowChanged.emit(model);
   }
 
+  onConnectionCreated(sourceActivityId: string, targetActivityId: string, outcome: string) {
+    const newConnection: ConnectionModel = {sourceId: sourceActivityId, targetId: targetActivityId, outcome: outcome};
+    const workflowModel = {...this.workflowModel};
+    workflowModel.connections = [...workflowModel.connections, newConnection];
+
+    this.updateWorkflowModel(workflowModel);
+  }
+
   onAddButtonClick() {
     this.showActivityPicker();
   }

src/designer/elsa-workflows-studio/src/globals/tailwind.css

@@ -51915,6 +51915,13 @@ svg.jtk-connector path {
   color: rgba(159, 166, 178, var(--tw-text-opacity));
 }
 
+svg.jtk-connector.jtk-hover path {
+  stroke: currentColor;
+  stroke-width: 2;
+  --tw-text-opacity: 1;
+  color: rgba(118, 169, 250, var(--tw-text-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:container {
     width: 100%;

src/designer/elsa-workflows-studio/src/utils/jsplumb-helper.ts

@@ -1,20 +1,17 @@
 import {jsPlumb} from 'jsplumb';
 
-let count = 0;
 let jsPlumbInstance = null;
 
-function onConnectionCreated(e) {
+function onConnectionCreated(e, callback) {
   const source = e.sourceEndpoint;
   const target = e.targetEndpoint;
 
-  const model = {
-    SourceId: source.getParameter('sourceActivityId'),
-    TargetId: target.getParameter('targetActivityId'),
-    Outcome: source.getParameter('outcome')
-  }
+  const sourceId = source.getParameter('sourceActivityId');
+  const targetId = target.getParameter('targetActivityId');
+  const outcome = source.getParameter('outcome');
 
-  console.log(`Connection created between ${model.SourceId}:${model.Outcome} and ${model.TargetId}.`);
-  //DotNet.invokeMethodAsync('ElsaDashboard.Application', 'InvokeConnectionCreated', model);
+  debugger;
+  callback(sourceId, targetId, outcome);
 }
 
 function onConnectionClick(connection) {
@@ -27,15 +24,19 @@ export function cleanup() {
 
 export function destroy() {
   if (jsPlumbInstance != null) {
-    jsPlumbInstance.unbind("connection", onConnectionCreated);
-    jsPlumbInstance.unmakeEverySource(); // Ensures all mouse event handlers are removed.
-    jsPlumbInstance.unmakeEveryTarget();
-    jsPlumbInstance.reset();
+
+    jsPlumbInstance.batch(() => {
+      jsPlumbInstance.unbind("connection", onConnectionCreated);
+      jsPlumbInstance.unmakeEverySource(); // Ensures all mouse event handlers are removed.
+      jsPlumbInstance.unmakeEveryTarget();
+      jsPlumbInstance.reset();
+    });
+
     jsPlumbInstance = null;
   }
 }
 
-export function updateConnections(container, connections, sourceEndpoints, targets) {
+export function updateConnections(container, connections, sourceEndpoints, targets, connectionCreatedCallback) {
 
   destroy();
 
@@ -46,8 +47,6 @@ export function updateConnections(container, connections, sourceEndpoints, targe
     Endpoint: ['Dot', {radius: 5}]
   });
 
-  (jsPlumbInstance as any).MyCount = ++count;
-
   jsPlumbInstance.ready(() => {
 
     jsPlumbInstance.batch(function () {
@@ -80,7 +79,7 @@ export function updateConnections(container, connections, sourceEndpoints, targe
 
       for (const target of targets) {
         jsPlumbInstance.makeTarget(target.targetId, {
-          anchor: ['Bottom', 'Top', 'Left', 'Right'],
+          anchor: ['Left', 'Right'],
           endpoint: 'Blank',
           parameters: {
             targetActivityId: target.targetActivityId
@@ -89,6 +88,6 @@ export function updateConnections(container, connections, sourceEndpoints, targe
       }
     });
 
-    jsPlumbInstance.bind("connection", onConnectionCreated);
+    jsPlumbInstance.bind("connection", e => onConnectionCreated(e, connectionCreatedCallback));
   });
 }

src/designer/elsa-workflows-studio/tailwind.css

@@ -6,3 +6,9 @@ svg.jtk-connector path {
   @apply stroke-current;
   @apply text-gray-400;
 }
+
+svg.jtk-connector.jtk-hover path {
+  @apply stroke-current;
+  @apply stroke-2;
+  @apply text-blue-400;
+}

src/server/Elsa.Server.Api/Endpoints/WorkflowDefinitions/Save.cs

@@ -1,4 +1,6 @@
-using System.Threading;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading;
 using System.Threading.Tasks;
 using Elsa.Models;
 using Elsa.Server.Api.Swagger.Examples;
@@ -47,7 +49,7 @@ namespace Elsa.Server.Api.Endpoints.WorkflowDefinitions
             }
 
             workflowDefinition.Activities = request.Activities;
-            workflowDefinition.Connections = request.Connections;
+            workflowDefinition.Connections = FilterInvalidConnections(request).ToList();
             workflowDefinition.Description = request.Description?.Trim();
             workflowDefinition.Name = request.Name?.Trim();
             workflowDefinition.Variables = request.Variables ?? new Variables();
@@ -64,5 +66,17 @@ namespace Elsa.Server.Api.Endpoints.WorkflowDefinitions
 
             return CreatedAtAction("Handle", "GetByVersionId", new { versionId = workflowDefinition.Id, apiVersion = apiVersion.ToString() }, workflowDefinition);
         }
+
+        private IEnumerable<ConnectionDefinition> FilterInvalidConnections(SaveRequest request)
+        {
+            var validConnections =
+                from connection in request.Connections
+                let sourceActivity = request.Activities.FirstOrDefault(x => x.ActivityId == connection.SourceActivityId)
+                let targetActivity = request.Activities.FirstOrDefault(x => x.ActivityId == connection.TargetActivityId)
+                where sourceActivity != null && targetActivity != null
+                select connection;
+
+            return validConnections;
+        }
     }
 }