Publish workflow model changed event via event bus

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);

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: ''};

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>