change component structure

separate bpmn elements from toolbar component, and add rest task and gateway elements.

Issue-ID: SDC-266

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

diff --git a/sdc-workflow-designer-ui/src/app/app.component.css b/sdc-workflow-designer-ui/src/app/app.component.css
index 762d14b..fdafa45 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/app.component.css
+++ b/sdc-workflow-designer-ui/src/app/app.component.css
@@ -9,10 +9,36 @@
  * Contributors:\r
  *     ZTE - initial API and implementation and/or initial documentation\r
  */\r
+ .main-content-wrapper{\r
+    height: 100%;\r
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTEgMTEiPjxkZWZzPjxzdHlsZT4uY2xzLTF7aXNvbGF0aW9uOmlzb2xhdGU7fS5jbHMtMntmaWxsOiNmYWZiZmQ7fS5jbHMtM3tmaWxsOiNlY2VkZWY7ZmlsbC1ydWxlOmV2ZW5vZGQ7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5iYWNrZ3JvdW5kLWltYWdlc192MjwvdGl0bGU+PGc+PGltYWdlIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMSIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFBc0FBQUFMQ0FJQUFBQW16dUJ4QUFBQUNYQklXWE1BQUFzU0FBQUxFZ0hTM1g3OEFBQUFFMGxFUVZRWVYyUDRUd2d3RUZJd3FvSmtGUUF3eFdtbDRtUGRyd0FBQUFCSlJVNUVya0pnZ2c9PSIvPjwvZz48ZyBpZD0i55+p5b2iXzEiIGRhdGEtbmFtZT0i55+p5b2iIDEiIGNsYXNzPSJjbHMtMSI+PGcgaWQ9IuefqeW9ol8xLTIiIGRhdGEtbmFtZT0i55+p5b2iIDEiPjxyZWN0IGNsYXNzPSJjbHMtMiIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIi8+PC9nPjwvZz48ZyBjbGFzcz0iY2xzLTEiPjxnPjxwb2x5Z29uIGNsYXNzPSJjbHMtMyIgcG9pbnRzPSIxMCAwIDEwIDEwIDAgMTAgMCAxMSAxMCAxMSAxMC45MiAxMSAxMC45MiAwIDEwIDAiLz48L2c+PC9nPjwvc3ZnPg==);\r
+    background-size: 11px;\r
+}\r
 \r
+.toolbar{\r
+    position: fixed;\r
+    top: 0px;\r
+    left: 0px;\r
+    width: 200px;\r
+    height: 100%;\r
+    background-color: white;\r
+}\r
 \r
- .container {\r
-     width: 100%;\r
-     height: 100%;\r
- }\r
+.design-area{\r
+    position: relative;\r
+    left: 200px;\r
+    width: calc(100% - 200px);\r
+    height: 100%;\r
+    padding: 20px;\r
+}\r
 \r
+.design-menu{\r
+    display: block;\r
+    height: 30px;\r
+    margin-bottom: 10px;\r
+}\r
+\r
+.design-container{\r
+    display: block;\r
+    height: calc(100% - 40px);\r
+}\r

diff --git a/sdc-workflow-designer-ui/src/app/app.component.html b/sdc-workflow-designer-ui/src/app/app.component.html
index 08b57b8..856e52b 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/app.component.html
+++ b/sdc-workflow-designer-ui/src/app/app.component.html
@@ -12,10 +12,11 @@
  */
 -->
 
-
-<b4t-toolbar></b4t-toolbar>
-
-<b4t-canvas></b4t-canvas>
-
-<b4t-properties></b4t-properties>
-
+<div class="main-content-wrapper">
+    <b4t-toolbar class="toolbar"></b4t-toolbar>
+    <div class="design-area">
+        <b4t-menu class="design-menu"></b4t-menu>
+        <b4t-canvas></b4t-canvas>
+    </div>
+    <b4t-properties></b4t-properties>
+</div>

diff --git a/sdc-workflow-designer-ui/src/app/app.module.ts b/sdc-workflow-designer-ui/src/app/app.module.ts
index 5b05426..297cbce 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/app.module.ts
+++ b/sdc-workflow-designer-ui/src/app/app.module.ts
@@ -30,11 +30,13 @@ import { PropertiesComponent } from "./components/property/properties.component"
 import { CanvasComponent } from "./components/canvas/canvas.component";
 import { StartEventParametersComponent } from "./components/property/start-event-parameters/start-event-parameters.component";
 import { ParameterComponent } from "./components/parameter/parameter.component";
