diff options
Diffstat (limited to 'sdc-workflow-designer-ui')
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);
}
|