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>

6 files changed, 129 insertions, 13 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');

+    }

+

 }

diff --git a/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts b/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts
index 7726eae2..ec182b36 100644
--- a/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts
@@ -44,6 +44,13 @@ export class BroadcastService {
     public sequenceFlow = new Subject<SequenceFlow>();
     public sequenceFlow$ = this.sequenceFlow.asObservable();
 
+    public currentSequenceFlow = new Subject<SequenceFlow>();
+    public currentSequenceFlow$ = this.currentSequenceFlow.asObservable();
+    public currentWorkflowNode = new Subject<WorkflowNode>();
+    public currentWorkflowNode$ = this.currentWorkflowNode.asObservable();
+    public currentType = new Subject<string>();
+    public currentType$ = this.currentType.asObservable();
+
     /**
      * broadcast datas
      * this method will catch the exceptions for the broadcast
diff --git a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
index e4a9f38b..06cb2b0f 100644
--- a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
@@ -14,6 +14,7 @@ import { Injectable } from '@angular/core';
 import * as jsp from 'jsplumb';

 import { WorkflowProcessService } from "./workflow-process.service";

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

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

 

 /**

  * JsPlumbService

@@ -22,6 +23,7 @@ import { BroadcastService } from "./broadcast.service";
 @Injectable()

 export class JsPlumbService {

     public jsplumbInstance;

+    public subscriptionMap = new Map<string, Subscription>();

 

     constructor(private processService: WorkflowProcessService, private broadcastService: BroadcastService) {

         this.initJsPlumbInstance();

@@ -61,10 +63,13 @@ export class JsPlumbService {
         this.jsplumbInstance.bind('connection', info => {

             this.processService.addSequenceFlow(info.connection.sourceId, info.connection.targetId);

 

-            // info.connection.bind('click', connection => {

-            //     this.jsplumbInstance.select({ connections: [connection] }).delete();

-            //     this.processService.deleteSequenceFlow(connection.sourceId, connection.targetId);

-            // });

+            this.subscribe4Connection(info.connection);

+

+            info.connection.bind('click', connection => {

+                const sequenceFlow = this.processService.getSequenceFlow(connection.sourceId, connection.targetId);

+                this.broadcastService.broadcast(this.broadcastService.currentSequenceFlow, sequenceFlow);

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

+            });

 

             info.connection.bind('dblclick', connection => {

                 const sequenceFlow = this.processService.getSequenceFlow(connection.sourceId, connection.targetId);

@@ -75,14 +80,48 @@ export class JsPlumbService {
 

     }

 

+    private subscribe4Connection(connection: any) {

+        const pre = connection.sourceId + connection.targetId;

+        let sequenceFlowSubscription = this.subscriptionMap.get(pre + 'sequenceFlowSubscription');

+        if (sequenceFlowSubscription && !sequenceFlowSubscription.closed) {

+            sequenceFlowSubscription.unsubscribe();

+        }

+

+        sequenceFlowSubscription = this.broadcastService.currentSequenceFlow$.subscribe(currentSequenceFlow => {

+            if (currentSequenceFlow.sourceRef === connection.sourceId

+                && currentSequenceFlow.targetRef === connection.targetId) {

+                connection.setPaintStyle({ stroke: 'red' });

+            } else {

+                connection.setPaintStyle({ stroke: 'black' });

+            }

+        });

+

+        this.subscriptionMap.set(pre + 'sequenceFlowSubscription', sequenceFlowSubscription);

+

+        let typeSubscription = this.subscriptionMap.get(pre + 'typeSubscription');

+        if (typeSubscription && !typeSubscription.closed) {

+            typeSubscription.unsubscribe();

+        }

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

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

+                connection.setPaintStyle({ stroke: 'black' });

+            }

+        });

+        this.subscriptionMap.set(pre + 'typeSubscription', typeSubscription);

+    }

+

+    private unsubscription4Connection(connectionSelection: any) {

+        connectionSelection.each(connection => {

+            const pre = connection.sourceId + connection.targetId;

+            this.subscriptionMap.get(pre + 'sequenceFlowSubscription').unsubscribe();

+            this.subscriptionMap.get(pre + 'typeSubscription').unsubscribe();

+        });

+    }

+

     public initNode(selectorString: string) {

         const selector = this.jsplumbInstance.getSelector(selectorString);

 

         this.jsplumbInstance.draggable(selector, {

-            // stop(event) {

-            //     node.position.left = event.pos[0];

-            //     node.position.top = event.pos[1];

-            // },

         });

 

         this.jsplumbInstance.makeTarget(selector, {

@@ -109,10 +148,17 @@ export class JsPlumbService {
     public deleteConnect(sourceId: string, targetId: string) {

         const sourceNode = this.processService.getNodeById(sourceId);

         const connectionSelection = this.jsplumbInstance.select({ source: sourceId, target: targetId });

+        this.unsubscription4Connection(connectionSelection);

         connectionSelection.delete();

     }

 

     public remove(nodeId: string) {

+        // unsubscription4Connection

+        const connectionsAsSource = this.jsplumbInstance.select({ source: nodeId });

+        this.unsubscription4Connection(connectionsAsSource);

+        const connectionsAsTarget = this.jsplumbInstance.select({ target: nodeId });

+        this.unsubscription4Connection(connectionsAsTarget);

+

         this.jsplumbInstance.remove(nodeId);

     }