From 5a25850bf3006f17690bf999f6c58d27eb97e0b7 Mon Sep 17 00:00:00 2001
From: Lvbo163 <lv.bo163@zte.com.cn>
Date: Fri, 8 Sep 2017 15:08:50 +0800
Subject: 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>
---
 .../src/app/services/jsplumb.service.ts            | 62 +++++++++++++++++++---
 1 file changed, 54 insertions(+), 8 deletions(-)

(limited to 'sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts')

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);
     }
 
-- 
cgit 1.2.3-korg