From 589acc8b337aeb9bddff03b4d8caa1bc2cb288dc Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Fri, 28 Oct 2016 11:10:29 +0100 Subject: [PATCH] Add pool and lane components --- .../src/components/diagram.component.html | 3 ++ .../raphael/raphael-text.component.ts | 8 ++- .../swimlanes/diagram-lane.component.html | 4 ++ .../swimlanes/diagram-lane.component.ts | 54 +++++++++++++++++++ .../swimlanes/diagram-lanes.component.html | 5 ++ .../swimlanes/diagram-lanes.component.ts | 37 +++++++++++++ .../swimlanes/diagram-pool.component.html | 4 ++ .../swimlanes/diagram-pool.component.ts | 54 +++++++++++++++++++ .../swimlanes/diagram-pools.component.html | 6 +++ .../swimlanes/diagram-pools.component.ts | 37 +++++++++++++ .../src/components/swimlanes/index.ts | 35 ++++++++++++ 11 files changed, 246 insertions(+), 1 deletion(-) create mode 100644 ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.html create mode 100644 ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.ts create mode 100644 ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.html create mode 100644 ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.ts create mode 100644 ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.html create mode 100644 ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.ts create mode 100644 ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.html create mode 100644 ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.ts create mode 100644 ng2-components/ng2-activiti-diagrams/src/components/swimlanes/index.ts diff --git a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.html b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.html index 3f2240fcdd..9cf62cc2d4 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.html +++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.html @@ -61,4 +61,7 @@ +
+ +
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-text.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-text.component.ts index b116d5df89..bb177072bb 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-text.component.ts +++ b/ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-text.component.ts @@ -28,6 +28,9 @@ export class RaphaelTextDirective extends RaphaelBase implements OnInit { @Input() position: Point; + @Input() + transform: string; + @Input() text: string; @@ -48,11 +51,14 @@ export class RaphaelTextDirective extends RaphaelBase implements OnInit { } public draw(position: Point, text: string) { - return this.paper.text(position.x, position.y, text).attr({ + let textPaper = this.paper.text(position.x, position.y, text).attr({ 'text-anchor' : 'middle', 'font-family' : 'Arial', 'font-size' : '11', 'fill' : '#373e48' }); + + textPaper.transform(this.transform); + return textPaper; } } diff --git a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.html b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.html new file mode 100644 index 0000000000..a4460506bd --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.html @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.ts new file mode 100644 index 0000000000..325b018f63 --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.ts @@ -0,0 +1,54 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core'; +import { DiagramColorService } from '../../services/diagram-color.service'; + +@Component({ + moduleId: module.id, + selector: 'diagram-lane', + templateUrl: './diagram-lane.component.html' +}) +export class DiagramLaneComponent { + @Input() + lane: any; + + @Output() + onError = new EventEmitter(); + + rectLeftCorner: any; + width: any; + height: any; + + textPosition: any; + text: string; + textTransform: string; + options: any = {stroke: '#000000', fillColors: 'none', fillOpacity: '', strokeWidth: '1', radius: 0}; + + constructor(public elementRef: ElementRef, + private diagramColorService: DiagramColorService) {} + + ngOnInit() { + this.rectLeftCorner = {x: this.lane.x, y: this.lane.y}; + this.width = this.lane.width; + this.height = this.lane.height; + + this.textPosition = {x: this.lane.x + 10, y: this.lane.y + ( this.lane.height / 2 )}; + this.text = this.lane.name; + this.textTransform = 'r270'; + } +} diff --git a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.html b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.html new file mode 100644 index 0000000000..ef914e2b45 --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.html @@ -0,0 +1,5 @@ +
+
+ +
+
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.ts new file mode 100644 index 0000000000..072175d68c --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.ts @@ -0,0 +1,37 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'diagram-lanes', + templateUrl: './diagram-lanes.component.html' +}) +export class DiagramLanesComponent { + @Input() + lanes: any []; + + @Output() + onError = new EventEmitter(); + + constructor(public elementRef: ElementRef) {} + + ngOnInit() { + + } +} diff --git a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.html b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.html new file mode 100644 index 0000000000..a4460506bd --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.html @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.ts new file mode 100644 index 0000000000..59dd0a0dde --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.ts @@ -0,0 +1,54 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core'; +import { DiagramColorService } from '../../services/diagram-color.service'; + +@Component({ + moduleId: module.id, + selector: 'diagram-pool', + templateUrl: './diagram-pool.component.html' +}) +export class DiagramPoolComponent { + @Input() + pool: any; + + @Output() + onError = new EventEmitter(); + + rectLeftCorner: any; + width: any; + height: any; + + textPosition: any; + text: string; + textTransform: string; + options: any = {stroke: '#000000', fillColors: 'none', fillOpacity: '', strokeWidth: '1', radius: 0}; + + constructor(public elementRef: ElementRef, + private diagramColorService: DiagramColorService) {} + + ngOnInit() { + this.rectLeftCorner = {x: this.pool.x, y: this.pool.y}; + this.width = this.pool.width; + this.height = this.pool.height; + + this.textPosition = {x: this.pool.x + 14, y: this.pool.y + ( this.pool.height / 2 )}; + this.text = this.pool.name; + this.textTransform = 'r270'; + } +} diff --git a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.html b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.html new file mode 100644 index 0000000000..e963bcdbad --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.html @@ -0,0 +1,6 @@ +
+
+ + +
+
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.ts new file mode 100644 index 0000000000..e54b1f0704 --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.ts @@ -0,0 +1,37 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'diagram-pools', + templateUrl: './diagram-pools.component.html' +}) +export class DiagramPoolsComponent { + @Input() + pools: any []; + + @Output() + onError = new EventEmitter(); + + constructor(public elementRef: ElementRef) {} + + ngOnInit() { + + } +} diff --git a/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/index.ts b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/index.ts new file mode 100644 index 0000000000..218e2b88fb --- /dev/null +++ b/ng2-components/ng2-activiti-diagrams/src/components/swimlanes/index.ts @@ -0,0 +1,35 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { DiagramPoolsComponent } from './diagram-pools.component'; +import { DiagramPoolComponent } from './diagram-pool.component'; + +import { DiagramLanesComponent } from './diagram-lanes.component'; +import { DiagramLaneComponent } from './diagram-lane.component'; + +// primitives +export * from './diagram-pools.component'; +export * from './diagram-pool.component'; +export * from './diagram-lanes.component'; +export * from './diagram-lane.component'; + +export const DIAGRAM_SWIMLANES_DIRECTIVES: any[] = [ + DiagramPoolsComponent, + DiagramPoolComponent, + DiagramLanesComponent, + DiagramLaneComponent +];