From 5a25850bf3006f17690bf999f6c58d27eb97e0b7 Mon Sep 17 00:00:00 2001 From: Lvbo163 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 --- .../src/app/services/broadcast.service.ts | 7 +++ .../src/app/services/jsplumb.service.ts | 62 +++++++++++++++++++--- 2 files changed, 61 insertions(+), 8 deletions(-) (limited to 'sdc-workflow-designer-ui/src/app/services') 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(); public sequenceFlow$ = this.sequenceFlow.asObservable(); + public currentSequenceFlow = new Subject(); + public currentSequenceFlow$ = this.currentSequenceFlow.asObservable(); + public currentWorkflowNode = new Subject(); + public currentWorkflowNode$ = this.currentWorkflowNode.asObservable(); + public currentType = new Subject(); + 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(); 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