From 626d74e4c51aa47da5d5d643b5b7a04188b5552a Mon Sep 17 00:00:00 2001 From: Lvbo163 Date: Thu, 31 Aug 2017 14:29:07 +0800 Subject: support set parameter for workflow support set input and output params for start event Issue-ID: SDC-120 Change-Id: Ib5a87692e06817b2676b3f2f2223e1ced117b5c9 Signed-off-by: Lvbo163 --- .../src/app/components/canvas/canvas.component.ts | 2 +- .../src/app/components/node/node.component.css | 70 ++++++++++++++++++---- .../src/app/components/node/node.component.html | 56 +++++++++-------- .../src/app/components/node/node.component.ts | 2 +- .../components/parameter/parameter.component.html | 32 ++++++++++ .../components/parameter/parameter.component.ts | 67 +++++++++++++++++++++ .../components/property/properties.component.html | 2 +- .../components/property/properties.component.ts | 2 +- .../start-event-parameters.component.html | 25 ++++++++ .../start-event-parameters.component.ts | 35 +++++++++++ 10 files changed, 253 insertions(+), 40 deletions(-) create mode 100644 sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html create mode 100644 sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts create mode 100644 sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html create mode 100644 sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts (limited to 'sdc-workflow-designer-ui/src/app/components') diff --git a/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts index e1a40297..ee002963 100644 --- a/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts @@ -17,7 +17,7 @@ import { JsPlumbService } from '../../services/jsplumb.service'; import { ActivatedRoute } from "@angular/router"; import { DataAccessService } from "../../services/data-access/data-access.service"; import { WorkflowService } from "../../services/workflow.service"; -import { Workflow } from "../../model/workflow"; +import { Workflow } from "../../model/workflow/workflow"; /** * main canvas, it contains two parts: canvas and node property component 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 24e657ca..08b7322d 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 @@ -1,10 +1,31 @@ +/** + * 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 + */ + .node { - position:absolute; - width: 100px; - height: 50px; - border: 2px solid black; - } + border: 1px solid transparent; + cursor: pointer; + display: inline-block; + position: absolute; + z-index: 2; +} +.node:hover { + border: 1px solid #123456; + box-shadow: 2px 2px 19px #444; + -o-box-shadow: 2px 2px 19px #444; + -webkit-box-shadow: 2px 2px 19px #444; + -moz-box-shadow: 2px 2px 19px #fff; + opacity: 0.9; +} /** * Anchors @@ -53,7 +74,7 @@ left: 40%; } -/*右箭头*/ +/*right-arrow*/ .right { width: 10px; height: 10px; @@ -86,7 +107,7 @@ left: -2px; } -/*左箭头*/ +/*left-arrow*/ .left { width: 10px; height: 10px; @@ -103,7 +124,7 @@ position: absolute; left: 0; top: 0; - z-index: 5; /*兼容ie8-*/ + z-index: 5; border-top: 5px transparent dashed; border-left: 5px transparent dashed; border-bottom: 5px transparent dashed; @@ -119,7 +140,7 @@ left: 2px; } -/*上箭头*/ +/*top-arrow*/ .top { width: 9px; height: 9px; @@ -152,7 +173,7 @@ border-bottom: 4px white solid; } -/*下箭头*/ +/*bottom-arrow*/ .bottom { width: 9px; height: 9px; @@ -185,3 +206,32 @@ .bottom-arrow2 { border-top: 4px white solid; } + + +.node .startEvent { + border-radius: 30px; + background-size: cover; + border: 1px solid rgb(0, 0, 0); + height: 30px; + width: 30px; +} + +.node .endEvent { + border-radius: 30px; + background-size: cover; + border: 2px solid rgb(0, 0, 0); + height: 30px; + width: 30px; +} + +.node .name { + padding: 10px 15px; +} + +.node:hover { + border: 1px dotted #000; +} + +.node.focus { + border: 1px dotted red; +} 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 f875718d..090f324d 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,30 +11,34 @@ * ZTE - initial API and implementation and/or initial documentation */ --> -
-
{{node.name}}
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
+ +
+
+ +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.ts b/sdc-workflow-designer-ui/src/app/components/node/node.component.ts index 24b784fe..676ba998 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 @@ -14,7 +14,7 @@ import { Component, AfterViewInit, Input } from '@angular/core'; import { JsPlumbService } from '../../services/jsplumb.service'; import { BroadcastService } from "../../services/broadcast.service"; -import { WorkflowNode } from "../../model/workflow-node"; +import { WorkflowNode } from "../../model/workflow/workflow-node"; /** * workflow node component diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html new file mode 100644 index 00000000..da7dfb1d --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html @@ -0,0 +1,32 @@ + + +
+
+ + +
+
+
+ + +
+
+
+ +
+
diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts new file mode 100644 index 00000000..f42caf66 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts @@ -0,0 +1,67 @@ +/** + * 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, EventEmitter, Input, OnInit, Output } from '@angular/core'; + +import { ValueSource } from '../../model/value-source.enum'; +import { Parameter } from '../../model/workflow/parameter'; +import { DataAccessService } from "../../services/data-access/data-access.service"; + +/** + * this component contains in property component if the corresponding node has parameter properties + * eg. task node have input and output params, start event node has input param + */ +@Component({ + selector: 'b4t-parameter', + templateUrl: 'parameter.component.html', +}) +export class ParameterComponent implements OnInit { + @Input() public param: Parameter; + @Input() public valueSource: ValueSource[]; + @Input() public canEditName: boolean; + @Input() public showLabel = true; + @Input() public canDelete: boolean; + @Output() public paramChange = new EventEmitter(); + @Output() delete: EventEmitter = new EventEmitter(); + + public sourceEnum = ValueSource; + public valueGroupClass; + public valueClass; + public showValueSource: boolean = true; + + constructor(private dataAccessService: DataAccessService) { } + + public ngOnInit(): void { + if (1 === this.valueSource.length) { + this.showValueSource = false; + } + this.valueClass = { + 'col-md-9': this.showValueSource, + 'col-md-12': !this.showValueSource + }; + + this.valueGroupClass = { + 'col-md-7': this.canDelete, + 'col-md-9': !this.canDelete + }; + } + + public deleteParam(): void { + this.delete.emit(); + } + + public modelChange(value: any) { + this.param.value = value; + this.paramChange.emit(this.param) + } + +} diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.html b/sdc-workflow-designer-ui/src/app/components/property/properties.component.html index 00aea176..d7a8500d 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.html +++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.html @@ -38,6 +38,6 @@
- TODO: property for different node types + diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts b/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts index bedf682f..0630f94b 100644 --- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts @@ -12,7 +12,7 @@ import { AfterViewInit, Component } from '@angular/core'; -import { WorkflowNode } from '../../model/workflow-node'; +import { WorkflowNode } from '../../model/workflow/workflow-node'; import { BroadcastService } from '../../services/broadcast.service'; import { JsPlumbService } from '../../services/jsplumb.service'; import { WorkflowService } from '../../services/workflow.service'; diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html b/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html new file mode 100644 index 00000000..d6aaafd8 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html @@ -0,0 +1,25 @@ + + +
+
+
+ +
+
+ + \ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts b/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts new file mode 100644 index 00000000..65838792 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts @@ -0,0 +1,35 @@ +/******************************************************************************* + * 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, Input, ViewChild } from '@angular/core'; +import { Subscription } from 'rxjs/Subscription'; + +import { ValueSource } from '../../../model/value-source.enum'; +import { Parameter } from '../../../model/workflow/parameter'; +import { StartEvent } from '../../../model/workflow/start-event'; +import { BroadcastService } from '../../../services/broadcast.service'; + +@Component({ + selector: 'b4t-start-event-parameters', + templateUrl: 'start-event-parameters.component.html', +}) +export class StartEventParametersComponent { + @Input() public node: StartEvent; + public sources: ValueSource[] = [ValueSource.String]; + + public create(): void { + this.node.parameters.push(new Parameter('', '', ValueSource[ValueSource.String])); + } + + public delete(index: number): void { + this.node.parameters.splice(index, 1); + } +} -- cgit 1.2.3-korg