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>

4 files changed, 68 insertions, 5 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;
diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.css b/sdc-workflow-designer-ui/src/app/components/node/node.component.css
index 0d01835f..1498fcea 100644
--- a/sdc-workflow-designer-ui/src/app/components/node/node.component.css
+++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.css
@@ -18,6 +18,16 @@
     z-index: 2;

 }

 

+

+.node.active {

+    border: 2px solid red !important;

+    box-shadow: 2px 2px 19px #444;

+    -o-box-shadow: 2px 2px 19px #444;

+    -webkit-box-shadow: 2px 2px 19px #444;

+    -moz-box-shadow: 2px 2px 19px #fff;

+    opacity: 0.9;

+}

+

 .node:hover {

     border: 1px solid #123456;

     box-shadow: 2px 2px 19px #444;

diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.html b/sdc-workflow-designer-ui/src/app/components/node/node.component.html
index 62cd6f51..d4c59d68 100644
--- a/sdc-workflow-designer-ui/src/app/components/node/node.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.html
@@ -11,7 +11,10 @@
  *     ZTE - initial API and implementation and/or initial documentation

  */

 -->

-<div (dblclick)="showProperties($event)" class="node {{node.type}}" id="{{node.id}}" [style.top]="node.position.top + 'px'"

+<div (dblclick)="showProperties($event)" class="node {{node.type}}" id="{{node.id}}"

+    (click)="onSelected()"

+    [class.active]="active"

+    [style.top]="node.position.top + 'px'"

     [style.left]="node.position.left + 'px'">

     <div class="name">

         {{getDisplayName()}}

diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.ts b/sdc-workflow-designer-ui/src/app/components/node/node.component.ts
index c6a95961..7a48e5dc 100644
--- a/sdc-workflow-designer-ui/src/app/components/node/node.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.ts
@@ -10,11 +10,12 @@
  *     ZTE - initial API and implementation and/or initial documentation

  */

 

-import { Component, AfterViewInit, Input } from '@angular/core';

+import { Component, AfterViewInit, Input, OnDestroy } from '@angular/core';

 

 import { JsPlumbService } from '../../services/jsplumb.service';

 import { BroadcastService } from "../../services/broadcast.service";

 import { WorkflowNode } from "../../model/workflow/workflow-node";

+import { Subscription } from "rxjs/Subscription";

 

 /**

  * workflow node component

@@ -24,11 +25,15 @@ import { WorkflowNode } from "../../model/workflow/workflow-node";
     styleUrls: ['./node.component.css'],

     templateUrl: 'node.component.html',

 })

-export class NodeComponent implements AfterViewInit {

+export class NodeComponent implements AfterViewInit, OnDestroy {

 

     @Input() public node: WorkflowNode;

     @Input() public last: boolean;

 

+    public active = false;

+    private currentTypeSubscription: Subscription;

+    private currentWorkflowSubscription: Subscription;

+

     constructor(private broadcastService: BroadcastService,

         private jsPlumbService: JsPlumbService) {

 

@@ -38,6 +43,25 @@ export class NodeComponent implements AfterViewInit {
         if(this.last) {

             this.jsPlumbService.initNode('.node');

         }

+

+        this.currentTypeSubscription = this.broadcastService.currentType$.subscribe(type => {

+            if (type === 'SequenceFlow') {

+                this.active = false;

+            }

+        });

+

+        this.currentWorkflowSubscription = this.broadcastService.currentWorkflowNode$.subscribe(activeNode => {

+            if (activeNode.id === this.node.id) {

+                this.active = true;

+            } else {

+                this.active = false;

+            }

+        });

+    }

+

+    public ngOnDestroy() {

+        this.currentTypeSubscription.unsubscribe();

+        this.currentWorkflowSubscription.unsubscribe();

     }

 

     public showProperties() {

@@ -53,4 +77,9 @@ export class NodeComponent implements AfterViewInit {
         }

     }

 

+    public onSelected() {

+        this.broadcastService.broadcast(this.broadcastService.currentWorkflowNode, this.node);

+        this.broadcastService.broadcast(this.broadcastService.currentType, 'WorkflowNode');

+    }

+

 }