add property edit panel

add canvas component and add property edit panel, this panel will display while a workflow node is double clicked.

Issue-ID: SDC-260

Change-Id: I0f150b0a480f986e0a8ab3bb67cf89f3e2267155
Signed-off-by: Lvbo163 <lv.bo163@zte.com.cn>

2 files changed, 12 insertions, 4 deletions

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 a178e6f5..f875718d 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,8 +11,8 @@
  *     ZTE - initial API and implementation and/or initial documentation

  */

 -->

-<div class="node" [style.top]="node.top + 'px'" [style.left]="node.left + 'px'">

-     <div>{{node.name}}</div>

+<div class="node" id="{{node.id}}" (dblclick)="showProperties()" [style.top]="node.top + 'px'" [style.left]="node.left + 'px'">

+    <div>{{node.name}}</div>

     <div class="anchor anchors anchor-left">

         <span class="left">

             <i class="left-arrow1"></i>

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 c2686fbb..24b784fe 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
@@ -13,6 +13,8 @@
 import { Component, AfterViewInit, Input } from '@angular/core';

 

 import { JsPlumbService } from '../../services/jsplumb.service';

+import { BroadcastService } from "../../services/broadcast.service";

+import { WorkflowNode } from "../../model/workflow-node";

 

 /**

  * workflow node component

@@ -24,10 +26,11 @@ import { JsPlumbService } from '../../services/jsplumb.service';
 })

 export class NodeComponent implements AfterViewInit {

 

-    @Input() public node: Node;

+    @Input() public node: WorkflowNode;

     @Input() public last: boolean;

 

-    constructor(private jsPlumbService: JsPlumbService) {

+    constructor(private broadcastService: BroadcastService,

+        private jsPlumbService: JsPlumbService) {

 

     }

 

@@ -37,4 +40,9 @@ export class NodeComponent implements AfterViewInit {
         }

     }

 

+    public showProperties() {

+        this.broadcastService.broadcast(this.broadcastService.nodeProperty, this.node);

+        this.broadcastService.broadcast(this.broadcastService.showProperty, true);

+    }

+

 }