Add diagram parallel gateway

ng2-components/ng2-activiti-analytics/src/components/diagrams/gateway/diagram-parallel-gateway.component.html

@@ -0,0 +1,3 @@
+<diagram-gateway [data]="data"></diagram-gateway>
+<raphael-plus [center]="center" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                 [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-plus>

ng2-components/ng2-activiti-analytics/src/components/diagrams/gateway/diagram-parallel-gateway.component.ts

@@ -0,0 +1,52 @@
+/*!
+ * @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-parallel-gateway',
+    templateUrl: './diagram-parallel-gateway.component.html',
+    styleUrls: ['./diagram-parallel-gateway.component.css']
+})
+export class DiagramParallelGatewayComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    center: any = {};
+    width: any;
+    height: any;
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 3};
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.center.x = this.data.x;
+        this.center.y = this.data.y;
+        this.width = this.data.width;
+        this.height = this.data.height;
+
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
+        this.options.fillColors = this.diagramColorService.getFillColour(this.data.id);
+        this.options.fillOpacity = this.diagramColorService.getFillOpacity();
+    }
+}

ng2-components/ng2-activiti-analytics/src/components/diagrams/gateway/index.ts

@@ -17,12 +17,15 @@
 
 import { DiagramGatewayComponent } from './diagram-gateway.component';
 import { DiagramExclusiveGatewayComponent } from './diagram-exclusive-gateway.component';
+import { DiagramParallelGatewayComponent } from './diagram-parallel-gateway.component';
 
 // primitives
 export * from './diagram-gateway.component';
 export * from './diagram-exclusive-gateway.component';
+export * from './diagram-parallel-gateway.component';
 
 export const DIAGRAM_GATEWAY_DIRECTIVES: any[] = [
     DiagramGatewayComponent,
-    DiagramExclusiveGatewayComponent
+    DiagramExclusiveGatewayComponent,
+    DiagramParallelGatewayComponent
 ];

ng2-components/ng2-activiti-analytics/src/components/raphael/index.ts

@@ -20,6 +20,7 @@ import { RaphaelRectDirective } from './raphael-rect.component';
 import { RaphaelTextDirective } from './raphael-text.component';
 import { RaphaelFlowArrowDirective } from './raphael-flow-arrow.component';
 import { RaphaelCrossDirective } from './raphael-cross.component';
+import { RaphaelPlusDirective } from './raphael-plus.component';
 import { RaphaelRhombusDirective } from './raphael-rhombus.component';
 
 // primitives
@@ -28,6 +29,7 @@ export * from './raphael-rect.component';
 export * from './raphael-text.component';
 export * from './raphael-flow-arrow.component';
 export * from './raphael-cross.component';
+export * from './raphael-plus.component';
 export * from './raphael-rhombus.component';
 
 export const RAPHAEL_DIRECTIVES: any[] = [
@@ -36,5 +38,6 @@ export const RAPHAEL_DIRECTIVES: any[] = [
     RaphaelTextDirective,
     RaphaelFlowArrowDirective,
     RaphaelCrossDirective,
+    RaphaelPlusDirective,
     RaphaelRhombusDirective
 ];

ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-plus.component.ts

@@ -0,0 +1,58 @@
+/*!
+ * @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 { Directive, OnInit, ElementRef, Input, Output, EventEmitter } from '@angular/core';
+import { Point } from './models/point';
+import { RaphaelBase } from './raphael-base';
+import { RaphaelService } from './raphael.service';
+
+@Directive({selector: 'raphael-plus'})
+export class RaphaelPlusDirective extends RaphaelBase implements OnInit {
+    @Input()
+    center: Point;
+
+    @Input()
+    fillColors: any;
+
+    @Input()
+    stroke: any;
+
+    @Input()
+    strokeWidth: any;
+
+    @Input()
+    fillOpacity: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    constructor(public elementRef: ElementRef,
+                raphaelService: RaphaelService) {
+        super(elementRef, raphaelService);
+    }
+
+    ngOnInit() {
+        console.log(this.elementRef);
+        let opts = {'stroke-width': this.strokeWidth, 'fill': this.fillColors, 'stroke': this.stroke, 'fill-opacity': this.fillOpacity};
+        this.draw(this.center, opts);
+    }
+
+    public draw(center: Point, opts?: any) {
+        let path = this.paper.path('M 6.75,16 L 25.75,16 M 16,6.75 L 16,25.75').attr(opts);
+        return path.transform('T' + (center.x + 4) + ',' + (center.y + 4));
+    }
+}