+import { MenuComponent } from "./components/menus/menu.component";
 
 @NgModule({
     declarations: [
         AppComponent,
         CanvasComponent,
+        MenuComponent,
         NodeComponent,
         ParameterComponent,
         PropertiesComponent,

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
index fec14a4..bc88965 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.css
+++ b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.css
@@ -22,5 +22,5 @@
     position: relative;
     overflow: scroll;
     z-index: 0;
-    background-color: #84acb3;
+    background-color: white;
 }

diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menu.component.css b/sdc-workflow-designer-ui/src/app/components/menus/menu.component.css
new file mode 100644 (file)
index 0000000..2fa48af
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/menus/menu.component.css
@@ -0,0 +1,19 @@
+/**
+ * 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
+ */
+
+.btn-right{
+    float: right;
+}
+
+button i{
+    padding-right: 3px;
+}

diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menu.component.html b/sdc-workflow-designer-ui/src/app/components/menus/menu.component.html
new file mode 100644 (file)
index 0000000..edee361
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/menus/menu.component.html
@@ -0,0 +1,20 @@
+<!--
+/**
+ * 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 class="btn-right">
+  <button type="button" class="btn white" (click)="save()" [disabled]="!canSave">
+    <i class="fa fa-save"></i>Save
+  </button>
+  <!-- <button type="button" class="btn white" (click)="test()">test</button> -->
+</div>

diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menu.component.spec.ts b/sdc-workflow-designer-ui/src/app/components/menus/menu.component.spec.ts
new file mode 100644 (file)
index 0000000..52f2c77
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/menus/menu.component.spec.ts
@@ -0,0 +1,36 @@
+/**
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuComponent } from './menu.component';
+
+describe('MenuComponent', () => {
+  let component: MenuComponent;
+  let fixture: ComponentFixture<MenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menu.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/menu.component.ts
new file mode 100644 (file)
index 0000000..347f1a2
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/menus/menu.component.ts
@@ -0,0 +1,33 @@
+/**
+ * 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, OnInit, ViewChild } from '@angular/core';
+
+import { WorkflowService } from '../../services/workflow.service';
+
+@Component({
+  selector: 'b4t-menu',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.css']
+})
+export class MenuComponent {
+
+  public canSave = true;
+
+  constructor(private workflowService: WorkflowService) { }
+
+  public save(): void {
+    this.workflowService.save();
+  }
+
+  public test() {
+  }
+}

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
index 08b7322..0d01835 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/components/node/node.component.css
+++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.css
@@ -207,31 +207,65 @@
     border-top: 4px white solid;\r
 }\r
 \r
+.node .name {\r
+    padding: 10px 15px;\r
+}\r
+\r
+.node:hover {\r
+    border: 1px dotted #000;\r
+}\r
 \r
-.node .startEvent {\r
+.node.focus {\r
+    border: 1px dotted red;\r
+}\r
+\r
+.startEvent {\r
     border-radius: 30px;\r
-    background-size: cover;\r
     border: 1px solid rgb(0, 0, 0);\r
+    background-size: cover;\r
     height: 30px;\r
     width: 30px;\r
+    /*background-image: url("data:image/png;base64,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");*/\r
 }\r
 \r
-.node .endEvent {\r
+.endEvent {\r
     border-radius: 30px;\r
-    background-size: cover;\r
     border: 2px solid rgb(0, 0, 0);\r
+    background-size: cover;\r
     height: 30px;\r
     width: 30px;\r
+    /*background-image: url("data:image/png;base64,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");*/\r
 }\r
 \r
-.node .name {\r
-    padding: 10px 15px;\r
+.intermediateCatchEvent {\r
+    border-radius: 30px;\r
+    border: 1px solid rgb(0, 0, 0);\r
+    background-size: cover;\r
+    height: 30px;\r
+    width: 30px;\r
+    background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8' standalone='no'?><svg xmlns='http://www.w3.org/2000/svg' xmlns:oryx='http://www.b3mn.org/oryx' viewBox='1 1 30 30' width='28' height='28' style='fill:transparent' version='1.0'> <defs></defs> <oryx:magnets> <oryx:magnet oryx:cx='16' oryx:cy='16' oryx:default='yes' /> </oryx:magnets> <oryx:docker oryx:cx='16' oryx:cy='16' /> <g pointer-events='fill'> <defs> <radialGradient id='background' cx='10%' cy='10%' r='100%' fx='10%' fy='10%'> <stop offset='0%' stop-color='#ffffff' stop-opacity='1'/> <stop id='fill_el' offset='100%' stop-color='#ffffff' stop-opacity='1'/> </radialGradient> </defs> <circle id='bg_frame' cx='16' cy='16' r='15' stroke='black' stroke-width='1' style='stroke-dasharray: 5.5, 3' />  <circle id='frame2_non_interrupting' cx='16' cy='16' r='12' stroke='black' fill='none' stroke-width='1' style='stroke-dasharray: 4.5, 3' /><circle id='frame' cx='16' cy='16' r='15' stroke='black' fill='none' stroke-width='1'/><circle id='frame2' cx='16' cy='16' r='12' stroke='black' fill='none' stroke-width='1'/><circle id='circle' cx='16' cy='16' r='10' stroke='black' fill='none' stroke-width='1'/> <path id='path1' d='M 16 6 L 16 9 M 21 7 L 19.5 10 M 25 11 L 22 12.5 M 26 16 L 23 16 M 25 21 L 22 19.5 M 21 25 L 19.5 22 M 16 26 L 16 23 M 11 25 L 12.5 22 M 7 21 L 10 19.5 M 6 16 L 9 16 M 7 11 L 10 12.5 M 11 7 L 12.5 10 M 18 9 L 16 16 L 20 16' fill='none' stroke='black' /> <text font-size='11' id='text_name' x='16' y='33' oryx:align='top center' stroke='black'></text></g></svg>");\r
 }\r
 \r
-.node:hover {\r
-    border: 1px dotted #000;\r
+.restTask {\r
+    border-radius: 8px;\r
+    border: 2px solid rgb(0, 0, 0);\r
+    font-size: 10px;\r
 }\r
 \r
-.node.focus {\r
-    border: 1px dotted red;\r
+.parallelGateway {\r
+    transform: rotate(45deg);\r
+    border: 2px solid rgb(0, 0, 0);\r
+    background-size: cover;\r
+    height: 30px;\r
+    width: 30px;\r
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAAEASURBVGhD7ZXRDcIwDEQ7AiMwQkdiQ0ZgBEbpCCWRiBRVob5zbaDSIeUD9WzfvSruNOknAiIgAiIgAiIgAiIgAiLwQwKXMvtezkx48NQQ7XFpNfIsZy1nAUN4anBHhLI3UgMgITw1hCVOOjKzF4LVc26catQUqnPaOFZmmbOeH5seVL1nsl3ydk+QuxJki2vzKURv/G/Nt6hWCHTVcuiC1df3St2Sr/9vwbPC2536DVjm0Y9dOFWk4am3kLXnrecIoDQNag7VpRkdNWZNsfr0MCND1p731KQG6Q1Z5kcfO7QmPcSjTJiJKTU4W0O0l1QEREAEREAEREAEREAEvkHgBRtRrTMkpctqAAAAAElFTkSuQmCC");\r
+}\r
+\r
+.exclusiveGateway {\r
+    transform: rotate(45deg);\r
+    border: 2px solid rgb(0, 0, 0);\r
+    background-size: cover;\r
+    height: 30px;\r
+    width: 30px;\r
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAAC4SURBVGhD7ZXRCcAgEEMdpSN0hI7WTTpKR+hIrZ9yIBi4SIUn+CGc0bwoVwoDAhCAAAQgAAEIQMBB4K6i7dwdhzg13yrezsN5mEMbAw6qiiYJKLQctSTgoKpokoBCS6mNHba3jgk8oTP39tk7drxY9tresbMvPP2vLG/grG95ZEaj1+C+TfmQztrpTyPbDAayiap6JKASy64ngWyiqh4JqMSy62O3/k2HzTaKHgQgAAEIQAACyxL4AOr3u2BKXQ3gAAAAAElFTkSuQmCC");\r
 }\r

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 090f324..62cd6f5 100644 (file)
--- 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,34 +11,34 @@
  *     ZTE - initial API and implementation and/or initial documentation\r
  */\r
 -->\r
+<div (dblclick)="showProperties($event)" class="node {{node.type}}" id="{{node.id}}" [style.top]="node.position.top + 'px'"\r
+    [style.left]="node.position.left + 'px'">\r
+    <div class="name">\r
+        {{getDisplayName()}}\r
+    </div>\r
 \r
-<div (dblclick)="showProperties()" class="node" id="{{node.id}}" [style.top]="node.position.top + 'px'"\r
-[style.left]="node.position.left + 'px'">\r
-<div [class]="node.type">\r
-\r
-</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 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

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 676ba99..c6a9596 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/components/node/node.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.ts
@@ -45,4 +45,12 @@ export class NodeComponent implements AfterViewInit {
         this.broadcastService.broadcast(this.broadcastService.showProperty, true);\r
     }\r
 \r
+    public getDisplayName(): string {\r
+        if (this.node.type === 'restTask' || this.node.type === 'toscaTask') {\r
+            return this.node.name;\r
+        } else {\r
+            return '     ';\r
+        }\r
+    }\r
+\r
 }\r

diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css
index 94559ef..942ac58 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css
@@ -10,16 +10,97 @@
  *     ZTE - initial API and implementation and/or initial documentation\r
  */\r
 \r
-.toolbar {\r
-    padding: 10px 30px 0px 10px;\r
-    position: fixed;\r
-    top: 0px;\r
-    left: 0px;\r
-    width: 100%;\r
-    z-index: 4;\r
+ .toolbar{\r
+    padding: 20px 10px;\r
+}\r
+\r
+.row{\r
+    margin: 0;\r
 }\r
 \r
 button {\r
+    min-width: 40px;\r
+    width: 60px;\r
+    height: 60px;\r
     transition: all 0s;\r
+    margin: 10px;\r
+    padding: 0;\r
+}\r
+\r
+button div{\r
+    left: 0;\r
+    right: 0;\r
+    margin: auto;\r
+    width: 40px;\r
+    height: 40px;\r
+}\r
+\r
+button span{\r
+    padding: 0;\r
+    font-size: 10px;\r
+    letter-spacing: 0px;\r
+    color: black;\r
+}\r
+\r
+.subProcess {\r
+    border-radius: 8px;\r
+    border: 2px solid rgb(0, 0, 0);\r
+    font-size: 10px;\r
+}\r
+\r
+.parallelGateway {\r
+    transform: rotate(45deg);\r
+    border: 2px solid rgb(0, 0, 0);\r
+    background-size: cover;\r
+    height: 30px !important;\r
+    width: 30px !important;\r
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAAEASURBVGhD7ZXRDcIwDEQ7AiMwQkdiQ0ZgBEbpCCWRiBRVob5zbaDSIeUD9WzfvSruNOknAiIgAiIgAiIgAiIgAiLwQwKXMvtezkx48NQQ7XFpNfIsZy1nAUN4anBHhLI3UgMgITw1hCVOOjKzF4LVc26catQUqnPaOFZmmbOeH5seVL1nsl3ydk+QuxJki2vzKURv/G/Nt6hWCHTVcuiC1df3St2Sr/9vwbPC2536DVjm0Y9dOFWk4am3kLXnrecIoDQNag7VpRkdNWZNsfr0MCND1p731KQG6Q1Z5kcfO7QmPcSjTJiJKTU4W0O0l1QEREAEREAEREAEREAEvkHgBRtRrTMkpctqAAAAAElFTkSuQmCC");\r
+}\r
+\r
+.exclusiveGateway {\r
+    transform: rotate(45deg);\r
+    border: 2px solid rgb(0, 0, 0);\r
+    background-size: cover;\r
+    height: 30px !important;\r
+    width: 30px !important;\r
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAAC4SURBVGhD7ZXRCcAgEEMdpSN0hI7WTTpKR+hIrZ9yIBi4SIUn+CGc0bwoVwoDAhCAAAQgAAEIQMBB4K6i7dwdhzg13yrezsN5mEMbAw6qiiYJKLQctSTgoKpokoBCS6mNHba3jgk8oTP39tk7drxY9tresbMvPP2vLG/grG95ZEaj1+C+TfmQztrpTyPbDAayiap6JKASy64ngWyiqh4JqMSy62O3/k2HzTaKHgQgAAEIQAACyxL4AOr3u2BKXQ3gAAAAAElFTkSuQmCC");\r
+}\r
+\r
+.startEvent {\r
+    border-radius: 30px;\r
+    border: 1px solid rgb(0, 0, 0);\r
+    background-size: cover;\r
+    height: 30px;\r
+    width: 30px;\r
+    /*background-image: url("data:image/png;base64,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");*/\r
+}\r
+\r
+.endEvent {\r
+    border-radius: 30px;\r
+    border: 2px solid rgb(0, 0, 0);\r
+    background-size: cover;\r
+    height: 30px;\r
+    width: 30px;\r
+    /*background-image: url("data:image/png;base64,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");*/\r
+}\r
+\r
+.intermediateCatchEvent {\r
+    border-radius: 30px;\r
+    border: 1px solid rgb(0, 0, 0);\r
+    background-size: cover;\r
     height: 30px;\r
+    width: 30px;\r
+    background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8' standalone='no'?><svg xmlns='http://www.w3.org/2000/svg' xmlns:oryx='http://www.b3mn.org/oryx' viewBox='1 1 30 30' width='28' height='28' style='fill:transparent' version='1.0'> <defs></defs> <oryx:magnets> <oryx:magnet oryx:cx='16' oryx:cy='16' oryx:default='yes' /> </oryx:magnets> <oryx:docker oryx:cx='16' oryx:cy='16' /> <g pointer-events='fill'> <defs> <radialGradient id='background' cx='10%' cy='10%' r='100%' fx='10%' fy='10%'> <stop offset='0%' stop-color='#ffffff' stop-opacity='1'/> <stop id='fill_el' offset='100%' stop-color='#ffffff' stop-opacity='1'/> </radialGradient> </defs> <circle id='bg_frame' cx='16' cy='16' r='15' stroke='black' stroke-width='1' style='stroke-dasharray: 5.5, 3' />  <circle id='frame2_non_interrupting' cx='16' cy='16' r='12' stroke='black' fill='none' stroke-width='1' style='stroke-dasharray: 4.5, 3' /><circle id='frame' cx='16' cy='16' r='15' stroke='black' fill='none' stroke-width='1'/><circle id='frame2' cx='16' cy='16' r='12' stroke='black' fill='none' stroke-width='1'/><circle id='circle' cx='16' cy='16' r='10' stroke='black' fill='none' stroke-width='1'/> <path id='path1' d='M 16 6 L 16 9 M 21 7 L 19.5 10 M 25 11 L 22 12.5 M 26 16 L 23 16 M 25 21 L 22 19.5 M 21 25 L 19.5 22 M 16 26 L 16 23 M 11 25 L 12.5 22 M 7 21 L 10 19.5 M 6 16 L 9 16 M 7 11 L 10 12.5 M 11 7 L 12.5 10 M 18 9 L 16 16 L 20 16' fill='none' stroke='black' /> <text font-size='11' id='text_name' x='16' y='33' oryx:align='top center' stroke='black'></text></g></svg>");\r
+}\r
+\r
+.toscaTask {\r
+    border-radius: 8px;\r
+    border: 2px solid rgb(0, 0, 0);\r
+    font-size: 10px;\r
+}\r
+\r
+.restTask {\r
+    border-radius: 8px;\r
+    border: 2px solid rgb(0, 0, 0);\r
+    font-size: 10px;\r
 }\r

diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html
index 91b935e..bb52644 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html
@@ -13,13 +13,11 @@
 -->\r
 <div class="toolbar">\r
     <div class="row">\r
-        <button type="button" class="btn btn-secondary item ui-draggable" [attr.nodeType]="'startEvent'">\r
-            <span>startEvent</span>\r
+        <button *ngFor="let nodeType of nodeTypes" type="button" [attr.nodeType]="nodeType"\r
+            class="btn btn-secondary item ui-draggable">\r
+            <div class="{{nodeType}}">\r
+            </div>\r
+            <span>{{getNameByType(nodeType)}}</span>\r
         </button>\r
-        <button type="button" class="btn btn-secondary item ui-draggable" [attr.nodeType]="'endEvent'">\r
-            <span>endEvent</span>\r
-        </button>\r
-\r
-        <button type="button" class="btn btn-success" (click)="save()">Save</button>\r
     </div>\r
 </div>\r

diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts
index 1e1de19..71bf02a 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts
@@ -10,10 +10,10 @@
  *     ZTE - initial API and implementation and/or initial documentation\r
  */\r
 \r
-import { AfterViewInit, Component } from '@angular/core';\r
+import { AfterViewInit, Component, OnInit } from '@angular/core';\r
 \r
 import { JsPlumbService } from '../../services/jsplumb.service';\r
-import { WorkflowService } from "../../services/workflow.service";\r
+import { NodeType } from "../../model/workflow/node-type.enum";\r
 \r
 /**\r
  * toolbar component contains some basic operations(save) and all of the supported workflow nodes.\r
@@ -24,23 +24,29 @@ import { WorkflowService } from "../../services/workflow.service";
     templateUrl: 'toolbar.component.html',\r
     styleUrls: ['./toolbar.component.css']\r
 })\r
-export class ToolbarComponent implements AfterViewInit {\r
+export class ToolbarComponent implements AfterViewInit, OnInit {\r
+    public nodeTypes = [];\r
 \r
-    constructor(private jsPlumbService: JsPlumbService, private workflowService: WorkflowService) {\r
+    constructor(private jsPlumbService: JsPlumbService) {\r
     }\r
 \r
     public ngAfterViewInit() {\r
         this.jsPlumbService.buttonDraggable();\r
     }\r
 \r
-    public save() {\r
-        this.workflowService.save().subscribe(success => {\r
-            if(success) {\r
-                console.log(`save workflow success`);\r
-            } else {\r
-                console.log(`save workflow failed`);\r
+    ngOnInit(): void {\r
+        this.getNodeTypes();\r
+    }\r
+\r
+    private getNodeTypes() {\r
+        for(let key in NodeType) {\r
+            if (typeof NodeType[key] === 'number') {\r
+                this.nodeTypes.push(key);\r
             }\r
-        });\r
+        }\r
     }\r
 \r
+    public getNameByType(type:string):string{\r
+        return type.replace(type.charAt(0), type.charAt(0).toUpperCase());\r
+    }\r
 }\r

diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/node-type.enum.ts b/sdc-workflow-designer-ui/src/app/model/workflow/node-type.enum.ts
index 994b3b6..c8d2fe2 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/model/workflow/node-type.enum.ts
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/node-type.enum.ts
@@ -13,10 +13,8 @@
 export enum NodeType {
     startEvent,
     endEvent,
-    toscaNodeManagementTask,
     restTask,
+    intermediateCatchEvent,
     exclusiveGateway,
     parallelGateway,
-    subProcess,
-    intermediateCatchEvent,
 }

diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/position.ts b/sdc-workflow-designer-ui/src/app/model/workflow/position.ts
index b690f4d..7f3fe6f 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/model/workflow/position.ts
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/position.ts
@@ -17,5 +17,5 @@ import { Injectable } from '@angular/core';
  * Workflow node position\r
  */\r
 export class Position {\r
-    constructor(public top: number, public left: number, public width?: number, public height?: number) { }\r
+    constructor(public top: number, public left: number, public width: number = 200, public height: number = 100) { }\r
 }\r

diff --git a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
index 8d3d655..0863fb5 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
@@ -114,8 +114,9 @@ export class JsPlumbService {
             drop: event => {\r
                 const el = this.jsplumbInstance.getSelector(event.drag.el);\r
                 const type = el.attributes.nodeType.value;\r
-                const left = event.e.clientX - event.drop.position[0];\r
-                const top = event.e.clientY - event.drop.position[1];\r
+                // Mouse position minus drop canvas start position and minus icon half size\r
+                const left = event.e.clientX - 220 - (event.e.offsetX / 2);\r
+                const top = event.e.clientY - 70 - (event.e.offsetY / 2);\r
 \r
                 this.workflowService.addNode(type, type, top, left);\r
             },\r

diff --git a/sdc-workflow-designer-ui/src/app/services/workflow.service.ts b/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
index a36b51a..09e0e55 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
@@ -34,6 +34,7 @@ export class WorkflowService {
     }\r
 \r
     public save(): Observable<boolean> {\r
+        console.log(this.workflow);\r
         return this.dataAccessService.catalogService.saveWorkflow(this.workflow);\r
     }\r
 \r

diff --git a/sdc-workflow-designer-ui/src/styles.css b/sdc-workflow-designer-ui/src/styles.css
index 9438803..30d6d11 100644 (file)
--- a/sdc-workflow-designer-ui/src/styles.css
+++ b/sdc-workflow-designer-ui/src/styles.css
@@ -13,5 +13,4 @@
  body, html {
      height: 100%;
      margin: 0px;
-     background-color: cadetblue;
  }