delete node and connection by keyboard

support delete selected node or connection by 'delete' key

Issue-ID: SDC-295

Change-Id: If4506331ad054b102c2ff70138adf2fc5e739e76
Signed-off-by: Lvbo163 <lv.bo163@zte.com.cn>

1 files changed, 23 insertions, 2 deletions

diff --git a/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts
index f4c0e214..5016b50a 100644
--- a/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts
@@ -10,7 +10,7 @@
  *     ZTE - initial API and implementation and/or initial documentation
  */
 
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, HostListener } from '@angular/core';
 
 import { BroadcastService } from '../../services/broadcast.service';
 import { JsPlumbService } from '../../services/jsplumb.service';
@@ -18,6 +18,9 @@ import { ActivatedRoute } from "@angular/router";
 import { DataAccessService } from "../../services/data-access/data-access.service";
 import { WorkflowService } from "../../services/workflow.service";
 import { Workflow } from "../../model/workflow/workflow";
+import { WorkflowProcessService } from "../../services/workflow-process.service";
+import { SequenceFlow } from "../../model/workflow/sequence-flow";
+import { WorkflowNode } from "../../model/workflow/workflow-node";
 
 /**
  * main canvas, it contains two parts: canvas and node property component
@@ -29,12 +32,17 @@ import { Workflow } from "../../model/workflow/workflow";
     templateUrl: 'canvas.component.html',
 })
 export class CanvasComponent implements AfterViewInit {
+    private currentType: string; // WorkflowNode, SequenceFlow
+    private currentWorkflowNode: WorkflowNode;
+    private currentSequenceFlow: SequenceFlow;
+
 
     constructor(private broadcastService: BroadcastService,
         private dataAccessService: DataAccessService,
         private jsPlumbService: JsPlumbService,
         private route: ActivatedRoute,
-        private workflowService: WorkflowService) {
+        private workflowService: WorkflowService,
+        private processService: WorkflowProcessService) {
     }
 
     ngOnInit(): void {
@@ -49,6 +57,9 @@ export class CanvasComponent implements AfterViewInit {
 
     public ngAfterViewInit() {
         this.jsPlumbService.buttonDroppable();
+        this.broadcastService.currentSequenceFlow$.subscribe(sequenceFlow => this.currentSequenceFlow = sequenceFlow);
+        this.broadcastService.currentWorkflowNode$.subscribe(workflowNode => this.currentWorkflowNode = workflowNode);
+        this.broadcastService.currentType$.subscribe(type => this.currentType = type);
     }
 
     public canvasClick() {
@@ -56,6 +67,16 @@ export class CanvasComponent implements AfterViewInit {
         this.broadcastService.broadcast(this.broadcastService.showSequenceFlow, false);
     }
 
+    @HostListener('window:keyup.delete', ['$event']) ondelete(event: KeyboardEvent) {
+        if (this.currentType === 'WorkflowNode') {
+            this.jsPlumbService.remove(this.currentWorkflowNode.id);
+            this.processService.deleteNode(this.currentWorkflowNode.id);
+        } else if (this.currentType === 'SequenceFlow') {
+            this.processService.deleteSequenceFlow(this.currentSequenceFlow.sourceRef, this.currentSequenceFlow.targetRef);
+            this.jsPlumbService.deleteConnect(this.currentSequenceFlow.sourceRef, this.currentSequenceFlow.targetRef);
+        }
+    }
+
 
     public getWorkflow(): Workflow {
         return this.workflowService.workflow;