Add event gateway component

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

@@ -10,6 +10,9 @@
             <div *ngSwitchCase="'InclusiveGateway'">
                 <diagram-inclusive-gateway [data]="element"></diagram-inclusive-gateway>
             </div>
+            <div *ngSwitchCase="'EventGateway'">
+                <diagram-event-gateway [data]="element"></diagram-event-gateway>
+            </div>
             <div *ngSwitchCase="'ParallelGateway'">
                 <diagram-parallel-gateway [data]="element"></diagram-parallel-gateway>
             </div>

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

@@ -0,0 +1,7 @@
+<diagram-gateway [data]="data"></diagram-gateway>
+<raphael-circle [center]="center" [radius]="circleRadiusInner" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
+                [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
+<raphael-circle [center]="center" [radius]="circleRadiusOuter" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
+                [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
+<raphael-pentagon [center]="centerPentagon" [strokeWidth]="pentaStrokeWidth" [stroke]="options.stroke"
+                  [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-pentagon>

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

@@ -0,0 +1,56 @@
+/*!
+ * @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-event-gateway',
+    templateUrl: './diagram-event-gateway.component.html',
+    styleUrls: ['./diagram-event-gateway.component.css']
+})
+export class DiagramEventGatewayComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    center: any = {};
+    centerPentagon: any = {};
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 0.5};
+
+    circleRadiusInner = 10.4;
+    circleRadiusOuter = 11.7;
+
+    pentaStrokeWidth = 1.39999998;
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.center.x = this.data.x + (this.data.width / 2);
+        this.center.y = this.data.y + (this.data.height / 2);
+        this.centerPentagon.x = this.data.x;
+        this.centerPentagon.y = this.data.y;
+
+        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

@@ -19,16 +19,19 @@ import { DiagramGatewayComponent } from './diagram-gateway.component';
 import { DiagramExclusiveGatewayComponent } from './diagram-exclusive-gateway.component';
 import { DiagramInclusiveGatewayComponent } from './diagram-inclusive-gateway.component';
 import { DiagramParallelGatewayComponent } from './diagram-parallel-gateway.component';
+import { DiagramEventGatewayComponent } from './diagram-event-gateway.component';
 
 // primitives
 export * from './diagram-gateway.component';
 export * from './diagram-exclusive-gateway.component';
 export * from './diagram-inclusive-gateway.component';
 export * from './diagram-parallel-gateway.component';
+export * from './diagram-event-gateway.component';
 
 export const DIAGRAM_GATEWAY_DIRECTIVES: any[] = [
     DiagramGatewayComponent,
     DiagramExclusiveGatewayComponent,
     DiagramInclusiveGatewayComponent,
-    DiagramParallelGatewayComponent
+    DiagramParallelGatewayComponent,
+    DiagramEventGatewayComponent
 ];

ng2-components/ng2-activiti-analytics/src/components/diagrams/services/diagram-color.service.ts

@@ -27,8 +27,9 @@ export class DiagramColorService {
 
     static ACTIVITY_FILL_COLOR = '#f9f9f9';
 
-    static TASK_STROKE = '1';
+    static TASK_STROKE = 1;
-    static TASK_HIGHLIGHT_STROKE = '2';
+    static TASK_HIGHLIGHT_STROKE = 2;
+    static CALL_ACTIVITY_STROKE = 2;
 
     totalColors: any;
 

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

@@ -22,6 +22,7 @@ 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';
+import { RaphaelPentagonDirective } from './raphael-pentagon.component';
 
 // primitives
 export * from './raphael-circle.component';
@@ -31,6 +32,7 @@ export * from './raphael-flow-arrow.component';
 export * from './raphael-cross.component';
 export * from './raphael-plus.component';
 export * from './raphael-rhombus.component';
+export * from './raphael-pentagon.component';
 
 export const RAPHAEL_DIRECTIVES: any[] = [
     RaphaelCircleDirective,
@@ -39,5 +41,6 @@ export const RAPHAEL_DIRECTIVES: any[] = [
     RaphaelFlowArrowDirective,
     RaphaelCrossDirective,
     RaphaelPlusDirective,
-    RaphaelRhombusDirective
+    RaphaelRhombusDirective,
+    RaphaelPentagonDirective
 ];

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

@@ -0,0 +1,68 @@
+/*!
+ * @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-pentagon'})
+export class RaphaelPentagonDirective extends RaphaelBase implements OnInit {
+    @Input()
+    center: Point;
+
+    @Input()
+    fillColors: any;
+
+    @Input()
+    stroke: any;
+
+    @Input()
+    strokeWidth: any;
+
+    @Input()
+    fillOpacity: any;
+
+    @Input()
+    strokeLinejoin: 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,
+            'stroke-linejoin': 'bevel'
+        };
+        this.draw(this.center, opts);
+    }
+
+    public draw(center: Point, opts?: any) {
+        let penta = this.paper.path('M 20.327514,22.344972 L 11.259248,22.344216 L 8.4577203,13.719549' +
+            ' L 15.794545,8.389969 L 23.130481,13.720774 L 20.327514,22.344972 z').attr(opts);
+        penta.transform('T' + (center.x + 4) + ',' + (center.y + 4));
+    }
+}