add internationalization

add i18n for internationalization

Issue-ID: SDC-901

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

diff --git a/sdc-workflow-designer-ui/package.json b/sdc-workflow-designer-ui/package.json
index cf4c70c..561639e 100644 (file)
--- a/sdc-workflow-designer-ui/package.json
+++ b/sdc-workflow-designer-ui/package.json
@@ -21,6 +21,8 @@
     "@angular/platform-browser": "^4.2.4",
     "@angular/platform-browser-dynamic": "^4.2.4",
     "@angular/router": "^4.2.4",
+    "@ngx-translate/core": "^7.2.0",
+    "@ngx-translate/http-loader": "^1.0.2",
     "angular-in-memory-web-api": "^0.3.2",
     "bootstrap": "4.0.0-alpha.6",
     "core-js": "^2.4.1",

diff --git a/sdc-workflow-designer-ui/src/app/app.component.ts b/sdc-workflow-designer-ui/src/app/app.component.ts
index ad61d63..4a58b5e 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/app.component.ts
+++ b/sdc-workflow-designer-ui/src/app/app.component.ts
@@ -16,6 +16,8 @@ import { WorkflowService } from "./services/workflow.service";
 import { WorkflowNode } from "./model/workflow/workflow-node";
 import { DataAccessService } from "./services/data-access/data-access.service";
 import { ActivatedRoute } from "@angular/router";
