aboutsummaryrefslogtreecommitdiffstats
path: root/sdc-workflow-designer-ui/src/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/components')
-rw-r--r--sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts25
-rw-r--r--sdc-workflow-designer-ui/src/app/components/node/node.component.css10
-rw-r--r--sdc-workflow-designer-ui/src/app/components/node/node.component.html5
-rw-r--r--sdc-workflow-designer-ui/src/app/components/node/node.component.ts33
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');
+ }
+
}