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