From 4c8a982054012f0294b38947ccd85935b9b011f5 Mon Sep 17 00:00:00 2001
From: Sipke Schoorstra <sipkeschoorstra@outlook.com>
Date: Mon, 26 Jul 2021 13:41:28 +0200
Subject: [PATCH] Publish workflow model changed event via event bus

---
 .../pages/elsa-studio-root/elsa-studio-root.tsx   |  9 +++++++--
 .../elsa-activity-editor-modal.tsx                | 15 ++++++---------
 src/designer/elsa-workflows-studio/src/index.html | 15 ++++++++++++++-
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-root/elsa-studio-root.tsx b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-root/elsa-studio-root.tsx
index c3398b5be..943b04e17 100644
--- a/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-root/elsa-studio-root.tsx
+++ b/src/designer/elsa-workflows-studio/src/components/dashboard/pages/elsa-studio-root/elsa-studio-root.tsx
@@ -1,6 +1,6 @@
-import {Component, Event, EventEmitter, h, Method, Prop} from '@stencil/core';
+import {Component, Event, EventEmitter, h, Listen, Method, Prop} from '@stencil/core';
 import Tunnel, {DashboardState} from "../../../../data/dashboard";
-import {ElsaStudio} from "../../../../models";
+import {ElsaStudio, WorkflowModel} from "../../../../models";
 import {eventBus, pluginManager, activityIconProvider, confirmDialogService, toastNotificationService, createElsaClient, createHttpClient, ElsaClient, propertyDisplayManager} from "../../../../services";
 import {AxiosInstance} from "axios";
 import {EventTypes} from "../../../../models";
@@ -32,6 +32,11 @@ export class ElsaStudioRoot {
     pluginManager.registerPlugin(pluginType);
   }
 
+  @Listen('workflow-changed')
+  workflowChangedHandler(event: CustomEvent<WorkflowModel>) {
+    eventBus.emit(EventTypes.WorkflowModelChanged, this, event.detail);
+  }
+
   connectedCallback() {
     eventBus.on(EventTypes.ShowConfirmDialog, this.onShowConfirmDialog);
     eventBus.on(EventTypes.HideConfirmDialog, this.onHideConfirmDialog);
diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-activity-editor-modal/elsa-activity-editor-modal.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-activity-editor-modal/elsa-activity-editor-modal.tsx
index d23554f78..8ed31863e 100644
--- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-activity-editor-modal/elsa-activity-editor-modal.tsx
+++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-activity-editor-modal/elsa-activity-editor-modal.tsx
@@ -29,10 +29,7 @@ export class ElsaActivityEditorModal {
   timestamp: Date = new Date();
 
   connectedCallback() {
-    const t = this.t;
-
     this.propertyElements = [];
-
     eventBus.on(EventTypes.ShowActivityEditor, this.onShowActivityEditor);
   }
 
@@ -59,21 +56,21 @@ export class ElsaActivityEditorModal {
     await this.dialog.hide(true);
   }
 
-  async onSubmit(e: Event) {
+  onSubmit = async (e: Event) => {
     e.preventDefault();
     const form: any = e.target;
     const formData = new FormData(form);
     this.updateActivity(formData);
     eventBus.emit(EventTypes.UpdateActivity, this, this.activityModel);
     await this.dialog.hide(true);
-  }
+  };
 
-  onTabClick(e: Event, tab: string) {
+  onTabClick = (e: Event, tab: string) => {
     e.preventDefault();
     this.selectedTab = tab;
-  }
+  };
 
-  async onShowActivityEditor(activity: ActivityModel, animate: boolean){
+  onShowActivityEditor = async (activity: ActivityModel, animate: boolean) => {
     const t = this.t;
     this.activityModel = JSON.parse(JSON.stringify(activity));
     this.activityDescriptor = state.activityDescriptors.find(x => x.type == activity.type);
@@ -82,7 +79,7 @@ export class ElsaActivityEditorModal {
     this.selectedTab = t('Properties');
     this.timestamp = new Date();
     await this.dialog.show(animate);
-  }
+  };
 
   componentWillRender() {
     const activityDescriptor: ActivityDescriptor = this.activityDescriptor || {displayName: '', type: '', outcomes: [], category: '', traits: 0, browsable: false, inputProperties: [], outputProperties: [], description: ''};
diff --git a/src/designer/elsa-workflows-studio/src/index.html b/src/designer/elsa-workflows-studio/src/index.html
index a0c3ed193..fd277f18b 100644
--- a/src/designer/elsa-workflows-studio/src/index.html
+++ b/src/designer/elsa-workflows-studio/src/index.html
@@ -83,6 +83,14 @@
             console.log('workflow-imported');
         });
     }
+    
+    function WorkflowModelChangedListenerPlugin(elsaStudio){
+        const {eventBus} = elsaStudio;
+        
+        eventBus.on('workflow-model-changed', e => {
+            console.log(`Workflow model changed. New model: ${e}`)
+        });
+    }
 
     // Custom activity property type input control driver:
     function CustomPropertyFieldDriver(elsaStudio) {
@@ -158,8 +166,13 @@
     // Alternatively, configure Elsa during the 'initializing' event.
     elsaStudioRoot.addEventListener('initializing', e => {
         const elsa = e.detail;
-        elsa.pluginManager.registerPlugins([CustomReadLinePlugin, CustomBulkActionsPlugin, CustomHttpMiddlewarePlugin, CustomPropertyFieldPlugin]);
+        elsa.pluginManager.registerPlugins([CustomReadLinePlugin, CustomBulkActionsPlugin, CustomHttpMiddlewarePlugin, CustomPropertyFieldPlugin, WorkflowModelChangedListenerPlugin]);
     });
+    
+    // Some components publish DOM events that we can handle directly:
+    elsaStudioRoot.addEventListener('workflow-changed', e => {
+        console.log('Workflow model changed! New model: ${e.detail}');
+    })
 </script>
 
 </body>