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/components/canvas/canvas.component.ts | 25 ++++++++++++++-- .../src/app/components/node/node.component.css | 10 +++++++ .../src/app/components/node/node.component.html | 5 +++- .../src/app/components/node/node.component.ts | 33 ++++++++++++++++++++-- 4 files changed, 68 insertions(+), 5 deletions(-) (limited to 'sdc-workflow-designer-ui/src/app/components') 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 */ --> -
{{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'); + } + } -- cgit 1.2.3-korg