diff options
Diffstat (limited to 'sdc-workflow-designer-ui')
19 files changed, 346 insertions, 83 deletions
diff --git a/sdc-workflow-designer-ui/src/app/app.component.css b/sdc-workflow-designer-ui/src/app/app.component.css index 762d14b9..fdafa45c 100644 --- 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:
* ZTE - initial API and implementation and/or initial documentation
*/
+ .main-content-wrapper{
+ height: 100%;
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTEgMTEiPjxkZWZzPjxzdHlsZT4uY2xzLTF7aXNvbGF0aW9uOmlzb2xhdGU7fS5jbHMtMntmaWxsOiNmYWZiZmQ7fS5jbHMtM3tmaWxsOiNlY2VkZWY7ZmlsbC1ydWxlOmV2ZW5vZGQ7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5iYWNrZ3JvdW5kLWltYWdlc192MjwvdGl0bGU+PGc+PGltYWdlIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMSIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFBc0FBQUFMQ0FJQUFBQW16dUJ4QUFBQUNYQklXWE1BQUFzU0FBQUxFZ0hTM1g3OEFBQUFFMGxFUVZRWVYyUDRUd2d3RUZJd3FvSmtGUUF3eFdtbDRtUGRyd0FBQUFCSlJVNUVya0pnZ2c9PSIvPjwvZz48ZyBpZD0i55+p5b2iXzEiIGRhdGEtbmFtZT0i55+p5b2iIDEiIGNsYXNzPSJjbHMtMSI+PGcgaWQ9IuefqeW9ol8xLTIiIGRhdGEtbmFtZT0i55+p5b2iIDEiPjxyZWN0IGNsYXNzPSJjbHMtMiIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIi8+PC9nPjwvZz48ZyBjbGFzcz0iY2xzLTEiPjxnPjxwb2x5Z29uIGNsYXNzPSJjbHMtMyIgcG9pbnRzPSIxMCAwIDEwIDEwIDAgMTAgMCAxMSAxMCAxMSAxMC45MiAxMSAxMC45MiAwIDEwIDAiLz48L2c+PC9nPjwvc3ZnPg==);
+ background-size: 11px;
+}
+.toolbar{
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 100%;
+ background-color: white;
+}
- .container {
- width: 100%;
- height: 100%;
- }
+.design-area{
+ position: relative;
+ left: 200px;
+ width: calc(100% - 200px);
+ height: 100%;
+ padding: 20px;
+}
+.design-menu{
+ display: block;
+ height: 30px;
+ margin-bottom: 10px;
+}
+
+.design-container{
+ display: block;
+ height: calc(100% - 40px);
+}
diff --git a/sdc-workflow-designer-ui/src/app/app.component.html b/sdc-workflow-designer-ui/src/app/app.component.html index 08b57b81..856e52bd 100644 --- 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 5b054262..297cbce4 100644 --- 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 fec14a47..bc889652 100644 --- 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 index 00000000..2fa48afa --- /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 index 00000000..edee3618 --- /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 index 00000000..52f2c772 --- /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 index 00000000..347f1a24 --- /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 08b7322d..0d01835f 100644 --- 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;
}
+.node .name {
+ padding: 10px 15px;
+}
+
+.node:hover {
+ border: 1px dotted #000;
+}
-.node .startEvent {
+.node.focus {
+ border: 1px dotted red;
+}
+
+.startEvent {
border-radius: 30px;
- background-size: cover;
border: 1px solid rgb(0, 0, 0);
+ background-size: cover;
height: 30px;
width: 30px;
+ /*background-image: url("data:image/png;base64,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");*/
}
-.node .endEvent {
+.endEvent {
border-radius: 30px;
- background-size: cover;
border: 2px solid rgb(0, 0, 0);
+ background-size: cover;
height: 30px;
width: 30px;
+ /*background-image: url("data:image/png;base64,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");*/
}
-.node .name {
- padding: 10px 15px;
+.intermediateCatchEvent {
+ border-radius: 30px;
+ border: 1px solid rgb(0, 0, 0);
+ background-size: cover;
+ height: 30px;
+ width: 30px;
+ 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>");
}
-.node:hover {
- border: 1px dotted #000;
+.restTask {
+ border-radius: 8px;
+ border: 2px solid rgb(0, 0, 0);
+ font-size: 10px;
}
-.node.focus {
- border: 1px dotted red;
+.parallelGateway {
+ transform: rotate(45deg);
+ border: 2px solid rgb(0, 0, 0);
+ background-size: cover;
+ height: 30px;
+ width: 30px;
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAAEASURBVGhD7ZXRDcIwDEQ7AiMwQkdiQ0ZgBEbpCCWRiBRVob5zbaDSIeUD9WzfvSruNOknAiIgAiIgAiIgAiIgAiLwQwKXMvtezkx48NQQ7XFpNfIsZy1nAUN4anBHhLI3UgMgITw1hCVOOjKzF4LVc26catQUqnPaOFZmmbOeH5seVL1nsl3ydk+QuxJki2vzKURv/G/Nt6hWCHTVcuiC1df3St2Sr/9vwbPC2536DVjm0Y9dOFWk4am3kLXnrecIoDQNag7VpRkdNWZNsfr0MCND1p731KQG6Q1Z5kcfO7QmPcSjTJiJKTU4W0O0l1QEREAEREAEREAEREAEvkHgBRtRrTMkpctqAAAAAElFTkSuQmCC");
+}
+
+.exclusiveGateway {
+ transform: rotate(45deg);
+ border: 2px solid rgb(0, 0, 0);
+ background-size: cover;
+ height: 30px;
+ width: 30px;
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAAC4SURBVGhD7ZXRCcAgEEMdpSN0hI7WTTpKR+hIrZ9yIBi4SIUn+CGc0bwoVwoDAhCAAAQgAAEIQMBB4K6i7dwdhzg13yrezsN5mEMbAw6qiiYJKLQctSTgoKpokoBCS6mNHba3jgk8oTP39tk7drxY9tresbMvPP2vLG/grG95ZEaj1+C+TfmQztrpTyPbDAayiap6JKASy64ngWyiqh4JqMSy62O3/k2HzTaKHgQgAAEIQAACyxL4AOr3u2BKXQ3gAAAAAElFTkSuQmCC");
}
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 090f324d..62cd6f51 100644 --- 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
*/
-->
+<div (dblclick)="showProperties($event)" class="node {{node.type}}" id="{{node.id}}" [style.top]="node.position.top + 'px'"
+ [style.left]="node.position.left + 'px'">
+ <div class="name">
+ {{getDisplayName()}}
+ </div>
-<div (dblclick)="showProperties()" class="node" id="{{node.id}}" [style.top]="node.position.top + 'px'"
-[style.left]="node.position.left + 'px'">
-<div [class]="node.type">
-
-</div>
-<div class="anchor anchors anchor-left">
- <span class="left">
- <i class="left-arrow1"></i>
- <i class="left-arrow2"></i>
- </span>
-</div>
-<div class="anchor anchors anchor-right">
- <span class="right">
- <i class="right-arrow1"></i>
- <i class="right-arrow2"></i>
- </span>
-</div>
-<div class="anchor anchors anchor-top">
- <span class="top">
- <i class="top-arrow1"></i>
- <i class="top-arrow2"></i>
- </span>
-</div>
-<div class="anchor anchors anchor-bottom">
- <span class="bottom">
- <i class="bottom-arrow1"></i>
- <i class="bottom-arrow2"></i>
- </span>
-</div>
+ <div class="anchor anchors anchor-left">
+ <span class="left">
+ <i class="left-arrow1"></i>
+ <i class="left-arrow2"></i>
+ </span>
+ </div>
+ <div class="anchor anchors anchor-right">
+ <span class="right">
+ <i class="right-arrow1"></i>
+ <i class="right-arrow2"></i>
+ </span>
+ </div>
+ <div class="anchor anchors anchor-top">
+ <span class="top">
+ <i class="top-arrow1"></i>
+ <i class="top-arrow2"></i>
+ </span>
+ </div>
+ <div class="anchor anchors anchor-bottom">
+ <span class="bottom">
+ <i class="bottom-arrow1"></i>
+ <i class="bottom-arrow2"></i>
+ </span>
+ </div>
</div>
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 676ba998..c6a95961 100644 --- 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);
}
+ public getDisplayName(): string {
+ if (this.node.type === 'restTask' || this.node.type === 'toscaTask') {
+ return this.node.name;
+ } else {
+ return ' ';
+ }
+ }
+
}
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 94559eff..942ac586 100644 --- 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
*/
-.toolbar {
- padding: 10px 30px 0px 10px;
- position: fixed;
- top: 0px;
- left: 0px;
- width: 100%;
- z-index: 4;
+ .toolbar{
+ padding: 20px 10px;
+}
+
+.row{
+ margin: 0;
}
button {
+ min-width: 40px;
+ width: 60px;
+ height: 60px;
transition: all 0s;
+ margin: 10px;
+ padding: 0;
+}
+
+button div{
+ left: 0;
+ right: 0;
+ margin: auto;
+ width: 40px;
+ height: 40px;
+}
+
+button span{
+ padding: 0;
+ font-size: 10px;
+ letter-spacing: 0px;
+ color: black;
+}
+
+.subProcess {
+ border-radius: 8px;
+ border: 2px solid rgb(0, 0, 0);
+ font-size: 10px;
+}
+
+.parallelGateway {
+ transform: rotate(45deg);
+ border: 2px solid rgb(0, 0, 0);
+ background-size: cover;
+ height: 30px !important;
+ width: 30px !important;
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAAEASURBVGhD7ZXRDcIwDEQ7AiMwQkdiQ0ZgBEbpCCWRiBRVob5zbaDSIeUD9WzfvSruNOknAiIgAiIgAiIgAiIgAiLwQwKXMvtezkx48NQQ7XFpNfIsZy1nAUN4anBHhLI3UgMgITw1hCVOOjKzF4LVc26catQUqnPaOFZmmbOeH5seVL1nsl3ydk+QuxJki2vzKURv/G/Nt6hWCHTVcuiC1df3St2Sr/9vwbPC2536DVjm0Y9dOFWk4am3kLXnrecIoDQNag7VpRkdNWZNsfr0MCND1p731KQG6Q1Z5kcfO7QmPcSjTJiJKTU4W0O0l1QEREAEREAEREAEREAEvkHgBRtRrTMkpctqAAAAAElFTkSuQmCC");
+}
+
+.exclusiveGateway {
+ transform: rotate(45deg);
+ border: 2px solid rgb(0, 0, 0);
+ background-size: cover;
+ height: 30px !important;
+ width: 30px !important;
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAAC4SURBVGhD7ZXRCcAgEEMdpSN0hI7WTTpKR+hIrZ9yIBi4SIUn+CGc0bwoVwoDAhCAAAQgAAEIQMBB4K6i7dwdhzg13yrezsN5mEMbAw6qiiYJKLQctSTgoKpokoBCS6mNHba3jgk8oTP39tk7drxY9tresbMvPP2vLG/grG95ZEaj1+C+TfmQztrpTyPbDAayiap6JKASy64ngWyiqh4JqMSy62O3/k2HzTaKHgQgAAEIQAACyxL4AOr3u2BKXQ3gAAAAAElFTkSuQmCC");
+}
+
+.startEvent {
+ border-radius: 30px;
+ border: 1px solid rgb(0, 0, 0);
+ background-size: cover;
+ height: 30px;
+ width: 30px;
+ /*background-image: url("data:image/png;base64,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");*/
+}
+
+.endEvent {
+ border-radius: 30px;
+ border: 2px solid rgb(0, 0, 0);
+ background-size: cover;
+ height: 30px;
+ width: 30px;
+ /*background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAQFJREFUeNrs2MENgyAUxvFn0wUcwRHeAuoKjuAIbiBOpCO4gU6hR5yAHkgaoxUsBWOa7x2VwC//i8RIKUX3mwfdcsACCyywwAILLD1Pw7umaQKdmud5mqamFep42raN49i7iZmnaVLGIfNrKWVRFB5NdV2rE2NiLcviMRszD8OgN5zn2Z2VJEnf916yrSMJIYQQ7iy9Y1VVv2RbRxrHkZmJyAOLiJyzbSK9n/thOWT7GCkI63y2o0ihWNZs5khhWUfZrJGCs/bZpJTWSBexNtmska5j6SnLsus6a6SrWd+OlYVrIFi4y68/bYFOzbLMvCDCT0qwwAILLLDAAutfWK8BANHUM0rzFI9RAAAAAElFTkSuQmCC");*/
+}
+
+.intermediateCatchEvent {
+ border-radius: 30px;
+ border: 1px solid rgb(0, 0, 0);
+ background-size: cover;
height: 30px;
+ width: 30px;
+ 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>");
+}
+
+.toscaTask {
+ border-radius: 8px;
+ border: 2px solid rgb(0, 0, 0);
+ font-size: 10px;
+}
+
+.restTask {
+ border-radius: 8px;
+ border: 2px solid rgb(0, 0, 0);
+ font-size: 10px;
}
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 91b935e9..bb52644f 100644 --- 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 @@ -->
<div class="toolbar">
<div class="row">
- <button type="button" class="btn btn-secondary item ui-draggable" [attr.nodeType]="'startEvent'">
- <span>startEvent</span>
+ <button *ngFor="let nodeType of nodeTypes" type="button" [attr.nodeType]="nodeType"
+ class="btn btn-secondary item ui-draggable">
+ <div class="{{nodeType}}">
+ </div>
+ <span>{{getNameByType(nodeType)}}</span>
</button>
- <button type="button" class="btn btn-secondary item ui-draggable" [attr.nodeType]="'endEvent'">
- <span>endEvent</span>
- </button>
-
- <button type="button" class="btn btn-success" (click)="save()">Save</button>
</div>
</div>
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 1e1de191..71bf02ab 100644 --- 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
*/
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
import { JsPlumbService } from '../../services/jsplumb.service';
-import { WorkflowService } from "../../services/workflow.service";
+import { NodeType } from "../../model/workflow/node-type.enum";
/**
* toolbar component contains some basic operations(save) and all of the supported workflow nodes.
@@ -24,23 +24,29 @@ import { WorkflowService } from "../../services/workflow.service"; templateUrl: 'toolbar.component.html',
styleUrls: ['./toolbar.component.css']
})
-export class ToolbarComponent implements AfterViewInit {
+export class ToolbarComponent implements AfterViewInit, OnInit {
+ public nodeTypes = [];
- constructor(private jsPlumbService: JsPlumbService, private workflowService: WorkflowService) {
+ constructor(private jsPlumbService: JsPlumbService) {
}
public ngAfterViewInit() {
this.jsPlumbService.buttonDraggable();
}
- public save() {
- this.workflowService.save().subscribe(success => {
- if(success) {
- console.log(`save workflow success`);
- } else {
- console.log(`save workflow failed`);
+ ngOnInit(): void {
+ this.getNodeTypes();
+ }
+
+ private getNodeTypes() {
+ for(let key in NodeType) {
+ if (typeof NodeType[key] === 'number') {
+ this.nodeTypes.push(key);
}
- });
+ }
}
+ public getNameByType(type:string):string{
+ return type.replace(type.charAt(0), type.charAt(0).toUpperCase());
+ }
}
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 994b3b67..c8d2fe2b 100644 --- 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 b690f4d6..7f3fe6fb 100644 --- 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
*/
export class Position {
- constructor(public top: number, public left: number, public width?: number, public height?: number) { }
+ constructor(public top: number, public left: number, public width: number = 200, public height: number = 100) { }
}
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 8d3d6552..0863fb5d 100644 --- 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 => {
const el = this.jsplumbInstance.getSelector(event.drag.el);
const type = el.attributes.nodeType.value;
- const left = event.e.clientX - event.drop.position[0];
- const top = event.e.clientY - event.drop.position[1];
+ // Mouse position minus drop canvas start position and minus icon half size
+ const left = event.e.clientX - 220 - (event.e.offsetX / 2);
+ const top = event.e.clientY - 70 - (event.e.offsetY / 2);
this.workflowService.addNode(type, type, top, left);
},
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 a36b51ad..09e0e55e 100644 --- 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 { }
public save(): Observable<boolean> {
+ console.log(this.workflow);
return this.dataAccessService.catalogService.saveWorkflow(this.workflow);
}
diff --git a/sdc-workflow-designer-ui/src/styles.css b/sdc-workflow-designer-ui/src/styles.css index 94388033..30d6d116 100644 --- 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; } |