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 <lv.bo163@zte.com.cn>
"integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
"dev": true
},
+ "jsplumb": {
+ "version": "2.5.0",
+ "resolved": "http://registry.npm.taobao.org/jsplumb/download/jsplumb-2.5.0.tgz",
+ "integrity": "sha1-5gLBaEKKcYiYr6Kmm8lmldlhjiQ="
+ },
"jsprim": {
"version": "1.4.1",
"resolved": "http://registry.npm.taobao.org/jsprim/download/jsprim-1.4.1.tgz",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"core-js": "^2.4.1",
+ "jsplumb": "2.5.0",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
*\r
* Contributors:\r
* ZTE - initial API and implementation and/or initial documentation\r
- */
\ No newline at end of file
+ */\r
+\r
+\r
+ .container {\r
+ width: 100%;\r
+ height: 100%;\r
+ background-color: cadetblue;\r
+ }\r
+\r
-->
<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
- <h1>
- Welcome to {{title}}!
- </h1>
-</div>
+<div id="container" class="container">
+ <b4t-node *ngFor="let node of nodes" [node]="node"></b4t-node>
+</div>
* ZTE - initial API and implementation and/or initial documentation
*/
-import { Component } from '@angular/core';
+import { Component, AfterViewInit } from '@angular/core';
+import { JsPlumbService } from "./services/jsplumb.service";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
-export class AppComponent {
- title = 'SDC Workflow Designer';
+export class AppComponent implements AfterViewInit {
+ constructor(private jsplumbService: JsPlumbService) {}
+
+ public nodes = [
+ {
+ id: '001',
+ name: 'node001',
+ top: 50,
+ left: 50,
+ },
+ {
+ id: '002',
+ name: 'node002',
+ top: 250,
+ left: 50,
+ },
+ {
+ id: '003',
+ name: 'node003',
+ top: 140,
+ left: 450,
+ },
+ ];
+
+ ngAfterViewInit(): void {
+ this.jsplumbService.initJsPlumbInstance();
+ this.jsplumbService.initNode('.node');
+ }
}
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
+import { JsPlumbService } from "./services/jsplumb.service";
+import { NodeComponent } from "./components/node/node.component";
@NgModule({
declarations: [
- AppComponent
+ AppComponent,
+ NodeComponent,
],
imports: [
BrowserModule
],
- providers: [],
+ providers: [JsPlumbService],
bootstrap: [AppComponent]
})
export class AppModule { }
--- /dev/null
+ .node {\r
+ position:absolute;\r
+ width: 100px;\r
+ height: 50px;\r
+ border: 2px solid black;\r
+ }\r
+\r
+\r
+/**\r
+ * Anchors\r
+ */\r
+.anchors {\r
+ position: absolute;\r
+ border-radius: 1em;\r
+ z-index: 20;\r
+ display: none;\r
+ background-color: black;\r
+ width: 0;\r
+ height: 0;\r
+ cursor: pointer;\r
+ -ms-transition: all 0.15s ease-in-out;\r
+ transition: all 0.15s ease-in-out;\r
+ -moz-transition: all 0.15s ease-in-out;\r
+ -webkit-transition: all 0.15s ease-in-out;\r
+ -o-transition: all 0.15s ease-in-out;\r
+}\r
+\r
+.node:hover .anchors {\r
+ background-color: black;\r
+ display: inline-block;\r
+ width: 12px;\r
+ height: 12px;\r
+ z-index: 20;\r
+}\r
+\r
+.anchor-left {\r
+ left: -5px;\r
+ top: 40%;\r
+}\r
+\r
+.anchor-right {\r
+ right: -5px;\r
+ top: 40%;\r
+}\r
+\r
+.anchor-top {\r
+ top: -5px;\r
+ left: 40%;\r
+}\r
+\r
+.anchor-bottom {\r
+ bottom: -5px;\r
+ left: 40%;\r
+}\r
+\r
+/*右箭头*/\r
+.right {\r
+ width: 10px;\r
+ height: 10px;\r
+ position: absolute;\r
+ left: 4px;\r
+ top: 1px;\r
+\r
+}\r
+\r
+.right-arrow1, .right-arrow2 {\r
+ width: 0;\r
+ height: 0;\r
+ display: block;\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ border-top: 5px transparent dashed;\r
+ border-right: 5px transparent dashed;\r
+ border-bottom: 5px transparent dashed;\r
+ border-left: 5px black solid;\r
+ overflow: hidden;\r
+}\r
+\r
+.right-arrow1 {\r
+\r
+ border-left: 5px white solid;\r
+}\r
+\r
+.right-arrow2 {\r
+ left: -2px;\r
+}\r
+\r
+/*左箭头*/\r
+.left {\r
+ width: 10px;\r
+ height: 10px;\r
+ position: absolute;\r
+ left: -2px;\r
+ top: 1px;\r
+ z-index: 2;\r
+}\r
+\r
+.left-arrow1, .left-arrow2 {\r
+ width: 0;\r
+ height: 0;\r
+ display: block;\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ z-index: 5; /*兼容ie8-*/\r
+ border-top: 5px transparent dashed;\r
+ border-left: 5px transparent dashed;\r
+ border-bottom: 5px transparent dashed;\r
+ border-right: 5px black solid;\r
+ overflow: hidden;\r
+}\r
+\r
+.left-arrow1 {\r
+ border-right: 5px #fff solid;\r
+}\r
+\r
+.left-arrow2 {\r
+ left: 2px;\r
+}\r
+\r
+/*上箭头*/\r
+.top {\r
+ width: 9px;\r
+ height: 9px;\r
+ position: absolute;\r
+ left: 1px;\r
+ z-index: 2;\r
+}\r
+\r
+.top-arrow1, .top-arrow2 {\r
+ width: 0;\r
+ height: 0;\r
+ display: block;\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ z-index: 5;\r
+ border-bottom: 5px black solid;\r
+ border-left: 5px transparent dashed;\r
+ border-right: 5px transparent dashed;\r
+ border-top: 5px transparent dashed;\r
+ overflow: hidden;\r
+}\r
+\r
+.top-arrow1 {\r
+ z-index: 6;\r
+}\r
+\r
+.top-arrow2 {\r
+ top: -2px;\r
+ border-bottom: 4px white solid;\r
+}\r
+\r
+/*下箭头*/\r
+.bottom {\r
+ width: 9px;\r
+ height: 9px;\r
+ position: absolute;\r
+ left: 1px;\r
+ top: 4px;\r
+ z-index: 2;\r
+}\r
+\r
+.bottom-arrow1, .bottom-arrow2 {\r
+ width: 0;\r
+ height: 0;\r
+ display: block;\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ z-index: 5;\r
+ border-bottom: 4px transparent dashed;\r
+ border-left: 4px transparent dashed;\r
+ border-right: 4px transparent dashed;\r
+ border-top: 4px black solid;\r
+ overflow: hidden;\r
+}\r
+\r
+.bottom-arrow1 {\r
+ top: -2px;\r
+ z-index: 6;\r
+}\r
+\r
+.bottom-arrow2 {\r
+ border-top: 4px white solid;\r
+}\r
--- /dev/null
+<!--\r
+/**\r
+ * Copyright (c) 2017 ZTE Corporation.\r
+ * All rights reserved. This program and the accompanying materials\r
+ * are made available under the terms of the Eclipse Public License v1.0\r
+ * and the Apache License 2.0 which both accompany this distribution,\r
+ * and are available at http://www.eclipse.org/legal/epl-v10.html\r
+ * and http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Contributors:\r
+ * ZTE - initial API and implementation and/or initial documentation\r
+ */\r
+-->\r
+<div class="node" [style.top]="node.top + 'px'"\r
+ [style.left]="node.left + 'px'">\r
+ <div>{{node.name}}</div>\r
+ <div class="anchor anchors anchor-left">\r
+ <span class="left">\r
+ <i class="left-arrow1"></i>\r
+ <i class="left-arrow2"></i>\r
+ </span>\r
+ </div>\r
+ <div class="anchor anchors anchor-right">\r
+ <span class="right">\r
+ <i class="right-arrow1"></i>\r
+ <i class="right-arrow2"></i>\r
+ </span>\r
+ </div>\r
+ <div class="anchor anchors anchor-top">\r
+ <span class="top">\r
+ <i class="top-arrow1"></i>\r
+ <i class="top-arrow2"></i>\r
+ </span>\r
+ </div>\r
+ <div class="anchor anchors anchor-bottom">\r
+ <span class="bottom">\r
+ <i class="bottom-arrow1"></i>\r
+ <i class="bottom-arrow2"></i>\r
+ </span>\r
+ </div>\r
+</div>\r
--- /dev/null
+/**\r
+ * Copyright (c) 2017 ZTE Corporation.\r
+ * All rights reserved. This program and the accompanying materials\r
+ * are made available under the terms of the Eclipse Public License v1.0\r
+ * and the Apache License 2.0 which both accompany this distribution,\r
+ * and are available at http://www.eclipse.org/legal/epl-v10.html\r
+ * and http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Contributors:\r
+ * ZTE - initial API and implementation and/or initial documentation\r
+ */\r
+\r
+import { Component, AfterViewInit, Input } from '@angular/core';\r
+\r
+import { JsPlumbService } from '../../services/jsplumb.service';\r
+\r
+/**\r
+ * workflow node component\r
+ */\r
+@Component({\r
+ selector: 'b4t-node',\r
+ styleUrls: ['./node.component.css'],\r
+ templateUrl: 'node.component.html',\r
+})\r
+export class NodeComponent {\r
+ @Input() public node: Node;\r
+\r
+ constructor(private jsPlumbService: JsPlumbService) {\r
+\r
+ }\r
+\r
+}\r
--- /dev/null
+/**\r
+ * Copyright (c) 2017 ZTE Corporation.\r
+ * All rights reserved. This program and the accompanying materials\r
+ * are made available under the terms of the Eclipse Public License v1.0\r
+ * and the Apache License 2.0 which both accompany this distribution,\r
+ * and are available at http://www.eclipse.org/legal/epl-v10.html\r
+ * and http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Contributors:\r
+ * ZTE - initial API and implementation and/or initial documentation\r
+ */\r
+\r
+import { Injectable } from '@angular/core';\r
+import * as jsp from 'jsplumb';\r
+\r
+/**\r
+ * JsPlumbService\r
+ * provides all of the operations about jsplumb plugin.\r
+ */\r
+@Injectable()\r
+export class JsPlumbService {\r
+ private jsplumbInstance;\r
+\r
+ constructor() {\r
+\r
+ }\r
+\r
+\r
+ public initJsPlumbInstance() {\r
+ this.jsplumbInstance = jsp.jsPlumb.getInstance({\r
+ Container: 'container'\r
+ });\r
+\r
+ this.jsplumbInstance.importDefaults({\r
+ Anchor: ['Top', 'RightMiddle', 'LeftMiddle', 'Bottom'],\r
+ Connector: [\r
+ 'Flowchart',\r
+ { cornerRadius: 0, stub: 0, gap: 3 },\r
+ ],\r
+ ConnectionOverlays: [\r
+ [\r
+ 'Arrow',\r
+ { direction: 1, foldback: 1, location: 1, width: 10, length: 10 },\r
+ ],\r
+ ['Label', { label: '', id: 'label', cssClass: 'aLabel' }],\r
+ ],\r
+ Endpoint: 'Blank',\r
+ PaintStyle: {\r
+ strokeWidth: 4,\r
+ stroke: 'black',\r
+ },\r
+ HoverPaintStyle: {\r
+ strokeWidth: 4,\r
+ stroke: 'blue',\r
+ },\r
+ });\r
+\r
+ // add connection to model data while a new connection is build\r
+ this.jsplumbInstance.bind('connection', info => {\r
+ this.jsplumbInstance.bind('connection', info => {\r
+\r
+ info.connection.bind('click', connection => {\r
+ this.jsplumbInstance.select({ connections: [connection] }).delete();\r
+ });\r
+ });\r
+ \r
+ });\r
+\r
+ }\r
+\r
+ public initNode(selectorString: string) {\r
+ const selector = this.jsplumbInstance.getSelector(selectorString);\r
+\r
+ this.jsplumbInstance.draggable(selector, {\r
+ // stop(event) {\r
+ // node.position.left = event.pos[0];\r
+ // node.position.top = event.pos[1];\r
+ // },\r
+ });\r
+\r
+ this.jsplumbInstance.makeTarget(selector, {\r
+ detachable: false,\r
+ isTarget: true,\r
+ maxConnections: -1,\r
+ });\r
+\r
+ this.jsplumbInstance.makeSource(selector, {\r
+ filter: '.anchor, .anchor *',\r
+ detachable: false,\r
+ isSource: true,\r
+ maxConnections: -1,\r
+ });\r
+\r
+ }
+}\r
* ZTE - initial API and implementation and/or initial documentation
*/
- /* to add css */
\ No newline at end of file
+ body, html {
+ height: 100%;
+ margin: 0px;
+ }
Code Review / sdc / sdc-workflow-designer.git / commitdiff