import { Component, AfterViewInit, OnInit } from '@angular/core';
import { JsPlumbService } from "./services/jsplumb.service";
import { WorkflowService } from "./services/workflow.service";
-import { WorkflowNode } from "./model/workflow-node";
-import { Workflow } from "./model/workflow";
+import { WorkflowNode } from "./model/workflow/workflow-node";
+import { Workflow } from "./model/workflow/workflow";
import { DataAccessService } from "./services/data-access/data-access.service";
import { ActivatedRoute } from "@angular/router";
import { BroadcastService } from "./services/broadcast.service";
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";
@NgModule({
declarations: [
AppComponent,
CanvasComponent,
NodeComponent,
+ ParameterComponent,
PropertiesComponent,
+ StartEventParametersComponent,
ToolbarComponent,
],
imports: [
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
+/**\r
+ * Copyright (c) 2017 ZTE Corporation.\r
+ * All rights reserved. This program and the accompanying materials\r
+ * are made available under the terms of the Eclipse Public License v1.0\r
+ * and the Apache License 2.0 which both accompany this distribution,\r
+ * and are available at http://www.eclipse.org/legal/epl-v10.html\r
+ * and http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Contributors:\r
+ * ZTE - initial API and implementation and/or initial documentation\r
+ */\r
+\r
.node {\r
- position:absolute;\r
- width: 100px;\r
- height: 50px;\r
- border: 2px solid black;\r
- }\r
+ border: 1px solid transparent;\r
+ cursor: pointer;\r
+ display: inline-block;\r
+ position: absolute;\r
+ z-index: 2;\r
+}\r
\r
+.node:hover {\r
+ border: 1px solid #123456;\r
+ box-shadow: 2px 2px 19px #444;\r
+ -o-box-shadow: 2px 2px 19px #444;\r
+ -webkit-box-shadow: 2px 2px 19px #444;\r
+ -moz-box-shadow: 2px 2px 19px #fff;\r
+ opacity: 0.9;\r
+}\r
\r
/**\r
* Anchors\r
left: 40%;\r
}\r
\r
-/*右箭头*/\r
+/*right-arrow*/\r
.right {\r
width: 10px;\r
height: 10px;\r
left: -2px;\r
}\r
\r
-/*左箭头*/\r
+/*left-arrow*/\r
.left {\r
width: 10px;\r
height: 10px;\r
position: absolute;\r
left: 0;\r
top: 0;\r
- z-index: 5; /*兼容ie8-*/\r
+ z-index: 5;\r
border-top: 5px transparent dashed;\r
border-left: 5px transparent dashed;\r
border-bottom: 5px transparent dashed;\r
left: 2px;\r
}\r
\r
-/*上箭头*/\r
+/*top-arrow*/\r
.top {\r
width: 9px;\r
height: 9px;\r
border-bottom: 4px white solid;\r
}\r
\r
-/*下箭头*/\r
+/*bottom-arrow*/\r
.bottom {\r
width: 9px;\r
height: 9px;\r
.bottom-arrow2 {\r
border-top: 4px white solid;\r
}\r
+\r
+\r
+.node .startEvent {\r
+ border-radius: 30px;\r
+ background-size: cover;\r
+ border: 1px solid rgb(0, 0, 0);\r
+ height: 30px;\r
+ width: 30px;\r
+}\r
+\r
+.node .endEvent {\r
+ border-radius: 30px;\r
+ background-size: cover;\r
+ border: 2px solid rgb(0, 0, 0);\r
+ height: 30px;\r
+ width: 30px;\r
+}\r
+\r
+.node .name {\r
+ padding: 10px 15px;\r
+}\r
+\r
+.node:hover {\r
+ border: 1px dotted #000;\r
+}\r
+\r
+.node.focus {\r
+ border: 1px dotted red;\r
+}\r
* ZTE - initial API and implementation and/or initial documentation\r
*/\r
-->\r
-<div class="node" id="{{node.id}}" (dblclick)="showProperties()" [style.top]="node.top + 'px'" [style.left]="node.left + 'px'">\r
- <div>{{node.name}}</div>\r
- <div class="anchor anchors anchor-left">\r
- <span class="left">\r
- <i class="left-arrow1"></i>\r
- <i class="left-arrow2"></i>\r
- </span>\r
- </div>\r
- <div class="anchor anchors anchor-right">\r
- <span class="right">\r
- <i class="right-arrow1"></i>\r
- <i class="right-arrow2"></i>\r
- </span>\r
- </div>\r
- <div class="anchor anchors anchor-top">\r
- <span class="top">\r
- <i class="top-arrow1"></i>\r
- <i class="top-arrow2"></i>\r
- </span>\r
- </div>\r
- <div class="anchor anchors anchor-bottom">\r
- <span class="bottom">\r
- <i class="bottom-arrow1"></i>\r
- <i class="bottom-arrow2"></i>\r
- </span>\r
- </div>\r
+\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>\r
\r
import { JsPlumbService } from '../../services/jsplumb.service';\r
import { BroadcastService } from "../../services/broadcast.service";\r
-import { WorkflowNode } from "../../model/workflow-node";\r
+import { WorkflowNode } from "../../model/workflow/workflow-node";\r
\r
/**\r
* workflow node component\r
--- /dev/null
+<!--\r
+/**\r
+ * Copyright (c) 2017 ZTE Corporation.\r
+ * All rights reserved. This program and the accompanying materials\r
+ * are made available under the terms of the Eclipse Public License v1.0\r
+ * and the Apache License 2.0 which both accompany this distribution,\r
+ * and are available at http://www.eclipse.org/legal/epl-v10.html\r
+ * and http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Contributors:\r
+ * ZTE - initial API and implementation and/or initial documentation\r
+ */\r
+-->\r
+\r
+<div class="form-group row">\r
+ <div *ngIf="showLabel" class="col-md-3 text-md-right">\r
+ <input *ngIf="canEditName" class="form-control" type="text" [(ngModel)]="param.name">\r
+ <label *ngIf="!canEditName" class="form-control-label">{{param.name}}</label>\r
+ </div>\r
+ <div [ngClass]="valueGroupClass">\r
+ <div [ngSwitch]="param.valueSource">\r
+ <input *ngSwitchCase="sourceEnum[sourceEnum.String]" [ngClass]="valueClass" class="form-control"\r
+ type="text" [ngModel]="param.value" (ngModelChange)="modelChange($event)">\r
+ <!-- TODO add plan and Top parameters -->\r
+ </div>\r
+ </div>\r
+ <div *ngIf="canDelete" class="col-md-2">\r
+ <button type="button" class="btn oes-red-bg pull-right" (click)="deleteParam()">\r
+ <i class="fa fa-minus"></i>\r
+ </button>\r
+ </div>\r
+</div>\r
--- /dev/null
+/**\r
+ * Copyright (c) 2017 ZTE Corporation.\r
+ * All rights reserved. This program and the accompanying materials\r
+ * are made available under the terms of the Eclipse Public License v1.0\r
+ * and the Apache License 2.0 which both accompany this distribution,\r
+ * and are available at http://www.eclipse.org/legal/epl-v10.html\r
+ * and http://www.apache.org/licenses/LICENSE-2.0\r
+ *\r
+ * Contributors:\r
+ * ZTE - initial API and implementation and/or initial documentation\r
+ */\r
+\r
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\r
+\r
+import { ValueSource } from '../../model/value-source.enum';\r
+import { Parameter } from '../../model/workflow/parameter';\r
+import { DataAccessService } from "../../services/data-access/data-access.service";\r
+\r
+/**\r
+ * this component contains in property component if the corresponding node has parameter properties\r
+ * eg. task node have input and output params, start event node has input param\r
+ */\r
+@Component({\r
+ selector: 'b4t-parameter',\r
+ templateUrl: 'parameter.component.html',\r
+})\r
+export class ParameterComponent implements OnInit {\r
+ @Input() public param: Parameter;\r
+ @Input() public valueSource: ValueSource[];\r
+ @Input() public canEditName: boolean;\r
+ @Input() public showLabel = true;\r
+ @Input() public canDelete: boolean;\r
+ @Output() public paramChange = new EventEmitter<Parameter>();\r
+ @Output() delete: EventEmitter<Parameter> = new EventEmitter<Parameter>();\r
+\r
+ public sourceEnum = ValueSource;\r
+ public valueGroupClass;\r
+ public valueClass;\r
+ public showValueSource: boolean = true;\r
+\r
+ constructor(private dataAccessService: DataAccessService) { }\r
+\r
+ public ngOnInit(): void {\r
+ if (1 === this.valueSource.length) {\r
+ this.showValueSource = false;\r
+ }\r
+ this.valueClass = {\r
+ 'col-md-9': this.showValueSource,\r
+ 'col-md-12': !this.showValueSource\r
+ };\r
+\r
+ this.valueGroupClass = {\r
+ 'col-md-7': this.canDelete,\r
+ 'col-md-9': !this.canDelete\r
+ };\r
+ }\r
+\r
+ public deleteParam(): void {\r
+ this.delete.emit();\r
+ }\r
+\r
+ public modelChange(value: any) {\r
+ this.param.value = value;\r
+ this.paramChange.emit(this.param)\r
+ }\r
+\r
+}\r
</div>
<!-- TODO add property for different node types -->
- <span>TODO: property for different node types</span>
+ <b4t-start-event-parameters *ngIf="'startEvent' == node.type" [node]="node"></b4t-start-event-parameters>
</div>
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';
--- /dev/null
+<!--
+/*******************************************************************************
+ * 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="form-group row">
+ <div class="col-md-10"></div>
+ <div class="col-md-2">
+ <button (click)="create();" type="button" class="btn blue1 pull-right">
+ <i class="fa fa-plus"></i>
+ </button>
+ </div>
+</div>
+
+<b4t-parameter *ngFor="let param of node.parameters; let i = index;" [param]="param" [canEditName]="true"
+ [valueSource]="sources" [canDelete]="true" (delete)="delete(i)"></b4t-parameter>
\ No newline at end of file
--- /dev/null
+/*******************************************************************************
+ * 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);
+ }
+}
--- /dev/null
+/*******************************************************************************
+ * 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
+ *******************************************************************************/
+
+export enum ValueSource {
+ String,
+ Plan,
+ // Topology, // TODO implement Topology properties in R2
+}
--- /dev/null
+/*******************************************************************************
+ * 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
+ *******************************************************************************/
+
+export enum ValueType {
+ String,
+ Number,
+ Date,
+}
--- /dev/null
+import {WorkflowNode} from './workflow-node';
+/**
+ * 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
+ */
+
+export class EndEvent extends WorkflowNode {
+}
--- /dev/null
+/*******************************************************************************
+ * 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
+ *******************************************************************************/
+
+export enum NodeType {
+ startEvent,
+ endEvent,
+ toscaNodeManagementTask,
+ restTask,
+ exclusiveGateway,
+ parallelGateway,
+ subProcess,
+ intermediateCatchEvent,
+}
--- /dev/null
+/**
+ * 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 { ValueSource } from '../value-source.enum';
+import { ValueType } from '../value-type.enum';
+
+export class Parameter {
+ constructor(public name: string, public value: string, public valueSource: string,
+ public type: string = ValueType[ValueType.String]) {
+ }
+}
import { Injectable } from '@angular/core';\r
\r
/**\r
- * WorkflowNode\r
+ * Position\r
+ * Workflow node position\r
*/\r
-export class WorkflowNode {\r
- constructor(public id: string, public name: string, public type: string, public top: number, public left: number) {}\r
+export class Position {\r
+ constructor(public top: number, public left: number, public width?: number, public height?: number) { }\r
}\r
--- /dev/null
+/**
+ * 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
+ */
+
+export class SequenceFlow {
+
+ constructor(public sourceRef: string, public targetRef: string, public name?: string, public condition?:string) { }
+}
--- /dev/null
+/**
+ * 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 { Parameter } from './parameter';
+import { WorkflowNode } from './workflow-node';
+
+export class StartEvent extends WorkflowNode {
+ public parameters: Parameter[] = [];
+}
--- /dev/null
+/**
+ * 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 { Position } from './position';
+import { SequenceFlow } from './sequence-flow';
+
+export class WorkflowNode {
+ public constructor(public id: string, public name: string, public type: string, public position: Position, public sequenceFlows: SequenceFlow[]) {}
+}
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
-import { WorkflowNode } from '../model/workflow-node';
+import { WorkflowNode } from '../model/workflow/workflow-node';
/**
* BroadcastService
*/\r
\r
import { Injectable } from '@angular/core';\r
-import { WorkflowNode } from "../../model/workflow-node";\r
+import { WorkflowNode } from "../../model/workflow/workflow-node";\r
import { Observable } from "rxjs/Observable";\r
import { HttpService } from "../../util/http.service";\r
-import { Workflow } from "../../model/workflow";\r
+import { Workflow } from "../../model/workflow/workflow";\r
\r
/**\r
* CatalogService\r
import { Injectable } from '@angular/core';\r
import { CatalogService } from "./catalog.service";\r
import { Observable } from "rxjs/Observable";\r
-import { WorkflowNode } from "../../model/workflow-node";\r
+import { WorkflowNode } from "../../model/workflow/workflow-node";\r
import { HttpService } from "../../util/http.service";\r
-import { Workflow } from "../../model/workflow";\r
+import { Workflow } from "../../model/workflow/workflow";\r
\r
/**\r
* SdcService\r
\r
// add connection to model data while a new connection is build\r
this.jsplumbInstance.bind('connection', info => {\r
+ this.workflowService.addSequenceFlow(info.connection.sourceId, info.connection.targetId);\r
+\r
info.connection.bind('click', connection => {\r
this.jsplumbInstance.select({ connections: [connection] }).delete();\r
+ this.workflowService.deleteSequenceFlow(connection.sourceId, connection.targetId);\r
});\r
});\r
\r
*/\r
\r
import { Injectable } from '@angular/core';\r
-import { WorkflowNode } from "../model/workflow-node";\r
+import { WorkflowNode } from "../model/workflow/workflow-node";\r
import { DataAccessService } from "./data-access/data-access.service";\r
import { Observable } from "rxjs/Observable";\r
-import { Workflow } from "../model/workflow";\r
+import { Workflow } from "../model/workflow/workflow";\r
+import { Position } from "../model/workflow/position";\r
+import { NodeType } from "../model/workflow/node-type.enum";\r
+import { StartEvent } from "../model/workflow/start-event";\r
+import { SequenceFlow } from "../model/workflow/sequence-flow";\r
\r
/**\r
* WorkflowService\r
}\r
\r
public addNode(name: string, type: string, top: number, left: number): WorkflowNode {\r
- const node = new WorkflowNode(this.createId(), name, type, top, left);\r
+ let node: WorkflowNode;\r
+ switch (type) {\r
+ case NodeType[NodeType.startEvent]:\r
+ node = new StartEvent(this.createId(), name, type, new Position(top, left), []);\r
+ break;\r
+ default:\r
+ node = new WorkflowNode(this.createId(), name, type, new Position(top, left), []);\r
+ break;\r
+ }\r
+\r
this.workflow.nodes.push(node);\r
return node;\r
}\r
\r
public deleteNode(nodeId: string): WorkflowNode {\r
+ // delete related connections\r
+ this.workflow.nodes.forEach(node => this.deleteSequenceFlow(node.id, nodeId));\r
+\r
// delete current node\r
const index = this.workflow.nodes.findIndex(node => node.id === nodeId);\r
if (index !== -1) {\r
const node = this.workflow.nodes.splice(index, 1)[0];\r
+ node.sequenceFlows = [];\r
return node;\r
}\r
\r
return undefined;\r
}\r
\r
+ public addSequenceFlow(sourceId: string, targetId: string) {\r
+ const node = this.getNodeById(sourceId);\r
+ if (node) {\r
+ const index = node.sequenceFlows.findIndex(sequenceFlow => sequenceFlow.targetRef === targetId);\r
+ if (index === -1) {\r
+ node.sequenceFlows.push(new SequenceFlow(sourceId, targetId));\r
+ }\r
+ }\r
+ }\r
+\r
+ public deleteSequenceFlow(sourceId: string, targetId: string) {\r
+ const node = this.getNodeById(sourceId);\r
+ if (node) {\r
+ const index = node.sequenceFlows.findIndex(sequenceFlow => sequenceFlow.targetRef === targetId);\r
+ if (index !== -1) {\r
+ node.sequenceFlows.splice(index, 1);\r
+ }\r
+ }\r
+ }\r
+\r
public getNodeById(sourceId: string): WorkflowNode {\r
return this.workflow.nodes.find(node => node.id === sourceId);\r
}\r
Code Review / sdc / sdc-workflow-designer.git / commitdiff