From df81658e252dd886f30e984f1aa4a5f3917cd134 Mon Sep 17 00:00:00 2001 From: Lvbo163 Date: Mon, 28 Aug 2017 14:19:17 +0800 Subject: WorkFlow Diagram Editor create workflow diagram editor area, install jsplumb package to support node drag and node connections. Change-Id: Ie68d0f88ef1cc855c1e55e51e918111c6fba4116 Issue-ID: SDC-70 Signed-off-by: Lvbo163 --- .../src/app/components/node/node.component.css | 187 +++++++++++++++++++++ .../src/app/components/node/node.component.html | 41 +++++ .../src/app/components/node/node.component.ts | 32 ++++ 3 files changed, 260 insertions(+) create mode 100644 sdc-workflow-designer-ui/src/app/components/node/node.component.css create mode 100644 sdc-workflow-designer-ui/src/app/components/node/node.component.html create mode 100644 sdc-workflow-designer-ui/src/app/components/node/node.component.ts (limited to 'sdc-workflow-designer-ui/src/app/components') diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.css b/sdc-workflow-designer-ui/src/app/components/node/node.component.css new file mode 100644 index 00000000..24e657ca --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.css @@ -0,0 +1,187 @@ + .node { + position:absolute; + width: 100px; + height: 50px; + border: 2px solid black; + } + + +/** + * Anchors + */ +.anchors { + position: absolute; + border-radius: 1em; + z-index: 20; + display: none; + background-color: black; + width: 0; + height: 0; + cursor: pointer; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -webkit-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; +} + +.node:hover .anchors { + background-color: black; + display: inline-block; + width: 12px; + height: 12px; + z-index: 20; +} + +.anchor-left { + left: -5px; + top: 40%; +} + +.anchor-right { + right: -5px; + top: 40%; +} + +.anchor-top { + top: -5px; + left: 40%; +} + +.anchor-bottom { + bottom: -5px; + left: 40%; +} + +/*右箭头*/ +.right { + width: 10px; + height: 10px; + position: absolute; + left: 4px; + top: 1px; + +} + +.right-arrow1, .right-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + border-top: 5px transparent dashed; + border-right: 5px transparent dashed; + border-bottom: 5px transparent dashed; + border-left: 5px black solid; + overflow: hidden; +} + +.right-arrow1 { + + border-left: 5px white solid; +} + +.right-arrow2 { + left: -2px; +} + +/*左箭头*/ +.left { + width: 10px; + height: 10px; + position: absolute; + left: -2px; + top: 1px; + z-index: 2; +} + +.left-arrow1, .left-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + z-index: 5; /*兼容ie8-*/ + border-top: 5px transparent dashed; + border-left: 5px transparent dashed; + border-bottom: 5px transparent dashed; + border-right: 5px black solid; + overflow: hidden; +} + +.left-arrow1 { + border-right: 5px #fff solid; +} + +.left-arrow2 { + left: 2px; +} + +/*上箭头*/ +.top { + width: 9px; + height: 9px; + position: absolute; + left: 1px; + z-index: 2; +} + +.top-arrow1, .top-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + z-index: 5; + border-bottom: 5px black solid; + border-left: 5px transparent dashed; + border-right: 5px transparent dashed; + border-top: 5px transparent dashed; + overflow: hidden; +} + +.top-arrow1 { + z-index: 6; +} + +.top-arrow2 { + top: -2px; + border-bottom: 4px white solid; +} + +/*下箭头*/ +.bottom { + width: 9px; + height: 9px; + position: absolute; + left: 1px; + top: 4px; + z-index: 2; +} + +.bottom-arrow1, .bottom-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + z-index: 5; + border-bottom: 4px transparent dashed; + border-left: 4px transparent dashed; + border-right: 4px transparent dashed; + border-top: 4px black solid; + overflow: hidden; +} + +.bottom-arrow1 { + top: -2px; + z-index: 6; +} + +.bottom-arrow2 { + border-top: 4px white solid; +} 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 new file mode 100644 index 00000000..72700551 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.html @@ -0,0 +1,41 @@ + +
+
{{node.name}}
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
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 new file mode 100644 index 00000000..12f23cc5 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.ts @@ -0,0 +1,32 @@ +/** + * 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 { Component, AfterViewInit, Input } from '@angular/core'; + +import { JsPlumbService } from '../../services/jsplumb.service'; + +/** + * workflow node component + */ +@Component({ + selector: 'b4t-node', + styleUrls: ['./node.component.css'], + templateUrl: 'node.component.html', +}) +export class NodeComponent { + @Input() public node: Node; + + constructor(private jsPlumbService: JsPlumbService) { + + } + +} -- cgit 1.2.3-korg