From 07dbeb52ed7f40436b0f536d8c19cd5d6e848818 Mon Sep 17 00:00:00 2001
From: Sipke Schoorstra <sipkeschoorstra@outlook.com>
Date: Thu, 28 Apr 2022 11:06:16 +0200
Subject: [PATCH] Implement updatable activity node shape

---
 .../src/components/activities/flowchart/flowchart.tsx    | 4 +++-
 .../src/components/activities/flowchart/shapes.ts        | 7 ++++---
 .../src/components/shared/context-menu/context-menu.tsx  | 2 --
 .../src/drivers/activity/default-activity-driver.tsx     | 9 ++++++---
 4 files changed, 13 insertions(+), 9 deletions(-)

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 c0032a522..4664a8799 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,6 +5,7 @@ import {v4 as uuid} from 'uuid';
 import {first} from 'lodash';
 import './shapes';
 import './ports';
+import {ActivityNode as ActivityNodeShape} from './shapes';
 import {ContainerActivityComponent} from '../container-activity-component';
 import {AddActivityArgs} from '../../designer/canvas/canvas';
 import {Activity, ActivityDescriptor, ActivitySelectedArgs, ContainerSelectedArgs, GraphUpdatedArgs} from '../../../models';
@@ -188,7 +189,6 @@ export class FlowchartComponent implements ContainerActivityComponent {
       }
     }
 
-    debugger;
     let rootActivity = activities.find(activity => {
       const hasInboundConnections = connections.find(c => c.target == activity.id) != null;
       return !hasInboundConnections;
@@ -356,6 +356,7 @@ export class FlowchartComponent implements ContainerActivityComponent {
   };
 
   private onNodeContextMenu = async (e: PositionEventArgs<JQuery.ContextMenuEvent>) => {
+    const node = e.node as ActivityNodeShape;
     const activity = e.node.data as Activity;
     const canStartWorkflow = activity.canStartWorkflow;
 
@@ -363,6 +364,7 @@ export class FlowchartComponent implements ContainerActivityComponent {
       text: 'Startable',
       clickHandler: () => {
         activity.canStartWorkflow = !activity.canStartWorkflow;
+        node.activity = {...activity};
         this.onGraphChanged();
       },
       isToggle: true,
diff --git a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/shapes.ts b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/shapes.ts
index 4cb0f13bf..bb07a5a35 100644
--- a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/shapes.ts
+++ b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/shapes.ts
@@ -12,7 +12,7 @@ export class ActivityNode extends Shape.HTML {
     this.store.set('text', value);
   }
 
-  get activity() {
+  get activity(): Activity {
     return this.store.get<Activity>('activity');
   }
 
@@ -20,7 +20,7 @@ export class ActivityNode extends Shape.HTML {
     this.store.set('activity', value);
   }
 
-  get activityDescriptor() {
+  get activityDescriptor(): ActivityDescriptor {
     return this.store.get<ActivityDescriptor>('activityDescriptor');
   }
 
@@ -37,6 +37,7 @@ export class ActivityNode extends Shape.HTML {
     const self = this;
     super.setup();
     this.on('change:text', this.updateSize, this);
+    this.on('change:activity', this.updateSize, this);
 
     this.html = {
       render() {
@@ -45,7 +46,7 @@ export class ActivityNode extends Shape.HTML {
 
       },
       shouldComponentUpdate(node: Cell) {
-        return node.hasChanged('text');
+        return node.hasChanged('text') || node.hasChanged('activity');
       },
     };
   }
diff --git a/src/designer/elsa-workflows-designer/src/components/shared/context-menu/context-menu.tsx b/src/designer/elsa-workflows-designer/src/components/shared/context-menu/context-menu.tsx
index 2ae1bff2a..7b4351fe5 100644
--- a/src/designer/elsa-workflows-designer/src/components/shared/context-menu/context-menu.tsx
+++ b/src/designer/elsa-workflows-designer/src/components/shared/context-menu/context-menu.tsx
@@ -48,7 +48,6 @@ export class ContextMenu {
   }
 
   private async onMenuItemClick(e: MouseEvent, menuItem: MenuItem) {
-    debugger;
     e.preventDefault();
 
     if (!!menuItem.clickHandler)
@@ -77,7 +76,6 @@ export class ContextMenu {
   };
 
   render() {
-
     const anchorPointClass = this.getAnchorPointClass();
     const menuItems = this.menuItems;
     const hasAnyIcons = menuItems.find(x => !!x.icon) != null;
diff --git a/src/designer/elsa-workflows-designer/src/drivers/activity/default-activity-driver.tsx b/src/designer/elsa-workflows-designer/src/drivers/activity/default-activity-driver.tsx
index d1a333270..eff909b8b 100644
--- a/src/designer/elsa-workflows-designer/src/drivers/activity/default-activity-driver.tsx
+++ b/src/designer/elsa-workflows-designer/src/drivers/activity/default-activity-driver.tsx
@@ -16,10 +16,13 @@ export class DefaultActivityDriver implements ActivityDriver {
     const iconRegistry = this.iconRegistry;
     const activityDescriptor = context.activityDescriptor;
     const activityType = activityDescriptor.activityType;
+    const activity = context.activity;
+    const canStartWorkflow = activity?.canStartWorkflow;
     const text = activityDescriptor?.displayName;
     const isTrigger = (activityDescriptor?.traits & ActivityTraits.Trigger) == ActivityTraits.Trigger;
-    const borderColor = 'border-gray-300'; //isTrigger ? 'border-green-600' : 'border-blue-600';
-    const backgroundColor = 'bg-white'; // isTrigger ? 'bg-green-400' : 'bg-blue-400';
+    const borderColor = canStartWorkflow ? isTrigger ? 'border-green-600' : 'border-blue-600' : 'border-gray-300';
+    const backgroundColor = canStartWorkflow ? isTrigger ? 'bg-green-400' : 'bg-blue-400' : 'bg-white';
+    const textColor = canStartWorkflow ? 'text-white' : 'text-gray-700';
     const iconBackgroundColor = isTrigger ? 'bg-green-500' : 'bg-blue-500';
     const icon = iconRegistry.has(activityType) ? iconRegistry.get(activityType) : null;
 
@@ -32,7 +35,7 @@ export class DefaultActivityDriver implements ActivityDriver {
                 </div>
                 <div class="flex items-center">
                   <div class="px-4 py-4">
-                    <span class="text-gray-700">${text}</span>
+                    <span class=${textColor}>${text}</span>
                   </div>
                 </div>
               </div>