+import { TranslateService } from '@ngx-translate/core';
+import { BroadcastService } from './services/broadcast.service';
 
 @Component({
   selector: 'app-root',
@@ -23,5 +25,28 @@ import { ActivatedRoute } from "@angular/router";
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
+    public isLoading = true;
 
+    constructor(translate: TranslateService, private broadcastService: BroadcastService) {
+        // Init the I18n function.
+        // this language will be used as a fallback when a translation isn't found in the current language
+        translate.setDefaultLang('en');
+        // the lang to use, if the lang isn't available, it will use the current loader to get them
+        const topWin: any = window.top;
+        let browserLang = '';
+        if (topWin.getLanguage && typeof topWin.getLanguage == 'function') {
+            browserLang = topWin.getLanguage() || '';
+        } else {
+            // browserLang = translate.getBrowserCultureLang() || '';
+            // by default, window.navigator.languages will return a language list with the users prefered language as the first one.
+            // then, browserLang may with the result of translate.getBrowserCultureLang().
+            // but chrome version 57 not implement this functional. The first is not the user's prefered.
+            // So, browserLang can only use window.navigator.language as the user's prefered language.
+            browserLang = window.navigator.language;
+        }
+        translate.use(browserLang);
+        this.broadcastService.updateModelRestConfig$.subscribe(model=>{
+            this.isLoading = false;
+        });
+    }
 }

diff --git a/sdc-workflow-designer-ui/src/app/app.module.ts b/sdc-workflow-designer-ui/src/app/app.module.ts
index 9785a69..a23b79f 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/app.module.ts
+++ b/sdc-workflow-designer-ui/src/app/app.module.ts
@@ -14,6 +14,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { NgxTreeSelectModule } from 'ngx-tree-select';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 
@@ -53,6 +56,12 @@ import { ResizableDirective } from './directive/resizable/resizable.directive';
 import { StartEventComponent } from './components/property/start-event/start-event.component';
 import { NodeParametersComponent } from './components/node-parameters/node-parameters.component';
 import { ParameterTreeComponent } from './components/node-parameters/parameter-tree/parameter-tree.component';
+import { NoticeService } from './services/notice.service';
+
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient) {
+    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
 
 @NgModule({
     declarations: [
@@ -84,6 +93,7 @@ import { ParameterTreeComponent } from './components/node-parameters/parameter-t
         HttpService,
         JsPlumbService,
        ModelService,
+        NoticeService,
         RestService,
         SwaggerTreeConverterService,
         WorkflowConfigService,
@@ -107,6 +117,14 @@ import { ParameterTreeComponent } from './components/node-parameters/parameter-t
             textField: 'name',
             childrenField: 'children',
             allowParentSelection: false
+        }),
+        HttpClientModule,
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [HttpClient]
+            }
         })
     ],
     bootstrap: [

diff --git a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css
index 78475cf..431bf7c 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css
+++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css
@@ -10,7 +10,7 @@
  *     ZTE - initial API and implementation and/or initial documentation\r
  */\r
 \r
- .edit{\r
+.edit{\r
     font-size: 24px;\r
     width: 300px;\r
     height: 30px;\r

diff --git a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html
index 8dde9f1..6a63f69 100644 (file)
--- a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html
@@ -1,5 +1,5 @@
 <input class="edit pull-left" [ngModel]="name" (ngModelChange)="change($event)" (click)="startEdit()" (blur)="stopEdit()"
-(mouseover)="showEditComponent(true)" (mouseout)="showEditComponent(false)">
+    (mouseover)="showEditComponent(true)" (mouseout)="showEditComponent(false)">
 <button *ngIf="showEdit" type="button" class="btn blue1 pull-left" (click)="stopEdit();">
-<i class="fa fa-check"></i>
+    <i class="fa fa-check"></i>
 </button>

diff --git a/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.css b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.css
new file mode 100644 (file)
index 0000000..06f3c09
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.css
@@ -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
+ */
+ 
+.alert-div{
+    position: fixed;
+    top: 100px;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 400px;
+}
\ No newline at end of file

diff --git a/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.html b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.html
new file mode 100644 (file)
index 0000000..a23e25d
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.html
@@ -0,0 +1,18 @@
+<!--
+/**
+ * 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="alert-div">
+  <alert *ngFor="let notice of notices; let i = index;" [type]="noticeType[notice.type]" dismissible="true"
+    [dismissOnTimeout]="notice.timeout" (onClosed)="onClosed(i)">{{notice.content}}</alert>
+</div>
\ No newline at end of file

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

diff --git a/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.ts b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.ts
new file mode 100644 (file)
index 0000000..8ed4e25
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.ts
@@ -0,0 +1,48 @@
+/**
+ * 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 } from '@angular/core';
+
+import { Notice } from '../../model/notice';
+import { NoticeType } from '../../model/notice-type.enum';
+import { NoticeService } from '../../services/notice.service';
+
+@Component({
+  selector: 'global-notice',
+  templateUrl: './global-notice.component.html',
+  styleUrls: ['./global-notice.component.css']
+})
+export class GlobalNoticeComponent implements OnInit {
+  public notices: Notice[] = [];
+  public noticeType = NoticeType;
+
+  constructor(private noticeService: NoticeService) { }
+
+  ngOnInit() {
+    // const t = new Notice(NoticeType.success, 'success');
+    // const t1 = new Notice(NoticeType.info, 'info');
+    // const t2 = new Notice(NoticeType.warning, 'warning');
+    // const t3 = new Notice(NoticeType.danger, 'danger');
+    // this.notices.push(t);
+    // this.notices.push(t1);
+    // this.notices.push(t2);
+    // this.notices.push(t3);
+    this.noticeService.showNotice$.subscribe(notice => {
+      this.notices.push(notice);
+    });
+  }
+
+  public onClosed(index: number): void {
+    this.notices.splice(index, 1);
+  }
+
+}

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 af1ce88..d0c3586 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
@@ -10,7 +10,7 @@
  *     ZTE - initial API and implementation and/or initial documentation\r
  */\r
 \r
- .node {\r
+.node {\r
     cursor: pointer;\r
     display: inline-block;\r
     position: absolute;\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 1832944..3f4c938 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
@@ -12,138 +12,138 @@
  */\r
 -->\r
 <div (click)="onClick($event)" (mousedown)="onMousedown()" (dblclick)="showProperties($event)" class="node" id="{{node.id}}"\r
-(mouseover)="onMouseOver($event, $event.target.parentNode)" (mouseout)="onMouseOut($event, $event.target.parentNode)" [style.top]="node.position.top + 'px'"\r
-[style.left]="node.position.left + 'px'" [style.width]="node.position.width + 'px'" #nodeItem>\r
+    (mouseover)="onMouseOver($event, $event.target.parentNode)" (mouseout)="onMouseOut($event, $event.target.parentNode)" [style.top]="node.position.top + 'px'"\r
+    [style.left]="node.position.left + 'px'" [style.width]="node.position.width + 'px'" #nodeItem>\r
 \r
-<div class="name">{{node.name}}</div>\r
+    <div class="name">{{node.name}}</div>\r
 \r
-<div *ngIf="canHaveChildren()" b4tResizable class="node-icon" [style.width]="node.position.width + 'px'" [style.height]="node.position.height + 'px'"\r
-    [class.active]="active">\r
-    <b4t-node *ngFor="let child of node.children" [node]="child" [rank]="rank + 10"></b4t-node>\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 *ngIf="canHaveChildren()" b4tResizable class="node-icon" [style.width]="node.position.width + 'px'" [style.height]="node.position.height + 'px'"\r
+        [class.active]="active">\r
+        <b4t-node *ngFor="let child of node.children" [node]="child" [rank]="rank + 10"></b4t-node>\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>\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>\r
 \r
-<div *ngIf="!canHaveChildren()" class="node-icon" [class.active]="active">\r
-    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" [style.width]="node.position.width + 'px'" [style.height]="node.position.height + 'px'">\r
-        <g [ngSwitch]="node.type">\r
-            <g *ngSwitchCase="nodeType[nodeType.startEvent]">\r
-                <path class="st0" d="M15,2c7.2,0,13,5.8,13,13s-5.8,13-13,13S2,22.2,2,15S7.8,2,15,2 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15\r
-                    s15-6.7,15-15S23.3,0,15,0L15,0z" />\r
-            </g>\r
-            <g *ngSwitchCase="nodeType[nodeType.endEvent]">\r
-                <path class="st0" d="M15,4c6.1,0,11,4.9,11,11s-4.9,11-11,11S4,21.1,4,15S8.9,4,15,4 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15\r
-                    s15-6.7,15-15S23.3,0,15,0L15,0z" />\r
-            </g>\r
-            <g *ngSwitchCase="nodeType[nodeType.errorStartEvent]">\r
-                <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,28C7.8,28,2,22.2,2,15S7.8,2,15,2\r
-                    s13,5.8,13,13S22.2,28,15,28z" />\r
-                <path class="st0" d="M19.7,12H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3H14c-0.3,0-0.6,0.2-0.8,0.5L9.7,16\r
-                    c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0\r
-                    c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.1,19.9,12,19.7,12z M14.6,22.3l1.2-5.9c0-0.3,0-0.4-0.2-0.6\r
-                    c-0.2-0.2-0.3-0.3-0.6-0.3h-3.5L14.5,7h2.6l-2,5.4C15,12.8,15,13,15.2,13.2c0.2,0.2,0.3,0.3,0.6,0.3h2.5L14.6,22.3z"\r
-                />\r
-            </g>\r
-            <g *ngSwitchCase="nodeType[nodeType.errorEndEvent]">\r
-                <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,26C8.9,26,4,21.1,4,15S8.9,4,15,4\r
-                    s11,4.9,11,11S21.1,26,15,26z" />\r
-                <path class="st0" d="M19.7,12.4H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3h-4.2c-0.3,0-0.6,0.2-0.8,0.5l-3.5,10\r
-                    c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0\r
-                    c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.6,20,12.4,19.7,12.4z" />\r
-            </g>\r
-            <g *ngSwitchCase="nodeType[nodeType.toscaNodeManagementTask]">\r
-                <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3\r
-                    C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" />\r
-                <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" />\r
-                <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" />\r
-                <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" />\r
-                <path class="st0" d="M24.7,15.1h-5c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1.5v5.7c0,0.6,0.4,1,1,1s1-0.4,1-1v-5.7h1.5c0.6,0,1-0.4,1-1\r
-                    C25.7,15.5,25.2,15.1,24.7,15.1z" />\r
-            </g>\r
-            <g *ngSwitchCase="nodeType[nodeType.restTask]">\r
-                <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3\r
-                    C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" />\r
-                <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" />\r
-                <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" />\r
-                <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" />\r
-                <path class="st0" d="M24.1,22.6l-1.6-2.7c0.9-0.4,1.5-1.2,1.5-2.2c0-1.4-1.2-2.5-2.8-2.5h-1.9c-0.2,0-0.4,0.1-0.6,0.2\r
-                    c-0.2,0.1-0.3,0.3-0.3,0.6v7c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8v-2.8h0.8l1.9,3.2c0.1,0.2,0.4,0.4,0.7,0.4\r
-                    c0.1,0,0.3,0,0.4-0.1C24.2,23.5,24.4,23,24.1,22.6z M20.1,16.8h1.2c0.6,0,1.2,0.4,1.2,0.9s-0.5,0.9-1.2,0.9h-1.2V16.8z"\r
-                />\r
+    <div *ngIf="!canHaveChildren()" class="node-icon" [class.active]="active">\r
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" [style.width]="node.position.width + 'px'" [style.height]="node.position.height + 'px'">\r
+            <g [ngSwitch]="node.type">\r
+                <g *ngSwitchCase="nodeType[nodeType.startEvent]">\r
+                    <path class="st0" d="M15,2c7.2,0,13,5.8,13,13s-5.8,13-13,13S2,22.2,2,15S7.8,2,15,2 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15\r
+                        s15-6.7,15-15S23.3,0,15,0L15,0z" />\r
+                </g>\r
+                <g *ngSwitchCase="nodeType[nodeType.endEvent]">\r
+                    <path class="st0" d="M15,4c6.1,0,11,4.9,11,11s-4.9,11-11,11S4,21.1,4,15S8.9,4,15,4 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15\r
+                        s15-6.7,15-15S23.3,0,15,0L15,0z" />\r
+                </g>\r
+                <g *ngSwitchCase="nodeType[nodeType.errorStartEvent]">\r
+                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,28C7.8,28,2,22.2,2,15S7.8,2,15,2\r
+                        s13,5.8,13,13S22.2,28,15,28z" />\r
+                    <path class="st0" d="M19.7,12H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3H14c-0.3,0-0.6,0.2-0.8,0.5L9.7,16\r
+                        c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0\r
+                        c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.1,19.9,12,19.7,12z M14.6,22.3l1.2-5.9c0-0.3,0-0.4-0.2-0.6\r
+                        c-0.2-0.2-0.3-0.3-0.6-0.3h-3.5L14.5,7h2.6l-2,5.4C15,12.8,15,13,15.2,13.2c0.2,0.2,0.3,0.3,0.6,0.3h2.5L14.6,22.3z"\r
+                    />\r
+                </g>\r
+                <g *ngSwitchCase="nodeType[nodeType.errorEndEvent]">\r
+                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,26C8.9,26,4,21.1,4,15S8.9,4,15,4\r
+                        s11,4.9,11,11S21.1,26,15,26z" />\r
+                    <path class="st0" d="M19.7,12.4H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3h-4.2c-0.3,0-0.6,0.2-0.8,0.5l-3.5,10\r
+                        c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0\r
+                        c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.6,20,12.4,19.7,12.4z" />\r
+                </g>\r
+                <g *ngSwitchCase="nodeType[nodeType.toscaNodeManagementTask]">\r
+                    <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3\r
+                        C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" />\r
+                    <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" />\r
+                    <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" />\r
+                    <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" />\r
+                    <path class="st0" d="M24.7,15.1h-5c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1.5v5.7c0,0.6,0.4,1,1,1s1-0.4,1-1v-5.7h1.5c0.6,0,1-0.4,1-1\r
+                        C25.7,15.5,25.2,15.1,24.7,15.1z" />\r
+                </g>\r
+                <g *ngSwitchCase="nodeType[nodeType.restTask]">\r
+                    <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3\r
+                        C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" />\r
+                    <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" />\r
+                    <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" />\r
+                    <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" />\r
+                    <path class="st0" d="M24.1,22.6l-1.6-2.7c0.9-0.4,1.5-1.2,1.5-2.2c0-1.4-1.2-2.5-2.8-2.5h-1.9c-0.2,0-0.4,0.1-0.6,0.2\r
+                        c-0.2,0.1-0.3,0.3-0.3,0.6v7c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8v-2.8h0.8l1.9,3.2c0.1,0.2,0.4,0.4,0.7,0.4\r
+                        c0.1,0,0.3,0,0.4-0.1C24.2,23.5,24.4,23,24.1,22.6z M20.1,16.8h1.2c0.6,0,1.2,0.4,1.2,0.9s-0.5,0.9-1.2,0.9h-1.2V16.8z"\r
+                    />\r
+                </g>\r
+                <g *ngSwitchCase="nodeType[nodeType.exclusiveGateway]">\r
+                    <path class="st0" d="M16.4,15l3.2-3.2c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L15,13.6l-3.2-3.2c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4\r
+                        l3.2,3.2l-3.2,3.2c-0.4,0.4-0.4,1,0,1.4s1,0.4,1.4,0l3.2-3.2l3.2,3.2c0.4,0.4,1,0.4,1.4,0s0.4-1,0-1.4L16.4,15z"\r
+                    />\r
+                    <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12\r
+                        c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12\r
+                        c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12\r
+                        c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" />\r
+                </g>\r
+                <g *ngSwitchCase="nodeType[nodeType.parallelGateway]">\r
+                    <path class="st0" d="M20.5,14H16V9.5c0-0.6-0.4-1-1-1s-1,0.4-1,1V14H9.5c-0.6,0-1,0.4-1,1s0.4,1,1,1H14v4.5c0,0.6,0.4,1,1,1\r
+                        s1-0.4,1-1V16h4.5c0.6,0,1-0.4,1-1S21.1,14,20.5,14z" />\r
+                    <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12\r
+                        c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12\r
+                        c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12\r
+                        c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" />\r
+                </g>\r
+                <g *ngSwitchCase="nodeType[nodeType.subProcess]">\r
+                    <path class="st0" d="M24.5,1h-18c-2.8,0-5,2.2-5,5v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29.5,3.2,27.2,1,24.5,1z M20.2,27h-9.4\r
+                        v-9.1c0-0.3,0.2-0.5,0.5-0.5h8.4c0.3,0,0.5,0.2,0.5,0.5V27z M27.5,24c0,1.7-1.3,3-3,3h-2.3v-9.1c0-1.4-1.1-2.5-2.5-2.5h-8.4\r
+                        c-1.4,0-2.5,1.1-2.5,2.5V27H6.5c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h18c1.7,0,3,1.3,3,3V24z" />\r
+                    <path class="st0" d="M19,21.3h-2.5v-2.5c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1v2.5H12c-0.6,0-1,0.4-1,1s0.4,1,1,1h2.5v2.5\r
+                        c0,0.6,0.4,1,1,1c0.6,0,1-0.4,1-1v-2.5H19c0.6,0,1-0.4,1-1S19.5,21.3,19,21.3z" />\r
+                </g>\r
+                <g *ngSwitchCase="nodeType[nodeType.intermediateCatchEvent]">\r
+                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15c8.3,0,15-6.7,15-15C30,6.7,23.3,0,15,0z M16,27.9V26\r
+                        c0-0.6-0.4-1-1-1s-1,0.4-1,1v1.9C7.6,27.5,2.5,22.4,2.1,16H4c0.6,0,1-0.4,1-1s-0.4-1-1-1H2.1C2.5,7.6,7.6,2.5,14,2.1V4\r
+                        c0,0.6,0.4,1,1,1s1-0.4,1-1V2.1C22.4,2.5,27.5,7.6,27.9,14H26c-0.6,0-1,0.4-1,1s0.4,1,1,1h1.9C27.5,22.4,22.4,27.5,16,27.9z"\r
+                    />\r
+                    <path class="st0" d="M20,14h-3.6l2.5-6.6c0.2-0.5-0.1-1.1-0.6-1.3c-0.5-0.2-1.1,0.1-1.3,0.6l-3,8c-0.1,0.3-0.1,0.7,0.1,0.9\r
+                        c0.2,0.3,0.5,0.4,0.8,0.4h5c0.6,0,1-0.4,1-1S20.6,14,20,14z" />\r
+                </g>\r
+                <g *ngSwitchCase="nodeType[nodeType.scriptTask]">\r
+                    <path class="st0" d="M24,1H6C3.2,1,1,3.2,1,6v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29,3.2,26.8,1,24,1z M16.9,3.4\r
+                        c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3L17.7,7l-5.3,5.3c-0.2-0.6-0.5-1.2-0.9-1.6\r
+                        c-0.4-0.4-1-0.8-1.6-0.9l5.8-5.8C16,3.6,16.4,3.4,16.9,3.4z M10.3,27H6c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h8.2l-7.4,7.4\r
+                        c-0.1,0.1-0.2,0.2-0.3,0.3c-0.7,0.7-1,1.6-1,2.5c0,0.9,0.4,1.8,1,2.5l5.2,5.2l-1.3,1.3c-0.7,0.7-1,1.6-1,2.5\r
+                        C9.3,25.5,9.7,26.4,10.3,27z M14.1,25.9c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5c-0.4-0.4-0.5-0.8-0.5-1.3\r
+                        c0-0.5,0.2-0.9,0.5-1.3l1.3-1.3l0.5,0.5l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3C14.6,25.1,14.5,25.5,14.1,25.9z M14.5,21.3l-6.8-6.8\r
+                        c-0.4-0.4-0.5-0.8-0.5-1.3c0-0.5,0.2-0.9,0.5-1.3c0.4-0.4,0.8-0.5,1.3-0.5c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3\r
+                        c0,0.5-0.2,0.9-0.5,1.3l0.9,0.9c0.2,0.2,0.4,0.2,0.6,0l5.2-5.2l4.4,4.4l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3v0\r
+                        l-5.8,5.8c-0.1-0.6-0.5-1.2-0.9-1.6L14.5,21.3z M27,24c0,1.7-1.3,3-3,3h-8.6l7.9-7.9c0.7-0.7,1-1.6,1-2.5c0-0.9-0.4-1.8-1-2.5\r
+                        l-0.8-0.8L18.1,9l1.3-1.3c0.7-0.7,1-1.6,1-2.5c0-0.8-0.3-1.6-0.8-2.2H24c1.7,0,3,1.3,3,3V24z" />\r
+                    <path class="st0" d="M17.2,12.4c-0.3-0.3-0.8-0.3-1.1,0L12.6,16c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2\r
+                        l3.6-3.6C17.5,13.1,17.5,12.7,17.2,12.4z" />\r
+                    <path class="st0" d="M18.9,14.2c-0.3-0.3-0.8-0.3-1.1,0l-3.6,3.6c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2\r
+                        c0.2,0,0.4-0.1,0.5-0.2l3.6-3.6C19.2,14.9,19.2,14.4,18.9,14.2z" />\r
+                    <path class="st0" d="M17.1,20.6l3.6-3.6c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0L16,19.5c-0.3,0.3-0.3,0.8,0,1.1\r
+                        c0.1,0.1,0.3,0.2,0.5,0.2S17,20.7,17.1,20.6z" />\r
+                </g>\r
             </g>\r
-            <g *ngSwitchCase="nodeType[nodeType.exclusiveGateway]">\r
-                <path class="st0" d="M16.4,15l3.2-3.2c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L15,13.6l-3.2-3.2c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4\r
-                    l3.2,3.2l-3.2,3.2c-0.4,0.4-0.4,1,0,1.4s1,0.4,1.4,0l3.2-3.2l3.2,3.2c0.4,0.4,1,0.4,1.4,0s0.4-1,0-1.4L16.4,15z"\r
-                />\r
-                <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12\r
-                    c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12\r
-                    c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12\r
-                    c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" />\r
-            </g>\r
-            <g *ngSwitchCase="nodeType[nodeType.parallelGateway]">\r
-                <path class="st0" d="M20.5,14H16V9.5c0-0.6-0.4-1-1-1s-1,0.4-1,1V14H9.5c-0.6,0-1,0.4-1,1s0.4,1,1,1H14v4.5c0,0.6,0.4,1,1,1\r
-                    s1-0.4,1-1V16h4.5c0.6,0,1-0.4,1-1S21.1,14,20.5,14z" />\r
-                <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12\r
-                    c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12\r
-                    c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12\r
-                    c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" />\r
-            </g>\r
-            <g *ngSwitchCase="nodeType[nodeType.subProcess]">\r
-                <path class="st0" d="M24.5,1h-18c-2.8,0-5,2.2-5,5v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29.5,3.2,27.2,1,24.5,1z M20.2,27h-9.4\r
-                    v-9.1c0-0.3,0.2-0.5,0.5-0.5h8.4c0.3,0,0.5,0.2,0.5,0.5V27z M27.5,24c0,1.7-1.3,3-3,3h-2.3v-9.1c0-1.4-1.1-2.5-2.5-2.5h-8.4\r
-                    c-1.4,0-2.5,1.1-2.5,2.5V27H6.5c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h18c1.7,0,3,1.3,3,3V24z" />\r
-                <path class="st0" d="M19,21.3h-2.5v-2.5c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1v2.5H12c-0.6,0-1,0.4-1,1s0.4,1,1,1h2.5v2.5\r
-                    c0,0.6,0.4,1,1,1c0.6,0,1-0.4,1-1v-2.5H19c0.6,0,1-0.4,1-1S19.5,21.3,19,21.3z" />\r
-            </g>\r
-            <g *ngSwitchCase="nodeType[nodeType.intermediateCatchEvent]">\r
-                <path class="st0" d="M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15c8.3,0,15-6.7,15-15C30,6.7,23.3,0,15,0z M16,27.9V26\r
-                    c0-0.6-0.4-1-1-1s-1,0.4-1,1v1.9C7.6,27.5,2.5,22.4,2.1,16H4c0.6,0,1-0.4,1-1s-0.4-1-1-1H2.1C2.5,7.6,7.6,2.5,14,2.1V4\r
-                    c0,0.6,0.4,1,1,1s1-0.4,1-1V2.1C22.4,2.5,27.5,7.6,27.9,14H26c-0.6,0-1,0.4-1,1s0.4,1,1,1h1.9C27.5,22.4,22.4,27.5,16,27.9z"\r
-                />\r
-                <path class="st0" d="M20,14h-3.6l2.5-6.6c0.2-0.5-0.1-1.1-0.6-1.3c-0.5-0.2-1.1,0.1-1.3,0.6l-3,8c-0.1,0.3-0.1,0.7,0.1,0.9\r
-                    c0.2,0.3,0.5,0.4,0.8,0.4h5c0.6,0,1-0.4,1-1S20.6,14,20,14z" />\r
-            </g>\r
-            <g *ngSwitchCase="nodeType[nodeType.scriptTask]">\r
-                <path class="st0" d="M24,1H6C3.2,1,1,3.2,1,6v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29,3.2,26.8,1,24,1z M16.9,3.4\r
-                    c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3L17.7,7l-5.3,5.3c-0.2-0.6-0.5-1.2-0.9-1.6\r
-                    c-0.4-0.4-1-0.8-1.6-0.9l5.8-5.8C16,3.6,16.4,3.4,16.9,3.4z M10.3,27H6c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h8.2l-7.4,7.4\r
-                    c-0.1,0.1-0.2,0.2-0.3,0.3c-0.7,0.7-1,1.6-1,2.5c0,0.9,0.4,1.8,1,2.5l5.2,5.2l-1.3,1.3c-0.7,0.7-1,1.6-1,2.5\r
-                    C9.3,25.5,9.7,26.4,10.3,27z M14.1,25.9c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5c-0.4-0.4-0.5-0.8-0.5-1.3\r
-                    c0-0.5,0.2-0.9,0.5-1.3l1.3-1.3l0.5,0.5l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3C14.6,25.1,14.5,25.5,14.1,25.9z M14.5,21.3l-6.8-6.8\r
-                    c-0.4-0.4-0.5-0.8-0.5-1.3c0-0.5,0.2-0.9,0.5-1.3c0.4-0.4,0.8-0.5,1.3-0.5c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3\r
-                    c0,0.5-0.2,0.9-0.5,1.3l0.9,0.9c0.2,0.2,0.4,0.2,0.6,0l5.2-5.2l4.4,4.4l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3v0\r
-                    l-5.8,5.8c-0.1-0.6-0.5-1.2-0.9-1.6L14.5,21.3z M27,24c0,1.7-1.3,3-3,3h-8.6l7.9-7.9c0.7-0.7,1-1.6,1-2.5c0-0.9-0.4-1.8-1-2.5\r
-                    l-0.8-0.8L18.1,9l1.3-1.3c0.7-0.7,1-1.6,1-2.5c0-0.8-0.3-1.6-0.8-2.2H24c1.7,0,3,1.3,3,3V24z" />\r
-                <path class="st0" d="M17.2,12.4c-0.3-0.3-0.8-0.3-1.1,0L12.6,16c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2\r
-                    l3.6-3.6C17.5,13.1,17.5,12.7,17.2,12.4z" />\r
-                <path class="st0" d="M18.9,14.2c-0.3-0.3-0.8-0.3-1.1,0l-3.6,3.6c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2\r
-                    c0.2,0,0.4-0.1,0.5-0.2l3.6-3.6C19.2,14.9,19.2,14.4,18.9,14.2z" />\r
-                <path class="st0" d="M17.1,20.6l3.6-3.6c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0L16,19.5c-0.3,0.3-0.3,0.8,0,1.1\r
-                    c0.1,0.1,0.3,0.2,0.5,0.2S17,20.7,17.1,20.6z" />\r
-            </g>\r
-        </g>\r
-    </svg>\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
+        </svg>\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>\r
 </div>\r
-</div>\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 1d11953..460dff6 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
@@ -9,7 +9,7 @@
  * Contributors:\r
  *     ZTE - initial API and implementation and/or initial documentation\r
  */\r
- .toolbar-head{\r
+.toolbar-head{\r
     color:#404040;\r
     font-size: 14px;\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 382e195..0c5a724 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
@@ -16,7 +16,7 @@
         <div accordion-heading class="toolbar-head">\r
             <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': event?.isOpen, 'fa-chevron-right': !event?.isOpen}"></i>\r
             <i class="fa fa-th-list"></i>\r
-            <span>EVENT</span>\r
+            <span>{{ 'WORKFLOW.BPMN_EVENT' | translate }}</span>\r
         </div>\r
         <div nodeType="startEvent" class="item ui-draggable">\r
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">\r
@@ -25,7 +25,7 @@
                     s15-6.7,15-15S23.3,0,15,0L15,0z" />\r
                 </g>\r
             </svg>\r
-            <span>Start</span>\r
+            <span>{{ 'WORKFLOW.START_EVENT' | translate }}</span>\r
         </div>\r
         <div nodeType="endEvent" class="item ui-draggable">\r
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">\r
@@ -34,7 +34,7 @@
                 s15-6.7,15-15S23.3,0,15,0L15,0z" />\r
                 </g>\r
             </svg>\r
-            <span>End</span>\r
+            <span>{{ 'WORKFLOW.END_EVENT' | translate }}</span>\r
         </div>\r
         <div nodeType="intermediateCatchEvent" class="item ui-draggable">\r
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">\r
@@ -47,7 +47,7 @@
                         c0.2,0.3,0.5,0.4,0.8,0.4h5c0.6,0,1-0.4,1-1S20.6,14,20,14z" />\r
                 </g>\r
             </svg>\r
-            <span>Timer</span>\r
+            <span>{{ 'WORKFLOW.TIMER_EVENT' | translate }}</span>\r
         </div>\r
         <!--\r
         <div nodeType="errorStartEvent" class="item ui-draggable">\r
@@ -82,7 +82,7 @@
         <div accordion-heading class="toolbar-head">\r
             <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': task?.isOpen, 'fa-chevron-right': !task?.isOpen}"></i>\r
             <i class="fa fa-th-list"></i>\r
-            <span>Task</span>\r
+            <span>{{ 'WORKFLOW.BPMN_TASK' | translate }}</span>\r
         </div>\r
         <div *ngIf="!isCatalog" nodeType="toscaNodeManagementTask" class="item ui-draggable">\r
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">\r
@@ -96,7 +96,7 @@
                         C25.7,15.5,25.2,15.1,24.7,15.1z" />\r
                 </g>\r
             </svg>\r
-            <span>TOSCA</span>\r
+            <span>{{ 'WORKFLOW.TOSCA_TASK' | translate }}</span>\r
         </div>\r
         <div *ngIf="isCatalog" nodeType="restTask" class="item ui-draggable">\r
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">\r
@@ -112,7 +112,7 @@
                     />\r
                 </g>\r
             </svg>\r
-            <span>Rest</span>\r
+            <span>{{ 'WORKFLOW.REST_TASK' | translate }}</span>\r
         </div>\r
         <div nodeType="scriptTask" class="item ui-draggable">\r
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">\r
@@ -135,14 +135,14 @@
                         c0.1,0.1,0.3,0.2,0.5,0.2S17,20.7,17.1,20.6z" />\r
                 </g>\r
             </svg>\r
-            <span>Script</span>\r
+            <span>{{ 'WORKFLOW.SCRIPT_TASK' | translate }}</span>\r
         </div>\r
     </accordion-group>\r
     <accordion-group [isOpen]="true" #getway>\r
         <div accordion-heading class="toolbar-head">\r
             <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': getway?.isOpen, 'fa-chevron-right': !getway?.isOpen}"></i>\r
             <i class="fa fa-th-list"></i>\r
-            <span>Gateway</span>\r
+            <span>{{ 'WORKFLOW.BPMN_GETWAY' | translate }}</span>\r
         </div>\r
         <div nodeType="exclusiveGateway" class="item ui-draggable">\r
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">\r
@@ -156,7 +156,7 @@
                         c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" />\r
                 </g>\r
             </svg>\r
-            <span>EXCLUSIVE</span>\r
+            <span>{{ 'WORKFLOW.EXCLUSIVE_GATEWAY' | translate }}</span>\r
         </div>\r
         <div nodeType="parallelGateway" class="item ui-draggable">\r
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">\r
@@ -169,7 +169,7 @@
                         c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" />\r
                 </g>\r
             </svg>\r
-            <span>PARALLEL</span>\r
+            <span>{{ 'WORKFLOW.PARALLEL_GATEWAY' | translate }}</span>\r
         </div>\r
     </accordion-group>\r
     <!-- <accordion-group [isOpen]="true" #structural>\r

diff --git a/sdc-workflow-designer-ui/src/app/model/notice-type.enum.ts b/sdc-workflow-designer-ui/src/app/model/notice-type.enum.ts
new file mode 100644 (file)
index 0000000..5ea6005
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/model/notice-type.enum.ts
@@ -0,0 +1,3 @@
+export enum NoticeType {
+    success, info, warning, danger
+}

diff --git a/sdc-workflow-designer-ui/src/app/model/notice.ts b/sdc-workflow-designer-ui/src/app/model/notice.ts
new file mode 100644 (file)
index 0000000..7f49aaf
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/model/notice.ts
@@ -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
+ */
+import { NoticeType } from './notice-type.enum';
+
+export class Notice {
+    constructor(public type: NoticeType,
+        public content: string,
+        public timeout: number = 0) {
+    }
+}

diff --git a/sdc-workflow-designer-ui/src/app/services/notice.service.ts b/sdc-workflow-designer-ui/src/app/services/notice.service.ts
new file mode 100644 (file)
index 0000000..ea081e9
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/services/notice.service.ts
@@ -0,0 +1,54 @@
+/**
+ * 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 { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+import { Notice } from '../model/notice';
+import { NoticeType } from '../model/notice-type.enum';
+
+/**
+ * NotifyService
+ * display notify infos.
+ */
+@Injectable()
+export class NoticeService {
+    public showNotice = new Subject<Notice>();
+    public showNotice$ = this.showNotice.asObservable();
+    constructor() { }
+
+    public success(content: string, timeout: number = 5000) {
+        this.addNotice(NoticeType.success, content, timeout);
+    }
+
+    public info(content: string, timeout: number = 10000) {
+        this.addNotice(NoticeType.info, content, timeout);
+    }
+
+    public warn(content: string, timeout: number = 30000) {
+        this.addNotice(NoticeType.warning, content, timeout);
+    }
+
+    public error(content: string, timeout: number = 0) {
+        this.addNotice(NoticeType.danger, content, timeout);
+    }
+
+    /**
+     * showNotify
+     * @param type
+     * @param content
+     */
+    private addNotice(type: NoticeType, content: string, timeout: number = 0): void {
+        const notice = new Notice(type, content, timeout);
+        this.showNotice.next(notice);
+    }
+}

diff --git a/sdc-workflow-designer-ui/src/assets/i18n/en.json b/sdc-workflow-designer-ui/src/assets/i18n/en.json
new file mode 100644 (file)
index 0000000..bbd827b
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/assets/i18n/en.json
@@ -0,0 +1,46 @@
+{\r
+    "WORKFLOW": {\r
+        "BPMN_EVENT": "Event",\r
+        "BPMN_TASK": "Task",\r
+        "BPMN_GETWAY": "Getway",\r
+        "BPMN_STRUCTURAL": "Structural",\r
+        "SETTING": "Setting",\r
+        "SAVE": "Save",\r
+        "TEST": "Test",\r
+        "BACK": "Back",\r
+        "START_EVENT": "Start",\r
+        "END_EVENT": "End",\r
+        "ERROR_START_EVENT": "Error Start",\r
+        "ERROR_END_EVENT": "Error End",\r
+        "TOSCA_TASK": "TOSCA",\r
+        "REST_TASK": "REST",\r
+        "SCRIPT_TASK": "SCRIPT",\r
+        "TIMER_EVENT": "Timer",\r
+        "EXCLUSIVE_GATEWAY": "Exclusive",\r
+        "PARALLEL_GATEWAY": "Parallel",\r
+        "SUB_PROCESS": "SubProcess",\r
+        "NODE_NAME": "Name",\r
+        "NODE_TYPE": "Type",\r
+        "TOSCA_NODE": "Node",\r
+        "TOSCA_INTERFACE": "Interface",\r
+        "TOSCA_OPERATION": "Operation",\r
+        "REST_SERVICE": "Service",\r
+        "REST_PATH": "Path",\r
+        "REST_METHOD": "Method",\r
+        "TIMER_TYPE": "Type",\r
+        "TIMER_DURATION": "Duration",\r
+        "TIMER_DATE": "Date",\r
+        "TIMER_CYCLE": "Cycle",\r
+        "CONNECTION_NAME": "Name",\r
+        "CONNECTION_SOURCE": "Source",\r
+        "CONNECTION_TARGET": "Target",\r
+        "CONNECTION_CONDITION": "Condition",\r
+        "SCRIPT_FORMAT":"Script Format",\r
+        "SCRIPT":"Script",\r
+\r
+        "MSG": {\r
+            "SWAGGER_NOT_EXISTS": "Swagger did not exist, please check the 'swagger.json' or service status.",\r
+            "SAVE_SUCCESS": "Save successful."\r
+        }\r
+    }\r
+}\r

diff --git a/sdc-workflow-designer-ui/src/assets/i18n/zh-CN.json b/sdc-workflow-designer-ui/src/assets/i18n/zh-CN.json
new file mode 100644 (file)
index 0000000..cee61f9
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/assets/i18n/zh-CN.json
@@ -0,0 +1,46 @@
+{\r
+    "WORKFLOW": {\r
+        "BPMN_EVENT": "事件",\r
+        "BPMN_TASK": "任务",\r
+        "BPMN_GETWAY": "网关",\r
+        "BPMN_STRUCTURAL": "结构",\r
+        "SETTING": "设置",\r
+        "SAVE": "保存",\r
+        "TEST": "测试",\r
+        "BACK": "返回",\r
+        "START_EVENT": "开始",\r
+        "END_EVENT": "结束",\r
+        "ERROR_START_EVENT": "异常开始",\r
+        "ERROR_END_EVENT": "异常结束",\r
+        "TOSCA_TASK": "TOSCA",\r
+        "REST_TASK": "REST",\r
+        "SCRIPT_TASK": "脚本",\r
+        "TIMER_EVENT": "定时器",\r
+        "EXCLUSIVE_GATEWAY": "唯一条件",\r
+        "PARALLEL_GATEWAY": "并行条件",\r
+        "SUB_PROCESS": "子流程",\r
+        "NODE_NAME": "名称",\r
+        "NODE_TYPE": "类型",\r
+        "TOSCA_NODE": "节点",\r
+        "TOSCA_INTERFACE": "接口",\r
+        "TOSCA_OPERATION": "方法",\r
+        "REST_SERVICE": "服务",\r
+        "REST_PATH": "路径",\r
+        "REST_METHOD": "方法",\r
+        "TIMER_TYPE": "类型",\r
+        "TIMER_DURATION": "间隔",\r
+        "TIMER_DATE": "固定日期",\r
+        "TIMER_CYCLE": "循环日期",\r
+        "CONNECTION_NAME": "名称",\r
+        "CONNECTION_SOURCE": "源",\r
+        "CONNECTION_TARGET": "目标",\r
+        "CONNECTION_CONDITION": "条件",\r
+        "SCRIPT_FORMAT":"脚本类型",\r
+        "SCRIPT":"脚本",\r
+\r
+        "MSG": {\r
+            "SWAGGER_NOT_EXISTS": "Swagger信息不存在请检查'swagger.json'或服务状态。",\r
+            "SAVE_SUCCESS": "保存成功"\r
+        }\r
+    }\r
+}\r