Add wwwroot contents

src/dashboards/blazor/ElsaDashboard.Application.Server/Pages/_Host.cshtml

@@ -16,7 +16,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-    <link rel="stylesheet" href="/tailwind.css">
+    <link href="_content/ElsaDashboard.Application/tailwind.css" rel="stylesheet" />
     <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
     <link href="ElsaDashboard.Application.Server.styles.css" rel="stylesheet"/>
     <script src="https://cdn.jsdelivr.net/npm/@@ryangjchandler/spruce@2.0.1/dist/spruce.umd.js"></script>

src/dashboards/blazor/ElsaDashboard.Application/wwwroot/flyoutPanel.js

@@ -0,0 +1,7 @@
+export function show(){
+    Spruce.store('flyoutPanel').show = true;
+}
+
+export function hide(){
+    Spruce.store('flyoutPanel').show = false;
+}

src/dashboards/blazor/ElsaDashboard.Application/wwwroot/store.js

@@ -0,0 +1,4 @@
+
+Spruce.store('flyoutPanel', {
+    show: false,
+});

src/dashboards/blazor/ElsaDashboard.Application/wwwroot/workflowDesigner.js

@@ -0,0 +1,86 @@
+import 'https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.0/js/jsplumb.min.js';
+
+let jsPlumbInstance = null;
+let currentConnections = [];
+let currentSourceEndpoints = [];
+let currentTargets = [];
+
+function onConnectionCreated(e) {
+    const source = e.sourceEndpoint;
+    const target = e.targetEndpoint;
+
+    const model = {
+        SourceId: source.getParameter('sourceActivityId'),
+        TargetId: target.getParameter('targetActivityId'),
+        Outcome: source.getParameter('outcome')
+    }
+
+    console.log(`Connection created between ${model.SourceId}:${model.Outcome} and ${model.TargetId}.`);
+    DotNet.invokeMethodAsync('ElsaDashboard.Application', 'InvokeConnectionCreated', model);
+}
+
+function onConnectionClick(connection) {
+
+}
+
+export function destroy() {
+    if (jsPlumbInstance != null) {
+        console.debug("Destroying JsPlumb instance");
+        jsPlumbInstance.reset();
+        jsPlumbInstance.unbind("connection", onConnectionCreated);
+    }
+}
+
+export function updateConnections(connections, sourceEndpoints, targets) {
+
+    destroy();
+
+    jsPlumbInstance = jsPlumb.getInstance({
+        Container: '#workflow-canvas .canvas',
+        Connector: ['Flowchart', {cornerRadius: 5}],
+        Anchors: ['Bottom', 'Top', 'Left', 'Right'],
+        Endpoint: ['Dot', {radius: 5}],
+    });
+
+    jsPlumbInstance.batch(function () {
+
+        for (const connection of connections) {
+            const jsPlumbConnection = jsPlumbInstance.connect({
+                source: connection.sourceId,
+                target: connection.targetId,
+                endpoint: 'Blank',
+                paintStyle: {lineWidth: 15, strokeStyle: 'rgb(243,230,18)'},
+                detachable: true,
+                parameters: {
+                    sourceActivityId: connection.sourceActivityId,
+                    targetActivityId: connection.targetActivityId,
+                    outcome: connection.outcome
+                }
+            });
+        }
+
+        for (const endpoint of sourceEndpoints) {
+            jsPlumbInstance.makeSource(endpoint.sourceId, {
+                anchor: ['Bottom', 'Top', 'Left', 'Right'],
+                endpoint: 'Blank',
+                maxConnections: 1,
+                parameters: {
+                    sourceActivityId: endpoint.sourceActivityId,
+                    outcome: endpoint.outcome
+                }
+            });
+        }
+
+        for (const target of targets) {
+            jsPlumbInstance.makeTarget(target.targetId, {
+                anchor: ['Bottom', 'Top', 'Left', 'Right'],
+                endpoint: 'Blank',
+                parameters: {
+                    targetActivityId: target.targetActivityId
+                }
+            });
+        }
+    });
+
+    jsPlumbInstance.bind("connection", onConnectionCreated);
+}