diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html index 17c7db8080..075f17f953 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html @@ -10,6 +10,9 @@
+
+ +
diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/gateway/diagram-event-gateway.component.html b/ng2-components/ng2-activiti-analytics/src/components/diagrams/gateway/diagram-event-gateway.component.html new file mode 100644 index 0000000000..bf3e80e11e --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/gateway/diagram-event-gateway.component.html @@ -0,0 +1,7 @@ + + + + \ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/gateway/diagram-event-gateway.component.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/gateway/diagram-event-gateway.component.ts new file mode 100644 index 0000000000..8d8bb108fb --- /dev/null +++ b/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(); + } +} diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/gateway/index.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/gateway/index.ts index e226fd0224..cdf7470711 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/gateway/index.ts +++ b/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 ]; diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/services/diagram-color.service.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/services/diagram-color.service.ts index 9df420e968..4e64dccc6f 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/services/diagram-color.service.ts +++ b/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_HIGHLIGHT_STROKE = '2'; + static TASK_STROKE = 1; + static TASK_HIGHLIGHT_STROKE = 2; + static CALL_ACTIVITY_STROKE = 2; totalColors: any; diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/index.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/index.ts index b1bea981bd..c3f98248da 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/raphael/index.ts +++ b/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 ]; diff --git a/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-pentagon.component.ts b/ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-pentagon.component.ts new file mode 100644 index 0000000000..cdc6a26892 --- /dev/null +++ b/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)); + } +}