inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add event gateway component

Browse Source
This commit is contained in:
mauriziovitale84 2016-10-21 15:10:14 +01:00
parent 66cbc4f64b
commit e673cd0cd9
7 changed files with 145 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

7
ng2-components/ng2-activiti-analytics/src/components/diagrams/gateway/diagram-event-gateway.component.html Normal file
View File

@ -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>

56
ng2-components/ng2-activiti-analytics/src/components/diagrams/gateway/diagram-event-gateway.component.ts Normal file
View File

@ -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();
}
}

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

@ -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
];

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

@ -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;

5
ng2-components/ng2-activiti-analytics/src/components/raphael/index.ts
View File

@ -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
];

68
ng2-components/ng2-activiti-analytics/src/components/raphael/raphael-pentagon.component.ts Normal file
View File

@ -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));
}
}