1 files changed, 66 insertions, 39 deletions
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 5fe189db..e688e973 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
@@ -9,16 +9,19 @@
  * Contributors:
  *     ZTE - initial API and implementation and/or initial documentation
  */
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
 
-import { Component, AfterViewInit, Input, OnDestroy } 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 { BroadcastService } from "../../services/broadcast.service";
-import { WorkflowNode } from "../../model/workflow/workflow-node";
-import { Subscription } from "rxjs/Subscription";
+import { ModelService } from '../../services/model.service';
+import { NodeType } from '../../model/workflow/node-type.enum';
 
 /**
- * workflow node component
+ * node component represent a single workflow node.
+ * every node would be rendered on the container component
  */
 @Component({
     selector: 'b4t-node',
@@ -26,61 +29,85 @@ import { Subscription } from "rxjs/Subscription";
     templateUrl: 'node.component.html',
 })
 export class NodeComponent implements AfterViewInit, OnDestroy {
-
     @Input() public node: WorkflowNode;
-    @Input() public last: boolean;
+    @Input() public rank: number;
+    @ViewChild('nodeItem') nodeItem: ElementRef;
 
+    public nodeType = NodeType;
     public active = false;
-    private currentTypeSubscription: Subscription;
     private currentWorkflowSubscription: Subscription;
+    private isMoving = false;
 
-    constructor(private broadcastService: BroadcastService,
-        private jsPlumbService: JsPlumbService) {
-
+    constructor(private jsPlumbService: JsPlumbService,
+        private modelService: ModelService,
+        private broadcastService: BroadcastService) {
     }
 
-    ngAfterViewInit(): void {
-        if(this.last) {
-            this.jsPlumbService.initNode();
-            this.jsPlumbService.connectNodes();
-        }
+    public ngAfterViewInit() {
+        this.jsPlumbService.initJsPlumbInstance(this.node.parentId);
+        this.jsPlumbService.initNode(this.node);
 
-        this.currentTypeSubscription = this.broadcastService.currentType$.subscribe(type => {
-            if (type === 'SequenceFlow') {
-                this.active = false;
-            }
-        });
+        if (this.canHaveChildren()) {
+            this.jsPlumbService.nodeDroppable(this.node, this.rank);
+            this.jsPlumbService.connectChildrenNodes(this.node.id);
+        }
 
-        this.currentWorkflowSubscription = this.broadcastService.currentWorkflowNode$.subscribe(activeNode => {
-            if (activeNode.id === this.node.id) {
-                this.active = true;
-            } else {
-                this.active = false;
+        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.currentTypeSubscription.unsubscribe();
         this.currentWorkflowSubscription.unsubscribe();
+        if (this.nodeItem.nativeElement.onmousemove) {
+            this.nodeItem.nativeElement.onmousemove = null;
+        }
     }
 
-    public showProperties() {
-        this.broadcastService.broadcast(this.broadcastService.nodeProperty, this.node);
-        this.broadcastService.broadcast(this.broadcastService.showProperty, true);
+    public onMousedown() {
+        let currentThis = this;
+        this.nodeItem.nativeElement.onmousemove = function () {
+            currentThis.isMoving = true;
+        };
     }
 
-    public getDisplayName(): string {
-        if (this.node.type === 'restTask' || this.node.type === 'toscaTask') {
-            return this.node.name;
-        } else {
-            return '     ';
+    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 onSelected() {
-        this.broadcastService.broadcast(this.broadcastService.currentWorkflowNode, this.node);
-        this.broadcastService.broadcast(this.broadcastService.currentType, 'WorkflowNode');
+    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);
+    }
 }