1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
/**
* Copyright (c) 2017 ZTE Corporation.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* and the Apache License 2.0 which both accompany this distribution,
* and are available at http://www.eclipse.org/legal/epl-v10.html
* and http://www.apache.org/licenses/LICENSE-2.0
*
* Contributors:
* ZTE - initial API and implementation and/or initial documentation
*/
import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { SubProcess } from '../../model/workflow/sub-process';
import { WorkflowNode } from '../../model/workflow/workflow-node';
import { BroadcastService } from '../../services/broadcast.service';
import { JsPlumbService } from '../../services/jsplumb.service';
import { ModelService } from '../../services/model.service';
import { NodeType } from '../../model/workflow/node-type.enum';
/**
* node component represent a single workflow node.
* every node would be rendered on the container component
*/
@Component({
selector: 'b4t-node',
styleUrls: ['./node.component.css'],
templateUrl: 'node.component.html',
})
export class NodeComponent implements AfterViewInit, OnDestroy {
@Input() public node: WorkflowNode;
@Input() public rank: number;
@ViewChild('nodeItem') nodeItem: ElementRef;
public nodeType = NodeType;
public active = false;
private currentWorkflowSubscription: Subscription;
private isMoving = false;
constructor(private jsPlumbService: JsPlumbService,
private modelService: ModelService,
private broadcastService: BroadcastService) {
}
public ngAfterViewInit() {
this.jsPlumbService.initJsPlumbInstance(this.node.parentId);
this.jsPlumbService.initNode(this.node);
if (this.canHaveChildren()) {
this.jsPlumbService.nodeDroppable(this.node, this.rank);
this.jsPlumbService.connectChildrenNodes(this.node.id);
}
this.currentWorkflowSubscription = this.broadcastService.selectedElement$.subscribe(activeNodes => {
let active = false;
for (let index = 0; index < activeNodes.length; index++) {
let activeNode = activeNodes[index] as WorkflowNode;
if (activeNode.id === this.node.id) {
active = true;
break;
}
}
this.active = active;
});
}
public ngOnDestroy() {
this.currentWorkflowSubscription.unsubscribe();
if (this.nodeItem.nativeElement.onmousemove) {
this.nodeItem.nativeElement.onmousemove = null;
}
}
public onMousedown() {
let currentThis = this;
this.nodeItem.nativeElement.onmousemove = function () {
currentThis.isMoving = true;
};
}
public onClick(event) {
if (this.nodeItem.nativeElement.onmousemove) {
this.nodeItem.nativeElement.onmousemove = null;
}
if (this.isMoving && this.active) {
this.isMoving = false;
return;
}
event.stopPropagation();
this.broadcastService.broadcast(this.broadcastService.showProperty, null);
this.broadcastService.broadcast(this.broadcastService.selectedElement, [this.node]);
}
public canHaveChildren(): boolean {
return this.node.type === 'subProcess';
}
public onMouseOut(event, target) {
event.stopPropagation();
target.classList.remove('hover');
}
public onMouseOver(event, target) {
event.stopPropagation();
target.classList.add('hover');
}
public showProperties(event) {
event.stopPropagation();
this.broadcastService.broadcast(this.broadcastService.showProperty, this.node);
}
}
|
