Added multi delete. (#1594)

src/designer/elsa-workflows-studio/src/components.d.ts

@@ -53,6 +53,7 @@ export namespace Components {
         "mode": WorkflowDesignerMode;
         "model": WorkflowModel;
         "removeActivity": (activity: ActivityModel) => Promise<void>;
+        "removeSelectedActivities": () => Promise<void>;
         "selectedActivityIds": Array<string>;
         "showActivityEditor": (activity: ActivityModel, animate: boolean) => Promise<void>;
     }

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

@@ -64,6 +64,7 @@ export class ElsaWorkflowDesigner {
     x: 0,
     y: 0,
     activity: null,
+    selectedActivities: {}
   };
 
   @State() connectionContextMenuState: ActivityContextMenuState = {
@@ -148,6 +149,17 @@ export class ElsaWorkflowDesigner {
     this.removeActivityInternal(activity);
   }
 
+  @Method()
+  async removeSelectedActivities() {
+    let model = {...this.workflowModel};
+
+    Object.keys(this.selectedActivities).forEach((key) => {
+      model = this.removeActivityInternal(this.selectedActivities[key], model);
+    });
+
+    this.updateWorkflowModel(model);
+  }
+
   @Method()
   async showActivityEditor(activity: ActivityModel, animate: boolean) {
     await this.showActivityEditorInternal(activity, animate);
@@ -348,8 +360,8 @@ export class ElsaWorkflowDesigner {
     return model;
   }
 
-  removeActivityInternal(activity: ActivityModel) {
-    let workflowModel = {...this.workflowModel};
+  removeActivityInternal(activity: ActivityModel, model?: WorkflowModel) {
+    let workflowModel = model || {...this.workflowModel};
     const incomingConnections = getInboundConnections(workflowModel, activity.activityId);
     const outgoingConnections = getOutboundConnections(workflowModel, activity.activityId);
 
@@ -374,7 +386,14 @@ export class ElsaWorkflowDesigner {
           });
       }
     }
-    this.updateWorkflowModel(workflowModel);
+
+    delete this.selectedActivities[activity.activityId];
+
+    if (!model) {
+      this.updateWorkflowModel(workflowModel);
+    }
+
+    return workflowModel;
   }
 
   newActivity(activityDescriptor: ActivityDescriptor): ActivityModel {
@@ -777,7 +796,13 @@ export class ElsaWorkflowDesigner {
           .select('.context-menu-button-container button')
           .on('click', evt => {
             evt.stopPropagation();
-            this.handleContextMenuChange({x: evt.clientX, y: evt.clientY, shown: true, activity: node.activity});
+            this.handleContextMenuChange({
+              x: evt.clientX,
+              y: evt.clientY,
+              shown: true,
+              activity: node.activity,
+              selectedActivities: this.selectedActivities
+            });
           });
       }
     });

src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/models.ts

@@ -1,4 +1,5 @@
-import {ActivityModel, WorkflowFault} from "../../../../models";
+import {ActivityModel} from "../../../../models";
+import {Map} from "../../../../utils/utils";
 
 export enum WorkflowDesignerMode {
   Edit,
@@ -11,9 +12,10 @@ export interface ActivityContextMenuState {
   x: number;
   y: number;
   activity?: ActivityModel | null;
+  selectedActivities?: Map<ActivityModel> ;
 }
 
 export enum LayoutDirection {
   Horizontal,
   Vertical
-}
+}

src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-screen/elsa-workflow-definition-editor-screen.tsx

@@ -22,6 +22,7 @@ import {registerClickOutside} from "stencil-click-outside";
 import {i18n} from "i18next";
 import {loadTranslations} from "../../../i18n/i18n-loader";
 import {resources} from "./localizations";
+import {Map} from "../../../../utils/utils";
 
 @Component({
   tag: 'elsa-workflow-definition-editor-screen',
@@ -51,6 +52,7 @@ export class ElsaWorkflowDefinitionEditorScreen {
     x: 0,
     y: 0,
     activity: null,
+    selectedActivities: {}
   };
 
   @State() connectionContextMenuState: ActivityContextMenuState = {
@@ -364,8 +366,15 @@ export class ElsaWorkflowDefinitionEditorScreen {
 
   async onDeleteActivityClick(e: Event) {
     e.preventDefault();
-    await this.designer.removeActivity(this.activityContextMenuState.activity);
-    this.handleContextMenuChange({x: 0, y: 0, shown: false, activity: null});
+    const {activity, selectedActivities} = this.activityContextMenuState;
+
+    if (selectedActivities[activity.activityId]) {
+      await this.designer.removeSelectedActivities();
+    } else {
+      await this.designer.removeActivity(activity);
+    }
+
+    this.handleContextMenuChange({x: 0, y: 0, shown: false, activity: null, selectedActivities: {}});
     await eventBus.emit(EventTypes.HideModalDialog);
   }
 
@@ -460,6 +469,8 @@ export class ElsaWorkflowDefinitionEditorScreen {
 
   renderActivityContextMenu() {
     const t = this.t;
+    const selectedActivities = Object.keys(this.activityContextMenuState.selectedActivities);
+    const {activity} = this.activityContextMenuState;
 
     return <div
       data-transition-enter="elsa-transition elsa-ease-out elsa-duration-100"
@@ -472,7 +483,7 @@ export class ElsaWorkflowDefinitionEditorScreen {
       style={{left: `${this.activityContextMenuState.x}px`, top: `${this.activityContextMenuState.y}px`}}
       ref={el =>
         registerClickOutside(this, el, () => {
-          this.handleContextMenuChange({x: 0, y: 0, shown: false, activity: null});
+          this.handleContextMenuChange({x: 0, y: 0, shown: false, activity: null, selectedActivities: {}});
         })
       }
     >
@@ -494,7 +505,7 @@ export class ElsaWorkflowDefinitionEditorScreen {
             href="#"
             class="elsa-block elsa-px-4 elsa-py-2 elsa-text-sm elsa-leading-5 elsa-text-gray-700 hover:elsa-bg-gray-100 hover:elsa-text-gray-900 focus:elsa-outline-none focus:elsa-bg-gray-100 focus:elsa-text-gray-900"
             role="menuitem">
-            {t('ActivityContextMenu.Delete')}
+            {(selectedActivities.length > 1 && selectedActivities.indexOf(activity.activityId) !== -1) ? t('ActivityContextMenu.DeleteSelected') : t('ActivityContextMenu.Delete')}
           </a>
         </div>
       </div>

src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-screen/localizations.ts

@@ -5,7 +5,8 @@
       'Published': 'Published',
       "ActivityContextMenu":{
         "Edit": "Edit",
-        "Delete": "Delete"
+        "Delete": "Delete",
+        "DeleteSelected": "Delete Selected"
       },
       "ConnectionContextMenu":{
         "Paste": "Paste",
@@ -18,11 +19,12 @@
       'Published': 'Gepubliceerd',
       "ActivityContextMenu":{
         "Edit": "Bewerken",
-        "Delete": "Verwijderen"
+        "Delete": "Verwijderen",
+        "DeleteSelected": "Verwijder Geselecteerde"
       },
       "ConnectionContextMenu":{
         "Paste": "Plakken",
       }
     }
   }
-};
+};