aboutsummaryrefslogtreecommitdiffstats
path: root/sdc-workflow-designer-ui/src/app/components/canvas
diff options
context:
space:
mode:
authorLvbo163 <lv.bo163@zte.com.cn>2017-08-30 17:17:11 +0800
committerLvbo163 <lv.bo163@zte.com.cn>2017-08-30 17:22:30 +0800
commit97e19323bd1e9ee44a02173a5ba05d13219c4082 (patch)
treea2c809787cf8f0b1109b6ca652a0f58d7d8915de /sdc-workflow-designer-ui/src/app/components/canvas
parentaa77d17e3f68d8236b4fa07904fec054b07aa23b (diff)
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>
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/components/canvas')
-rw-r--r--sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.css26
-rw-r--r--sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.html16
-rw-r--r--sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts62
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;
+ }
+}