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>

3 files changed, 104 insertions, 0 deletions

diff --git a/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.css b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.css
new file mode 100644
index 00000000..fec14a47
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.css
@@ -0,0 +1,26 @@
+/**
+ * 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
+ */
+
+.canvas {
+    -webkit-overflow-scrolling: touch;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    height: 100%;
+    position: relative;
+    overflow: scroll;
+    z-index: 0;
+    background-color: #84acb3;
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.html b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.html
new file mode 100644
index 00000000..97fe3a67
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.html
@@ -0,0 +1,16 @@
+<!--
+/**
+ * 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
+ */
+-->
+<div id="canvas" class="canvas" (click)="canvasClick()">
+    <b4t-node *ngFor="let node of getWorkflow()?.nodes; let last = last;" [node]="node" [last]="last"></b4t-node>
+</div>
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
new file mode 100644
index 00000000..e1a40297
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts
@@ -0,0 +1,62 @@
+/**
+ * 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 } from '@angular/core';
+
+import { BroadcastService } from '../../services/broadcast.service';
+import { JsPlumbService } from '../../services/jsplumb.service';
+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";
+
+/**
+ * main canvas, it contains two parts: canvas and node property component
+ * bpmn task nodes can be dropped into this canvas, and then the workflow can be edit
+ */
+@Component({
+    selector: 'b4t-canvas',
+    styleUrls: ['./canvas.component.css'],
+    templateUrl: 'canvas.component.html',
+})
+export class CanvasComponent implements AfterViewInit {
+
+    constructor(private broadcastService: BroadcastService,
+        private dataAccessService: DataAccessService,
+        private jsPlumbService: JsPlumbService,
+        private route: ActivatedRoute,
+        private workflowService: WorkflowService) {
+    }
+
+    ngOnInit(): void {
+        this.route.queryParams.subscribe(params => {
+            if (params.id) {
+                this.dataAccessService.catalogService.loadWorkflow(params.id).subscribe(workflow => {
+                    this.workflowService.workflow = workflow;
+                });
+            }
+        });
+    }
+
+    public ngAfterViewInit() {
+        this.jsPlumbService.buttonDroppable();
+    }
+
+    public canvasClick() {
+        this.broadcastService.broadcast(this.broadcastService.showProperty, false);
+    }
+
+
+    public getWorkflow(): Workflow {
+        return this.workflowService.workflow;
+    }
+}